Reply

Reply 是一款电子邮件应用程序，它使用 Material Design组件和 Material Theming 来创建交流体验。

一. 关于 Reply

Reply 是一款帮助个人和团体进行交流的应用程序，它旨在提供清晰、已读、直观和易于使用的功能。

Reply 的品牌彰显友善、干练，并跳脱一些灵性。

功能性的美学

Reply 的品牌强调沟通，因此，应用程序的设计优先考虑功能质量，因此功能性的优先级大于易用性。

Reply 的品牌通常与用户操作配对，例如可以点击品牌 Logo 访问导航抽屉。

二. 产品架构

Reply 使用类似于其他电子邮件应用程序的产品架构：包含新邮件和已归档邮件的收件箱。还有一系列 UI 与邮件操作相关，邮件可以加注星标，也可以发送、删除和将邮件标记为垃圾邮件，或者以自定义的方式组织。

专注用户的任务

由于用户任务主要涉及内容的生成和使用，屏幕空间专注于其他元素上的内容。为了确保内容和导航都有足够的空间，Reply 对 PC、平板电脑和移动设备使用不同的导航模式。

导航抽屉

在 PC 上，Reply 使用标准的导航抽屉。

抽屉组织

抽屉栏同时使用图标和文本表示，导航抽屉的顶部包含设置、账户切换器和 Reply Logo（与之配对的箭头）。

抽屉交互

轻按时，Logo 会将抽屉折叠成滑轨。

底部应用栏

在移动设备上，Reply 使用底部应用栏进行导航。

底部应用栏交互

轻按 Reply 图标后，它会显示一个底部导航抽屉，其中带有设置图标和账户头像（可以轻按以切换账户）。

再次点击 Reply 图标，导航关闭，底部的应用栏返回其默认状态。

轨道（Rail）导航

在平板电脑上，Reply 使用轨道导航，其中每个目的地均由一个图标表示。

轨道交互

轻按 Reply Logo，即可将轨道展开成标准导航抽屉，Logo 旁边箭头清晰可见。

轨道导航非常适合在平板电脑上使用，因为它可以显示大量图标，但占用的空间却很小。当打开轨道导航时，将显示自定义文件夹，允许用户读取文件夹标题文本。

折叠时，滑轨不包含用户创建的自定义文件夹。这是因为自定义的文件夹都使用相同的图标，因此不能仅通过图标区分它们。

三. 布局

网格系统

Reply 使用了自适应网格系统，该系统可以根据屏幕宽度（例如移动设备、平板电脑或 PC）自动调节列（Column）和填充（Padding）的大小。内容堆叠在列中，这些列在用户交互时会垂直扩展和收缩。

标高

Reply 使用颜色来区分组件，例如卡片容器是可见的，因为卡片表面颜色为白色，而应用背景为灰色。

紧密的布局

由于 Reply 有时会显示密集的内容，因此消除影响有助于降低视觉复杂度，这样项目之间的间隙也会比较小，可以为内容留出更多空间。

四. 颜色

颜色主题

Reply 使用深蓝灰色（Dark Blue-Gray）作为主色调，橙色（Orange）作为副色调。

由于副色调很少使用，所以 Reply 的 UI 经常使用主色调的变体。这种微妙的颜色主题使内容易于阅读而不会分散注意力，并且易于看到用户头像。

当使用到 Reply 的副色调时，会产生明显的影响。

五. 版式

类型规模

Reply 为应用内容提供了不同的字体比例，所有的内容都使用 [Work Sans](https://fonts.google.com/specimen/Work+Sans) 作为字体，并使用不同的权重（weight）。

六. 图标

Reply 的图标具有微妙的样式，既能够表达品牌，又可以专注于图标的识别的功能。

七. 形状

类别

组件根据其大小分为不同的形状类别，这些类别使你可以一次设置多个组件值，形状类别包括：

小组件

中组件

大组件

小组件

扩展的悬浮按钮（Extended Floating Action Button）使用圆角，角半径为50%。

中组件

卡片（Card）使用方角，0dp。

大组件

底部表格（Bottom Sheet）使用圆角，12dp。

底部表格页仅可以调整左上角和右上角的形状。

八. 组件

悬浮按钮（Floating Action Button）

在移动设备上，Reply 将自定义的悬浮按钮嵌套在底部的应用栏中。

1. 基准悬浮按钮；

2. Reply 的悬浮按钮使用自定义的颜色和图标。

扩展的悬浮按钮（Extended FAB）

在 PC 和平板电脑上，Reply 使用与导航抽屉配对的自定义扩展悬浮按钮。

1. 基准扩展悬浮按钮；

2. Reply 的扩展悬浮按钮使用自定义的颜色和图标。

底部应用栏（Bottom App Bar）、底部表格（Bottom Sheet）

在移动设备上，Reply 使用自定义的底部应用栏进行导航和重要操作。

1. 基准底部应用栏；

2. Reply 的地步应用栏使用自定义的图标、颜色和形状。Reply 的 Logo 合并在组件中，用作菜单图标。栏中的自定义形状包含悬浮按钮。

底部应用栏

在移动设备上，Reply 的底部应用栏是执行导航和操作的主要方式。

上下文操作栏

当用户选中多个项目时，底部应用栏转换为上下文操作栏。

底部导航抽屉

当按下 Reply Logo 后，底部应用栏会显示为一个底部导航抽屉，其中包含导航项目和一个账户切换器。

悬浮按钮

当滚动屏幕时，底部应用栏消失，但是悬浮按钮依然存在。

卡片（Card）

Reply 将电子邮件显示在自定义方角的卡片上，卡之间的间隙非常小，通过颜色表示每个卡之间的边界（没有使用标高）。

较小的填充可以使更多内容适合屏幕展示。

将卡向右滑动，将显示删除邮件的操作。

将卡向左滑动，将显示加注星标的操作。

面包屑（Chip）

Reply 的面包屑组件使用自定义的版式、颜色和图像大小。

1. 基准面包屑组件；

2. Reply 的面包屑使用自定义的颜色和版式，头像的图像被放大。

九. 交互

启动画面

Reply 的 Logo 动画受弯曲的纸片所启发，描绘了一条路径。

导航过渡

Reply 使用更短的持续时间和标准放缓（standard easing）以专注于效率。

图标的插画

动画插画在用户行为的关键节点建立联系，例如查看完收件箱中的所有邮件。

剩下的两封电子邮件被存档，触发庆祝动画。

当向下拉动页面加载新邮件时，Reply 的 Logo 动画会持续循环播放。