/
/
網站色彩計畫 (2021最新)
色彩計畫

網站色彩計畫 (2021最新)

網頁色彩影響了訊息的傳遞,更影響了一個品牌的視覺形象,為了讓配色的使用更有效果,必須要擬定一個完整的色彩計畫。進行配色時,謹記 KISS 原則(Keep it Simple, Stupid),盡可能減少使用色彩,避免使用過多的顏色。

進行網頁設計時,我們可以思考以下六種顏色:

主色

可以延續 Logo 或企業形象的標準色,例如:可口可樂的主色是紅色、星巴克的主色是綠色,這都是讓人印象深刻的品牌顏色,不同的顏色有著不同的色彩意象,我們可以透過聯想來找出適合自己的主色,例如:象徵熱情的紅色、象徵自然的綠色等。

次要色

用於一般的按鈕、標題、超連結等,可以輔助主色的呈現,一般會選擇一至三種搭配主色。配色可以採用以下四種方案:

1. 單色配色:採用與主色相同的基色,單色配色很容易搭配,可使畫面產生和諧感。

color scheme 01 1
圖片來源:Patch Property

2. 相近色配色:採用與主色相關、不相互衝突的色彩。

color scheme 03
圖片來源:Superb AI

3. 對比色配色:採用與主色相對立的色彩,具有強烈對比,可以吸引使用者的注意力。

color scheme 05
圖片來源:Owltastic

4. 中性色配色:主色與中性色(黑、白、灰)搭配,可以引起視覺衝擊與聚焦。

color scheme 07
圖片來源:anime.js

按鈕顏色

1. 一般按鈕:使用最普遍,主要目的是讓使用者知道有連結等用途,一般採用主色或次要色呈現即可。
2. 呼籲行動按鈕 (Call to Action):引導使用者點擊,常用於宣傳頁、登入頁,同一個畫面不會出現太多次,一般採用與主色或次要色對比強烈的顏色。

color scheme 08
圖片來源:Liquid

文字顏色

1. 超連結:用以連結至其他網頁,一般採用主色或次要色呈現,並加上下底線。
2. 主要文字:呈現網頁主要資訊,以背景色全白 (#FFFFFF) 為例,較適合閱讀的文字顏色範圍為 #333333#666666
3. 次要文字:網頁次要資訊,如備註欄位等,採用比主要文字更淺的灰色,設定時需注意行動裝置的閱讀性是否良好。

color scheme gray
常用灰色色表

冷灰色與暖灰色的使用時機
針對網頁主色調搭配使用的灰色,若想呈現一致的暖色調可以搭配暖灰色(略帶紅色的灰色);呈現冷色調則可以搭配冷灰色(略帶藍色的灰色)

裝飾線顏色

主要用以分隔文字資訊、區域,如邊框、表單、分隔線 (Divider)。採用比次要文字更淺的灰色,設定時需注意行動裝置的辨識度。

其他

白色:用於深色底搭配的文字或圖示,提升其可讀性與辨識度。
背景色:用於段落與段落的區隔或是突顯內容資訊。

推薦配色苦手的參考網站

當你毫無頭緒的時候,不妨嘗試從其他的設計師的作品獲得靈感,在此推薦以下網站:
Dribbble:推廣平面設計、網頁設計、插畫、攝影等其他創造性領域的商業社交平台。
Behance:提供創意專業人員展示作品及觀摩他人創作的線上平台。

一起為網站進行色彩計畫吧!

配色技巧是可以經由不斷努力與累積而提升,好的配色可以連結使用者的記憶,提昇品牌形象,進而影響服務對象對你的信任度。期望透過以上文章,可以讓你更加了解色彩的搭配,並實際應用在網頁設計上,同時歡迎分享你們的色彩計畫!

想看看色彩計畫如何實踐到網頁設計上,可以閱讀這一篇:最佳化你的 Elementor – Fonts / Color / Section 一次搞定 🙂

參考資料

滬江網(2019.04.25)。七條定律,讓配色更加美好【滬江網】。取自 https://www.hujiang.com/fyuid_s/p889838/
3 年 2 班程遠(2019.04.25)。看過那麼多UI 配色指南,這篇可能是最全面的(附大量實例)【優設網】。取自 https://www.uisdc.com/ui-color-design-guideline
卡斯伯(2019.04.25)。鐵人賽:色彩運用(3) – 按鈕的配色【卡斯伯】。取自 https://wcc723.github.io/design/2018/10/24/button-color/

延伸閱讀
相關標籤:
SHARE
分享在 facebook
分享在 twitter
分享在 linkedin
WRITTEN BY
Hend Chen
Hend Chen
專長於網頁設計 、UI 設計、品牌設計。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe