一、重要性
說到視覺信息層級的重要性懦冰，就不得不說結(jié)合我們的工作重要性來說灶轰。
我們的工作擔(dān)任整個產(chǎn)品構(gòu)成到上線（由抽象概念到具體界面）的“表現(xiàn)層”。肩負(fù)著與客戶接觸的最后一道工序刷钢，我們的主要任務(wù)就是把交互設(shè)計師提供的交互原型線框圖設(shè)計成大眾接受的美觀界面笋颤，以保證用戶在使用產(chǎn)品時有非常好的初始印象同時留下強烈的品牌記憶。
ps：核心目的——商業(yè)價值的最大化
設(shè)計應(yīng)當(dāng)符合設(shè)計目的内地，不應(yīng)只追求藝術(shù)效果
這就需要我們需要建立正確的價值觀伴澄，不要因為設(shè)計而設(shè)計，要知道為什么這么做阱缓，對商業(yè)的價值是什么非凌。
說白了我們在做任何設(shè)計的時候，需要考慮的是：
用戶想看到什么（初步行為）荆针，以及我們想讓用戶看到什么（誘導(dǎo)）
結(jié)合我們的工作職能總結(jié)為：
視覺界面設(shè)計關(guān)注的是如何處理和安排可視元素敞嗡，傳達(dá)行為和信息颁糟。
視覺設(shè)計者做的是設(shè)計的組織、視覺暗示喉悴、啟示用戶行為的交流模式棱貌。
合理組織、處理箕肃、安排界面元素婚脱，便是我們今天提到的：建立界面視覺信息層級
二、信息梳理
①親密性原則
為了更好的劃分界面的信息層級勺像，我第一步要做就是信息組織貴啦起惕。
這里我們借鑒（寫給大家的設(shè)計書）種親密性原則：彼此相關(guān)的元素應(yīng)當(dāng)靠近，組織在一起咏删。如果多個元素之間存在很近的親密性，他們就應(yīng)成為一個視覺單位问词，而不是多個孤立的元素督函。這又助與組織信息，減少混亂激挪，位讀者提供清晰視覺信息結(jié)構(gòu)辰狡，如下圖：
親密性的根本目的在于組織性。我們需要將相同組織的信息組織在一起垄分，為頁面的內(nèi)部建立起一個良好的信息瀏覽順序宛篇，符合用戶的閱讀習(xí)慣，避免用戶在瀏覽信息的時候耗費過多的精力甚至導(dǎo)致用戶看不懂的情況出現(xiàn)薄湿。這里我們以淘淘票為案例：
通過上圖我們能看出在淘淘票種將同種屬性的信息進(jìn)行了有序的組織叫倍，使得界面看起來整齊有序，并符合用戶的自上而下豺瘤、從左到右的閱讀習(xí)慣吆倦。
②什么是有效的視覺層級?
左圖為手機拍攝照片，右圖為經(jīng)過我處理過的模擬眼睛焦點閱讀的照片
我們可以看出坐求，利用設(shè)備拍攝時蚕泽，我們采集信息的模式是一次性完成的。拍攝時統(tǒng)攬界面中的所有信息桥嗤。但是當(dāng)人對信息的采集模式時须妻，是根據(jù)眼球的移動，按照一定順序獲取信息泛领。不能統(tǒng)攬頁面所有信息荒吏，當(dāng)眼睛焦點在那里的時候，才可看到哪里的信息师逸。
設(shè)計師需要考慮的就是讓用戶通過眼球移動司倚，按照一定的順序獲取信息豆混，幫助用戶高效自然獲取和理解信息。
強烈的視覺層次感是通過界面上視覺元素提供清晰的瀏覽順序來實現(xiàn)的动知，也就是說皿伺，用戶每次都能按照同一個順序瀏覽同一些元素。
??對比原則?
為了能夠更好的區(qū)分信息層層級盒粮，我們第二件要做的事情就是“對比”鸵鸥，我們通過加強一些元素的對比來區(qū)分信息的重要程度。
我們這里在借鑒（寫給大家的設(shè)計書）種的對比原則：對比的核心思想是避免避免頁面上的元素過于相似丹皱，我們需要通過對比讓頁面上重要的元素能首先引起的注意妒穴，而不是整體都十分的平庸，讓用戶感覺無從下手摊崭。
一般情況下我們可以通過字體讼油、粗細(xì)、大小呢簸、色彩矮台、的對比來突出頁面的重要信息，以增加頁面的節(jié)奏感根时。
1??大小對比
很好理解瘦赫，通過視覺元素體量上的對比進(jìn)行層級的劃分，體量越大則層級越高蛤迎，也就越突出确虱。Appstore的頁面中，利用字號大小和圖片大小來區(qū)分信息層級替裆，一目了然校辩。iOS11中去除了以往的背景和裝飾元素，很多頁面均利用文字大小來區(qū)分層級扎唾，使整體頁面看上去層級更加清晰易懂召川。
2?明暗對比
明暗對比即通過顏色的明度來進(jìn)行對比。一般在處理文字信息層級時較為常用胸遇，通過使用不同明度或灰度的文字來劃分層級荧呐。知乎的信息流中，標(biāo)題用較深的顏色作為第一層級纸镊，用于讓用戶快速判斷核心信息倍阐，簡介用略淺的顏色可以使用戶清晰閱讀，其余文字信息則作為輔助信息置灰處理為第三層級逗威。
3??色彩對比
重點信息除了可以用較大體量的元素和明暗對比表達(dá)外峰搪，往往受限于頁面尺寸，則可以考慮使用添加背景底色來進(jìn)行突出凯旭。代表性的是支付寶頭部的藍(lán)色概耻，不僅強調(diào)了“掃一掃”等主要功能使套，而且大面積使用品牌色更能向用戶有效傳達(dá)了品牌信息。天貓APP首頁為了突出限時搶購的模塊鞠柄，也使用了非常亮的黃色來吸引眼球侦高，與黑色文字形成強烈反差，進(jìn)而突出了有效信息厌杜。
4??虛實對比
虛實對比在背景信息中較為常用奉呛，使用虛化的背景來突出前景，借鑒于攝影中的景深效果夯尽。書旗小說詳情頁頭部的背景處理瞧壮，不僅能突出重點信息，而且能夠較好營造氛圍感匙握、場景感和立體感咆槽。
5??前后對比
前后對比類似于虛實對比，但層級劃分更加明顯圈纺，往往應(yīng)用于兩類完全不同的信息之間罗晕，一般情況下，彈窗赠堵、浮層等均屬于這一對比范圍。ofo法褥、各類地圖產(chǎn)品等為了以更大區(qū)域展示背景中的地圖信息茫叭，往往會采用這一形式。在信息量巨大的地圖上利用浮層形式進(jìn)行前后對比半等，進(jìn)而突出操作信息揍愁。
6??動靜對比
在信息較多，色彩較豐富的頁面中杀饵，大小與色彩對比往往就不能派上用場了莽囤。此時如果向再突出某個元素，則可以考慮使用動態(tài)圖形切距。如抖音的新手引導(dǎo)朽缎、咸魚的二級入口icon。不過使用動態(tài)元素需要節(jié)制谜悟，不僅在數(shù)量上要嚴(yán)格控制话肖，在動畫頻率上也需要謹(jǐn)慎。過多或過快的動態(tài)元素不僅起不到突出信息的作用葡幸，反而容易令頁面失去焦點最筒，激發(fā)用戶急躁和煩亂的情緒。
粗細(xì)對比
三蔚叨、建立有效的視覺層級的前期分析
UI設(shè)計是科學(xué)與藝術(shù)結(jié)合的綜合技能床蜘。在考慮如何建立信息層級前辙培，我們必須知道什么是重要的，以及背后的邏輯是什么邢锯。
比如一個音樂播放頁面扬蕊，在看似簡單的上一首，暫停弹囚，下一首的按鈕設(shè)計中厨相，按鈕的大小，彼此的間距都關(guān)系到用戶的點擊效率和操作難度鸥鹉。
我們應(yīng)該謹(jǐn)記蛮穿，設(shè)計應(yīng)當(dāng)符合設(shè)計目的，不應(yīng)只追求藝術(shù)效果毁渗。好的設(shè)計師做出來的界面践磅，一定是在產(chǎn)品邏輯合理下安排的信息層級合理的界面。
建立有效的視覺層級前灸异，進(jìn)行如下幾步的分析：
1府适、?頁面定位（幫助分析）
用戶是誰
用戶來自哪里，即從什么渠道來到該頁面
頁面內(nèi)容定位肺樟，提供什么檐春、不提供什么
頁面作用
2、?信息優(yōu)先級
一級信息吸引用戶
二級信息幫助理解
三級信息詳細(xì)理解
3么伯、?用戶核心行為
行為最終導(dǎo)向
了解疟暖，有意愿（導(dǎo)向）
了解更多細(xì)節(jié)（最終導(dǎo)向）
