人們總希望能夠通過(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)容。
構(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)建很大程度上依賴(lài)排版。所以,視覺(jué)設(shè)計(jì)專(zhuān)家會(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í)太多。
當(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ì)選用和背景顏色差異明顯的、大膽而扎眼的色彩。
創(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ì)師需要讓這些元素周?chē)凶銐虻牧舭?。留白同時(shí)也常常被稱(chēng)為負(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)一些,不同的靠近度讓元素稱(chēng)為了不同的類(lèi)別和分組。
同樣的,即使是在不同的地方出現(xiàn),用戶還會(huì)很輕松地注意到相同的元素。這就是重復(fù)的元素發(fā)揮作用的工作原理。不斷重復(fù)的元素、樣式、色彩、文本會(huì)被用戶注意到,它們會(huì)被識(shí)別為一種固定的模式,或者說(shuō)規(guī)律,這樣也就構(gòu)成了統(tǒng)一的推則。比如,設(shè)計(jì)師會(huì)在文章中引用重要的句子,這些句子會(huì)用單獨(dú)的樣式和色彩高亮突出,當(dāng)你下一次在另一篇文章當(dāng)中看到類(lèi)似的色彩和文本,會(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)品的特征。
填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc