2019-9-20 濤濤
如“黃金分割”之于構圖，“視覺層級”之于頁面節奏，都是基礎且必不可少。本文與你分享如果一步步從原型開始構建APP視覺層級。
工作中，你是否經常聽到“視覺層級”這詞？就猶如“用戶體驗”一樣讓人耳熟能詳。拋開裝逼因素，這兩個詞的多次提及，可見其重要程度。
音樂有節奏，好的音樂能通過音階的高低起伏變化表達音樂情緒。
例如：《Main Title》即使你沒看過《冰與火之歌》，光聽音樂你是否能感覺到音樂給你營造千軍萬馬恢弘之勢。《Playing Love from The Legend of 1900》你是否想到一個寧靜夜晚，佳人與你傾訴衷腸，柔情似水。
反之，節奏不好，則無法和聽眾達成共鳴。
繪畫有節奏，張馳有度、大小對比、遠近疏密變化，構成了畫面的節奏。反之，沒有節奏，則畫面平淡。
同樣的，APP UI也有節奏。頁面良好的視覺層級，方便用戶在瀏覽的過程中抓取關鍵信息，幫助用戶快速達到目的。
拿到原型，明確頁面目的和需求的1、2、3層級，并理解消化。開啟設計師的隱形技能：根據一句話或者一個詞，在大腦開始構建畫面布局。在構思階段，建議同時瀏覽同類型UI設計以及交互布局，在找參考的過程中，結合自身APP的頁面目的一起構思，并在紙上繪出可行性方案。
由于，APP是為人服務。那么我們需要知道，人眼瀏覽習慣模式的科學依據。
曾有一數據顯示：如果在3S內無法吸引用戶，你將流失這個用戶。如今我們所在的時代快節奏、碎片化，用戶的日常瀏覽是“掃描”而非“閱讀”。所以，了解人眼瀏覽習慣，變得十分重要。
人眼瀏覽習慣有：F型；Z型；其他；
還有，其他瀏覽模式，海哥HMI人機交互在他一篇文中《用戶是怎么閱讀的？尼爾森F模型》提到：
在明白人眼視線流程后，我們開始運用視覺手段，吸引用戶來看我們想給他看的內容，并按照我們的預想順序，依次閱讀。
對比，讓視覺有輕重，用戶看起來不累。需要強調的信息放大，沒那么重要的東西縮小。如果同一層級的模塊，通過顏色或者樣式的變化來表達。如：字體大小對比，顏色對比；模塊大小對比；圖片大小對比等。
字體千千萬形狀各不相同，然而他們都有著相似之處：字重的大與小。在同一字號大小下，字重大的筆畫，以面構成，會比字重小的，更具視覺沖擊力。
需要強調的信息，字號變大，字體加粗，這樣就能區分主與次，建立更易讀的視覺層級。
為了各個模塊間的和諧組合和視覺上的凸顯與美觀，我們需要靈活運用各種樣式表達。卡片投影；形狀；材質等；
同一類別信息，模塊化整合。便于用戶瀏覽操作，視覺上不零散，整體美觀。多模塊化的組合，注意留白以及頁面的節奏輕重。
以上要點，要根據實際情況靈活巧妙運用。在做的過程中，通過Mirror工具實時查看頁面效果，不斷改進，加強表達。
宗白華說過：“一切藝術都趨向音樂”。確切說一切“廣義的”藝術都趨向于音樂狀態。優秀的UI視覺層級表達，就如音樂一樣有節奏變化，波浪起伏，是一種視覺享受。無論是平面還是UI，視覺層級，需要像“黃金分割原理”一樣，是內化進設計師的身體里一個元素。多多實戰練習，不需要死記硬背，就會刻在我們的大腦深處。
文章來源：站酷