5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度發(fā)布者：本站     時(shí)間：2022-01-10 15:01:41

在網(wǎng)站建設(shè)工作中，你是否會(huì)覺(jué)得你的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目好像缺少那么一些特殊的流行元素?這很有可能是因?yàn)轫?yè)面缺少了足夠的對(duì)比度。其實(shí)，通過(guò)頁(yè)面中提供的不同元素之間的對(duì)比區(qū)分，可以使得每個(gè)元素看起來(lái)更加個(gè)性化，突出以及特殊。

網(wǎng)站設(shè)計(jì)可以通過(guò)多種方式來(lái)創(chuàng)建各種極具個(gè)性的對(duì)比，而且，你不用拘泥于一種或幾種不同的的元素，所有不同類型的元素都可以應(yīng)用到。從排版到色彩再到空間，通過(guò)創(chuàng)造對(duì)比可以使一個(gè)設(shè)計(jì)從“嘖嘖”的嫌棄到“喔”的驚嘆，其中的落差你可以自行腦補(bǔ)。這里我們總結(jié)提供了五種方法來(lái)提升網(wǎng)站設(shè)計(jì)的視覺(jué)對(duì)比。

1.刻意使元素更大(或更小)

5種方式提高<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設(shè)計(jì)</a>中的對(duì)比度,PS教程,

當(dāng)在設(shè)計(jì)中創(chuàng)建焦點(diǎn)時(shí)，過(guò)于體現(xiàn)對(duì)稱性和有序性可能是在給自己挖坑。頁(yè)面上如果具有太多相等權(quán)重的元素，會(huì)使得它們最終看起來(lái)沒(méi)有主次，完全是相同的，這樣就顯得過(guò)于平淡了。

但面臨以上的這個(gè)問(wèn)題時(shí)，最容易的解決方案就是凸顯一個(gè)元素，你可以讓它更大，或者更小。

通過(guò)這種方法，可以使這個(gè)元素成為頁(yè)面上直接的焦點(diǎn)，通過(guò)這個(gè)“小心機(jī)”，用戶會(huì)自然的被吸引到這個(gè)區(qū)域，因?yàn)楸绕鹬苓叺钠渌貋?lái)說(shuō)，它是不同的。

5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度,PS教程,

使元素，照片或文本區(qū)域更大或更小不僅僅是通過(guò)物理尺寸控制的，它也包括通過(guò)視覺(jué)重量的輕重來(lái)體現(xiàn)。想了解這一點(diǎn)，最簡(jiǎn)單的方法就是在排版或字體使用上多花一些心思?？纯瓷厦娴膱D像。兩個(gè)詞都是相同的“大小”，但注意，通過(guò)視覺(jué)，你覺(jué)得哪種形式的設(shè)計(jì)顯得更“重”呢?上面的這種對(duì)比就是通過(guò)字體中的粗筆畫和薄筆畫來(lái)體現(xiàn)的。

你可以試著將這種相同概念應(yīng)用于幾乎任何其他網(wǎng)頁(yè)設(shè)計(jì)元素中，結(jié)果一定會(huì)讓你吃驚的。

再回顧一下最上面舉的Little Flyers的網(wǎng)站。請(qǐng)?zhí)貏e注意頁(yè)面頂部基于文本基礎(chǔ)的導(dǎo)航和屏幕底部的按鈕。哪個(gè)或那塊區(qū)域更快地引起你的注意?為什么?上面所有的類型是相同的大小，但通過(guò)在一個(gè)豐富多彩的照片內(nèi)用線框?qū)⑽谋就癸@出來(lái)使它看起來(lái)更大，更引人注目。

2.添加一些小紋理

5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度,PS教程,

現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)主要以扁平和簡(jiǎn)約的風(fēng)格作為設(shè)計(jì)趨勢(shì)的主導(dǎo)驅(qū)動(dòng)力，所以較之前流行一時(shí)的紋理，在現(xiàn)在變得不太常見(jiàn)了。不過(guò)你仍然會(huì)在許多地方看到它，也許只是你沒(méi)太過(guò)多的注意到。

從平面元素過(guò)度到具有紋理，圖案或三維樣式的任何東西，都有助于創(chuàng)建焦點(diǎn)區(qū)域。雖然在背景上添加紋理可能是最立竿見(jiàn)影的解決方案，但紋理也可以以其他方式使用在不同的設(shè)計(jì)上。

所有，在做網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，不妨考慮一下使用具有紋理感的文本元素(這在許多老式排版風(fēng)格中是很受歡迎的)。主要的紋理類型可以是粗糙或平滑的。他們可以配合使用，或者孤立地幫助創(chuàng)建視覺(jué)焦點(diǎn)。在平面設(shè)計(jì)工作中，需要打印設(shè)計(jì)時(shí)，你也可以根據(jù)所使用的紙張類型，頁(yè)面平滑程度以及其他物理因素來(lái)添加紋理。

3.改變?cè)匦螤?br />
5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度,PS教程,

做個(gè)小測(cè)試，看看上面的圖片。你視覺(jué)的第一印象是什么呢?對(duì)我來(lái)說(shuō)，我的焦點(diǎn)被那個(gè)帶有問(wèn)號(hào)的圓形物件吸引了。

你知道這是為什么嗎?其實(shí)原理很簡(jiǎn)單，在一個(gè)充滿了矩形的圖像中，它是唯一的圓，僅此而已。對(duì)象作為特殊焦點(diǎn)元素的區(qū)別在于，是什么使它脫穎而出。當(dāng)然，字符顛倒的事實(shí)也是一個(gè)吸引我注意力的緣由之一。所以，改變?cè)氐男螤罨蚍较?，使其和周圍的絕大多數(shù)其他元素不同，可以立即對(duì)人的視覺(jué)注意力產(chǎn)生影響。

嘗試在你下次設(shè)計(jì)感覺(jué)有點(diǎn)平淡的時(shí)候，使用圓形邊緣的按鈕，或者將照片放在圓形框架中，而不是矩形的，又或者選擇垂直的照片或使用一個(gè)稍微打破頁(yè)面平衡的展示位置來(lái)放置內(nèi)容元素。

任何這些技巧在一開(kāi)始的時(shí)候，可能會(huì)讓你覺(jué)得有點(diǎn)不舒服。不過(guò)不用過(guò)于擔(dān)心，繼續(xù)試驗(yàn)，調(diào)整，直到你把一個(gè)傳統(tǒng)的矩形轉(zhuǎn)換成更有趣的東西。

4.添加顏色(或干脆直接不要顏色)

5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度,PS教程,

色彩理論是你可以使用的最重要的概念之一。通過(guò)更改色調(diào)，或添加或刪除，你可以更改設(shè)計(jì)的整體“情緒”。而且，顏色可以使元素顯得更大或更小，更具張力或緩和過(guò)渡。對(duì)于使用多數(shù)調(diào)色盤里面各種顏色的竅門，就是使用對(duì)比度。

我們可以從色輪開(kāi)始應(yīng)用最簡(jiǎn)單的對(duì)比度。沿輪子配對(duì)顏色產(chǎn)生各種對(duì)比組合：

· 互補(bǔ)：從車輪兩側(cè)的高強(qiáng)度對(duì)比組;

· 三元組：沿著色輪以三分之一的增量間隔的顏色對(duì)比組;

· 分裂互補(bǔ)：一種顏色和兩種顏色旁邊的互補(bǔ)色調(diào)。

5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度,PS教程,

一定還有其他顏色對(duì)比選項(xiàng)在實(shí)際的網(wǎng)站設(shè)計(jì)工作中能更好的使用，如果你已經(jīng)有了自己的一套配色方案，不要介意自己再去做一些調(diào)整或改變。

· 混合暖色，冷色和中性的顏色;

· 通過(guò)添加色彩和色調(diào)來(lái)更改基色，以便飽和度隨著顏色的不同而不同;

· 纏繞亮色和暗色; 想象它們是陰和陽(yáng)，應(yīng)該怎么調(diào)節(jié);

· 添加無(wú)顏色的元素。通過(guò)黑色或白色的強(qiáng)調(diào)，可以增加那些帶有很多色彩的空間重點(diǎn)重點(diǎn)，并且各種顏色可以在黑色或白色中增加他們的對(duì)比度。

5.做一些出乎意料的設(shè)計(jì)

5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度,PS教程,

5種方式提高網(wǎng)頁(yè)設(shè)計(jì)中的對(duì)比度,PS教程,

一個(gè)意想不到的形狀或細(xì)節(jié)也可以給在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候給頁(yè)面曾加適量的對(duì)比度。在設(shè)計(jì)中，一個(gè)驚喜可能不完全能夠匹配頁(yè)面中其他的元素，但你要做的，是盡量使它協(xié)調(diào)一致。

這些元素包括：

· 在其他對(duì)稱設(shè)計(jì)中的不對(duì)稱元素;

· 一個(gè)可以引導(dǎo)你了解設(shè)計(jì)信息的視覺(jué)提示，如一個(gè)帶有張力的形狀或符合視覺(jué)瀏覽模式的元素，又如上面案例的Vibrant網(wǎng)站那樣，充滿活力;

· 圖案或重復(fù)元素的變化;

· 更改元素或文本的方向和對(duì)齊方式，例如在上面案例Anima里面使用字母“I”的形式;

· 更改視覺(jué)行路徑中一個(gè)元素的位置或大小;

· 使用不同風(fēng)格的圖像，在網(wǎng)頁(yè)設(shè)計(jì)中使用圖片的同時(shí)一起使用矢量圖形和一點(diǎn)點(diǎn)的動(dòng)畫;

· 混合復(fù)雜和簡(jiǎn)單的視覺(jué)或排版風(fēng)格。

總結(jié)

改變?cè)刂g的對(duì)比度的好處在于，在網(wǎng)站建設(shè)工作中，它可以在設(shè)計(jì)項(xiàng)目中立刻產(chǎn)生影響。通過(guò)更改元素的外觀，你可以更改視覺(jué)的焦點(diǎn)，并幫助用戶熟悉設(shè)計(jì)中哪些是消息最重要的部分。