《aboutFace3交互設(shè)計精髓》中作者說,設(shè)計有三個模型:心理模型、表現(xiàn)模型、實現(xiàn)模型。
心理模型:用戶在從未看過你產(chǎn)品的時候,根據(jù)原有經(jīng)驗,心理所想象的樣子。
表現(xiàn)模型:用戶看到的你的產(chǎn)品的樣子。
實現(xiàn)模型:程序通過代碼實現(xiàn)的產(chǎn)品運行的規(guī)則等。
當(dāng)表現(xiàn)模型越接近心理模型時,用戶的體驗越好。
那用戶的心理模型到底是什么樣子的?如何讓表現(xiàn)模型趨近心理模型?
產(chǎn)品的用戶心理模型既包含整個地球人類的共性,又包括產(chǎn)品用戶群體所獨有的特性。文章重點討論共性問題。影響人類共性的因素:外部環(huán)境與內(nèi)部系統(tǒng)。今天先討論部分內(nèi)部系統(tǒng)。
中央視覺和周圍視覺
一頭青山羊在一片草原上專心致志地吃草,此時,一頭饑餓的狼悄悄地躲在灌木叢中,狼伶俐的眼神死死的盯著,突然,一躍而起,撲向羊,說時遲那時快,羊一個激靈,迅速得躲開了狼的捕殺,狼又追上去……草原上展開了一場廝殺戰(zhàn)。
為什么專心致志吃草的羊能夠觀察到狼的撲殺?在視覺中,分為中央視覺和周圍視覺(來源于設(shè)計心理學(xué)),中央視覺對聚焦的視野(視野下的那一下片草)負責(zé),周圍視覺對周圍環(huán)境負責(zé)。在生物的進化中,生物要想生存,就要避開天敵,周圍視覺就是用來發(fā)現(xiàn)危險,傳遞危險信號的,而最容易被識別的危險信號就是突然的動畫。
中央視覺和周圍視覺在設(shè)計中如何利用?舉個栗子。
對輸入框特別長的字段,如果提示文字放在后邊,由于視覺聚焦在左側(cè),會容易忽略掉。所以我們會考慮放在上邊或下邊。
如果是這樣子的備注,是否容易被忽視呢?(留給大家思考)
下圖中滾動的banner,或右下角閃爍的廣告,會被忽視嗎?
上圖中滾動的banner條或者右下角的動畫,會引起視覺的強烈注意。所以動畫若非必要,謹慎使用。
知覺特性:選擇、理解、整體
知覺是指人對客觀事物的整體認識,比如看到下圖知道是一個足球,而不是一個球體。
下圖中,你看到了什么?
你看到了鼠標(biāo)和小白點。有沒有看到黑色的屏幕?
1.選擇性:人只能感受少量或少數(shù)刺激,而對其他事物只作模糊的反映。通常來講,人容易將特殊的、面積小的比面積大的、被包圍的比包圍的、垂直或水平的比傾斜的、暖色的比冷色的,以及同周圍明晰度差別大的東西都更容易知覺為對象,而非背景。
下圖中,當(dāng)鼠標(biāo)懸停到某部分信息時,為此部分信息添加了淡淡的背景色。這部分信息相對于其他信息來講是不同的,這部分信息成為知覺的對象。鼠標(biāo)到地方通常是視覺流經(jīng)過的地方,即用戶更關(guān)注的點,這樣能夠讓用戶對信息更加聚焦。
上圖中,你看到了什么?
2.理解性:人們以已有的知識經(jīng)驗為基礎(chǔ)去理解和解釋事物,并用詞語加標(biāo)志的特性,以使它具有一定的意義。
上圖中只是一些黑色的點,但人們往往會去試圖理解和解釋它。
在我們對界面的交互設(shè)計中,一定記得,基于業(yè)務(wù)場景、用戶特點進行設(shè)計,突出重點和主要內(nèi)容,不必要的東西不放,否則就會引起用戶的注意和思考,進而影響到用戶體驗。這也是設(shè)計中常說的奧卡姆剃刀原理:如無必要,勿增實體。
比如下圖中圈出的圖標(biāo),在本頁信息中,基于業(yè)務(wù),基于用戶,并沒有什么用處,放在那里會引起用戶的思考和迷惑。
所以在設(shè)計的過程中一定要去梳理業(yè)務(wù)需求和用戶需求。確保頁面上的功能是用戶需要的,或者是能夠帶來商業(yè)價值的。否則一些可有可無的功能不僅不能幫助用戶,反而會起到干擾作用。那么至于什么樣的功能是有用的、有價值的、體貼的,我們?nèi)绾握业接脩敉袋c,并從痛點出發(fā)得出需求和功能點,在以后的文章中,進行詳細的討論。
3.整體性:人們傾向于把個別的屬性整合起來,去把握整體。那人們是如何整合的呢?
3.1接近性,對于距離較近的東西,被理解為相關(guān)性更高,更容易被知覺為整體。所以在設(shè)計時,相關(guān)度較高的放在一起。同樣相關(guān)度不高的要區(qū)分開來,這樣用戶掃一眼,不需要思考,就可以把握清楚內(nèi)容的親疏關(guān)系。也可以引導(dǎo)視覺流。
比如下圖的設(shè)計,用戶容易理解為兩列內(nèi)容,而我們實際的內(nèi)容關(guān)系是橫向的。
改版后
在最近流行的簡約設(shè)計中,去除復(fù)雜元素,比如分隔線,使用留白進行分隔,便是利用了這一特性。
3.2相似性,人們?nèi)菀装研螤?、顏色等一樣或相似的東西知覺為一個整體,并傾向于賦予同樣的意義解釋。
在設(shè)計的過程中,利用相似,保持一致性,使用戶基于原有經(jīng)驗進行快速解釋,減少思考。
比如平臺樣式所有頁面保持一致,用戶不管走到哪一步都會知道,她正在使用我們的產(chǎn)品,而不會認為跳轉(zhuǎn)到了別人家的頁面。在設(shè)計中使用約定俗成的一些樣式,用戶基于習(xí)慣可以很快理解我們的產(chǎn)品,減少學(xué)習(xí)的成本。
<待續(xù)>
反對教條主義。。。。。。。。。。。。。。