|
人們總希望能夠通過規(guī)則讓事情變得更容易理解,。對于平面設(shè)計是如此，對于數(shù)字化的UI界面也同樣是如此,。經(jīng)過仔細(xì)地組織和整理之后的UI界面,，無論是APP還是網(wǎng)站，都能夠被用戶更好地了解,，使用和吸收,，這也真正讓用戶滿意的產(chǎn)品的必由之路。 為了更好地組織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)。 排版層次中,，包含著不同的排版元素,，包括標(biāo)題、副標(biāo)題,、正文內(nèi)容,、CTA元素、說明以及其他內(nèi)容,。為了建立層次感,，這些內(nèi)容和元素會被分割成為不同層級。通常,，為了保證層次分明又不會讓信息的呈現(xiàn)過于復(fù)雜,，會將層次劃分為3個層級。 第一層級,。諸如頭條標(biāo)題,，這些元素旨在為用戶提供核心的信息，并且引起訪客能夠立刻注意到它們,。 第二層級,。諸如普通標(biāo)題和副標(biāo)題,，它們應(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個層級的信息,，所以,，諸如副標(biāo)題這樣的第二層級的內(nèi)容需要去掉，以防層級太多,。 視覺層級構(gòu)建的基礎(chǔ)當(dāng)設(shè)計師已經(jīng)確定了基本的內(nèi)容和組件之后,，就需要為它們制定呈現(xiàn)的層級和順序了。幫助設(shè)計師為這些UI組件和元素制定順序和層級的,，主要是下面的屬性： 尺寸大小區(qū)分層次最有效的手段是通過尺寸大小差異化,。大的比小的更重要，這種認(rèn)知是根深蒂固的,。用戶會自然而然地關(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)容和元素之間的差異,。通過視覺上的差異（大小、顏色,、樣式）營造出對比度,，但是在對比的時候還要確保整體上的均衡，盡量不要因為對比而讓某些元素被用戶忽略掉,。 留白
用戶界面當(dāng)中會有許多元素和組件,，想要它們被用戶注意到，那么設(shè)計師需要讓這些元素周圍有足夠的留白,。留白同時也常常被稱為負(fù)空間,，元素和元素之間的空白區(qū)域就是留白。許多設(shè)計師常常會忽略留白,，但是留白應(yīng)該被視作為構(gòu)造設(shè)計的重要組成部分,。正是因為留白和元素本身之間的構(gòu)成的疏密對比，才讓用戶注意到留白包圍下的內(nèi)容,。 靠近正如同我之前所說的,，視覺層次的建立很大程度上是基于格式塔原理，所以設(shè)計師對于UI元素之間的靠近度會非常注意,。人們傾向于將視覺上比較靠近的元素視為一組,，而設(shè)計師也正是基于這種認(rèn)知，將不同的元素分為不同的組,。讓相關(guān)的相似的元素更靠近一點,，讓不同和無關(guān)的元素隔得遠(yuǎn)一些，不同的靠近度讓元素稱為了不同的類別和分組,。 重復(fù)同樣的,，即使是在不同的地方出現(xiàn)，用戶還會很輕松地注意到相同的元素,。這就是重復(fù)的元素發(fā)揮作用的工作原理,。不斷重復(fù)的元素、樣式,、色彩,、文本會被用戶注意到，它們會被識別為一種固定的模式,，或者說規(guī)律,，這樣也就構(gòu)成了統(tǒng)一的推則,。比如，設(shè)計師會在文章中引用重要的句子,，這些句子會用單獨的樣式和色彩高亮突出,，當(dāng)你下一次在另一篇文章當(dāng)中看到類似的色彩和文本，會迅速明白你看到的是一句引用,。 視覺層次是搭建有效信息架構(gòu)的基礎(chǔ),。當(dāng)用戶界面的元素需要結(jié)構(gòu)化和組織化的時候，視覺層次的構(gòu)建能夠有效地幫你達成這個目標(biāo),。清晰的視覺層級是整個導(dǎo)航體系中不可分割的一部分,，它們讓用戶更快了解產(chǎn)品的特征。 【這些文章同樣來自Tubik Studio】 本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果,，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接,，違者必究。謝謝各位編輯同仁配合,。 |
|
|
