UI設(shè)計(jì)師如何做出更高級(jí)的UI界面

人們總希望能夠通過(guò)規(guī)則讓事情變得更容易理解。對(duì)于平面設(shè)計(jì)是如此，對(duì)于數(shù)字化的UI界面也同樣是如此。經(jīng)過(guò)仔細(xì)地組織和整理之后的UI界面，無(wú)論是APP還是網(wǎng)站，都能夠被用戶更好地了解，使用和吸收，這也真正讓用戶滿意的產(chǎn)品的必由之路。

為了更好地組織UI中的內(nèi)容，設(shè)計(jì)師需要具備讓視覺(jué)內(nèi)容層次化的設(shè)計(jì)技能。今天的文章，我們就全面地探討一下如何真正有效地組織視覺(jué)內(nèi)容。

 

視覺(jué)層次是什么？

構(gòu)建視覺(jué)層次是設(shè)計(jì)師在設(shè)計(jì)過(guò)程中最核心的設(shè)計(jì)技術(shù)之一。最初心理學(xué)家基于格式塔原理來(lái)檢測(cè)用戶對(duì)于元素之間關(guān)系的視覺(jué)感知，發(fā)現(xiàn)人們傾向于將視覺(jué)關(guān)系靠近的元素群視作為有關(guān)系的一組。

通過(guò)將內(nèi)容按照一定的視覺(jué)層次進(jìn)行構(gòu)建，從而讓用戶在看到APP和網(wǎng)站內(nèi)容的時(shí)候，能夠輕松理解各個(gè)元素之間的關(guān)系，明白他們的重要程度差異。通過(guò)控制不同視覺(jué)元素本身的視覺(jué)差異（大小、色彩、對(duì)比度、風(fēng)格等），讓它們可以區(qū)分彼此。

UI元素的視覺(jué)呈現(xiàn)方式對(duì)于用戶體驗(yàn)有著極大的影響。如果UI中的元素組織性很差，看起來(lái)會(huì)是一團(tuán)糟，最終用戶也無(wú)法有效地獲得導(dǎo)航指引，也難以正確地交互了。此外，非結(jié)構(gòu)化的內(nèi)容，可讀性也較低，用戶無(wú)法一目了然地獲取信息，需要花費(fèi)大量的氣力區(qū)分內(nèi)容，從中找到自己想要的信息，這樣很容易招致用戶不滿，甚至導(dǎo)致產(chǎn)品失敗。

 

排版層次

文本內(nèi)容是絕大多數(shù)UI設(shè)計(jì)中需要處理的主要組成部分。這也是為什么視覺(jué)層次的構(gòu)建很大程度上依賴排版。所以，視覺(jué)設(shè)計(jì)專家會(huì)將排版層次從視覺(jué)層次中單獨(dú)提取出來(lái)作為一個(gè)獨(dú)立分支來(lái)進(jìn)行探討。

設(shè)計(jì)師通過(guò)排版系統(tǒng)將文本內(nèi)容以最適宜用戶感知的方式組織起來(lái)。通過(guò)合理的選擇字體的樣式和排版布局，設(shè)計(jì)師讓最重要、最迫切需要被用戶關(guān)注到的內(nèi)容突出顯示。字體的大小、色彩和字體家族都在樣式調(diào)整的范圍內(nèi)。

排版層次中，包含著不同的排版元素，包括標(biāo)題、副標(biāo)題、正文內(nèi)容、CTA元素、說(shuō)明以及其他內(nèi)容。為了建立層次感，這些內(nèi)容和元素會(huì)被分割成為不同層級(jí)。通常，為了保證層次分明又不會(huì)讓信息的呈現(xiàn)過(guò)于復(fù)雜，會(huì)將層次劃分為3個(gè)層級(jí)。

第一層級(jí)。諸如頭條標(biāo)題，這些元素旨在為用戶提供核心的信息，并且引起訪客能夠立刻注意到它們。

第二層級(jí)。諸如普通標(biāo)題和副標(biāo)題，它們應(yīng)該能夠讓用戶快速掃視閱讀，盡快了解到其中的主要內(nèi)容。

第三層級(jí)。正文和一些額外的信息（比如引用）構(gòu)成了第三個(gè)層級(jí)。在這個(gè)部分設(shè)計(jì)師通常需要使用較小的字體，并且確保內(nèi)容的可讀性。

由于正文內(nèi)容通常是UI中內(nèi)容信息的主要載體，而大量的信息和內(nèi)容需要逐步的呈現(xiàn)，所以設(shè)計(jì)師和編輯會(huì)將內(nèi)容切割為不同的段落，讓用戶可以輕松的一段一段地、按照順序來(lái)感知并吸收信息。

還有一件值得一提的事情，在為移動(dòng)端設(shè)備進(jìn)行排版設(shè)計(jì)的時(shí)候，設(shè)計(jì)師要盡量將其中的層級(jí)控制在兩個(gè)層級(jí)以內(nèi)。移動(dòng)端設(shè)備的屏幕尺寸有限，無(wú)力承載3個(gè)層級(jí)的信息，所以，諸如副標(biāo)題這樣的第二層級(jí)的內(nèi)容需要去掉，以防層級(jí)太多。

 

視覺(jué)層級(jí)構(gòu)建的基礎(chǔ)

當(dāng)設(shè)計(jì)師已經(jīng)確定了基本的內(nèi)容和組件之后，就需要為它們制定呈現(xiàn)的層級(jí)和順序了。幫助設(shè)計(jì)師為這些UI組件和元素制定順序和層級(jí)的，主要是下面的屬性：

尺寸大小

區(qū)分層次最有效的手段是通過(guò)尺寸大小差異化。大的比小的更重要，這種認(rèn)知是根深蒂固的。用戶會(huì)自然而然地關(guān)注到尺寸較大的文本和尺寸較大的圖。設(shè)計(jì)師可以根據(jù)元素的重要性，在尺寸上做文章。

色彩

色彩對(duì)于用戶的感知有著巨大的影響。所以在進(jìn)行視覺(jué)層次構(gòu)建的時(shí)候，色彩的合理運(yùn)用會(huì)產(chǎn)生更為明顯的效果。

不同的色彩本身就可以輕松構(gòu)成層次結(jié)構(gòu)的，強(qiáng)烈的色彩諸如紅色、橙色、黑色都很容易引人注意。諸如白色和淺灰通?？梢杂脕?lái)作為大面積的背景色，和其他的色彩構(gòu)成對(duì)比。

不同的色彩加持在UI元素上能夠構(gòu)成微妙的層次結(jié)構(gòu)。設(shè)計(jì)師在設(shè)計(jì)CTA按鈕的時(shí)候，通常會(huì)選用和背景顏色差異明顯的、大膽而扎眼的色彩。

對(duì)比

創(chuàng)建層次結(jié)構(gòu)依靠的核心就是制造對(duì)比。一個(gè)元素和另外一個(gè)元素構(gòu)成對(duì)比，讓用戶看到不同內(nèi)容和元素之間的差異。通過(guò)視覺(jué)上的差異（大小、顏色、樣式）營(yíng)造出對(duì)比度，但是在對(duì)比的時(shí)候還要確保整體上的均衡，盡量不要因?yàn)閷?duì)比而讓某些元素被用戶忽略掉。

留白

用戶界面當(dāng)中會(huì)有許多元素和組件，想要它們被用戶注意到，那么設(shè)計(jì)師需要讓這些元素周圍有足夠的留白。留白同時(shí)也常常被稱為負(fù)空間，元素和元素之間的空白區(qū)域就是留白。許多設(shè)計(jì)師常常會(huì)忽略留白，但是留白應(yīng)該被視作為構(gòu)造設(shè)計(jì)的重要組成部分。正是因?yàn)榱舭缀驮乇旧碇g的構(gòu)成的疏密對(duì)比，才讓用戶注意到留白包圍下的內(nèi)容。

靠近

正如同我之前所說(shuō)的，視覺(jué)層次的建立很大程度上是基于格式塔原理，所以設(shè)計(jì)師對(duì)于UI元素之間的靠近度會(huì)非常注意。人們傾向于將視覺(jué)上比較靠近的元素視為一組，而設(shè)計(jì)師也正是基于這種認(rèn)知，將不同的元素分為不同的組。讓相關(guān)的相似的元素更靠近一點(diǎn)，讓不同和無(wú)關(guān)的元素隔得遠(yuǎn)一些，不同的靠近度讓元素稱為了不同的類別和分組。

重復(fù)

同樣的，即使是在不同的地方出現(xiàn)，用戶還會(huì)很輕松地注意到相同的元素。這就是重復(fù)的元素發(fā)揮作用的工作原理。不斷重復(fù)的元素、樣式、色彩、文本會(huì)被用戶注意到，它們會(huì)被識(shí)別為一種固定的模式，或者說(shuō)規(guī)律，這樣也就構(gòu)成了統(tǒng)一的推則。比如，設(shè)計(jì)師會(huì)在文章中引用重要的句子，這些句子會(huì)用單獨(dú)的樣式和色彩高亮突出，當(dāng)你下一次在另一篇文章當(dāng)中看到類似的色彩和文本，會(huì)迅速明白你看到的是一句引用。

視覺(jué)層次是搭建有效信息架構(gòu)的基礎(chǔ)。當(dāng)用戶界面的元素需要結(jié)構(gòu)化和組織化的時(shí)候，視覺(jué)層次的構(gòu)建能夠有效地幫你達(dá)成這個(gè)目標(biāo)。清晰的視覺(jué)層級(jí)是整個(gè)導(dǎo)航體系中不可分割的一部分，它們讓用戶更快了解產(chǎn)品的特征。