心理學(xué)在UI與交互設(shè)計(jì)中的應(yīng)用與研究

王宇　陳少杰

摘要：隨著互聯(lián)網(wǎng)產(chǎn)品市場(chǎng)的競(jìng)爭(zhēng)加劇，功能與技術(shù)的競(jìng)爭(zhēng)已經(jīng)到達(dá)瓶頸期，所以UI與交互設(shè)計(jì)在產(chǎn)品中的地位被互聯(lián)網(wǎng)企業(yè)提升到了戰(zhàn)略級(jí)的高度，越來(lái)越多的互聯(lián)網(wǎng)公司開(kāi)始意識(shí)到好的產(chǎn)品用戶體驗(yàn)給企業(yè)所帶來(lái)的價(jià)值。那么，在產(chǎn)品設(shè)計(jì)中，我們?cè)鯓釉O(shè)計(jì)出一款用戶體驗(yàn)非常棒的產(chǎn)品呢？我想，除了最基本的設(shè)計(jì)學(xué)知識(shí)，心理學(xué)在其中起的作用非常之大。心理學(xué)是研究人的心理和行為的，對(duì)心理學(xué)的研究能夠幫助UI設(shè)計(jì)師和交互設(shè)計(jì)師學(xué)會(huì)用科學(xué)的方法去分析人的行為，讓設(shè)計(jì)師有更合理的理論依據(jù)去做下一步的具體設(shè)計(jì)。“格式塔心理學(xué)”與“認(rèn)知心理學(xué)”是做UI和交互設(shè)計(jì)中經(jīng)常用到的兩個(gè)重要的心理學(xué)概念，在文章中，我們對(duì)“格式塔心理學(xué)”和“認(rèn)知心理學(xué)”在UI與交互設(shè)計(jì)中所起的作用結(jié)合實(shí)例進(jìn)行了論述、研究與探索。

關(guān)鍵詞：交互設(shè)計(jì) 格式塔心理學(xué) 認(rèn)知心理學(xué) 用戶體驗(yàn)

中圖分類(lèi)號(hào)：TB472 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2017）04-0052-02

引言

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展和人們對(duì)產(chǎn)品使用體驗(yàn)要求的提高，互聯(lián)網(wǎng)產(chǎn)品在市場(chǎng)中的競(jìng)爭(zhēng)日益加劇，技術(shù)已經(jīng)不再是各大互聯(lián)網(wǎng)公司保持市場(chǎng)領(lǐng)先地位的唯一核心競(jìng)爭(zhēng)力，騰訊、百度、阿里巴巴等互聯(lián)網(wǎng)公司紛紛成立UED部門(mén)，用戶體驗(yàn)被提升到了企業(yè)的戰(zhàn)略級(jí)高度，一個(gè)用戶體驗(yàn)設(shè)計(jì)良好的產(chǎn)品，會(huì)在當(dāng)前產(chǎn)品同質(zhì)化嚴(yán)重的市場(chǎng)競(jìng)爭(zhēng)中起到至關(guān)重要的決定性作用。在這個(gè)時(shí)代，一個(gè)成熟的產(chǎn)品經(jīng)理在設(shè)計(jì)產(chǎn)品中也不再局限于簡(jiǎn)單的功能性設(shè)計(jì)，對(duì)用戶體驗(yàn)設(shè)計(jì)的重視程度越來(lái)越高。UI與交互設(shè)計(jì)是產(chǎn)品設(shè)計(jì)開(kāi)發(fā)中十分重要的一環(huán)，如何將產(chǎn)品的用戶體驗(yàn)做到極致，成為UI設(shè)計(jì)師與交互設(shè)計(jì)計(jì)師需要思考的問(wèn)題。

一、心理學(xué)與UI交互設(shè)計(jì)設(shè)計(jì)的關(guān)系

UI與交互設(shè)計(jì)已經(jīng)形成了一門(mén)綜合性比較強(qiáng)的學(xué)科，涉及人體工程學(xué)、認(rèn)知心理學(xué)、行為心理學(xué)、社會(huì)學(xué)、數(shù)據(jù)分析、設(shè)計(jì)學(xué)等。一般情況下，公司的UI/UE設(shè)計(jì)師會(huì)由設(shè)計(jì)類(lèi)專(zhuān)業(yè)或者心理學(xué)專(zhuān)業(yè)背景的人來(lái)?yè)?dān)任，然而，交互設(shè)計(jì)，寬泛地說(shuō)（不限于互聯(lián)網(wǎng)產(chǎn)品），關(guān)注的是人與物體，人與環(huán)境，還有人與人之間的互動(dòng)，為了做出好的交互設(shè)計(jì)，交互設(shè)計(jì)師要去理解人的行為，分析影響和驅(qū)動(dòng)這些行為的因素與他們之間的關(guān)系，在理解人的交互，和需要什么樣的交互的基礎(chǔ)上對(duì)這些因素進(jìn)行設(shè)計(jì)，創(chuàng)造出適合人的、符合人行為與心理規(guī)律的設(shè)計(jì)。根據(jù)唐納德·A·諾曼在著作《情感化設(shè)計(jì)》中的闡述，把交互設(shè)計(jì)中的情感設(shè)計(jì)區(qū)分為三個(gè)層次（如圖1）。

現(xiàn)在市場(chǎng)上的產(chǎn)品，能夠完美融合這三個(gè)層次設(shè)計(jì)的產(chǎn)品少之又少，想達(dá)到這個(gè)目標(biāo)，我們需要研究的不僅僅是設(shè)計(jì)學(xué)維度的東西，而更要求助于心理學(xué)，對(duì)心理學(xué)的了解能夠幫助交互設(shè)計(jì)師學(xué)會(huì)用科學(xué)的方法去分析人的行為，讓設(shè)計(jì)師有更合理的理論依據(jù)去做下一步的具體設(shè)計(jì)。下面，我們將重點(diǎn)研究“格式塔心理學(xué)”與“認(rèn)知心理學(xué)”在UI與交互設(shè)計(jì)中所起的作用。

二、格式塔心理學(xué)與交互設(shè)計(jì)

格式塔心理學(xué)是西方現(xiàn)代心理學(xué)的主要流派之一，根據(jù)其原意也稱為完形心理學(xué)。1912年在德國(guó)誕生，后來(lái)在美國(guó)得到進(jìn)一步發(fā)展。格式塔心理學(xué)主張?jiān)谟^察現(xiàn)象的經(jīng)驗(yàn)時(shí)要保持現(xiàn)象的本來(lái)面目，不能將它分析為感覺(jué)元素，并認(rèn)為現(xiàn)象的經(jīng)驗(yàn)是整體的或完形的（格式塔），所以稱為格式塔心理學(xué)。這是在UI與交互設(shè)計(jì)中實(shí)際運(yùn)用最多的心理學(xué)理論之一。它主要包括：接近性原則；相似性原則；連續(xù)性原則；封閉性原則；對(duì)稱性原則等。

（一）接近性原理

在我們的認(rèn)知規(guī)律里，我們更加傾向于把形狀上比較接近的元素看成是一個(gè)集合或者一個(gè)整體（如圖2）雖然圓形和三角形排布在一塊，但我們卻會(huì)在此時(shí)將距離近的圓形和三角形歸為一組。

這個(gè)原則在網(wǎng)頁(yè)與APP設(shè)計(jì)中的頁(yè)面內(nèi)容歸組設(shè)計(jì)比較常見(jiàn)，設(shè)計(jì)師通過(guò)留白進(jìn)行頁(yè)面內(nèi)容的歸組。（如圖3）中為QQ的“動(dòng)態(tài)”功能頁(yè)面，交互設(shè)計(jì)師在做這個(gè)頁(yè)面的交互的過(guò)程中，企圖將“游戲”、“購(gòu)物”、“閱讀”、“音樂(lè)”和“熱門(mén)活動(dòng)”放置為一組，他巧妙地采用了格式塔心理學(xué)中的接近性原則，將這5個(gè)按鈕在布局上用較近的距離進(jìn)行組合排列，從而導(dǎo)致我們?cè)谟^察這個(gè)界面的時(shí)候，很容易受大腦中的“格式塔思維”所影響，很自然地將B部分的所有功能認(rèn)為是一個(gè)組，C部分的所有功能為一組。

（二）相似性原理：

我們的大腦，通常認(rèn)為相等或相似的元素形成整體或組合。（如圖4）中，我們會(huì)不自覺(jué)地認(rèn)為它是縱向排列的。

相似性法則也是我們?cè)谧鯱I設(shè)計(jì)中經(jīng)常用到的，（圖2）中同樣用了相似性法則，UI設(shè)計(jì)師將A組中的“好有動(dòng)態(tài)”、“附近”、“興趣部落”按鈕設(shè)計(jì)得都比B和C組中的按鈕大很多，并且采用了橫向排列，用戶在使用這個(gè)界面的時(shí)候，就會(huì)很容易將A組與B、C組區(qū)分開(kāi)來(lái)。

（三）閉合性原理

閉合性原理就是當(dāng)元素不完整或者不存在的時(shí)候，人們會(huì)根據(jù)自己的認(rèn)知經(jīng)驗(yàn)和視知覺(jué)的整體意愿驅(qū)使，不完整的元素依然可以被人們所識(shí)別。（圖5）是一個(gè)不完整的圓，但是我們習(xí)慣性的將圖形作為一個(gè)整體去觀看，于是我們會(huì)不自覺(jué)地在意識(shí)里將缺少的形狀補(bǔ)充進(jìn)去之后，便形成最終我們能夠識(shí)別出來(lái)的圖形。

這條規(guī)則最常見(jiàn)的便是圖標(biāo)設(shè)計(jì)，運(yùn)用此原則，可以用極簡(jiǎn)的語(yǔ)言傳達(dá)更多的內(nèi)容（如圖6）。我們很輕松地就能識(shí)別出每個(gè)圖標(biāo)的功能，即使它們并不是非常完整。

（四）主體/背景原理

我們?cè)谟^察一個(gè)界面時(shí)，會(huì)本能地將觀察對(duì)象分為主題和背景兩塊區(qū)域。在觀察對(duì)象中占據(jù)我們主要注意力的元素為主體部分（一般主體會(huì)被安排在最中間或者黃金分割位置），其余則為背景部分（如圖7）。

“主體/背景原理”多應(yīng)用于平面設(shè)計(jì)或者UI設(shè)計(jì)中，作為設(shè)計(jì)師的工作就是幫助用戶更好地區(qū)分好背景與主體，以協(xié)助用戶思考。這個(gè)原則也常用于網(wǎng)頁(yè)或者APP設(shè)計(jì)中在其他內(nèi)容之上彈出信息，作為需要引起用戶注意的內(nèi)容，此信息一般為暫時(shí)性且非常重要的，相對(duì)于跳轉(zhuǎn)頁(yè)面的形式，彈出信息的方式可以幫助用戶了解彈出的信息所處的環(huán)境，也可以精簡(jiǎn)頁(yè)面結(jié)構(gòu)，符合用戶對(duì)事物的認(rèn)知規(guī)律，（如圖8）為手機(jī)系統(tǒng)與應(yīng)用中常用的毛玻璃效果，這個(gè)效果就應(yīng)用到了“主題/背景原理”。endprint

三、認(rèn)知心理學(xué)與交互設(shè)計(jì)

認(rèn)知心理學(xué)的核心觀點(diǎn)認(rèn)為知識(shí)是決定人類(lèi)行為的主要因素。UI與交互設(shè)計(jì)師的工作就是對(duì)產(chǎn)品使用者的需求進(jìn)行正確的認(rèn)知和傳達(dá)，從而提高人們獲取并分析處理信息的能力和效率。人在識(shí)別某個(gè)圖像時(shí)，如果在過(guò)去的經(jīng)驗(yàn)中有這個(gè)圖形或相似的圖形，我們稱之為“記憶痕跡”。如果用戶觀察到的圖形與“記憶痕跡”相符合，人們就能付出較少的認(rèn)識(shí)成本來(lái)識(shí)別這個(gè)圖形。UI設(shè)計(jì)師或交互設(shè)計(jì)師在設(shè)計(jì)頁(yè)面時(shí)首先要從用戶最根本的認(rèn)知心理機(jī)制研究入手，充分了解用戶的心理，設(shè)計(jì)出符合用戶認(rèn)知心理規(guī)律的產(chǎn)品，從而能夠讓用戶獲得良好愉悅的使用體驗(yàn)。

（一）UI設(shè)計(jì)中的“錯(cuò)怪效應(yīng)”

當(dāng)我們體驗(yàn)一款互聯(lián)網(wǎng)產(chǎn)品時(shí)，如果UI界面圖文排版不好的話，用戶會(huì)非常難以理解產(chǎn)品經(jīng)理的表達(dá)意圖，用戶會(huì)認(rèn)為是整個(gè)產(chǎn)品都不好，而不僅僅只是認(rèn)為其UI和交互設(shè)計(jì)不好。就像我們小時(shí)候因?yàn)椴幌矚g數(shù)學(xué)老師而不喜歡數(shù)學(xué)課的意義，這種心理偏見(jiàn)是人在成長(zhǎng)過(guò)程中建立的本能思維習(xí)慣。人類(lèi)思考問(wèn)題和判斷一件事物好壞的時(shí)候，一個(gè)未經(jīng)過(guò)邏輯學(xué)訓(xùn)練的人，會(huì)很輕易本能地調(diào)用付出成本小且獲得答案快的感性思維，即使其判斷結(jié)果往往是不靠譜的，而且往往大腦也會(huì)選擇相信。所以，我們?cè)谧鯱I排版時(shí)，一定要極為細(xì)致認(rèn)真，不能做錯(cuò)哪怕一個(gè)像素，一個(gè)排版優(yōu)美的UI對(duì)于一個(gè)產(chǎn)品是至關(guān)重要的。

（二）色彩與認(rèn)知心理學(xué)

我們對(duì)色彩的認(rèn)知是從孩提時(shí)代開(kāi)始的，我們小時(shí)候都有劃破手指的經(jīng)歷，當(dāng)紅色血液流出的那一刻，伴隨的是疼痛與緊張，當(dāng)我們看到大自然的綠色風(fēng)光的時(shí)候，會(huì)不由得精神放松。我們幾乎所有人都有這些“記憶痕跡”，我們?cè)谠O(shè)計(jì)頁(yè)面搭配色彩時(shí)，也要遵循人的“記憶痕跡”，這樣才能協(xié)助用戶思考，不會(huì)產(chǎn)生歧義。在（圖9）中，當(dāng)微信有信息提示時(shí)，為了引起用戶的注意，UI設(shè)計(jì)師采用了紅色圓形的提示標(biāo)志，讓我們把注意力集中到“未讀消息”上，從而避免漏掉新消息，正是應(yīng)用了這一心理學(xué)原理。

（三）模擬生活中常見(jiàn)的事物

從世界上的第一個(gè)ICON開(kāi)始，設(shè)計(jì)師就開(kāi)始嘗試使用人們?nèi)粘Ｉ钪谐Ｒ?jiàn)的事或物來(lái)表示某個(gè)功能，直到今天，這個(gè)設(shè)計(jì)原則一直沒(méi)有改變，只不過(guò)在視覺(jué)風(fēng)格上由“擬物”做成了“扁平”，但是其設(shè)計(jì)原則都是源于“模擬”。在安卓與IOS的操作系統(tǒng)中，設(shè)計(jì)師把下拉菜單設(shè)計(jì)成像窗簾一樣，可以拉下也可以收起。在一些APP中，設(shè)計(jì)師采用了側(cè)滑式的交互設(shè)計(jì)（如圖10），就像在模擬我們生活中及其常見(jiàn)的抽屜。這些真是非常贊的設(shè)計(jì)，在我們看到這些似曾相識(shí)的設(shè)計(jì)的時(shí)候，我們甚至不用學(xué)習(xí)就可以上手操作。

結(jié)語(yǔ)

UI與交互是產(chǎn)品與用戶溝通的橋梁，一個(gè)互產(chǎn)品（不局限于互聯(lián)網(wǎng)產(chǎn)品）的品質(zhì)，UI和交互設(shè)計(jì)是產(chǎn)品開(kāi)發(fā)中十分重要的一環(huán)，UI與交互設(shè)計(jì)師要深入透徹地了解與分析用戶的心理規(guī)律，將心理學(xué)應(yīng)用到產(chǎn)品的交互設(shè)計(jì)中，才能達(dá)到絕佳的使用體驗(yàn)。同時(shí)，需要指出的是，我們?cè)谠O(shè)計(jì)一個(gè)產(chǎn)品時(shí)，這些原則可以作為參考，但是“設(shè)計(jì)”這件事情本身并沒(méi)有規(guī)則，我們做此研究的意義并不是告訴大家設(shè)計(jì)師如果遵守某個(gè)黃金準(zhǔn)則，產(chǎn)品就能脫穎而出了，我們研究這件事情的意義在于：我們需要找出產(chǎn)品為什么優(yōu)秀的規(guī)律，并且嘗試完善它、靈活運(yùn)用它甚至打破它，我想，這才是設(shè)計(jì)師應(yīng)該做的事。阿恩海姆所說(shuō)：“如果藝術(shù)過(guò)分強(qiáng)調(diào)秩序，同時(shí)又用缺乏具有足夠活力的物質(zhì)去排列，就必然導(dǎo)致一種僵死的結(jié)果。endprint