必讀的設計理論（一）之格式塔原理
本文大綱主要分爲
1.格式塔的介紹(或者說什麼是格式塔)
2.格式塔的原則
3.格式塔在設計中的應用
4.總結
1.格式塔的介紹(或者說什麼是格式塔)
格式塔由三位德國心理學家在研究 似動現象 的基礎上創立，格式塔源自德語“Gestalt”意思爲“整體、完形”格式塔理論也被稱爲完形理論。核心理論：我們習慣於以規則，有序，對稱和簡單的方式把不同的元素加以簡單的組織，一個不斷組織、簡化、統一的過程，正是通過這一過程，才產生出易於理解、協調的整體。
我們的眼睛和大腦在觀察事物，接收影像刺激的時候，會有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物，有時候也會產生一些「視錯覺」。完形心理學重要的概念便是「整體不等於個體的總合」，舉例來說：當我們在觀察另一個人的時候，並不是先看到他的手，腳，頭，眼睛，耳朵，鼻子，然後把這些視覺特徵組合成一個稱爲「人」的組合。我們是直接的觀察到人這個「整體」，而不是其他器官的「個體的總合」。
二 . 格式塔原則
1.相似性
人們習慣將所看到的東西，按照形狀、大小、顏色、方向等外觀明顯且有某些相似之處的元素自動的整合或集合爲一組
如上圖,看了這個後也來看看在具體實際設計中是怎麼運用的相似原則的吧
支付寶中每個圖標都用統一大小的圖標盒子來規範圖標的視覺大小平衡，其中類型相同的功能點採用了不同的顏色來與不同類型的功能進行區分，以此來告知用戶它們的功能類型差異
美團中金剛區通過大小的方式來區分主金剛區和副金剛區。且副金剛區同樣通過統一大小的圖標盒子來統一圖標的視覺大小平衡，通過顏色來區分業務的不同屬性。
微博底部操作欄“加號”圖標添加了一個圓角矩形來告知用戶這個功能與其他四個功能的差異以及突顯這個功能
2.接近性
這裏的接近性和我們所說親密原則類似，當我們看到各種各樣的物體時，通常會將彼此靠近的元素組織爲一個組。也就是元素與元素之間的距離會影響我們是否將這個（這些）元素組織在一起以及怎樣組織在一起，元素與元素之間距離越近的會被組織在一起，而那些距離相對較遠的則自動劃分在組外。看下圖
再上圖（a）中橫向距離小於縱向距離的時候我們的潛意識會將15個圓分爲三列每列五個，圖（b）中橫向距離大於縱向距離的時候我們的潛意識會將15個圓分爲五行每行三個圓的形式來劃分，而在圖（c）中按照相似原則我們的潛意識會將圓分爲一組、三角形分爲一組、正方形分爲一組，但是通過加大了它們之中橫向的距離後，這個時候我們的感知就會發生變化，進而將圖形分爲五列每一列爲一組如圖（d）.還是一樣我們來看看在實際設計中是怎麼運用的吧
上圖微信中將列表與列表之間距離來區分功能各個功能相關聯的強度，使用戶能更快的找到對應的功能同時界面清晰明瞭。
而上圖愛彼迎中運用接近原則來區分模塊與模塊之間的分割，在這個界面中我們能很快知道“顯示全部”按鈕是屬於上面最受好評房源模塊而不是屬於最具性比的房源這個模塊。再來看看Uber也是同樣的用法就不一一列舉了（留下一個小思考呀）
3.封閉性
當我們在觀看時，並不是一開始就區分某個單一的組成部分，而是將這些單一的組成元素組合起來使其成爲一個易於理解的統一體。當看到某個部分是不完整的時候，我們的大腦會將不完整的信息按照已有的信息填補，並將其視爲一個整體。
上圖運用封閉性原則即使部分沒有了依然不會影響我們對整體的圖形的識別。來看看在界面設計中是如何運用封閉原則的吧
上圖愛彼迎中（圖中）紅框框出來的部分圖片和文字組合居左對齊且右邊間距比較小，我們的大腦很容易這個小的整體補齊爲一個矩形。
圖中貓眼紅框框出來的部分，右側留出一個整體（影片圖片、片名、日期）的一部分出來讓我們知道右邊還有內容可以繼續瀏覽，內容顯示出一部分，我們的眼睛會自然填補失去的信息，意識到右邊還有沒看完的內容，所以纔會有產生右滑的動機可能性。這也正是利用了封閉性的原理
圖中知識星球的底部操作欄icon採用了斷性的風格，即使每個圖標都有缺口我們的大腦會將形狀區於完整的閉合形來解讀，即使圖標具有獨特的風格又對識別性沒有多大的影響。（當然斷線風格的圖標也是有一定的規律的，這裏就不列出來啦下回分解呀（奸笑））
4.連續性
我們的大腦會傾向於將事物看成連續的形體，連續性幫助我們通過構圖來解釋方向和運動。它在對齊元素時發生，它可以幫助我們的眼睛順利地穿過頁面，有助於提高易讀性。連續性原則加強了對分組信息的感知，創建了秩序並引導用戶通過不同的內容細分。——Interaction Design Foundation
如上圖左我們更傾向於將其看成兩條相交的曲線，而不是兩個相交的半圓。然而中間的我們會我們更傾向於將其看成兩條相交的直線，而不是兩個相交的菱形的兩條邊。右邊圖三我們往往傾向於使實現流跟隨相同顏色的軌跡和方向。我們能夠感知到這是兩條弧線而不是多個圓點。還是一樣來看看在界面中運用吧。
上圖中紅色框選中的滑動器灰色部分表示滑動條藍色表示進度，我們可感知到圓球可沿着灰色條可以繼續滑動，儘管整個滑動器被圓球覆蓋了小部分。右圖中（綠框中）一排小圓點形成按照一定的規律排列，形成一條視覺流，我們感知到一共有五個banner 且按照左右滑動的方式瀏覽。這就是連續性的運用我們會將這些灰點和白點視爲一個整體，而非單個的灰點和白點。
5.主體與背景的關係
也稱爲圖/地法則，該法則指出我們在感知事物的時候，總是自動的將視覺區域分爲主體和背景。一旦圖像中的某個部分符合作爲背景特徵的話，我們的視覺感知就不會把它們作爲主體焦點。根據這樣的原理在用戶界面設計當中，我們就可以通過一些處理將圖像中的某些部分變成背景，這樣可以顯示更多的信息或者將用戶的焦點轉移。——Interaction Design Foundation
也就是在整體的視覺條件下，某一個元素相比於其他元素更爲凸顯（大小、顏色、形態、紋理….）我們大腦會將其判斷爲主題而其他以外的元素則視爲背景，並且習慣於把小的那個看作爲背景之上的主體。這裏來看看在設計中是怎麼運用的吧
上圖（左）在原有的界面上天界了一個黑色透明遮罩層（蒙版），使用戶的視覺焦點轉移到新的主體（白色高亮區域）被蒙版遮罩的頁面視覺層級被減弱了，我們的注意力集中在了主體區域
上圖中（微博）才用了全局毛玻璃效果來幫助用戶瞭解當前所在頁面的環境，同時達到了傳遞信息的目的，用戶也橫容易區分主體與背景之間的關係。
6.對稱原則
對稱的原則指出，當我們感知物體時，我們傾向於將他們視爲圍繞這個物體形成的對稱形狀。大多數物體可以被分爲兩個或者兩個以上對稱的部分。當我們看到兩個對稱的未連接元素時，我們無意識地將它們整合成一個連貫的對象（或感知）。對象越相似，它們就越傾向於分組。
如上圖（左）CSC芬蘭的標誌，儘管圖形的方向和顏色都不同，但是我們還是會將它視爲一個整體。
右圖中出現的圖形我們會感知他爲三組括號符號或者是一組花括號加上一個中括號的一部風來感知，而不是把它們看爲六個獨立的圖形來感知。儘管有些地方按照了親密原則進行了排列但是我們任然會這麼感知。
7.共同命運
這一原則運用在動效上居多，共同命運原則指出在整體的視覺條件下，某些物體，或是同時、同速、同方嚮往一個地方移動，這些個別物體會被視爲一組（這裏就不做過多解釋瞭如果有興趣的話可以 http://www.scholarpedia.org/article/Gestalt_principles#fig:Todorovic-Gestalt_principles-Figure_2.jpg ）
總結這篇文章我們一共講解了格式塔的7大原則：1.相似性 2.接近性 3.封閉性 4.連續性 5.主體與背景的關係 6.對稱原則 7.共同命運，這些原則在我們設計過程中不是當一存在的，他們可以互相影響並且存在一個界面中。這些原則也不僅僅侷限在界面設計、包括平面設計…
如有錯誤之處還望多多指教，我會及時糾正，在此謝謝大家啦。
如要了解更多可查看： http://www.clevelandconsultinggroup.com/articles/emergence-gestalt-approach-to-change.php
