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