淺談網(wǎng)頁(yè)設(shè)計(jì)色彩學(xué):對(duì)比色配色
我們生活的世界中無(wú)論何時(shí)何地,都充滿著各種不同的色彩。人們?cè)诮佑|這些色彩的時(shí)候,常常都會(huì)以為色彩是獨(dú)立的:天空是藍(lán)色的、植物是綠色的、而花朵是紅色的。但色彩就像是音符一樣,唯有一個(gè)個(gè)的音符才能共同譜出美妙的樂(lè)章。色彩亦是,實(shí)際上沒(méi)有一個(gè)色彩是獨(dú)立存在的、也沒(méi)有哪一種顏色本身是好看的顏色或是不好看的顏色。相反地,只有當(dāng)色彩成為一組顏色組成中的其中一個(gè)的時(shí)候,我們才會(huì)說(shuō)這個(gè)顏色在這裡是協(xié)調(diào)或是不協(xié)調(diào),適合或不適合。
在《淺談色彩學(xué):人性化的 HSB 色彩空間》中我們介紹過(guò)色彩是由三種「色相」、「明度」以及「彩度」三種屬性所組成,而我們知道其中的「色相」是人在最早認(rèn)識(shí)色彩的時(shí)候所理解到的屬性,也就是所謂色彩的名稱,例如紅色、黃色、藍(lán)色……等等,以下為由最常見(jiàn)的 12 色相環(huán):
在色相環(huán)的組成中,相隔 180 度的色彩我們稱之為互補(bǔ)色:紅與綠互補(bǔ),黃與紫互補(bǔ)而藍(lán)色與橙色互補(bǔ)。
由于互補(bǔ)色有強(qiáng)烈的分離性,所以使用互補(bǔ)色的配色設(shè)計(jì),可以有效加強(qiáng)整體配色的對(duì)比度、拉開(kāi)距離感,而且能表現(xiàn)出特殊的視覺(jué)對(duì)比與平衡效果,使用得好能讓作品令人感覺(jué)活潑、充滿生命力的感受。
當(dāng)然如果將色彩的條件稍微放寬一點(diǎn),比如說(shuō) 180 度互補(bǔ)色的臨近色系也搭入配色考慮的話,可以形成的色彩配色就更寬廣、更豐富了。
互補(bǔ)色,比例決定了一切!
由于互補(bǔ)色彩之間的對(duì)比相當(dāng)強(qiáng)烈,因此想要適當(dāng)?shù)剡\(yùn)用互補(bǔ)色,必須特別慎重考慮色彩彼此間的比例問(wèn)題。因此當(dāng)使用互補(bǔ)色配色時(shí),必須利用大面積的一種顏色與另一個(gè)面積較小的互補(bǔ)色來(lái)達(dá)到平衡。如果兩種色彩所佔(zhàn)的比例相同,那麼對(duì)比會(huì)顯得過(guò)于強(qiáng)烈。比如說(shuō)紅與綠如果再畫面上佔(zhàn)有同樣面積的時(shí)候,就容易讓人頭暈?zāi)垦?。可以選擇其中之一的顏色為大面積,構(gòu)成主調(diào)色,而另一顏色為小面積作為對(duì)比色。經(jīng)驗(yàn)上會(huì)以 3:7 甚至 2:8 的比例分配原則。
日本設(shè)計(jì)師 まりっぺ 曾經(jīng)針對(duì)色彩的配色提出比例原則 75%、25%與 5% 的配色比例方式 ,其中的底色為大面積使用的底色,而主色與強(qiáng)調(diào)色則是可以利用互補(bǔ)色的特性,來(lái)講主色以及強(qiáng)調(diào)色皆襯托出來(lái)。
而如果使用三色配色的方式不敷使用,まりっぺ 也認(rèn)為必須從現(xiàn)有的色彩分配中做切割的動(dòng)作,以避免影響整體配色比例(更多詳細(xì)內(nèi)容請(qǐng)見(jiàn)作者網(wǎng)站 )
世界上有無(wú)限多種色彩、色彩的配色方法亦有無(wú)限多種。這邊所使用的只是眾多配色技巧的其中一種,有興趣的朋友不彷日常生活中多注意一些設(shè)計(jì)作品的色彩配色、抑或是參考Colourlovers、Kuler 、Colour code等色彩相關(guān)網(wǎng)站,說(shuō)不定能發(fā)現(xiàn)更多不同的色彩配色方法。
本文地址:http://m.likemindfilms.com/tutorial/ui1830.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線詳解
- banner實(shí)戰(zhàn)技巧-版式平衡構(gòu)圖
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏大視
- 如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)
- 做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解
- [圖趣]色彩搭配的核心原則和聯(lián)想
- 扁平化設(shè)計(jì)與可訪問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專題技巧淺析
- WEB設(shè)計(jì)中的排版
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏