巧用視錯覺 UI更有趣

　　巧妙的利用視錯覺，有效地控制網頁的設覺效果，從而創造出風格更和諧的網頁設計, 同時也能更有效地將你的資訊傳達給使用者。

　　我們每個人在生活中都曾感受過視錯覺（optical illusion）的魅力。

　　視錯覺現象是雙眼跟我們開的一個玩笑，而我們往往還心甘情願地接受我們看到的假象。其實不止如此，視覺錯現象的背後還有一個重要的科學原理——格式塔原理。

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

　　在下面這篇文章中，我們首先會簡單介紹一下格式塔原理中的基本概念，然後再詳細探討一下如何將它們應用於今日的UI設計中。

　　設計中的格式塔原理

　　雖然從名字上看來很像，但“格式塔”這個名稱並非是一個叫做“格式塔”的人的創意。格式塔（Gestalt）是一個德國詞，意思是影象或形式,格式塔學派曾是心理學歷史上一個重要的流派。

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

　　Wertheimer與他的同事們一道發展出一套理論，這套理論在數十年後成為網頁設計的基石之一。這個理論實際上是對亞里士多德那句經典名言的 擴充套件，即在視覺現象中，“整體大於部分之和”。格式塔理論包括一系列基本概念。格式塔原理幾乎適用於所有與視覺有關的領域，但它與UI設計的關係尤其密 切。

　　下面我們就來重點了解一下它的四個特性。

　　1.整體性

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

　　上面的圖片在解釋格式塔原理時經常被採用。在這張圖片中，看圖的人首先會辨認出一條達瑪爾提亞狗，而不是首先認出它的腿，耳朵，頭部，然後把它們在腦中組合成一條狗的樣子。

　　在網頁設計中的應用： 輪廓及線條往往比細節更重要（儘管細節有時也很有創意） 。如果使用者根本就辨認不出哪個圖形才是可以點選的按鈕，那麼這個按鈕設計得再華麗也是失敗的。正如我們在最佳互動設計之道這篇文章中說過的，這種清晰的“定義”能讓使用者更瞭解按鈕的功能。

　　2.具體化

　　由於在現實中我們所接受的視覺刺激很多都是支離破碎的，我們的大腦在處理這些資訊時會自動把缺失的部分補足。

　　例如，上面的圖形事實上都是含糊而不完整的，但我們的大腦依然能辨認的出它們。在圖形A中，我們會得出這樣的印象，即三個不完整的黑色圓形是由一個白色三角形連在一起的。

　　在網頁設計中的應用： “閉合性”對網頁設計而言非常重要 。這意味著你只需提供某樣東西的基本要素，觀看者會自動補全確實的部分。因此你應該在設計中積極靈活地運用負空間（white space），而不應只是把它簡單視作畫面中的留白部分。

　　我們稍後會再次提及這個特性。

　　3.組織性

　　如果在視覺上一件物體有不止一種解釋方法，大腦會在不同的解釋之間切換，因為它無法同時接受兩種解釋。一個觀看者越是集中注意力於某種解釋之上，這種解釋就越有支配性。

　　這也是許多“視錯覺”圖形的理論基礎。例如，在上面的圖形中，觀看者可以將其解釋為一個老婦人，也可以將其解釋為一個年輕女人，但不能同時解釋它的不同意義。

　　在網頁設計中的應用： 儘量避免在網頁設計中使用具有多重意義的圖形 。你想要觀看者看到什麼，就呈現給他們什麼。

　　4.恆常性

　　這是大腦在辨認和理解圖形時採用的另一種策略。這個特性讓我們總是能根據物體的輪廓與基本結構去辨認不同視角，大小和燈光下的物體。

　　這個特性讓我們能夠辨認出表A中的圖形與表B中的圖形所存在的差異，儘管它們外型上很相似。同樣的，我們也能夠理解表A中的圖形其實也是表C和表D中的圖形，儘管它們外型上有些變化。

　　在網頁設計中的應用：這個特性在網頁設計中的體現或許不如其他特性那麼明顯，但它被廣泛應用於驗證碼中，因為目前在視覺恆常性上，人類依然比機器人更有優勢。

　　5條最實用的格式塔原則

　　1954年，這時離Wertheimer注視交叉道口的訊號燈已經過去了幾十年，Rudolf Arnheim 卻根據自己對格式塔原理的理解寫了一本書《藝術與視知覺》。設計師Carolann Bonner也曾指出 格式塔理論的5條最常用的原則:

　　1.相似法則

　　2.圖形-背景關係法則

　　3.組織法則

　　4.閉合法則

　　5.連續法則

　　下面我們就來一個一個探討這些法則。

　　1.相似法則

　　我們傾向於把外觀相似的物體歸為一類。

　　這對於極其注重資訊傳播時效網頁設計而言是個非常有用的啟示，你可以通過建立一系列外觀近似的圖形來迅速而直接地傳達出它們的功能或目的。

　　正如在上圖（設計工作室Green Chameleon的頁面）中看到的，導航圖示看起來雖然各不相同。但由於這些導航圖示在顏色，大小，排列上的近似性，使用者會將它們預設為同一級別的導航功能。

　　這一導航模式特別適用於組織豎排的導航圖示，因為它可以在不犧牲導航功能的情況下，很直觀地把各個導航圖示的功能表達清楚。

　　設計師如果能善用這一法則的話，就可以更有效地傳達資訊和節約頁面空間，從而為使用者提供更好的使用體驗。

　　2.圖形-背景關係法則

　　在使用者看來，頁面中的元素要麼是圖形，要麼是背景。Steven Bradley總結出了三種型別的圖形-背景關係, 如下圖所示：

　　穩定型— (左)可以很明顯地看出，圓形是影象，而灰色空間是背景。

　　可逆型— (中間)空間與背景可以相互轉換，整個頁面顯得十分有靈動之感。

　　模糊型— (模糊型) 圖片與背景的界限模糊不清，觀看者需要自行解釋空間與背景的關係。

　　　Moddeals網站採用是一種較為經典的圖形-背景關係。當頁面中的廣告浮現時，網頁的其餘部分就變變暗，自動轉化為背景。在這種情況下，使用者依然可以拖動頁面，然而廣告還是會作為獨立於背景的一部分停留於原處。

　　而電影宣傳網站Tannbach處理圖形-背景關係的手法就更為微妙。

　　為了突出電影中的人物關係，這個頁面的設計師採用了模糊背景的方式來強化頁面中的兩個人物。 通過對色彩和排版的巧妙運用，左上角的“互動區”成為了事實上的“一級圖形”，而頁面中的那一對男女則成為“次級圖形 ”。這樣一來，使用者既能迅速辨認出頁面中的人物，同時也能夠理解如何使用網站的導航。

　　3.組織法則

　　即便是外觀不同的東西，也可以通過一定的安排使它們更為接近。根據格式塔原理，至少有兩種方法可以加強事物的相似性：

　　閉合狀態將不同的事物集中置於一定的界限內，也會給觀看者造成一種“一致”的印象。

　　密集狀態即便是不同型別的事物，當距離很密集的時候也會具有某種似性。

　　上面這張Facebook的截圖就體現了閉合狀態與密集狀態的作用。

　　整個正文部分--標題，照片，說明，評論等等---都是在同一個方框裡，與灰色的背景形成對比，這一點既體現了閉合狀態，也體現了圖形-背景關係。在正文部分中，“贊”“評論”“分享”等功能選項離得很近，更不用說文字大小，顏色等細節的近似度了。

　　這麼做還有一個理由，就是為了點選方便，因為這種方式可以把使用者與供使用者點選的目標之間的距離拉得更近。

　　4.閉合法則

　　前面我們提到過格式塔原理中的“具體化”現象，閉合法則其實就是這種現象的具體體現。我們的大腦能自動通過新增界線來補全不完整的影象。設計師可以利用這條法則去創作貌似殘缺不全的圖形，在這條法則的指導下，設計師還可以盡情創作出典雅的極簡主義作品。

　　我們以下面Abduzeedo網站的截圖為例來具體分析一下。雖然構成頁面的三部分內容之間並沒有明確的界線，但圖片的排 列方式讓觀看者在大腦中自動形成了某種“網格”。因此，觀看者會把頁面內容看成是獨立的三列，而不是一個混亂的整體。

　　閉合法則也適用於互動設計中。

　　設計師Carolann Bonner解釋說，在Urban Outfitters頁面中，通過利用閉合法則，他幫助使用者省略了一些不必要的步驟，使“新增到購物袋”這一操作變得更為順利。請點選GIF動畫檢視使用者點選“新增到購物袋”之後的操作步驟：

　　1.原來“新增到購物袋”按鈕中的文字會變成“已新增”。

　　2.“購物袋”旁邊的物品數量會隨之更新。

　　3.同時，購物袋選項下會出現一個小小的方形視窗，以視覺形式再次確認使用者已購買的物品。

　　這樣，使用者不用再去開啟購物車確認已新增的物品。通過省略操作步驟，整個互動過程變得更為順暢愉快。

　　5.連續法則

　　這個法則認為，當使用者的目光沿著一系列物體移動時，腦中會形成一個逐漸增強的“定勢”。這個法則使設計中線條的地位顯得格外重要。

　　在上面的圖中，觀看者會看到一條直線和一條曲線而不是一條彎曲的黑線和另一條彎曲的紅線。這說明在視覺中，目光的延續性已經超過了顏色造成的差異。

　　這意味著，在使用者看來，處在同一條直線或曲線上的物體是高度近似的。

　　這一點在導航按鈕的設計中體現得再明顯不過，使用者一般會把同一個水平線上的圖示預設為是同一個級別的操作。

　　下面的截圖取自CreativeBloq, 網站，使用者可以很直觀地理解最上面的一排導航與網頁內容的型別有關。而第二行的導航與內容的條目有關。網站不用專門指出它們的不同，因為根據延續法則，使用者可以自己辨認得出它們的差異。

　　結語

　　理解和掌握格式塔法則能讓你更有效地控制網頁的設覺效果，從而創造出風格更和諧的網頁設計, 同時也能更有效地將你的資訊傳達給使用者。我建議你在自己的設計實踐中綜合運用上面提到的各種法則，你會發現，不久之後，你的網頁設計水準會躍上一個新層次。

　　譯者：劉海靜