控制好網(wǎng)頁的視覺效果 理解和掌握格式塔法則是關(guān)鍵

　　在視覺現(xiàn)象中，“整體大于部分之和”。格式塔理論包括一系列基本概念。格式塔原理幾乎適用于所有與視覺有關(guān)的領(lǐng)域，但它與UI設(shè)計(jì)的關(guān)系尤其密切。接下來，中國設(shè)計(jì)網(wǎng)的筆者為設(shè)計(jì)師們介紹五條最實(shí)用的格式塔法則。

　　1、相似法則

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

　　正如在上圖(設(shè)計(jì)工作室Green Chameleon的頁面)中看到的，導(dǎo)航圖標(biāo)看起來雖然各不相同。但由于這些導(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àn)。

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

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

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

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

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

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

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

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

　　3、組織法則

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

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

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

　　4、閉合法則

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

　　5、連續(xù)法則

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

　　理解和掌握格式塔法則能讓你更有效地控制網(wǎng)頁的設(shè)覺效果，從而創(chuàng)造出風(fēng)格更和諧的網(wǎng)頁設(shè)計(jì), 同時(shí)也能更有效地將你的信息傳達(dá)給用戶。