Material Design-顏色挑選與應用

BY Grace │ 2019-01-23 14:10:04

一個網頁設計色調上的使用與CI有著很大的關係，溫馨、純淨、科技感、美味各種感受都能藉由顏色的搭配傳遞給使用者，在質感設計上色票顏色大多是比較鮮明的，顏色的版面上應用也有一些規範。

在開始設計前強烈建議把主要色、次要色等顏色依照下列呈現定義好
Material design 顏色工具

Primary -主要色
(請由配色工具選擇)
Primary light -淡的主色
Primary dark -深的主色
On primary -在主色上的顏色

Secondary 輔助色/次要色
(配色工具上A部分顏色)
Secondary light 淺的次要色
Secondary dark 深的次要色
On secondary 在次要色上

Background 背景色
On background 在背景上
Surface 表面色
(大部分為#ffffff的白色)
On surface 在表面上
Error 錯誤時的顏色
(大部分為色碼#b0020)
On error 在錯誤色上的顏色

提醒您，在挑選顏色時

次要色為非必要色，也可以只使用主要色的深淺變化來呈現
次要色的選色範圍建議選擇顏色工具上A(accent的部分)
主要色與次要色其顏色的變形與關係大略如下圖呈現
顏色50-300上的文字圖標等顏色是深色

顏色與UI應用

在只有主要色時由明暗變化來應用

有主要色與次要色時介面應用

徵才資訊

網頁設計師

網頁設計助理

文章關鍵字：Material Design UI設計介面設計質感設計

更多文章：