APP框架之提示框架

某日和iOS开发聊天,说到iOS规范里没有安卓中的Toast形式的提示。我有点惊讶,仔细回忆iOS的交互规范,似乎是有。后来找来书确认了下,竟然是没有。遂把这个框架整理了下,在文中同时也强调下Android的交互规范的差异。在对比这两个差异的同时也能更好的了解这个框架的设计思想。

描述

用户操作后,在APP执行操作前以模态方式让用户确认操作,或在操作告知操作结果。
(ps.非模态形式反馈暂不在讨论范围)

一、构成元素

标题
文字
按钮

二、使用前提

case1:会造成严重破坏
case2:存在误操作可能性,并且会造成严重后果或不便
case3:会造成严重破坏,并且可撤销
case4:进一步对所做的操作进行确定和执行

三、表现形式

1.Toast

1475127929-2327-187543-e3e9119f0bb76583

Toast.jpg

Android中的Toast是一种简易的消息提示框。
告知用户任务状态,操作结果,例如:发送成功,加载中,删除成功。
Toast会在屏幕所有层的最上方。
显示时间有限,1s+左右消失
考虑到显示的时间,容易被用户忽略,不适合承载过多的文字和重要信息。
这么一来,其实这个功能似乎有点鸡肋,怪不得在iOS中建议,设计一种引人注目但又和你的 app 的样式相协调的方式去展示信息。很多APP中也是这么做的,脉脉的刷新成功,花瓣的上传成功。

1475127929-2347-187543-92a4f7d7b91202d2

也有的如支付宝使用的方框形式。

1475127929-9602-187543-90b6916418f04e75

但要注意,Toast的出现与用户的操作行为紧密相关,所以其出现的位置与用户的操作最好能联系在一起,如上图中今日头条下拉刷新后的提示,支付宝转账成功的位置。
Toast一般有简短文字或者简单易懂的图标,如删除成功字样或者简单易懂的图标

1475127929-1081-187543-219383abd6424c7e

Android 对Toast的作用介绍是,主要用于提示系统消息,但实际运用不仅限于此。
可以看到,是否把Toast融合于界面之中,其实影响的提示框架的一个特点,显示层级最高,打断用户的其他操作,让用户专心于提示框架显示的信息。而Toast的信息刚好踩在了这个临界点上,不太重要的信息是否需要打断用户的操作。这个就要看各个产品对这个信息传达的重要性的判断了。

2.Snackbars

在Android出的Material Design中又提出了一个与Toast类似的Snackbars。
Snackbar 是一种针对操作的轻量级反馈机制,通常出现在手机屏幕或者桌面端左下方,以浮动弹出框的形式存在。
与Toast相同,Snackbar也会出现屏幕所有层的最上方,包括浮动操作按钮;短暂出现后,会主动消失。
但Snackbar带有一定的交互性,用户触摸屏幕其他地方后自动消失,也可以在屏幕上滑动关闭。
而且Snackbar有时候可以带有一个操作,如撤销。对于一些可能会有不好后果的操作,并且可撤销,可以以Snackbars 的形式告知并提供撤销按钮。

1475127930-3692-187543-5c61b5d8bebf7eeb

clipboar.png

3.Alert

在用户进行操作后,APP执行操作前,如果用户的操作的结果会带来比较严重的后果,如不可撤销的数据删除,金钱交易,退出登录等。出现模态的提示框,包括说明性的标题、文字和进一步确定按钮(1-N)。

1475127930-4703-187543-c40bc82dd7e9cc48

Alert

使用Alert时必须传达出清楚且可操作的信息。和其他的模态提示一样,Alert会打断用户的操作,要求用户集中精力来处理其传达的信息,并需要一次点击才能结束,因此要让用户明确知道警告框出现的合理性和必要性。并且Alert的出现必须非常克制,这样用户才不会因为频繁的点击确定而导致不必要的损失。所以其中每个元素的设计都要经过细致的考虑,如下文。

3.1标题

iOS要求标题的文字必须简洁易懂,快速传达当前的情境和对应的解决方案。
最好使用短句,偏于理解。
恰当的使用标点,是一个短句或一个简单但又不是问句的句子,句末不需要句号。如果是一个问句,句末使用问话。
android中提示框的标题是可选的,用于说明提示的类型。可以是与之相关的程序名,或者是选择后会影响到的内容。例如:设置,音量等。

3.2文字

在iOS中推荐使用标题,只有在标题无法简短清晰的传递意思才再补充文字说明。
对正文的要求与标题类似,一个简短、完整的句子。同时尽量让文字足够简短以便能在一两行之间显示。不要让警告框出现滚动条,这绝对不是好的体验。如果必须出现,则需要有足够的视觉线索。
不需要在文字中说明每个按钮的意思和结果,让按钮本身的文本来显示其对应的操作和结果。
不要用长句
不要用倒装
不要用否定
不要有歧义
要提供给用户足够决策的信息

3.3按钮

在iOS中推荐使用两个按钮的警告框,如果更多可以考虑使用下文的操作栏。“两个按钮的Alert通常是最有用的,因为对人们来说在两个按钮之间做选择最容易。单个按钮的Alert就不那么有用,因为它通常只是提示用户,并没有赋予用户任何对当前状况的控制能力。包含三个或三个以上按钮的Alert明显比双按钮Alert复杂,应该尽可能避免使用。”
在android中倒没这个要求,android的Alert同时起到了iOS里Alert和操作栏的警告,通知和选择作用。如果各自遵守交互规范倒是没有太多的好坏之分。
在各个APP中最常见的也是2个按钮的Alert,所以前段时间也看见知乎上一个帖子在讨论确定和取消按钮的左右问题。
这里的“确定”代表的是确定执行操作按钮,按钮名称可以删除,继续,退出等等。而“取消”代表的是放弃这个操作,比如不保存,取消退出等。
在iOS中,明确这两个之后再考虑一个前提,确定操作如果误点不会带来比较严重的后果,而且是用户比较有可能的操作,那应该放在右边,同时可以柔和的颜色提示按钮的安全性;取消按钮则放在左侧。
如果确定按钮误点会带来比较严重的后果,且是用户比较有可能的操作,那比较适合放在左侧,并且可以用醒目的颜色(红)作为警示。
如果取消按钮误点会带来比较严重的后果,且不是用户比较有可能的操作,那适合放在左侧。
如果没有按钮误点会带来比较严重的后果,那。。。就不要用Alert~

另外,Alert中的按钮要与其上的文本对应,不要用烂大街的确定,取消,要用明确告知操作后果的文字,如保存,删除,转账等。用户已经养成了看见确定就点确定的习惯,所以要用明确的动作来提示。
在android中比较简单,确定类事件都放在右侧,取消类事件就放在左侧。个人比较喜欢iOS的设计规范,更人性化一点,产品人员考虑的更多一点,用户就可以少考虑一点。
在android中Alert还起到选择的作用,所以多个选择的情况刚常见,这时候起到的有点类似iOS的操作栏,进一步确定和选择所要的操作。

4.操作栏

在iOS中,用户操作后,需要进行确认和操作的按钮大于3个,会推荐使用操作栏的形式。
不带标题,可能有文字介绍,具体要求与Alert文字类似。
显示两个或两个以上的按钮。
使用红色和靠近操作列表顶部来提醒用户注意那些执行潜在破坏性操作的按钮。
取消按钮放在最下的位置并与其他按钮做一定的区分。

1475127930-6135-187543-bfef140e6a37b40d

操作栏

如果选择按钮太多,可以参考下图的形式组织按钮和滚动显示,但要留有足够的视觉线索。

1475127930-4770-187543-cf82d6671d58b74e

微信

四、位置:

可以发现,操作栏的位置一般是从页面底部跳出,然后停留在页面底部的地方;而Alert一般是出现页面的中间;
Toast则比较多变,和用户前置操作的位置,信息的重要性,Toast的形态相关。
主要有顶部;内容区上方,导航下方(如下拉刷新);页面中间(整体性,比较重要的信息提示);页面下方,菜单栏上方(最常见);页面底部;与操作按钮融合等。这么一算,就没不能放的地方。除了一个点,不要在模态的界面上再出现一个模态框架,这样会导致层级的复杂化和提示框任务的简单明确。

五、注意:

要注意随时提供一个明显而安全的退出模态框架的方式,这种方式一般是等同于点击“取消”,如点击空白区域,安卓的虚拟键等。
提示框架如非必要不要出现,尤其Alert形式,出现得少会有助于用户对其认真对待。
回想下自己在pc端删除东西时点击确认的毫不犹豫,就要相信用户在警告框出现的时候的点击“确认”更多的是下意识的,所以注意不要完全寄希望与提示框架。要靠比用户想的更多更完善来避免提示框架的出现。

作者:静默之思
原文链接:http://www.jianshu.com/p/7f9be62c9ead#
著作权归作者所有,转载请联系作者获得授权

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/17930/

(0)
TinadminTinadmin
上一篇 2016-09-26 15:55
下一篇 2016-10-09 17:35

相关推荐

  • 全民关注用户体验的时代已经到来

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    微信热点 2018-03-22
  • 交互设计第一步 了解完整的知识体系架构

    交互设计师犹如一名“翻译官”,主要的使命就是让人与产品之间更容易沟通、更具有人性化,让用户的操作更加有效,这也是交互设计师的价值之所在。今天推荐的这门课程,带你全面了解交互设计的知识体系架构和工作流程,了解交互设计师应具备的能力、应掌握的工具、如何完成进阶,并掌握让你更加专业、更具逻辑性的设计思维与交互设计面试技巧。点击“阅读原文”,开启你的学习之旅~丨我将从这门课中学到什么?了解形成完整的知识体系架构的重要性了解交互体系架构包括哪些部...

    2018-03-12
  • 从设计指南说起,详解Material Design体系组件

    iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。
    一般把Control翻译成控件,把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成,控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体,统称为组件。摊手。

    2017-04-28
  • 异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08
  • 移动应用设计的最佳实践

    移动应用现在是提供内容和服务的主流方式。但在热闹的移动应用市场,面对五花八门的各种APP,如何让你的APP受重视,脱颖而出得到用户的青睐?留白应该作为一种主动的元素,而不是作为被动的背景——Jan Tschichold温馨提示:创建最好的移动应用消息策略应该用不同的通知类型——推送通知,电子邮件,应用内通知和新闻源消息。多样化你的通知类型——你的通知工作应该完美协调,创造最佳用户体验。

    2017-05-14
  • Google如何从两方面正确简化产品?

    来源:优设网 作者:王笑Nothing编译   很多设计师同学为了适应简约的潮流,在简化产品方面绞尽脑汁,但简化不是两个不要:这个不要,那个也不要,简化是一个细心活。今天教同学们简化双板斧:重点是什么,何时简…

    2014-09-21
  • 【交互设计】寒假专业设计课程计划

    以清华力量武装自己寒假班开课时间:2018年1月27日 —2月8日报到时间:1月26日 (全天报到)寒假课程不局限于清华美院考研,寒假基础班以专业为导向,报考全国其他院校的同学也可参加。学习最高要求和最高水平的课程,全国名校任你选!说明: 交互设计的考试内容和实际工作基本类似,非考研类同学也可以报名学习,想转型学习或从事交互设计行业的其他专业同学也可报名。师资介绍:老师一:L老师本科中央美术学院数码媒体专业,清美交叉学科硕士考研成绩:初...

    2018-01-30
  • 交互留学 | 交互设计中人机工程学应用的11个小贴士

    许多手机的设计都存在一个问题:从表面上看很不错,但当你真正使用它的时候,你会发现设计者忽略了一个最重要的因素—人机工程学,与人类肢体(而不是其他)相匹配的高超艺术才是设计界的幕后英雄。对工业设计师来说…

    2017-08-01
  • 登录表单的那些事儿

     雅婵总结并供稿于我是UE网,转载请注明来自我是UE网。

    2015-06-12
  • 【交互设计排名】SKD独家 | 美国交互设计排名

    Alias工业设计点击关注 和工业设计做朋友关注数模师  JACKAlias建模学习ALias建模咨询加好友你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及...

    2018-04-08