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%