第三章节《样式》
一、颜色（Color）
Material Design的色彩受大胆活泼的色调启发，并配合柔和的环境，阴影和高光组成。
颜色工具（Color Tool）
颜色工具可以帮助你在UI中创建、分享和使用调色板，以及测试不同颜色组合的可访问（accessibility）级别。
创建配色方案
创建配色方案，其中包括主、次色较暗和较亮的配色版本。
测试可访问性
检查在不同颜色背景下文本的易读程度，以 web内容可访问性指南 的易读性标准来评定。
在颜色中预览UI
通过Codepen中的可编辑 html、css 或 javas cript，并结合Material Design中的组件布局来预览配色方案。
Color Tool（Create color palettes for your UI and test color accessibility）
调色板（Color palette）
调色板包括主色（Primary color）、强调色（Accent color）。调色板可以用于插画或品牌颜色。它能够帮助你配合其他人的工作。调色板以主色为基准，通过填充spectrum（光谱）形成一套完整可用的颜色。Google建议用“500”作为主色，其它的颜色作为强调色。
通过统一色调、阴影和透明度能够让应用看起来更统一。
下载色板 0.02MB（.zip）
颜色系统（Color system）
选择一个配色方案
你的应用可以根据相应的品牌特性去自定义一个合适的配色方案。或者，你也可以使用material design的调色板创建整个新的配色方案。
创建配色方案时：
- 使用颜色工具创建的色板应用到你的应用中去
- 确保应用中的元素之间有足够的对比区分（应用需符合可访问性标准）
Expressing Brand in Material（A step-by-step guide to staying on-brand with Material Design）
Material Design的颜色系统
在Material Design中，主色是应用中最常用的颜色。辅助色则是为了凸显应用中的部分UI。
可以选择或可以不选择使用Material Design调色板中的颜色。
主色（Primary color）
主色是应用中界面和组件使用最频繁的颜色。如果页面中没有辅助色存在，那么主色也可用于强调元素。
如果需要创建元素之间的对比，可以使用主色的更浅或更深的色调版本。更浅和更深色调间的对比有助于区分面与面之间的关系，例如状态栏和工具栏之间的区分。
辅助色（Secondary color）
辅助色一般用于突出UI中的某些元素。辅助色可以是你主色的互补色或与主色相近的颜色，但不可以是你主色的更浅或更深的颜色。辅助色与周边元素颜色必须形成对比，它作为强调元素之用必须谨慎使用。
辅助色最好用于：
- 按钮，浮动按钮和文本按钮
- 文本字段，光标和文本选择
- 进度条
- 选择控件，按钮和滑块
- 链接
- 标题（Headlines）
如果你使用主色的“变种”颜色（如比主色更浅或更深的色调）作为强调元素之用，那么可以不使用辅助色去突出元素。也就是说，是否使用辅助色关键看你自己的需要。
在你的应用中使用颜色
主色用于大面积的UI及元素。辅助色可用于突显小面积的UI。如果没有辅助色的话，你可以使用主色代替。
使用主色突显元素，例如突显按钮或复选框。
很少出现的元素（例如警告）不要使用主色，应与其他元素区分开。
辅助色和用于突显UI元素的任何东西都需要谨慎对待和使用。
关于颜色在字体排版易读性方面的指导请看 颜色工具 。
备用的辅助色
如果你的辅助色相对于背景色太深或者太浅，与背景颜色形成了太过于强烈的对比，默认的做法是选择一个相对这个颜色更浅或者更深的颜色作为备用色。
可用性
层级
层次结构指的是根据不同层级的重要性对内容进行组织。合理利用颜色可以向用户表达哪些内容是重要的，哪些内容相对没那么重要。
例如，在无色的背景上（黑或白）， 一个颜色鲜艳的按钮会显得非常突出。
意义
颜色可用于传递页面中各种元素的含义。天气应用可以使用颜色来表示当前天气的状况，而地图应用可以使用颜色来表示交通情况（路况颜色为红色或绿色）。
状态
颜色可以提供以下信息：
- 元素的当前状态, 如开启或禁用按钮
- 一个应用或元素的状态变化
表示状态变化的颜色应该是引人注目的，因为差异细微的颜色用户可能注意不到。为了确保用户能够注意到状态的变化，最好使用多种方式来表示状态变化，例如使用icon或移动元素的位置。
对比
应用的主色和辅助色应确保元素之间的颜色拥有足够的对比度，进而使所有用户都能看到和能使用你的应用。
要了解有关颜色、对比度和可访问性（无障碍）设计的详细信息，请阅读 Material Design的可访问性/无障碍 。
考虑颜色的功能可见性（affordances）。站在更高层次来看待颜色，你需要使用颜色去向用户传递信息。
对于患有白内障的个体来说，小文本阅读起来非常困难，在他们眼中你的UI是模糊不清的。
为适用于所有用户，提供放大文本的设置。
背景中的文本
文本需要在其背景中突显出来，因此建议：
- 暗灰色文本应用在浅色背景上
- 浅灰色文本应用在深色背景上
如果你的应用有浅色和深色主题，那么文本的颜色就需要对应主题的颜色。
易读性
文本在有色背景上需满足可访问性标准保证文字的易于辨别。背景和文本必须使用颜色和不透明度，并遵循可访问性标准。网站内容可访问性指南（AA） 要求普通文本要有4.5:1的对比度，大文本需要有3:1的对比度。
深色文本在浅色背景上
文本背景是深色还是浅色决定了文本自身的不透明度。对于浅色背景上的深色文本，使用如下不透明度：
- 最重要的文本使用87%不透明度
- 次级文本的可视等级较低，所以使用54%不透明度
- 文本提示（如文本字段和标签）和禁用文本的可视等级更低，所以使用38%不透明度
| 深色文本（#000000） | 不透明度 |
|---|---|
| 主色 | 87% |
| 辅助色 | 54% |
| 禁用文本，提示文本 | 38% |
| 分隔线 | 12% |
浅色文本在深色背景上
白色文本在有色背景上的不透明度需要是100%。
| 浅色文本（#FFFFFF） | 不透明度 |
|---|---|
| 主色 | 100% |
| 辅助色 | 70% |
| 禁用文本，提示文本 | 50% |
| 分隔线 | 12% |
Icons和其他元素
像icons这样的元素得益于它在38%的不透明度上有一个黑色或白色的十六进制值(而不是一个特定的颜色)，所以它可以运用在任何颜色的背景之上。
| 深色icons（#000000） | 不透明度 |
|---|---|
| 被触发icons | 54% |
| 未被触发icons | 38% |
| 浅色icons（#FFFFFF） | 不透明度 |
|---|---|
| 被触发icons | 100% |
| 未被触发icons | 50% |
有色的文本和背景
在有色背景上使用有色文本需要限制使用重要的文本元素。有色文本一般用于表示重要性和突出选择。
请参考 颜色工具 确定用于排版的某些前景色是否符合在不同颜色背景上的可访问性标准。
主题
主题能够让你的应用有一个统一的基调。主题规定了明暗，阴影和透明度，为了提高应用间的一致性，提供两种主题选择：浅色和深色。
下载主题 （1.23 MB(.ai)）
浅色主题
1.状态栏
2.应用栏
3.背景
4.卡片/对话框
浅色主题调色板
深色主题
1.状态栏
2.应用栏
3.背景
4.卡片/对话框
相关:
Using the Material Theme（Customize the design to your brand identity）
扫一扫
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
