為了更好地組織UI中的內(nèi)容饱岸，設(shè)計師需要具備讓視覺內(nèi)容層次化的設(shè)計技能掺出。今天的文章，我們就全面地探討一下如何真正有效地組織視覺內(nèi)容苫费。
視覺層次是什么汤锨？
構(gòu)建視覺層次是設(shè)計師在設(shè)計過程中最核心的設(shè)計技術(shù)之一。最初心理學(xué)家基于格式塔原理來檢測用戶對于元素之間關(guān)系的視覺感知百框，發(fā)現(xiàn)人們傾向于將視覺關(guān)系靠近的元素群視作為有關(guān)系的一組闲礼。
通過將內(nèi)容按照一定的視覺層次進行構(gòu)建，從而讓用戶在看到APP和網(wǎng)站內(nèi)容的時候琅翻，能夠輕松理解各個元素之間的關(guān)系位仁，明白他們的重要程度差異。通過控制不同視覺元素本身的視覺差異（大小方椎、色彩聂抢、對比度、風(fēng)格等）棠众，讓它們可以區(qū)分彼此琳疏。
UI元素的視覺呈現(xiàn)方式對于用戶體驗有著極大的影響。如果UI中的元素組織性很差闸拿，看起來會是一團糟空盼，最終用戶也無法有效地獲得導(dǎo)航指引，也難以正確地交互了新荤。此外揽趾，非結(jié)構(gòu)化的內(nèi)容，可讀性也較低苛骨，用戶無法一目了然地獲取信息篱瞎，需要花費大量的氣力區(qū)分內(nèi)容，從中找到自己想要的信息痒芝，這樣很容易招致用戶不滿俐筋，甚至導(dǎo)致產(chǎn)品失敗。
排版層次
文本內(nèi)容是絕大多數(shù)UI設(shè)計中需要處理的主要組成部分严衬。這也是為什么視覺層次的構(gòu)建很大程度上依賴排版澄者。所以，視覺設(shè)計專家會將排版層次從視覺層次中單獨提取出來作為一個獨立分支來進行探討。
設(shè)計師通過排版系統(tǒng)將文本內(nèi)容以最適宜用戶感知的方式組織起來粱挡。通過合理的選擇字體的樣式和排版布局赠幕，設(shè)計師讓最重要、最迫切需要被用戶關(guān)注到的內(nèi)容突出顯示询筏。字體的大小劣坊、色彩和字體家族都在樣式調(diào)整的范圍內(nèi)。
排版層次中屈留，包含著不同的排版元素局冰，包括標題、副標題灌危、正文內(nèi)容康二、CTA元素、說明以及其他內(nèi)容勇蝙。為了建立層次感沫勿，這些內(nèi)容和元素會被分割成為不同層級。通常味混，為了保證層次分明又不會讓信息的呈現(xiàn)過于復(fù)雜产雹，會將層次劃分為3個層級。
第一層級翁锡。諸如頭條標題蔓挖，這些元素旨在為用戶提供核心的信息，并且引起訪客能夠立刻注意到它們馆衔。
第二層級瘟判。諸如普通標題和副標題，它們應(yīng)該能夠讓用戶快速掃視閱讀角溃，盡快了解到其中的主要內(nèi)容拷获。
第三層級。正文和一些額外的信息（比如引用）構(gòu)成了第三個層級减细。在這個部分設(shè)計師通常需要使用較小的字體匆瓜，并且確保內(nèi)容的可讀性。
由于正文內(nèi)容通常是UI中內(nèi)容信息的主要載體未蝌，而大量的信息和內(nèi)容需要逐步的呈現(xiàn)驮吱，所以設(shè)計師和編輯會將內(nèi)容切割為不同的段落，讓用戶可以輕松的一段一段地树埠、按照順序來感知并吸收信息糠馆。
還有一件值得一提的事情嘶伟，在為移動端設(shè)備進行排版設(shè)計的時候怎憋，設(shè)計師要盡量將其中的層級控制在兩個層級以內(nèi)。移動端設(shè)備的屏幕尺寸有限，無力承載3個層級的信息绊袋，所以毕匀，諸如副標題這樣的第二層級的內(nèi)容需要去掉，以防層級太多癌别。
視覺層級構(gòu)建的基礎(chǔ)
當設(shè)計師已經(jīng)確定了基本的內(nèi)容和組件之后皂岔，就需要為它們制定呈現(xiàn)的層級和順序了。幫助設(shè)計師為這些UI組件和元素制定順序和層級的展姐，主要是下面的屬性：
尺寸大小
區(qū)分層次最有效的手段是通過尺寸大小差異化躁垛。大的比小的更重要，這種認知是根深蒂固的圾笨。用戶會自然而然地關(guān)注到尺寸較大的文本和尺寸較大的圖教馆。設(shè)計師可以根據(jù)元素的重要性，在尺寸上做文章擂达。
色彩
色彩對于用戶的感知有著巨大的影響土铺。所以在進行視覺層次構(gòu)建的時候，色彩的合理運用會產(chǎn)生更為明顯的效果板鬓。
不同的色彩本身就可以輕松構(gòu)成層次結(jié)構(gòu)的悲敷，強烈的色彩諸如紅色、橙色俭令、黑色都很容易引人注意后德。諸如白色和淺灰通常可以用來作為大面積的背景色抄腔，和其他的色彩構(gòu)成對比探遵。
不同的色彩加持在UI元素上能夠構(gòu)成微妙的層次結(jié)構(gòu)。設(shè)計師在設(shè)計CTA按鈕的時候妓柜，通常會選用和背景顏色差異明顯的箱季、大膽而扎眼的色彩。
對比
創(chuàng)建層次結(jié)構(gòu)依靠的核心就是制造對比棍掐。一個元素和另外一個元素構(gòu)成對比藏雏，讓用戶看到不同內(nèi)容和元素之間的差異。通過視覺上的差異（大小作煌、顏色掘殴、樣式）營造出對比度，但是在對比的時候還要確保整體上的均衡粟誓，盡量不要因為對比而讓某些元素被用戶忽略掉奏寨。
留白
用戶界面當中會有許多元素和組件，想要它們被用戶注意到鹰服，那么設(shè)計師需要讓這些元素周圍有足夠的留白病瞳。留白同時也常常被稱為負空間揽咕，元素和元素之間的空白區(qū)域就是留白。許多設(shè)計師常常會忽略留白套菜，但是留白應(yīng)該被視作為構(gòu)造設(shè)計的重要組成部分亲善。正是因為留白和元素本身之間的構(gòu)成的疏密對比，才讓用戶注意到留白包圍下的內(nèi)容逗柴。
靠近
正如同我之前所說的蛹头，視覺層次的建立很大程度上是基于格式塔原理，所以設(shè)計師對于UI元素之間的靠近度會非常注意戏溺。人們傾向于將視覺上比較靠近的元素視為一組渣蜗，而設(shè)計師也正是基于這種認知，將不同的元素分為不同的組旷祸。讓相關(guān)的相似的元素更靠近一點袍睡，讓不同和無關(guān)的元素隔得遠一些，不同的靠近度讓元素稱為了不同的類別和分組肋僧。
重復(fù)
同樣的斑胜，即使是在不同的地方出現(xiàn)，用戶還會很輕松地注意到相同的元素嫌吠。這就是重復(fù)的元素發(fā)揮作用的工作原理止潘。不斷重復(fù)的元素、樣式辫诅、色彩凭戴、文本會被用戶注意到，它們會被識別為一種固定的模式炕矮，或者說規(guī)律么夫，這樣也就構(gòu)成了統(tǒng)一的推則。比如肤视，設(shè)計師會在文章中引用重要的句子档痪，這些句子會用單獨的樣式和色彩高亮突出，當你下一次在另一篇文章當中看到類似的色彩和文本邢滑，會迅速明白你看到的是一句引用腐螟。
視覺層次是搭建有效信息架構(gòu)的基礎(chǔ)。當用戶界面的元素需要結(jié)構(gòu)化和組織化的時候困后，視覺層次的構(gòu)建能夠有效地幫你達成這個目標乐纸。清晰的視覺層級是整個導(dǎo)航體系中不可分割的一部分，它們讓用戶更快了解產(chǎn)品的特征摇予。
轉(zhuǎn)自：http://www.reibang.com/p/ddf0edff3114
