弹窗

用手机看条目

出自 MBA智库百科(https://wiki.mbalib.com/)

弹窗(Pop-up Notification)

目录

什么是弹窗

  弹窗又称为对话框,一般是指打开网页、软件、手机APP等的时候自动弹出的窗口。

弹窗的构成

  弹窗组件的样式很多,如浮层、对话框、下拉菜单、toast等,且iOSAndroid官方平台也都根据自身的规范对组件进行命名,不管如何称呼,其常见的弹窗组件绝大多数都是由以下元素组成:

  容器:作为承载弹窗的文本、图片等内容,容器必不可少,有的弹窗直接以蒙层作为容器,如toast;

  蒙层:为了和底层内容分离,避免信息混淆,通常会在界面上层(容器下层)设置一个不透明度为20%~60%的纯黑色蒙层。部分小型弹窗不设蒙层,但会为容器设置投影,例如筛选器的展开、下拉菜单等;

  文本:文本是弹窗传达信息主体的必要条件,如标题、按钮等,即便把文本融入图片,也能一目了然;

  图片:用于运营弹窗传达更多信息内容的方式之一,为了对用户产生更强的吸引力,还可设计成动态效果;

  表单:为成功进入下一步做准备,如输入密码(iOS设备下载应用前的必要步骤)。也可以是当前页面流程的分支,例如输入优惠券等;

  选项:条件较少的选项可使用弹窗完成,单选、复选在选项不超过6个的情况下都可使用;

  图标:在弱化次要操作的情况下,通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方,目的是突出主操作,鼓励用户从弹窗中进入下一步,另外还有单选、复选、提示等按钮;

  按钮:是进入下一步或回到上一步(去掉弹窗)的操作入口,部分应用也可以点击弹窗以外的空白区域让弹窗消失,但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。

弹窗的分类

分类一

  1、普通弹出式:用户上线时分时段主动推送广告窗口(网页、flash、流媒体)。

  2、定向性弹出式:用户访问特定的网址时弹出广告窗口。

分类二

  弹窗可以按照是否强制打断用户操作来分成两种,模态弹窗和非模态弹窗(也可以叫做阻断式弹窗和非阻断式弹窗),两者的区别在于需不需要用户对其进行回应。

  1 模态弹窗

  模态弹窗:模态提供了一个专注聚焦的环境,用户只有完成或者关闭当前任务,才能进行其他任务。

  模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其它操作;非模态弹窗则不会影响用户的操作,用户可以不对其进行回应,非模态弹窗通常都有时间限制,出现一段时间后就会自动消失。

  特点:打断用户当前的操作流程,属于强势的干扰行为,故运用弹窗需要慎重考虑。

  常用组件:dialog(对话框)/alert(警告框)、popover(浮出层)、action sheet(动作菜单)、activity views(活动视图)、modal bottom sheet(模态底部菜单)。

  2 非模态弹窗

  非模态弹窗:常用于轻量级的操作反馈和信息传递,不需要获取屏幕焦点,用户可以同时操作屏幕中的其他内容。

  非模态弹窗一般被设计成用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

  特点:属于轻量级的反馈,不会对用户流程产生干扰,但同时又给了用户反馈和信息。

  常用组件:Toast(吐司),snackbar,Hud(透明指示层)。

常见的弹窗模式

  1、Toast 提示框

  Toast提示框是一种非模态弹窗,它弹出一个小信息,作为提醒或消息反馈来用,一般用来显示操作结果,或者应用状态的改变。

  例如你发出了一条短信,App弹出一个Toast提示你消息已发出。

  最常见的Toast提示框为一句简短的描述性文字。这种样式的弹窗可以出现在页面的任何位置,可设置成在页面顶部、中部或者在底部出现(但一般都是出现在页面的中轴线上),具体的显示位置根据页面的整体设计进行设置。该种Toast在安卓App上十分常见。

  还有一种Toast弹窗由简单的图形和简短的文字组成,显示位置一般位于页面正中央。

  2、Dialog 对话框

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

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

  3、Actionbar 功能框

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

  Actionbar一般被设计用来向用户展示多个功能按钮选择。

  4、Snackbar 提示对话框

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

本条目对我有帮助1
MBA智库APP

扫一扫,下载MBA智库APP

分享到:
  如果您认为本条目还有待完善,需要补充新内容或修改错误内容,请编辑条目投诉举报

本条目由以下用户参与贡献

Tracy.

评论(共0条)

提示:评论内容为网友针对条目"弹窗"展开的讨论,与本站观点立场无关。

发表评论请文明上网,理性发言并遵守有关规定。

打开APP

以上内容根据网友推荐自动排序生成

闽公网安备 35020302032707号