资讯详情
关于Reply
产品架构
布局
颜色
排版
图标
组件
动效
Reply 是一个电子邮件应用程序，它使用material设计组件和material主题来创建品牌传播体验。
Reply是一个帮助个人和群体沟通的应用。 它的设计旨在提高清晰度，易读性，直观性和易用性。
Reply的品牌传达出友好性、功能性和精巧的特色。
功能美学
Reply的品牌强调沟通。 因此，应用程序的设计优先考虑功能性，将易用性放在没有功能目的的设计元素上。
Reply的品牌推广通常与用户操作相适应，例如从品牌图标访问导航抽屉。
产品架构
Reply使用类似于其他电子邮件应用的产品架构：包含新消息和存档消息的收件箱，以及围绕组织和采取与这些消息相关的操作构建的UI。 邮件可以加星标，发送，删除，标记为垃圾邮件，或以用户设置的自定义方式进行整理归类。
专注于用户任务
由于用户任务主要涉及内容生成和消费，因此屏幕空间专用于内容而非其他UI元素。 为确保内容和导航都有足够的空间，Reply会对桌面设备，平板电脑和移动设备使用不同的导航模式。
导航抽屉
在桌面上，Reply使用标准导航抽屉。
抽屉组织
抽屉的目标位置是使用图标和文本表示。 导航抽屉的顶部包含设置，帐户切换器以及与Reply的LOGO配对的插入符号（或箭头）。
抽屉交互
点击时，图标将抽屉折叠成轨道。
底部应用栏
在移动设备上，Reply使用底部应用栏启动导航。
底部应用栏交互
点击Reply的LOGO后，它会显示一个底部导航抽屉，设置了图标和帐户头像（可以点击以切换帐户）。
再次点击Reply的LOGO时，导航将关闭，底部应用栏将返回其默认状态。
轨道导航
在平板电脑上，Reply使用轨道导航，其中每个目标位置都由一个图标表示。
轨道交互
通过点击Reply的LOGO，轨道可以打开标准导航抽屉。LOGO旁边显示的箭头表明LOGO是交互式的。
轨道导航非常适合在平板电脑上使用，因为它可以显示大量的目标位置，同时占用的空间非常小。 打开轨道导航时会显示自定义文件夹，允许用户读取文件夹标题文本。
折叠时，轨道不包括用户创建的自定义文件夹。 这是因为自定义文件夹都使用相同的图标，因此无法仅通过图标区分它们。
网格系统
Reply使用响应式网格，允许在移动设备、平板电脑和桌面上更改列和内边距大小。 内容放置在列的栅格中，信息根据交互展开和收缩。
Reply的网格系统，缩小到50％
海拔
Reply使用颜色来创建组件之间的区别。 例如，卡片的容器是可见的，因为卡片的界面填充为白色，而应用程序背景填充为灰色。
密集型布局
因为Reply有时候会显示密集的内容，所以删除阴影会降低视觉的复杂性。但它能够为多个项目设置更小的内边距，让内容拥有更多的空间。
颜色主题
Reply的颜色主题使用主色（深蓝灰色）和辅色（橙色）。
由于辅色很少使用，因此Reply的UI通常是单色的，使用其主色的变体。 这种精妙的色彩主题可以让人轻松阅读内容而不会分心，并且可以轻松看到图片和头像。
每当使用Reply的辅色时，都能显示出突出的视觉效果。
字体比例
Reply使用Work Sans作为字体。字体比例中的所有项目都提供了Reply内容所需的排版样式。
字体比例通过使用六种字体粗细的Work Sans字体来表现多种不同粗细的字形：Light，Regular，Medium，SemiBold和Bold。
Reply的字体比例
Work Sans的字形
图标
Reply的图标具有精妙的风格，在注重图标的识别和功能性的同时也传递了品牌形象。
为了创建一致性，所有Reply的图标共享相同的底层网格结构。
Reply图标的集合
分类
组件根据尺寸分类为形状组。这个分组让你整组一次性完成设置数值。形状分类包括：
小组件
中等组件
大型组件
Reply’s 的形状分类
小组件
中等组件
大型组件
小组件
扩展浮动操作按钮属于小的形状分类。它们的拐角是圆角，圆角半径为50%
| 元素 | 类别 | 属性 | 值 |
| 扩展FAB | 小组件 | 字体大小 | 圆角 50% |
中等组件
卡片属于中等形状分类。它们的拐角是圆角，圆角半径为50%
| 元素 | 类别 | 属性 | 值 |
| 卡片 | 中等组件 | 字体大小 | 圆角 0dp；0dp；0dp；0dp |
大型组件
底部动作条属于大的形状分类。它们的拐角是圆角，圆角半径为12dp
| 元素 | 类别 | 属性 | 值 |
| 底部动作条 | 大型组件 | 字体大小 | 圆角 12dp；12dp；n/a;n/a＊ |
＊底部动作条的拐角只在左上和右上的位置。
浮动操作按钮
在移动设备上，Reply会在底部应用栏中嵌套自定义浮动操作按钮。
扩展浮动操作按钮
在桌面和平板电脑上，Reply使用与导航抽屉配对的自定义扩展浮动操作按钮。
底部应用栏，底部动作条
在移动设备上，Reply使用自定义底部应用栏进行导航和重要操作。
默认底部应用栏
Reply的底部应用栏使用自定义图标，颜色和形状。 Reply的LOGO已合并到组件中，用作菜单图标。 栏中的自定义形状包含浮动操作按钮。
卡片
Reply将邮件显示在自定义圆角矩形的卡片上。 卡片之间的内边距非常小，这是因为（在没有高度差的情况下）颜色已经指示了卡片的边界了。
这种小的内边距使更多内容能显示在页面上。
纸片
Reply输入纸片应用自定义排版，颜色和图像大小。
启动页面
Reply的图标动效路径灵感来自于卷曲的纸张。
首次启动Reply会显示动画启动页面。
导航过渡
Reply使用较短的持续时间和标准缓动来着重提高效率。
这些导航过渡使用250ms而不是标准的300ms。
图标和插画
插画动画在用户旅程中的关键点创建连接，例如完成一个收件箱中的每个项目。
保留的两封电子邮件被存档，因此触发了一个庆祝动画。
视频播放器
