格式塔心理學視角下的移動端UI設(shè)計研究

孫韻琦

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

關(guān)鍵詞：格式塔 設(shè)計心理學 UI設(shè)計 用戶體驗 設(shè)計方法

中圖分類號：J05

文獻標識碼：A

文章編號：1003-0069（2021）04-0115-04

引言

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

一、移動端U的特點

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

（一）視覺設(shè)計的簡練性

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

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

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

（三）交互體驗的流暢性

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

（四）多尺寸、多平臺的適配性

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

二、格式塔心理學與移動端UI設(shè)計的關(guān)系

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

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

三、格式塔心理學在移動端UI設(shè)計中的運用——以黃油相機APP為例

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

（一）閉合律

人在觀察事物時，大腦會對多個獨立的元素之間的空白進行填補，并將這些元素視為一個完整的封閉圖形，從而讓視覺信息簡化，此為閉合性定律（Closure）。

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

（二）相似律

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

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

（三）接近律

相鄰的元素比距離遠的元素具有更強的聯(lián)系性，因為大腦會將鄰近的元素判定為一個整體，不管它們在視覺上是否相似，此為接近性定律（Proximity）。

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

（四）連續(xù)律

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

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

（五）對稱律

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

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

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

（六）圖地原理

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

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

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

（七）共同區(qū)域

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

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

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

（八）共同命運

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

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

結(jié)語

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

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

參考文獻

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

[2]柳沙設(shè)計心理學（升級版）[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è)計師要懂心理學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.