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

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