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