網(wǎng)頁設(shè)計理論：對比和等同

等同和對比，聯(lián)系與分別，歸類和不歸類等都是能將元素中相同或不同的元素加以區(qū)別的方式?；谒鼈兯休d的信息，我們希望等同的元素能發(fā)生某種聯(lián)系，用以表明它們在某一方面的相似性。我們同樣也希望不同的元素加以區(qū)分，以顯示它們分屬不同的類別。

　　等同和對比是通過元素之間所呈現(xiàn)的關(guān)系表現(xiàn)出來的，如果兩個元素有著某種聯(lián)系，可以確定這兩個元素必定有相同的特性。當(dāng)然，兩個不同元素也必定看上去不同。

　　基礎(chǔ)特性

　　你是如何表達(dá)元素間的等同和對比性的?是的，從它們的基礎(chǔ)特性中表現(xiàn)出來。

　　那么，什么是元素的基礎(chǔ)特性呢?基礎(chǔ)特性就是指的元素本身所固有的特點(diǎn)。舉例來說，這個元素是什么顏色?它有多大?它是什么形狀?

　　這些特性都試圖傳遞著關(guān)于元素的最本質(zhì)的信息。如果一個標(biāo)題看上去比另一個標(biāo)題更大，那么我們就會預(yù)估第一個標(biāo)題更加重要。我們也會把那些尖銳的凹凸不平的東西視為危險信號。

　　通常，元素的一類特質(zhì)通過與另一元素的同類特質(zhì)相比較才具有意義，上面關(guān)于標(biāo)題就是這樣一個例子。一個標(biāo)題必須與另一個標(biāo)題或另外一片文字相比較才能凸顯它的重要性。在這里，大小成為一個很重要的對比特質(zhì)。通過比較，元素才得以表達(dá)出它們之間的等同和對比。

　　另外一種情況是，我們讓幾個元素在視覺上出現(xiàn)相同的特質(zhì)，讓這些元素成為一組同類元素。如果一個網(wǎng)頁上出現(xiàn)兩個元素：兩個紅色圓圈，用戶自然就會對此產(chǎn)生好奇，為什么它們都是紅色?為什么都是圓圈?這會引發(fā)出的結(jié)論是也許它們不止是外觀上的等同，還有其他更深的聯(lián)系。元素外觀的等同也會讓人聯(lián)想到它們會攜帶相似的信息。

　　同樣的，如果我們讓兩個元素外觀上不同，那么它們表達(dá)出的就是兩個完全不同的元素，它們的意義也有所不同。

　　任何可以被改變的元素特性，都可以讓元素變得等同或不同。下面所列出的元素特性便是如此：

　　尺寸

　　形狀

　　顏色

　　賦值

　　紋理

　　位置

　　方向

　　一個長方形和一個圓形的形狀對比很明顯，而兩個紅色元素在顏色上具有一致性。一個紅色長方形和一個紅色圓形就會出現(xiàn)形狀各異而顏色相同的情況。你怎樣平衡元素中的等同和不同的元素特性，這將決定你的元素要與用戶溝通些什么。

　　注意：基礎(chǔ)特性是區(qū)分類似與不同的基本方法，但還有其他方式可以對它們加以區(qū)分：元素實(shí)際上所承載的信息內(nèi)容。例如“停”和“走”這兩個字的對比，“停止”和“停下”這兩個詞的相似。圖片對比文字，長文章對應(yīng)短文章，等等。

　　對比

　　當(dāng)人類看到不同的元素會本能地產(chǎn)生緊張的反應(yīng)，這是自然進(jìn)化的生存機(jī)制，以使我們能迅速辨認(rèn)出威脅，讓我們快速反應(yīng)出是否需要立刻飛奔回到安全的地方。

　　我們的這種分辨異類的能力使“對比”這一方式變得特別強(qiáng)大。凡對比定會引起注意。它就是吸引眼球的方法。想要讓某個元素得到注意，那就讓它在視覺外觀區(qū)別于其他元素即可。如此一來，我們便能制造出視覺焦點(diǎn)。事實(shí)上，正因?yàn)樽屧貜沫h(huán)境中脫穎而出的方法是如此簡單，我們也不難猜測，如果想要你的設(shè)計變得更有趣，這或許也是一個最有效方法。

　　對比的確可以增強(qiáng)吸引力。它也能在兩種元素間建立起分界。舉例來說，主要內(nèi)容和花絮內(nèi)容的不同背景色就能輕松將它們區(qū)分開來，讓用戶一看便知哪里是主要內(nèi)容，哪里是花絮。

　　對比也能起強(qiáng)調(diào)的作用，高亮顯示某一重點(diǎn)元素和內(nèi)容。越是明顯的不同，對比越明顯，其重要性就越強(qiáng)。

　　例如，有兩種不同的文字標(biāo)注方式：加粗和斜體。加粗通常會讓對比更為明顯。即使是遠(yuǎn)距離一瞥也能比斜體文字更易辨認(rèn)。

　　如果你想要區(qū)分兩個元素，那就將放大它們之間的對比。相信你不希望讓用戶自己來判斷它們是否不同吧?確保對比直觀且顯而易見。不要有模糊不清的地方，讓人產(chǎn)生困惑。不要用16px的文字去對比15px的文字。人們通常不會注意到細(xì)微的差別，就算是注意到，也會發(fā)生誤判。‘

　　但是，也請不要對比得太過火。慎用對比。如果所有元素都有區(qū)別，都在爭搶注意力，那么，其實(shí)就等于沒有對比一樣。過多的干擾產(chǎn)生視覺混亂。

　　太多的對比也會打破設(shè)計中的和諧，造成不必要的緊張和凌亂。也許在某些特別的設(shè)計中需要用到它，但是平時絕對少碰為妙。首先確認(rèn)哪些元素需要突出，然后讓它們與其他元素發(fā)生對比。

　　對比與格式塔

　　格式塔完型規(guī)律在某方面也是依賴于等同和對比的。對于圖案背景和突出焦點(diǎn)來說，對比是特別重要的。

　　圖案背景

　　當(dāng)我們看到一個對象，我們第一件事就是去區(qū)分哪里是背景哪里是主角。這對關(guān)系決定了這一對象中其他元素的角色內(nèi)容。主角與背景必須要有顯而易見的對比，否則我們將很難區(qū)分它們。

　　焦點(diǎn)

　　焦點(diǎn)是指那些最具吸引和趣味的元素。設(shè)計它們時就需要讓它們從周圍環(huán)境中凸顯出來。這一對比也讓他們脫穎而出從而獲得注意。在一個對象中最突出的就是這個對象的首要元素，而在此對象中，那些次要突出的就是焦點(diǎn)。

　　等同

　　我們?nèi)祟惖牧硪粋€生存機(jī)制，除了讓我們察覺不同，也讓我們注意到相同。這讓我們能辨認(rèn)出哪些是我們應(yīng)該相信的，從而區(qū)別于潛在的危險。對等同有著較強(qiáng)的覺知力，這就是為什么人類能很快認(rèn)出各種模式。模式幫助我們理解周圍的世界，提供信息并且快速掌握規(guī)律，當(dāng)形成習(xí)慣就能變作我們的直覺和本能。

　　當(dāng)我們設(shè)計兩個或多個同類元素時，我們就在暗示，如果其中一個為真，另外那幾個等同的元素也為真。如果一個元素重要，其他幾個也同樣重要。如果其中一個元素可點(diǎn)擊，那么其他幾個視覺上類似的元素也可點(diǎn)擊。這就是我們這樣在大段文字當(dāng)中識別出哪里是鏈接。視覺對比使得鏈接文字和其他文字不同吸引你的注意，同時，其他有鏈接的文字的類似也提醒了你，如果其中一個鏈接可點(diǎn)擊，其他的也一樣可以。

　　同等能顯示出幾個元素間存在某種聯(lián)系。它能給你的設(shè)計帶來熟悉和一致感。

　　同等讓我們組織信息能力日臻完美。當(dāng)我們環(huán)顧視覺環(huán)境，并要對其加以理解，我們自然而然會將所有事物進(jìn)行分類，以此掌握更多的信息，用記憶的形式存儲起來。讓它變成我們的長期記憶，以備以后分析問題解決問題而使用。

　　將相同信息的地方設(shè)計得外觀上也相似，這將會幫助用戶處理和理解信息，而這也正是我們設(shè)計的目標(biāo)。

　　元素中的基礎(chǔ)特性共同點(diǎn)越多，它們看上去就越等同，從而也就有更多用戶認(rèn)為它們是相同的。它們看上去在某方面成為同類，即使它們只有其中唯一一個特性相同。

　　我們用等同去構(gòu)建系統(tǒng)性和模式。任何兩個元素的等同都會暗示著它們也許是一個系統(tǒng)。如果再在這個系統(tǒng)里增加一些同類元素，那么就會演變成為一種模式，在視覺上它會形成圖案、紋理或者具有節(jié)奏感的視覺效果。

　　不是所有看上去相似的信號都是等同的。如下圖所示，你是通過形狀或是顏色來分類圖形?你看見的是一組圓形和一組方形圖形?或者，你看見的是紅色圖形和藍(lán)色圖形?

　　你也許首先注意到顏色，將元素劃分為紅色和藍(lán)色。這就說明，顏色所傳遞的等同的信號比形狀更強(qiáng)。這也不是完全絕對的，舉個例子，一些紅綠色盲的人就不會注意到顏色的區(qū)別，他們首先注意到的是圖形的形狀。

　　等同和格式塔

　　我們又一次提到格式塔定律，每個格式塔都是關(guān)于我們?nèi)绾尾煊X到物體間的等同和對比。下面是一些被認(rèn)為顯示出等同的要點(diǎn)。

　　封閉

　　在一個整體中不同的元素都是這個整體的一部分

　　對稱和順序

　　對稱的元素兩相互屬

　　統(tǒng)一性的聯(lián)結(jié)

　　視覺上有聯(lián)系的元素間的等同

　　共同區(qū)域

　　在一個相同的區(qū)域里元素的等同

　　鄰近

　　在一個相同的區(qū)域里相續(xù)元素的等同

　　連續(xù)

　　在空間中以某種節(jié)奏或頻率出現(xiàn)的元素等同

　　共同命運(yùn)

　　在運(yùn)動中的一致

　　平行

　　在方向上的一致

　　等同和對比之間的關(guān)系

　　等同和對比用以表達(dá)元素間的關(guān)系。一個獨(dú)立的元素沒有意義。一個元素總是與處于同一環(huán)境下的其他元素發(fā)生著聯(lián)系。

　　一個大圓的一角有一個小圓，這樣的設(shè)計暗示著什么?一段銀灰色文字比其他文字縮進(jìn)更多這又試圖說明什么?

　　可以這樣說，等同和對比就好像是一個天平，一端是完全不同，一端是完全相同。大多數(shù)情況都是介于兩者之間的，我們設(shè)計出的發(fā)生關(guān)系的元素特性也是部分而已，并非全部。等同和對比就是表達(dá)發(fā)生在這個天平兩極之間的關(guān)系。

　　即便我沒有說得很清楚，你都可以知道等同和對比是彼此互補(bǔ)的。它們彼此相依而存在，對比是等同所缺少的，而等同也是對比所缺少的。其互補(bǔ)程度全憑其在天平上的位置。

　　當(dāng)你將這兩者結(jié)合在一起來思考就會感受到它們的作用。你可以只用顏色這一元素特性來制造出區(qū)別，給幾個元素用上同一顏色就讓它們發(fā)生了聯(lián)系，然后用另一顏色又讓另外幾個元素發(fā)生了聯(lián)系，然后這兩組元素由于顏色的不同又發(fā)生了對比。

　　色彩代碼就是一個很好例子，它是一種非常有效的編碼方式，讓寫代碼的人即使看一眼也能很快理解代碼的結(jié)構(gòu)。

　　當(dāng)一切都等同，無疑會讓你感到厭倦。如果一切不同，又會讓你煩躁。優(yōu)秀的設(shè)計應(yīng)該讓這兩者得到很好的平衡，然后又能清楚表達(dá)出想要傳遞的信息。

　　網(wǎng)頁設(shè)計中等同和對比的實(shí)例

　　等同和對比在每個網(wǎng)站都可以看到，它們共存在網(wǎng)頁設(shè)計中。你可以試想如果一個網(wǎng)站沒有運(yùn)用到對比，我們怎么可能在相同的背景色和字型字號中，認(rèn)出哪里是內(nèi)容、哪里是標(biāo)題?就算是一行字或一個符號的不同，也能使它們的擁有對比的樣式。

　　下面我列舉的網(wǎng)頁設(shè)計中的對比和等同的實(shí)例，通過這些實(shí)例，你能更好的掌握兩者的關(guān)系，有助于日后你在設(shè)計時針對等同和對比的處理。

　　DAVID SIMON

　　第一個我要提及的網(wǎng)站是DAVID SIMON的網(wǎng)站，采用了不同背景色作為對比，很好的區(qū)分了網(wǎng)頁中不同的組成部分。深色Logo在白色背景下也顯得尤為突出。

　　圖片與背景完美的對比，吸引眼球。顯示文章發(fā)表時間的背景色，顯示文章評論數(shù)量的背景色和大寫字母以及頁面菜單的背景色都和周圍環(huán)境形成了對比，凸顯著它們的重要性。

　　網(wǎng)站菜單中的鏈接都有相同的樣式，會跳轉(zhuǎn)到相對應(yīng)的文章。這些都和其他下劃線的鏈接不同。文章的標(biāo)題和主體的字體不同，但從整個網(wǎng)站來看它們的對比是固定的。

　　主體內(nèi)容中的鏈接很顯眼，盡管設(shè)計師看起來試圖讓它不那么突出，以免打擾到閱讀流。標(biāo)題如果能再突出一點(diǎn)會更好，雖然現(xiàn)在已經(jīng)有了比較清晰的對比。

　　MIKE KUS

　　MIKE KUS的網(wǎng)站主頁主要展示mike的不同作品項(xiàng)目。整個頁面比較空，但請注意設(shè)計師是如何突出主要焦點(diǎn)的。文字與背景圖的顏色相互對比，而畫框又與背景的紋理相對比。

　　注意：在這篇文章寫過后，mike的網(wǎng)站已經(jīng)改了版，你可以看下圖參考。

　　這些圖畫的唯一對比特點(diǎn)是色彩的不同，而其他信息都使用了相同的深灰。

　　同樣的，請注意這些畫是怎樣被裱框起來的，這暗含著它們有著某種共性。在這里，它們都代表著項(xiàng)目。請注意它們的背景，都是相同的一片磚砌墻面。這很明確地表達(dá)了它們的角色。

　　在MIKE的“關(guān)于”頁面，MIKE本人的照片占據(jù)了大半個屏幕，而這也與其他元素形成鮮明對比。左邊那個藍(lán)色的“get in touch”的按鈕是頁面中唯一彩色的元素。你也許不會聯(lián)系MIKE，但如果你僅僅因?yàn)椴恢涝趺绰?lián)系他而沒有聯(lián)系他，這個按鈕將發(fā)揮極大的作用。同樣的，在整個網(wǎng)站中其他所有按鈕都應(yīng)是藍(lán)色。

　　ELECTRIC PULP

　　ELECTRIC PULP網(wǎng)站的logo是一個紅色的，具有現(xiàn)代設(shè)計風(fēng)格的圓形。它很容易就與下面我們看到的網(wǎng)頁其他元素都形成了對比。請注意在導(dǎo)航中，顏色是如何發(fā)揮作用來指示當(dāng)前頁面。

　　網(wǎng)站里所有的標(biāo)題都是大號、加粗的大寫字體。標(biāo)題和主體內(nèi)容之間的對比又具有一致性。在點(diǎn)擊進(jìn)入“NOTES”的一級頁面，會看到輪播按鈕的背景色與整個頁面的背景色相對比。

　　頁面中的所有的大部分按鈕都是紅色(這是一種被常用來裝飾元素的顏色)，當(dāng)鼠標(biāo)劃過去會變?yōu)樗{(lán)色。然而，在“work”頁面，第一個按鈕剛剛與前面所述的相反，而是藍(lán)色按鈕，當(dāng)鼠標(biāo)滑過會變?yōu)榧t色。這是否是一個失誤呢?還是設(shè)計者有意為之?盡管如此，我認(rèn)為這個網(wǎng)站的對比原則運(yùn)用得十分巧妙。

　　LOWDI

　　最后一個要提及的網(wǎng)站是LOWDI,下圖是網(wǎng)站的首頁，請注意設(shè)計師是如何使用顏色來表達(dá)對比和一致性的。

　　顏色能清楚地描畫出不同部分。整個顏色的搭配明快。請注意這里顯示價格的那塊背景色是怎樣凸顯出來，而與此同時也提醒了下方的產(chǎn)品頁面。

　　總結(jié)

　　對比和等同具有不同的功能，它們之間的關(guān)系通過相互影響的程度而發(fā)生變化。你不會單獨(dú)看到它們的存在，它們總是相互依存的。改變其中一個，意味著也會改變另一個。

　　表現(xiàn)一個設(shè)計中的對比和等同是視覺溝通的第一步，是用戶明確網(wǎng)站意圖的首要步驟。

　　總之，對比和等同就是設(shè)計元素里的視覺信號，有所不同將會吸引我們的注意力，相似的元素又會提醒我們它們的關(guān)聯(lián)性。同樣布局的對比目的是為了讓這一組元素與另一組元素相同，從而達(dá)到整體的和諧一致。