俗話說“耳聽為虛，眼見為實”，但….有時候眼睛也會欺騙大腦。

先看點有意思的東西吧，下圖是網絡上一張引起強烈爭議的 gif 圖像，這兩個圓圈到底是不是在移動？

會動的圓圈

上下滑動頁面的同時看下圖，就能看見“音浪”在晃~~

赫林錯覺

圖中共有 12 個黑點，歡迎能同時看到所有黑點的同學評論區自證~

赫爾曼柵格錯覺

事實情況是，“圓圈”要比“豎線”更高，也許尺子才能告訴你真相。

繆勒-里爾幻覺

實不相瞞，左右兩個色塊的顏色其實是一樣的。

同時對比錯覺

實踐出真理，原來眼睛真的在騙我。

賈斯特羅幻覺

以上現象通常稱之為“視錯覺”，它象是眼睛跟我們開的一個玩笑，而我們往往還樂于接受這些假象。其實“視錯覺”現象的背后有很多理論解釋，感興趣的同學可以搜尋公開資料了解。其中有一個重要的科學原理——格式塔原理（Gestalt是一個德國詞，意為圖像或形式）。

格式塔原理解釋了人們如何以視覺感知物體，以及圖像的結構、視角、大小等要素是如何影響我們的視覺的。

原理與應用

據說在 1910 年的某天，心理學家 Max Wertheimer 看到一個鐵路交叉道口的信號燈交替閃爍，產生了這么一個錯覺：他覺得這些信號燈是在一個圓周之內運動，事實上，這些信號燈只是按預定的時間間隔閃爍而已。這個視覺與現實的差異觸發了 Wertheimer 的靈感，并形成了一套完整理論。

下面我們就來簡單了解一下它的幾個重要特性與設計應用。

1. 輪廓&延續感

當辨認一樣物體時，我們傾向于首先辨別它的輪廓，然后將這個輪廓歸類為已知的經驗或事物。在此之后，我們才會去注意到這件物體的細節及各個組成部分。

在下圖中，觀察者會首先辨認出一條斑點狗，而不是首先認出它的頭、腿、耳、嘴等細節部位之后再在腦中組合成一條狗的樣子。

一只正在溜達的狗子

與之類似，當用戶的目光沿著一系列物體移動時，腦中會形成一個逐漸增強的“定勢”。下圖中，觀察者會看到一條直線和一條曲線而不是一條彎曲的黑線和另一條彎曲的紅線。在視覺感知中，目光的延續性已經超過了顏色造成的差異。

交錯的直線和曲線

在界面設計中，輪廓感和目光動線往往比細節更重要，如果用戶根本就辨認不出圖像之間的關系，那么這個界面設計得再華麗也是失敗的。

卡片結構常常在任務型表單設計中被使用，它能帶給用戶更清晰的步驟感知，并快速識別每個模塊的信息類型。

卡片式結構

經典的 T 形結構被廣泛運用于導航、菜單類設計，對于復雜信息歸類有很好的效果。

T 形構圖

2. 平衡錯覺

有時候圖形位置會欺騙你的眼睛，尤其是那些具有復雜幾何以及比例比不一致或不對稱的特殊圖形。比如將三角形完全居中的放置在容器內看起來也會像是發生了偏移。會出現這種現象的原因是由于三角形分割錯覺的影響。

如下圖當三角形質心與容器中心相重合的時候看起來會更“居中”。

三角形分割錯覺

在進行排版或者字體設計的時候，往往更多的會依賴于直覺，而不是參數和邏輯，如果僅僅是從尺寸數值上保持一致，也會使一個整體當中的不同個體顯得不一樣大，因此我們需要對同一整體下的個體尺寸進行調整，已經達到光學平衡。

如下圖中在沒有對個體進行單獨調整時所有字母看上去并不平衡。

視覺平衡調整

淘寶圖標在設計時會將圖形形態定義出一個相對模糊的范圍，然后進行尺寸、位置的微調，確保圖形的“質心”相對于容器居中，從而讓所有圖標在同等尺寸下視覺感受一致。

淘寶圖標設計基礎規則

3. 視覺補全

我們的大腦往往會在接收到碎片化信息之后會自動把缺失的部分進行補全。下圖中的圖形在事實上是不完整的，但并不妨礙我們看到一個球體和一個柱狀體。

事實“缺失”的圖形

這種現象原理被廣泛應用在 logo、廣告等設計中，利用“負空間”給與“完整”圖形所不能帶來的視覺沖擊感和想像空間。

Federal Express 的標志如今仍然被認為是最經典的 logo 設計之一，發現里面的“負形”空間了么？

Federal Express Logo

著名的 WWF（世界自然基金會）熊貓徽標。

WWF logo

配合故事演繹，可以產生更具內涵的意境。

29CM logo

KFC 將產品與對應的行為進行了巧妙地結合。

KFC 廣告

Koleston Naturals 是以“天然染色”為推廣定位的染發劑產品。設計師將女性的長發和五官鏤空，通過鏤空處可以看到海和天際線，隨著日出日落可以看到長發顏色隨自然而變。巧妙的將產品的“天然染色”訴求和大自然結合。

Koleston Naturals 染發劑廣告

與視頻的豐富表現性相比，靜態海報對于展現更深層次意境的時候比較局限，利用負形空間表現藏于表面之下的含義是一個比較不錯的手法。

多重含義海報

在其他領域

格式塔的設計理論很多時候會被應用在比如工業、建筑等設計領域，常常是各路大師們的慣用手法。

火爆網紅打卡界的成都太古里裸眼 3D 大屏。

成都太古里裸眼 3D 廣告屏

放進去的紅酒居然消失了。

Pinetti Wine Rack

就算移動觀察角度，也還是會一直被這只小恐龍注視。

裸眼 3D 小恐龍

當盛有調料的時會出現立體效果的味碟，滿滿的驚喜。

what should cialis cost

曾經風靡一時的手機小游戲，充分利用了視錯覺構建的矛盾世界。

紀念碑谷游戲截圖

對視錯覺感興趣的小伙伴還可以去線下場館實地體驗，

Museum of Illusions 幻覺藝術博物館短短 3 年時間風靡全球 19 個國家在紐約、柏林、迪拜等多個城市排名 TOP5 的“明星博物館”，據說上海也有開哦~

Museum of Illusions 幻覺藝術博物館

寫在最后

視錯覺的相關理論非常多，在設計上的應用可以說是存在于生活的方方面面，它既能幫助設計師避免表達與認知發生偏差，也能在創意領域中發揮非常大的作用。

歡迎關注「淘寶設計」公眾號：