《aboutFace3交互設(shè)計(jì)精髓》中作者說，設(shè)計(jì)有三個(gè)模型：心理模型、表現(xiàn)模型、實(shí)現(xiàn)模型。

心理模型：用戶在從未看過你產(chǎn)品的時(shí)候，根據(jù)原有經(jīng)驗(yàn)，心理所想象的樣子。

表現(xiàn)模型：用戶看到的你的產(chǎn)品的樣子。

實(shí)現(xiàn)模型：程序通過代碼實(shí)現(xiàn)的產(chǎn)品運(yùn)行的規(guī)則等。

當(dāng)表現(xiàn)模型越接近心理模型時(shí)，用戶的體驗(yàn)越好。

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

產(chǎn)品的用戶心理模型既包含整個(gè)地球人類的共性，又包括產(chǎn)品用戶群體所獨(dú)有的特性。文章重點(diǎn)討論共性問題。影響人類共性的因素：外部環(huán)境與內(nèi)部系統(tǒng)。今天先討論部分內(nèi)部系統(tǒng)。

 

中央視覺和周圍視覺

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

 

    為什么專心致志吃草的羊能夠觀察到狼的撲殺？在視覺中，分為中央視覺和周圍視覺（來源于設(shè)計(jì)心理學(xué)），中央視覺對(duì)聚焦的視野（視野下的那一下片草）負(fù)責(zé)，周圍視覺對(duì)周圍環(huán)境負(fù)責(zé)。在生物的進(jìn)化中，生物要想生存，就要避開天敵，周圍視覺就是用來發(fā)現(xiàn)危險(xiǎn)，傳遞危險(xiǎn)信號(hào)的，而最容易被識(shí)別的危險(xiǎn)信號(hào)就是突然的動(dòng)畫。

中央視覺和周圍視覺在設(shè)計(jì)中如何利用？舉個(gè)栗子。

 

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

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

下圖中滾動(dòng)的banner，或右下角閃爍的廣告，會(huì)被忽視嗎？

上圖中滾動(dòng)的banner條或者右下角的動(dòng)畫，會(huì)引起視覺的強(qiáng)烈注意。所以動(dòng)畫若非必要，謹(jǐn)慎使用。

 

 

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

知覺是指人對(duì)客觀事物的整體認(rèn)識(shí)，比如看到下圖知道是一個(gè)足球，而不是一個(gè)球體。

 

下圖中，你看到了什么？

你看到了鼠標(biāo)和小白點(diǎn)。有沒有看到黑色的屏幕？

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

    下圖中，當(dāng)鼠標(biāo)懸停到某部分信息時(shí)，為此部分信息添加了淡淡的背景色。這部分信息相對(duì)于其他信息來講是不同的，這部分信息成為知覺的對(duì)象。鼠標(biāo)到地方通常是視覺流經(jīng)過的地方，即用戶更關(guān)注的點(diǎn)，這樣能夠讓用戶對(duì)信息更加聚焦。

 

 

上圖中，你看到了什么？

2.理解性：人們以已有的知識(shí)經(jīng)驗(yàn)為基礎(chǔ)去理解和解釋事物，并用詞語加標(biāo)志的特性,以使它具有一定的意義。

    上圖中只是一些黑色的點(diǎn)，但人們往往會(huì)去試圖理解和解釋它。

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

比如下圖中圈出的圖標(biāo)，在本頁信息中，基于業(yè)務(wù)，基于用戶，并沒有什么用處，放在那里會(huì)引起用戶的思考和迷惑。

    所以在設(shè)計(jì)的過程中一定要去梳理業(yè)務(wù)需求和用戶需求。確保頁面上的功能是用戶需要的，或者是能夠帶來商業(yè)價(jià)值的。否則一些可有可無的功能不僅不能幫助用戶，反而會(huì)起到干擾作用。那么至于什么樣的功能是有用的、有價(jià)值的、體貼的，我們?nèi)绾握业接脩敉袋c(diǎn)，并從痛點(diǎn)出發(fā)得出需求和功能點(diǎn)，在以后的文章中，進(jìn)行詳細(xì)的討論。

 

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

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

比如下圖的設(shè)計(jì)，用戶容易理解為兩列內(nèi)容，而我們實(shí)際的內(nèi)容關(guān)系是橫向的。

改版后

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

 

3.2相似性，人們?nèi)菀装研螤?、顏色等一樣或相似的東西知覺為一個(gè)整體，并傾向于賦予同樣的意義解釋。

在設(shè)計(jì)的過程中，利用相似，保持一致性，使用戶基于原有經(jīng)驗(yàn)進(jìn)行快速解釋，減少思考。

比如平臺(tái)樣式所有頁面保持一致，用戶不管走到哪一步都會(huì)知道，她正在使用我們的產(chǎn)品，而不會(huì)認(rèn)為跳轉(zhuǎn)到了別人家的頁面。在設(shè)計(jì)中使用約定俗成的一些樣式，用戶基于習(xí)慣可以很快理解我們的產(chǎn)品，減少學(xué)習(xí)的成本。

 

<待續(xù)>

反對(duì)教條主義。。。。。。。。。。。。。。