材料設計-顏色挑選與應用
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應用
在只有主要色時由明暗變化來應用

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

更多文章:

  1. 卡片列表與圖片列表
  2. Material Design 動態效果
  3. 比較Material Design 1
  4. Material Design 如何應用
  5. 材料設計-文字排版與應用

回應