網頁中的視覺層次-2

列印

層次構建工具箱



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

1、大小


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

 

2、顏色


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

 

 

3、對比

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

4、對齊

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

5、重複

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

6、親密性

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

 

7、緊密與留白

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

DMC Firewall is a Joomla Security extension!