在這篇文章中，希望通過(guò)Web端的一些產(chǎn)品示例，來(lái)闡述設(shè)計(jì)中對(duì)格式塔原則的應(yīng)用。

格式塔心理學(xué)認(rèn)為知覺(jué)不能被分解為更小的組成部分，知覺(jué)的基本單位就是知覺(jué)本身，格式塔心理學(xué)的信條就是：整體不同于部分之和。格式塔心理學(xué)強(qiáng)調(diào)結(jié)構(gòu)的整體作用和產(chǎn)生知覺(jué)的組成成分之間的聯(lián)系。

當(dāng)我由測(cè)試轉(zhuǎn)行到交互設(shè)計(jì)師時(shí)，我確認(rèn)自己擅長(zhǎng)辨別產(chǎn)品的優(yōu)劣，和識(shí)別產(chǎn)品的待改善點(diǎn)，盡管很多時(shí)候這些待改善點(diǎn)還缺少數(shù)據(jù)和用戶的論證。之前我還是典型的用戶思維，對(duì)產(chǎn)品實(shí)際效果的判斷非常依賴數(shù)據(jù)和用戶反饋，直到我了解了格式塔原理，它改變了我對(duì)設(shè)計(jì)的思考方式，并給了我一個(gè)分析原因的思考框架。這種思考方式和工作框架大大提高了我的工作能力和工作技巧。

在進(jìn)行產(chǎn)品復(fù)盤(pán)時(shí)，有必要了解產(chǎn)品設(shè)計(jì)時(shí)使用的設(shè)計(jì)模式和范例，但通常這有局限性。有一個(gè)完整的思考框架，能讓我們更容易理解和思考為什么以及怎么做，也會(huì)讓設(shè)計(jì)方案更靠譜。格式塔原理就是這樣的一個(gè)思考框架。

格式塔原理

格式塔心理學(xué)（gestalt psychology），又叫完形心理學(xué)，是西方現(xiàn)代心理學(xué)的主要學(xué)派之一，誕生于德國(guó)，后來(lái)在美國(guó)得到進(jìn)一步發(fā)展。該學(xué)派既反對(duì)美國(guó)構(gòu)造主義心理學(xué)的元素主義，也反對(duì)行為主義心理學(xué)的刺激—反應(yīng)公式，主張研究直接經(jīng)驗(yàn)（即意識(shí)）和行為，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，認(rèn)為整體不等于并且大于部分之和，主張以整體的動(dòng)力結(jié)構(gòu)觀來(lái)研究心理現(xiàn)象。該學(xué)派的創(chuàng)始人是韋特海默，代表人物還有苛勒和考夫卡。

格式塔原理主要包括：主體-背景原則、接近性原則、相似性原則、連續(xù)性原則、封閉性原則、對(duì)稱性原則、共同命運(yùn)原則等。

本篇文章將結(jié)合互聯(lián)網(wǎng)產(chǎn)品實(shí)例討論格式塔原理在交互設(shè)計(jì)中的應(yīng)用。

主體-背景原則

這條原則可以理解為“什么重要，什么不重要”，或者說(shuō)成“主體-背景原則”。

當(dāng)用戶處在一個(gè)場(chǎng)景中時(shí)，本能的第一反應(yīng)是判斷視野中哪些內(nèi)容是重要的、需要馬上感知的，哪些內(nèi)容是不重要的。為了完成這一點(diǎn)，大腦需要將畫(huà)面中的元素分開(kāi)成主體元素（需要關(guān)注的元素）和背景元素（不那么重要的輔助元素）兩部分。以下例子提供了一些可以用來(lái)區(qū)分主體和背景元素的視覺(jué)提示。

制造對(duì)比和反差

hero images是目前最常用的著陸頁(yè)設(shè)計(jì)方式，通常還要搭配一個(gè)明顯的CTA按鈕。一個(gè)好的hero image使用主體和背景的關(guān)系原則快速傳遞信息，并使用戶的下一個(gè)操作步驟顯而易見(jiàn)。

Moosehead使用的hero image有清晰的主體和背景，通過(guò)字體、字號(hào)、顏色等細(xì)節(jié)優(yōu)化凸出了主體信息，用戶能夠快速抓住頁(yè)面想表達(dá)的主旨信息。

文本（主體信息）是白色的、大字號(hào)、淺灰色陰影，這些能讓文本產(chǎn)生在圖片（背景）前面凸出的3D效果，深色圖片上的白色文字十分吸引眼球，背景圖做了模糊化處理，保證了用戶對(duì)文本的迅速對(duì)焦。以上所有效果的作用，就是保證文本是主體信息，背景圖只是輔助信息。

Heineken在hero banner上使用一個(gè)視頻做為背景。

使用視頻背景時(shí)，對(duì)信息傳遞和CTA凸出上有一定挑戰(zhàn)性，但是Heineken通過(guò)大號(hào)的白色文本和調(diào)暗視頻亮度解決了這個(gè)問(wèn)題。“Watch the prep talk”這個(gè)CTA放在半透明的黑色背景上，有兩個(gè)作用：其一是保證了文本和視頻的對(duì)比度，方便用戶閱讀文本信息；其二是告知用戶這是個(gè)可以點(diǎn)擊的按鈕（按鈕有亮度增加的懸停態(tài)）。

矩形元素

Molson Canadian使用矩形來(lái)區(qū)分主體信息和背景信息，其主頁(yè)如下：

打開(kāi)網(wǎng)站主頁(yè)，首先有三個(gè)元素映入眼簾：啤酒的圖片；右上部的矩形（“Click here to nominate…”）；白底的長(zhǎng)條矩形（“Great Canadians deserve…”）。右上角的矩形顯然是一個(gè)主體元素：白色邊框清楚地將它和背景圖區(qū)分開(kāi)。啤酒圖片與背景圖的顏色對(duì)比明顯；底部的白色矩形疊加在背景圖的上面，有很好的凸出效果。

陰影

Molson著陸頁(yè)上對(duì)于矩形的使用還有另一個(gè)重要技巧：陰影。注意到矩形是有陰影效果的，這就給人一種矩形是在麥田頂端的感覺(jué)。Molson在社交媒體的圖片上也同樣使用了這個(gè)技巧。

Budweiser也使用了陰影的技巧。

頂部導(dǎo)航欄和主圖是有陰影的，這些都給用戶一種它們是懸在背景上層的感覺(jué)。

相似性原則

相似性原則認(rèn)為，具有相似視覺(jué)特征的事物被認(rèn)為功能上也更相關(guān)。用于相似性的三個(gè)最常見(jiàn)的特性是顏色、形狀和大小。還有其他特性，如紋理、方向等，但它們并不常見(jiàn)，而且在大多數(shù)情況下并不那么重要。

相似性和一致性是同一事物的兩面。頁(yè)面元素能夠清楚的表達(dá)頁(yè)面功能，這通常是頁(yè)面風(fēng)格一致性的事情。同一個(gè)產(chǎn)品的鏈接、布局、CTA等，應(yīng)該盡可能地保持一致性，這樣用戶會(huì)更容易地學(xué)會(huì)如何使用這個(gè)界面。以下是一些流型的UX網(wǎng)站，看一下他們是如何使用顏色、形狀、尺寸來(lái)表達(dá)相似性的。

Smashing Magazine

看下Smashing Magazine是如何在鏈接和CTA上使用一致性的。

鏈接

在Smashing Magazine的著陸頁(yè)上使用了兩種鏈接：內(nèi)容鏈接和導(dǎo)航鏈接。

內(nèi)容鏈接

Smashing Magazine的內(nèi)容鏈接有以下幾種：

• 鏈接顏色是淺藍(lán)色，加灰色下劃線；
• 作者名字的字號(hào)更大，淺藍(lán)色；
• 標(biāo)記和注釋顯然也是鏈接，同樣采用淺藍(lán)色，但沒(méi)有下劃線。

如果向下滾動(dòng)頁(yè)面，會(huì)發(fā)現(xiàn)鏈接規(guī)則是一致的，習(xí)慣這種規(guī)則后，瀏覽頁(yè)面時(shí)就可以輕易識(shí)別每種鏈接。

導(dǎo)航鏈接

左側(cè)導(dǎo)航菜單中的鏈接使用顏色和板式進(jìn)行分組。

一級(jí)導(dǎo)航的字體全部大寫(xiě)，深灰色，加粗；二級(jí)導(dǎo)航首字母大寫(xiě)，淺灰色，不加粗；此外，也使用顏色來(lái)區(qū)分不同層級(jí)。

每篇文章的標(biāo)題字號(hào)最大，加粗。即使以極快的速度滾動(dòng)頁(yè)面，也可以通過(guò)字體大小輕易地識(shí)別出文章標(biāo)題。

CTA

Smashing Magazine使用兩類CTA按鈕：用戶搜索和訂閱的紅色按鈕，以及通常以省略號(hào)結(jié)束的藍(lán)色按鈕。

紅色按鈕用于搜索和訂閱，他們被附加到輸入框的后面，刺激用戶在輸入文本后立即點(diǎn)擊；藍(lán)色按鈕為了吸引用戶更多地了解后置頁(yè)面的內(nèi)容。即使藍(lán)色按鈕位于不同位置，他們的樣式也是相同的。這有利于用戶理解這類按鈕的作用：后置頁(yè)面的觸發(fā)按鈕。

Boxes and Arrows

這是一個(gè)極簡(jiǎn)風(fēng)格的網(wǎng)站，但是信息閱讀效率極高。

這個(gè)網(wǎng)站的使用和學(xué)習(xí)成本很低，因此內(nèi)容的閱讀速度極快。每個(gè)博客文章的標(biāo)題都是最突出的元素，保證快速瀏覽頁(yè)面時(shí)不會(huì)忽略標(biāo)題；文本鏈接有下劃線并突出；“Continue reading”的鏈接清晰且有一致性；每篇文章都嚴(yán)格遵循這種規(guī)則，整個(gè)頁(yè)面展示了很強(qiáng)的相似性。

Mockplus

Mockplus使用的布局方式很常見(jiàn)：頁(yè)面分為左右兩部分，一側(cè)是大圖片，另一側(cè)是文本。

頁(yè)面布局?

與其他例子一樣，Mockplus通過(guò)尺寸（圖像和文本）和布局來(lái)構(gòu)造相似性。此外，還利用了形狀來(lái)構(gòu)造元素之間的相似性。

從頂部探出的半圓形顯然具有一致性，將這個(gè)設(shè)計(jì)方式復(fù)制，可以很容易地形成相似性，讓用戶理解，所有這種設(shè)計(jì)方式的元素，作用基本相同。

連接性原則

連接性原則背后的想法很簡(jiǎn)答：為了使事物看起來(lái)更像是一個(gè)整體，因此把它們裝在一個(gè)盒子里，或者把它們連接起來(lái)

外殼

通過(guò)套外殼對(duì)頁(yè)面內(nèi)容進(jìn)行分組的方法，已經(jīng)應(yīng)用在了各類互聯(lián)網(wǎng)產(chǎn)品上。

社交媒體

Facebook上有很多對(duì)外殼的應(yīng)用，具體如下：

• 整個(gè)帖子都在一個(gè)白色外殼里，很明顯一個(gè)外殼就是一個(gè)基本單位；
• 視頻標(biāo)題和視頻被封閉在一個(gè)灰色外殼里；
• 點(diǎn)贊圖標(biāo)和“Like Page”在灰色外殼里，顯然點(diǎn)贊和喜歡有關(guān)聯(lián)性；
• 點(diǎn)贊、評(píng)論和分享都在白色外殼里，這些動(dòng)作都與文章內(nèi)容有關(guān)；
• emoji表情、相機(jī)、GIF、貼紙圖標(biāo)都封閉在評(píng)論框里。

博客類站點(diǎn)

在相似性里已經(jīng)列舉了Boxes and Arrows的例子，這個(gè)網(wǎng)站同樣還為使用外殼分離內(nèi)容提供了很好的例子。

另一個(gè)使用外殼封閉內(nèi)容的好例子是CBC網(wǎng)站。

表單

注冊(cè)表單外面套一個(gè)外殼是很常用的做法，此外，對(duì)訂閱表單套外殼也很常見(jiàn)。

導(dǎo)航

對(duì)于任何產(chǎn)品，導(dǎo)航都是最重要的元素之一，同樣也經(jīng)常使用套外殼方法。以下是ABC頂部導(dǎo)航欄的例子

ABC使用菜單下面的一條細(xì)線將導(dǎo)航條與內(nèi)容分隔開(kāi)，有效地將導(dǎo)航區(qū)的元素分組。戴爾也用了相似的方法，搜索框和導(dǎo)航菜單都被封閉在一個(gè)藍(lán)色外殼里。

?Logo

大量公司在Logo設(shè)計(jì)上利用了外殼的思路。對(duì)Logo套外殼可以很清楚的表明哪里是Logo的一部分，哪里不是。

連接元素

除了外殼，連接線和思想氣泡也能表達(dá)連接性原則。盡管氣泡不是線條，但它們有很好的連續(xù)性。在網(wǎng)頁(yè)設(shè)計(jì)中，使用連線或思想氣泡來(lái)連接元素并不常見(jiàn)，但有時(shí)在PPT、腦圖等場(chǎng)景下，使用連接線和氣泡能起到很好的效果。

接近性原則

另一個(gè)可以用來(lái)表達(dá)關(guān)聯(lián)的格式塔原則是接近性。接近性原則可以這樣理解：

更緊密地聯(lián)系在一起的物體，通常被認(rèn)為比物理距離更遠(yuǎn)的物體，更具有相關(guān)性。

接近性并不像連接性那么強(qiáng)大，但仍然是一種有效的分組技術(shù)，而且非常美觀。適當(dāng)?shù)厥褂每瞻追潜磉_(dá)相關(guān)性的很好的方式。

空白

以下的例子能夠表現(xiàn)空白大小所引起的不同效果。

錯(cuò)誤消息

對(duì)于如何提醒表單填寫(xiě)的錯(cuò)誤信息，已經(jīng)有比較成熟的方案。以下是Netflix的密碼錯(cuò)誤提示。

Netflix的密碼錯(cuò)誤提示距離密碼填寫(xiě)框較遠(yuǎn)，用戶在上下滑動(dòng)頁(yè)面的時(shí)候需要記憶提示內(nèi)容。Google則更好的利用了接近性原則。

在頁(yè)面頂部提示錯(cuò)誤信息是必要的，但在輸入框的下面直接提示錯(cuò)誤信息則更有效，這些錯(cuò)誤提示與相應(yīng)的輸入框更接近，用戶可以很清楚的知道哪個(gè)字段填寫(xiě)錯(cuò)誤。

譯者：李小新

原文作者：Jonathan Beer, Co-founder of ThinkUX (thinkux.ca). Programmer, UX Researcher & Designer.

原文地址：

https://thinkux.ca/blog/be-a-better-designer-with-gestalt-principles-part-1-figure-ground/

https://thinkux.ca/blog/be-a-better-designer-with-gestalt-principles-part-2-similarity/

https://thinkux.ca/blog/be-a-better-designer-with-gestalt-principles-part-3-grouping/

本文系人人都是產(chǎn)品經(jīng)理翻譯團(tuán)隊(duì) @李小新? 翻譯發(fā)布，未經(jīng)本站許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議