巧妙的利用視錯覺，有效地控制網(wǎng)頁的設(shè)覺效果，從而創(chuàng)造出風(fēng)格更和諧的網(wǎng)頁設(shè)計, 同時也能更有效地將你的信息傳達(dá)給用戶。

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

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

　　格式塔原理解釋了人們?nèi)绾我砸曈X方式感覺物體，以及圖像的結(jié)構(gòu)，視角，大小等要素是如何影響我們的視覺的。

　　在下面這篇文章中，我們首先會簡單介紹一下格式塔原理中的基本概念，然后再詳細(xì)探討一下如何將它們應(yīng)用于今日的UI設(shè)計中。

設(shè)計中的格式塔原理

　　雖然從名字上看來很像，但“格式塔”這個名稱并非是一個叫做“格式塔”的人的創(chuàng)意。格式塔(Gestalt)是一個德國詞，意思是圖像或形式,格式塔學(xué)派曾是心理學(xué)歷史上一個重要的流派。

　　據(jù)說在1910年的某天，心理學(xué)家Max Wertheimer看到一個鐵路交叉道口的信號燈交替閃爍，產(chǎn)生了這么一個錯覺：他覺得這些信號燈是在一個圓周之內(nèi)運動，事實上，這些信號燈只是按預(yù)定的時間間隔閃爍而已。這個視覺與現(xiàn)實的差異觸發(fā)了Wertheimer的靈感。

　　Wertheimer與他的同事們一道發(fā)展出一套理論，這套理論在數(shù)十年后成為網(wǎng)頁設(shè)計的基石之一。這個理論實際上是對亞里士多德那句經(jīng)典名言的擴展，即在視覺現(xiàn)象中，“整體大于部分之和”。格式塔理論包括一系列基本概念。格式塔原理幾乎適用于所有與視覺有關(guān)的領(lǐng)域，但它與UI設(shè)計的關(guān)系尤其密切。

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

1.整體性

　　當(dāng)我們(人類)辨認(rèn)一樣物體時，我們傾向于首先辨別它的輪廓，然后將這個輪廓歸類為已知的事物。在此之后，我們才會去注意到這件物體的細(xì)節(jié)及各個組成部分。

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

　　在網(wǎng)頁設(shè)計中的應(yīng)用：輪廓及線條往往比細(xì)節(jié)更重要(盡管細(xì)節(jié)有時也很有創(chuàng)意)。如果用戶根本就辨認(rèn)不出哪個圖形才是可以點擊的按鈕，那么這個按鈕設(shè)計得再華麗也是失敗的。正如我們在交互設(shè)計之道這篇文章中說過的，這種清晰的“定義”能讓用戶更了解按鈕的功能。

2.具體化

　　由于在現(xiàn)實中我們所接受的視覺刺激很多都是支離破碎的，我們的大腦在處理這些信息時會自動把缺失的部分補足。

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

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

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

3.組織性

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

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

　　在網(wǎng)頁設(shè)計中的應(yīng)用：盡量避免在網(wǎng)頁設(shè)計中使用具有多重意義的圖形。你想要觀看者看到什么，就呈現(xiàn)給他們什么。

4.恒常性

　　這是大腦在辨認(rèn)和理解圖形時采用的另一種策略。這個特性讓我們總是能根據(jù)物體的輪廓與基本結(jié)構(gòu)去辨認(rèn)不同視角，大小和燈光下的物體。

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

　　在網(wǎng)頁設(shè)計中的應(yīng)用：這個特性在網(wǎng)頁設(shè)計中的體現(xiàn)或許不如其他特性那么明顯，但它被廣泛應(yīng)用于驗證碼中，因為目前在視覺恒常性上，人類依然比機器人更有優(yōu)勢。

5條最實用的格式塔原則

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

　　1.相似法則

　　2.圖形-背景關(guān)系法則

　　3.組織法則

　　4.閉合法則

　　5.連續(xù)法則

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

1.相似法則

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

　　這對于極其注重信息傳播時效網(wǎng)頁設(shè)計而言是個非常有用的啟示，你可以通過創(chuàng)建一系列外觀近似的圖形來迅速而直接地傳達(dá)出它們的功能或目的。

　　正如在上圖(設(shè)計工作室Green Chameleon的頁面)中看到的，導(dǎo)航圖標(biāo)看起來雖然各不相同。但由于這些導(dǎo)航圖標(biāo)在顏色，大小，排列上的近似性，用戶會將它們默認(rèn)為同一級別的導(dǎo)航功能。

　　這一導(dǎo)航模式特別適用于組織豎排的導(dǎo)航圖標(biāo)，因為它可以在不犧牲導(dǎo)航功能的情況下，很直觀地把各個導(dǎo)航圖標(biāo)的功能表達(dá)清楚。

　　設(shè)計師如果能善用這一法則的話，就可以更有效地傳達(dá)信息和節(jié)約頁面空間，從而為用戶提供更好的使用體驗。

2.圖形-背景關(guān)系法則

　　在用戶看來，頁面中的元素要么是圖形，要么是背景。Steven Bradley總結(jié)出了三種類型的圖形-背景關(guān)系, 如下圖所示：

　　穩(wěn)定型 — (左)可以很明顯地看出，圓形是圖像，而灰色空間是背景。

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

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

　　Moddeals網(wǎng)站采用是一種較為經(jīng)典的圖形-背景關(guān)系。當(dāng)頁面中的廣告浮現(xiàn)時，網(wǎng)頁的其余部分就變變暗，自動轉(zhuǎn)化為背景。在這種情況下，用戶依然可以拖動頁面，然而廣告還是會作為獨立于背景的一部分停留于原處。

　　而電影宣傳網(wǎng)站Tannbach處理圖形-背景關(guān)系的手法就更為微妙。

　　為了突出電影中的人物關(guān)系，這個頁面的設(shè)計師采用了模糊背景的方式來強化頁面中的兩個人物。通過對色彩和排版的巧妙運用，左上角的“互動區(qū)”成為了事實上的“一級圖形”，而頁面中的那一對男女則成為“次級圖形”。這樣一來，用戶既能迅速辨認(rèn)出頁面中的人物，同時也能夠理解如何使用網(wǎng)站的導(dǎo)航。

3.組織法則

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

　　閉合狀態(tài)將不同的事物集中置于一定的界限內(nèi)，也會給觀看者造成一種“一致”的印象。

　　密集狀態(tài)即便是不同類型的事物，當(dāng)距離很密集的時候也會具有某種似性。

　　上面這張Facebook的截圖就體現(xiàn)了閉合狀態(tài)與密集狀態(tài)的作用。

　　整個正文部分--標(biāo)題，照片，說明，評論等等---都是在同一個方框里，與灰色的背景形成對比，這一點既體現(xiàn)了閉合狀態(tài)，也體現(xiàn)了圖形-背景關(guān)系。在正文部分中，“贊”“評論”“分享”等功能選項離得很近，更不用說文字大小，顏色等細(xì)節(jié)的近似度了。

　　這么做還有一個理由，就是為了點擊方便，因為這種方式可以把用戶與供用戶點擊的目標(biāo)之間的距離拉得更近。

4.閉合法則

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

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

　　閉合法則也適用于交互設(shè)計中。

　　設(shè)計師Carolann Bonner解釋說，在Urban Outfitters頁面中，通過利用閉合法則，他幫助用戶省略了一些不必要的步驟，使“添加到購物袋”這一操作變得更為順利。請點擊GIF動畫查看用戶點擊“添加到購物袋”之后的操作步驟：

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

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

　　3.同時，購物袋選項下會出現(xiàn)一個小小的方形窗口，以視覺形式再次確認(rèn)用戶已購買的物品。

　　這樣，用戶不用再去打開購物車確認(rèn)已添加的物品。通過省略操作步驟，整個互動過程變得更為順暢愉快。

5.連續(xù)法則

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

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

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

　　這一點在導(dǎo)航按鈕的設(shè)計中體現(xiàn)得再明顯不過，用戶一般會把同一個水平線上的圖標(biāo)默認(rèn)為是同一個級別的操作。

　　下面的截圖取自CreativeBloq, 網(wǎng)站，用戶可以很直觀地理解最上面的一排導(dǎo)航與網(wǎng)頁內(nèi)容的類型有關(guān)。而第二行的導(dǎo)航與內(nèi)容的條目有關(guān)。網(wǎng)站不用專門指出它們的不同，因為根據(jù)延續(xù)法則，用戶可以自己辨認(rèn)得出它們的差異。

　　結(jié)語理解和掌握格式塔法則能讓你更有效地控制網(wǎng)頁的設(shè)覺效果，從而創(chuàng)造出風(fēng)格更和諧的網(wǎng)頁設(shè)計, 同時也能更有效地將你的信息傳達(dá)給用戶。我建議你在自己的設(shè)計實踐中綜合運用上面提到的各種法則，你會發(fā)現(xiàn)，不久之后，你的網(wǎng)頁設(shè)計水準(zhǔn)會躍上一個新層次。

分享文章：巧用視錯覺 UI更有趣
分享URL：http://jinyejixie.com/news33/160033.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、Google、自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)