“設(shè)計”除了眾所周知的美觀效果外，最重要的意義其實是對所要表達的信息進行層級的劃分，以達到有效的傳達效果。我們在描述一個長相良好的人時往往會有“五官立體、五官精致”之類的評價。設(shè)計同樣如此，信息層級劃分清晰的頁面，不僅看起來舒適整齊，而且使用戶更易于理解內(nèi)容信息。因此，好的設(shè)計肯定是信息層級劃分準(zhǔn)確、主次清晰的。

在繪畫中，層級一般可分為近景、中景與遠景（背景），主體往往置于中景進行細致地描繪，近景與遠景（背景）則起到營造空間感和對比的作用，進而更加強調(diào)突出中景的主體元素。設(shè)計是同樣的道理，主體元素一樣需要前景和背景的襯托才能更加突出。

△ 繪畫中前、中、后層級的劃分

△ 海報設(shè)計的前、中、后信息層級的劃分

△ UI設(shè)計的前、中、后信息層級的劃分

設(shè)計中信息層級的劃分一般會用到以下幾種方法，可單獨使用，也可多個方法結(jié)合使用。

1  大小對比

很好理解，通過視覺元素體量上的對比進行層級的劃分，體量越大則層級越高，也就越突出。Appstore的頁面中，利用字號大小和圖片大小來區(qū)分信息層級，一目了然。iOS11中去除了以往的背景和裝飾元素，很多頁面均利用文字大小來區(qū)分層級，使整體頁面看上去層級更加清晰易懂。

△ AppStore中的大小對比

2 明暗對比

明暗對比即通過顏色的明度來進行對比。一般在處理文字信息層級時較為常用，通過使用不同明度或灰度的文字來劃分層級。知乎的信息流中，標(biāo)題用較深的顏色作為第一層級，用于讓用戶快速判斷核心信息，簡介用略淺的顏色可以使用戶清晰閱讀，其余文字信息則作為輔助信息置灰處理為第三層級。

△ 知乎APP中的文字的明暗對比

3  色彩對比

重點信息除了可以用較大體量的元素和明暗對比表達外，往往受限于頁面尺寸，則可以考慮使用添加背景底色來進行突出。代表性的是支付寶頭部的藍色，不僅強調(diào)了“掃一掃”等主要功能，而且大面積使用品牌色更能向用戶有效傳達了品牌信息。天貓APP首頁為了突出限時搶購的模塊，也使用了非常亮的黃色來吸引眼球，與黑色文字形成強烈反差，進而突出了有效信息。

△ 支付寶中的色彩對比

△ 天貓APP中的色彩對比

4  虛實對比

虛實對比在背景信息中較為常用，使用虛化的背景來突出前景，借鑒于攝影中的景深效果。書旗小說詳情頁頭部的背景處理，不僅能突出重點信息，而且能夠較好營造氛圍感、場景感和立體感。

△ 書旗小說APP中的虛實對比

5  前后對比

前后對比類似于虛實對比，但層級劃分更加明顯，往往應(yīng)用于兩類完全不同的信息之間，一般情況下，彈窗、浮層等均屬于這一對比范圍。ofo、各類地圖產(chǎn)品等為了以更大區(qū)域展示背景中的地圖信息，往往會采用這一形式。在信息量巨大的地圖上利用浮層形式進行前后對比，進而突出操作信息。

△ ofo中的前后對比

6  動靜對比

在信息較多，色彩較豐富的頁面中，大小與色彩對比往往就不能派上用場了。此時如果向再突出某個元素，則可以考慮使用動態(tài)圖形。如抖音的新手引導(dǎo)、咸魚的二級入口icon。不過使用動態(tài)元素需要節(jié)制，不僅在數(shù)量上要嚴(yán)格控制，在動畫頻率上也需要謹(jǐn)慎。過多或過快的動態(tài)元素不僅起不到突出信息的作用，反而容易令頁面失去焦點，激發(fā)用戶急躁和煩亂的情緒。

△ 抖音的動態(tài)新手引導(dǎo)

△ 咸魚APP中的動態(tài)二級icon