數(shù)字化時(shí)代基于降低視覺(jué)噪聲的界面設(shè)計(jì)研究

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

關(guān)鍵詞：數(shù)字化時(shí)代；視覺(jué)噪聲；界面設(shè)計(jì)；信息傳播；用戶體驗(yàn)

基金項(xiàng)目：本文系2024年度河南省高校人文社會(huì)科學(xué)研究一般項(xiàng)目“數(shù)字化時(shí)代基于降低視覺(jué)噪聲的界面設(shè)計(jì)研究”（2024-ZDJH-652）研究成果。

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

一、界面設(shè)計(jì)與視覺(jué)噪聲

（一）視覺(jué)噪聲元素

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

（二）界面設(shè)計(jì)中視覺(jué)噪聲形成原因

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

（三）視覺(jué)噪聲的危害

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

在界面設(shè)計(jì)時(shí)，同一組塊下信息數(shù)量超過(guò)3條時(shí)記憶效果就會(huì)下降，信息條數(shù)越多，記住的比例就越低。對(duì)用戶來(lái)說(shuō)，界面中過(guò)多的視覺(jué)元素降低了有效信息的比例，這些視覺(jué)元素給用戶快速獲取信息嚴(yán)重干擾。視覺(jué)噪聲的存在嚴(yán)重影響了信息傳播效率，給用戶使用網(wǎng)絡(luò)交互界面帶來(lái)了認(rèn)知的困難。因此，凈化界面環(huán)境，減少視覺(jué)噪聲，設(shè)計(jì)簡(jiǎn)潔的界面，為用戶提供良好閱讀體驗(yàn)成為信息快速傳播的重要課題。

二、界面設(shè)計(jì)元素視覺(jué)噪聲

界面設(shè)計(jì)的目標(biāo)是提供清晰、簡(jiǎn)潔、易用的用戶體驗(yàn)，使用戶能夠輕松地找到所需信息，而視覺(jué)噪聲的存在嚴(yán)重影響了有效信息的傳播。

（一）界面背景

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

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

（二）界面裝飾元素

界面設(shè)計(jì)師在設(shè)計(jì)時(shí)習(xí)慣性地在界面上添加一些裝飾元素，如icon圖標(biāo)、分割線、下劃線、提示類設(shè)計(jì)元素等，以使得界面每一個(gè)細(xì)節(jié)都做到盡可能完美，但是往往很多裝飾元素為了裝飾而設(shè)計(jì)，不是為了信息的傳達(dá)而設(shè)計(jì)。因?yàn)檫@些元素不是用戶所需要的，但是用戶在閱讀時(shí)卻無(wú)法避開這些裝飾帶來(lái)的視覺(jué)干擾，這些無(wú)用的裝飾設(shè)計(jì)形成了視覺(jué)噪聲。

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

（三）躁動(dòng)的廣告

在注意力經(jīng)濟(jì)時(shí)代，互聯(lián)網(wǎng)也逐漸演變成廣告展示的前沿陣地。網(wǎng)絡(luò)廣告在交互界面中存在范圍廣泛，形式多樣，常見的視覺(jué)表現(xiàn)形式有文字連接廣告、banner圖片、多媒體動(dòng)畫等，網(wǎng)絡(luò)廣告的出現(xiàn)給交互界面企業(yè)的發(fā)展帶來(lái)強(qiáng)勁動(dòng)力。但是對(duì)界面信息傳播產(chǎn)生了干擾，增加了信息閱讀的不確定性，成為界面中面積較大的視覺(jué)噪聲來(lái)源。

網(wǎng)路廣告設(shè)計(jì)吸引人注意是其重要屬性，設(shè)計(jì)師在設(shè)計(jì)制作時(shí)，通常會(huì)選擇對(duì)比強(qiáng)烈的色彩。強(qiáng)對(duì)比色彩會(huì)給用戶帶來(lái)強(qiáng)烈的視覺(jué)沖擊，用戶的注意力很容易就被吸引過(guò)去，強(qiáng)烈的色彩視覺(jué)沖擊后給用戶帶來(lái)視覺(jué)疲勞，還會(huì)把用戶注意力帶到廣告信息上。這些廣告信息對(duì)于用戶來(lái)說(shuō)沒(méi)有任何價(jià)值，嚴(yán)重影響用戶正常信息的獲取。為了減少界面廣告帶來(lái)的視覺(jué)噪聲，應(yīng)該盡可能少地添加廣告信息。如果必須要有廣告內(nèi)容，在設(shè)計(jì)時(shí)候不能只考慮廣告設(shè)計(jì)的視覺(jué)效果，還要盡可能考慮廣告所在界面的設(shè)計(jì)因素，盡可能讓廣告設(shè)計(jì)和界面設(shè)計(jì)相互協(xié)調(diào)，在色彩和圖案的選擇上和界面色彩能夠呼應(yīng)起來(lái)，讓整個(gè)界面在視覺(jué)上形成統(tǒng)一感覺(jué)。

網(wǎng)絡(luò)廣告另外一個(gè)重要的問(wèn)題在于動(dòng)態(tài)化設(shè)計(jì)，動(dòng)態(tài)化設(shè)計(jì)使視覺(jué)信息更容易被有效傳達(dá)，也更容易被用戶接受。動(dòng)態(tài)化的視覺(jué)元素不能濫用，容易使用戶分心。廣告在不停地閃爍，不停地刺激用戶眼球，這種刺激作用會(huì)對(duì)用戶視覺(jué)系統(tǒng)產(chǎn)生危害，使其心神不定、煩躁不安，因此廣告設(shè)計(jì)制作時(shí)應(yīng)該保持平衡，張弛有度。廣告視覺(jué)噪聲已經(jīng)成為界面中特別突出的一個(gè)問(wèn)題，只有合理的制作廣告才能減少?gòu)V告帶來(lái)的視覺(jué)噪聲危害。

三、界面結(jié)構(gòu)與交互元素視覺(jué)噪聲

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

（一）建立清晰視覺(jué)層級(jí)

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

（二）弱化界面元素間分隔設(shè)計(jì)

界面信息在設(shè)計(jì)時(shí)通常采用分區(qū)塊展示形式，塊元素間通過(guò)線和背景色彩來(lái)分隔，這些色塊和線條在一定程度上幫助了界面元素空間分隔，也在很大程度上成為影響信息傳達(dá)的視覺(jué)干擾。完型心理學(xué)封閉性原理告訴我們，人們?cè)谟^察事物的時(shí)候，傾向于將許多個(gè)獨(dú)立的元素視為一個(gè)個(gè)封閉的圖案。我們的大腦會(huì)自動(dòng)填補(bǔ)元素和元素間的空白部分，形成一段不存在的視覺(jué)整體。應(yīng)用在界面信息塊元素空間分割上，由于每個(gè)文字標(biāo)題或圖像都是多個(gè)獨(dú)立而且外形相似的元素，用戶在瀏覽時(shí)也很容易將這塊元素作為一個(gè)整體，元素間空白部分會(huì)自動(dòng)填補(bǔ)，因此應(yīng)該通過(guò)對(duì)齊設(shè)計(jì)，在視覺(jué)上形成分割，刪除分割線和背景色塊，極簡(jiǎn)的空間結(jié)構(gòu)使頁(yè)面呈現(xiàn)信息內(nèi)容更干凈，也更容易將用戶的視覺(jué)吸引到內(nèi)容上。

界面布局時(shí)，信息塊元素通過(guò)適當(dāng)?shù)牧舭滋幚砑纯蓪?shí)現(xiàn)分隔效果。通過(guò)留白處理，一方面使界面更簡(jiǎn)潔，消除了視覺(jué)噪聲，另一方面也使得內(nèi)容成為整個(gè)界面視覺(jué)的焦點(diǎn)，方便用戶快捷獲取信息，同時(shí)也給用戶人帶來(lái)心理上的輕松與快樂(lè)。塊元素分隔留白時(shí)，要注意留白間隙的大小，掌握好信息塊元素間的比例及留白后的頁(yè)面節(jié)奏感，避免過(guò)多留白給頁(yè)面帶來(lái)的松散感覺(jué)，留白分隔空間處理要靠設(shè)計(jì)師個(gè)人感覺(jué)來(lái)把握，經(jīng)過(guò)大量的實(shí)踐中鍛煉出來(lái)。

（三）減少超鏈接層級(jí)

超鏈接是界面交互設(shè)計(jì)的核心，在界面交互設(shè)計(jì)里有一個(gè)著名的原則3次點(diǎn)擊原則[5]。根據(jù)這個(gè)原則，如果用戶在訪問(wèn)網(wǎng)站時(shí)候，連續(xù)3次超鏈接點(diǎn)擊之后，仍然無(wú)法找到他所想要的信息，用戶就會(huì)放棄使用網(wǎng)站，跳轉(zhuǎn)到其他網(wǎng)站去尋找信息，過(guò)多的層級(jí)會(huì)讓網(wǎng)站變得使用困難。這個(gè)原則給我們的啟示是：界面設(shè)計(jì)應(yīng)有明確的導(dǎo)航、邏輯架構(gòu)和后續(xù)站點(diǎn)的層次結(jié)構(gòu)。對(duì)于界面設(shè)計(jì)導(dǎo)航菜單來(lái)說(shuō)，精簡(jiǎn)導(dǎo)航欄目和子欄目，導(dǎo)航欄目結(jié)構(gòu)不要超過(guò)三級(jí)，欄目?jī)?nèi)容邏輯關(guān)系清晰。在整個(gè)網(wǎng)站界面中導(dǎo)航位置和樣式都要統(tǒng)一，即將導(dǎo)航放置在頁(yè)面的固定位置，通常在頁(yè)面頂部或側(cè)邊。這樣可以增強(qiáng)用戶的視覺(jué)記憶，幫助用戶在任何一個(gè)界面中都能快速找到相關(guān)導(dǎo)航鏈接。

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

四、結(jié)語(yǔ)

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

本文通過(guò)界面設(shè)計(jì)中產(chǎn)生視覺(jué)噪聲的各種元素進(jìn)行分析，找出噪聲產(chǎn)生的不同原因及在界面中的視覺(jué)表現(xiàn)，結(jié)合設(shè)計(jì)心理學(xué)及視覺(jué)傳播設(shè)計(jì)的一些基本原理，研究發(fā)現(xiàn)界面設(shè)計(jì)中消除視覺(jué)噪聲的一些規(guī)律，將這些規(guī)律引入界面設(shè)計(jì)，有助于優(yōu)化交互界面設(shè)計(jì)，提高信息傳達(dá)的效率。降低交互界面設(shè)計(jì)中的視覺(jué)噪聲，設(shè)計(jì)出符合用戶需求和良好體驗(yàn)的交互界面是界面設(shè)計(jì)的迫切需求，界面視覺(jué)噪聲的研究將為設(shè)計(jì)師提供減少噪聲的方法和理論支撐，為凈化網(wǎng)絡(luò)界面環(huán)境提供幫助，促進(jìn)交互界面設(shè)計(jì)產(chǎn)業(yè)發(fā)展。

參考文獻(xiàn)：

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

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

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

[4]克魯格.點(diǎn)石成金：訪客至上的WEB和移動(dòng)可用性設(shè)計(jì)秘笈[M].蔣芳，譯.北京：機(jī)械工業(yè)出版社，2019：89.

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

[6]桂榮.新媒體時(shí)代下視覺(jué)傳達(dá)設(shè)計(jì)發(fā)展趨勢(shì)分析[J].傳播力研究，2020（1）：145-146.

作者簡(jiǎn)介：王俊波，碩士，河南輕工職業(yè)學(xué)院講師。研究方向：交互多媒體設(shè)計(jì)、視覺(jué)傳達(dá)設(shè)計(jì)。