APP弹窗汇总及选择维度浅析

最近在改版的APP问题较多,其中之一就是各种弹窗的使用问题,如iOS端的Alert与Action Sheet的不当使用。利用这次机会做一个总结以加深理解,梳理自己的弹窗知识体系,欢迎斧正。

APP弹窗总览

需要回应类弹窗:用来传达需要用户特别注意的重要信息(如付费下载),在用户点击弹窗按钮或弹窗外部区域后关闭。  无需回应类弹窗:则主要用来告知用户一些轻量级信息(如消息已发送),它不需要用户特别注意,也不需要用户对弹窗进行回应,一般会在2秒左右自行消失。

接下来一一介绍。


1.1 Alert(警报)

1.1.1 定义

Alert用来传达与应用程序或设备状态有关的重要信息,并经常请求反馈。Alert由标题,可选消息,一个或多个按钮以及用于收集输入的可选文本字段组成。除了这些可配置的元素外,警报的外观是静态的,不能定制。

只在传达重要信息时使用Alert,确保人们认真对待他们。iOS的原生应用上很少使用Alert,即使删除邮件、日历事件等高危操作都只调用了Action Sheet。而一些我们常见的主流APP连退出登录、清除缓存等用户主动发起的操作都要突兀地弹出Alert,破坏了用户体验。

这种由用户主动发起的操作,使用ActionSheet更合适

1.1.2 设计原则

标题:标题尽量简短,控制在一行以内,不要使用结尾标点符号。

消息:可选,尽量提供简短的完整句子,且避免解释按钮的功能。使用友好的语气,避免使用诸如“你“、”我”这样的文案,有时它们会被理解为侮辱或高傲。

按钮:一般来说,使用双键警报来提供两种选择之间的简单选择。操作过多时请考虑使用 Action Sheet。人们最可能点击的按钮应该在右侧,取消按钮应始终位于左侧。尽可能使用与警报标题和消息直接相关的动词和动词短语,例如查看全部,回复或忽略。避免使用“是”和“否”。


1.2 Action Sheet(动作面板)

1.2.1 定义

动作面板是响应控件或操作而出现的特定警报类型,并呈现与当前上下文相关的一组两个或多个选择。使用动作面板让人们发起任务,或者在执行潜在的破坏性操作之前请求确认。在较小的屏幕上(如iPhone),动作面板从屏幕底部向上滑动。在较大的屏幕上(如iPad),动作面板立即弹出。

1.2.2 设计原则

动作面板底部始终提供取消按钮,以提高用户放弃任务时的信心。

用红色凸显执行破坏性或危险操作的按钮,并将其显示在动作面板的顶部。

精简选项,避免在动作面板中启用滚动。


1.3 Activity View(活动视图)

1.3.1 定义

活动是一项任务,如复制,收藏或查找,这在当前上下文中很有用。启动后,活动可以立即执行任务,或在继续之前询问更多信息。活动由活动视图管理,活动视图显示为一个表或弹窗,具体取决于设备和方向。使用活动为用户提供访问您的应用可以执行的自定义服务或任务。

1.3.2 设计原则

简洁描述活动的标题,如果太长会被截断。

确保活动适合当前的情况。系统自带的活动虽不可以重新排序,但可以排除。例如,为了防止人们打印图像,可以排除“打印”活动。


1.4 Popover(气泡弹出窗)

1.4.1 定义

Popover是一个临时视图,当点击某个控件或某个区域时,它会出现在屏幕上的其他内容上方。通常,Popover包含指向其出现位置的箭头。

Popover在大屏幕上使用最合适,可以包含导航栏、工具栏等各种元素,苹果官方建议只保留在iPad应用程序中使用 (查看详情)。如果在小屏幕如iPhone上使用时,应尽量减少屏幕空间的占用,并控制操作项数量以防止滚动,一般点击弹窗外部区域可将其关闭。


2.1 Dialog(对话框)

2.1.1 定义

对话会告知用户有关特定任务的信息,并可能包含重要信息,需要做出决定或涉及多项任务。对话框包含文本和UI控件。他们保持专注直到被解除或采取了必要的行动。谨慎使用对话,因为它们是中断性的。

Simple menus(简易菜单)、Simple dialogs(简易对话框)也是比较常见的对话框类型,他们都可以用来显示列表项目的选项,但前者对用户当前的上下文影响较小,所以是首选。而简易对话框的特点是可以提供列表项的其他详细信息或操作(如头像、图标),如下图所示。


2.2 Modal Bottom Sheet(模态底部面板)

2.2.1 定义

模态底部面板是菜单或简单对话框的替代方案,并且可以显示来自其他应用程序的深层链接内容。它们出现在其他用户界面元素上方,必须被解除才能与底层内容交互。当模态底部面板滑入屏幕时,屏幕的其余部分会变暗,从而将焦点对准底部面板。

2.2.2 用法及注意事项

显示菜单项时,完全展开的模态底部面板与应用栏底部保持最小8dp的距离。

高度应由其包含的内容量决定,最初不要重叠应用栏,并允许用户点击/滑动即可解除。


3.1 HUD(透明指示层) / 3.2 Toast

HUD和Toast都是轻提示,用来承载一些无需用户特别注意的信息,比如已发送、网络状态不好请稍后再试等,无需用户回应,一般2秒左右会自行消失。通常情况下,HUD位于屏幕中间,Toast位于屏幕下方。严格来说Toast是Andorid系统里的叫法,iOS系统里类似功能的控件叫HUD,但通常情况下会用Toast来统一称呼这种轻提示。

iOS系统原装HUD
微信iOS和Android端的轻提示


3.3 Snackbar

Snackbar是Material Design设计语言中特有的一个控件,它包含与所执行的操作直接相关的单行文本。一次只能显示一个Snackbar,它可以包含一个文本操作,但不能有图标。

Snackbar在Android系统上的应用

总结:以上介绍了移动端比较常用的弹窗类型,在实际应用中我们要根据产品目标、用户目标以及场景做权衡选择。

个人认为可以从 情境、回应、平台 三个维度来选择:

1)当前上下文情境:比如iOS端比较容易混淆的Alert和ActionSheet,用户主动发起的操作,弹窗应该使用Action Sheet来提供与此操作相关的选项让用户选择,控件上方半透明区域可以清晰地看到下方界面,与上文情境连接更紧密,不会造成用户使用流程的中段;而设备或应用发起的则建议使用Alert,比如异常错误警报,此时需要用户的注意力暂时离开当前的使用流程,以关注这条重要提示或警报。

2)是否需要回应:根据信息的重要程度来选择弹窗类型。比如同是错误提示,有的只要用户知道一下即可(Toast),有的比较重要需要用户点击确认一下(Alert)。

3)平台差异化设计:依据各平台的设计规范与使用习惯,使用对应的控件。比如snackbar是Android平台特有的控件,使用得当可以提高用户的操作效率和体验。

弹窗总览图


Agen  2018.03.14


参考资料:

https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/

https://material.io/guidelines/

https://www.zhihu.com/question/35141228/answer/61369322

https://www.jianshu.com/p/1ec4dca92e71

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容