王宇　陳少杰

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

關(guān)鍵詞：交互設(shè)計 格式塔心理學 認知心理學 用戶體驗

中圖分類號：TB472 文獻標識碼：A

文章編號：1003-0069（2017）04-0052-02

引言

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

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

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

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

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

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

（一）接近性原理

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

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

（二）相似性原理：

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

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

（三）閉合性原理

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

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

（四）主體/背景原理

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

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

三、認知心理學與交互設(shè)計

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

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

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

（二）色彩與認知心理學

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

（三）模擬生活中常見的事物

從世界上的第一個ICON開始，設(shè)計師就開始嘗試使用人們?nèi)粘Ｉ钪谐Ｒ姷氖禄蛭飦肀硎灸硞€功能，直到今天，這個設(shè)計原則一直沒有改變，只不過在視覺風格上由“擬物”做成了“扁平”，但是其設(shè)計原則都是源于“模擬”。在安卓與IOS的操作系統(tǒng)中，設(shè)計師把下拉菜單設(shè)計成像窗簾一樣，可以拉下也可以收起。在一些APP中，設(shè)計師采用了側(cè)滑式的交互設(shè)計（如圖10），就像在模擬我們生活中及其常見的抽屜。這些真是非常贊的設(shè)計，在我們看到這些似曾相識的設(shè)計的時候，我們甚至不用學習就可以上手操作。

結(jié)語

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