關(guān)于層次性我們也聽不少人說起過，也看過不少關(guān)于講解層次性的文章，但是具體什么是層次性,該如何在設(shè)計中優(yōu)秀的體現(xiàn)出層次性，什么地方該體現(xiàn)層次性這就是一個值得我們?nèi)ド罹康脑掝}。

                       

一.什么是層次性

設(shè)計中的層次性是指通過視覺差異帶來的層級感以及信息之間的差異化所帶來的層級感。但是能夠體現(xiàn)層次性的方式有很多很多種,接下來的文中會通過幾方面來介紹一些我們?nèi)粘Ｊ褂玫囊恍┊a(chǎn)品了解一下他們是如何來通過哪些形式來體現(xiàn)層次性的。

二.層次性的重要性

層次性對于設(shè)計師來說是非常重要的,相信大家在生活中交稿的時候常聽到的一句話就是“感覺設(shè)計的太平了,可不可以有層次感一點 豐富一點” 

三.如何做好層次性

1. 利用線、面、留白將模塊進(jìn)行分割 

通過線、面將板塊之間進(jìn)行區(qū)分是目前運(yùn)用比較常見的一種方式（如下圖），可以看出在該界面中“毒”是通過線來區(qū)分不同模塊,而“支付寶”是通過分割塊來進(jìn)行模塊與模塊之間的區(qū)分。

                                             

這兩種分割的好處在于能夠明確不同信息之間的層級關(guān)系。同時也讓界面看起來更加簡潔有層級關(guān)系。

2. 利用投影、大小、背景圖突出視覺層次

為了突出界面的視覺層次，我們還可以通過投影、大小背景圖等增加界面的對比，從而突出重點信息。

   

投影：是界面對比較常用的一種方式，其優(yōu)勢是提升界面的空間感，改變視覺次序，通過投影大小的變化還可以營造不同的空間關(guān)系，多用于卡片風(fēng)格的設(shè)計中。比如支付寶卡片的設(shè)計，添加投影后讓界面視覺層次更突出了。

大小：是大眾最為知的對比方式，其優(yōu)勢是通過大小對比能夠很快的拉開視覺層次，同時能夠很好的引導(dǎo)用戶瀏覽路徑，比如摩拜單黑色的大按鈕遠(yuǎn)遠(yuǎn)都能看見，該頁面就一個目的掃碼用車。

   

 

背景圖：往往不如投影和大小常用，但是它的使用可以將模塊從其他樣式中凸顯出來，多用于banner、推薦等等重要模塊中，比如華為商城的banner模塊，該模塊直接突出促銷產(chǎn)品。

3. 利用顏色對比提高視覺感受

顏色是最容易感知到的對比方式，通過顏色我們可以明確哪些是重要信息，在使用中我們可以通過色相、明暗、飽和度上進(jìn)行對比，其多用在按鈕、重要信息、導(dǎo)航、背景板中。

華為商城發(fā)現(xiàn)上的攝影專區(qū)、華為新聞、玩機(jī)資訊、購機(jī)攻略等采用對比色進(jìn)行強(qiáng)調(diào)對比，進(jìn)入頁面用戶就能夠清楚這些模塊的分類，同時引導(dǎo)用戶關(guān)注下方的商城信息。淘票票首頁中的按鈕、引導(dǎo)提示、標(biāo)簽欄選中均用了紅色進(jìn)行強(qiáng)調(diào)對比，很容易引起用戶的注意，讓用戶看一眼就知道如何操作。支付寶財富中的財富直通車采用色彩明亮的卡片展示，很容易引起用戶操作的興趣。

4. 利用文字對比提高界面的可閱讀性

文字的層次感往往和字號大小、字重、色彩明度有關(guān)，其中字號大小是提高文字信息層級的重要手段，在文字排版中如果文字之間的層次不清晰，那么一定是大小的對比不夠，在UI中字體大小對比往往在4-8px較為適合。如果通過字號大小的調(diào)整不足以清晰的區(qū)分層級時，再去考慮字體是否加粗，如果當(dāng)前頁面文辭層級過多，可以增加色彩明度的調(diào)整。如下圖所示：

左圖是美團(tuán)，酒店列表的第一層級文字從大小、字重與明度上拉開了對比，而第二第三層級的文字對比就比較微弱，這樣的處理方式可以讓標(biāo)題更突出，用戶有視覺焦點，從而視覺上更具層次，右圖的前程無憂也是同樣的處理方式。

5.利用格式塔原理進(jìn)行區(qū)分層次性

格式塔原理作為一個著名的心理學(xué)派，他的理論幾乎適用于所有與視覺相關(guān)的領(lǐng)域，與UI設(shè)計的關(guān)系也極其密切，它可以幫助我們梳理界面的信息結(jié)構(gòu)、層級關(guān)系和提升界面的可讀性，主要有幾個特征，即相似性、接近性、封閉性、連續(xù)性、主體與背景關(guān)系、均衡原理。格式塔的各個特性一般都不會孤立存在，他們都是相互影響，比如均衡性里說到的圖標(biāo)元素在視覺上保持統(tǒng)一，里面也涉及到相似性，人們更容易把相似的物體當(dāng)成一組，所以我們要融會貫通。

相似性：人的潛意識里會根據(jù)形狀、大小、顏色、亮點等，將視線內(nèi)一些相似的元素組成整體。比如抖音，通過放大拍抖音的icon,使之與底部標(biāo)簽上的其他圖標(biāo)有所不同，但是又能看出來同屬于一個整體。

接近性：元素之間的相對距離會影響到我們視覺感知，通常人們會認(rèn)為互相靠近的元素屬于同一組，而那些距離較遠(yuǎn)的則不屬于。比如QQ郵箱列表信息多的時候，把功能趨于相似的放在一起，利于相近原理，使他們在視覺上趨于一個整體，這樣既能讓界面功能清晰易懂，又不至于雜亂無章。

封閉性：人的大腦在看一個物體的時候，會更趨于把它當(dāng)做一個整體，而不是單個部分。比如支付寶的財富直通車卡片區(qū)，會露出下一個卡片的邊角，人的眼睛會自動補(bǔ)全功能，不用看到全部，就能腦補(bǔ)出下一模塊會出現(xiàn)什么。

主體與背景關(guān)系：我們在看一個頁面的時候，習(xí)慣于把小的、突出的那個看成是背景之上的主體。主體越小的時候，主體與背景的對比關(guān)系越明顯，主體越大則關(guān)系越模糊。比如淘粉吧用蒙版遮罩區(qū)分背景和主體，使它們的關(guān)系對比更明顯。

均衡：人們在觀察一個物體的時候，會下意識的去尋找他們的平衡點，元素在頁面上處于一種平衡狀態(tài)，會讓人心情舒緩愉悅。比如盒馬的金剛區(qū)所有圖片的傾斜角度和產(chǎn)品大小視覺一致，讓頁面看起很規(guī)整，很統(tǒng)一。

四.總結(jié)

在設(shè)計中體現(xiàn)層次性的方式有非常多,我們需要根據(jù)具體的場景,具體的需求,選擇符合我們場景的一種方式去使用。