孫韻琦

摘要：為提升用戶(hù)體驗(yàn)，研究格式塔心理學(xué)的規(guī)則與定律在移動(dòng)端UI設(shè)計(jì)中的應(yīng)用方法，并闡述其優(yōu)勢(shì)。以黃油相機(jī)APP為案例，分析格式塔心理學(xué)體系中的閉合律、相似律、接近律、連續(xù)律、對(duì)稱(chēng)律、圖地原理、共同區(qū)域、共同命運(yùn)在移動(dòng)端Ul設(shè)計(jì)中的應(yīng)用。格式塔心理學(xué)蘊(yùn)含了視覺(jué)傳達(dá)的奧義。掌握格式塔心理學(xué)的設(shè)計(jì)思維與法則，可幫助設(shè)計(jì)師在提升用戶(hù)體驗(yàn)的道路上不斷向前邁進(jìn)。

關(guān)鍵詞：格式塔 設(shè)計(jì)心理學(xué) UI設(shè)計(jì) 用戶(hù)體驗(yàn) 設(shè)計(jì)方法

中圖分類(lèi)號(hào)：J05

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2021）04-0115-04

引言

在“五聯(lián)網(wǎng)+”時(shí)代，虛擬產(chǎn)品、虛擬社區(qū)和虛擬服務(wù)是流量變現(xiàn)的重要商業(yè)手段，因此市場(chǎng)競(jìng)爭(zhēng)十分激烈。尤其是同類(lèi)應(yīng)用之間的抗衡，因賽道的整體發(fā)展已進(jìn)入成熟期，彼此功能相似、產(chǎn)品定位重疊、目標(biāo)用戶(hù)群體一致，又很難在商業(yè)手段上推陳出新、脫引而出。因此，為了提升市場(chǎng)占有率，各應(yīng)用將研發(fā)重點(diǎn)轉(zhuǎn)投于用戶(hù)體驗(yàn)，力求在用戶(hù)體驗(yàn)方面做到極致，藉此達(dá)到增加新用戶(hù)、提高用戶(hù)黏性、維持日活量、最終營(yíng)收獲利的目的。在用戶(hù)體驗(yàn)的諸多方面中，與視覺(jué)聯(lián)系最密切的UI設(shè)計(jì)是維系用戶(hù)好感度的有力手段，而設(shè)計(jì)心理學(xué)則是Ul設(shè)計(jì)的強(qiáng)大理論基礎(chǔ)。設(shè)計(jì)心理學(xué)包含的內(nèi)容眾多，而格式塔心理學(xué)在U中體現(xiàn)得尤為突出。

一、移動(dòng)端U的特點(diǎn)

用戶(hù)界面（User Interface）簡(jiǎn)稱(chēng)UI，是系統(tǒng)與用戶(hù)互動(dòng)和交流的媒介，是讀屏?xí)r代人機(jī)交互的主要介質(zhì)。UI可以細(xì)分為多個(gè)種類(lèi)，如服務(wù)于計(jì)算機(jī)操作界面的GUI（Graphic User Interface，圖形用戶(hù)界面）、WUI（Web User Interface，即網(wǎng)頁(yè)設(shè)計(jì)）、移動(dòng)端UI、游戲UI、車(chē)載UI、智能家電UI等。其中，移動(dòng)端U受屏幕尺寸小、展示信息多、適用面廣等因素的影響，具有以下特點(diǎn)：

（一）視覺(jué)設(shè)計(jì)的簡(jiǎn)練性

美觀的地位固然重要，但對(duì)U設(shè)計(jì)來(lái)說(shuō)，用戶(hù)能夠快速、準(zhǔn)確地獲取信息才是核心目標(biāo)。移動(dòng)設(shè)備的屏幕尺寸限制了視覺(jué)設(shè)計(jì)的發(fā)揮，讓其重心往功能性方面轉(zhuǎn)移一信息的清晰傳達(dá)、交互的有效提示、功能的合理分布，這些都促使移動(dòng)端U提升空間利用率，往簡(jiǎn)約、凝練的設(shè)計(jì)風(fēng)格發(fā)展與演變。

（二）路徑設(shè)置的合理性

受制于屏幕尺寸、豎屏的特有屬性，信息顯示的范圍有限，所以;移動(dòng)端UI一般呈現(xiàn)為長(zhǎng)頁(yè)面、多頁(yè)面的形式，應(yīng)用地圖的面積大、路徑多，信息瀏覽依賴(lài)用戶(hù)的交互操作。因此，路徑地圖的設(shè)置應(yīng)符合人性化理念，避免用戶(hù)因路徑分支過(guò)多而迷路、因頻繁走回頭路而煩躁;頁(yè)面內(nèi)的焦點(diǎn)路徑設(shè)計(jì)同理，并需有清晰的視覺(jué)引導(dǎo)，便于用戶(hù)理解閱讀順序。

（三）交互體驗(yàn)的流暢性

因移動(dòng)設(shè)備信息展示的范圍有限，信息的獲取在很大程度上依賴(lài)用戶(hù)的操作，所以，交互設(shè)計(jì)的流暢度直接關(guān)乎用戶(hù)的使用體驗(yàn)。交互是UI與UX（User Experience，用戶(hù)體驗(yàn)）交叉的領(lǐng)域，能幫助UI隱藏和喚醒功能，也能對(duì)信息進(jìn)行分組、收納。因此，移動(dòng)端UI本著精煉的設(shè)計(jì)理念，應(yīng)巧借交互（如滾動(dòng)、點(diǎn)擊、多點(diǎn)觸控、3D Touch等），避免復(fù)雜操作設(shè)計(jì)的同時(shí)，利用簡(jiǎn)單、流暢、快速的動(dòng)效讓用戶(hù)獲得快感。

（四）多尺寸、多平臺(tái)的適配性

移動(dòng)端Ul設(shè)計(jì)應(yīng)考慮到不同種類(lèi)設(shè)備的屏幕尺寸、iOS系統(tǒng)與Android系統(tǒng)的開(kāi)發(fā)環(huán)境，降低設(shè)計(jì)與開(kāi)發(fā)的成本，并方便后期的產(chǎn)品更新和迭代。

二、格式塔心理學(xué)與移動(dòng)端UI設(shè)計(jì)的關(guān)系

格式塔心理學(xué)又稱(chēng)完型視覺(jué)原理，興起于20世紀(jì)初的德國(guó)，是心理學(xué)的重要流派之一。該學(xué)派致力于視知覺(jué)方面的研究，主張人腦的運(yùn)作原理屬于整體論，即“整體大于各部分的總和”[一人知覺(jué)到的東西要大于單純的視覺(jué)、聽(tīng)覺(jué)等，任何一種經(jīng)驗(yàn)與現(xiàn)象都是一個(gè)整體，整體不決定于個(gè)別的元素，而局部卻能決定整體的內(nèi)在特性2。例如，人對(duì)一朵花的感知，并非純粹從對(duì)花的形狀、顏色、大小等感官資訊而來(lái)，還包含人過(guò)去對(duì)花的經(jīng)驗(yàn)與印象，這些信息全部加起來(lái)才是人對(duì)花的感知B。格式塔心理學(xué)闡述了人腦對(duì)視知覺(jué)的信息轉(zhuǎn)化的整體性、具體化、組織性、恒常性特征，讓人們了解在特定情況下什么樣的視覺(jué)表現(xiàn)最有效，以及如何操控視覺(jué)元素來(lái)影響知覺(jué)、引導(dǎo)注意力，從而導(dǎo)致觀者的行為產(chǎn)生變化，因此格式塔在視覺(jué)藝術(shù)領(lǐng)域取得了許多重要成果，對(duì)視覺(jué)設(shè)計(jì)的影響深遠(yuǎn)。

格式塔心理學(xué)對(duì)UI設(shè)計(jì)來(lái)說(shuō)是基石與向?qū)У牡匚?。雖然，隨著技術(shù)的進(jìn)步、時(shí)間的推移，不同設(shè)備與媒介的U設(shè)計(jì)風(fēng)格也隨潮流趨勢(shì)而轉(zhuǎn)變，但版式的設(shè)計(jì)、區(qū)塊的劃分、信息的排布方式等基礎(chǔ)框架都由格式塔理論支撐，甚至近年來(lái)頗受人們關(guān)注的交互設(shè)計(jì)、動(dòng)效表現(xiàn)等新領(lǐng)域都需以格式塔理論為參考依據(jù)。若以U1的結(jié)構(gòu)為“骨”，UI的視覺(jué)為“皮”，那么格式塔心理學(xué)便是對(duì)UI設(shè)計(jì)的“骨相”與“皮相”都有至深的影響。如今，便利的移動(dòng)平臺(tái)已是人獲取信息的主要渠道，移動(dòng)端應(yīng)用也是人日常生活與工作的主要交流形式，因此，“互聯(lián)網(wǎng)+”領(lǐng)域也把產(chǎn)品設(shè)計(jì)的重點(diǎn)放在移動(dòng)端上，以用戶(hù)為中心的設(shè)計(jì)理念則成為研發(fā)的重點(diǎn)。不僅手機(jī)系統(tǒng)的UI設(shè)計(jì)依賴(lài)格式塔心理學(xué)，應(yīng)用軟件、H5和近幾年十分火爆的微信小程序的UI設(shè)計(jì)都需以格式塔心理學(xué)為依托。雖然這些虛擬產(chǎn)品面向的用戶(hù)群體不相同、商業(yè)手段也需持續(xù)變化，但無(wú)論在何種時(shí)代背景下，格式塔心理學(xué)都能在創(chuàng)新型設(shè)計(jì)中得到進(jìn)一步施展。

三、格式塔心理學(xué)在移動(dòng)端UI設(shè)計(jì)中的運(yùn)用——以黃油相機(jī)APP為例

黃油相機(jī)作為一款美圖應(yīng)用，在同類(lèi)產(chǎn)品市場(chǎng)早已進(jìn)入飽和的情況下，仍能后來(lái)居上，從往期低迷的市場(chǎng)占額一路攀升為下載排行榜中的黑馬，不僅因其在營(yíng)銷(xiāo)中文字體素材方面的成功，更有優(yōu)秀的UI設(shè)計(jì)、良好的用戶(hù)體驗(yàn)的功勞。在視覺(jué)方面，其為區(qū)別于五花八門(mén)的同類(lèi)產(chǎn)品，刻意減少色彩種類(lèi)，僅將淡黃色用作品牌色，除少量與付費(fèi)相關(guān)的功能做了必要的色彩突出外，其他模塊與組件均為黑白灰，所以在整體視覺(jué)偏向寡淡的情況下，區(qū)分板塊、劃分功能、整理信息與元素的重任便落在以格式塔心理學(xué)為根基的視覺(jué)設(shè)計(jì)法則中。文章以黃油相機(jī)為例，研究并闡述格式塔心理學(xué)在移動(dòng)端UI設(shè)計(jì)中的應(yīng)用。

（一）閉合律

人在觀察事物時(shí)，大腦會(huì)對(duì)多個(gè)獨(dú)立的元素之間的空白進(jìn)行填補(bǔ)，并將這些元素視為一個(gè)完整的封閉圖形，從而讓視覺(jué)信息簡(jiǎn)化，此為閉合性定律（Closure）。

黃油相機(jī)是一款集拍照、美圖、社交為一體的應(yīng)用，UI設(shè)計(jì)的優(yōu)化度與條理性是首先要解決的問(wèn)題，而閉合律則能助其減少信息交流所需的元素?cái)?shù)量，降低視覺(jué)界面的復(fù)雜性，使設(shè)計(jì)更具吸引力。以素材庫(kù)頁(yè)面為例（圖1-左），作為營(yíng)銷(xiāo)手段的素材圖片種類(lèi)繁多、色彩繽紛，從戰(zhàn)略角度考慮無(wú)法弱化其視覺(jué)，而配套的描述性文字與價(jià)格也同樣會(huì)給閱讀造成負(fù)擔(dān)。因此，為了提高界面的易讀性，藉由閉合律原理的指導(dǎo)，將圖片與文字按網(wǎng)格布局統(tǒng)一靠左、有序排列，此時(shí)用戶(hù)的大腦會(huì)通過(guò)填補(bǔ)空白、歸納元素來(lái)迅速讀懂頁(yè)面信息。雖然，作為排版工具的網(wǎng)格并不真實(shí)存在、板塊和模塊之間也沒(méi)有明顯的界限，但人的大腦卻能“看”到網(wǎng)格并感受其帶來(lái)的穩(wěn)定感（圖1-右）。同時(shí)，依閉合律指導(dǎo)的簡(jiǎn)約設(shè)計(jì)風(fēng)格能減少視覺(jué)干擾，提升閱讀體驗(yàn)和空間利用率，對(duì)屏幕尺寸不寬裕的移動(dòng)端UI設(shè)計(jì)十分友好。

（二）相似律

具有相同或相似特征的元素會(huì)被人自然地關(guān)聯(lián)起來(lái)，并被大腦視為一個(gè)整體，此為相似性定律（Similarity）。

相似律能協(xié)助黃油相機(jī)對(duì)U中的信息元素進(jìn)行組織和分類(lèi)，創(chuàng)造視覺(jué)對(duì)比、分配視覺(jué)重量，從而將用戶(hù)的注意力吸引到特定的內(nèi)容上。以會(huì)員付費(fèi)頁(yè)面為例（圖2-左），在視覺(jué)上，作為主打功能的“一鍵P圖”和“遮罩功能”的裝飾設(shè)計(jì)最為突出，會(huì)員附加功能僅用圖標(biāo)表現(xiàn)，而會(huì)員專(zhuān)區(qū)則詳細(xì)展示了具體的特權(quán)內(nèi)容，由此，三大板塊的設(shè)計(jì)風(fēng)格彼此獨(dú)立，形成對(duì)比;再看板塊內(nèi)部，雖然圖文內(nèi)容不同，但組內(nèi)元素保持了顏色、大小、形狀、尺寸、風(fēng)格、排列等諸多特征的一致性，用戶(hù)自然會(huì)將它們視為同一組或同一級(jí)別的信息[4]，從而在大腦中“看”到區(qū)塊（圖2-右）;又因板塊之間的視覺(jué)比重差異明顯，按照人眼自上而下的閱讀習(xí)慣，用戶(hù)在按順序?yàn)g覽時(shí)能感受到板塊視覺(jué)差異帶來(lái)的節(jié)奏感與舒適感，還能根據(jù)視覺(jué)比重選擇性地深入探索界面功能，因此在信息擁擠的環(huán)境中依然可以獲得良好的使用體驗(yàn)。

（三）接近律

相鄰的元素比距離遠(yuǎn)的元素具有更強(qiáng)的聯(lián)系性，因?yàn)榇竽X會(huì)將鄰近的元素判定為一個(gè)整體，不管它們?cè)谝曈X(jué)上是否相似，此為接近性定律（Proximity）。

在黃油相機(jī)的UI中，接近律常被用于處理文字較多的頁(yè)面，它能有效改善閱讀體驗(yàn);而當(dāng)接近律與相似律同時(shí)出現(xiàn)時(shí)，接近律的影響往往大過(guò)相似律。以黃油相機(jī)的社交區(qū)評(píng)論詳情頁(yè)為例（圖3-左），受接近律的影響，大腦首先會(huì)將相似的視覺(jué)元素列為一組（圖3-中），將視覺(jué)焦點(diǎn)落在左排第一列的全部頭像上，然后再看文字信息;但因頁(yè)面運(yùn)用了接近律，元素的豎排間距明顯大于橫排，形成空間對(duì)比，使不同類(lèi)型的視覺(jué)元素因距離相近而產(chǎn)生關(guān)聯(lián)，引導(dǎo)用戶(hù)的視點(diǎn)沿預(yù)期的方向?yàn)g覽，藉此，用戶(hù)可在短時(shí)間內(nèi)作出判斷，忽略相似律的影響，轉(zhuǎn)而將頭像與緊隨其后的文字看為一個(gè)群體（圖3-右），從而快速理解頁(yè)面的瀏覽方式，并深入研究?jī)?nèi)容與功能。同時(shí)，留白還可以增強(qiáng)視覺(jué)的層次感，提升信息流的可讀性與易讀性。

（四）連續(xù)律

大腦認(rèn)為，較之隨機(jī)排列的元素，以直線(xiàn)或曲線(xiàn)的形式排列的元素更具關(guān)聯(lián)性，并將它們視為一個(gè)完整的形體，此為連續(xù)性定律（Continuity）。

連續(xù)律可以幫助黃油相機(jī)引導(dǎo)用戶(hù)按規(guī)定的路徑或方向?yàn)g覽和操作、誘導(dǎo)用戶(hù)進(jìn)行界面移動(dòng)以及協(xié)助閱讀。以模板搜索頁(yè)為例（圖4），因用戶(hù)選擇的隨機(jī)性、模板尺寸的多樣性、搜索結(jié)果與數(shù)量的不可控性，瀑布流式布局是最好的解決方案，其具體視覺(jué)表現(xiàn)為參差不齊的多欄布局與不完整的信息呈現(xiàn)。瀑布流運(yùn)用了連續(xù)律原理，加強(qiáng)用戶(hù)對(duì)成組信息的感知，創(chuàng)造秩序，并誘導(dǎo)用戶(hù)為探索未完的內(nèi)容而持續(xù)向下滾動(dòng)頁(yè)面;免去翻頁(yè)功能的視覺(jué)干擾和開(kāi)發(fā)成本，避免因操作繁瑣而導(dǎo)致的用戶(hù)流失;而當(dāng)頁(yè)面被用戶(hù)拉到盡頭時(shí)，連續(xù)律的終止意味著用戶(hù)的瀏覽進(jìn)度被打斷，在慣性的驅(qū)使下，用戶(hù)會(huì)不由自主地去尋求新標(biāo)簽、新內(nèi)容，延續(xù)這種流暢的視覺(jué)體驗(yàn)?？梢?jiàn)，延續(xù)律在改善用戶(hù)體驗(yàn)的同時(shí)，還可有效增加用戶(hù)黏性，提高并維持應(yīng)用程序的日活量。圖4中瀑布流上方的關(guān)鍵詞標(biāo)簽也運(yùn)用了相同的設(shè)計(jì)手段，將窄小屏幕放置不下的內(nèi)容延伸到畫(huà)面以外，借由連續(xù)律暗示用戶(hù)向左滑動(dòng)以探索更多。

（五）對(duì)稱(chēng)律

人有對(duì)稱(chēng)偏好，對(duì)稱(chēng)的元素會(huì)給人一種穩(wěn)固感和秩序感，讓大腦認(rèn)為它們擁有共同的歸屬，從而視之為一個(gè)整體，此為對(duì)稱(chēng)性定律（Symmetry）。

對(duì)稱(chēng)的設(shè)計(jì)除了能給視覺(jué)帶來(lái)賞心悅目的和諧感以外，其在黃油相機(jī)的UI中最重要的貢獻(xiàn)，就是讓界面的理解變得簡(jiǎn)單、使信息的傳達(dá)變得高效。因此，黃油相機(jī)的的基礎(chǔ)框架一般都是對(duì)稱(chēng)式結(jié)構(gòu)，如其一級(jí)功能模塊中的頂部類(lèi)別標(biāo)簽與底部功能欄（圖1、圖4中的固定模塊）。不過(guò)，若打破這種平衡一在原本對(duì)稱(chēng)的設(shè)計(jì)中加入不對(duì)稱(chēng)的元素，刻意破壞對(duì)稱(chēng)賦予視覺(jué)界面的流暢性，那么不平衡的元素就會(huì)成為引人注目的焦點(diǎn)。例如，在圖1中，頂部搜索框的右邊加入了著重裝飾的VIP圖標(biāo)按鈕，使色彩比重明顯向天平的右側(cè)傾斜，成為該頁(yè)面功能區(qū)里唯一不對(duì)稱(chēng)的設(shè)計(jì)，給原本和諧的視覺(jué)帶來(lái)異物感。在對(duì)稱(chēng)律的影響下，不平衡的元素反而會(huì)吸引人的注意力，號(hào)召人進(jìn)行交互動(dòng)作。正是利用這種設(shè)計(jì)方式，黃油相機(jī)將用戶(hù)引流至?xí)T付費(fèi)通道，以此實(shí)現(xiàn)流量變現(xiàn)?？梢?jiàn)，因此，在Ul設(shè)計(jì)中，對(duì)稱(chēng)設(shè)計(jì)與一定程度的不對(duì)稱(chēng)設(shè)計(jì)同樣具有優(yōu)勢(shì)。

對(duì)稱(chēng)律也有UI路徑引導(dǎo)的作用。以黃油相機(jī)的修圖頁(yè)面的功能區(qū)為例（圖5），功能較少時(shí)，對(duì)稱(chēng)設(shè)計(jì)自然是最佳選擇（圖5-上）;一旦功能變多而顯示不全，視覺(jué)元素向右延伸至畫(huà)面外（圖5-下），用戶(hù)便會(huì)向右尋找并確定對(duì)稱(chēng)中心點(diǎn)的位置，直到將全部功能“解鎖”完畢。這與連續(xù)律的交互引導(dǎo)效力相似，它們都能傳達(dá)“內(nèi)容未完”的信息;但運(yùn)作原理不同，因?yàn)閷?duì)稱(chēng)律的生效基于對(duì)稱(chēng)中心的移位（如圖5）或視覺(jué)天平的傾斜（如圖1），而連續(xù)律則基于頂對(duì)齊或左對(duì)齊的排版布局（如圖4）。

（六）圖地原理

在人的視覺(jué)感知中，圖案有前景與背景之分，二者無(wú)法同時(shí)在大腦中成像，故而視覺(jué)焦點(diǎn)只能選其一落腳;而人的思維又具有組織性，會(huì)將容易理解的內(nèi)容提取出來(lái)、突出為前景（即“圖”），其他則“淪為”背景（即“地”），此為圖地原理（Figure-ground）。

對(duì)于黃油相機(jī)中信息層級(jí)較多的頁(yè)面而言，圖地原理的視覺(jué)分層效果可以幫助用戶(hù)快速找到位于頂層（即前景）的重點(diǎn)信息，且不會(huì)因?yàn)楹雎粤说讓樱幢尘埃┑男畔⒍械讲话?。以黃油相機(jī)的會(huì)員付費(fèi)頁(yè)為例（圖6），基于人性化的考慮，會(huì)員功能的詳細(xì)闡述被頁(yè)面隱藏，僅在用戶(hù)觸發(fā)熱點(diǎn)圖標(biāo)后才以彈窗的形式出現(xiàn)。這種設(shè)計(jì)，一可簡(jiǎn)化主頁(yè)的信息呈現(xiàn)，二可減少應(yīng)用地圖中的末節(jié)路徑，避免了用戶(hù)走回頭路的尷尬;但彈窗會(huì)干擾視覺(jué)，增加用戶(hù)理解界面信息的成本，因此急需依圖地原理對(duì)界面進(jìn)行分層——彈窗被優(yōu)化為卡片式設(shè)計(jì)，切卡片與下層主頁(yè)之間被半透明的黑色遮罩隔開(kāi)，視覺(jué)界面被割裂為層次分明的前、后兩景，將UI的理解成本降低至零。

圖地原理不僅具有正面、積極的效應(yīng)，其反向的運(yùn)用還能滿(mǎn)足應(yīng)用的另一種需求：盡可能地“隱藏”某些不想被用戶(hù)發(fā)現(xiàn)的功能。以圖6為例，卡片下方的退出按鈕被做了半透明處理，其本該屬于前景的層級(jí)感被削弱，并在一定程度上融入背景層。從盈利的角度講，退出通道的模糊化能讓用戶(hù)將更多的注意力放在會(huì)員信息上，從而刺激用戶(hù)的購(gòu)買(mǎi)欲，完成流量轉(zhuǎn)化;但強(qiáng)硬改變用戶(hù)行為的手段會(huì)引起用戶(hù)的反感，造成利潤(rùn)流失，所以基于人性化理念與盈利目標(biāo)折中的考慮，黃油相機(jī)選擇用模糊層級(jí)、降低對(duì)比的設(shè)計(jì)方法，讓退出通道將至次要等級(jí)，達(dá)到弱化其存在感的目的。

（七）共同區(qū)域

放置在同一個(gè)封閉空間內(nèi)的元素被大腦視為一個(gè)群組，此為共同區(qū)域原理（Commonregion）。

在黃油相機(jī)的UI中，共同區(qū)域往往具有明顯的視覺(jué)邊界或其他可見(jiàn)的區(qū)間障礙，如線(xiàn)條、色彩、形狀、陰影、間距等，因此它比接近律的分離效果更強(qiáng)，并具備突出元素的效果。依然以會(huì)員付費(fèi)頁(yè)為例（圖7），色彩、邊框、陰影三者相結(jié)合的卡片式設(shè)計(jì)將付費(fèi)通道的多種信息規(guī)劃為五個(gè)群組，并重點(diǎn)突出。藉由共同區(qū)域的效應(yīng)，信息都被整合、收納進(jìn)具有焦點(diǎn)效力的視覺(jué)容器中，提高了界面的層次性與可讀性;多種不同的視覺(jué)元素在UI中保持了風(fēng)格的統(tǒng)一，重點(diǎn)元素被帶入視覺(jué)前景，提示用戶(hù)進(jìn)行交互操作。

與圖地原理相似，共同區(qū)域的正用和反用能滿(mǎn)足UI設(shè)計(jì)的不同目的需求：圖7中，在強(qiáng)烈的視覺(jué)對(duì)比下，缺少可感知邊緣的元素則自動(dòng)后退到背景層，如付費(fèi)通道下方的解釋性文字、僅用下劃線(xiàn)作為交互提示的幾個(gè)次要功能。其中，“會(huì)員兌換”、“開(kāi)通微信/支付寶支付”等文字按鈕雖具備可操作性，因字號(hào)小、又沒(méi)有明顯的區(qū)域劃分特征，增加了用戶(hù)的誤觸率，而沒(méi)有相關(guān)需求的用戶(hù)則會(huì)因難以揣測(cè)其熱點(diǎn)范圍而選擇視而不見(jiàn)。可見(jiàn)，弱化區(qū)域概念的元素容易“隱沒(méi)”在背景層中，因此在設(shè)計(jì)時(shí)應(yīng)考慮到具體需求，靈活運(yùn)用共同區(qū)域原理。

（八）共同命運(yùn)

相較于方向不一或靜止的元素，大腦認(rèn)為朝同一個(gè)方向移動(dòng)的元素更具關(guān)聯(lián)性，并將之視為一個(gè)整體，此為共同命運(yùn)原理（Common fate）。

與相似律不同的是，共同命運(yùn)強(qiáng)調(diào)元素的動(dòng)態(tài)特征，如速度、方向、時(shí)間、路徑、行為模式等方面的統(tǒng)一;盡管元素在視覺(jué)上不相同、距離也很遠(yuǎn)，一旦它們一起移動(dòng)或變化，大腦就會(huì)將它們判定為一個(gè)團(tuán)體。因此，共同命運(yùn)能幫助黃油相機(jī)將視覺(jué)特征不同但功能級(jí)別相同的信息有效地聯(lián)系起來(lái)，具體表現(xiàn)為行動(dòng)與結(jié)果的一致性，如個(gè)人主頁(yè)的分享模塊（圖8）：因分享通道關(guān)聯(lián)的是各個(gè)不同的社區(qū)應(yīng)用，這些應(yīng)用的圖標(biāo)等同于商業(yè)標(biāo)志，其識(shí)別性受《中華人民共和國(guó)商標(biāo)法》的保護(hù)，不能隨意改動(dòng);然而，風(fēng)格各異的圖標(biāo)在同一頁(yè)面的同一模塊中同時(shí)出現(xiàn)，會(huì)給視覺(jué)帶來(lái)嘈雜感，不符合UI視覺(jué)的統(tǒng)一原則;與此同時(shí)，除社區(qū)應(yīng)用以外的圖標(biāo)也會(huì)增加視覺(jué)的干擾。因此，分享模塊被隱藏了起來(lái)，在用戶(hù)點(diǎn)擊相應(yīng)的按鍵后，再?gòu)钠聊幌路竭M(jìn)入界面，移動(dòng)至功能顯示完畢時(shí)終止。同步的移動(dòng)與終止能讓用戶(hù)明白這些相貌各異的元素屬于同一級(jí)別，其功能必定是一致或相似的;而卡片式背板的增加，也讓圖地原理成為助力，使共同命運(yùn)的成組效果更佳突顯;用戶(hù)理解模塊并被吸引到這個(gè)區(qū)域后，才會(huì)對(duì)內(nèi)部的多種信息進(jìn)行新一輪的分析。

結(jié)語(yǔ)

美國(guó)著名軟件公司Autodesk的品牌內(nèi)容策略師勞拉·布徹曾說(shuō)，“優(yōu)秀的設(shè)計(jì)師了解心理學(xué)在視覺(jué)感知中強(qiáng)大作用，知曉人會(huì)對(duì)自己的設(shè)計(jì)有什么樣的反饋”。格式塔心理學(xué)告訴世人，大腦有獨(dú)特的圖形處理方式，會(huì)對(duì)信息進(jìn)行分組、填補(bǔ)空白，“看”到于視覺(jué)感知不同的內(nèi)容。在“互聯(lián)網(wǎng)+”時(shí)代，移動(dòng)電子設(shè)備在人們的工作與生活中肆意蔓延，人對(duì)信息的獲取幾乎全部依賴(lài)電子設(shè)備與網(wǎng)絡(luò)，以用戶(hù)為中心、用戶(hù)體驗(yàn)至上的設(shè)計(jì)理念促使U在人性化設(shè)計(jì)研究的道路上不斷前行。在這歷史并不悠久的領(lǐng)域中，技術(shù)的更新與產(chǎn)品的迭代都表現(xiàn)出驚人的速度，相關(guān)的視覺(jué)設(shè)計(jì)也因需求的不斷改變而具時(shí)效性，但以格式塔為主的視覺(jué)心理知識(shí)體系經(jīng)受了時(shí)間長(zhǎng)河的考驗(yàn)，并在與視覺(jué)相關(guān)的各個(gè)領(lǐng)域中得到進(jìn)一步的驗(yàn)證。學(xué)習(xí)格式塔心理學(xué)，可以讓設(shè)計(jì)師成為掌握視覺(jué)傳達(dá)奧義的智者，幫助設(shè)計(jì)師在探索用戶(hù)體驗(yàn)的提升之道中不斷向前邁進(jìn)，為滿(mǎn)足未來(lái)虛擬現(xiàn)實(shí)技術(shù)全面發(fā)展而對(duì)社會(huì)提出的人才需求做好準(zhǔn)備。

注：文中展示的黃油相機(jī)版本為8.1.3.455。

參考文獻(xiàn)

[l]Behrens Roy R.Art，Design and Gestalt Theory[J/OL].https：//doi.org/10.2307/1576669，1998.

[2]柳沙設(shè)計(jì)心理學(xué)（升級(jí)版）[M].上海：上海人民美術(shù)出版社，2016：15.

[3]Toccafondi F，Hanson NR.Receptions，readings and interpretations of gestaltpsychologie[DB/OL].http：//gestalttheory.netlarchive/toccafondi.pdf.2002-9.

[4]Tubik Studio.Gestalt Theory for Efficient UX：Principle of Similarity[EB/OL].https：//uxplanet.org/gestalt-theory-for-efficient-ux-principle-of-similarity-827c20c175f5，2017-9-15.

[5]（美）蘇珊魏因申克.設(shè)計(jì)師要懂心理學(xué)2[M].北京：人民郵電出版社，2016：6-10.

[6]Gkogka Eleana.Gestalt principles in UI design.[EB/OL].https：//medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965，2018-1-16.