東莞網(wǎng)站建設(shè) >
新聞中心> 詳細(xì)內(nèi)容
|
|||
| 來(lái)源：互諾網(wǎng)絡(luò) | |||
一、 網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比原則 一件網(wǎng)頁(yè)設(shè)計(jì)作品由許多元素構(gòu)成，它們的重要性各不相同，其中一些元素的重要性要高于其它元素。一些相互關(guān)聯(lián)，而另一些則沒(méi)有任何聯(lián)系。棘手的是如何有效地和可視化地表達(dá)這些元素，這正是對(duì)比原則發(fā)揮作用之處。 對(duì)比產(chǎn)生在兩個(gè)或多個(gè)元素之間，設(shè)計(jì)者可以利用對(duì)比對(duì)用戶(hù)產(chǎn)生直接的視覺(jué)吸引。想象一下，如果頁(yè)面上所有的元素都是同樣的樣式，那么整個(gè)頁(yè)面將是無(wú)序的，頁(yè)面結(jié)構(gòu)也沒(méi)有流動(dòng)性和層級(jí)性。內(nèi)容閱讀起來(lái)將變得非常困難。這使得對(duì)比原則成為頁(yè)面web設(shè)計(jì)中一個(gè)必要的方法。 這篇文章中我們將看看如何使用對(duì)比在顏色、大小和對(duì)齊方式三個(gè)方面創(chuàng)建一些不同之處。 顏色對(duì)比 許多人一想到對(duì)比便立刻想到顏色。盡管對(duì)比原則并不僅僅限于顏色對(duì)比，但它對(duì)于用戶(hù)識(shí)別各種元素的確大有幫助。 現(xiàn)在幾乎所有的頁(yè)面一般都包括頭部、內(nèi)容區(qū)域和底部。這三部分是完全不同的，它們?cè)谝曈X(jué)上應(yīng)當(dāng)區(qū)分明確，使用背景顏色產(chǎn)生對(duì)比是一個(gè)不錯(cuò)的方法。 站點(diǎn)Church Media Group就是一個(gè)非常好的例子。它的頭部和底部均采用了深色背景，而內(nèi)容區(qū)則采用白色背景。這使內(nèi)容區(qū)域和其他部分截然分開(kāi)，并且使其重要性更加突出。如果仔細(xì)觀察，我們會(huì)發(fā)現(xiàn)在內(nèi)容區(qū)還有另外一層的背景對(duì)比。內(nèi)容區(qū)上半部分的特色產(chǎn)品區(qū)用了亮藍(lán)色的背景，而它和內(nèi)容區(qū)其他部分的對(duì)比則并不強(qiáng)烈，這就告訴我們這兩部分是相互關(guān)聯(lián)的。 Phil Renaud's portfolio 使用了一個(gè)獨(dú)特的布局和色系。他使用了金黃色來(lái)使左側(cè)的導(dǎo)航和其他部分的棕色產(chǎn)生對(duì)比。 文字也可以使用顏色產(chǎn)生對(duì)比。Billy Tamplin 在這方面有一個(gè)非常棒的作品，它分別給頁(yè)面標(biāo)題、副標(biāo)題和段落文本使用不同的顏色。對(duì)于博客風(fēng)格的布局，在文章標(biāo)題和內(nèi)容文本之間創(chuàng)建對(duì)比是非常重要的。它可以使用戶(hù)在拖動(dòng)滾動(dòng)條時(shí)很容易地看到文章的起始部分。 大小對(duì)比 在Web設(shè)計(jì)中另一種創(chuàng)建對(duì)比的方法就是讓元素的大小產(chǎn)生不同，是其中一些元素的尺寸比其它的大。 當(dāng)你無(wú)法使用顏色對(duì)比時(shí)，可以考慮使用大小對(duì)比。Taxi在布局上做了很多而只使用了很少的顏色。所以為了在三個(gè)欄目之間創(chuàng)建出層次，設(shè)計(jì)者為中間一欄使用了比左右兩欄大了很多的寬度，這使得用戶(hù)很明顯地認(rèn)為中間一欄是整個(gè)頁(yè)面最重要的部分。 正如可為文字標(biāo)題應(yīng)用顏色來(lái)創(chuàng)建對(duì)比一樣，使用大小也可以。用Big headings為站點(diǎn)內(nèi)容創(chuàng)建層次是一個(gè)很好的方法，Imaginaria Creative使用了大標(biāo)題來(lái)吸引訪(fǎng)問(wèn)者的注意，并且吸引他們閱讀下面字號(hào)稍小的一些段落。 對(duì)齊方式對(duì)比 好的對(duì)齊方式在高質(zhì)量的web設(shè)計(jì)中發(fā)揮著很大的作用。當(dāng)把東西對(duì)齊放置時(shí)，它們看起來(lái)會(huì)很舒服。但我認(rèn)為這恰恰是用不同的對(duì)齊方式創(chuàng)建對(duì)比的困難之處，并且應(yīng)謹(jǐn)慎使用。不過(guò)如果使用得當(dāng)則能創(chuàng)建非常有效的分割效果。 LegiStyles在每個(gè)標(biāo)題下面的內(nèi)容塊應(yīng)用了很大的外邊距，和大字號(hào)的標(biāo)題一起創(chuàng)建了明顯的對(duì)比。如果要采用這種方式，務(wù)必要使對(duì)比顯得明顯一些，否則就會(huì)看起來(lái)像是錯(cuò)誤地進(jìn)行了設(shè)計(jì)。 把大段的內(nèi)容居中放置是排版布局中的禁忌，它使內(nèi)容很難閱讀。然而不要怕把居中的標(biāo)題和左對(duì)齊的內(nèi)容段落放在一起，因?yàn)檫@是應(yīng)用對(duì)齊方式創(chuàng)建對(duì)比的另一種很好的方式。如果和襯線(xiàn)字體一起放置，可以使你的布局呈現(xiàn)一個(gè)非常經(jīng)典的外觀。 Simon Collison為每個(gè)內(nèi)容塊使用居中標(biāo)題和左對(duì)齊的段落，標(biāo)題的字號(hào)相對(duì)于段落字號(hào)不是很大，但這使兩者截然分開(kāi)。 A List Apart 是采用這種方式的另一個(gè)很好的例子。 Now Go and Be Different 學(xué)習(xí)在設(shè)計(jì)作品中創(chuàng)建合適的對(duì)比和掌握其他設(shè)計(jì)原則的一樣的，都需要實(shí)踐�；c(diǎn)時(shí)間來(lái)學(xué)習(xí)優(yōu)秀的設(shè)計(jì)作品，并看看他們是如何運(yùn)用對(duì)比原則的。記住對(duì)比是關(guān)于事物之間的區(qū)別的。如果兩個(gè)元素在其性質(zhì)上區(qū)別很大，那么一定要使其外觀的區(qū)別也很明顯。 |
