所有分类
  • 所有分类
  • 未分类
Material Design Reply

Material Design Reply

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。   目录 关于Reply 产品架构 布局 颜色 排版 图标 组件 动效 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

 

原文链接:https://www.uiya.cn/14614.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?