APP弹窗设计的分类及应用

[dangerbox title=”APP中的弹窗”]弹窗在互联网产品的设计中有着非常重要的角色,不同的弹窗对应着不同的使用场景和需求,通常一个合格的弹窗能避免我们在操作中的一些问题,从而降低损失。弹窗是什么?[/dangerbox]

中断用户当前操作并对其作出补充,或中断用户当前操作并对其作出反馈。

想象下我们当下的弹窗场景,新版本更新、活动推荐、操作反馈、操作引导等……众多的使用场景中,我们应该如何区分不同类型的使用场景?不同的弹窗类型又有怎样的特点和侧重点呢?首先我们将从弹窗的分类逐步剖析:

 

[title]弹窗的分类[/title]

弹窗一般分为模态弹窗和非模态弹窗。弹窗就是为了给用户回馈,需要主动的交互操作触发。非模态弹窗一般被设计者用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。用通俗的两句话来总结下:

模态弹窗会打断用户的操作行为,强制用户必须进行弹窗上的操作,否则不可以进行其他操作。

非模态弹窗不会影响用户操作,用户可以不予以回应,通常由时间显示,会出现一段时间内自动消失。

 

[title]Alerts/Dialog:警告框与对话框[/title]

Dialog对话框是一种模态弹窗。当用户进行了敏感操作,或者当App内部发生了较为严重的状态改变,这种操作和改变会带来影响性比较大的行为结果,在该结果发生前应以Dialog的弹窗形式告知用户且让用户进行功能选择。比如退出App、进行付费下载等功能操作。

一般情况下Dialog由标题、信息内容和功能按钮组成,只有当用户点击了某个功能按钮后弹窗才会消失,App随即执行该功能操作,进入相应的功能流程。

Dialog的标题和信息内容的文字描述都要设计成尽可能的简洁和无异义,也可以选择省略标题只保留内容描述和功能按钮(实际上大多数Dialog都被设计成没有标题的样式)。使用Dialog,功能按钮最好只有两个,让用户选择“是”或“非”的功能操作(“是”指对内容描述的确认操作,比如确认删除、确认付费;“非”一般指取消操作,然后关闭弹窗);也常被设计成只有一个“确认”按钮,目的是让用户阅读内容后点击关闭弹窗(这种样式的Dialog,信息内容必须非常有必要以至于需要打断用户的操作进行信息内容阅读确认,否则用Toast进行非模态弹窗提示)。

若Dialog对话框出现三个或以上的功能按钮,将会增加用户的功能选择负担,所以需要使用多个功能按钮选择的时候请考虑使用Actionbar。

含义:英文意为警告、对话,跟弹窗属性非常吻合,就是紧急状况,打扰用户的行为。

剖析:iOS中警告框称之为Alerts,作用是用来传达重要信息,并伴随着需要用户进行操作。

iOS规范中,警告框包含的元素如下:标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选)

作用:告知用户当前发生的状况,让用户主动选择回应。

适用:重要性较高的操作时,如退出、删除、清空等

必须包含标题、包含一个或多个按钮。

Android规范中,弹窗交互按钮需结合实际情况,不用“是/否”原则进行设计。

 

[title]Actionbar(Sheets、Acitivity View):操作栏、操作列表、活动视图[/title]

Actionbar功能框可以看成是Dialog的一种延伸设计,两者都是模态弹窗,用户必须进行回应,否则弹窗不会消失,用户无法继续其它操作。Actoinbar比Dialog拥有更多的功能按钮,提供给用户更多的功能选择,Acionbar一般都设计有一个默认的“取消”功能按钮,点击该按钮后关闭弹窗,用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。Actionbar一般被设计用来向用户展示多个功能按钮选择。

在iOS中,Actionbar的样式比较常见的是文字列表框,它出现在页面底部,以简洁的功能描述性文字展示功能按钮,敏感的功能操作一般用红色字体标出(也可以设计其它颜色以突出某个功能按钮)。

当功能按钮数量很多的时候,文字列表的形式不适合显示,此时可以用图形加文字描述排列的形式来进行展示。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。

安卓系统中也有文字列表和图文排列两种样式的Actionbar。

在安卓系统中,Actionbar还经常被设计成“选择列表框”(其实就是用选项代替了功能按钮),比如安卓版的微信App中就是用这种设计方式让用户进行性别选择。这种设计方式的好处是减少了功能流程中的页面跳转,但是如果选项很多而且描述文字较多的时候,还是设计成选项详情页面会更好些。

含义:英译为工具栏、操作栏

剖析:当用户激发一个操作的时候,出现此窗口。

一般会给用户提供更多的功能选择,一般可采用官方控件。

一般都设计有一个默认的“取消”按钮,点击取消可以关闭弹窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用户触发、包含两个或以上的按钮。

作用:操作列表提供一系列在当前情景下可以完成当前任务的操作,而这样的形式不会永久占用页面UI的空间。

适用:如分享功能

 

[title]Popover/Popup:浮出框/浮层弹窗[/title]

含义:英意为弹出窗口,浮动于顶层窗口,气泡

剖析:当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口。

不会对用户所在位置进行跳转。

作用:可以在当前页面进行更多的操作行为,显示/隐藏页面中的折叠信息。

适用:首页位置呈现一些常用操作的快捷入口。

 

[title]Toast/HUD:提示框(iOS没有Toast,只有HUD)[/title]

含义:Toast也被称为吐司提示,Toast是安卓系统的一个控件名词,现也应用于iOS系统中。

剖析:提示框属于一种轻量级的弹窗反馈形式,常以小弹框的形式出现,持续1-2秒自动消失,可以出现在屏幕任意位置,但是建议同一款产品尽量使用相同位置,让用户产生统一认知,成为习惯。

提示信息能给予用户及时反馈,确保用户知晓自己所处的状态,并可以做出相应的措施。

iOS用户更习惯于在顶部感知反馈信息,不干扰用户浏览主体内容。Toast出现在屏幕顶部不会遮挡主体内容。(如花瓣、有道云笔记)

Android正统的规范中Toast:

  • 出现在屏幕底部。
  • 只能放文字不能带图标,文字要精简不宜太长。
  • 不是模态的,可以透过Toast对其他控件进行操作。
  • 短时间后会自动消失。
  • 不能对Toast进行交互。
  • 优先适用于系统提示,不能手动操作让Toast主动消失。

HUD与Toast的区别:

  • HUD只出现在屏幕的中央,Toast则在底部;
  • HUD可以包含icon,Toast只能纯文字;
  • HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明;
  • HUD中内容可以变化(如调节音量时),Toast中内容不可变化。

优点:

  1. 占用屏幕空间小。
  2. 不会打断用户操作。
  3. 使用简单适用范围广

缺点:

  1. 出现时间短,在碎片化时代注意力不集中容易错过Toast提示。
  2. 遮盖其他控件,但不能对Toast进行交互。

适用:提示不需要的反馈信息,如刷新后的成功状态。

 

[title]Snackbar:底部弹窗[/title]

Snackbar提示对话框是安卓系统的特色弹窗之一(安卓平台在开发的时候可以直接调用Snackbar类生成该弹窗,iOS好像也可以进行定制化设计开发),它也是一种非模态弹窗,同时拥有Toast和Dialog的特点,不会打断用户正常的操作流程,它除了可以告诉用户信息内容,还可以与用户进行对话交互(用户可以点击功能按钮进行回应)。也被称为加强版的toast。

一般情况下,Snackbar由信息内容加一个功能按钮组成,用户点击了功能按钮后弹窗消失,App随即执行该操作,进入相应的功能流程。Snackbar跟Toast一样是有时间限制的,即使用户不进行回应,弹窗出现一段时间后也会自动消失。

与Taost相似,Snackbar弹出一个小信息,作为提醒或消息反馈来用,一般用来显示操作结果,另外可以提供一个功能按钮给用户选择使用。例如你删除了某张图片,App弹窗告诉你删除成功,并提供一个“撤销删除”功能按钮给你进行对应的功能操作。

Snackbar还可以被设计成只有信息内容而没有功能按钮,这种样式的Snackbar用户无法进行操作,只能等它自动消失,此时它就相当于一种文字描述型的Toast,只是表现形式有所不同。

含义:英译为快餐、小吃。

剖析:Snackbars与toast一样是从屏幕底部向上出现,但是Snackbar不同的是可以经过用户进行其他操作而消失。

适用:较多适用于撤销操作。

 

[title]弹窗使用场景[/title]

了解完弹窗体系后,我们就可以针对具体场景来看产品同学说加个弹窗到底合适不合适?我们可以从下面的几个使用场景来看用什么样的弹窗合适。

 

1. 重要打断用户操作

在一些重要操作,避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊,有的地方出现得不合时宜,打断了用户的使用状态。所以在设计这类弹框时要非常谨慎,得通过多研究确认是否有必要出现。

对话框相对来说比动作栏更重要,因为在视觉中心,更能强烈引起用户的重视,对于十分重要的内容需要打断用户上一步任务的,采用对话框的弹窗,对于不是特别重要信息露出又需要终止用户上一步动作的情况下,一般采用动作栏弹框。

 

2. 定制化广告弹窗

如功能更新、升级、优惠券弹窗。这一类一般是强制用户看到的,要展示出与众不同的特色,在视觉上比较突出,会使用模态的弹窗浮层形式。

 

3. 给予一定提示

比如提示用户状态、信息、反馈,确保用户知晓自己所处的状态,并可以做出相应的措施。一般使用非模态的弹窗。

 

4. 用户操作反馈

出现在用户操作完之后的反馈,比如提醒用户页面正在加载中、保存成功、已删除、已刷新等等。

可以不用弹窗的反馈例子:完成页

比如已支付成功、下载完毕、签到成功,这一类是告诉你上个动作结束了,下一步不需要进行引导了,这种反馈大多数都不采用弹窗形式展现了。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发