亨利.亞當(dāng)斯（Henry Adams滑频，美國歷史學(xué)家、學(xué)術(shù)家和小說家）曾經(jīng)說過：“混沌是自然法則怖糊，秩序是人類的夢(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è)著名的方法—視覺層次阅爽。今天的文章將對(duì)這種方法的本質(zhì)以及如何正確使用進(jìn)行了講解。?
什么是視覺層次荐开？
視覺層次是設(shè)計(jì)過程的核心方法之一付翁。它最初是建立在格式塔原理的基礎(chǔ)上，考察了用戶對(duì)相互關(guān)聯(lián)元素的視覺感知晃听，并展示了人們?nèi)绾螌⒁曈X元素歸為一類百侧。
視覺層次致力于以一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品內(nèi)容。用它來組織UI內(nèi)容能扒，可以使大腦根據(jù)物理差異（如大小佣渴、顏色、對(duì)比度初斑、風(fēng)格等）來區(qū)分對(duì)象辛润。
UI元素的視覺呈現(xiàn)對(duì)產(chǎn)品的用戶體驗(yàn)有很大影響。如果內(nèi)容看起來一團(tuán)糟见秤，用戶就無法在產(chǎn)品中快速找到信息或正確的與產(chǎn)品進(jìn)行交互砂竖。此外真椿，非結(jié)構(gòu)化文字內(nèi)容的易讀性較低，用戶將無法快速預(yù)覽乎澄，他們需要費(fèi)力的去區(qū)分他們要找的內(nèi)容突硝。這種糟糕的用戶體驗(yàn)會(huì)導(dǎo)致用戶滿意度降低，這也就意味著一款產(chǎn)品不會(huì)很受歡迎三圆。
文字的層級(jí)
文字是任何UI設(shè)計(jì)中都很重要的組成部分狞换，這就是為什么視覺層次高度依賴于文字。專家們決定通過創(chuàng)建一個(gè)單獨(dú)的文字級(jí)別來強(qiáng)調(diào)文字的重要性舟肉。
該系統(tǒng)旨在以最合適用戶感知的方式組織文本內(nèi)容修噪。設(shè)計(jì)師通過對(duì)比關(guān)系來修改和組合文字，讓重要的需要用戶首先注意到的文字優(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)題铡羡、說明文字
三級(jí)文字：正文和其他的數(shù)據(jù)文字积蔚，設(shè)計(jì)師通常使用較小的字號(hào)，但需要保持足夠的可閱讀性烦周。
由于文字內(nèi)容是UI中的主要信息來源尽爆，所以設(shè)計(jì)師需要逐級(jí)呈現(xiàn)信息。通過將文字分成不同的等級(jí)读慎，來使用戶能夠快速接收信息并正確感知信息的重要程度教翩。還有一點(diǎn)需要注意的是，在為移動(dòng)端產(chǎn)品創(chuàng)建文字級(jí)別的時(shí)候贪壳，最好是兩個(gè)以內(nèi)饱亿。因?yàn)槭謾C(jī)屏幕沒有容納三個(gè)級(jí)別的空間。為了使界面看起來更清晰，一般沒有副標(biāo)題彪笼。
視覺層次工具
當(dāng)設(shè)計(jì)師已經(jīng)選擇好要呈現(xiàn)的內(nèi)容時(shí)钻注，就可以來制定文字等級(jí)了。讓我們看看從哪些方面可以幫助設(shè)計(jì)師建立視覺層次配猫。
大小信息區(qū)分最有效的工具之一就是大小幅恋。大的事物總是比小的事物更加重要，這種想法植根于用戶心中泵肄。這也是為什么用戶的注意力往往會(huì)轉(zhuǎn)移到大的文字或圖片上捆交。設(shè)計(jì)師需要區(qū)分每個(gè)內(nèi)容元素的重要性，并基于此將信息用大小來區(qū)分腐巢。
顏色顏色是構(gòu)建視覺層次的有效工具品追。顏色本身就具有層次結(jié)構(gòu)，從用戶的心理來定義冯丙，有大膽的顏色肉瓦，像紅色、橙色和黑色胃惜，很容易引起注意泞莉。也有比較弱的顏色像白色和奶油色，這類的顏色適合用作背景船殉。使用不同的顏色鲫趁，可以使UI元素有輕微層次感。如：其他UI元素都用的是淺色利虫，CTA（號(hào)召用戶行為）按鈕則可以用比較重的顏色挨厚，可以讓用戶第一眼就注意到。
對(duì)比層次基于內(nèi)容本身的對(duì)比列吼。一個(gè)元素和另一個(gè)元素形成對(duì)比則用戶可以看到兩者之間的差異性幽崩】嗍迹可以通過視覺差（包括大小寞钥、顏色、樣式）來創(chuàng)建對(duì)比陌选。但是也需要保持頁面的平衡理郑，以免一個(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è)元素。
接近正如我們上面所說的冀膝，視覺層次是建立在格式塔原理的基礎(chǔ)之上的唁奢，所以設(shè)計(jì)師非常關(guān)注UI元素的接近程度。用戶習(xí)慣把視覺元素統(tǒng)一到一個(gè)組里窝剖，所以UI元素需要以組的方式呈現(xiàn)麻掸，以便用戶對(duì)其進(jìn)行分類。如果某幾個(gè)元素距離較近的放置赐纱，則用戶會(huì)自動(dòng)將他們視為一個(gè)組脊奋。設(shè)計(jì)師可以利用這個(gè)接近原則，幫助內(nèi)容區(qū)分級(jí)別疙描。
重復(fù)如果用戶注意到某些元素看起來很相似诚隙，他們也會(huì)將它們視為一個(gè)組。這就是重復(fù)原理淫痰。設(shè)計(jì)師故意為不同的對(duì)象用重復(fù)一些模式最楷，以便用戶將它們視為一個(gè)統(tǒng)一體。舉個(gè)例子：一個(gè)有大量正文的頁面用一種顏色突出顯示最重要的句子待错，看到這種顏色的句子用戶就知道這是一個(gè)重要句子籽孙，用戶也可以直接從一個(gè)重要句子直接跳到另一個(gè)重要句子。
視覺層次是有效信息結(jié)構(gòu)化的基礎(chǔ)火俄。當(dāng)UI元素結(jié)構(gòu)化和組織化時(shí)犯建，用戶更好的使用產(chǎn)品，可以更加高效的為他們解決問題瓜客。此外适瓦，強(qiáng)大的視覺層次改進(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)：菠蘿方舟
