探索完形設計原則

收聽本文的音頻版本

負空間長期以來一直是優秀設計的主要內容。 通常首先想到的是在設計元素周圍留出空白。 但是有些設計使用該空白來推斷實際上不存在的元素（例如，隱藏在 FedEx 徽標中 E 和 X 之間的箭頭立即浮現在腦海中）。

人腦非常擅長填補圖像中的空白，並創造出一個大於部分之和的整體。 這就是為什麼我們會在樹葉或人行道裂縫中看到面孔。

這一原則是視覺感知格式塔原則背後最重要的基本思想之一。 關於該理論的最有影響力的早期提案是由 Max Wertheimer 在其 1923 年的知覺組織格式塔定律中發表的，儘管沃爾夫岡·科勒 1920 年對物理格式塔滕的討論也包含許多關於該主題的有影響力的想法。

不管是誰首先提出了這些想法（早在 1890 年就有文章），格式塔原則是任何設計師學習的重要理念，它們的實施不僅可以大大提高設計的美感，而且可以它的功能性和用戶友好性。

用最簡單的術語來說，格式塔理論是基於這樣一種思想，即人類大腦將嘗試簡化和組織由許多元素組成的複雜圖像或設計，下意識地將各個部分排列成一個有組織的系統，從而創造一個整體，而不僅僅是一個整體。一系列不同的元素。 我們的大腦是用來觀察結構和模式的，以便我們更好地了解我們生活的環境。

格式塔理論通常有六個單獨的原則：相似性、連續性、閉合性、接近性、圖形/背景以及對稱和順序（也稱為pragnanz ）。 還有一些額外的、更新的原則有時與格式塔相關，例如共同命運。

相似

將相似的事物組合在一起是人類的天性。 在格式塔中，相似的元素在視覺上被分組，無論它們彼此接近。 它們可以按顏色、形狀或大小進行分組。 相似性可用於將設計中可能不相鄰的元素聯繫在一起。

當然，如果你想讓它們在人群中脫穎而出，你可以讓它們與眾不同。 這就是為什麼號召性用語的按鈕通常設計成與頁面其餘部分不同的顏色——因此它們脫穎而出，並將訪問者的注意力吸引到所需的操作上。

在 UX 設計中，使用相似性可以讓訪問者清楚哪些項目是相似的。 例如，在使用重複設計元素（例如帶有 3-4 行文本的圖標）的功能列表中，相似性原則可以很容易地瀏覽它們。 相比之下，更改要突出顯示的功能的設計元素會使它們脫穎而出，並在訪問者的感知中賦予它們更多的重要性。

即使像確保整個設計中的鏈接以相同方式格式化這樣簡單的事情，也依賴於訪問者感知網站組織和結構方式的相似性原則。

繼續

連續性定律假定人眼在查看線條時將遵循最平滑的路徑，而不管線條實際上是如何繪製的。

當目標是引導訪問者的眼睛朝某個方向時，這種延續可能是一個有價值的工具。 他們將遵循頁面上最簡單的路徑，因此請確保他們應該看到的最重要的部分屬於該路徑。

由於眼睛自然會沿著一條線排列，因此將一系列項目排成一行會自然地將視線從一個項目吸引到下一個項目。 水平滑塊就是這樣一個例子，亞馬遜等網站上的相關產品列表也是如此。

關閉

閉包是最酷的格式塔原則之一，我在本文開頭已經提到了這一點。 這是您的大腦將填補設計或圖像的缺失部分以創建一個整體的想法。

在最簡單的形式中，閉合原理允許您的眼睛跟隨虛線到其末端。 但更複雜的應用程序經常出現在徽標中，例如世界野生動物基金會的徽標。 熊貓的大塊輪廓丟失了，但你的大腦可以毫不費力地填充缺失的部分以查看整個動物。

Closure 經常用於徽標設計，其他示例包括美國網絡、NBC、Sun Microsystems 甚至 Adob​​e。

另一個在 UX 和 UI 設計中非常重要的閉包示例是，當您顯示部分圖像從用戶屏幕上淡出時，以便向他們展示如果他們向左或向右滑動還有更多內容可以找到。 如果沒有部分圖像，即如果只顯示完整圖像，大腦不會立即解釋可能還有更多內容可以看到，因此您的用戶不太可能滾動（因為關閉已經很明顯）。

接近

接近度是指元素彼此之間的接近程度。 最強的鄰近關係是重疊主體之間的鄰近關係，但僅將對象分組到單個區域也可以產生強烈的鄰近效應。

當然，反之亦然。 通過在元素之間放置空間，即使它們的其他特徵相同，您也可以添加分隔。

以這組圓圈為例：

在 UX 設計中，接近度最常用於讓用戶將某些事物組合在一起，而無需使用硬邊界之類的東西。 通過將相似的事物放在一起，並在每個組之間留出空間，觀眾將立即了解您希望他們感知的組織和結構。

圖/地

圖形/地面原理類似於封閉原理，因為它利用了大腦處理負空間的方式。 您可能已經在社交媒體上的模因中或作為徽標的一部分（例如已經提到的 FedEx 徽標）中看到了該原則的示例。

你的大腦會區分它認為是圖像前景的物體（人物或焦點）和背景（人物所在的區域）。 有趣的是前景和背景實際上包含兩個不同的圖像，如下所示：

在這張圖片中可以看到一個更簡單的例子，兩張臉在他們之間創建了一個燭台或花瓶：

一般而言，您的大腦會將圖像的較大區域解釋為地面，將較小的區域解釋為圖形。 但是，如上圖所示，您可以看到較淺和較深的顏色會影響被視為圖形的內容和被視為地面的內容。

當產品設計師想要突出一個焦點時，尤其是當它處於活動狀態或使用中時，圖形/地面原則非常方便——例如，當一個模態窗口彈出並且站點的其餘部分淡入背景時，或者當單擊搜索欄，它與網站其他部分之間的對比度會增加。

對稱與秩序

對稱和秩序法則也被稱為pragnanz ，德語中的“好身材”一詞。 這個原理的意思是，你的大腦會以盡可能簡單的方式感知模棱兩可的形狀。 例如，奧林匹克標誌的單色版本被視為一系列重疊的圓圈，而不是曲線的集合。

這是格式塔設計原則“ pragnanz ”的另一個很好的例子：

你的大腦會將左側的圖像解釋為矩形、圓形和三角形，即使每個輪廓的輪廓都不完整，因為它們是比整體圖像更簡單的形狀。

共同命運

雖然共同命運最初並未包含在格式塔理論中，但後來被添加了。 在 UX 設計中，它的用處不容忽視。 該原則指出，人們會將指向或正在朝著同一方向移動的事物組合在一起。

在自然界中，我們在鳥群或魚群等事物中看到了這一點。 它們由一堆單獨的元素組成，但因為它們看起來是一個整體，所以我們的大腦將它們組合在一起，並將它們視為一個單一的刺激。

這在 UX 中非常有用，因為動畫效果在現代設計中變得越來越普遍。 請注意，元素實際上不一定要移動才能受益於這一原則，但它們確實必須給人以運動的印象。

用戶體驗設計中的格式塔原則

與任何心理學原理一樣，學習將格式塔的視覺感知原理融入您的設計工作可以極大地改善用戶體驗。 了解人腦是如何工作的，然後利用一個人的自然傾向創造了一種更加無縫的交互，讓用戶在網站上感到舒適，即使這是他們第一次訪問。

格式塔原則相對容易融入到幾乎任何設計中，並且可以快速提升看似隨意的設計，或者像是在爭取用戶注意力的設計，提供無縫、自然的交互，引導用戶採取您希望他們採取的行動。

進一步閱讀 Toptal 設計博客：

• 設計原則：層次結構介紹
• UI 設計最佳實踐和常見錯誤
• 如何在設計中使用強大的格式塔原則（附信息圖）
• 信息架構綜合指南
• 使用這些成功的交互設計原則提升您的用戶體驗