iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
0
自我挑戰組

介面設計流程與開發2系列 第 15

淺談介面設計的色彩運用,以Daily UI 02- Credit Card Checkout為例 2/3

視覺上,除了圖像、排版、文字之外,色彩的使用也是很重要的!色彩可以影響整體視覺的感受、營造品牌氛圍,也可以指引使用者操作行為。

主色調
選擇一個顏色作為介面的主色,再以同色系的色彩定義成一個整體視覺的主要色調。通常為選擇色系的深、淺色,加上主色共三色。
https://ithelp.ithome.com.tw/upload/images/20180103/20103234ksl6Utlik4.png
圖片來源:Material Design

次要色(強調色)/ 備用次要色(強調色)
選定好主色後,再選擇一個顏色作為次要色(強調色),以深、淺色當作備用次要色彩,用於按鈕、開關、滑感、重要的提示…等,主要操作按鈕與元件上。
https://ithelp.ithome.com.tw/upload/images/20180103/20103234HzyGrj098o.png
圖片來源:Material Design

強調色的色彩選擇上,建議選擇與主色對比性較大的色彩。備用強調色則以該色系的深、色為主,用於背景色彩搭配的調整,過亮或過暗皆會導致視覺上不舒適。

https://ithelp.ithome.com.tw/upload/images/20180103/20103234fyN0KDsrq8.png
左:視覺上不會過亮或過暗,色彩搭配較為合適。
右:色彩過暗,視覺上不舒適,標題也看不清楚,色彩搭配較不合適。
圖片來源:Material Design

主色+強調色
https://ithelp.ithome.com.tw/upload/images/20180103/20103234bgx3pseHmS.png

圖片來源:Material Design
強調色並非一定要有,但對於使用者於介面上的操作行為會有良好的指引效果。

漸層色搭配
認識漸層色之前,先來看色相環認識對比色、類似色、補色,RGB、CMYK顏色會有差異。
https://ithelp.ithome.com.tw/upload/images/20180103/20103234xnF9jy9nGf.png
https://ithelp.ithome.com.tw/upload/images/20180103/201032341ZuFpFLluu.png

漸層色大致可分為同色系漸層、類似色漸層、對比色漸層、補色漸層,如下:
同色系漸層:選定一個色彩,製作深淺變化。
https://ithelp.ithome.com.tw/upload/images/20180103/20103234R043TQD7Pp.png

類似色漸層:色相環左右30度角之色彩,兩色或多色漸層。
https://ithelp.ithome.com.tw/upload/images/20180103/2010323433Gxeyonk6.png

對比色漸層:色相環120角之色彩,兩色漸層。
https://ithelp.ithome.com.tw/upload/images/20180103/201032340bAUgEsglr.png

補色漸層:色相環180角之色彩,兩色漸層。
https://ithelp.ithome.com.tw/upload/images/20180103/201032343LWvZOEl2t.png

Daily UI 02- Credit Card Checkout的色彩運用
漸層搭配:
類似色漸層(淺紫藍->粉)

強調色 / 備用強調色:
以漸層色彩中的粉色調作為色彩的選擇,以與粉色相近色彩的桃紅色為強調色。桃紅色為高彩度、高飽和度的色彩,色彩的視覺強度夠強,可以讓使用者在操作上快速找到按鈕、文字、元件,除了可以指引使用者操作流程,也讓整體視覺看起來較統一。
https://ithelp.ithome.com.tw/upload/images/20180103/20103234TXvuMhSAZQ.png
關於更多色彩搭配運用,大家可以去Material Design看更多範例,上面還有詳細介紹如何使用色彩於介面設計喔!

-By Amanda


上一篇
信用卡付款行為之設計思考,以Daily UI 02- Credit Card Checkout為例 1/3
下一篇
淺談色彩意象與色彩搭配,以Daily UI 02- Credit Card Checkout為例 3/3
系列文
介面設計流程與開發230
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言