起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識眼見不一定為實：聊聊視錯覺的原理和設計應用
編輯導語：你有沒有想過，眼見其實不一定為實在？有時候，一些錯覺會欺騙我們的大腦。本文作者講述了一些有趣的視錯覺的原理和設計應用，一起來看看吧。
俗話說“耳聽為虛，眼見為實”，但….有時候眼睛也會欺騙大腦。
先看點有意思的東西吧，下圖是網(wǎng)絡上一張引起強烈爭議的 gif 圖像，這兩個圓圈到底是不是在移動？
會動的圓圈
上下滑動頁面的同時看下圖，就能看見“音浪”在晃~~
赫林錯覺
圖中共有 12 個黑點，歡迎能同時看到所有黑點的同學評論區(qū)自證~
赫爾曼柵格錯覺
事實情況是，“圓圈”要比“豎線”更高，也許尺子才能告訴你真相。
繆勒-里爾幻覺
實不相瞞，左右兩個色塊的顏色其實是一樣的。
同時對比錯覺
實踐出真理，原來眼睛真的在騙我。
賈斯特羅幻覺
以上現(xiàn)象通常稱之為“視錯覺”，它象是眼睛跟我們開的一個玩笑，而我們往往還樂于接受這些假象。其實“視錯覺”現(xiàn)象的背后有很多理論解釋，感興趣的同學可以搜尋公開資料了解。其中有一個重要的科學原理——格式塔原理（Gestalt是一個德國詞，意為圖像或形式）。
格式塔原理解釋了人們如何以視覺感知物體，以及圖像的結構、視角、大小等要素是如何影響我們的視覺的。
一、原理與應用
據(jù)說在 1910 年的某天，心理學家 Max Wertheimer 看到一個鐵路交叉道口的信號燈交替閃爍，產(chǎn)生了這么一個錯覺：他覺得這些信號燈是在一個圓周之內運動，事實上，這些信號燈只是按預定的時間間隔閃爍而已。這個視覺與現(xiàn)實的差異觸發(fā)了 Wertheimer 的靈感，并形成了一套完整理論。
下面我們就來簡單了解一下它的幾個重要特性與設計應用。
1. 輪廓&延續(xù)感
當辨認一樣物體時，我們傾向于首先辨別它的輪廓，然后將這個輪廓歸類為已知的經(jīng)驗或事物。在此之后，我們才會去注意到這件物體的細節(jié)及各個組成部分。
在下圖中，觀察者會首先辨認出一條斑點狗，而不是首先認出它的頭、腿、耳、嘴等細節(jié)部位之后再在腦中組合成一條狗的樣子。
一只正在溜達的狗子
與之類似，當用戶的目光沿著一系列物體移動時，腦中會形成一個逐漸增強的“定勢”。下圖中，觀察者會看到一條直線和一條曲線而不是一條彎曲的黑線和另一條彎曲的紅線。在視覺感知中，目光的延續(xù)性已經(jīng)超過了顏色造成的差異。
交錯的直線和曲線
在界面設計中，輪廓感和目光動線往往比細節(jié)更重要，如果用戶根本就辨認不出圖像之間的關系，那么這個界面設計得再華麗也是失敗的。
卡片結構常常在任務型表單設計中被使用，它能帶給用戶更清晰的步驟感知，并快速識別每個模塊的信息類型。
卡片式結構
經(jīng)典的 T 形結構被廣泛運用于導航、菜單類設計，對于復雜信息歸類有很好的效果。
T 形構圖
2. 平衡錯覺
有時候圖形位置會欺騙你的眼睛，尤其是那些具有復雜幾何以及比例比不一致或不對稱的特殊圖形。比如將三角形完全居中的放置在容器內看起來也會像是發(fā)生了偏移。會出現(xiàn)這種現(xiàn)象的原因是由于三角形分割錯覺的影響。
如下圖當三角形質心與容器中心相重合的時候看起來會更“居中”。
三角形分割錯覺
在進行排版或者字體設計的時候，往往更多的會依賴于直覺，而不是參數(shù)和邏輯，如果僅僅是從尺寸數(shù)值上保持一致，也會使一個整體當中的不同個體顯得不一樣大，因此我們需要對同一整體下的個體尺寸進行調整，已經(jīng)達到光學平衡。
如下圖中在沒有對個體進行單獨調整時所有字母看上去并不平衡。
視覺平衡調整
淘寶圖標在設計時會將圖形形態(tài)定義出一個相對模糊的范圍，然后進行尺寸、位置的微調，確保圖形的“質心”相對于容器居中，從而讓所有圖標在同等尺寸下視覺感受一致。
淘寶圖標設計基礎規(guī)則
3. 視覺補全
我們的大腦往往會在接收到碎片化信息之后會自動把缺失的部分進行補全。下圖中的圖形在事實上是不完整的，但并不妨礙我們看到一個球體和一個柱狀體。
事實“缺失”的圖形
這種現(xiàn)象原理被廣泛應用在 logo、廣告等設計中，利用“負空間”給與“完整”圖形所不能帶來的視覺沖擊感和想像空間。
Federal Express 的標志如今仍然被認為是最經(jīng)典的 logo 設計之一，發(fā)現(xiàn)里面的“負形”空間了么？
Federal Express Logo
著名的 WWF（世界自然基金會）熊貓徽標。
WWF logo
配合故事演繹，可以產(chǎn)生更具內涵的意境。
29CM logo
KFC 將產(chǎn)品與對應的行為進行了巧妙地結合。
KFC 廣告
Koleston Naturals 是以“天然染色”為推廣定位的染發(fā)劑產(chǎn)品。設計師將女性的長發(fā)和五官鏤空，通過鏤空處可以看到海和天際線，隨著日出日落可以看到長發(fā)顏色隨自然而變。巧妙的將產(chǎn)品的“天然染色”訴求和大自然結合。
Koleston Naturals 染發(fā)劑廣告
與視頻的豐富表現(xiàn)性相比，靜態(tài)海報對于展現(xiàn)更深層次意境的時候比較局限，利用負形空間表現(xiàn)藏于表面之下的含義是一個比較不錯的手法。
多重含義海報
二、在其他領域
格式塔的設計理論很多時候會被應用在比如工業(yè)、建筑等設計領域，常常是各路大師們的慣用手法。
火爆網(wǎng)紅打卡界的成都太古里裸眼 3D 大屏。
成都太古里裸眼 3D 廣告屏
放進去的紅酒居然消失了。
Pinetti Wine Rack
就算移動觀察角度，也還是會一直被這只小恐龍注視。
裸眼 3D 小恐龍
當盛有調料的時會出現(xiàn)立體效果的味碟，滿滿的驚喜。
what should cialis cost
曾經(jīng)風靡一時的手機小游戲，充分利用了視錯覺構建的矛盾世界。
紀念碑谷游戲截圖
對視錯覺感興趣的小伙伴還可以去線下場館實地體驗，
Museum of Illusions 幻覺藝術博物館短短 3 年時間風靡全球 19 個國家在紐約、柏林、迪拜等多個城市排名 TOP5 的“明星博物館”，據(jù)說上海也有開哦~
Museum of Illusions 幻覺藝術博物館
三、寫在最后
視錯覺的相關理論非常多，在設計上的應用可以說是存在于生活的方方面面，它既能幫助設計師避免表達與認知發(fā)生偏差，也能在創(chuàng)意領域中發(fā)揮非常大的作用。
作者： 淘寶設計
原文鏈接：https://mp.weixin.qq.com/s/Wkcx3A0hPJ9hSL0NVNs3yQ
本文由 @淘寶設計 授權發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。
題圖來自 Pixabay，基于CC0協(xié)議。
眼見不一定為實，耳聽不一定為實，所以實踐才是檢驗認識真理性的唯一標準。