2.7 Reply(通讯APP) APP设计 app欣赏

2019年1月22日15:21:56 发表评论 325

本文从架构、布局、颜色、文字、图标、形状、组件和动效等方面分析了Material Design的 APP示例:Reply

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. 向左扫动卡片时,它将显示一个删除邮件的操作。

APP设计规范

纸片(Chips,小标签)

Reply的纸片使用自定义的文字、颜色和图片大小

布局、文字和颜色的设计使纸片与Reply的品牌风格保持一致

APP设计教程APP设计规范、APP界面欣赏、APP设计、APP教程、APP设计案例

1. 默认纸片

2. Reply的纸片使用自定义的颜色和文字。头像被设计得更大,没有和默认形式一样嵌在内部。

动效

启动界面

Reply的logo动画为路径追踪,灵感来源于卷曲的纸张。

第一次启动Reply时显示动画启动界面

导航转换

Reply使用了短时长和标准缓动,以专注于效率。

这些导航转换的时长为250ms,而不是标准的300ms。

图标和插图

动画插图在用户体验过程中的关键点创造连接,比如完成一个收件箱中的每个项目。

两封邮件的存档触发了一个庆祝动画。

  • 互动微信
  • 扫一扫 加微信
  • weinxin
  • 微信公众号
  • 扫一扫 加公众号
  • weinxin
精品女装,点我购买 精品男装,点我购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: