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

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