網頁美工設計

網頁設計師必須要學習的視覺層級技巧

編輯：時間：2018-03-09 08:42:09

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

　　那么，怎么做出有效的視覺層級?當然，不同的產品要求不同的方法，但仍有一些相同的方法幫助組織UI元素。接下來我會提供一些有用的技巧，關于如何為移動和web產品創建具有說服力的視覺層級。

　　1、始終記住商業目標

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

　　2、考慮瀏覽軌跡

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

　　F型主要是出現在有大量內容的頁面或屏幕上，比如博客、新聞平臺等，用戶的視線是以F型瀏覽：首先，用戶在水平方向瀏覽頁面頂部的信息，然后往下瀏覽頁面，再在比較窄一些的水平方向瀏覽頁面，最后在垂直方向，閱讀頁面左邊的信息，尋找頁面段落句子的關鍵詞。

　　Z型出現在沒有大量內容的文本上，或者不需要往下滑動頁面。這個軌跡是像這樣的：用戶首先會在左上角瀏覽頁面的標題，尋找關鍵信息，然后瀏覽到右上角，最后從左到右沿著水平方向瀏覽頁面底部。

　　了解了這兩個模式后，設計師組織內容時會把核心UI元素放在最容易被看到的地方來吸引用戶。

　　3、易用性優先

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

　　4、留白

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

1/3 1 2 3 下一頁尾頁

<< 上一篇：響應式網頁設計的9項基本原則

>> 下一篇：網頁設計中的css用法特點注意事項

推薦資訊