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

基于視覺(jué)思維的用戶界面設(shè)計(jì)云計(jì)算智能終端等信息處理技術(shù)為用戶界面的多樣性帶來(lái)了可能用戶增強(qiáng)體驗(yàn)界面宜人可用變得越來(lái)越重要對(duì)用戶認(rèn)知行為的研究將有助于提升用戶界面的體驗(yàn)質(zhì)量。文章對(duì)認(rèn)知學(xué)領(lǐng)域下的視覺(jué)思維進(jìn)行研究，的理論出發(fā)點(diǎn)探究其在用戶界面設(shè)計(jì)中的運(yùn)用總結(jié)基于視覺(jué)思維的用戶界面設(shè)計(jì)方法。視覺(jué)思維認(rèn)知用戶界面設(shè)計(jì)方法ZG分類號(hào)：J0-05XX：XX：1003-0069（20XX）02-0109-03隨著計(jì)算機(jī)硬件設(shè)備和軟件及信息技術(shù)的進(jìn)步用戶界面逐漸從單一的呈現(xiàn)形式向多感官交互、實(shí)時(shí)個(gè)性化呈現(xiàn)方式進(jìn)展。如今以用戶為中心成為用戶界面設(shè)計(jì)的重要原則單純地通過(guò)技術(shù)手段已不能夠滿足用戶界面的體驗(yàn)質(zhì)量在用戶界面設(shè)計(jì)時(shí)應(yīng)深入了解用戶從感官體驗(yàn)到理性思維的過(guò)程充分滿足用戶的認(rèn)知行為和需求，為用戶提供更為高效易用的增強(qiáng)性交互體驗(yàn)。視覺(jué)感知是用戶與界面進(jìn)行交互過(guò)程中最為頻繁的感知行為而視覺(jué)思維活動(dòng)作為感知與思維相結(jié)合的認(rèn)知活動(dòng)能夠幫助用戶在進(jìn)行人機(jī)交互過(guò)程中完成―系列認(rèn)知任務(wù)。因此，從視覺(jué)思維任務(wù)及作用機(jī)制角度來(lái)探究用戶界面設(shè)計(jì)對(duì)提高人機(jī)界面的用戶增強(qiáng)體驗(yàn)有著十分重要的意義。11視覺(jué)思維的概念20世紀(jì)早期，一個(gè)由德國(guó)心理學(xué)家組成的研究小組提出了格式塔原理（Gestlt，又稱完形心理學(xué)，打破了對(duì)于視覺(jué)活動(dòng)的片面理解對(duì)認(rèn)知心理學(xué)的進(jìn)展起到了推動(dòng)作用更為設(shè)計(jì)領(lǐng)域帶來(lái)了更為深遠(yuǎn)的影響而視覺(jué)思維理論正是基于認(rèn)知心理學(xué)與格式塔原理提出的該理論得到了生理學(xué)心理學(xué)等各方面的有力支持。1.1視覺(jué)思維的概念及特征視覺(jué)思維（Visulthinking，又稱視知覺(jué)，是視覺(jué)感受與理性思維的融合產(chǎn)物最早是由美國(guó)心理學(xué)家魯?shù)婪虬⒍骱Ｄ罚≧udolfrnheim）在其著作《視覺(jué)思維>中提出的。不同于諸如邏輯思維語(yǔ)言思維等抽象思維視覺(jué)思維是一種基于視覺(jué)感知的制造性思維人借助對(duì)所獲得的視覺(jué)感知進(jìn)行篩選從而得到心理形象產(chǎn)物即視覺(jué)意象視覺(jué)思維能夠以這些視覺(jué)意象作為擺脫已有的認(rèn)知規(guī)范從而使認(rèn)識(shí)主體直接感受來(lái)自外界的視覺(jué)感知充分發(fā)揮認(rèn)識(shí)主體的制造力和主觀能動(dòng)性。視覺(jué)思維的特點(diǎn)具體表現(xiàn)為四個(gè)方面首先視覺(jué)思維源于并受制于客體自身結(jié)構(gòu)認(rèn)識(shí)主體是通過(guò)對(duì)客觀事物的感知接受視覺(jué)信息并將這些視覺(jué)信息的含義通過(guò)視覺(jué)思維的認(rèn)知過(guò)程傳遞到大腦中因此認(rèn)識(shí)主體的視覺(jué)思維是在客體的引導(dǎo)下進(jìn)行信息的理解與認(rèn)知。其次，視覺(jué)思維能夠喚醒“無(wú)意識(shí)心理。1視覺(jué)思維往往能夠誘導(dǎo)直覺(jué)的產(chǎn)生進(jìn)而使深藏于意識(shí)主體中的沉默知覺(jué)快速轉(zhuǎn)化為現(xiàn)實(shí)而有效的知識(shí)從而更為有效地被自覺(jué)視覺(jué)思維具有靈活性與選擇性視覺(jué)思維受到人的主觀因素影響通過(guò)視覺(jué)意象操作發(fā)揮想象作用進(jìn)而產(chǎn)生的因此人們通常試圖將所感受到的客觀事物與大腦中的記憶與經(jīng)驗(yàn)或者個(gè)人的視覺(jué)習(xí)慣與興趣愛好相聯(lián)系從而具有靈活人的視覺(jué)思維在一次次的視覺(jué)感受經(jīng)驗(yàn)影響下產(chǎn)生了一種固定模式這使得此后一旦再次接收到相似的視覺(jué)信息大腦就會(huì)將其與之前的經(jīng)驗(yàn)相聯(lián)系并將主要的精力分配到對(duì)固定模式中核心信息的理解上。1.2視覺(jué)思維的任務(wù)過(guò)程對(duì)于外界事物所見所聞的過(guò)程構(gòu)成感覺(jué)將輸入的圖像聲這一信息處理的過(guò)程就是認(rèn)知認(rèn)知所涉及到的能力主要包括視覺(jué)搜（lh.（detection辨（discrimintion、識(shí)（gn（identifiction和記憶搜（memoryh）這幾點(diǎn)，這其實(shí)也正是視覺(jué)思維的主要任務(wù)過(guò)程，即視覺(jué)思維是對(duì)視覺(jué)活動(dòng)所接收到的信息進(jìn)行再加工的過(guò)程：首先，色彩等視覺(jué)信息被探測(cè)并輸入到心理世界目標(biāo)信息通過(guò)一系列的視覺(jué)查詢機(jī)制被視覺(jué)注意所接收視覺(jué)注意對(duì)目標(biāo)信息對(duì)象進(jìn)行有效篩選并決定所1篩選的信息需要進(jìn)入意識(shí)進(jìn)行加工處理還是可以直接反應(yīng)隨后意識(shí)通過(guò)視覺(jué)處理對(duì)感興趣的信息進(jìn)行特征分析以及優(yōu)先排序，對(duì)未知的信息進(jìn)行學(xué)習(xí)和適應(yīng)將有意義的信息輸入記憶中作進(jìn)一步加工；最終形成經(jīng)驗(yàn)知識(shí)以供以后的高級(jí)理性抽象認(rèn)知。2視覺(jué)思維的作用機(jī)制及其啟發(fā)2.1視覺(jué)思維的作用機(jī)制（1）視覺(jué)查詢視覺(jué)思維的本質(zhì)是對(duì)注意力的分配它是由一系列與注意相關(guān)的動(dòng)作組成的大腦觸發(fā)快速的眼睛運(yùn)動(dòng)當(dāng)我們需要關(guān)注所需信息時(shí)就會(huì)調(diào)整發(fā)現(xiàn)信息的路徑將注意力集中于特定信息，（visuls覺(jué)思維首先就是從客觀的視覺(jué)世界中通過(guò)構(gòu)建視覺(jué)查詢來(lái)尋找和載體進(jìn)行視覺(jué)交互時(shí)通常是要確定想要解決的問(wèn)題然后通過(guò)對(duì)特定信息的一系列搜索，即通過(guò)視覺(jué)查詢來(lái)獲得答案。（2）視覺(jué)處理視覺(jué)處理首先是通過(guò)位置通道對(duì)視野中所見信息的每一部分同時(shí)進(jìn)行特征分析既要從這些特征中提取有意義的部分又要考慮它們的順序?qū)μ卣鞯囊曈X(jué)處理和分析可以幫助我們了解形式等方面都是早期階段的特征屬性可以用于大腦指揮眼睛運(yùn)動(dòng)。接下來(lái)就是對(duì)圖案的處理機(jī)制將視覺(jué)空間劃分為具有輪廓的1一步的視覺(jué)處理是通過(guò)更為繁雜的內(nèi)容通道，即物體的識(shí)別。（3）視覺(jué)工作記憶通過(guò)視覺(jué)感受到的外界信息中有90%以上已存在于我們的腦海中識(shí)別物體會(huì)激活認(rèn)知的動(dòng)作模式以便執(zhí)行接下來(lái)的操作?？梢?，看到某個(gè)物體會(huì)令大腦傾向于特定的思維行動(dòng)模式，從而引起進(jìn)一步的行為這種對(duì)大腦中視覺(jué)對(duì)象的激活作用叫作“視覺(jué)工作記憶，根據(jù)視覺(jué)對(duì)象的不同，視覺(jué)工作記憶最多能夠同時(shí)記錄三件事物有的視覺(jué)對(duì)象從建立到保持只需要通過(guò)一次視覺(jué)注意，而對(duì)于某些對(duì)象則需要一次又一次視覺(jué)注意過(guò)程。通常留在視覺(jué)工作記憶中的對(duì)象能減小下一次視覺(jué)注意中的對(duì)象范圍。2.2視覺(jué)思維作用機(jī)制對(duì)設(shè)計(jì)的啟發(fā)視覺(jué)思維對(duì)設(shè)計(jì)的啟發(fā)可以總結(jié)為以下幾點(diǎn)：（1）設(shè)計(jì)要支持大腦的圖案查找能力。因?yàn)槿说拇竽X能夠快速而靈活的發(fā)現(xiàn)視覺(jué)圖案因此換為可視化的視覺(jué)設(shè)計(jì)。（2）好的設(shè)計(jì)能夠優(yōu)化認(rèn)知過(guò)程。應(yīng)該讓圖案和標(biāo)志發(fā)揮各自的優(yōu)勢(shì)幫助用戶有效地處理視覺(jué)查詢?cè)谟?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)新的視覺(jué)呈現(xiàn)方式所帶來(lái)的長(zhǎng)遠(yuǎn)利益與所花費(fèi)代1價(jià)之間的矛盾關(guān)系，選擇最優(yōu)化的設(shè)計(jì)方案。（4）在設(shè)計(jì)時(shí)應(yīng)從多個(gè)層次考慮視覺(jué)注意力，優(yōu)化認(rèn)知線索。3基于視覺(jué)思維的用戶界面設(shè)計(jì)方法從視覺(jué)思維的角度來(lái)研究用戶界面設(shè)計(jì)要從兩個(gè)方面出發(fā)：首先用戶界面信息的準(zhǔn)確傳達(dá)能夠使視覺(jué)思維更為快速清楚地對(duì)接收到的界面視覺(jué)信息做出相應(yīng)的反應(yīng)反之更多的認(rèn)知任務(wù)被視覺(jué)思維快速處理將有助于認(rèn)識(shí)主體對(duì)用戶界面信息的深度理解，進(jìn)而提高認(rèn)識(shí)主體做出決策的效率。3.1構(gòu)建界面信息層次為了使用戶將視覺(jué)注意集中于真正想要了解的目標(biāo)信息上，應(yīng)對(duì)界面的內(nèi)容和視覺(jué)進(jìn)行簡(jiǎn)化和分層減少用戶處理的信息量，提高用戶在界面完成任務(wù)的效率在用戶界面中多余的視覺(jué)元素會(huì)分散用戶對(duì)于信息的認(rèn)知注意阻礙用戶的視線這可能會(huì)令用戶不得不放棄對(duì)該界面的進(jìn)一步操作因此在進(jìn)行用戶界面設(shè)計(jì)時(shí)一方面應(yīng)將信息進(jìn)行篩選和梳理構(gòu)建信息的內(nèi)容層另一方面在不影響用戶界面整體易讀性的前提下，盡量簡(jiǎn)化視覺(jué)設(shè)計(jì)。（1）篩選原始數(shù)據(jù)信息量在進(jìn)行用戶界面設(shè)計(jì)時(shí)應(yīng)當(dāng)充分考慮界面的使用環(huán)境了任務(wù)目標(biāo)這幾個(gè)問(wèn)題出發(fā)把握用戶在界面中想要做的是什么篩1選最具有代表性的內(nèi)容呈現(xiàn)于用戶界面幸免過(guò)多信息對(duì)用戶的干擾，并同意有需求的用戶能夠進(jìn)行更深層次信息的研究。（2）確定界面內(nèi)容的主次關(guān)系在對(duì)信息進(jìn)行篩選過(guò)后應(yīng)該根據(jù)用戶的需求首先按照信息的不同情況明確信息的主次關(guān)系將用戶界面內(nèi)容分為主要界面結(jié)構(gòu)中根據(jù)主次關(guān)系設(shè)置一級(jí)界面二級(jí)界面三級(jí)界面在界面版面中設(shè)置主標(biāo)題、次標(biāo)題、小標(biāo)題等，并排列相關(guān)內(nèi)容。（3）創(chuàng)建界面視覺(jué)的層次結(jié)構(gòu)視覺(jué)的注意和選擇是有重點(diǎn)的因此通過(guò)將信息的呈現(xiàn)方式結(jié)構(gòu)化和精煉，能夠幸免重復(fù)的視覺(jué)“噪音，提高用戶接受信息的效率。首先應(yīng)給予用戶界面內(nèi)容合理的視覺(jué)分層在界面布局上，應(yīng)劃分不同類別不同層級(jí)內(nèi)容所在的位置每一層的用戶界面只用于呈現(xiàn)一層的內(nèi)容關(guān)系并合理優(yōu)化承載信息的用戶界面排版和位置布局在進(jìn)行界面視覺(jué)設(shè)計(jì)上應(yīng)至少設(shè)置兩層視覺(jué)層應(yīng)向用戶展示整體的內(nèi)容第二層級(jí)的內(nèi)容主要是針對(duì)用戶在第一層所選項(xiàng)進(jìn)行詳細(xì)解釋和細(xì)節(jié)展示其次在視覺(jué)設(shè)計(jì)上強(qiáng)化不同層次內(nèi)容的對(duì)比用戶界面中的視覺(jué)主體與其他不需要被關(guān)注的次要元素之間的對(duì)比界限的清楚程度能夠影響主要內(nèi)容在用戶界面中的識(shí)別度和用戶在人機(jī)交互過(guò)程中的視覺(jué)疲勞度因此在保持用戶界面功能和內(nèi)容的前提下，1盡可能地強(qiáng)化主次內(nèi)容之間的對(duì)比。（4）給予信息準(zhǔn)確的視覺(jué)轉(zhuǎn)化介于某些抽象信息不易被理解在進(jìn)行用戶界面設(shè)計(jì)時(shí)給予信息適當(dāng)?shù)囊曈X(jué)轉(zhuǎn)化與概念轉(zhuǎn)換能夠更加準(zhǔn)確地傳達(dá)信息內(nèi)涵因此在用戶界面設(shè)計(jì)時(shí)要利用適合的視覺(jué)元素來(lái)對(duì)信息進(jìn)行形象地體現(xiàn)和準(zhǔn)確地釋義用戶界面視覺(jué)元素的設(shè)計(jì)應(yīng)與所代表的信息含義具有一定的象征意義聯(lián)系例如可以采納簡(jiǎn)化圖形的方式，經(jīng)過(guò)一定的形狀提煉與重組設(shè)計(jì)具有代表性的圖標(biāo)。圖3.1中SPLumir的圖標(biāo)設(shè)計(jì)，就是將簡(jiǎn)單幾何圖形組合成為具有代表性的，象征不同類型圖表的視覺(jué)符號(hào)。3.2強(qiáng)化界面色彩搭配在用戶界面中色彩通常是一個(gè)先聲奪人的要素它對(duì)于界面視覺(jué)表現(xiàn)有著重要的作用色彩不僅可以有效地區(qū)別不同的類別及內(nèi)容增強(qiáng)用戶對(duì)界面信息的記憶還能夠直觀地表現(xiàn)用戶界面帶來(lái)的情感屬性和營(yíng)造的氛圍其傳達(dá)效果甚至超越了文字和圖形。（1）明確色彩的象征在用戶界面設(shè)計(jì)中色彩的象征性具有重要的作用色彩在不同用戶界面環(huán)境具有不同的含義紅色表示注意和警告等含義；綠色代表安全健康等含而在用戶界面中則更多地作為背景色來(lái)突出其他鮮亮色彩。如圖12展示的“MyBnk”這款P，運(yùn)用的是黑色和深灰色背景，對(duì)高飽和度的文字和數(shù)據(jù)圖起到了烘托的作用同時(shí)使用戶的視覺(jué)注意集中到了信息主體。（2）增強(qiáng)形色的對(duì)比在進(jìn)行用戶界面信息可視化的色彩搭配時(shí)應(yīng)注意圖形和顏色之間的對(duì)應(yīng)關(guān)系在顏色設(shè)計(jì)時(shí)若為了區(qū)分尺寸較小的視覺(jué)例如在淺色背景上的深色圖形以及黑色背景上的淺色圖形等以此增加用戶界面信息的識(shí)別度。（3）協(xié)調(diào)色彩的搭配在用戶界面設(shè)計(jì)中協(xié)調(diào)的色彩組合關(guān)系能夠加強(qiáng)用戶界面內(nèi)容之間的分類和聯(lián)系雖然強(qiáng)化不同元素之間的色彩對(duì)比能夠便于用戶對(duì)它們進(jìn)行區(qū)分但過(guò)于強(qiáng)烈的對(duì)抗色會(huì)對(duì)用戶的視覺(jué)造成刺激容易產(chǎn)生令人難受的閃爍感從而影響用戶視覺(jué)在界面上的停留與注意為達(dá)到色彩搭配的美觀舒適可在用戶界面前景元素的色彩中運(yùn)用純度較高的色系而背景則采納純度較低的冷色或者深灰色、黑色，如圖3.3。3.3合理運(yùn)用視覺(jué)修辭所謂視覺(jué)修辭就是一種以圖像圖形語(yǔ)言等綜合符號(hào)為媒介以取得最佳的視覺(jué)效果為目的的傳播行為在用戶界面信息可視化設(shè)計(jì)中，隱喻和反復(fù)是最為常用的視覺(jué)修辭手法。（1）符號(hào)隱喻1符號(hào)隱喻是用戶界面視覺(jué)元素設(shè)計(jì)的重要方法之一計(jì)算機(jī)的命令都是通過(guò)數(shù)學(xué)公式的運(yùn)算執(zhí)行的而用戶無(wú)法直接與這些數(shù)學(xué)計(jì)算公式進(jìn)行溝通因此便需要通過(guò)形象化的視覺(jué)符號(hào)表示計(jì)算機(jī)的功能和操作信息。在計(jì)算機(jī)操作系統(tǒng)的進(jìn)展歷程中，Windows首先通過(guò)運(yùn)用符號(hào)隱喻的方法設(shè)計(jì)圖標(biāo)，實(shí)現(xiàn)了用戶與信息交流在對(duì)用戶界面圖標(biāo)進(jìn)行設(shè)計(jì)時(shí)首先應(yīng)提煉圖標(biāo)要表征的主要含義尋找與之具有聯(lián)系的具象圖形通過(guò)對(duì)圖形特征進(jìn)行提煉和重組，最終形成能夠明確釋義的視覺(jué)隱喻符號(hào)。（2）視覺(jué)反復(fù)視覺(jué)反復(fù)修辭的方法是通過(guò)一個(gè)被人們所熟知的視覺(jué)符號(hào)作為參考依據(jù)進(jìn)行解構(gòu)和同構(gòu)而衍生出代表其它信息的視覺(jué)符號(hào)在視覺(jué)思維過(guò)程中對(duì)視覺(jué)多次刺激形成的長(zhǎng)期記憶會(huì)產(chǎn)生思維定勢(shì)當(dāng)用戶再次感知相似的視覺(jué)元素時(shí)就會(huì)調(diào)用之前所保留的類似信息，從而準(zhǔn)確地識(shí)別當(dāng)前的視覺(jué)符號(hào)含義。因此，在設(shè)計(jì)用戶界面的圖形語(yǔ)言時(shí)應(yīng)尊重認(rèn)知經(jīng)驗(yàn)對(duì)于已有的元素進(jìn)行反復(fù)使用，能夠使用戶輕松識(shí)別，降低用戶的認(rèn)知成本。3.4提高使用流暢程度提高用戶使用流暢度是提升界面易用度的核心之一能夠?yàn)橛脩魩?lái)良好的認(rèn)知與體驗(yàn)從而吸引用戶不斷深入使用界面功能。（1）合理規(guī)劃視覺(jué)化流程人在用戶界面中的視覺(jué)流程存在一定的規(guī)律性對(duì)某些區(qū)域1的關(guān)注較多并在觀看用戶界面時(shí)存在一定方向性在進(jìn)行用戶界面的內(nèi)容布局設(shè)計(jì)時(shí)應(yīng)按照一般用戶的視覺(jué)流進(jìn)行合理分配，一般來(lái)說(shuō)用戶界面的左側(cè)中上部為視覺(jué)熱點(diǎn)位置將重要內(nèi)容的簡(jiǎn)介或可供選擇的部分置于此處能夠有效引導(dǎo)用戶的視覺(jué)注意。（2）提高反饋效應(yīng)靈敏度在人機(jī)交互的過(guò)程中對(duì)用戶操作結(jié)果進(jìn)行快速呈現(xiàn)并及時(shí)給予反饋能夠縮短用戶的等待時(shí)間提升用戶與界面之間的互動(dòng)感受認(rèn)知心理學(xué)的研究表明當(dāng)界面的響應(yīng)出現(xiàn)停頓或延誤的交互質(zhì)量因此在不影響內(nèi)容的情況下可適當(dāng)降低呈現(xiàn)品質(zhì)，例如適度縮小圖形的尺寸從而加快界面加載信息的速度和反饋的靈敏度。（3）提供人性化操作幫助拖拽點(diǎn)擊等多樣的交互操作方式這對(duì)某些用戶來(lái)說(shuō)是陌生的為了幫助用戶快速享受互動(dòng)的樂(lè)趣應(yīng)在用戶界面中以圖文、實(shí)例演示等方式提供相應(yīng)的提示和指