交互控件科普系列!Snackbar 的常见样式和设计注意事项总结 - 优设网 - UISDC

交互控件科普系列!Snackbar 的常见样式和设计注意事项总结

2019/08/30 6086评论区

相比于 Toast,Snackbar 的好处十分明显,可读性更强,还可以兼容 1-2 个次要操作,适用场景更加广泛。因此,我整理了 Snackbar 的常见样式以及设计注意事项。

在学习控件的设计方法之前,先来补充下基础 → 《这个控件叫什么?》

什么是Snackbar

Snackbar 是 Google Material Design 中提供的一种兼容提示与操作的消息控件。这也就意味着所有 Android 开发都可以直接通过官方插件来调用此控件。

此控件与 Toast 比较相似,通常用于低干扰度的消息提示,该消息可被忽略且不会打断用户当前的操作。但相对 Toast 而言,Snackbar 的优势在于可读性更强,还可以兼容 1-2 个次要操作,适用场景会更加广泛,有兴趣的同学不妨可以在设计开发中尝试使用,你会发现确实比 Toast 好用太多了。

下面就详解 Snackbar 的一些特性和玩法。

Snackbar的常见样式

Snackbar 的样式可以根据设备的宽度进行适配改变。

1. 窄屏:纯文案

通常用于移动设备竖屏。最多展示两行,每行最大展示字数可定义,超出两行信息展示为……

2. 窄屏:文案+按钮

通常用于移动设备竖屏。文案最多展示两行,每行最大展示字数可定义,超出两行信息展示为……

支持展示 1-2 个操作按钮,按钮颜色需突出(可自定义),当按钮展示不下时(文案过长或按钮文本过长)允许折行显示。

3. 宽屏:纯文案

通常用于移动设备横屏。文案最多展示一行,最大展示字数可定义,超出的字数展示为……

4. 宽屏:文案+按钮

通常用于移动设备横屏。文案最多展示一行,最大展示字数可定义,超出的字数展示为……支持展示 1-2 个操作按钮,按钮颜色需突出(可自定义)。

Snackbar的显示与消失机制

显示时不会打断用户操作,在以下情况下会消失:

  • 用户点击 Snackbar 上的操作,触发操作的同时消失;
  • 用户点击屏幕任意位置时立即消失;
  • 用户不进行任何操作,持续 4~10 秒后自动消失(时长可自定义)。

Snackbar的显示位置

当页有 Bottom app bar 或 Bottom Navigation 时,显示在其上方(不可贴边或发生重叠)。

当页无 Bottom app bar 或 Bottom Navigation 时,显示在页面底部(不可贴边或发生重叠)。

当页底部有 Floating action button 时,显示在其上方(不可贴边或发生重叠)。

横屏时,显示在页面左下方(不可贴边)。

Snackbar的唯一性

需展示多个 Snackbars 时,每次仅能显示 1 个,之后的 Snackbar 应在前一个消失后再显示。

Snackbar的超时重置

在 Snackbar 显示期间出现了 Dialogs,关闭 Dialog 后,重新显示该 Snackbar 并重置显示时长,以确保用户能读完 Snackbar 上的信息。

Snackbar的几点「不要」

  • 不要使用与操作结果或进程无关的文案描述;
  • 不要使用「忽略」或「取消」的按钮文案,因为 snackbar 会自动消失;
  • 不要使用 text button 之外的按钮样式,因为 snackbar 不会用于承载重要操作;
  • 不要使用 2 个以上的按钮,若确实需要,请考虑使用 Dialogs;
  • 不要用于承载很重要的操作,若确实需要,请考虑使用 Dialogs;
  • 不要遮挡 FAB 或底部导航。

使用范例

当用户手动将某道题目成功添加至错题本时,使用 snackbar 告知用户收藏是否成功并显示「添加标签」按钮引导,用户可选择点击按钮去添加标签,也可以选择置之不理。

当用户成功提交问题反馈时,使用 snackbar 告知用户提交是否成功。

欢迎关注作者的微信公众号:「愚者笔记」

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/snackbar-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里