在這篇文章中，希望通過Web端的一些產品示例，來闡述設計中對格式塔原則的應用。

格式塔心理學認為知覺不能被分解為更小的組成部分，知覺的基本單位就是知覺本身，格式塔心理學的信條就是：整體不同于部分之和。格式塔心理學強調結構的整體作用和產生知覺的組成成分之間的聯系。

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

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

格式塔原理

格式塔心理學（gestalt psychology），又叫完形心理學，是西方現代心理學的主要學派之一，誕生于德國，后來在美國得到進一步發展。該學派既反對美國構造主義心理學的元素主義，也反對行為主義心理學的刺激—反應公式，主張研究直接經驗（即意識）和行為，強調經驗和行為的整體性，認為整體不等于并且大于部分之和，主張以整體的動力結構觀來研究心理現象。該學派的創始人是韋特海默，代表人物還有苛勒和考夫卡。

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

本篇文章將結合互聯網產品實例討論格式塔原理在交互設計中的應用。

主體-背景原則

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

當用戶處在一個場景中時，本能的第一反應是判斷視野中哪些內容是重要的、需要馬上感知的，哪些內容是不重要的。為了完成這一點，大腦需要將畫面中的元素分開成主體元素（需要關注的元素）和背景元素（不那么重要的輔助元素）兩部分。以下例子提供了一些可以用來區分主體和背景元素的視覺提示。

制造對比和反差

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

Moosehead使用的hero image有清晰的主體和背景，通過字體、字號、顏色等細節優化凸出了主體信息，用戶能夠快速抓住頁面想表達的主旨信息。

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

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

使用視頻背景時，對信息傳遞和CTA凸出上有一定挑戰性，但是Heineken通過大號的白色文本和調暗視頻亮度解決了這個問題?！癢atch the prep talk”這個CTA放在半透明的黑色背景上，有兩個作用：其一是保證了文本和視頻的對比度，方便用戶閱讀文本信息；其二是告知用戶這是個可以點擊的按鈕（按鈕有亮度增加的懸停態）。

矩形元素

Molson Canadian使用矩形來區分主體信息和背景信息，其主頁如下：

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

陰影

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

Budweiser也使用了陰影的技巧。

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

相似性原則

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

相似性和一致性是同一事物的兩面。頁面元素能夠清楚的表達頁面功能，這通常是頁面風格一致性的事情。同一個產品的鏈接、布局、CTA等，應該盡可能地保持一致性，這樣用戶會更容易地學會如何使用這個界面。以下是一些流型的UX網站，看一下他們是如何使用顏色、形狀、尺寸來表達相似性的。

Smashing Magazine

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

鏈接

在Smashing Magazine的著陸頁上使用了兩種鏈接：內容鏈接和導航鏈接。

內容鏈接

Smashing Magazine的內容鏈接有以下幾種：

• 鏈接顏色是淺藍色，加灰色下劃線；
• 作者名字的字號更大，淺藍色；
• 標記和注釋顯然也是鏈接，同樣采用淺藍色，但沒有下劃線。

如果向下滾動頁面，會發現鏈接規則是一致的，習慣這種規則后，瀏覽頁面時就可以輕易識別每種鏈接。

導航鏈接

左側導航菜單中的鏈接使用顏色和板式進行分組。

一級導航的字體全部大寫，深灰色，加粗；二級導航首字母大寫，淺灰色，不加粗；此外，也使用顏色來區分不同層級。

每篇文章的標題字號最大，加粗。即使以極快的速度滾動頁面，也可以通過字體大小輕易地識別出文章標題。

CTA

Smashing Magazine使用兩類CTA按鈕：用戶搜索和訂閱的紅色按鈕，以及通常以省略號結束的藍色按鈕。

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

Boxes and Arrows

這是一個極簡風格的網站，但是信息閱讀效率極高。

這個網站的使用和學習成本很低，因此內容的閱讀速度極快。每個博客文章的標題都是最突出的元素，保證快速瀏覽頁面時不會忽略標題；文本鏈接有下劃線并突出；“Continue reading”的鏈接清晰且有一致性；每篇文章都嚴格遵循這種規則，整個頁面展示了很強的相似性。

Mockplus

Mockplus使用的布局方式很常見：頁面分為左右兩部分，一側是大圖片，另一側是文本。

頁面布局?

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

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

連接性原則

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

外殼

通過套外殼對頁面內容進行分組的方法，已經應用在了各類互聯網產品上。

社交媒體

Facebook上有很多對外殼的應用，具體如下：

• 整個帖子都在一個白色外殼里，很明顯一個外殼就是一個基本單位；
• 視頻標題和視頻被封閉在一個灰色外殼里；
• 點贊圖標和“Like Page”在灰色外殼里，顯然點贊和喜歡有關聯性；
• 點贊、評論和分享都在白色外殼里，這些動作都與文章內容有關；
• emoji表情、相機、GIF、貼紙圖標都封閉在評論框里。

博客類站點

在相似性里已經列舉了Boxes and Arrows的例子，這個網站同樣還為使用外殼分離內容提供了很好的例子。

另一個使用外殼封閉內容的好例子是CBC網站。

表單

注冊表單外面套一個外殼是很常用的做法，此外，對訂閱表單套外殼也很常見。

導航

對于任何產品，導航都是最重要的元素之一，同樣也經常使用套外殼方法。以下是ABC頂部導航欄的例子

ABC使用菜單下面的一條細線將導航條與內容分隔開，有效地將導航區的元素分組。戴爾也用了相似的方法，搜索框和導航菜單都被封閉在一個藍色外殼里。

?Logo

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

連接元素

除了外殼，連接線和思想氣泡也能表達連接性原則。盡管氣泡不是線條，但它們有很好的連續性。在網頁設計中，使用連線或思想氣泡來連接元素并不常見，但有時在PPT、腦圖等場景下，使用連接線和氣泡能起到很好的效果。

接近性原則

另一個可以用來表達關聯的格式塔原則是接近性。接近性原則可以這樣理解：

更緊密地聯系在一起的物體，通常被認為比物理距離更遠的物體，更具有相關性。

接近性并不像連接性那么強大，但仍然是一種有效的分組技術，而且非常美觀。適當地使用空白符是表達相關性的很好的方式。

空白

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

錯誤消息

對于如何提醒表單填寫的錯誤信息，已經有比較成熟的方案。以下是Netflix的密碼錯誤提示。

Netflix的密碼錯誤提示距離密碼填寫框較遠，用戶在上下滑動頁面的時候需要記憶提示內容。Google則更好的利用了接近性原則。

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

譯者：李小新

原文作者：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/

本文系人人都是產品經理翻譯團隊 @李小新? 翻譯發布，未經本站許可，禁止轉載。

題圖來自PEXELS，基于CC0協議