李時(shí)穎

摘 要：UI設(shè)計(jì)本質(zhì)上是一種視覺傳達(dá)系統(tǒng)，而清晰、高效能的傳達(dá)信息就應(yīng)該先解決視覺層級(jí)問(wèn)題。

關(guān)鍵詞：UI設(shè)計(jì)；前端；視覺層級(jí)

信息時(shí)代人們的生活離不開各種各樣的終端設(shè)備，而人們使用終端訪問(wèn)互聯(lián)網(wǎng)應(yīng)用時(shí)主要通過(guò)UI界面進(jìn)行。在UI設(shè)計(jì)領(lǐng)域，流暢的訪問(wèn)體驗(yàn)主要體現(xiàn)在用戶能夠馬上對(duì)提供了那些信息一目了然；能夠根據(jù)引導(dǎo)快速找到自己想要的東西，能夠在交互時(shí)得到及時(shí)和有效的相應(yīng)。UI設(shè)計(jì)本質(zhì)上是一種視覺傳達(dá)系統(tǒng)，而清晰、高效能的傳達(dá)信息就應(yīng)該先解決視覺層級(jí)問(wèn)題。

一、視覺層級(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)頁(yè)布局方面，為了讓頁(yè)面上復(fù)雜的信息更有序的展示，依據(jù)人們的視覺習(xí)慣，網(wǎng)頁(yè)被劃分為頁(yè)頭、頁(yè)底、導(dǎo)航、banner、內(nèi)容等不同區(qū)域，不同區(qū)域通過(guò)空隙、邊框、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)系的常用形式。通過(guò)導(dǎo)航系統(tǒng)、菜單列表將信息以主要信息、次級(jí)信息的雙重維度組織起來(lái)，用戶訪問(wèn)時(shí)以交互的方式展開一個(gè)信息項(xiàng)，就可以看到從屬于它的具體內(nèi)容，既能夠讓用戶快速理解信息層級(jí)結(jié)構(gòu)，又能夠根據(jù)自己的需要進(jìn)一步訪問(wèn)，避免無(wú)關(guān)信息的干擾，大大提升了信息傳播的效率。

三、優(yōu)化視覺層級(jí)的技巧

視覺層級(jí)的優(yōu)化就是將視覺層級(jí)關(guān)系從模糊變得更為明確清晰的過(guò)程。主要體現(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è)單頁(yè)一般采用相同或者類似的排版布局讓用戶在訪問(wèn)時(shí)可以沿襲相似的訪問(wèn)習(xí)慣而避免因?yàn)榕虐娌季肿兓鄮?lái)的無(wú)所適從；配色系統(tǒng)也保持統(tǒng)一和一定規(guī)律避免雜亂；網(wǎng)站的Icons系統(tǒng)也保持一致的外觀，如主要形狀、配色規(guī)律、視覺風(fēng)格等，這些都是為了讓訪問(wèn)者盡快的獲得一種信息展示的規(guī)律和結(jié)構(gòu)感，形成一種與之相適應(yīng)的閱讀習(xí)慣，并能順暢的延續(xù)到每個(gè)部分的訪問(wèn)中，提升用戶訪問(wèn)信息的流暢性。同時(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)往往使用較鮮明顏色從頁(yè)面中凸顯出來(lái)讓用戶容易識(shí)別。JavaScript技術(shù)讓UI界面中的元素可以通過(guò)在網(wǎng)頁(yè)中彈出、懸浮飄動(dòng)、閃動(dòng)等方式區(qū)別其他一切靜止元素而迅速吸引用戶的視線。

與信息的強(qiáng)化相對(duì)應(yīng)的是信息的弱化。顧名思義，信息的弱化就是縮小差異。弱化的過(guò)程事實(shí)上是一個(gè)尺度問(wèn)題。是獲得信息層級(jí)關(guān)系在視覺上最恰當(dāng)?shù)捏w現(xiàn)。比如Icons系統(tǒng)事實(shí)上就應(yīng)當(dāng)保持統(tǒng)一感中又能區(qū)分彼此的差異感，這里面就既需要通過(guò)強(qiáng)化解決Icons與頁(yè)面其他部分的差異感凸顯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)頁(yè)常用的布局樣式，菜單的基本樣式、按鈕的形狀、符號(hào)和指示含義的對(duì)應(yīng)關(guān)系等等。遵循這些規(guī)律會(huì)讓用戶更為熟悉，有助于訪問(wèn)體驗(yàn)的流暢性，但也容易造成視覺的雷同；而打破這些規(guī)律帶來(lái)視覺新鮮感的同時(shí)可能會(huì)給用戶帶來(lái)困擾。因此尋找設(shè)計(jì)新鮮感和視覺習(xí)慣之間的有效平衡也是UI設(shè)計(jì)的重要課題。

參考文獻(xiàn)：

[1]劉心美.DIV+CSS網(wǎng)頁(yè)布局的設(shè)計(jì)與實(shí)現(xiàn)[J].科技資訊，2021

[2]韋立梅，張淑榮.基于HTML+CSS+JQuery的網(wǎng)站開發(fā)簡(jiǎn)述[J].電腦與電信，2017

客聯(lián)2023年2期

客聯(lián)的其它文章

財(cái)務(wù)機(jī)器人研發(fā)與應(yīng)用實(shí)驗(yàn)實(shí)訓(xùn)室建設(shè)探索

挖掘并調(diào)動(dòng)支持系統(tǒng)，助力困境男子返鄉(xiāng)安置

插畫海報(bào)在設(shè)計(jì)中的運(yùn)用

淺談民樂(lè)伴奏在瓊劇戲曲藝術(shù)中的地位

儒學(xué)經(jīng)典的國(guó)際傳播

《南部檔案》順治至雍正年間特征詞匯例釋