美文网首页App UI设计设计规范iOS和Android规范之控件解析
iOS和Android规范解析——提示框(Toast)对比

iOS和Android规范解析——提示框(Toast)对比

作者: 沐风与体验设计 | 来源:发表于2017-03-19 22:17 被阅读6864次

    从今天起,我们开始介绍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弹窗

    iOS的HUD与Android的Toast的区别有:

    1. HUD出现在屏幕的中央,Toast在底部;

    2. HUD可以由icon,Toast不能有icon,只能用文字;

    3. HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明;

    4. HUD中内容可以变化(如调节音量时),Toast中内容不可变化。

    研究了iOS的设计规范,发现规范中“feedback(反馈)”一节中,也没有提到Toast或者HUD,笔者认为,苹果对于Toast这种形式,是比较谨慎的。在介绍反馈时,苹果提到:

    潜移默化地将状态改变或者其它类型的反馈放进你的界面中。理想的情况是:用户可以不用进行操作或者被打扰,就能得知重要的信息。

    Unobtrusively integrate status and other types of feedback into your interface. Ideally, users can get important information without taking action or being interrupted.

    而且举了苹果自家邮件应用的例子:

    在应用的底部操作栏,展示了当前邮件的状态:“刚刚更新,2封未读”。我想,这正是符合苹果“不操作、不打扰”的原则。相比之下,在屏幕中间出现HUD,虽然也不用操作,但是打扰的程度却严重了许多。因此,在对iOS的应用进行设计的时候,操作的反馈最好是这种打扰程度比较小的,或者通过操作本身就能看到结果的,比如下面这个例子:

    用户进行删除操作之后,短信就消失了,这时候就不需要再弹出HUD提示“已删除”。

    以上对比了iOS和Android设计规范中对Toast这类提示框的用法说明。有一点还想提醒大家:规范是官方给出的最标准的做法,但是具体的运用还是要看场景的需要。很喜欢初中老师说过的一句话:“学数学要会‘死去活来’,要死死地掌握住公式,然后灵活运用”。对于规范,也是这个道理。

    知识运用

    请回答一下两个问题,这将帮你更好理解这周的主题。

    1. 既然iOS的设计规范不鼓励使用toast,那么在日常的设计中,toast应该在什么情况下使用?

    2. 请查看你手机里的APP,尝试找到一个toast使用错误的地方,和使用正确的地方。这将帮你理解如何正确地使用toast。

    相关文章

      网友评论

      • akisa:今天我也在找IOS的toast控件,然后发现官方似乎只给了个alertcontroller。感谢分享:joy:
      • 岩杉Shawn:请问这些设计规范都在哪里找呢
        岩杉Shawn:@吴来福 太感谢了
        e44dafde056e:都有专门的官网进行介绍的。
        * iOS10人机交互指南:https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
        * 安卓MD官方文档:https://material.io/guidelines/
      • 龙爪槐守望者:heads up display,起源是 iOS 有个控件叫做 UIProgressHUD,也就是你调音量会看到的那个。但是众所周知的是,这个控件不是 Public 的,只有 iOS 系统本身有在用这个控件。所以就开始出现了各种以它为模仿对象的第三方实现,最早著名的是 MBProgressHUD,之后 HUD 这个词就成了 iOS 开发里面一个半官方的用语。
        沐风与体验设计:@龙爪槐守望者 学习了,谢谢分享。这样看,苹果对于第三方实际是没有提供任何toast这样的组件的
      • 奧革士:謝謝分享:+1:
      • 龙爪槐守望者:真正的规范是用户的习惯
        望山观海:确实,有时候用户习惯了,规定啥也没用。
        胖紫还是阿紫吗: @龙爪槐守望者 用户的习惯有些也是最初没有,后期后期培养的。
        沐风与体验设计:谢谢评论~
        用户的习惯确实很重要,尤其是对于已有的习惯的迁移,从这个角度来说,规范在制定的时候确实会考虑用户的习惯;但是在创造新的事物的时候,比如iPhone刚诞生的时候,还是需要规范的。另外,Google在制定Material Design之前,Android的应用从设计的角度来说品质比较糟糕,但是出了MD规范之后,能看到明显的进步。所以,有时候还是需要考虑规范的作用。

      本文标题:iOS和Android规范解析——提示框(Toast)对比

      本文链接:https://www.haomeiwen.com/subject/qwtvnttx.html