Material Design Reply

这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共百余篇，欢迎关注哦。

 

目录

关于Reply
产品架构
布局
颜色
排版
图标
组件
动效

Reply 是一个电子邮件应用程序，它使用material设计组件和material主题来创建品牌传播体验。
​​

 

关于Reply

Reply是一个帮助个人和群体沟通的应用。 它的设计旨在提高清晰度，易读性，直观性和易用性。

Reply的品牌传达出友好性、功能性和精巧的特色。
​​

功能美学

Reply的品牌强调沟通。 因此，应用程序的设计优先考虑功能性，将易用性放在没有功能目的的设计元素上。

Reply的品牌推广通常与用户操作相适应，例如从品牌图标访问导航抽屉。

 

产品架构
Reply使用类似于其他电子邮件应用的产品架构：包含新消息和存档消息的收件箱，以及围绕组织和采取与这些消息相关的操作构建的UI。 邮件可以加星标，发送，删除，标记为垃圾邮件，或以用户设置的自定义方式进行整理归类。

专注于用户任务
由于用户任务主要涉及内容生成和消费，因此屏幕空间专用于内容而非其他UI元素。 为确保内容和导航都有足够的空间，Reply会对桌面设备，平板电脑和移动设备使用不同的导航模式。

​​
Reply在平板电脑（轨道），移动设备（底部应用栏）和桌面（导航抽屉）上使用不同的导航模式。（有图示）

 

导航抽屉

在桌面上，Reply使用标准导航抽屉。

抽屉组织
抽屉的目标位置是使用图标和文本表示。 导航抽屉的顶部包含设置，帐户切换器以及与Reply的LOGO配对的插入符号（或箭头）。

抽屉交互
点击时，图标将抽屉折叠成轨道。

​​
Reply的标准导航抽屉可以访问导航项，帐户切换器和设置。 点击Reply的LOGO时，抽屉会折叠成轨道。

 

底部应用栏

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

底部应用栏交互
点击Reply的LOGO后，它会显示一个底部导航抽屉，设置了图标和帐户头像（可以点击以切换帐户）。

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

 

轨道导航

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

轨道交互
通过点击Reply的LOGO，轨道可以打开标准导航抽屉。LOGO旁边显示的箭头表明LOGO是交互式的。

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

折叠时，轨道不包括用户创建的自定义文件夹。 这是因为自定义文件夹都使用相同的图标，因此无法仅通过图标区分它们。
​​
点击Reply的LOGO时，Reply的轨道导航显示导航抽屉。

 

布局

网格系统
Reply使用响应式网格，允许在移动设备、平板电脑和桌面上更改列和内边距大小。 内容放置在列的栅格中，信息根据交互展开和收缩。
​​

Reply的网格系统，缩小到50％

 

海拔

Reply使用颜色来创建组件之间的区别。 例如，卡片的容器是可见的，因为卡片的界面填充为白色，而应用程序背景填充为灰色。

密集型布局
因为Reply有时候会显示密集的内容，所以删除阴影会降低视觉的复杂性。但它能够为多个项目设置更小的内边距，让内容拥有更多的空间。

​​
在Reply的卡片容器中，界面填充为白色，从而在灰色的背景中脱颖而出。

 

颜色

颜色主题

Reply的颜色主题使用主色（深蓝灰色）和辅色（橙色）。

由于辅色很少使用，因此Reply的UI通常是单色的，使用其主色的变体。 这种精妙的色彩主题可以让人轻松阅读内容而不会分心，并且可以轻松看到图片和头像。

每当使用Reply的辅色时，都能显示出突出的视觉效果。
​​
颜色主题

 

排版

字体比例

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’s 的形状分类

 

1. 小组件
2. 中等组件
3. 大型组件

 

小组件
扩展浮动操作按钮属于小的形状分类。它们的拐角是圆角，圆角半径为50%
​​

元素	类别	属性	值
扩展FAB	小组件	字体大小	圆角 50%

 

中等组件
卡片属于中等形状分类。它们的拐角是圆角，圆角半径为50%
​​

元素	类别	属性	值
卡片	中等组件	字体大小	圆角 0dp；0dp；0dp；0dp

 

大型组件
底部动作条属于大的形状分类。它们的拐角是圆角，圆角半径为12dp
​​

元素	类别	属性	值
底部动作条	大型组件	字体大小	圆角 12dp；12dp；n/a;n/a＊

＊底部动作条的拐角只在左上和右上的位置。

 

组件
​​

 

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

 

扩展浮动操作按钮
在桌面和平板电脑上，Reply使用与导航抽屉配对的自定义扩展浮动操作按钮。
​​
在导航抽屉内Reply自定义扩展浮动操作按钮
​​

 

 

底部应用栏，底部动作条

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

1. 默认底部应用栏
2. Reply的底部应用栏使用自定义图标，颜色和形状。 Reply的LOGO已合并到组件中，用作菜单图标。 栏中的自定义形状包含浮动操作按钮。

​​

​​

 

卡片
Reply将邮件显示在自定义圆角矩形的卡片上。 卡片之间的内边距非常小，这是因为（在没有高度差的情况下）颜色已经指示了卡片的边界了。

这种小的内边距使更多内容能显示在页面上。

​​

 

纸片
Reply输入纸片应用自定义排版，颜色和图像大小。
​​
对布局，排版和颜色的调整有助于纸片组件在视觉上与Reply的品牌风格相似。

​​

 

动效

启动页面
Reply的图标动效路径灵感来自于卷曲的纸张。
​​

首次启动Reply会显示动画启动页面。

 

导航过渡

Reply使用较短的持续时间和标准缓动来着重提高效率。
​​

这些导航过渡使用250ms而不是标准的300ms。

 

图标和插画
插画动画在用户旅程中的关键点创建连接，例如完成一个收件箱中的每个项目。
​​

保留的两封电子邮件被存档，因此触发了一个庆祝动画。
​​

在下拉刷新载入顺序时，Reply的Logo持续滚动。

 

原文：Material Design