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

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

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

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

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

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

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

 

中央視覺(jué)和周?chē)曈X(jué)

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

 

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

中央視覺(jué)和周?chē)曈X(jué)在設(shè)計(jì)中如何利用？舉個(gè)栗子。

 

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

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

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

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

 

 

知覺(jué)特性：選擇、理解、整體

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

 

下圖中，你看到了什么？

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

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

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

 

 

上圖中，你看到了什么？

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

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

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

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

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

 

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

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

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

改版后

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

 

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

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

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

 

<待續(xù)>

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