UI設(shè)計(jì)教程-解讀設(shè)計(jì)中的格式塔原理

UI設(shè)計(jì)教程系列三：解讀設(shè)計(jì)中的格式塔原理視錯(cuò)覺是一種“美麗誤會(huì)”，在它的背后存在著格式塔原理。在UI設(shè)計(jì)中有意識(shí)的運(yùn)用格式塔原理可以讓設(shè)計(jì)變得更加高效、合理。我們每個(gè)人在生活中都曾感受過(guò)視錯(cuò)覺（opticalillusion）的魅力。視錯(cuò)覺現(xiàn)象是雙眼跟我們開的一個(gè)玩笑，而我們往往還心甘情愿地接受我們看到的假象。其實(shí)不止如此，視覺錯(cuò)現(xiàn)象的背后還有一個(gè)重要的科學(xué)原理——格式塔原理。格式塔原理解釋了人們?nèi)绾我砸曈X方式感覺物體，以及圖像的結(jié)構(gòu)、視角、大小等要素是如何影響我們的視覺的。我們首先簡(jiǎn)單介紹一下格式塔原理中的基本概念，然后再詳細(xì)探討一下如何將它們應(yīng)用于今日的UI設(shè)計(jì)中。設(shè)計(jì)中的格式塔原理雖然從名字上看來(lái)很像，但“格式塔”這個(gè)名稱并非是一個(gè)叫做“格式塔”的人的創(chuàng)意。格式塔（Gestalt）是一個(gè)德國(guó)詞，意思是圖像或形式，格式塔學(xué)派曾是心理學(xué)歷史上一個(gè)重要的流派。據(jù)說(shuō)在1910年的某天，心理學(xué)家MaxWertheimer看到一個(gè)鐵路交叉道口的信號(hào)燈交替閃爍，產(chǎn)生了這么一個(gè)錯(cuò)覺：他覺得這些信號(hào)燈是在一個(gè)圓周之內(nèi)運(yùn)動(dòng)，事實(shí)上，這些信號(hào)燈只是按預(yù)定的時(shí)間間隔閃爍而已。這個(gè)視覺與現(xiàn)實(shí)的差異觸發(fā)了Wertheimer的靈感。Wertheimer與他的同事們一道發(fā)展出一套理論，這套理論在數(shù)十年后成為網(wǎng)頁(yè)設(shè)計(jì)的基石之一。這個(gè)理論實(shí)際上是對(duì)亞里士多德那句經(jīng)典名言的擴(kuò)展，即在視覺現(xiàn)象中，“整體大于部分之和”。格式塔理論包括一系列基本概念。格式塔原理幾乎適用于所有與視覺有關(guān)的領(lǐng)域，但它與UI設(shè)計(jì)的關(guān)系尤其尤其密切。下面我們就來(lái)重點(diǎn)了解一下它的四個(gè)特性。格式塔圖形特性整體性當(dāng)我們辨認(rèn)一樣物體時(shí)，我們傾向于首先辨別它的輪廓，然后將這個(gè)輪廓?dú)w類為已知的事物。在此之后，我們才會(huì)去注意到這件物體的細(xì)節(jié)及各個(gè)組成部分。上面的圖片在解釋格式塔原理時(shí)經(jīng)常被采用。在這張圖片中，看圖的人首先會(huì)辨認(rèn)出一條達(dá)瑪爾提亞狗，而不是首先認(rèn)出它的腿、耳朵、頭部，然后把它們?cè)谀X中組合成一條狗的樣子。在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用：輪廓及線條往往比細(xì)節(jié)更重要。如果用戶根本就辨認(rèn)不出哪個(gè)圖形才是可以點(diǎn)擊的按鈕，那么這個(gè)按鈕設(shè)計(jì)得再華麗也是失敗的。正如我們?cè)谧罴呀换ピO(shè)計(jì)之道這篇文章中說(shuō)過(guò)的，這種清晰的“定義”能讓用戶更了解按鈕的功能。具體化由于在現(xiàn)實(shí)中我們所接受的視覺刺激很多都是支離破碎的，我們的大腦在處理這些信息時(shí)會(huì)自動(dòng)把缺失的部分補(bǔ)足。例如，上面的圖形事實(shí)上都是含糊而不完整的，但我們的大腦依然能辨認(rèn)得出它們。在圖形A中，我們會(huì)得出這樣的印象，即三個(gè)不完整的黑色圓形是由一個(gè)白色三角形連在一起的。在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用：“閉合性”對(duì)網(wǎng)頁(yè)設(shè)計(jì)而言非常重要。這意味著你只需提供某樣?xùn)|西的基本要素，觀看者會(huì)自動(dòng)補(bǔ)全確實(shí)的部分。因此你應(yīng)該在設(shè)計(jì)中積極靈活地運(yùn)用負(fù)空間（whitespace），而不應(yīng)只是把它簡(jiǎn)單視作畫面中的留白部分。組織性如果在視覺上一件物體有不止一種解釋方法，大腦會(huì)在不同的解釋之間切換，因?yàn)樗鼰o(wú)法同時(shí)接受兩種解釋。一個(gè)觀看者越是集中注意力于某種解釋之上，這種解釋就越有支配性。這也是許多“視錯(cuò)覺”圖形的理論基礎(chǔ)。例如，在上面的圖形中，觀看者可以將其解釋為一個(gè)老婦人，也可以將其解釋為一個(gè)年輕女人，但不能同時(shí)解釋它的不同意義。在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用：盡量避免在網(wǎng)頁(yè)設(shè)計(jì)中使用具有多重意義的圖形。你想要觀看者看到什么，就呈現(xiàn)給他們什么。恒常性這是大腦在辨認(rèn)和理解圖形時(shí)采用的另一種策略。這個(gè)特性讓我們總是能根據(jù)物體的輪廓與基本結(jié)構(gòu)去辨認(rèn)不同視角、大小和燈光下的物體。這個(gè)特性讓我們能夠辨認(rèn)出表A中的圖形與表B中的圖形所存在的差異，盡管它們外型上很相似。同樣的，我們也能夠理解表A中的圖形其實(shí)也是表C和表D中的圖形，盡管它們外型上有些變化。在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用：這個(gè)特性在網(wǎng)頁(yè)設(shè)計(jì)中的體現(xiàn)或許不如其他特性那么明顯，但它被廣泛應(yīng)用于驗(yàn)證碼中，因?yàn)槟壳霸谝曈X恒常性上，人類依然比機(jī)器人更有優(yōu)勢(shì)。5條最實(shí)用的格式塔原則1954年，這時(shí)離Wertheimer注視交叉道口的信號(hào)燈已經(jīng)過(guò)去了幾十年，RudolfArnheim卻根據(jù)自己對(duì)格式塔原理的理解寫了一本書《藝術(shù)與視知覺》。設(shè)計(jì)師CarolannBonner也曾指出格式塔理論的5條最常用的原則:1.相似法則2.圖形-背景關(guān)系法則3.組織法則4.閉合法則5.連續(xù)法則下面我們就來(lái)一個(gè)一個(gè)探討這些法則。1.相似法則我們傾向于把外觀相似的物體歸為一類。這對(duì)于極其注重信息傳播時(shí)效的網(wǎng)頁(yè)設(shè)計(jì)而言是個(gè)非常有用的啟示，你可以通過(guò)創(chuàng)建一系列外觀近似的圖形來(lái)迅速而直接地傳達(dá)出它們的功能或目的。正如在上圖中看到的，導(dǎo)航圖標(biāo)看起來(lái)雖然各不相同。但由于這些導(dǎo)航圖標(biāo)在顏色、大小、排列上的近似性，用戶會(huì)將它們默認(rèn)為同一級(jí)別的導(dǎo)航功能。這一導(dǎo)航模式特別適用于組織豎排的導(dǎo)航圖標(biāo)，因?yàn)樗梢栽诓粻奚鼘?dǎo)航功能的情況下，很直觀地把各個(gè)導(dǎo)航圖標(biāo)的功能表達(dá)清楚。設(shè)計(jì)師如果能善用這一法則的話，就可以更有效地傳達(dá)信息和節(jié)約頁(yè)面空間，從而為用戶提供更好的使用體驗(yàn)。2.圖形-背景關(guān)系法則在用戶看來(lái)，頁(yè)面中的元素要么是圖形，要么是背景。StevenBradley總結(jié)出了三種類型的圖形-背景關(guān)系,如下圖所示：●穩(wěn)定型——（左）可以很明顯地看出，圓形是圖像，而灰色空間是背景?！窨赡嫘汀ㄖ虚g）空間與背景可以相互轉(zhuǎn)換，整個(gè)頁(yè)面顯得十分有靈動(dòng)之感?！衲：汀：停﹫D片與背景的界限模糊不清，觀看者需要自行解釋空間與背景的關(guān)系。Moddeals網(wǎng)站采用的是一種較為經(jīng)典的圖形-背景關(guān)系。當(dāng)頁(yè)面中的廣告浮現(xiàn)時(shí)，網(wǎng)頁(yè)的其余部分就變暗，自動(dòng)轉(zhuǎn)化為背景。在這種情況下，用戶依然可以拖動(dòng)頁(yè)面，然而廣告還是會(huì)作為獨(dú)立于背景的一部分停留于原處。而電影宣傳網(wǎng)站Tannbach處理圖形-背景關(guān)系的手法就更為微妙。為了突出電影中的人物關(guān)系，這個(gè)頁(yè)面的設(shè)計(jì)師采用了模糊背景的方式來(lái)強(qiáng)化頁(yè)面中的兩個(gè)人物。通過(guò)對(duì)色彩和排版的巧妙運(yùn)用，左上角的“互動(dòng)區(qū)”成為了事實(shí)上的“一級(jí)圖形”，而頁(yè)面中的那一對(duì)男女則成為“次級(jí)圖形”。這樣一來(lái)，用戶既能迅速辨認(rèn)出頁(yè)面中的人物，同時(shí)也能夠理解如何使用網(wǎng)站的導(dǎo)航。3.組織法則即便是外觀不同的東西，也可以通過(guò)一定的安排使它們更為接近。根據(jù)格式塔原理，至少有兩種方法可以加強(qiáng)事物的相似性：●閉合狀態(tài)將不同的事物集中置于一定的界限內(nèi)，也會(huì)給觀看者造成一種“一致”的印象?！衩芗癄顟B(tài)即便是不同類型的事物，當(dāng)距離很密集的時(shí)候也會(huì)具有某種相似性。上面這張F(tuán)acebook的截圖就體現(xiàn)了閉合狀態(tài)與密集狀態(tài)的作用。整個(gè)正文部分——標(biāo)題，照片，說(shuō)明，評(píng)論等等——都是在同一個(gè)方框里，與灰色的背景形成對(duì)比，這一點(diǎn)既體現(xiàn)了閉合狀態(tài)，也體現(xiàn)了圖形-背景關(guān)系。在正文部分中，“贊”“評(píng)論”“分享”等功能選項(xiàng)離得很近，更不用說(shuō)文字大小、顏色等細(xì)節(jié)的近似度了。這么做還有一個(gè)理由，就是為了點(diǎn)擊方便，因?yàn)檫@種方式可以把用戶與供用戶點(diǎn)擊的目標(biāo)之間的距離拉得更近。4.閉合法則前面我們提到過(guò)格式塔原理中的“具體化”現(xiàn)象，閉合法則其實(shí)就是這種現(xiàn)象的具體體現(xiàn)。我們的大腦能自動(dòng)通過(guò)添加界線來(lái)補(bǔ)全不完整的圖像。設(shè)計(jì)師可以利用這條法則去創(chuàng)作貌似殘缺不全的圖形，在這條法則的指導(dǎo)下，設(shè)計(jì)師還可以盡情創(chuàng)作出典雅的極簡(jiǎn)主義作品。我們以下面Abduzeedo網(wǎng)站的截屏為例來(lái)具體分析一下。雖然構(gòu)成頁(yè)面的三部分內(nèi)容之間并沒有明確的界線，但圖片的排列方式讓觀看者在大腦中自動(dòng)形成了某種“網(wǎng)格”。因此，觀看者會(huì)把頁(yè)面內(nèi)容看成是獨(dú)立的三列，而不是一個(gè)混亂的整體。閉合法則也適用于交互設(shè)計(jì)中。5.連續(xù)法則這個(gè)法則認(rèn)為，當(dāng)用戶的目光沿著一系列物體移動(dòng)時(shí)，腦中會(huì)形成一個(gè)逐漸增強(qiáng)的“定勢(shì)”。這個(gè)法則使設(shè)計(jì)中線條的地位顯得格外重要。在上面的圖中，觀看者會(huì)看到一條直線和一條曲線而不是一條彎曲的黑線和另一條彎曲的紅線。這說(shuō)明在視覺中，目光的延續(xù)性已經(jīng)超過(guò)了顏色造成的差異。這意味著，在用戶看來(lái)，處在同一條直線或曲線上的物體是高度近似的。這一點(diǎn)在導(dǎo)航按鈕的設(shè)計(jì)中體現(xiàn)得再明顯不過(guò)，用戶一般會(huì)把同一個(gè)水平線上的圖標(biāo)默認(rèn)為是同一個(gè)級(jí)別的操作。下面的截圖取自CreativeBloq網(wǎng)站，用戶可以很直觀地理解最上面的一排導(dǎo)航與網(wǎng)頁(yè)內(nèi)容的