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

設計=交流

作為核心：設計整體就是視覺交流。作為一個高效率的設計師，你必須有這個能力清楚地將你的設計思想傳達出來。人是易變的，如果你給了他們巨大的信息量，這有相當高的可能性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、緊密與留白

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

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

分享標題：網頁設計的層次感如何體現
URL網址：http://m.newbst.com/news48/312648.html

成都網站建設公司_創新互聯，為您提供建站公司、微信公眾號、小程序開發、網站收錄、軟件開發、手機網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯