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