Study - Material Design 之 Color

Color

界面的 大胆、图形化、有意义是Material Design的关键性原则之一

• 在系统里大面积使用色块，用色块来展示主要内容和标题，让界面的主次感更佳突出
  

调色板

谷歌官方提供的调色板，共计20类基础色和16类强调色

• 基础色

  按照饱和度划分为10个等级

  • 主色（Primary color）

    谷歌建议将饱和度500的基础色作为主色

  • 辅助色（Secondary color）

    颜色应该与主色调保持相似，即在主色调的基础上加深或者变浅

注：官方并未明确具体使用多少饱和度的颜色（调色板给出了九种（除开500）为开发者提供选择）

• 强调色（Accent color）

  按照饱和度划分为4个等级，以A开头，如A200

配色

• 选择调色板

  • 可以自定义应用的调色板，以适配你的品牌颜色
    
    （例如单色，黑白，全色）

• 创建配色方案

  • 从材料设计调色板中选择颜色
  • 尽量将选择的颜色限制为基础色板中的三种色调和强调色板中的一种色调
  • 所有调色板应在不同UI元素之间包含足够的对比度。

颜色使用

• 主色

  • 该颜色应该尽可能的应用在所有界面或组件中，是应用中出现最频繁的颜色

• 辅助色

  • 该颜色被用来指示相关动作或信息。

• 强调色

  • 该颜色被应用于浮动操作按钮和交互式元素
  • 适合用于：
    • 文本字段和游标
    • 文本选择
    • 进度条
    • 选择控件，按钮和滑块
    • 链接

在使用主色的区域下方，相关信息使用了颜色更浅的主色即辅助色进行着色。浮动操作按钮使用强调色进行强调。

举例

• 开关使用强调色，系统栏使用主色，工具栏使用辅助色
  
• 强调色可以用在有代表性的元素上，例如按钮和链接
  
• 不要在应用栏、较大的色块区域上使用强调色
  
  

文本

• 文本应该在其背景中清晰可见

• 若应用同时含有亮色和暗色主题，文本颜色应该要和每个主题都有足够的对比度

• 浅色背景中的深色文本
  

  深色文本（#000000）	不透明度
  主文本	87%
  辅助文本	54%
  禁用状态的文本、提示文本	38%
  分隔线	12%

• 暗色背景上的白色文本
  

  亮色文本（#FFFFFF）	不透明度
  主文本	100%
  辅助文本	70%
  禁用状态的文本、提示文本	50%
  分隔线	12%

• 图标等元素

  深色图标（#000000）	不透明度
  可用的图标	54%
  禁用的图标	38%

  亮色图标（#FFFFFF）	不透明度
  可用的图标	100%
  禁用的图标	50%

Material Design 配色方案的Web工具