理解網頁中的視覺層次

原文來自 Webdesign Tuts+ 原創翻譯– 設計理論

視覺層次是高效率網頁設計的重要原則之一。這篇文章將向大家介紹為什麼設計一個具有視覺層次的網頁是這麼重要。在了解這些原則之後,你可以在自己的基礎設計練習中運用到這些知識。

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

要了解這個,知道一些人們如何看待事物的方法是很重要的。人們並不等於所謂的“平等機會主義者”。他們不僅僅是收集視覺信息和處理數據,於此同時,大腦還會整理他們看到的這些東西的“視覺關係”。

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

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

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

讓我們來看一張更為複雜的圖片:

增加的這些複雜成分強迫我們去分析他們之間的關係。相同和不同點變成了我們思考這些問題的思維框架。比例向我們傳遞了“一個物體相對其他來說離我們更近,或者是,這個物體起到一個相對其他物體而言的支配地位”;顏色的不同告訴我們每一個物體可能有自己獨特的特點,這個特點將其與其他物體區分開來。這樣一個簡單的圖片用最基本的方法卻向我們傳達瞭如此多的信息。

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

讓我們回過頭來看網頁設計;因為網頁設計是有關視覺信息交流,明白“用戶們將會自己組織設計內容的關係”成為我們高效設計的核心。一次丟出大量信息的方式看上去已經沒意思了,作為網頁設計師,我們任務是將這些沒有經過處理的信息劃分成一塊一塊切題的美味以供用戶們更方便的閱讀。更為重要的,我們需要明白:信息的高效交流是網頁背後的關鍵。

初看視覺層次有成千上百的解釋說明人們為什麼會根據關係來看待問題;如果你要追溯到人類學上去討論它的話,你可能做出結論:遠古時代狩獵為生的人們在思維上引導現在的人類去關注這些事物之間的聯繫,這是一種生存技巧。

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

看看下面的兩張圖片:

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

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

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

1、大小

較大的物體具有更大的吸引力。將尺寸的控製作為製造層次的工具是一個非常高效的方法去引導讀者的視線。在設計中將尺寸和重要性結合起來是非常關鍵的。最大的元素大部分情況都具有最大的重要性,與此同時,最小的元素應該是最不重要的。

2、顏色

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

3、對比

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

4、對齊

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

5、反复

重複體現了元素之間的關聯性;如果所有段落的文字都是灰色的,當一個用戶看到一塊新的灰色文字時,他也許認為這是其中的另一段;當同一個用戶遇到一個藍色的鏈接或者一個黑色的標題時,他可以放心的將它理解成段落以外的東西。

6、親密性

親密性將元素彼此分開並且創建下級的層次。在一個頁面中可能會看到很多被空白分隔開的小部件;在這些部件中又會有新的層次,標題、副標題和內容。親密性是最快的方式將關係緊密的內容組織起來。在下面的例子中,很容易通過親密性將主要內容與其他內容區分開來。

7、緊密與留白

密集的元素給人一種“重”和雜亂的感覺;元素之間距離太大,他們將會失去彼此之間的聯繫。當一個網頁被設計的恰到好處時,眼睛將會準確的將各個元素組織好。

源地址:http://lazymaru.com/blog/?p=176

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.