網頁配色小學堂
談到配色就得說到色彩學,色彩學是設計師最重要的基本知識,(小天忽然想起背色彩學辛酸的日子)。除了需要對顏色認識,對於心理學也需要略懂一二,色彩學與心理學兩個領域可是有說不清的關係呢,色彩設計的運用會帶給使用者觀感的影響,例如橙色給人溫暖感,藍色使人覺得理性。
色彩學的細節真的非常多,說到小天嘴角起泡都說不完,所以此篇的重點著重在天矽網頁設計團隊如何進行網頁配色喔~
我們先談談配色的基本方向:
色彩搭配的方式有成千上萬種,小天就以最常用的配色方向與大家做分享~
一、單色配色:僅使用一種單色,做明度和彩度的變化,整體視覺較有一致性
二、相似色搭配:選一主色,搭配該色在色環上相鄰的三種顏色,視覺上比單色配色更有豐富和層次的感覺。
三、互補色搭配:選一主色,搭配該配色180度的色向,視覺上會較活潑和強烈感。
四、三角色搭配:選好一種顏色之後,搭配該色在色環上呈現正三角形端點的顏色,可以讓視覺有豐富的感覺。
色彩計畫執行步驟:
步驟一、使用客戶的企業色當主色:
執行一個專案時,通常會先拿到客戶的LOGO,而為了快速掌握設計整體方向,通常會採用企業色當作主色。另外,根據調查發現,前100大的品牌中,他們的品牌顏色前四大代表色依序是:藍、黑、紅、黃。橘色、綠色和紫色被使用的比率則相對少了許多。
步驟二、選擇網站的輔助色(大約1~2種):
輔助色的規劃,有幾個方向可以發想,
1.客戶的產業別
2.客戶主攻的族群年齡和性別
3.客戶自主提出的需求
大約會有這三大方向,其中產業別是最好且最直覺性的選擇方向,例如旅遊產業可以選擇與企業色對比的顏色(對比配色法),展現活潑吸睛的形象風格。
步驟三、細調選擇的顏色組合:
影響配色除了色相還有其他兩個要素,明度和彩度。這可是色彩三要素呢!了解這三個元素,就可以變化出千千萬萬種色彩搭配。
例如,選擇了藍色和黃色,但透過不一樣的明度(可能加多一點白)、彩度(調整鮮豔度等),變化出不一樣的氛圍。
天矽網頁設計團隊大致上會以這樣的流程設定整體色彩,其中的細節只能意會不能言傳了。天矽裡的每個設計師想破頭腦就是為了忠實呈現出客戶的需求,製作出合乎客戶的產品和公司理念等。
最後再補一句,配色真的很難,不是版型隨便放一放就會出現想法的~
另外,小天整理了幾個好用的配色網,提供各位看官使用:
- 日本傳統色配色網 http://nipponcolors.com/
- 透過已選擇的主色,調整其他配色 https://www.colorhexa.com/
- 真的沒想法的話,可以來這邊點出靈感 https://color.hailpixel.com/
留言列表