藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

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

 

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

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

 

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

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

剎車工作原理圖

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

壓井工作原理圖

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

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

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

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

 

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

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

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

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

 

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

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

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