本文總結(jié)了一些在交互設(shè)計中重要的理論要點(diǎn)，并針對各理論要點(diǎn)展開描述相應(yīng)的設(shè)計策略。主要涉及視覺感知、認(rèn)知摩擦、認(rèn)知負(fù)荷和情境認(rèn)知四個方面。enjoy~

一、交互設(shè)計中的視覺感知

1. 視覺感知的過程

視覺是人類認(rèn)識自然、了解客觀世界的重要手段，同時也是理解人類認(rèn)知功能的突破口。當(dāng)人們開始觀察外界物體時，視覺系統(tǒng)將剌激以圖像的方式傳遞到大腦，并通過大腦的視覺皮層區(qū)域控制人眼的運(yùn)動來表達(dá)對圖像的興趣，這一過程被稱為視覺感知過程。，用戶會經(jīng)歷了6 個心理過程：

1. 視覺尋找是指在視線所及的范圍內(nèi)搜索目標(biāo)。
2. 尋找指的是當(dāng)發(fā)現(xiàn)視覺探測到的對象與預(yù)期目標(biāo)吻合時，排除其他對象的干擾，固定跟蹤對象。
3. 分辨是指對多個相似的對象的信息進(jìn)行深入探測。
4. 識別是指根據(jù)視覺特征信息和細(xì)節(jié)信息的差異，識別目標(biāo)的含義。
5. 確定是指鎖定的對象與記憶中的存儲信息相吻合，確認(rèn)目標(biāo)。
6. 記憶搜索是以上視覺過程的基礎(chǔ)，以上視覺所獲得的信息都要與記憶信息對比，從而做出判斷。

2. 人機(jī)交互界面的視覺感知

人機(jī)交互界面中用戶的視覺感知過程遵循著視覺感知過程的規(guī)律，即眼睛運(yùn)動獲取界面信息粗略特征圖，并將其傳遞至大腦，根據(jù)注意力的需要，大腦加強(qiáng)與目標(biāo)相關(guān)的信息并抑制不太相關(guān)的信息，指引眼睛關(guān)注目標(biāo)的潛在區(qū)域，并進(jìn)一步構(gòu)建詳細(xì)的特征圖，通過對界面信息連續(xù)的選擇與過濾，用戶最后鎖定目標(biāo)獲取所需信息。

如何通過界面元素間的位置關(guān)系引起用戶注意，從而快速有效地感知并獲取目標(biāo)信息是界面設(shè)計的重要方面。

從設(shè)計角度來說，應(yīng)當(dāng)使設(shè)計內(nèi)容容易被發(fā)現(xiàn)、容易被識別。人機(jī)交互界面的空間呈現(xiàn)盡管有限，但也會包含復(fù)雜的視覺信息： 亮度要素、圖形要素、色彩要素、布局因素、信息量的擁擠程度等，現(xiàn)重點(diǎn)討論亮度感知、色彩感知和空間感知對人機(jī)交互界面的影響：

（1）亮度感知

人機(jī)交互界面中各種信息的呈現(xiàn)，首先依靠的是顯示屏的亮度，因此亮度是界面元素的重要屬性之一。

用戶是從界面的明暗變化中識別出有關(guān)目標(biāo)的信息，即只有從整體目標(biāo)的亮度感知中才能識別出有意義的實(shí)體。

研究表明：色彩組合與亮度對比具有顯著的交互作用。

在較高的亮度對比條件下，用戶更傾向于選擇不同的顏色組合，而在較低的亮度對比條件下，亮度對比要比色彩組合對視覺感知具有更重要的作用。

網(wǎng)易新聞的夜間模式很好的利用了亮度感知

（2）色彩感知

在視覺感知的諸多影響因素中，色彩的作用非常突出。色彩具有3 個基本屬性：色相、明度、飽和度。

在用戶界面的設(shè)計中使用色彩要謹(jǐn)慎，設(shè)計應(yīng)該首先考慮單色，在白色背景下的黑色圖案或者在黑色背景下的白色圖案通常適用于大多數(shù)的用戶。

合理的顏色搭配不僅能夠提高界面信息的認(rèn)知效果，還能夠豐富界面的層次。

設(shè)計通過使用合理的顏色搭配提高了信息的認(rèn)知

（3）空間感知

空間感知又稱為深度感知。在人機(jī)交互界面中我們希望能產(chǎn)生盡可能多的深度信息，因?yàn)樵谌藱C(jī)交互界面中圖像是眼睛和大腦的注意焦點(diǎn)。如果破壞了深度信息，也就喪失了真實(shí)感。

在界面的設(shè)計過程中，亮度是一個決定視覺感知效果的因素，因此對象的明暗變化成為判斷對象遠(yuǎn)近的依據(jù)。

此外，利用光與影的變化、內(nèi)容的重疊與干涉以及細(xì)節(jié)與空中透視產(chǎn)生的立體效果。如通過對圖案增加陰影、透視等效果，使圖標(biāo)在視覺上有一定的立體感、三維感的2.5 D的圖標(biāo)，并逐漸開發(fā)出真正立體的三維圖標(biāo)等。

圖中material design的圓形圖標(biāo)，寫實(shí)的背包圖標(biāo)都很好的應(yīng)用了空間感知

二、交互設(shè)計中的認(rèn)知摩擦

1. 認(rèn)知摩擦理論

認(rèn)知摩擦這一概念首先是由美國的交互設(shè)計師Alan Cooper 提出的，其定義為：

當(dāng)人類智力遭遇隨問題變化而變化的復(fù)雜信息系統(tǒng)規(guī)則時遇到的阻力。

認(rèn)知摩擦闡述的是因認(rèn)知的差異性導(dǎo)致基于產(chǎn)品開發(fā)的界面變得復(fù)雜，用戶難以通過界面表象理解程序員的意圖，執(zhí)行任務(wù)過程存在困難如標(biāo)簽或?qū)Ш降恼J(rèn)知不清晰、操作反饋得不明確或不及時，得不到預(yù)期效果等問題。

相對于物理世界中的摩擦現(xiàn)象，認(rèn)知摩擦則是因?yàn)樾畔⒒潭鹊牟粩嗉由睿尚畔⑴蛎泴?dǎo)致人機(jī)交互界面設(shè)計不良的一種現(xiàn)象。

在《交互設(shè)計精髓》一書中，提出設(shè)計者最重要的目標(biāo)之一，就是要使表現(xiàn)模型和用戶的心理模型盡可能地接近：

認(rèn)知摩擦除了直接導(dǎo)致產(chǎn)品的易用性降低之外，情感流失也是認(rèn)知摩擦的一個重要方面。

人機(jī)交互系統(tǒng)中大量的信息需要集中在有限的界面中，當(dāng)無法保證用戶如何從眾多的信息中識別出對自己有用的內(nèi)容時，用戶也很難從界面中尋得情感上的共鳴。

界面應(yīng)該具有自己內(nèi)部的和諧，這是最基本的要求。

一個由粗俗的顏色、不精致的線條以及不優(yōu)雅的字體排布形成的丑陋界面可能會與漂亮的界面具有一樣的精確度，但是卻不太可能激發(fā)用戶使用的信心與情感互動。

滴滴現(xiàn)在的界面與1.0版本的界面相比較，更能激發(fā)用戶的情感，降低用戶的認(rèn)知負(fù)荷

2. 認(rèn)知摩擦的特性

（1）不可消除性：人機(jī)交互界面的開發(fā)者與最終面向者都是人，而不同的人的生活經(jīng)歷、受到的教育、文化的影響會培養(yǎng)出不同的思維認(rèn)知方式。因此，只要有人的活動參與，認(rèn)知摩擦就不可避免。

（2）兩面性：認(rèn)知摩擦通常起有害作用，但有時又是不可缺少的，在網(wǎng)絡(luò)游戲、虛擬學(xué)習(xí)中用戶的使用興趣、學(xué)習(xí)斗志都需要依靠認(rèn)知摩擦引導(dǎo)人對界面的積極探索，但是當(dāng)超過一定的闊值時，認(rèn)知摩擦就會轉(zhuǎn)變?yōu)檎J(rèn)知沖突，起到抑制作用，增加負(fù)面情緒。

網(wǎng)絡(luò)游戲中需要依靠認(rèn)知摩擦來激發(fā)用戶對游戲的探索

3. 降低認(rèn)知摩擦的設(shè)計方法

（1）將信息有效的組織從而控制認(rèn)知差異。

右面的設(shè)計方案有效的對信息進(jìn)行了組織

（2）將界面設(shè)計過程與用戶反饋緊密地結(jié)合起來，以反饋結(jié)果來改進(jìn)給用戶帶來認(rèn)知阻力的設(shè)計要素，提高認(rèn)知流暢度。

例如，及時的進(jìn)行產(chǎn)品的可用性測試；為初版的產(chǎn)品設(shè)計用戶反饋機(jī)制等。

三、交互設(shè)計中的認(rèn)知負(fù)荷

1. 認(rèn)知負(fù)荷的概念

認(rèn)知負(fù)荷的理論是在20世紀(jì)70年代由澳大利亞的心理學(xué)家]ohn Sweller提出的，他認(rèn)為感覺輸入和短時記憶的容量都是有限的，并且如果個體直接或間接接收到的信息量多于容量值時，勢必會給個體的認(rèn)知系統(tǒng)帶來負(fù)荷，即形成認(rèn)知負(fù)荷。

在人機(jī)交互界面中可以認(rèn)為，認(rèn)知負(fù)荷是用戶為了順利完成某項工作任務(wù)，實(shí)際投入到注意和工作記憶中去的認(rèn)知資源的總量占個體固有認(rèn)知資源的比例。

人的認(rèn)知資源（主要表現(xiàn)為工作記憶容量）是有限的，任何學(xué)習(xí)和任務(wù)完成的活動都需要耗費(fèi)認(rèn)知資源，從而造成認(rèn)知負(fù)荷。

認(rèn)知負(fù)荷分為外在認(rèn)知負(fù)荷和內(nèi)在認(rèn)知負(fù)荷：

（1）外在認(rèn)知負(fù)荷：主要與人機(jī)交互界面信息的組織呈現(xiàn)方式有關(guān)，用于外在認(rèn)知負(fù)荷的認(rèn)知資源可能會超過用戶的工作記憶容量，從而阻礙用戶使用產(chǎn)品。

例如用戶從界面大量的信息中搜索目標(biāo)時，無關(guān)信息往往成為干擾項，增加外在認(rèn)知負(fù)荷。

復(fù)雜的交互界面增加了用戶的外在認(rèn)知負(fù)荷

（2）內(nèi)在認(rèn)知負(fù)荷：內(nèi)在認(rèn)知負(fù)荷，主要由在信息讀取過程中需要被同時識別的元素數(shù)量決定，元素數(shù)量與內(nèi)在認(rèn)知負(fù)荷成正比。

內(nèi)在認(rèn)知負(fù)荷的高低主要是由產(chǎn)品的復(fù)雜性與用戶知識之間的關(guān)系決定。因此，內(nèi)在認(rèn)知負(fù)荷不僅受到信息內(nèi)容的影響，還受到用戶特征的影響。

任何年齡段的用戶都能順利的使用微信，微信是一個內(nèi)在認(rèn)知負(fù)荷很低的產(chǎn)品

2. 控制認(rèn)知負(fù)荷的設(shè)計策略

（1）控制外在認(rèn)知負(fù)荷

a、在界面元素的組織上，要遵循一定的視覺搜索原則，要符合人的視覺搜索規(guī)律，使用戶以最短的視覺搜索線路找到所需信息，并建立信息之間的聯(lián)系，進(jìn)而整合信息，減少用戶的分散注意力，從而降低用戶的認(rèn)知負(fù)荷。

這是本人設(shè)計的開戶的交互流程，頂部的分步指引可以建立流程的聯(lián)系，減少用戶的注意力分散

b、在界面元素的呈現(xiàn)方式上，根據(jù)信息的特性和用戶的任務(wù)需要選擇適合的方式呈現(xiàn)，例如利用色彩塊來表達(dá)區(qū)域和等級信息，增加復(fù)雜內(nèi)容的幫助提示信息等。

這是本人設(shè)計的上傳作品的表單內(nèi)容，將晦澀難懂的屬性值加上一些說明提示可以有效的降低用戶的認(rèn)知負(fù)荷

（2）控制內(nèi)在認(rèn)知負(fù)荷

a、采用圖形化、模塊化的構(gòu)建產(chǎn)品規(guī)則，可以提高用戶自身的認(rèn)知能力，控制內(nèi)在認(rèn)知負(fù)荷。

b、減少各個元素之間的交互動作，可以降低圖形化結(jié)構(gòu)之間的復(fù)雜度，從而有效降低內(nèi)在認(rèn)知負(fù)荷。

c、采用簡單的信息組織結(jié)構(gòu)，減少各信息架構(gòu)之間的交叉點(diǎn)和分支，也可以起到降低內(nèi)在認(rèn)知負(fù)荷的效果。

四、交互設(shè)計中的情境認(rèn)知

1. 情境認(rèn)知概述

情境認(rèn)知是對周圍發(fā)生的事情感知和了解的意識，是對事件和行為產(chǎn)生影響的目標(biāo)宗旨。

擁有完整、準(zhǔn)確和及時的情境認(rèn)知對于人機(jī)交互界面系統(tǒng)的用戶來說每分鐘都是必要的。

情境認(rèn)知主要包括四個階段：

1. 情境認(rèn)知第一階段（感知階段）影響用戶感知的直接因素： 視覺感知、對象識別、知識認(rèn)知、環(huán)境感知。
2. 情境認(rèn)知第二階段（理解階段）影響用戶理解的直接因素：記憶、圖示和認(rèn)知偏差。
3. 情境認(rèn)知第三階段（預(yù)測階段）影響用戶預(yù)測的直接因素： 推理、記憶和認(rèn)知偏差。
4. 情境認(rèn)知的第四階段（用戶內(nèi)在因素）間接因素主要包括： 決策、內(nèi)在能力、經(jīng)驗(yàn)、情緒。

2、改善用戶情境認(rèn)知情況的設(shè)計策略

顯示交互界面構(gòu)成要素的合理性和科學(xué)性，是利用外部手段改善情境認(rèn)知情況的關(guān)鍵因素。

為了能切實(shí)改善用戶情境認(rèn)知情況，首先要求對顯示界面構(gòu)成進(jìn)行分解，通過各種設(shè)計手段使其與情境認(rèn)知要素進(jìn)行匹配，使界面能夠提供最優(yōu)的可視化信息，提高用戶對信息的識別、認(rèn)知和處理效率。

在各階段的建議設(shè)計策略如下：

（1）感知階段：從人機(jī)交互界面構(gòu)成要素入手，以適合讀取、便于記憶的方式進(jìn)行設(shè)計。

• 減少無效信息顯示
• 確保信息的清晰易讀，對重要信息有一定的提示
• 提供與情境任務(wù)相關(guān)的重要信息顯示

例如京東的企業(yè)注冊，信息清晰易讀、獲取焦點(diǎn)時有規(guī)則提示、頂部有任務(wù)進(jìn)度相關(guān)的提示

（2）理解階段：要求人機(jī)交互界面提供與任務(wù)情境相符合的認(rèn)知模式，幫助用戶正確理解當(dāng)前情境。

• 提供與情境相關(guān)的信息，支持并引導(dǎo)用戶在各種情境下的正確認(rèn)知
• 設(shè)計界面的應(yīng)急機(jī)制，能夠警告和提示錯誤
• 界面邏輯層次簡單，提供快捷便利的操作方式

（3）預(yù)測階段：要求人機(jī)交互界面提供能對任務(wù)情境進(jìn)行預(yù)測的認(rèn)知信息，幫助用戶正確預(yù)測將要發(fā)生的情況。

• 對將要發(fā)生的具有確定性的情況向用戶說明
• 對不確定性的情況盡可能的提供給用戶解決方案

例如本人在項目中針對失敗情境的設(shè)計，告知用戶造成失敗的可能原因，并且提供了兩種解決方式，解決方式在原因中也做了說明。

總結(jié)

以上就是對于交互設(shè)計中視覺感知、認(rèn)知摩擦、認(rèn)知負(fù)荷和情境認(rèn)知四個設(shè)計理論方面的總結(jié)，希望可以給大家?guī)硪恍椭?/p>

#專欄作家#

流年，人人都是產(chǎn)品經(jīng)理專欄作家?；ヂ?lián)網(wǎng)產(chǎn)品設(shè)計師，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計經(jīng)驗(yàn)。擅長用戶體驗(yàn)設(shè)計，喜歡鉆研需求功能背后的技術(shù)實(shí)現(xiàn)方式；在成為綜合型產(chǎn)品設(shè)計師的道路上不斷努力前進(jìn)！

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖由作者提供