網(wǎng)頁設(shè)計是由很多個不同的元素構(gòu)成的,而這些元素的重要性都不同,并且有些元素還需要尤為的突出.有些元素彼此之間存在著聯(lián)系,而另外的元素之間則一點關(guān)聯(lián)性都沒有.比較難辦的部分就是如何有效的在視覺上來傳遞元素之間的關(guān)系.這就該用到對比原則了.

對比就是兩個或更多個元素之間的不同.通過對比,設(shè)計師就可以創(chuàng)造出視覺趣味性,同時引導用戶的注意力.想象一下,如果頁面上所有的元素都是一個模樣,那就會覺得這些內(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ū)域也有不同的背景色對比:”案例”部分使用了淺藍色.正因為它與其他內(nèi)容部分的對比很小,表示兩個部分是有關(guān)聯(lián)的.

Phil Renaud’s portfolio使用了一個獨特布局和極其漂亮的配色方案.網(wǎng)站整體使用了棕色來設(shè)計,他使用了一種金黃色來增加垂直導航區(qū)域和其他區(qū)域的對比.

文本之間也可以使用顏色來形成對比.在Billy Tamplin中,標題,副標題,文章段落分別使用了不同的顏色,將各部分合理的區(qū)分并建立視覺結(jié)構(gòu),最終獲得了很好的效果.作為博客的界面來說,在文章標題和主體內(nèi)容之間建立對比是很重要的.這樣在用戶滾動頁面的時候,就可以讓他們清楚的看到文章的從哪開始和到哪結(jié)束.

尺寸中的對比

在頁面設(shè)計中另外一種對比方式就是不同的元素使用不同的尺寸.換句話說,讓一部分內(nèi)容比其他的更大.

在不能依靠顏色的時候,通過尺寸建立對比則變得非常重要.Taxi的配色很少,而它的頁面中有很多的新聞.因此,為了建立三列布局的結(jié)構(gòu),設(shè)計師在中間列使用了大得多的寬度-比左側(cè)和右側(cè)列的兩倍還大.讓用戶一眼就能看出來,中間那列是頁面中最重要的部分.

正如標題可以使用顏色來建立對比,尺寸也可以.在網(wǎng)站內(nèi)容中,大標題是建立視覺結(jié)構(gòu)很好的方法.Imaginaria Creative的網(wǎng)站中,使用了大標題來吸引用戶的注意力并且留住他們,這樣用戶就會閱讀下面那些稍小的段落中更多內(nèi)容.

對齊方式的對比

在高品質(zhì)網(wǎng)頁設(shè)計中,好的對齊方式占了很大的比重.當物品排成一行時,通?？瓷先ジ杏X更好.因此,我覺得使用不同的對齊方式來建立對比是較難的而且要更謹慎的使用.但是如果做的好的話是非常有效的.

LegiStyles在標題下面的內(nèi)容塊左側(cè)使用了一個很大的留白.再加上大尺寸的標題,形成了一個很好的對比效果.如果你想使用不同的對齊方式,那么一定要將這種不同的尺度做大,否則最后會看起來像一個糟糕的設(shè)計中的失誤.

居中的大段文字是一個排版中的禁忌.因為會造成文本很難閱讀.但是,可以嘗試將左對齊的文本段落和居中對齊的標題來混合起來.這是使用不同的對齊方式建立對比的另外一個好辦法.再結(jié)合使用一種漂亮的襯線字體,這樣也能獲得很漂亮的效果.

Simon Collison的每個內(nèi)容塊中,都使用了居中對齊的標題,左對齊的文本.盡管標題的文字并沒有比段落的文字大很多,但是已經(jīng)能看出差別了.

A List Apart是另外一個居中標題左對齊段落的很好的例子.

開始去做吧

學習在你的設(shè)計中建立合適的對比跟學習其他的設(shè)計準則一樣–需要練習.花些時間來研究那些優(yōu)秀設(shè)計師的作品,看看他們是如何使用對比的.要記住,對比就是”不同”.如果兩個元素實質(zhì)上就是非常不同的,那么一定要讓它們有明顯的視覺差別.

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

名稱欄目：網(wǎng)頁設(shè)計顏色尺寸對齊方式對比
文章URL：http://www.rwnh.cn/news18/310668.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、商城網(wǎng)站、微信公眾號、靜態(tài)網(wǎng)站、域名注冊、企業(yè)建站

廣告

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