基于視覺思維的用戶界面設(shè)計(jì)

摘要：

隨著信息時(shí)代的迅猛發(fā)展，大數(shù)據(jù)、云計(jì)算、智能終端等信息處理技術(shù)為用戶界面的多樣性帶來了可能。用戶增強(qiáng)體驗(yàn)、界面宜人可用變得越來越重要，對用戶認(rèn)知行為的研究將有助于提升用戶界面的體驗(yàn)質(zhì)量。文章對認(rèn)知學(xué)領(lǐng)域下的視覺思維進(jìn)行研究，旨在將視覺思維作為“以用戶為中心”的理論出發(fā)點(diǎn)，探究其在用戶界面設(shè)計(jì)中的運(yùn)用，總結(jié)基于視覺思維的用戶界面設(shè)計(jì)方法。

關(guān)鍵詞：

視覺思維 認(rèn)知 用戶界面 設(shè)計(jì)方法

中國分類號：J0-05

文獻(xiàn)標(biāo)識碼：A

文章編號：1003-0069 （2015） 02-0109-03

隨著計(jì)算機(jī)硬件設(shè)備和軟件及信息技術(shù)的進(jìn)步，用戶界面逐漸從單一的呈現(xiàn)形式向多感官交互、實(shí)時(shí)個(gè)性化呈現(xiàn)方式發(fā)展。如今，以用戶為中心成為用戶界面設(shè)計(jì)的重要原則，單純地通過技術(shù)手段已不能夠滿足用戶界面的體驗(yàn)質(zhì)量。在用戶界面設(shè)計(jì)時(shí)應(yīng)深入了解用戶從感官體驗(yàn)到理性思維的過程，充分滿足用戶的認(rèn)知行為和需求，為用戶提供更為高效易用的增強(qiáng)性交互體驗(yàn)。

視覺感知是用戶與界面進(jìn)行交互過程中最為頻繁的感知行為，而視覺思維活動作為感知與思維相結(jié)合的認(rèn)知活動能夠幫助用戶在進(jìn)行人機(jī)交互過程中完成—系列認(rèn)知任務(wù)。因此，從視覺思維任務(wù)及作用機(jī)制角度來探索用戶界面設(shè)計(jì)對提高人機(jī)界面的用戶增強(qiáng)體驗(yàn)有著十分重要的意義。

1 視覺思維的概念

20世紀(jì)早期，一個(gè)由德國心理學(xué)家組成的研究小組提出了格式塔原理（Gestalt，又稱完形心理學(xué)），打破了對于視覺活動的片面理解，對認(rèn)知心理學(xué)的發(fā)展起到了推動作用，更為設(shè)計(jì)領(lǐng)域帶來了更為深遠(yuǎn)的影響，而視覺思維理論正是基于認(rèn)知心理學(xué)與格式塔原理提出的，該理論得到了生理學(xué)、心理學(xué)等各方面的有力支持。

1.1 視覺思維的概念及特征

視覺思維（ Visual thinking），又稱視知覺，是視覺感受與理性思維的融合產(chǎn)物，最早是由美國心理學(xué)家魯?shù)婪颍⒍骱Ｄ罚≧udolf Arnheim）在其著作《視覺思維>中提出的。不同于諸如邏輯思維、語言思維等抽象思維，視覺思維是一種基于視覺感知的創(chuàng)造性思維。人借助對所獲得的視覺感知進(jìn)行篩選，從而得到心理形象產(chǎn)物即視覺意象，視覺思維能夠以這些視覺意象作為中介，構(gòu)建知覺與思維的溝通橋梁，擺脫已有的認(rèn)知規(guī)范，從而使認(rèn)識主體直接感受來自外界的視覺感知，充分發(fā)揮認(rèn)識主體的創(chuàng)造力和主觀能動性。

視覺思維的特點(diǎn)具體表現(xiàn)為四個(gè)方面。首先，視覺思維源于并受制于客體自身結(jié)構(gòu)。認(rèn)識主體是通過對客觀事物的感知接受視覺信息，并將這些視覺信息的含義通過視覺思維的認(rèn)知過程傳遞到大腦中，因此，認(rèn)識主體的視覺思維是在客體的引導(dǎo)下進(jìn)行信息的理解與認(rèn)知。其次，視覺思維能夠喚醒“無意識心理”。視覺思維往往能夠誘導(dǎo)直覺的產(chǎn)生，進(jìn)而使深藏于意識主體中的沉默知覺快速轉(zhuǎn)化為現(xiàn)實(shí)而有效的知識，從而更為有效地被自覺意識加以利用。第三，視覺思維具有靈活性與選擇性。視覺思維受到人的主觀因素影響，通過視覺意象操作，發(fā)揮想象作用進(jìn)而產(chǎn)生的，因此人們通常試圖將所感受到的客觀事物與大腦中的記憶與經(jīng)驗(yàn)或者個(gè)人的視覺習(xí)慣與興趣愛好相聯(lián)系，從而具有靈活性與選擇性。最后，視覺思維還具有一定的固定模式。人的視覺思維在一次次的視覺感受經(jīng)驗(yàn)影響下，產(chǎn)生了一種固定模式，這使得此后一旦再次接收到相似的視覺信息，大腦就會將其與之前的經(jīng)驗(yàn)相聯(lián)系，并將主要的精力分配到對固定模式中核心信息的理解上。

1.2 視覺思維的任務(wù)過程

對于外界事物所見所聞的過程構(gòu)成感覺，將輸入的圖像、聲音等信息進(jìn)行變換、簡化、加工、存儲、恢復(fù)、解釋并提取，這一信息處理的過程就是認(rèn)知。認(rèn)知所涉及到的能力主要包括視覺搜索（visual search）.發(fā)現(xiàn)（detection）、辨別（discrimination）、識別（recog nition）、確認(rèn)（identification）和記憶搜索（memory search）這幾點(diǎn)，這其實(shí)也正是視覺思維的主要任務(wù)過程，即視覺思維是對視覺活動所接收到的信息進(jìn)行再加工的過程：首先，來自物理世界的圖形圖像、文本、符號、色彩等視覺信息被探測并輸入到心理世界：目標(biāo)信息通過一系列的視覺查詢機(jī)制被視覺注意所接收，視覺注意對目標(biāo)信息對象進(jìn)行有效篩選，并決定所篩選的信息需要進(jìn)入意識進(jìn)行加工處理還是可以直接反應(yīng)；隨后意識通過視覺處理對感興趣的信息進(jìn)行特征分析以及優(yōu)先排序，對未知的信息進(jìn)行學(xué)習(xí)和適應(yīng)，將有意義的信息輸入記憶中作進(jìn)一步加工；最終形成經(jīng)驗(yàn)知識以供以后的高級理性抽象認(rèn)知。

2 視覺思維的作用機(jī)制及其啟示

2.1 視覺思維的作用機(jī)制

（1）視覺查詢

視覺思維的本質(zhì)是對注意力的分配，它是由一系列與注意相關(guān)的動作組成的：大腦觸發(fā)快速的眼睛運(yùn)動，當(dāng)我們需要關(guān)注所需信息時(shí)，就會調(diào)整發(fā)現(xiàn)信息的路徑，將注意力集中于特定信息，這些與注意相關(guān)的動作叫作“視覺查詢（visual queries）”。視覺思維首先就是從客觀的視覺世界中通過構(gòu)建視覺查詢來尋找和選取重要的信息，例如，當(dāng)我們與地圖、圖表、張貼畫等信息載體進(jìn)行視覺交互時(shí)，通常是要確定想要解決的問題，然后通過對特定信息的一系列搜索，即通過視覺查詢來獲得答案。

（2）視覺處理

視覺處理首先是通過位置通道，對視野中所見信息的每一部分同時(shí)進(jìn)行特征分析，既要從這些特征中提取有意義的部分，又要考慮它們的順序。對特征的視覺處理和分析可以幫助我們了解視覺信息中哪些部分會很醒目，例如顏色、方向、銳度、運(yùn)動形式等方面都是早期階段的特征屬性，可以用于大腦指揮眼睛運(yùn)動。接下來，就是對圖案的處理機(jī)制，將視覺空間劃分為具有輪廓的區(qū)域、包含相似顏色、圖案或運(yùn)動形式的區(qū)域。最后，對于進(jìn)一步的視覺處理是通過更為繁雜的內(nèi)容通道，即物體的識別。

（3）視覺工作記憶

通過視覺感受到的外界信息中有90%以上已存在于我們的腦海中，識別物體會激活認(rèn)知的動作模式，以便執(zhí)行接下來的操作。可見，看到某個(gè)物體會令大腦傾向于特定的思維行動模式，從而引起進(jìn)一步的行為。這種對大腦中視覺對象的激活作用叫作“視覺工作記憶”，根據(jù)視覺對象的不同，視覺工作記憶最多能夠同時(shí)記錄三件事物，有的視覺對象從建立到保持只需要通過一次視覺注意，而對于某些對象則需要一次又一次視覺注意過程。通常留在視覺工作記憶中的對象能減小下一次視覺注意中的對象范圍。

2.2 視覺思維作用機(jī)制對設(shè)計(jì)的啟示

視覺思維對設(shè)計(jì)的啟示可以總結(jié)為以下幾點(diǎn)：

（1）設(shè)計(jì)要支持大腦的圖案查找能力。因?yàn)槿说拇竽X能夠快速而靈活的發(fā)現(xiàn)視覺圖案，因此，在設(shè)計(jì)中，可以將信息轉(zhuǎn)換為可視化的視覺設(shè)計(jì)。

（2）好的設(shè)計(jì)能夠優(yōu)化認(rèn)知過程。應(yīng)該讓圖案和標(biāo)志發(fā)揮各自的優(yōu)勢，幫助用戶有效地處理視覺查詢。在計(jì)算機(jī)用戶界面的設(shè)計(jì)中，這一點(diǎn)尤為關(guān)鍵。

（3）設(shè)計(jì)師應(yīng)從認(rèn)知經(jīng)濟(jì)學(xué)的角度出發(fā)，充分權(quán)衡學(xué)習(xí)新的工具或適應(yīng)新的視覺呈現(xiàn)方式所帶來的長遠(yuǎn)利益與所花費(fèi)代價(jià)之間的矛盾關(guān)系，選擇最優(yōu)化的設(shè)計(jì)方案。

（4）在設(shè)計(jì)時(shí)應(yīng)從多個(gè)層次考慮視覺注意力，優(yōu)化認(rèn)知線索。3基于視覺思維的用戶界面設(shè)計(jì)方法

從視覺思維的角度來研究用戶界面設(shè)計(jì)，要從兩個(gè)方面出發(fā)：首先，用戶界面信息的準(zhǔn)確傳達(dá)能夠使視覺思維更為快速清晰地對接收到的界面視覺信息做出相應(yīng)的反應(yīng)；反之，更多的認(rèn)知任務(wù)被視覺思維快速處理，將有助于認(rèn)識主體對用戶界面信息的深度理解，進(jìn)而提高認(rèn)識主體做出決策的效率。

3.1 構(gòu)建界面信息層次

為了使用戶將視覺注意集中于真正想要了解的目標(biāo)信息上，應(yīng)對界面的內(nèi)容和視覺進(jìn)行簡化和分層，減少用戶處理的信息量，提高用戶在界面完成任務(wù)的效率。在用戶界面中，多余的視覺元素會分散用戶對于信息的認(rèn)知注意，妨礙用戶的視線，這可能會令用戶不得不放棄對該界面的進(jìn)一步操作。因此，在進(jìn)行用戶界面設(shè)計(jì)時(shí)，一方面應(yīng)將信息進(jìn)行篩選和梳理，構(gòu)建信息的內(nèi)容層次，創(chuàng)造界面各部分的視覺結(jié)構(gòu)，另一方面，在不影響用戶界面整體易讀性的前提下，盡量簡化視覺設(shè)計(jì)。

（1）篩選原始數(shù)據(jù)信息量

在進(jìn)行用戶界面設(shè)計(jì)時(shí)，應(yīng)當(dāng)充分考慮界面的使用環(huán)境，了解用戶需求。在設(shè)計(jì)初期，從用戶的背景、基本情況、心態(tài)、任務(wù)目標(biāo)這幾個(gè)問題出發(fā)，把握用戶在界面中想要做的是什么，篩選最具有代表性的內(nèi)容呈現(xiàn)于用戶界面，避免過多信息對用戶的干擾，并允許有需求的用戶能夠進(jìn)行更深層次信息的研究。

（2）確定界面內(nèi)容的主次關(guān)系

在對信息進(jìn)行篩選過后，應(yīng)該根據(jù)用戶的需求，首先按照信息的不同情況，明確信息的主次關(guān)系，將用戶界面內(nèi)容分為主要內(nèi)容、次要內(nèi)容等。其次，對界面的信息內(nèi)容選擇性構(gòu)建，在界面結(jié)構(gòu)中根據(jù)主次關(guān)系設(shè)置一級界面、二級界面、三級界面，在界面版面中設(shè)置主標(biāo)題、次標(biāo)題、小標(biāo)題等，并排列相關(guān)內(nèi)容。

（3）創(chuàng)建界面視覺的層次結(jié)構(gòu)

視覺的注意和選擇是有重點(diǎn)的，因此通過將信息的呈現(xiàn)方式結(jié)構(gòu)化和精煉，能夠避免重復(fù)的視覺“噪音”，提高用戶接受信息的效率。

首先，應(yīng)給予用戶界面內(nèi)容合理的視覺分層。在界面布局上，應(yīng)劃分不同類別、不同層級內(nèi)容所在的位置，每一層的用戶界面只用于呈現(xiàn)一層的內(nèi)容關(guān)系，并合理優(yōu)化承載信息的用戶界面排版和位置布局。在進(jìn)行界面視覺設(shè)計(jì)上，應(yīng)至少設(shè)置兩層視覺層級。在第一層界面中，應(yīng)向用戶展示整體的內(nèi)容，第二層級的內(nèi)容主要是針對用戶在第一層所選項(xiàng)進(jìn)行詳細(xì)解釋和細(xì)節(jié)展示。其次，在視覺設(shè)計(jì)上強(qiáng)化不同層次內(nèi)容的對比。用戶界面中的視覺主體與其他不需要被關(guān)注的次要元素之間的對比界限的清晰程度能夠影響主要內(nèi)容在用戶界面中的識別度和用戶在人機(jī)交互過程中的視覺疲勞度。因此在保持用戶界面功能和內(nèi)容的前提下，盡可能地強(qiáng)化主次內(nèi)容之間的對比。

（4）給予信息準(zhǔn)確的視覺轉(zhuǎn)化

介于某些抽象信息不易被理解，在進(jìn)行用戶界面設(shè)計(jì)時(shí)，給予信息適當(dāng)?shù)囊曈X轉(zhuǎn)化與概念轉(zhuǎn)換，能夠更加準(zhǔn)確地傳達(dá)信息內(nèi)涵。因此在用戶界面設(shè)計(jì)時(shí)，要利用適合的視覺元素來對信息進(jìn)行形象地體現(xiàn)和準(zhǔn)確地釋義。用戶界面視覺元素的設(shè)計(jì)應(yīng)與所代表的信息含義具有一定的象征意義聯(lián)系。例如，可以采用簡化圖形的方式，經(jīng)過一定的形狀提煉與重組設(shè)計(jì)具有代表性的圖標(biāo)。圖3.1中SAP Lumira的圖標(biāo)設(shè)計(jì)，就是將簡單幾何圖形組合成為具有代表性的，象征不同類型圖表的視覺符號。

3.2 強(qiáng)化界面色彩搭配

在用戶界面中，色彩通常是一個(gè)先聲奪人的要素，它對于界面視覺表現(xiàn)有著重要的作用。色彩不僅可以有效地區(qū)別不同的類別及內(nèi)容，增強(qiáng)用戶對界面信息的記憶，還能夠直觀地表現(xiàn)用戶界面帶來的情感屬性和營造的氛圍，其傳達(dá)效果甚至超越了文字和圖形。

（1）明確色彩的象征

在用戶界面設(shè)計(jì)中，色彩的象征性具有重要的作用，色彩在不同用戶界面環(huán)境具有不同的含義：紅色表示注意和警告等含義；黃色表示接近危險(xiǎn)、引起注意等含義；綠色代表安全、健康等含義；藍(lán)色則代表財(cái)政、緩解等含義；黑色象征著死亡和黑暗，而在用戶界面中則更多地作為背景色來突出其他鮮亮色彩。如圖3.2展示的“My Bank”這款A(yù)PP，運(yùn)用的是黑色和深灰色背景，對高飽和度的文字和數(shù)據(jù)圖起到了烘托的作用，同時(shí)使用戶的視覺注意集中到了信息主體。

（2）增強(qiáng)形色的對比

在進(jìn)行用戶界面信息可視化的色彩搭配時(shí)，應(yīng)注意圖形和顏色之間的對應(yīng)關(guān)系。在顏色設(shè)計(jì)時(shí)，若為了區(qū)分尺寸較小的視覺元素，應(yīng)增強(qiáng)它為與背景之間顏色的對比度，例如，在淺色背景上的深色圖形以及黑色背景上的淺色圖形等，以此增加用戶界面信息的識別度。

（3）協(xié)調(diào)色彩的搭配

在用戶界面設(shè)計(jì)中，協(xié)調(diào)的色彩組合關(guān)系能夠加強(qiáng)用戶界面內(nèi)容之間的分類和聯(lián)系。雖然強(qiáng)化不同元素之間的色彩對比能夠便于用戶對它們進(jìn)行區(qū)分，但過于強(qiáng)烈的對抗色會對用戶的視覺造成刺激，容易產(chǎn)生令人難受的閃爍感，從而影響用戶視覺在界面上的停留與注意。為達(dá)到色彩搭配的美觀舒適，可在用戶界面前景元素的色彩中運(yùn)用純度較高的色系，而背景則采用純度較低的冷色或者深灰色、黑色，如圖3.3。

3.3 合理運(yùn)用視覺修辭

所謂視覺修辭，就是一種以圖像、圖形、語言等綜合符號為媒介，以取得最佳的視覺效果為目的的傳播行為。在用戶界面信息可視化設(shè)計(jì)中，隱喻和反復(fù)是最為常用的視覺修辭手法。

（1）符號隱喻

符號隱喻是用戶界面視覺元素設(shè)計(jì)的重要方法之一。計(jì)算機(jī)的命令都是通過數(shù)學(xué)公式的運(yùn)算執(zhí)行的，而用戶無法直接與這些數(shù)學(xué)計(jì)算公式進(jìn)行溝通，因此，便需要通過形象化的視覺符號表示計(jì)算機(jī)的功能和操作信息。在計(jì)算機(jī)操作系統(tǒng)的發(fā)展歷程中，Windows首先通過運(yùn)用符號隱喻的方法設(shè)計(jì)圖標(biāo)，實(shí)現(xiàn)了用戶與信息交流。在對用戶界面圖標(biāo)進(jìn)行設(shè)計(jì)時(shí)，首先應(yīng)提煉圖標(biāo)要表征的主要含義，尋找與之具有聯(lián)系的具象圖形，通過對圖形特征進(jìn)行提煉和重組，最終形成能夠明確釋義的視覺隱喻符號。

（2）視覺反復(fù)

視覺反復(fù)修辭的方法是通過一個(gè)被人們所熟知的視覺符號作為參考依據(jù)進(jìn)行解構(gòu)和同構(gòu)而衍生出代表其它信息的視覺符號。在視覺思維過程中，對視覺多次刺激形成的長期記憶會產(chǎn)生思維定勢。當(dāng)用戶再次感知相似的視覺元素時(shí)，就會調(diào)用之前所保留的類似信息，從而準(zhǔn)確地識別當(dāng)前的視覺符號含義。因此，在設(shè)計(jì)用戶界面的圖形語言時(shí)，應(yīng)尊重認(rèn)知經(jīng)驗(yàn)，對于已有的元素進(jìn)行反復(fù)使用，能夠使用戶輕松識別，降低用戶的認(rèn)知成本。

3.4 提高使用流暢程度

提高用戶使用流暢度是提升界面易用度的核心之一，能夠?yàn)橛脩魩砹己玫恼J(rèn)知與體驗(yàn)，從而吸引用戶不斷深入使用界面功能。

（1）合理規(guī)劃視覺化流程

人在用戶界面中的視覺流程存在一定的規(guī)律性，對某些區(qū)域的關(guān)注較多，并在觀看用戶界面時(shí)存在一定方向性。在進(jìn)行用戶界面的內(nèi)容布局設(shè)計(jì)時(shí)，應(yīng)按照一般用戶的視覺流進(jìn)行合理分配，一般來說，用戶界面的左側(cè)中上部為視覺熱點(diǎn)位置，將重要內(nèi)容的簡介或可供選擇的部分置于此處能夠有效引導(dǎo)用戶的視覺注意。

（2）提高反饋效應(yīng)靈敏度

在人機(jī)交互的過程中，對用戶操作結(jié)果進(jìn)行快速呈現(xiàn)并及時(shí)給予反饋，能夠縮短用戶的等待時(shí)間，提升用戶與界面之間的互動感受。認(rèn)知心理學(xué)的研究表明，當(dāng)界面的響應(yīng)出現(xiàn)停頓或延誤時(shí)，用戶會產(chǎn)生懷疑、急躁等不良情緒，嚴(yán)重影響用戶與界面的交互質(zhì)量。因此，在不影響內(nèi)容的情況下，可適當(dāng)降低呈現(xiàn)品質(zhì)，例如適度縮小圖形的尺寸，從而加快界面加載信息的速度和反饋的靈敏度。

（3）提供人性化操作幫助

目前，越來越多的用戶界面具備移動、拖拽、點(diǎn)擊等多樣的交互操作方式，這對某些用戶來說是陌生的。為了幫助用戶快速地熟悉操作，流暢地進(jìn)行界面交互，享受互動的樂趣，應(yīng)在用戶界面中以圖文、實(shí)例演示等方式提供相應(yīng)的提示和指導(dǎo)，比如：在初始界面為用戶提供使用演示，提示用戶如何進(jìn)行操作；同時(shí)在一些可操作的元素上給予提示性標(biāo)志，例如閃動、標(biāo)記等，以此告知用戶接下來的操作流程；同時(shí)在用戶的操作出現(xiàn)錯(cuò)誤時(shí)，及時(shí)給予提示和建議，以減輕用戶由于持續(xù)出錯(cuò)而產(chǎn)生的負(fù)面情緒。

4 結(jié)語

目前，學(xué)術(shù)界對于視覺思維理論的研究缺乏系統(tǒng)性和完善性，而視覺思維理論在用戶界面設(shè)計(jì)中具有重要的價(jià)值。未來，將視覺思維運(yùn)用到用戶界面設(shè)計(jì)中將提升界面的人性化增強(qiáng)性深度體驗(yàn)。因此，本文通過對視覺思維的特點(diǎn)、任務(wù)過程、作用機(jī)制進(jìn)行研究，總結(jié)視覺思維理論對設(shè)計(jì)的啟示，探索基于視覺思維的用戶界面設(shè)計(jì)方法，從而使界面設(shè)計(jì)能夠更為有效地幫助用戶獲取信息和完成任務(wù)，對今后視覺思維在用戶界面設(shè)計(jì)中的運(yùn)用研究提供了參考價(jià)值。