數字化時代基于降低視覺噪聲的界面設計研究

摘 "要：降低界面設計中的視覺噪聲，讓用戶能夠從界面上簡單快速獲取所需要的信息是數字化時代界面設計的一個重要課題。結合設計心理學、美學及視覺傳播基本原理，對界面設計中的視覺元素頁面背景、圖標裝飾元素、動畫廣告、交互元素等方面分別進行研究，通過合理設計探索降低視覺噪聲的方法和基本設計原則，為設計師提供重要的理論指導，提高交互界面信息傳播效率。

關鍵詞：數字化時代；視覺噪聲；界面設計；信息傳播；用戶體驗

基金項目：本文系2024年度河南省高校人文社會科學研究一般項目“數字化時代基于降低視覺噪聲的界面設計研究”（2024-ZDJH-652）研究成果。

噪聲一詞起源于“噪音”概念，噪音物理學定義是發生體做無規則時發出的聲音。生活中影響人們工作學習及正常休息睡眠的聲音，以及干擾人們正常接收聲音信息的都是噪音。“百度百科”對視覺噪聲這樣解釋，視覺噪聲可以理解為“妨礙人們感覺器官對所接收的信源信息理解的因素”。在視覺傳達設計中圖像、文字、色彩等是視覺信息傳播的媒介，在視覺設計時干擾信息傳播的不相關的其他的視覺元素形成了視覺噪聲，當視覺噪聲元素超過了人對信息感知的舒適性時，就會讓人感覺煩躁不安，影響人們對信息的處理，降低了信息傳播的效率。視覺噪聲是在視覺信息傳遞過程中，對信息的傳遞、理解產生負面作用的視覺因素。

一、界面設計與視覺噪聲

（一）視覺噪聲元素

多媒體界面主要是由文字、色彩、圖片及多媒體動畫等元素構成，通過這些視覺元素來傳達信息，其他一些干擾信息傳播的視覺元素，會分散用戶注意力，使用戶不能快速準確獲取信息，這些干擾的視覺元素就形成視覺噪聲。視覺噪聲主要包括界面裝飾背景、視覺特效、動畫廣告、圖標等，它們通常分布在主題內容周圍，有時也夾雜在主題內容中間，但它們與主題內容并無相關性。其次界面設計過程中視覺層次混亂，也會給用戶帶來認識的負擔，降低了信息傳播的流暢性，成為視覺噪聲的一部分，在界面設計中所有與傳達主題信息不相關的這些界面元素及干擾信息傳播的內容都成為視覺噪聲。

（二）界面設計中視覺噪聲形成原因

界面設計過程中，設計師過度追求視覺效果，在界面上添加很多的視覺特效，如復雜的花紋背景，立體按鈕圖標等。這些視覺元素在一定程度上美化了視覺效果，使界面的外觀層次感得到提升，但是這樣元素添加越多，越是影響信息的傳播，形成的視覺噪聲就越多。還有些視覺噪聲不是設計師刻意要添加界面之中，比如網絡廣告信息，網站開發者出于利益目的和網站長期發展考慮，不得不將廣告信息放置在頁面中，尤其是動畫廣告。用戶在閱讀文章內容時，視線會被引導到廣告信息上，變相強迫用戶閱讀不相關的內容，這些都是視覺噪聲形成的原因。

（三）視覺噪聲的危害

用戶在閱讀界面信息的時候，大腦對信息處理是有限度的。心理學家Baddeley對人類記憶和信息處理進行了大量研究后表明，如果人能夠集中注意力，其信息處理過程也不受干擾，那其工作記憶中能保存3-4項事物[1]。

在界面設計時，同一組塊下信息數量超過3條時記憶效果就會下降，信息條數越多，記住的比例就越低。對用戶來說，界面中過多的視覺元素降低了有效信息的比例，這些視覺元素給用戶快速獲取信息嚴重干擾。視覺噪聲的存在嚴重影響了信息傳播效率，給用戶使用網絡交互界面帶來了認知的困難。因此，凈化界面環境，減少視覺噪聲，設計簡潔的界面，為用戶提供良好閱讀體驗成為信息快速傳播的重要課題。

二、界面設計元素視覺噪聲

界面設計的目標是提供清晰、簡潔、易用的用戶體驗，使用戶能夠輕松地找到所需信息，而視覺噪聲的存在嚴重影響了有效信息的傳播。

（一）界面背景

根據格式塔心理學原理，人們在初次接觸陌生的景物和圖片時，總是本能地選擇一個物體作為圖形（即主體），其余的作為基底（即背景）。這種選擇的時間不會超過1%秒。這一論點對于研究界面視覺信息傳遞效率有著重要意義[2]。圖形指的是界面視覺傳達的主體信息，基底指的是界面的背景。圖形與基底相分離，是圖像被人們認知的前提。人類的知覺系統總是追求簡單清晰和有規律的影像，如果背景設計過于復雜繁瑣，會導致界面上部分文字或是圖像信息在顏色或圖案上和背景相互遮蔽，造成視覺信息和背景混淆不分，降低了主題信息的可識別性，從而產生視覺噪聲。人的知覺系統中一種知覺能力將圖形與背景區分開，圖形是居于頁面前部的視覺主體信息部分，底被看成是用來襯托主體信息的背景。格式塔心理學引入了聲學上的信噪比的概念，來解釋圖形被“噪音”干擾的程度。噪音越少，信息的傳遞就越有效和清晰、背景越簡單，主體信息越容易被感知。在界面設計中背景不能太過復雜，簡單清晰的背景有利于用戶獲取所需要的正確信息，在交互界面信息越來越多的情況下，去除背景的界面會給用戶帶來更好的視覺體驗。

但是在界面設計過程中，對于某些特定主題設計，需要使用圖片做背景裝飾，在設計時也必須要將背景圖像和主題信息內容明顯地區分開。通過選擇的背景圖和主題內容色彩形成較大對比反差，或者是降低背景圖的不透明度，從而使背景圖像模糊，主題信息就會突出顯示出來。這樣設計不僅讓界面顯得非常的人性化，烘托出界面所要傳遞給用戶的氛圍，也能夠突出界面的主題信息內容。另外，還可以背景圖和主題內容間增加透明圖層，將主題內容和背景圖像分離開，來降低背景圖像帶來的視覺噪聲。

（二）界面裝飾元素

界面設計師在設計時習慣性地在界面上添加一些裝飾元素，如icon圖標、分割線、下劃線、提示類設計元素等，以使得界面每一個細節都做到盡可能完美，但是往往很多裝飾元素為了裝飾而設計，不是為了信息的傳達而設計。因為這些元素不是用戶所需要的，但是用戶在閱讀時卻無法避開這些裝飾帶來的視覺干擾，這些無用的裝飾設計形成了視覺噪聲。

英國科爾伯恩著的《簡約至上：交互式設計四策略》一書中，提到“刪除——去掉所有不必要的按鈕，直至減到不能再減，避免分散用戶注意力”[3]。設計師在界面設計時候，首先就要考慮好界面中每一個元素的必要性，如標志、導航等是交互界面中不能缺少的視覺元素，其他裝飾的元素應根據信息傳達的需要盡可能刪除，裝飾圖形、不必要的圖標、多余的文字、按鈕等內容都要從界面中清除，從而讓主體信息能夠得到良好的展現，避免裝飾元素給用戶帶來視覺注意力的分散，讓用戶迷惑到界面中看起來不重要的內容上去。簡化視覺內容，提煉界面信息，將重要的內容凸顯展示，刪除一切不必要的裝飾元素，讓界面簡單，做到極簡設計。

（三）躁動的廣告

在注意力經濟時代，互聯網也逐漸演變成廣告展示的前沿陣地。網絡廣告在交互界面中存在范圍廣泛，形式多樣，常見的視覺表現形式有文字連接廣告、banner圖片、多媒體動畫等，網絡廣告的出現給交互界面企業的發展帶來強勁動力。但是對界面信息傳播產生了干擾，增加了信息閱讀的不確定性，成為界面中面積較大的視覺噪聲來源。

網路廣告設計吸引人注意是其重要屬性，設計師在設計制作時，通常會選擇對比強烈的色彩。強對比色彩會給用戶帶來強烈的視覺沖擊，用戶的注意力很容易就被吸引過去，強烈的色彩視覺沖擊后給用戶帶來視覺疲勞，還會把用戶注意力帶到廣告信息上。這些廣告信息對于用戶來說沒有任何價值，嚴重影響用戶正常信息的獲取。為了減少界面廣告帶來的視覺噪聲，應該盡可能少地添加廣告信息。如果必須要有廣告內容，在設計時候不能只考慮廣告設計的視覺效果，還要盡可能考慮廣告所在界面的設計因素，盡可能讓廣告設計和界面設計相互協調，在色彩和圖案的選擇上和界面色彩能夠呼應起來，讓整個界面在視覺上形成統一感覺。

網絡廣告另外一個重要的問題在于動態化設計，動態化設計使視覺信息更容易被有效傳達，也更容易被用戶接受。動態化的視覺元素不能濫用，容易使用戶分心。廣告在不停地閃爍，不停地刺激用戶眼球，這種刺激作用會對用戶視覺系統產生危害，使其心神不定、煩躁不安，因此廣告設計制作時應該保持平衡，張弛有度。廣告視覺噪聲已經成為界面中特別突出的一個問題，只有合理的制作廣告才能減少廣告帶來的視覺噪聲危害。

三、界面結構與交互元素視覺噪聲

用戶使用交互界面時，并不是按照我們通常閱讀書報的方式從左到右、從上到下逐一查看，而是掃描式閱讀，人們最常用的導向方法是進入一個頁面，粗略掃視一遍頁面，看看自己有哪些選擇，并且同時快速過濾掉那些與自己無關或者是自己不感興趣的內容[4]。為了使界面在瞬間能夠讓用戶明白易懂，界面設計必須要有一個清楚的視覺層次。界面內容需要有重點突出的、有次要閱讀的，如果界面中所有的元素都一樣的重要，視覺刺激都在一個層次，所有的元素同時都在吸引用戶的視覺，無形中增加了用戶的視覺負擔，從而形成視覺噪聲。

（一）建立清晰視覺層級

界面視覺噪聲不只產生于視覺元素，在界面設計中視覺層級的不清晰也是視覺噪聲的重要來源。在布局界面設計元素之前，先區分元素優先級和重要度，讓用戶能夠按照一定層級順序獲取所需要的信息，幫助用戶高效獲取和理解信息。通常設置三個層級，類似通常意義上的標題、副標題、正文。一級信息吸引用戶的眼球，在界面布局設置時這樣的信息設置大些，布局位置上靠左一些，圖形色彩加強對比，大的元素、色彩對比強烈更具有吸引力。如新聞標題，頭條重點的新聞設置文字放大加粗，并為新聞標題添加圖片放置在視覺重要位置。二級信息幫助理解一級信息，是對一級信息的說明，字體設計要相對一級標題小，色彩要淡。三級詳細信息內容，在設計時字體最小，但是設計時也要考慮文字的易讀性，相對于正文字體設計，這樣的層級設計能給用戶帶來很好的閱讀體驗，豐富的視覺層次在界面設計上又有很高的審美層次。

（二）弱化界面元素間分隔設計

界面信息在設計時通常采用分區塊展示形式，塊元素間通過線和背景色彩來分隔，這些色塊和線條在一定程度上幫助了界面元素空間分隔，也在很大程度上成為影響信息傳達的視覺干擾。完型心理學封閉性原理告訴我們，人們在觀察事物的時候，傾向于將許多個獨立的元素視為一個個封閉的圖案。我們的大腦會自動填補元素和元素間的空白部分，形成一段不存在的視覺整體。應用在界面信息塊元素空間分割上，由于每個文字標題或圖像都是多個獨立而且外形相似的元素，用戶在瀏覽時也很容易將這塊元素作為一個整體，元素間空白部分會自動填補，因此應該通過對齊設計，在視覺上形成分割，刪除分割線和背景色塊，極簡的空間結構使頁面呈現信息內容更干凈，也更容易將用戶的視覺吸引到內容上。

界面布局時，信息塊元素通過適當的留白處理即可實現分隔效果。通過留白處理，一方面使界面更簡潔，消除了視覺噪聲，另一方面也使得內容成為整個界面視覺的焦點，方便用戶快捷獲取信息，同時也給用戶人帶來心理上的輕松與快樂。塊元素分隔留白時，要注意留白間隙的大小，掌握好信息塊元素間的比例及留白后的頁面節奏感，避免過多留白給頁面帶來的松散感覺，留白分隔空間處理要靠設計師個人感覺來把握，經過大量的實踐中鍛煉出來。

（三）減少超鏈接層級

超鏈接是界面交互設計的核心，在界面交互設計里有一個著名的原則3次點擊原則[5]。根據這個原則，如果用戶在訪問網站時候，連續3次超鏈接點擊之后，仍然無法找到他所想要的信息，用戶就會放棄使用網站，跳轉到其他網站去尋找信息，過多的層級會讓網站變得使用困難。這個原則給我們的啟示是：界面設計應有明確的導航、邏輯架構和后續站點的層次結構。對于界面設計導航菜單來說，精簡導航欄目和子欄目，導航欄目結構不要超過三級，欄目內容邏輯關系清晰。在整個網站界面中導航位置和樣式都要統一，即將導航放置在頁面的固定位置，通常在頁面頂部或側邊。這樣可以增強用戶的視覺記憶，幫助用戶在任何一個界面中都能快速找到相關導航鏈接。

導航菜單應該有清晰的層次結構，使用戶能夠快速了解整個應用或網站的內容架構，并能夠自然地導航到所需的內容。界面設計中除了常用的主導航之外，還要有每個欄目的子導航和面包屑導航。面包屑導航又稱位置導航，能幫助用戶明白當前頁面在網站中的位置以及更快地找到用戶想要到達的其他相關頁面，最后在網站內容界面還要有相關文章內容鏈接或推薦文章鏈接，讓用戶可以簡單快速讀到相關的信息，輕松自如地運用界面。

四、結語

人的感官體驗是一個謎，但是總有些設計師能做出讓人身心愉悅的視覺設計。在界面視覺設計中減少和避免視噪噪聲的影響，重點是要理解界面設計的用戶的需求和界面設計傳達信息的初衷，為產品的功能、內容而設計，為用戶的行為而設計，而不是為視覺、為特效展示而設計[6]。

本文通過界面設計中產生視覺噪聲的各種元素進行分析，找出噪聲產生的不同原因及在界面中的視覺表現，結合設計心理學及視覺傳播設計的一些基本原理，研究發現界面設計中消除視覺噪聲的一些規律，將這些規律引入界面設計，有助于優化交互界面設計，提高信息傳達的效率。降低交互界面設計中的視覺噪聲，設計出符合用戶需求和良好體驗的交互界面是界面設計的迫切需求，界面視覺噪聲的研究將為設計師提供減少噪聲的方法和理論支撐，為凈化網絡界面環境提供幫助，促進交互界面設計產業發展。

參考文獻：

[1]魏因申克.設計師要懂心理學[M].徐佳，馬迪，余盈億，譯.北京：人民郵電出版社，2013：65.

[2]考夫卡.格式塔心理學原理[M].李維，譯.北京：北京大學出版社，2010：23.

[3]科爾伯恩.簡約至上：交互式設計四策略[M].李松峰，譯.北京：人民郵電出版社，2018：67.

[4]克魯格.點石成金：訪客至上的WEB和移動可用性設計秘笈[M].蔣芳，譯.北京：機械工業出版社，2019：89.

[5]霍克曼.瞬間之美——WEB界面設計如何讓用戶心動[M].向怡寧，譯.北京：人民郵電出版社，2009：134.

[6]桂榮.新媒體時代下視覺傳達設計發展趨勢分析[J].傳播力研究，2020（1）：145-146.

作者簡介：王俊波，碩士，河南輕工職業學院講師。研究方向：交互多媒體設計、視覺傳達設計。