製作的幾乎所有圖形設計作品都能夠在我們所知道的格式塔原則的認知中找到一些列的方式和原則。在一個設計師的圖形處理中沒有比全方面的掌握這些原則更有效的方法了。由此類推，對於那些沒有很好的掌握這些原則的人，當他們面對一一個個設計項目和去設計畫廊網站瀏覽的時候就會理解不透徹，因為只能做出過時的陳腐的主題和布局。但是客戶相比我們（對設計）模糊的理解，他們值得更好的對待。如果你沒有準備好，那就得下定決心學習「對格式塔原則的認知」吧！
為什麼我們要學習這個原則呢？冒著像聽深夜電視廣告的風險，對格式塔原則的認知其實能夠幫助我們從設計中提取出我們腦海裡猜想的那些東西。例如，一旦網頁內容被定義好了，那麼溝通目的也就清楚了。格式塔原則使得怎樣將元素分配到頁面上顯得清晰，什麼時候以及為什麼要使用線條描繪，背景陰影，一定的傾斜角度，或則什麼時候以及為什麼要在一個框欄裡將元素進行編組（或則不編組）。一旦你理解了格式塔原則，設計就將會變得更加簡單，而你所產生的想法得到的效果將會好得多。
（格式塔原則）的名字使得它聽起來稍顯複雜，但是其實格式塔原則並不比你搖頭晃腦難多少！事實上，這些原則中的每一條都能被解釋成一條簡短的句子。但是通常情況下，它們都被在某些方面都被定義成使得大多數人會愣住（看到這些原則的時候，因為不理解）。好了，在這兒，我想要通過網頁的實際例子來支持我以一種直接關聯到網頁設計師做什麼的方式來將它們呈現給你。這篇文章是「更好的解釋格式塔原則」的一系列相關文章的第一篇！
首先，在這兒有一些對于格式塔原則的認知的定義：
圖底關係
元素被理解成不是圖形（視線聚焦的明顯的元素）就是背景（除了中心圖形以外的背景或則圖片）。
普雷格郎茨原則
人傾向於將模糊的、複雜的圖片清晰的解釋成簡單的和完整的圖片。（描述了離散的感覺輸入被知覺為整體的方式和原因）
1923年，韋特海默發表了一篇關於知覺組織的論文，提出了關於知覺組織的「普雷格郎茨原則」（prinCiple of Pr gnanz），描述了離散的感覺輸入被知覺為整體的方式和原因。他描述的這個原則包括幾條子原則：（1）相似原則，即感覺域中的一部分和其他部分的屬性相似；（2）接近原則，即感覺域中的一部分和其他部分接近；（3）閉合原則，即感覺域中的一部分構成閉合的形狀；（4）共同命運原則，即感覺域中的一部分和其他部分變化的方式相同，比如同時運動。這些原則在當代的心理學教科書中作為認知神經科學和感覺心理生理學的活躍話題依然在被探討。
一致的連通性
具有統一的視覺特徵的元素被理解為比那些具有離散的視覺特徵的元素更具有相關性。
良好的延續性
排成一條直線或者曲線的元素比那些沒有排成直線或者曲線的元素有更好的相關性。
封閉性
當人看著一個孤立的元素以複雜的方式排列的時候，第一感覺就是這是一個單獨的，可辨識的圖案。
親密性
彼此相互靠近的元素比那些彼此隔得很遠的元素被認為關聯性更強。
相似性
相似的元素被認為比那些不相似的元素更具關聯性。
…
你會注意到這些原則中的大多數都似乎不是彼此有變化就是彼此聯繫緊密。對此，有更好的解釋是，因為所有的這些原則都依賴於關係。人的認知受關係主導；事物是怎樣相似的和不相似的，他們是怎樣彼此對立或者混雜的，事物是怎樣排列來展示層次的和受上下文內容影響的。對於設計師而言，最後的句子已經做出了相當棒的總結，那就是在工作中，你通過做什麼來使得你的設計漂亮以及在設計中可以掌控自己的設計。讓我們都加入進來吧!來學學怎樣讓格式塔原則在你的工作中服務於你的設計。
圖底關係
元素被理解成不是圖形（視線聚焦的明顯的元素）就是背景（除了中心圖形以外的背景或則圖片）。
它為什麼重要？
我首先講到的是這個原則那是因為很有可能這是（格式塔原則）最為重要的一個原則。當人們直接注視頁面的時候，確定圖底關係也是人們要做的第一件事。新的元素進入視線，我們的大腦就需要有一個理解的基礎。我們就不得不確定哪一個元素是圖（馬上要求關注和注意力）和哪一個元素是底（現在正確並不是那麼重要，但是確實提供了背景）。
這個過程對人來說是至關重要的，並且在一定程度上能避免一些不必要的麻煩！（我僅僅是走在葉子和雜草上或是我即將遇到一條響尾蛇呢？）——這句話我的理解是我的理解是正確的呢？還是有了誤解？當然，這也能夠確保我們更加優化我們的認知，因此我們並不是突然地遇到一些元素或者忽視一些緊鄰的東西和重要性。我們對于格式塔原則的認知賦予我們通過每一個彼此聯繫的目標來組織我們看到的事物的能力。這個簡短而親切的說法是：它能夠讓我們確定我們被認為看到了什麼和我們可能忽視了什麼。
` 在大多數其情況下，我們立刻做這些根本沒有任何效果，就像我們經常在相似的環境看著相似的東西。但是當我們試著去看一些不相似的東西的時候，特別是當它是一個設計過的網頁的時候，圖底關係的線索決定著我們的經驗是否是有效的。這個的成功是印證設計師的管理能力的。
特殊的 ：
在一張網頁設計的上下文之間我們的圖底關係的認知幫助我們去辨別結構和內容，理解功能可見性，並且理解在二維介質層面關於深度的微妙性和重要性。一名設計師能夠使用大量的視覺技巧和造型設計去得到這樣的環境，通過結合重要的思路去建立圖底關係。一種就是能夠利用普遍的圖底關係認知慣例和創造性的方式「使布局讓人迷糊」，為的就是增加興趣點。讓我們看看一些例子吧。
例子 ：
圖底關係的簡單例子
在上面的非常簡單的例子中，有兩張不同的圖片，儘管這兩張圖片都有著各自鮮明的布局。左邊的圖片表現的是在白色背景上顯示一塊灰色的圖片；右邊的圖片表現的則是帶有一個白色色塊的灰色圖片（兩者都是位於白色背景上表現出來的）。這兩種關係都是由形成對照和人的經驗的普遍慣例所確定的…當然，也依靠一些別的東西。
這個略顯複雜的例子的就是為了確定什麼是內容？ and 什麼是背景？
上面這張摘自Nathan Ford’s 網頁的圖片，向我們展示的是一個複雜的包括圖片，文本，顏色和形狀的組合。但是，這樣一張圖確實很奏效！因為接觸這些不同的元素能夠讓我們快速的定義什麼是連續的內容（圖）以及什麼是連續的結構和背景（底）。
有效的和沒效的導航結構的例子
依靠於圖底關係的「功能可見性」
上面的例子中，我們必須確定好圖底關係就是為了展示「功能可見性」。這兩個部件都是確認按鈕，但是在左邊的這個按鈕看上去就像它僅僅是整個頁面結構的另外一部分或者是背景陰影。而在右邊的這個按鈕則是給我們按或者點擊的提示。其中的陰影和高光使得圖底關係更加清晰，明確。
陰影表明深度並將背景劃分成兩個層次
在「底」元素上存在有多種層次的層級。在上面的例子中，Chuck Mallott 在他的網頁的主頁上有效的聯繫了「底的深度」的層次關係，因此，層級的層次感也通過一個下陰影的使用得到體現。白色的區域是「在頂部」，而這個陰影區域是在更低的層次。陰影和更低層次的組合形成對比，使得陰影在整個頁面層級上略微次要的重要性得到了很好的聯繫。
圖底創意 ：
Veerle Pieters』 Duoh! Site
Veerle Pieters』 Duoh! Site做了一個圖片和文本的精彩組合，似乎就像圖和底交叉表現！而且，帶有內容的光標的交互有時候會引起圖和底的轉換。整個的效果都是刺激和有趣的。這是一個似乎打破了規則（圖底關係）的例子，但是，確切的講，這僅僅是遵循了更深層次的圖底關係原則，並且收到了好的效果。
David Lam’s site
David Lam』 main page 似乎在某些方面是帶有大量元素的複雜組合。但是通過對比和考慮到人們慣有的圖底關係的理解。David有精心製作了一個設計，我們能夠快速「模糊」背景然後看到一個非常乾淨的設計和開放式的布局。採用焦點聚焦的方法是在這裡所使用的一個技巧。
Hernab Miller’s ThoughtPile site
Thoughtpile.org site 有一個有趣的設計和運用圖底關係的交互技巧。在這個網頁中，這些關係似乎都在不斷的變化著，似乎底元素轉變成了交互性的圖元素。效果很有趣，但是這種做法很誇張（頻繁的變動是基於Flash網頁的）。當正進行這種變化的時候，你就會更加清楚的知道你的觀眾和品牌。這個特別的例子似乎表現得非常好！
原文地址
http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
作者 ：Andy Rutledge 翻譯 ：醉小帥