網(wǎng)頁設(shè)計中的對比原則
原文:The Principle of Contrast in Web Design 譯文:http://pd4.me/blog/translation/the-principle-of-contrast-in-web-design/
網(wǎng)頁設(shè)計是由很多個不同的元素構(gòu)成的,而這些元素的重要性都不同,并且有些元素還需要尤為的突出.有些元素彼此之間存在著聯(lián)系,而另外的元素之間則一點關(guān)聯(lián)性都沒有.比較難辦的部分就是如何有效的在視覺上來傳遞元素之間的關(guān)系.這就該用到對比原則了.
對比就是兩個或更多個元素之間的不同.通過對比,設(shè)計師就可以創(chuàng)造出視覺趣味性,同時引導(dǎo)用戶的注意力.想象一下,如果頁面上所有的元素都是一個模樣,那就會覺得這些內(nèi)容沒有組織,沒有”(視線)流”,沒有明確的結(jié)構(gòu),也很難去理解和接受.因此在網(wǎng)頁設(shè)計中,對比是很重要的一部分.
在這篇文章中,我們將會看到如何通過顏色,尺寸,對齊方式這三個方面來建立對比.
顏色中的對比
大多數(shù)人聽到”對比”這個詞,他們首先想到的就是顏色.盡管對比原則中不只包含顏色,但是顏色對于幫助用戶識別頁面中不同的元素有很大的幫助.
一般頁面都包含頁頭,內(nèi)容區(qū),頁腳.那么我們就需要從視覺上清晰的區(qū)分中這三個不同的部分.很好的方法就是: 使用不同的背景色.
先來看看Church Media Group’s website,這是一個很好的例子.頁頭和頁腳都使用較深的背景色,內(nèi)容區(qū)是白色.通過這種差異,可以很明顯的突出內(nèi)容,并表現(xiàn)出它的重要性.如果我們再深入點看,在內(nèi)容區(qū)域也有不同的背景色對比:”案例”部分使用了淺藍(lán)色.正因為它與其他內(nèi)容部分的對比很小,表示兩個部分是有關(guān)聯(lián)的.
Phil Renaud’s portfolio使用了一個獨特布局和極其漂亮的配色方案.網(wǎng)站整體使用了棕色來設(shè)計,他使用了一種金黃色來增加垂直導(dǎo)航區(qū)域和其他區(qū)域的對比.
文本之間也可以使用顏色來形成對比.在Billy Tamplin中,標(biāo)題,副標(biāo)題,文章段落分別使用了不同的顏色,將各部分合理的區(qū)分并建立視覺結(jié)構(gòu),最終獲得了很好的效果.作為博客的界面來說,在文章標(biāo)題和主體內(nèi)容之間建立對比是很重要的.這樣在用戶滾動頁面的時候,就可以讓他們清楚的看到文章的從哪開始和到哪結(jié)束.
出處:豬窩
責(zé)任編輯:bluehearts
上一頁 下一頁 網(wǎng)頁設(shè)計中的對比原則 [2]
|