Material Design（二）--色彩样式

色彩

调色板

描述颜色常见有四种方式：RGB、CMYK、HSB、HEX（16进制值）

• RGB：由红-Red、绿-Green、蓝-Blue三基色共同描述一个颜色。将三基色各划分为256阶，共计可以描述256256256=约1680万种颜色

  • 用途：常用于描述电子显示其中的颜色

  • 示例：如 rgb(0,0,225) 标示蓝色

• HSB：H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度。

  • HSB模式对应的媒介是人眼

  • 饱和度为500的红色值等于#F44336

• CMYK：印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”

  • C：Cyan = 青色，又称为天蓝色或湛蓝

  • M：Magenta = 品红色，又称为洋红色

  • Y：Yellow = 黄色

  • K：Key Plate(blacK) = 定位套版色（黑色）

• HEX（16进制值）：将RGB的10进制颜色数值转换为16进制数值，常常被用在界面设计和程序开发上

  • 基础色：按照饱和度划分为10个等级，谷歌建议将饱和度500的基础色作为主调颜色

  • 强调色：按照饱和度划分为4个等级，以A开头，如A100

  • 以下是_谷歌官方提供的调色板_，由以下图可见，供选取了红色、粉色、紫色、深紫色、靛蓝色、蓝色、浅蓝色、青色、水鸭色、绿色、浅绿色、绿黄色、黄色、琥珀色、橙色、深橙色、棕色、灰色、蓝灰色、黑白两色，共计20类基础色和16类强调色

  

配色方案

选择一个调色板

• 这些调色板可以根据您的品牌来定义自己的调色板，例如单色，黑白，全色或中性，再或者您可以直接使用Material Design调色板

• 注意：所有调色板应在不同UI元素之间包含足够的对比度

选取材料颜色

• 首先从选好的调色板中选择三个不同饱和度的颜色作为基础色，其中饱和度500的作为主调颜色。然后在其他调色板中选取一个饱和度A开头的强调色，如A200 #68EFAD

  

  基础色-紫色 & 强调色-绿色

  

  应用程序示例

基础色和强调色该如何使用呢？

• 基础色（或主调色）：该颜色应该尽可能的应用在所有界面或组件中

• 合成色：该颜色被用来指示相关动作或信息，合成色可以是基础色更暗或更浅的变体颜色

  

• 强调色：该颜色被应用于浮动操作按钮和交互式元素，例如：

  • 文本字段和游标

  • 文本选择

  • 进度条

  • 选择控件，按钮和滑块

  • 链接

  

  浮动操作按钮 & 切换按钮

以下是一些使用示例：

• 文本中的超链接

  

• 应用栏上的按钮

  *

• 状态栏 & 应用栏 & 按钮

  

• 聚焦状态或选择状态的控件

  

• 备选强调色：分为深色调和浅色调

  • 如果您的强调色太浅或太暗，与背景颜色对比不够明显的话，改如何解决呢？

  • 使用更深或更浅的强调色

    

    备选强调色示例

文本和背景颜色

文本可以用不同的不透明度显示，以表达某些信息相对于其他信息的重要性。文本的不透明度级别取决于背景是更暗还是更浅

浅色背景上的黑色文本

对于浅色背景上的黑色文本，应用以下不透明度级别：

• 最重要的文本的不透明度为87％

• 次要文本（在视觉层次结构中较低）具有54％的不透明度

• 文本提示（如文本字段和标签中的文本提示）和禁用文本的视觉突出性甚至更低，透明度为38％

  

  浅色背景上的黑色文本示例

黑色背景上的白色文本

表格中的值取决于黑色背景上的白色文本重要性的相对水平。出现在彩色背景上的白色文字应该以100％的不透明度显示。

用不透明度替代灰色

透明的黑色或白色文本相对于背景颜色的变化保持清晰、活泼，这使得它比同样上下文中的灰色文本更灵活

图标和其他元素

像白色或黑色图标（而不是一个特定颜色）的元素可以在不透明度为38%的十六进制值上使用，使得它们在任何颜色的背景上表现良好

主题

主题可以让您的应用程序拥有一致的意境。主题指定表面的暗度，阴影的水平和墨水元素适当的不透明度。为了提高应用程序之间的一致性，可以选择浅色和深色主题。

浅色调主题

• 状态栏

• 应用栏

• 背景

• 卡片/对话框

  

  浅色调主题示例

暗色调主题

• 状态栏

• 应用栏

• 背景

• 卡片/对话框
  

  暗色调主题示例