UI設(shè)計(jì)中的視覺層級(jí)研究
2023-06-18 06:12:39李時(shí)穎
客聯(lián) 2023年2期
關(guān)鍵詞：UI設(shè)計(jì)
李時(shí)穎
摘 要：UI設(shè)計(jì)本質(zhì)上是一種視覺傳達(dá)系統(tǒng)，而清晰、高效能的傳達(dá)信息就應(yīng)該先解決視覺層級(jí)問題。
關(guān)鍵詞：UI設(shè)計(jì)；前端；視覺層級(jí)
信息時(shí)代人們的生活離不開各種各樣的終端設(shè)備，而人們使用終端訪問互聯(lián)網(wǎng)應(yīng)用時(shí)主要通過UI界面進(jìn)行。在UI設(shè)計(jì)領(lǐng)域，流暢的訪問體驗(yàn)主要體現(xiàn)在用戶能夠馬上對(duì)提供了那些信息一目了然；能夠根據(jù)引導(dǎo)快速找到自己想要的東西，能夠在交互時(shí)得到及時(shí)和有效的相應(yīng)。UI設(shè)計(jì)本質(zhì)上是一種視覺傳達(dá)系統(tǒng)，而清晰、高效能的傳達(dá)信息就應(yīng)該先解決視覺層級(jí)問題。
一、視覺層級(jí)的含義
由于本質(zhì)上UI設(shè)計(jì)是視覺領(lǐng)域的信息傳播，所以UI設(shè)計(jì)也應(yīng)遵循信息傳播的基本規(guī)律。信息傳播追求準(zhǔn)確和高效。而實(shí)現(xiàn)高效的傳播就需要將信息條理化、秩序化。對(duì)于視覺傳播而言，秩序化就是在視覺上直觀的建立起信息的內(nèi)在邏輯關(guān)系，和形成主次輕重的秩序。常見的信息邏輯關(guān)系包括父子關(guān)系和并列關(guān)系，邏輯關(guān)系本質(zhì)上就是一種信息的層級(jí)。
二、視覺層級(jí)關(guān)系在UI設(shè)計(jì)中的體現(xiàn)
在UI界面中，視覺層級(jí)體現(xiàn)在很多方面。
在網(wǎng)頁布局方面，為了讓頁面上復(fù)雜的信息更有序的展示，依據(jù)人們的視覺習(xí)慣，網(wǎng)頁被劃分為頁頭、頁底、導(dǎo)航、banner、內(nèi)容等不同區(qū)域，不同區(qū)域通過空隙、邊框、tab欄標(biāo)記等相互區(qū)分，在視覺上形成一種信息被分門別類有序展示的印象。
如果相同大類的信息又以多個(gè)小類在多區(qū)域展示，比如校園網(wǎng)新聞板塊中需要分別展示學(xué)校要聞、二級(jí)學(xué)院要聞、團(tuán)學(xué)相關(guān)新聞等，往往會(huì)采用區(qū)分空間但統(tǒng)一形式的做法，比如采用相同的tab欄標(biāo)記樣式，在視覺上形成一種同類信息的效果。
在前端設(shè)計(jì)中常用的列表結(jié)構(gòu)、菜單結(jié)構(gòu)則是體現(xiàn)父子關(guān)系的常用形式。通過導(dǎo)航系統(tǒng)、菜單列表將信息以主要信息、次級(jí)信息的雙重維度組織起來，用戶訪問時(shí)以交互的方式展開一個(gè)信息項(xiàng)，就可以看到從屬于它的具體內(nèi)容，既能夠讓用戶快速理解信息層級(jí)結(jié)構(gòu)，又能夠根據(jù)自己的需要進(jìn)一步訪問，避免無關(guān)信息的干擾，大大提升了信息傳播的效率。
三、優(yōu)化視覺層級(jí)的技巧
視覺層級(jí)的優(yōu)化就是將視覺層級(jí)關(guān)系從模糊變得更為明確清晰的過程。主要體現(xiàn)在三個(gè)方面：信息的統(tǒng)一、信息的強(qiáng)化、信息的弱化。
信息的統(tǒng)一就是遵循形式構(gòu)成法則，追求同類信息在視覺上的統(tǒng)一性?？梢詮纳?、大小、形狀、空間等很多方面入手。比如同一個(gè)網(wǎng)站相同級(jí)別的文字除了特殊強(qiáng)調(diào)的部分外都被統(tǒng)一成相同的字號(hào)，相同的顏色，相同的字體。這樣在視覺上就可以形成穩(wěn)定的統(tǒng)一感。同一個(gè)網(wǎng)站的每個(gè)單頁一般采用相同或者類似的排版布局讓用戶在訪問時(shí)可以沿襲相似的訪問習(xí)慣而避免因?yàn)榕虐娌季肿兓鄮淼臒o所適從；配色系統(tǒng)也保持統(tǒng)一和一定規(guī)律避免雜亂；網(wǎng)站的Icons系統(tǒng)也保持一致的外觀，如主要形狀、配色規(guī)律、視覺風(fēng)格等，這些都是為了讓訪問者盡快的獲得一種信息展示的規(guī)律和結(jié)構(gòu)感，形成一種與之相適應(yīng)的閱讀習(xí)慣，并能順暢的延續(xù)到每個(gè)部分的訪問中，提升用戶訪問信息的流暢性。同時(shí)也因?yàn)樽屚愋畔⒃谝曈X上更統(tǒng)一強(qiáng)化了信息的邏輯結(jié)構(gòu)感。
信息的強(qiáng)化就是拉開和強(qiáng)調(diào)信息之間的差異感。前端設(shè)計(jì)一些標(biāo)簽如
～標(biāo)題標(biāo)簽自帶加粗、加大字號(hào)屬性，目的就是區(qū)分文本的標(biāo)題和正文，形成層級(jí)感。信息的強(qiáng)化可以從色彩、大小、形狀、動(dòng)靜等很多方面入手強(qiáng)調(diào)差異性。比如文本中加粗、傾斜、高亮顯示相關(guān)內(nèi)容引起用戶的注意。Icons系統(tǒng)往往使用較鮮明顏色從頁面中凸顯出來讓用戶容易識(shí)別。JavaScript技術(shù)讓UI界面中的元素可以通過在網(wǎng)頁中彈出、懸浮飄動(dòng)、閃動(dòng)等方式區(qū)別其他一切靜止元素而迅速吸引用戶的視線。
與信息的強(qiáng)化相對(duì)應(yīng)的是信息的弱化。顧名思義，信息的弱化就是縮小差異。弱化的過程事實(shí)上是一個(gè)尺度問題。是獲得信息層級(jí)關(guān)系在視覺上最恰當(dāng)?shù)捏w現(xiàn)。比如Icons系統(tǒng)事實(shí)上就應(yīng)當(dāng)保持統(tǒng)一感中又能區(qū)分彼此的差異感，這里面就既需要通過強(qiáng)化解決Icons與頁面其他部分的差異感凸顯Icons的提示、引導(dǎo)作用，又需要弱化Icons中不同Icon之間的差異讓他們彼此相對(duì)統(tǒng)一。信息的強(qiáng)化弱化、統(tǒng)一實(shí)時(shí)上是體現(xiàn)信息的層級(jí)關(guān)系的矛盾統(tǒng)一，它們都是服務(wù)于讓視覺層級(jí)關(guān)系更明確更清晰這個(gè)根本目的。
四、視覺層級(jí)與視覺習(xí)慣
互聯(lián)網(wǎng)的發(fā)展已經(jīng)持續(xù)了幾十年，由于終端設(shè)備的普及和UI設(shè)計(jì)的不斷成熟事實(shí)上已經(jīng)建立了一套普遍被接受的視覺符號(hào)系統(tǒng)，比如網(wǎng)頁常用的布局樣式，菜單的基本樣式、按鈕的形狀、符號(hào)和指示含義的對(duì)應(yīng)關(guān)系等等。遵循這些規(guī)律會(huì)讓用戶更為熟悉，有助于訪問體驗(yàn)的流暢性，但也容易造成視覺的雷同；而打破這些規(guī)律帶來視覺新鮮感的同時(shí)可能會(huì)給用戶帶來困擾。因此尋找設(shè)計(jì)新鮮感和視覺習(xí)慣之間的有效平衡也是UI設(shè)計(jì)的重要課題。
參考文獻(xiàn)：
[1]劉心美.DIV+CSS網(wǎng)頁布局的設(shè)計(jì)與實(shí)現(xiàn)[J].科技資訊，2021
[2]韋立梅，張淑榮.基于HTML+CSS+JQuery的網(wǎng)站開發(fā)簡(jiǎn)述[J].電腦與電信，2017
猜你喜歡
商情(2017年12期)2017-05-19 01:25:45
戲劇之家(2017年7期)2017-05-12 14:30:53
青春歲月(2016年24期)2017-04-15 17:26:05
電腦知識(shí)與技術(shù)(2017年5期)2017-04-08 07:40:46
電腦知識(shí)與技術(shù)(2016年31期)2017-02-27 15:42:47
電腦知識(shí)與技術(shù)(2016年27期)2016-12-15 19:52:03
軟件導(dǎo)刊(2016年9期)2016-11-07 18:34:46
人間(2016年26期)2016-11-03 19:26:14
戲劇之家(2016年15期)2016-08-15 20:40:50
戲劇之家(2016年15期)2016-08-15 19:48:22
