藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

筆者最近在看《About Face3-交互設(shè)計(jì)精髓》一書， 第二章講到三個術(shù)語：實(shí)現(xiàn)模型、心理模型、表現(xiàn)模型?？瓷先ジ叽笊系脑~語，理解起來也很難懂。但是我還是硬著頭皮把這一章來回啃了好幾遍，終于咀嚼、咽下了。至于營養(yǎng)怎么樣，可以先看看網(wǎng)上對于“About  Face”這本書的評價。在這本交互界最權(quán)威的書里，作者用一個章節(jié)來講述這三個詞語。足見這三個詞語的重要性。三個詞語描述了產(chǎn)品的運(yùn)作機(jī)制、外在表現(xiàn)與用戶心里認(rèn)知之間的關(guān)系。為了能夠幫助大家容易理解這幾個詞語，我根據(jù)自己的理解加上一些示例進(jìn)行了重新的梳理，希望對大家的快速理解有所幫助。

 

先看看為什么要去理解這三個術(shù)語，對于產(chǎn)品設(shè)計(jì)師在工作上有什么幫助？
1，可以讓我們從宏觀的角度去思考用戶對產(chǎn)品的認(rèn)知。
2，可以看到一些不好使用的產(chǎn)品存在的深層原因。
3，可以知道怎樣可能設(shè)計(jì)出更好使用的產(chǎn)品。

再來簡單描述一下這三個術(shù)語的概念：
實(shí)現(xiàn)模型：產(chǎn)品是怎樣工作的。
心里模型：用戶認(rèn)為產(chǎn)品是怎樣工作的。
表現(xiàn)模型：通過設(shè)計(jì)來讓用戶認(rèn)為產(chǎn)品是怎樣工作的。

 

為了能夠形象地了解這些抽象的概念，我們可以通過以下幾個例子去理解。

我們通常認(rèn)為汽車的剎車過程是：腳踩下制動踏板，摩擦車輪讓車減速。然而實(shí)際的汽車剎車工作過程是：當(dāng)踩下制動踏板時，在踏板處通過杠桿原理把制動力放大了3倍，再通過液壓機(jī)構(gòu)驅(qū)動活塞把制動力又放大了9倍。放大以后的制動力推動活塞移動，活塞推動蹄片帶動剎車卡鉗緊緊的夾住制動碟，由蹄片與制動碟產(chǎn)生的強(qiáng)大摩擦力，讓車減速?？梢钥吹轿覀儗x車工作過程的認(rèn)知與剎車實(shí)際工作過程是有區(qū)別的。我們心里對剎車過程簡單的認(rèn)識就是心理模型，真實(shí)的汽車剎車工作過程的描述就是實(shí)現(xiàn)模型。

剎車工作原理圖

在以前的農(nóng)村人們會使用一種叫壓井的打水工具，其工作機(jī)制是利用活塞原理把水從地下抽出來。這個過程很復(fù)雜，對于大多數(shù)人們來說，是不明白壓井工作的中間細(xì)節(jié)過程。但是對于他們的使用卻是不會造成影響的。人們認(rèn)為通過上下提與壓的動作就把水從地下引上來了，這種簡單的解釋就足以讓他們很容易與壓井進(jìn)行交互了。這種產(chǎn)品的真實(shí)工作過程與人們想象中產(chǎn)品的工作過程，就是產(chǎn)品的實(shí)現(xiàn)模型與用戶的心理模型。

壓井工作原理圖

從上面的兩個示例可以看出，心理模型是對產(chǎn)品工作過程的一個概括的簡單認(rèn)知。人們使用產(chǎn)品時候，并不需要了解其內(nèi)部復(fù)雜的運(yùn)作細(xì)節(jié)，人們?yōu)槠鋭?chuàng)作出了一種簡單的解釋方式。這種理解雖然不能反映產(chǎn)品的內(nèi)部運(yùn)作機(jī)制，但是對于與之交互已經(jīng)夠用了。

在第一個剎車?yán)又?，可以看到為了剎車功能簡單易于理解，使駕駛員在開車時候不需要思考就可以立即學(xué)會使用。設(shè)計(jì)師對這個功能的表現(xiàn)進(jìn)行了設(shè)計(jì)，舍棄了在此功能運(yùn)行過程中的細(xì)節(jié)，讓用戶通過踩踏這個動作完成目標(biāo)的機(jī)制給自己一個簡單合理的解釋，從而迅速掌握了此功能，無需思考就就可以迅速正確使用了。這種把產(chǎn)品的功能展示給用戶的方式就是表現(xiàn)模型。

實(shí)現(xiàn)模型、表現(xiàn)模型、心理模型存在以下關(guān)系：

表現(xiàn)模型越接近心理模型，用戶就越容易了解產(chǎn)品功能、容易與之交互。表現(xiàn)模型越接近實(shí)現(xiàn)模型，用戶就越難理解產(chǎn)品，產(chǎn)品越難使用。

 

讓我們來看看一些表現(xiàn)模型偏向?qū)崿F(xiàn)模型的例子。

上圖是在瀏覽網(wǎng)頁時候會突然出現(xiàn)的彈出窗口，在彈出窗口上顯示一句只有程序員才能看懂的語句，它告訴用戶發(fā)生錯誤的具體原因。但是這讓普通用戶很痛苦，不知道發(fā)生了什么。不知道應(yīng)該點(diǎn)擊確定按鈕還是取消按鈕。這些就是程序員式設(shè)計(jì)，程序員按照自己的邏輯，當(dāng)發(fā)生錯誤時候，就告訴用戶原因，遵循的是程序理解的實(shí)現(xiàn)模型。需要告訴用戶出現(xiàn)的這個問題嗎？需要告訴用戶這個錯誤發(fā)生的原因細(xì)節(jié)還是告訴對其造成的影響？這些問題都是需要斟酌的，只有讓表現(xiàn)模型同用戶心理模型一致，才能夠讓用戶容易理解。

上圖是一個應(yīng)用的下載界面截圖，在下載離線包完成后，界面上還會顯示解壓進(jìn)度。從文件下載到可以使用需要經(jīng)過兩個過程，下載與解壓。但是沒有必要告訴用戶所有的這些步驟，沒必要讓用戶多了解一個概念。用戶需要知道的是文件下載完成了可以使用了，就可夠了。而不是想知道這些詳細(xì)的中間步驟。這就是表現(xiàn)模型與實(shí)現(xiàn)模型一致的情況。

上圖左側(cè)是Photoshop內(nèi)設(shè)置顏色的功能面板，設(shè)計(jì)師通過調(diào)節(jié)數(shù)值來達(dá)到自己需要的顏色。這些數(shù)值表達(dá)了顏色的實(shí)現(xiàn)機(jī)制，是從實(shí)現(xiàn)模型出發(fā)的。對于沒有經(jīng)驗(yàn)的用戶來說，想調(diào)整出自己需要的顏色是有一定困難的。右側(cè)也是Photoshop內(nèi)設(shè)置顏色的功能面板，用戶需要什么顏色可以直接點(diǎn)選。這種交互方式讓用戶很容易理解，因?yàn)槠浔憩F(xiàn)模型比較貼合用戶心理模型。

 

從以上幾個實(shí)例可以看到，導(dǎo)致好多表現(xiàn)模型偏離心理模型的主要原因是因?yàn)楹枚嘬浖?yīng)用、網(wǎng)頁的設(shè)計(jì)者都是程序員。程序員們完全沉浸在代碼的邏輯世界里，他們希望通過代碼來證明自己的能力、來表現(xiàn)自己。把自己的一切成果都展現(xiàn)出來，讓大家看到。每一行代碼、每一個模型對于他們來說都是精準(zhǔn)的、符合邏輯的。但是他們卻很少考慮到用戶的心理模型，導(dǎo)致出現(xiàn)好多普通用戶無法理解但在他們看來卻理所當(dāng)然的交互界面。

我們也可以從另一個角度理解表現(xiàn)模型貼近心理模型的設(shè)計(jì)。其實(shí)就是要從以用戶為中心、用戶目標(biāo)為導(dǎo)向的原則出發(fā)，更多關(guān)注的是人，少關(guān)注一點(diǎn)物。只要可以幫助用戶完成目標(biāo)的信息就讓用戶看到，不能夠幫助用戶完成目標(biāo)的信息就隱藏起來。比如搜索，當(dāng)用戶輸入一個query時候，就會給好多篩選結(jié)果。整個過程非常簡潔，用戶看到的就是這些。但是搜索的真實(shí)工作機(jī)制卻是相當(dāng)復(fù)雜，不過這些不需要讓用戶都看到。只給可以幫助用戶完成目標(biāo)的信息就是最好的設(shè)計(jì)。

怎樣讓表現(xiàn)模型更貼近用戶的心理模型，還有一些重要的原則要遵循，《設(shè)計(jì)心理學(xué)》一書中提到過，其中包括可視性、匹配原則、反饋原則。不過這就是另一個話題，以后有機(jī)會再細(xì)說。