《aboutFace3交互設計精髓》中作者說，設計有三個模型：心理模型、表現模型、實現模型。

心理模型：用戶在從未看過你產品的時候，根據原有經驗，心理所想象的樣子。

表現模型：用戶看到的你的產品的樣子。

實現模型：程序通過代碼實現的產品運行的規則等。

當表現模型越接近心理模型時，用戶的體驗越好。

     那用戶的心理模型到底是什么樣子的？如何讓表現模型趨近心理模型？

產品的用戶心理模型既包含整個地球人類的共性，又包括產品用戶群體所獨有的特性。文章重點討論共性問題。影響人類共性的因素：外部環境與內部系統。今天先討論部分內部系統。

 

中央視覺和周圍視覺

    一頭青山羊在一片草原上專心致志地吃草，此時，一頭饑餓的狼悄悄地躲在灌木叢中，狼伶俐的眼神死死的盯著，突然，一躍而起，撲向羊，說時遲那時快，羊一個激靈，迅速得躲開了狼的捕殺，狼又追上去……草原上展開了一場廝殺戰。

 

    為什么專心致志吃草的羊能夠觀察到狼的撲殺？在視覺中，分為中央視覺和周圍視覺（來源于設計心理學），中央視覺對聚焦的視野（視野下的那一下片草）負責，周圍視覺對周圍環境負責。在生物的進化中，生物要想生存，就要避開天敵，周圍視覺就是用來發現危險，傳遞危險信號的，而最容易被識別的危險信號就是突然的動畫。

中央視覺和周圍視覺在設計中如何利用？舉個栗子。

 

    對輸入框特別長的字段，如果提示文字放在后邊，由于視覺聚焦在左側，會容易忽略掉。所以我們會考慮放在上邊或下邊。

如果是這樣子的備注，是否容易被忽視呢？（留給大家思考）

下圖中滾動的banner，或右下角閃爍的廣告，會被忽視嗎？

上圖中滾動的banner條或者右下角的動畫，會引起視覺的強烈注意。所以動畫若非必要，謹慎使用。

 

 

知覺特性：選擇、理解、整體

知覺是指人對客觀事物的整體認識，比如看到下圖知道是一個足球，而不是一個球體。

 

下圖中，你看到了什么？

你看到了鼠標和小白點。有沒有看到黑色的屏幕？

1.選擇性：人只能感受少量或少數刺激，而對其他事物只作模糊的反映。通常來講，人容易將特殊的、面積小的比面積大的、被包圍的比包圍的、垂直或水平的比傾斜的、暖色的比冷色的，以及同周圍明晰度差別大的東西都更容易知覺為對象，而非背景。

    下圖中，當鼠標懸停到某部分信息時，為此部分信息添加了淡淡的背景色。這部分信息相對于其他信息來講是不同的，這部分信息成為知覺的對象。鼠標到地方通常是視覺流經過的地方，即用戶更關注的點，這樣能夠讓用戶對信息更加聚焦。

 

 

上圖中，你看到了什么？

2.理解性：人們以已有的知識經驗為基礎去理解和解釋事物，并用詞語加標志的特性,以使它具有一定的意義。

    上圖中只是一些黑色的點，但人們往往會去試圖理解和解釋它。

    在我們對界面的交互設計中，一定記得，基于業務場景、用戶特點進行設計，突出重點和主要內容，不必要的東西不放，否則就會引起用戶的注意和思考，進而影響到用戶體驗。這也是設計中常說的奧卡姆剃刀原理：如無必要，勿增實體。

比如下圖中圈出的圖標，在本頁信息中，基于業務，基于用戶，并沒有什么用處，放在那里會引起用戶的思考和迷惑。

    所以在設計的過程中一定要去梳理業務需求和用戶需求。確保頁面上的功能是用戶需要的，或者是能夠帶來商業價值的。否則一些可有可無的功能不僅不能幫助用戶，反而會起到干擾作用。那么至于什么樣的功能是有用的、有價值的、體貼的，我們如何找到用戶痛點，并從痛點出發得出需求和功能點，在以后的文章中，進行詳細的討論。

 

3.整體性：人們傾向于把個別的屬性整合起來，去把握整體。那人們是如何整合的呢？

3.1接近性，對于距離較近的東西，被理解為相關性更高，更容易被知覺為整體。所以在設計時，相關度較高的放在一起。同樣相關度不高的要區分開來，這樣用戶掃一眼，不需要思考，就可以把握清楚內容的親疏關系。也可以引導視覺流。

比如下圖的設計，用戶容易理解為兩列內容，而我們實際的內容關系是橫向的。

改版后

在最近流行的簡約設計中，去除復雜元素，比如分隔線，使用留白進行分隔，便是利用了這一特性。

 

3.2相似性，人們容易把形狀、顏色等一樣或相似的東西知覺為一個整體，并傾向于賦予同樣的意義解釋。

在設計的過程中，利用相似，保持一致性，使用戶基于原有經驗進行快速解釋，減少思考。

比如平臺樣式所有頁面保持一致，用戶不管走到哪一步都會知道，她正在使用我們的產品，而不會認為跳轉到了別人家的頁面。在設計中使用約定俗成的一些樣式，用戶基于習慣可以很快理解我們的產品，減少學習的成本。

 

<待續>

反對教條主義。。。。。。。。。。。。。。