網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比原則

網(wǎng)頁(yè)設(shè)計(jì)是由許多不同的元素，每一個(gè)具有不同程度的重要性和一些要求突出。有些元素共享一種關(guān)系，而另一些則根本不相關(guān)。棘手的部分是能夠直觀有效地溝通。這就是對(duì)比原則在起作用的地方。

成都網(wǎng)站設(shè)計(jì)對(duì)比是兩個(gè)或多個(gè)元素之間的差異。與此相反，設(shè)計(jì)師可以創(chuàng)建視覺(jué)興趣，并直接注意用戶。但是想象一下，如果網(wǎng)頁(yè)上的所有元素都是相同的樣式和外觀。沒(méi)有組織，沒(méi)有流程，也沒(méi)有層次結(jié)構(gòu)。內(nèi)容幾乎不可能消化。這使得對(duì)比有效的網(wǎng)頁(yè)設(shè)計(jì)的重要組成部分。

在這篇文章中，我們將看到如何通過(guò)創(chuàng)建三個(gè)方面的設(shè)計(jì)：顏色，大小和對(duì)齊的差異，可以實(shí)現(xiàn)對(duì)比。

對(duì)比色

當(dāng)大多數(shù)人聽到這個(gè)詞的對(duì)比，他們認(rèn)為顏色。盡管對(duì)比的原則不僅限于顏色，它可以很長(zhǎng)的路，幫助用戶區(qū)分頁(yè)面元素從另一個(gè)。

這是一個(gè)給定的，幾乎所有的網(wǎng)頁(yè)設(shè)計(jì)有一個(gè)頭，一個(gè)內(nèi)容區(qū)，和頁(yè)腳。這三個(gè)完全不同的區(qū)域應(yīng)該有清晰的視覺(jué)分離。在背景色中使用對(duì)比度是達(dá)到這個(gè)目的的極好方法。

在這里你會(huì)看到，教會(huì)媒體集團(tuán)的網(wǎng)站是一個(gè)很好的例子。頁(yè)眉和頁(yè)腳有暗背景色，而內(nèi)容區(qū)域?yàn)榘咨?。這顯然確立了內(nèi)容是不同的，甚至比其他領(lǐng)域更重要。如果我們?cè)倏匆稽c(diǎn)，內(nèi)容區(qū)域內(nèi)還有另一個(gè)背景對(duì)比度。“特色工程”區(qū)有淺藍(lán)色背景。由于這個(gè)區(qū)域和其余內(nèi)容之間的對(duì)比度是最小的，它告訴我們兩者是相關(guān)的。

Phil Renaud的投資組合都有一個(gè)獨(dú)特的布局和一個(gè)令人難以置信的色彩方案。他使用一個(gè)金色的黃色創(chuàng)造對(duì)比之間的垂直導(dǎo)航和其余的主要棕色設(shè)計(jì)。

顏色也可以用在文本內(nèi)創(chuàng)建對(duì)比度。Billy Tamplin沒(méi)有一個(gè)通過(guò)給標(biāo)題、副標(biāo)題分離層次創(chuàng)造出色的工作，和段落文本的不同顏色。對(duì)于博客風(fēng)格的布局，建立后標(biāo)題和正文之間的對(duì)比是至關(guān)重要的。它可以幫助用戶輕松地看到文章開始和結(jié)束時(shí)，他們向下滾動(dòng)頁(yè)面。

對(duì)比度的大小
在網(wǎng)頁(yè)設(shè)計(jì)中創(chuàng)建對(duì)比度的另一種方法是使用元素之間的大小差異。換句話說(shuō)，做一些比別人更大的事情。
當(dāng)你不能依賴顏色時(shí)，通過(guò)大小創(chuàng)建對(duì)比變得非常重要。出租車有很多在它的布局，并有一個(gè)最小的配色方案。因此，為了在三列之間建立一個(gè)層次結(jié)構(gòu)，設(shè)計(jì)者在中間列上使用了一個(gè)更大的寬度--超過(guò)了左右列的兩倍。這使得用戶很明顯，中間列是頁(yè)面中最重要的區(qū)域。

正如標(biāo)題可以使用顏色來(lái)形成對(duì)比，尺寸也可以。大標(biāo)題是一個(gè)偉大的方式來(lái)建立層次內(nèi)的網(wǎng)站內(nèi)容。imaginaria創(chuàng)意的網(wǎng)站，使用了大標(biāo)題來(lái)吸引注意力，吸引他們讓他們閱讀更多的小段落下面。

對(duì)比校準(zhǔn)

良好的對(duì)齊方式在創(chuàng)建高質(zhì)量的網(wǎng)頁(yè)設(shè)計(jì)中起著重要作用。事情看起來(lái)更好時(shí)，他們排隊(duì)。這就是為什么我想使用不同的對(duì)齊方式來(lái)建立對(duì)比是很困難的，應(yīng)謹(jǐn)慎使用。然而，做得好，它可以非常有效地創(chuàng)造分離。

legistyles使用在每個(gè)標(biāo)題下面的內(nèi)容塊大左緣。隨著大尺寸的標(biāo)題，這創(chuàng)造了良好的對(duì)比度。如果你要使用這種差異對(duì)齊，一定要使它大的區(qū)別。否則，它將結(jié)束看起來(lái)像一個(gè)錯(cuò)誤的設(shè)計(jì)差。

中心的大段文字是一個(gè)排版不使文本很難讀。但是，不要害怕把左對(duì)齊段落與中心標(biāo)題混合在一起。這是另一個(gè)很好的方法來(lái)使用差異對(duì)齊創(chuàng)建對(duì)比。結(jié)合一個(gè)漂亮的襯線字體，它也可以給你的漂亮的效果。

Simon Collison在每個(gè)內(nèi)容框中使用與左對(duì)齊段落相匹配的居中標(biāo)題。由于標(biāo)題的字體大小不比段落大得多，這有助于分隔標(biāo)題。

現(xiàn)在去變得不同

學(xué)會(huì)在你的設(shè)計(jì)中建立正確的對(duì)比，就像掌握其他的設(shè)計(jì)原則一樣，需要實(shí)踐。花時(shí)間研究有才華的設(shè)計(jì)師的工作，看看他們是如何使用對(duì)比在他們的設(shè)計(jì)。記住對(duì)比是關(guān)于差異的。如果兩個(gè)元素在本質(zhì)上是非常不同的，一定要使他們的視覺(jué)差異非常明顯。

當(dāng)前名稱：網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比原則
標(biāo)題URL：http://m.rwnh.cn/news19/20319.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、Google、做網(wǎng)站、網(wǎng)站內(nèi)鏈、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)

廣告

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