網(wǎng)頁(yè)設(shè)計(jì)的層次感如何體現(xiàn)

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

設(shè)計(jì)=交流

作為核心：設(shè)計(jì)整體就是視覺(jué)交流。作為一個(gè)高效率的設(shè)計(jì)師，你必須有這個(gè)能力清楚地將你的設(shè)計(jì)思想傳達(dá)出來(lái)。人是易變的，如果你給了他們巨大的信息量，這有相當(dāng)高的可能性100個(gè)人中99人都會(huì)厭倦去看它。為什么呢?因?yàn)槿藗兌际翘煨缘囊曈X(jué)欣賞者，而不是數(shù)據(jù)處理者。

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

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

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

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

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

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

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

可能一個(gè)更便于理解的解釋?zhuān)@就是我們大腦整理信息的方式：將相似的可視元素整理成一個(gè)組，將他們放進(jìn)具有一定意義的類(lèi)型當(dāng)中就像人類(lèi)固有的吃喝等習(xí)性一樣。換句話(huà)說(shuō)，事實(shí)上大腦里的信息都是按照某種層次整理出來(lái)的，這樣交流起來(lái)比沒(méi)有整理信息要有效率的多。

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

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

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

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

1、大小

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

2、顏色

顏色是一個(gè)很有意思的工具，他可以在組織上和個(gè)性?xún)煞矫嫫鸬阶饔?。醒目、?duì)比強(qiáng)烈的顏色在特殊的元素中將會(huì)引起更大的關(guān)注(例如按鈕、錯(cuò)誤信息或者超鏈接)。當(dāng)作為一個(gè)體現(xiàn)個(gè)性的工具時(shí)，顏色可以延伸到體現(xiàn)更精練的層次感上;用到豪華、舒適的顏色將給頁(yè)面帶來(lái)感情上的吸引力。顏色可以影響網(wǎng)頁(yè)的每一個(gè)角落，從商標(biāo)到形象。色彩應(yīng)用在視覺(jué)層次設(shè)計(jì)中可以做到信息分類(lèi)的效果。

3、對(duì)比

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

4、對(duì)齊

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

5、反復(fù)

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

6、親密性

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

7、緊密與留白

密集的元素給人一種“重”和雜亂的感覺(jué);元素之間距離太大，他們將會(huì)失去彼此之間的聯(lián)系。當(dāng)一個(gè)網(wǎng)頁(yè)被設(shè)計(jì)的恰到好處時(shí)，眼睛將會(huì)準(zhǔn)確的將各個(gè)元素組織好。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)的層次感如何體現(xiàn)
URL網(wǎng)址：http://www.bm7419.com/news48/312648.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、微信公眾號(hào)、小程序開(kāi)發(fā)、網(wǎng)站收錄、軟件開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)