網(wǎng)頁設(shè)計(jì)師應(yīng)該掌握的色彩理論 – 如何選擇正確的網(wǎng)站配色方案

2018-05-22 1945 0
如果你決定創(chuàng)建一個網(wǎng)站,那么你將面臨的第一個問題是“我應(yīng)該選擇什么顏色,才顯得更專業(yè)和視覺更具吸引力?“因?yàn)轭伾蔷W(wǎng)站首先吸引觀眾注意力的東西,這就是為什么配色方案被認(rèn)為是每個設(shè)計(jì)師應(yīng)該知道的最重要的事情。

 

顏色不僅影響網(wǎng)站的外觀,而且影響它的有效性。這意味著,網(wǎng)站人均瀏覽時長,訪問者的回頭率,甚至網(wǎng)站轉(zhuǎn)化都取決于顏色方案的選擇。此外,考慮到現(xiàn)代技術(shù)的可視化,色彩扮演了互聯(lián)網(wǎng)上的主要角色之一。當(dāng)你開始自己的網(wǎng)站,你不應(yīng)該忘記這個規(guī)則。

然而,我們中的一些人很難找到一件和牛仔褲顏色相配的T恤,所以并不是所有人能夠完全清楚如何為你的網(wǎng)站選擇合適的配色方案。但不要放棄,因?yàn)槲覀冇猩实睦碚?。通過深入研究色彩理論的基本知識,你將能夠創(chuàng)造美麗和有效的顏色組合。所有有經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)師都依賴于理論,這意味著你也可以做到這一點(diǎn)!讓我們來談?wù)勊闹饕瓌t,你會發(fā)現(xiàn)一切都比看起來容易得多。

工作工具

色相環(huán)是色彩理論的基本要素。設(shè)計(jì)師應(yīng)該沒有哪個不認(rèn)識它吧?

 

色相環(huán)是您的主要工作工具,清晰地演示了如何創(chuàng)建和組合顏色。所有的顏色被分為三個基本色-紅色,藍(lán)色和黃色,可以用來創(chuàng)建額外的顏色,如綠色,橙色和紫色。

然而,色相環(huán)并不總是由六個部分組成,他們可以包括十二個或更多的變化。在這種情況下,六種顏色被作為主和副顏色進(jìn)行添加混合。比如黃綠色、綠藍(lán)色、藍(lán)紫色、紫紅色、桔紅色和橙黃色。因此色相環(huán)包含24個部分,甚至更多的額外色調(diào)。

冷暖色

所有色相環(huán)都可以分成兩半。其中一半為暖色,如黃色,橙色和紅色(大多色相環(huán)的棕色也屬于暖色調(diào)色板)。另一半是冷色,如藍(lán)色,綠色,紫色和灰色??赡茉谶@里會有人問:“哪種顏色更好–溫暖還是涼爽?”答案是顯而易見的——沒有“更好”的顏色。你的選擇應(yīng)該取決于你要達(dá)到的效果以及與某一特定感覺或想法的關(guān)聯(lián)。暖色被認(rèn)為是愉快的,友好的和刺激的;冷色在大多數(shù)情況下是平靜和放松的。

因此,顏色的選擇取決于你的公司風(fēng)格,需要和你想創(chuàng)造的氛圍。如果你不是很理解,不妨自己進(jìn)行實(shí)驗(yàn),你可以混合暖色和冷色可能會這樣做),來看一下效果。但關(guān)于色彩混合,我們在后面會詳細(xì)地講解。

混色的基本知識

根據(jù)顏色在色相環(huán)中的位置,有幾種配色方案案。讓我們先從最簡單的一個開始,然后轉(zhuǎn)向更復(fù)雜的方案:

1.Complementary color scheme互補(bǔ)配色方案

互補(bǔ)配色方案——你可以結(jié)合位置彼此相對的兩個對比色。例如,你可以使用紅色和綠色,或黃色和紫色。如果要得到一個更優(yōu)雅的組合,建議添加中性附加色調(diào)-米色,淺棕色,淺灰色,黑色或白色,這些都可以是背景顏色。

2.Analogous color scheme近似色配色方案

近似色配色方案——一般地選取三個在色相環(huán)上位置相近的三個顏色。舉例:橙色,橙黃色和黃色;或者紫色,藍(lán)紫色和藍(lán)色。所有這些顏色都會很好地結(jié)合在一起,因?yàn)樗鼈冊谏喹h(huán)有著“鄰居”的關(guān)系。

3.Color triad三角對立配色方案

說到這個方案,有必要提醒你一些基本的幾何規(guī)則。也不是什么深奧的東西,其實(shí)沒有什么復(fù)雜的:你從色環(huán)中選取任何彼此等距三種顏色。如果你用線將它們連接起來,你會得到一個等邊三角形??赡艿慕M合是:黃綠色,橙紅色和紫藍(lán)色;黃橙,紅紫和藍(lán)綠色。這是一個非常豐富的對比方案,所以你需要找到一個平衡點(diǎn),選擇一種顏色作為主要顏色,然后再選擇另外兩種顏色。

4.Split-complementary color scheme分散互補(bǔ)色系配色方案

在這個方案中,你選擇一種顏色作為主要顏色,并將其與其他兩種顏色相結(jié)合,即顏色輪上的補(bǔ)色。這個方案,如果你把選中的顏色和線條連接起來,你會得到一個等腰三角形??赡艿倪x擇是:紅,黃綠色和藍(lán)綠色,或紫色,黃色,橙色和黃綠色。這是一個不同的方案,它比上面第一個互補(bǔ)方案的張力小。

5.Rectangle color scheme矩形配色方案

這里你需要選擇兩對互補(bǔ)色。如果你用線連接它們,你會得到一個矩形。例子:黃橙,黃綠色,藍(lán)紫色和紅紫色。這個方案是不同尋常的組合,是創(chuàng)意網(wǎng)站配色的完美選擇。不過,如果你擔(dān)心創(chuàng)建一個混亂的顏色,你可以選擇一種顏色作為基礎(chǔ),然后用其他三種顏色來作為補(bǔ)充強(qiáng)調(diào)。

6.Monochromatic color scheme單色調(diào)配色方案

從這個名字可以清楚地知道,這個方案結(jié)合了近似色。你既可以混合深色和淺色,也可以只選擇深色或淺色。

從理論到實(shí)踐

好了,現(xiàn)在你大概了解了主要的配色方案,了解它們的優(yōu)缺點(diǎn)。讓我們看看如何在實(shí)踐中使用這些知識。這里是一些 TemplateMonster 使用不同的配色方案創(chuàng)造優(yōu)質(zhì)的 WordPress 主題。這些都是很好的例子,也是靈感的源泉。如果你仔細(xì)閱讀上面理論,試試猜一下每一個網(wǎng)站都使用了哪些顏色方案,可以在評論中與大家一起分享。

除此之外,中國設(shè)計(jì)之窗的設(shè)計(jì)欣賞頻道也分享了全球許多優(yōu)秀的網(wǎng)站設(shè)計(jì)案例。

Houston Business WordPress Template

Details |  Demo

Bright Print Shop WordPress Design

Details |  Demo

Fast Cleaning Service WordPress Theme

Details |  Demo

Bellaina – Realtor Services WordPress Template

Details |  Demo

Sweet Cakes and Bakery WordPress Theme

Details |  Demo

Wine Store WooCommerce Theme

Details |  Demo

Fashionable Apparel WooCommerce Website

Details |  Demo

Sketchfield – Web Design WordPress Site

Details |  Demo

SEO Agency WordPress Theme

Details |  Demo

Elegant Photography WP Design

Details |  Demo

WordPress Theme for Professional Designer

Details |  Demo

Reliable Financial Company WordPress Theme

Details |  Demo

Bright and Fashionable WordPress Template

Details |  Demo

Vegetarian Restaurant WordPress Theme

Details |  Demo

Best Event Planner WordPress Design

Details | Demo


19
評論區(qū)(0)
正在加載評論...