建站常識

理解網(wǎng)頁中的視覺層次

2010-10-15 22:17:00

原文來自 Webdesign Tuts+ 原創(chuàng)翻譯 – 設(shè)計理論

視覺層次是高效率網(wǎng)頁設(shè)計的重要原則之一。這篇文章將向大家介紹為什么設(shè)計一個具有視覺層次的網(wǎng)頁是這么重要。在了解這些原則之后，你可以在自己的基礎(chǔ)設(shè)計練習(xí)中運用到這些知識。

設(shè)計=交流

作為核心：設(shè)計整體就是視覺交流。作為一個高效率的設(shè)計師，你必須有這個能力清楚地將你的設(shè)計思想傳達出來。人是易變的，如果你給了他們巨大的信息量，這有相當高的可能性100個人中99人都會厭倦去看它。為什么呢？因為人們都是天性的視覺欣賞者，而不是數(shù)據(jù)處理者。

要了解這個，知道一些人們?nèi)绾慰创挛锏姆椒ㄊ呛苤匾?。人們并不等于所謂的“平等機會主義者”。他們不僅僅是收集視覺信息和處理數(shù)據(jù)，于此同時，大腦還會整理他們看到的這些東西的“視覺關(guān)系”。

讓我們看看下面兩個普通的圓：

很大可能上，你并不把它們僅當做“兩個圓”看待，而是將他們看做“一個黑色的圓和一個比較小的紅色的圓”。

原因是非常簡單的：當呈現(xiàn)出某些像這兩個圓一樣簡單的東西的時候，人們往往不僅僅看到兩個普通的圓，他們將會搜尋這兩個圓之間的不同點。某個圓或許更大，或者更小，或者有顏色，或者其他的不同點。這些不同點給予我們區(qū)別物體的信息并且給予圖形特定的意義。

讓我們來看一張更為復(fù)雜的圖片：

增加的這些復(fù)雜成分強迫我們?nèi)シ治鏊麄冎g的關(guān)系。相同和不同點變成了我們思考這些問題的思維框架。比例向我們傳遞了“一個物體相對其他來說離我們更近，或者是，這個物體起到一個相對其他物體而言的支配地位”；顏色的不同告訴我們每一個物體可能有自己獨特的特點，這個特點將其與其他物體區(qū)分開來。這樣一個簡單的圖片用最基本的方法卻向我們傳達了如此多的信息。

…Understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.

讓我們回過頭來看網(wǎng)頁設(shè)計；因為網(wǎng)頁設(shè)計是有關(guān)視覺信息交流，明白“用戶們將會自己組織設(shè)計內(nèi)容的關(guān)系”成為我們高效設(shè)計的核心。一次丟出大量信息的方式看上去已經(jīng)沒意思了，作為網(wǎng)頁設(shè)計師，我們?nèi)蝿?wù)是將這些沒有經(jīng)過處理的信息劃分成一塊一塊切題的美味以供用戶們更方便的閱讀。更為重要的，我們需要明白：信息的高效交流是網(wǎng)頁背后的關(guān)鍵。

初看視覺層次有成千上百的解釋說明人們?yōu)槭裁磿鶕?jù)關(guān)系來看待問題；如果你要追溯到人類學(xué)上去討論它的話，你可能做出結(jié)論：遠古時代狩獵為生的人們在思維上引導(dǎo)現(xiàn)在的人類去關(guān)注這些事物之間的聯(lián)系，這是一種生存技巧。

#p#

可能一個更便于理解的解釋，這就是我們大腦整理信息的方式：將相似的可視元素整理成一個組，將他們放進具有一定意義的類型當中就像人類固有的吃喝等習(xí)性一樣。換句話說，事實上大腦里的信息都是按照某種層次整理出來的，這樣交流起來比沒有整理信息要有效率的多。
看看下面的兩張圖片：

在上面的例子中，我們可以看到最基本的文本層次運用。兩張圖片當中用到的例子內(nèi)容上沒有任何區(qū)別，但是它是如何戲劇化地讓人們改變了理解方式并消化這些內(nèi)容的呢？當我們以文字排版為例討論視覺層次的時，這就是我們要分析的問題。文字組織的接近性、篇幅比例和相似程度使讀者將下級內(nèi)容自然地歸入標題和分段。層次給予標題更多的意義，不僅僅是信息，而且也使內(nèi)容更容易被接受。

好，這只是一個最基本的例子對吧。讓我們更深入的討論其他的例子，讓大家明白如何運用這些最基本的守則，成為一個老練的設(shè)計師。

層次構(gòu)建工具箱

視覺層次非常重要，但是如何準確的創(chuàng)建層次效果？我們尋找的“工具”正如木匠的工具箱——錘子、釘子、鋸子等等——你如何運用它們才是最重要的。

1、大小

較大的物體具有更大的吸引力。將尺寸的控制作為制造層次的工具是一個非常高效的方法去引導(dǎo)讀者的視線。在設(shè)計中將尺寸和重要性結(jié)合起來是非常關(guān)鍵的。最大的元素大部分情況都具有最大的重要性，與此同時，最小的元素應(yīng)該是最不重要的。

2、顏色

顏色是一個很有意思的工具，他可以在組織上和個性兩方面起到作用。醒目、對比強烈的顏色在特殊的元素中將會引起更大的關(guān)注（例如按鈕、錯誤信息或者超鏈接）。當作為一個體現(xiàn)個性的工具時，顏色可以延伸到體現(xiàn)更精練的層次感上；用到豪華、舒適的顏色將給頁面帶來感情上的吸引力。顏色可以影響網(wǎng)頁的每一個角落，從商標到形象。色彩應(yīng)用在視覺層次設(shè)計中可以做到信息分類的效果，就像下面的例子：

#p#

3、對比

對比體現(xiàn)出相對的重要性。字體大小上戲劇性的變化將傳遞出某個消息的重要性或者需要某些特別關(guān)注。從較亮的背景轉(zhuǎn)換到一個較暗的背景將較快的區(qū)分核心內(nèi)容與頁腳內(nèi)容。

4、對齊

對齊體現(xiàn)出元素們的組織。甚至可以簡單到僅僅用“主欄”和“側(cè)欄”區(qū)分。但對齊也能夠在視覺層次上起到更多更復(fù)雜的作用。考慮，舉個例子，放在頁面左上角的內(nèi)容的力量。因為用戶多半將那個地方的信息與簡介、賬號、購物車等等相聯(lián)系。放在那個地方的東西被賦予了某種“官方”性。對齊如果用特定的方式也會激起用戶的興趣，例如下面的例子：

#p#

5、反復(fù)

重復(fù)體現(xiàn)了元素之間的關(guān)聯(lián)性；如果所有段落的文字都是灰色的，當一個用戶看到一塊新的灰色文字時，他也許認為這是其中的另一段；當同一個用戶遇到一個藍色的鏈接或者一個黑色的標題時，他可以放心的將它理解成段落以外的東西。

6、親密性

親密性將元素彼此分開并且創(chuàng)建下級的層次。在一個頁面中可能會看到很多被空白分隔開的小部件；在這些部件中又會有新的層次，標題、副標題和內(nèi)容。親密性是最快的方式將關(guān)系緊密的內(nèi)容組織起來。在下面的例子中，很容易通過親密性將主要內(nèi)容與其他內(nèi)容區(qū)分開來。