2015-10-28 高勁
藍藍設(shè)計( www.newchinaweekly.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
筆者最近在看《About Face3-交互設(shè)計精髓》一書， 第二章講到三個術(shù)語：實現(xiàn)模型、心理模型、表現(xiàn)模型。看上去高大上的詞語，理解起來也很難懂。但是我還是硬著頭皮把這一章來回啃了好幾遍，終于咀嚼、咽下了。至于營養(yǎng)怎么樣，可以先看看網(wǎng)上對于“About Face”這本書的評價。在這本交互界最權(quán)威的書里，作者用一個章節(jié)來講述這三個詞語。足見這三個詞語的重要性。三個詞語描述了產(chǎn)品的運作機制、外在表現(xiàn)與用戶心里認知之間的關(guān)系。為了能夠幫助大家容易理解這幾個詞語，我根據(jù)自己的理解加上一些示例進行了重新的梳理，希望對大家的快速理解有所幫助。
先看看為什么要去理解這三個術(shù)語，對于產(chǎn)品設(shè)計師在工作上有什么幫助？
1，可以讓我們從宏觀的角度去思考用戶對產(chǎn)品的認知。
2，可以看到一些不好使用的產(chǎn)品存在的深層原因。
3，可以知道怎樣可能設(shè)計出更好使用的產(chǎn)品。
再來簡單描述一下這三個術(shù)語的概念：
實現(xiàn)模型：產(chǎn)品是怎樣工作的。
心里模型：用戶認為產(chǎn)品是怎樣工作的。
表現(xiàn)模型：通過設(shè)計來讓用戶認為產(chǎn)品是怎樣工作的。
為了能夠形象地了解這些抽象的概念，我們可以通過以下幾個例子去理解。
我們通常認為汽車的剎車過程是：腳踩下制動踏板，摩擦車輪讓車減速。然而實際的汽車剎車工作過程是：當踩下制動踏板時，在踏板處通過杠桿原理把制動力放大了3倍，再通過液壓機構(gòu)驅(qū)動活塞把制動力又放大了9倍。放大以后的制動力推動活塞移動，活塞推動蹄片帶動剎車卡鉗緊緊的夾住制動碟，由蹄片與制動碟產(chǎn)生的強大摩擦力，讓車減速。可以看到我們對剎車工作過程的認知與剎車實際工作過程是有區(qū)別的。我們心里對剎車過程簡單的認識就是心理模型，真實的汽車剎車工作過程的描述就是實現(xiàn)模型。
剎車工作原理圖
在以前的農(nóng)村人們會使用一種叫壓井的打水工具，其工作機制是利用活塞原理把水從地下抽出來。這個過程很復(fù)雜，對于大多數(shù)人們來說，是不明白壓井工作的中間細節(jié)過程。但是對于他們的使用卻是不會造成影響的。人們認為通過上下提與壓的動作就把水從地下引上來了，這種簡單的解釋就足以讓他們很容易與壓井進行交互了。這種產(chǎn)品的真實工作過程與人們想象中產(chǎn)品的工作過程，就是產(chǎn)品的實現(xiàn)模型與用戶的心理模型。
壓井工作原理圖
從上面的兩個示例可以看出，心理模型是對產(chǎn)品工作過程的一個概括的簡單認知。人們使用產(chǎn)品時候，并不需要了解其內(nèi)部復(fù)雜的運作細節(jié)，人們?yōu)槠鋭?chuàng)作出了一種簡單的解釋方式。這種理解雖然不能反映產(chǎn)品的內(nèi)部運作機制，但是對于與之交互已經(jīng)夠用了。
在第一個剎車例子中，可以看到為了剎車功能簡單易于理解，使駕駛員在開車時候不需要思考就可以立即學會使用。設(shè)計師對這個功能的表現(xiàn)進行了設(shè)計，舍棄了在此功能運行過程中的細節(jié)，讓用戶通過踩踏這個動作完成目標的機制給自己一個簡單合理的解釋，從而迅速掌握了此功能，無需思考就就可以迅速正確使用了。這種把產(chǎn)品的功能展示給用戶的方式就是表現(xiàn)模型。
實現(xiàn)模型、表現(xiàn)模型、心理模型存在以下關(guān)系：
表現(xiàn)模型越接近心理模型，用戶就越容易了解產(chǎn)品功能、容易與之交互。表現(xiàn)模型越接近實現(xiàn)模型，用戶就越難理解產(chǎn)品，產(chǎn)品越難使用。
讓我們來看看一些表現(xiàn)模型偏向?qū)崿F(xiàn)模型的例子。
上圖是在瀏覽網(wǎng)頁時候會突然出現(xiàn)的彈出窗口，在彈出窗口上顯示一句只有程序員才能看懂的語句，它告訴用戶發(fā)生錯誤的具體原因。但是這讓普通用戶很痛苦，不知道發(fā)生了什么。不知道應(yīng)該點擊確定按鈕還是取消按鈕。這些就是程序員式設(shè)計，程序員按照自己的邏輯，當發(fā)生錯誤時候，就告訴用戶原因，遵循的是程序理解的實現(xiàn)模型。需要告訴用戶出現(xiàn)的這個問題嗎？需要告訴用戶這個錯誤發(fā)生的原因細節(jié)還是告訴對其造成的影響？這些問題都是需要斟酌的，只有讓表現(xiàn)模型同用戶心理模型一致，才能夠讓用戶容易理解。
上圖是一個應(yīng)用的下載界面截圖，在下載離線包完成后，界面上還會顯示解壓進度。從文件下載到可以使用需要經(jīng)過兩個過程，下載與解壓。但是沒有必要告訴用戶所有的這些步驟，沒必要讓用戶多了解一個概念。用戶需要知道的是文件下載完成了可以使用了，就可夠了。而不是想知道這些詳細的中間步驟。這就是表現(xiàn)模型與實現(xiàn)模型一致的情況。
上圖左側(cè)是Photoshop內(nèi)設(shè)置顏色的功能面板，設(shè)計師通過調(diào)節(jié)數(shù)值來達到自己需要的顏色。這些數(shù)值表達了顏色的實現(xiàn)機制，是從實現(xiàn)模型出發(fā)的。對于沒有經(jīng)驗的用戶來說，想調(diào)整出自己需要的顏色是有一定困難的。右側(cè)也是Photoshop內(nèi)設(shè)置顏色的功能面板，用戶需要什么顏色可以直接點選。這種交互方式讓用戶很容易理解，因為其表現(xiàn)模型比較貼合用戶心理模型。
從以上幾個實例可以看到，導(dǎo)致好多表現(xiàn)模型偏離心理模型的主要原因是因為好多軟件、應(yīng)用、網(wǎng)頁的設(shè)計者都是程序員。程序員們完全沉浸在代碼的邏輯世界里，他們希望通過代碼來證明自己的能力、來表現(xiàn)自己。把自己的一切成果都展現(xiàn)出來，讓大家看到。每一行代碼、每一個模型對于他們來說都是精準的、符合邏輯的。但是他們卻很少考慮到用戶的心理模型，導(dǎo)致出現(xiàn)好多普通用戶無法理解但在他們看來卻理所當然的交互界面。
我們也可以從另一個角度理解表現(xiàn)模型貼近心理模型的設(shè)計。其實就是要從以用戶為中心、用戶目標為導(dǎo)向的原則出發(fā)，更多關(guān)注的是人，少關(guān)注一點物。只要可以幫助用戶完成目標的信息就讓用戶看到，不能夠幫助用戶完成目標的信息就隱藏起來。比如搜索，當用戶輸入一個query時候，就會給好多篩選結(jié)果。整個過程非常簡潔，用戶看到的就是這些。但是搜索的真實工作機制卻是相當復(fù)雜，不過這些不需要讓用戶都看到。只給可以幫助用戶完成目標的信息就是最好的設(shè)計。
怎樣讓表現(xiàn)模型更貼近用戶的心理模型，還有一些重要的原則要遵循，《設(shè)計心理學》一書中提到過，其中包括可視性、匹配原則、反饋原則。不過這就是另一個話題，以后有機會再細說。
藍藍設(shè)計的小編 http://www.newchinaweekly.com