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