網(wǎng)頁(yè)美工設計

網(wǎng)頁(yè)設計師必須要學(xué)習的視覺(jué)層級技巧

編輯：時(shí)間：2018-03-09 08:42:09

　　有效的視覺(jué)層級是產(chǎn)品成功的基礎，能以有效的方式組織UI元素，使內容容易理解，看起來(lái)舒適整潔。視覺(jué)元素的呈現對用戶(hù)體驗有很重要的影響，如果組成元素能被巧妙地運用，用戶(hù)就能輕松地瀏覽產(chǎn)品，和產(chǎn)品互動(dòng)，并且享受這個(gè)互動(dòng)過(guò)程。

　　那么，怎么做出有效的視覺(jué)層級?當然，不同的產(chǎn)品要求不同的方法，但仍有一些相同的方法幫助組織UI元素。接下來(lái)我會(huì )提供一些有用的技巧，關(guān)于如何為移動(dòng)和web產(chǎn)品創(chuàng )建具有說(shuō)服力的視覺(jué)層級。

　　1、始終記住商業(yè)目標

　　產(chǎn)品背后總有商業(yè)目標的支撐。為了達到這個(gè)目標，設計團隊需要梳理出哪些UI元素更為重要，根據他們的角色排優(yōu)先級，比如在電子商務(wù)網(wǎng)站上的所有元素各自都有他們的任務(wù)。產(chǎn)品圖片通常是主要的視覺(jué)焦點(diǎn)，因為需要鼓勵用戶(hù)考慮購買(mǎi)。接下來(lái)是圖片的標題，標題要解釋產(chǎn)品是什么。然后是CTA按鈕，促使用戶(hù)購買(mǎi)產(chǎn)品。通過(guò)思考網(wǎng)站或app的商業(yè)和市場(chǎng)目標，設計團隊能有效地優(yōu)化視覺(jué)層級，讓產(chǎn)品在一堆信息中脫穎而出。

　　2、考慮瀏覽軌跡

　　在我們之前的文章中提過(guò)，在仔細閱讀網(wǎng)頁(yè)前，人們會(huì )大致瀏覽下什么是他們真正感興趣的。不同的研究，包括尼爾森-諾爾曼團隊做的研究，都已表明被廣泛采用的瀏覽模式是F型或Z型。

　　F型主要是出現在有大量?jì)热莸捻?yè)面或屏幕上，比如博客、新聞平臺等，用戶(hù)的視線(xiàn)是以F型瀏覽：首先，用戶(hù)在水平方向瀏覽頁(yè)面頂部的信息，然后往下瀏覽頁(yè)面，再在比較窄一些的水平方向瀏覽頁(yè)面，最后在垂直方向，閱讀頁(yè)面左邊的信息，尋找頁(yè)面段落句子的關(guān)鍵詞。

　　Z型出現在沒(méi)有大量?jì)热莸奈谋旧希蛘卟恍枰禄瑒?dòng)頁(yè)面。這個(gè)軌跡是像這樣的：用戶(hù)首先會(huì )在左上角瀏覽頁(yè)面的標題，尋找關(guān)鍵信息，然后瀏覽到右上角，最后從左到右沿著(zhù)水平方向瀏覽頁(yè)面底部。

　　了解了這兩個(gè)模式后，設計師組織內容時(shí)會(huì )把核心UI元素放在最容易被看到的地方來(lái)吸引用戶(hù)。

　　3、易用性?xún)?yōu)先

　　我們常常認為視覺(jué)層級好像只是針對審美層面，但其實(shí)不是這樣的。首先，通過(guò)構建和組織視覺(jué)元素，設計師需要確保產(chǎn)品清晰可用，導航能起到作用。光建立在審美層面的視覺(jué)層級是不能起到有效作用的，組織結構差的用戶(hù)界面會(huì )帶來(lái)不好的用戶(hù)體驗。所以，構建視覺(jué)層級時(shí)，設計師需要考慮UI元素的功能是什么，以及它們在引導用戶(hù)的過(guò)程中所扮演的角色。

　　4、留白

　　留白或者說(shuō)負形，不僅僅是指界面元素之間的區域，它也是視覺(jué)構成的一個(gè)關(guān)鍵部分。留白是一種能讓所有界面元素被用戶(hù)注意到的工具，設計師們能用它組合或分離UI組件，以創(chuàng )建有效布局。而且留白有利于強調需要用戶(hù)特別注意的元素，也是創(chuàng )建視覺(jué)層級的有效工具，需要設計師平衡使用。

1/3 1 2 3 下一頁(yè) 尾頁(yè)

<< 上一篇：響應式網(wǎng)頁(yè)設計的9項基本原則

>> 下一篇：網(wǎng)頁(yè)設計中的css用法特點(diǎn)注意事項

推薦資訊