工作中，你是否經(jīng)常聽到“視覺層級”這詞？就猶如“用戶體驗”一樣讓人耳熟能詳。拋開裝逼因素，這兩個詞的多次提及，可見其重要程度。

音樂有節(jié)奏，好的音樂能通過音階的高低起伏變化表達音樂情緒。

例如：《Main Title》即使你沒看過《冰與火之歌》，光聽音樂你是否能感覺到音樂給你營造千軍萬馬恢弘之勢?！禤laying Love from The Legend of 1900》你是否想到一個寧靜夜晚，佳人與你傾訴衷腸，柔情似水。

反之，節(jié)奏不好，則無法和聽眾達成共鳴。

繪畫有節(jié)奏，張馳有度、大小對比、遠近疏密變化，構(gòu)成了畫面的節(jié)奏。反之，沒有節(jié)奏，則畫面平淡。

同樣的，APP UI也有節(jié)奏。頁面良好的視覺層級，方便用戶在瀏覽的過程中抓取關(guān)鍵信息，幫助用戶快速達到目的。

那么，如何構(gòu)建？

1.明確頁面目的與需求主次

拿到原型，明確頁面目的和需求的1、2、3層級，并理解消化。開啟設(shè)計師的隱形技能：根據(jù)一句話或者一個詞，在大腦開始構(gòu)建畫面布局。在構(gòu)思階段，建議同時瀏覽同類型UI設(shè)計以及交互布局，在找參考的過程中，結(jié)合自身APP的頁面目的一起構(gòu)思，并在紙上繪出可行性方案。 

由于，APP是為人服務。那么我們需要知道，人眼瀏覽習慣模式的科學依據(jù)。

2.人眼瀏覽模式

曾有一數(shù)據(jù)顯示：如果在3S內(nèi)無法吸引用戶，你將流失這個用戶。如今我們所在的時代快節(jié)奏、碎片化，用戶的日常瀏覽是“掃描”而非“閱讀”。所以，了解人眼瀏覽習慣，變得十分重要。

人眼瀏覽習慣有：F型；Z型；其他；

F型瀏覽模式

Z型瀏覽模式

還有，其他瀏覽模式，海哥HMI人機交互在他一篇文中《用戶是怎么閱讀的？尼爾森F模型》提到：

蛋糕模式：眼睛只關(guān)注標題和副標題時，水平一層一層；

斑點模式：跳過大塊的文本和掃描，尋找特定的東西，比如按鈕，數(shù)字；

標記模式：輕掃頁面時，將眼睛聚焦在一個地方，呈圓形分布。（移動端會常發(fā)生）；

承諾模式：通篇閱讀，用戶確實充滿動力和興趣。

在明白人眼視線流程后，我們開始運用視覺手段，吸引用戶來看我們想給他看的內(nèi)容，并按照我們的預想順序，依次閱讀。

3.設(shè)計手法

a.對比

對比，讓視覺有輕重，用戶看起來不累。需要強調(diào)的信息放大，沒那么重要的東西縮小。如果同一層級的模塊，通過顏色或者樣式的變化來表達。如：字體大小對比，顏色對比；模塊大小對比；圖片大小對比等。 

b.字重

字體千千萬形狀各不相同，然而他們都有著相似之處：字重的大與小。在同一字號大小下，字重大的筆畫，以面構(gòu)成，會比字重小的，更具視覺沖擊力。

需要強調(diào)的信息，字號變大，字體加粗，這樣就能區(qū)分主與次，建立更易讀的視覺層級。 

c.樣式

為了各個模塊間的和諧組合和視覺上的凸顯與美觀，我們需要靈活運用各種樣式表達?？ㄆ队?；形狀；材質(zhì)等； 

d.模塊化整合與留白

同一類別信息，模塊化整合。便于用戶瀏覽操作，視覺上不零散，整體美觀。多模塊化的組合，注意留白以及頁面的節(jié)奏輕重。 

以上要點，要根據(jù)實際情況靈活巧妙運用。在做的過程中，通過Mirror工具實時查看頁面效果，不斷改進，加強表達。

總結(jié)

宗白華說過：“一切藝術(shù)都趨向音樂”。確切說一切“廣義的”藝術(shù)都趨向于音樂狀態(tài)。優(yōu)秀的UI視覺層級表達，就如音樂一樣有節(jié)奏變化，波浪起伏，是一種視覺享受。無論是平面還是UI，視覺層級，需要像“黃金分割原理”一樣，是內(nèi)化進設(shè)計師的身體里一個元素。多多實戰(zhàn)練習，不需要死記硬背，就會刻在我們的大腦深處。 

文章來源：站酷