iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 6

第六步 - 第一站,顏色萬花筒,七彩村(顏色配置相關基礎)

各位大家好,我是喵橘,今天說明的是跟顏色配置相關的知識,要讓一個網頁展現出真正的質感,就要搭配正確的色彩。

色彩相關術語

  1. 飽和度(英文:Saturation):指的是一個顏色的總體強度或色度。
  2. 明度(英文:Value): 指的是一個顏色的整體亮度或暗度。
  3. 色調(英文:Tone): 分為明色調與暗色調。明色調是一種與白色顏色的混合顏色,反之為暗色調。
  4. 色相(英文:Hue): 指的是構成所有色彩的最基本的顏色,沒有飽和度和明度影響。
  5. 彩度 (英文:Chorma):表非色彩的鮮豔度。

十二色輪

在設計網頁之前該如何去選擇網頁所需要的配色呢?我們可以去看十二色輪來去選擇,它是用圓圈顯示12種顏色,用於表示每種顏色之間的相互關係,來進行不同視覺衝擊的設計。

https://ithelp.ithome.com.tw/upload/images/20190906/20117282WCPVK422m4.png

色彩的傳達

色彩在無形之中會與人的情緒來做結合,透過色彩的變化會直接影響人的視覺,所以,在設計網頁的時候,可以利用色彩的搭配傳遞自己的想法。所以,顏色就細分為暖色系、冷色系和中性色系,為了讓大家可以更加明白,如下表所顯示:

顏色 色系
紅、橙、黃 暖色系
綠、藍、青 冷色系
青紫、紫、紅紫 中性色系

色彩意涵

每一種顏色都會有代表的意涵,所以,要根據自己產業的特性進行正確的配色,以下我就說明每一種顏色代表的意思。

  1. **紅色:**紅色是火焰與血液的顏色。抽象聯想,例如:興奮、熱情、刺激、危險、愛情、生命。代表職業:消防人員

https://ithelp.ithome.com.tw/upload/images/20190907/20117282KvWhJQRE74.png

  1. 橘色:是秋天與作物收成的顏色。抽象聯想,例如:愉快、暖和、活潑、親切、歡樂。代表職業:工地的工安人員、食品業、百貨業。

https://ithelp.ithome.com.tw/upload/images/20190907/20117282I0g05i9BTO.png

  1. 黃色:太陽的顏色。抽象聯想,例如:光明、希望、年輕、注意、明朗、緊張。代表職業:不動產、金融業、電氣業、照明業、化工業。

https://ithelp.ithome.com.tw/upload/images/20190907/201172822mmtpF1UtS.png

  1. 綠色:大自然的顏色。抽象聯想,例如:和平、舒適、新鮮、安全、青春、自然。代表職業:郵差、太陽能、風力、軍人、種植業、藥師。

https://ithelp.ithome.com.tw/upload/images/20190907/20117282oOG0j1IyEg.png

  1. 藍色:天空與海洋的顏色。抽象聯想,例如:清爽、知性、清涼、沉靜、寂靜、純粹。代表職業:漁業、潛水業、氣象觀測、清潔公司、造船界、衛浴設備。

https://ithelp.ithome.com.tw/upload/images/20190907/20117282u0O0lShehg.png

  1. 紫色:與皇室相關的顏色。抽象聯想,例如:高貴、豪華、不良、思念、悲哀。代表職業:表演者、化妝品、裝飾品、服裝業、出版業。

https://ithelp.ithome.com.tw/upload/images/20190907/20117282U6gU67Ni0k.png

  1. 白色:與純潔相關的顏色。抽象聯想,例如:清淨、明朗、清晰、透明、完美、智慧。代表職業:護理人員、醫生

https://ithelp.ithome.com.tw/upload/images/20190907/20117282Kzlxjkj6wE.png

  1. 黑色:與神祕相關的顏色。抽象聯想,例如:品味、科技、權力、莊重、神秘、嚴肅。代表職業:公關、魔術師、酒吧。

https://ithelp.ithome.com.tw/upload/images/20190907/201172829TKG22Dlrg.png

顏色的調配

色彩的組合方式,有同色相的配色、相同彩度的配色或類似色調的調配等。但最重要的事情,就是要求統一性,避免畫面的雜亂。

  • 類似的調和: 色彩組合的方式,有相同色相的配色、相同彩度的配色或類似的色調配色,可以展現出不同的情境出來。配色講求調和感,先要求統一。配色的統一感,在色彩與色彩之間有某種共通的相似性,才能存在。

  • 對照的調和:強調變化的樂趣,而內部又產生統一感,這種調和又稱為對照調和。凡是具有活動感和相互強調調和顏色的方式,就屬於這一種類。

明天預告

今天講解 顏色配置相關基礎,明天會講解 網頁設計前的方便軟體推薦,明天再見,鞠躬。


上一篇
第五步 - 靜靜思考,預想可能遭遇事件(Javascript 入門介紹)
下一篇
第七步 - 找尋到關鍵的密鑰(網頁設計前的方便軟體推薦)
系列文
一步一腳印,探索網頁前端設計之美33

尚未有邦友留言

立即登入留言