Reply
Reply是一款电子邮件应用程序，它使用Material Design组件和主题来创建品牌的沟通体验。
目录
简介
架构
布局
颜色
文字
图标
形状
组件
动效
简介
Reply是一款帮助个人或团队交流通讯的应用程序。它的设计目标是清晰、可读、直观和易用。
Reply品牌形象友好、功能强大并且还带有一些趣味性。
功能美
Reply的品牌专注于通讯。因此，应用程序的设计优先功能质量，将易用性放在非功能性设计之前。
Reply的品牌展示通常与用户操作相结合，例如从品牌logo打开抽屉导航。
架构
Reply的产品架构类似于其它的邮件应用程序：一个包含新旧消息的收信箱和一个围绕操作整理消息的UI结构。消息可以被收藏、发送、删除、标注为垃圾或其它用户自定义的方式。
专注用户任务
由于用户任务大多包含内容删减，因此相对其它UI元素，内容应占据更多屏幕空间。为保证内容和导航拥有足够的空间，Reply在桌面、平板和移动端分别使用了不同的导航模式。
Reply在不同平台使用了不同的模式：平板端（轨道导航），移动端（底部应用栏），桌面端（抽屉导航）。
抽屉导航
在桌面端，Reply使用标准抽屉导航。
抽屉组织：抽屉导航目标（地址）使用图标和文字来表示。抽屉导航的顶部包括设置、账户切换和一个与Reply的logo配对的插入符（箭头）。
抽屉交互：点击logo时，它将收起抽屉变成一个轨道。
Reply的标准抽屉导航能访问导航项目、账户切换和设置。点击logo时，抽屉收起变成轨道。
底部应用栏
在移动端，Reply使用底部应用栏来启动导航。
底部应用栏交互：点击Reply的logo时，它将触发显示带有设置图标和账户头像（可以点击切换账户）的底部抽屉导航。
再次点击Reply的logo将关闭导航并且恢复底部应用栏的默认状态。
Reply的底部应用栏
轨道导航
在平板端，Reply使用轨道导航，每个目标都使用图标表示。
轨道交互：轨道可以通过点击Reply的logo打开成标准抽屉导航。logo旁边的箭头清楚表明了其交互性。
轨道导航非常适用于平板端，因为它在占用很小空间的同时，还能显示大量目标选项。打开轨道导航时出现自定义文件夹，用户可以看到文件夹的标题文本。
导航收起时，轨道上不会显示用户创建的文件夹。由于自定义文件夹都使用相同的图标，所以它们不能仅仅通过图标来区分。
在轨道导航点击Reply的logo打开抽屉导航。
布局
栅格系统
Reply使用响应式栅格系统，间距和列能基于移动、平板和桌面端来适配尺寸。将内容按列分布，信息会随着交互而扩展或收缩。
Reply的栅格系统
高度（海拔）
Reply使用颜色在组件间创造差异。例如，卡片容器能清晰可见是因为其表面使用白色，而应用程序的背景是灰色。
布局紧凑
因为Reply有时会出现密集的内容，去掉阴影有助于降低视觉复杂性。与此同时，它也在每项之间使用较小的间距，给内容留下更大的空间。
Reply中卡片容器表面为白色，能突出显示在应用程序的灰色背景上。
颜色
颜色主题
Reply的颜色主题使用了一个主色（深蓝灰）和辅助色（橙色）。
由于较少用到辅助色，Reply的UI通常为单色，仅仅使用了其主色的衍生色。这种微妙的颜色主题使内容能排除干扰和易于阅读，同时头像也能清晰可见。
无论在何时使用辅助色，它将显著突出在界面上。
颜色主题
文字
字体格式
Reply使用Work Sans字体。字体格式中的类型给Reply的内容提供了必要的文字变化。
字体格式充分利用了Work Sans的五种字重：Light、Regular、Medium、SemiBold和Bold。
Reply的字体格式
Work Sans字形
Work Sans与Roboto相比较
图标
Reply有很微妙的图标样式，能在专注图标识别和功能的同时表现品牌。
1. 为形成一致性，Reply的所有图标都使用相同的底层网格结构。
2. 一套Reply图标集
形状
类别
组件基于它们的尺寸大小组成形状类。形状分类能使你一次设置多个组件值。形状类别包括：
1. 小型组件
2. 中型组件
3. 大型组件
Reply的形状类别
（1）小型组件；（2）中型组件；（3）大型组件
小型组件
扩展型FABs（浮动操作按钮）属于小型形状类。它们的角是圆角，半径为50%。
中型组件
卡片属于中型形状类。它们的角是圆角，半径为50%。
大型组件
底部动作条属于大型形状类。它们的角是圆角，角半径为12dp。
*底部动作条只能改变左上角和右上角。
组件
浮动操作按钮
在移动端，Reply将自定义的FAB嵌入在底部应用栏内。
Reply嵌入在底部应用栏内的自定义FAB
1. 非自定义FAB
2. Reply的FAB使用了自定义颜色和图标
扩展型FAB
在桌面和平板端，Reply使用了一个与抽屉导航匹配的自定义扩展型FAB。
Reply抽屉导航内的扩展型FAB
1. 非自定义扩展型FAB
2. Reply的扩展型FAB使用了自定义的颜色和字体。
底部应用栏和底部动作条
在移动端，Reply在导航和重要操作上使用了自定义底部应用栏。
1. 默认底部应用栏
2. Reply的底部应用栏使用自定义的图标、颜色和形状。Reply的logo作为菜单图标置入到组件中。应用栏中的自定义形状“hold”住了浮动操作按钮。
1. 底部应用栏：在移动端，Reply的底部应用栏是表现导航和操作主要方式。
2. 情景操作栏：当用户希望对多个选项进行选择和操作的时候，底部应用栏转换成了情景操作栏。
1. 底部抽屉导航：点击Reply的logo，底部应用栏将弹出包含导航项和账户切换的底部抽屉导航。
2. 浮动操作按钮：在滚动内容时，底部应用栏将移出屏幕，FAB保持不变。
卡片
Reply在自定义直角的卡片上显示邮件。由于颜色已经表明每张卡片的边缘（无高度标识），所以卡片之间的距离都很小。
这个小间距使屏幕能容纳更多的内容。
1. 向右扫动卡片时，它将显示一个突出邮件的操作。
2. 向左扫动卡片时，它将显示一个删除邮件的操作。
纸片（Chips，小标签）
Reply的纸片使用自定义的文字、颜色和图片大小
布局、文字和颜色的设计使纸片与Reply的品牌风格保持一致
1. 默认纸片
2. Reply的纸片使用自定义的颜色和文字。头像被设计得更大，没有和默认形式一样嵌在内部。
动效
启动界面
Reply的logo动画为路径追踪，灵感来源于卷曲的纸张。
第一次启动Reply时显示动画启动界面
导航转换
Reply使用了短时长和标准缓动，以专注于效率。
这些导航转换的时长为250ms，而不是标准的300ms。
图标和插图
动画插图在用户体验过程中的关键点创造连接，比如完成一个收件箱中的每个项目。
两封邮件的存档触发了一个庆祝动画。
下拉刷新加载序列时使用Reply的logo循环动画。
*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考
