亨利.亞當(dāng)斯（Henry Adams，美國(guó)歷史學(xué)家、學(xué)術(shù)家和小說(shuō)家）曾經(jīng)說(shuō)過(guò)：“混沌是自然法則，秩序是人類的夢(mèng)想”。人們總是喜歡秩序，因?yàn)橹刃蚩梢宰屖虑樽兊酶菀桌斫狻＿@同樣適用于數(shù)字產(chǎn)品的用戶界面，當(dāng)UI元素被有序組合和結(jié)構(gòu)化時(shí)，人們可以輕松的使用應(yīng)用程序和網(wǎng)站，并對(duì)產(chǎn)品感到滿意。
為了清晰的向用戶展現(xiàn)UI中的內(nèi)容，設(shè)計(jì)師應(yīng)用了一個(gè)著名的方法—視覺(jué)層次。今天的文章將對(duì)這種方法的本質(zhì)以及如何正確使用進(jìn)行了講解。?
什么是視覺(jué)層次？
視覺(jué)層次是設(shè)計(jì)過(guò)程的核心方法之一。它最初是建立在格式塔原理的基礎(chǔ)上，考察了用戶對(duì)相互關(guān)聯(lián)元素的視覺(jué)感知，并展示了人們?nèi)绾螌⒁曈X(jué)元素歸為一類。
視覺(jué)層次致力于以一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品內(nèi)容。用它來(lái)組織UI內(nèi)容，可以使大腦根據(jù)物理差異（如大小、顏色、對(duì)比度、風(fēng)格等）來(lái)區(qū)分對(duì)象。
UI元素的視覺(jué)呈現(xiàn)對(duì)產(chǎn)品的用戶體驗(yàn)有很大影響。如果內(nèi)容看起來(lái)一團(tuán)糟，用戶就無(wú)法在產(chǎn)品中快速找到信息或正確的與產(chǎn)品進(jìn)行交互。此外，非結(jié)構(gòu)化文字內(nèi)容的易讀性較低，用戶將無(wú)法快速預(yù)覽，他們需要費(fèi)力的去區(qū)分他們要找的內(nèi)容。這種糟糕的用戶體驗(yàn)會(huì)導(dǎo)致用戶滿意度降低，這也就意味著一款產(chǎn)品不會(huì)很受歡迎。
文字的層級(jí)
文字是任何UI設(shè)計(jì)中都很重要的組成部分，這就是為什么視覺(jué)層次高度依賴于文字。專家們決定通過(guò)創(chuàng)建一個(gè)單獨(dú)的文字級(jí)別來(lái)強(qiáng)調(diào)文字的重要性。
該系統(tǒng)旨在以最合適用戶感知的方式組織文本內(nèi)容。設(shè)計(jì)師通過(guò)對(duì)比關(guān)系來(lái)修改和組合文字，讓重要的需要用戶首先注意到的文字優(yōu)先突出。經(jīng)常用到的方式是調(diào)整大小、顏色、字體和對(duì)齊方式。
文字層次主要包括：標(biāo)題、副標(biāo)題、正文、號(hào)召性文字以及輔助文字等。為了構(gòu)建一個(gè)可視化的文字層次，需要將所有元素分成不同的等級(jí)，讓我們看下具體包括哪些內(nèi)容。
一級(jí)文字：主標(biāo)題，主標(biāo)題的目的是為用戶提供核心信息，同時(shí)吸引用戶對(duì)產(chǎn)品的注意力。
二級(jí)文字：二級(jí)文字方便用戶快速瀏覽。通常包括：副標(biāo)題、說(shuō)明文字
三級(jí)文字：正文和其他的數(shù)據(jù)文字，設(shè)計(jì)師通常使用較小的字號(hào)，但需要保持足夠的可閱讀性。
由于文字內(nèi)容是UI中的主要信息來(lái)源，所以設(shè)計(jì)師需要逐級(jí)呈現(xiàn)信息。通過(guò)將文字分成不同的等級(jí)，來(lái)使用戶能夠快速接收信息并正確感知信息的重要程度。還有一點(diǎn)需要注意的是，在為移動(dòng)端產(chǎn)品創(chuàng)建文字級(jí)別的時(shí)候，最好是兩個(gè)以內(nèi)。因?yàn)槭謾C(jī)屏幕沒(méi)有容納三個(gè)級(jí)別的空間。為了使界面看起來(lái)更清晰，一般沒(méi)有副標(biāo)題。
視覺(jué)層次工具
當(dāng)設(shè)計(jì)師已經(jīng)選擇好要呈現(xiàn)的內(nèi)容時(shí)，就可以來(lái)制定文字等級(jí)了。讓我們看看從哪些方面可以幫助設(shè)計(jì)師建立視覺(jué)層次。
大小信息區(qū)分最有效的工具之一就是大小。大的事物總是比小的事物更加重要，這種想法植根于用戶心中。這也是為什么用戶的注意力往往會(huì)轉(zhuǎn)移到大的文字或圖片上。設(shè)計(jì)師需要區(qū)分每個(gè)內(nèi)容元素的重要性，并基于此將信息用大小來(lái)區(qū)分。
顏色顏色是構(gòu)建視覺(jué)層次的有效工具。顏色本身就具有層次結(jié)構(gòu)，從用戶的心理來(lái)定義，有大膽的顏色，像紅色、橙色和黑色，很容易引起注意。也有比較弱的顏色像白色和奶油色，這類的顏色適合用作背景。使用不同的顏色，可以使UI元素有輕微層次感。如：其他UI元素都用的是淺色，CTA（號(hào)召用戶行為）按鈕則可以用比較重的顏色，可以讓用戶第一眼就注意到。
對(duì)比層次基于內(nèi)容本身的對(duì)比。一個(gè)元素和另一個(gè)元素形成對(duì)比則用戶可以看到兩者之間的差異性?？梢酝ㄟ^(guò)視覺(jué)差（包括大小、顏色、樣式）來(lái)創(chuàng)建對(duì)比。但是也需要保持頁(yè)面的平衡，以免一個(gè)對(duì)象完全掩蓋了另一個(gè)對(duì)象
負(fù)空間在用戶界面中有很多內(nèi)容，為了讓用戶注意到所有內(nèi)容，就需要給他們的眼睛一定的休息空間。負(fù)空間和空白區(qū)域是指元素與元素之間的間距。一些設(shè)計(jì)師通常不會(huì)將空白區(qū)域作為他們?cè)O(shè)計(jì)的一部分，但專家們會(huì)把空白區(qū)域作為一個(gè)幫助設(shè)計(jì)布局的有用工具。適當(dāng)?shù)呢?fù)空間，可以幫助用戶注意和感知每一個(gè)元素。
接近正如我們上面所說(shuō)的，視覺(jué)層次是建立在格式塔原理的基礎(chǔ)之上的，所以設(shè)計(jì)師非常關(guān)注UI元素的接近程度。用戶習(xí)慣把視覺(jué)元素統(tǒng)一到一個(gè)組里，所以UI元素需要以組的方式呈現(xiàn)，以便用戶對(duì)其進(jìn)行分類。如果某幾個(gè)元素距離較近的放置，則用戶會(huì)自動(dòng)將他們視為一個(gè)組。設(shè)計(jì)師可以利用這個(gè)接近原則，幫助內(nèi)容區(qū)分級(jí)別。
重復(fù)如果用戶注意到某些元素看起來(lái)很相似，他們也會(huì)將它們視為一個(gè)組。這就是重復(fù)原理。設(shè)計(jì)師故意為不同的對(duì)象用重復(fù)一些模式，以便用戶將它們視為一個(gè)統(tǒng)一體。舉個(gè)例子：一個(gè)有大量正文的頁(yè)面用一種顏色突出顯示最重要的句子，看到這種顏色的句子用戶就知道這是一個(gè)重要句子，用戶也可以直接從一個(gè)重要句子直接跳到另一個(gè)重要句子。
視覺(jué)層次是有效信息結(jié)構(gòu)化的基礎(chǔ)。當(dāng)UI元素結(jié)構(gòu)化和組織化時(shí)，用戶更好的使用產(chǎn)品，可以更加高效的為他們解決問(wèn)題。此外，強(qiáng)大的視覺(jué)層次改進(jìn)了導(dǎo)航系統(tǒng)，用戶可以更好的定位產(chǎn)品。?
英文原版地址https://design4users.com/visual-hierarchy-how-to-organize-ui-content/
更多文章：
2019年的10個(gè)最佳設(shè)計(jì)系統(tǒng)
歡迎關(guān)注微信公眾號(hào)：菠蘿方舟
