从今天 起,我们开始介绍iOS和Android设计规范中的各种控件。掌握它们,能有效地帮你设计出一个高质量的交互稿。今天我们要介绍的是提示框,英文是toast。
交互设计师在设计交互稿的时候,时常需要一些反馈手段,以提示用户操作的结果。Toast是其中很常用的一种:它简单、小巧、对用户的打扰小。然而现在很多应用中,存在对于toast过度使用的情况,并且常常出现Android样式的toast出现在iOS应用中(反之亦然)的情形。在研究了iOS和Android的规范之后,笔者惊人地发现iOS中其实是没有toast这种部件的。到底我们在设计的时候应该处理这种部件呢?且看下面的分解。
Material Design Guidelines
Google的Material Design规范中,是把toast和snackbars归为一类的。下面是规范中对snackbars的定义:
Snackbars包含一行与进行的操作直接相关的文案(文案前不可有icon)。它可以包含一个操作。
△ Snackbar示例
规范中对toast的定义:
Toast优先适用于系统提示。它也在屏幕下方出现,但是不能被划出屏幕外(而被清除)。
△ Toast示例
行为:Snackbars/toast从屏幕底部向上出现,经过设定的秒数后消失,或者用户进行了别的操作它们也会消失。
△ Snackbar的出现和消失
简洁:提示的文案要简短,包含的操作按钮最多只有一个,或者没有。(注意,snackbar不能包含使其消失的“取消”按钮!)
左边是正确的,右边是错误的(因为多了“取消”按钮)
不可重叠:snackbar与floating action button不能重叠。
一次只出现一个:如果出现了一个snackbar,这时候用户进行了操作,需要出现另一个,则第一个snackbar从上向下退出,之后第二个snackbar从下向上出现。
反例:不能同时出现两个snackbars
以上是Google Material Design中对于snackbars和toast的定义。
iOS Human Interface Guidelines
对于iOS系统,在研究了iOS的规范之后,笔者有个惊人的发现:严格地说,iOS规范中没有Toast这个部件。笔者找遍了iOS的人机交互设计规范,都没有找到对于Toast这种部件的介绍,与之最为接近的,是Alert(警告框)。但警告框的使用场景与Toast不同,之后将另开一篇文章介绍。在iOS系统中,与toast对应的是“HUD”(透明指示层)。
△ iOS系统中的HUD弹窗
知识运用
请回答一下两个问题,这将帮你更好理解这周的主题。
1. 既然iOS的设计规范不鼓励使用toast,那么在日常的设计中,toast应该在什么情况下使用?
2. 请查看你手机里的APP,尝试找到一个toast使用错误的地方,和使用正确的地方。这将帮你理解如何正确地使用toast。
作者系列文章:
- 高手帮你学规范!iOS和Android规范解析之提示框+警告框
- 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
- 高手帮你学规范!iOS和Android规范解析之底部浮层
- 高手帮你学规范!iOS和Android规范解析之按钮
欢迎关注作者微信公众号:新设计青年
【优设网 原创文章 投稿邮箱:yuan@uisdc.com】
================明星栏目推荐================
优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。
设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI时代的设计师生存手册
已累计诞生 648 位幸运星
发表评论
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓