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

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

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

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

格式塔原理

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

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

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

主體-背景原則

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

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

制造對比和反差

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

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

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

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

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

矩形元素

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

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

陰影

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

Budweiser也使用了陰影的技巧。

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

相似性原則

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

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

Smashing Magazine

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

鏈接

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

內(nèi)容鏈接

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

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

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

導(dǎo)航鏈接

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

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

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

CTA

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

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

Boxes and Arrows

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

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

Mockplus

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

頁面布局?

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

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

連接性原則

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

外殼

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

社交媒體

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

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

博客類站點

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

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

表單

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

導(dǎo)航

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

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

?Logo

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

連接元素

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

接近性原則

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

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

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

空白

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

錯誤消息

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

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

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

譯者：李小新

原文作者：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)理翻譯團隊 @李小新? 翻譯發(fā)布，未經(jīng)本站許可，禁止轉(zhuǎn)載。

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