组件化设计:弹窗的使用逻辑

首先梳理一下弹窗的类别,根据其使用场景,可以归为 模态 跟 非模态 ,也称之为阻断式和非阻断式,评判标准在于是否打断用户操作。

 

 弹窗的作用在于,在用户进行页面操作时,中断其操作,或反馈相应的信息,或是当前内容的补充,帮助用户进行下一步操作,是处理页面中的即时任务的重要功能。

 

模态弹框   一般出现于页面中时,用户需要与之操作,页面层级很高,能直接吸引用户的关注,但同时会中断用户操作,因此在页面设计中不能滥用。比如对话框(Dialog / Allert)、浮层(Popover)、操作栏(Action bar)。

非模态框  在页面中表现得更轻盈,它能即时的给予反馈,但又不会干扰用户,从出现到消失的时间都很短。比如有吐司(Hud / Toast)和通知条(Snack bar),Hud / Toast 是分别属于ios 和 android 系统的控件,他们的表现形式基本一样,可以归为一类组件,页面中常见的半透明矩形提示就是以Toast 的 形式出现居多。

 

对话框(Dialog / Alert)

对话框的样式和类型很多,整体可以归纳为:信息展示 和 信息输入。

信息展示,可以细分三种,第一种为纯粹的内容展示,一般是对页面功能的说明,是对页面内容的一种,这类弹窗只需要一个操作按钮,当用户看完信息后就可以点击下一步操作。

其次,是需要用户进行主动选择的,这类弹窗会有两个或以上的选择项,页面在进行跳转前先给用户一个提示,从而避免与预期不一致。

第三类是运营类的弹窗,以图文混排的方式为主,它比纯文字类的更能获得关注,是运营活动中的首选,这类弹窗的触达率很高,在用户首次打开app进入页面时弹出,视觉风格表现上会更强烈,这类弹窗底部通常会有一个退出操作。

信息输入,则是需要用户在弹窗内进行操作,二次提交信息,常见的场景有:输入验证码、登录注册和改名分组等。弹窗的空间有限,不宜输入过多的内容,最好保持在小于2个的输入项,如果需要输入内容过多,用户会产生逆反心理;其次,容易降低效率,从而中断用户的操作。

浮层(Popover)

指用户在操作某个控件或者区域的时候,会在页面中弹窗一个临时视图,通常伴有黑色不透明度的蒙版。随着移动互联网设计的发展,同时也衍生出很多其他的样式,比如全屏浮层、半屏浮层和引导气泡,这类组件在操作和信息展示上都十分类似,因此,这里统一归类为浮层。

在交互上,它和页面的跳转的差异是导航栏上的退出操作,如果是下一级页面,导航栏上应该是返回操作。

半屏浮层

半屏浮层在页面设计中是经常使用到的一个组件,向用户展示下一步操作,是当前内容的延伸,其次,浮层中的内容一般不需要常驻在页面中,一般信息层级较低,不会影响用户在当前页面的使用,因此可以折叠起来,比如分享浮层。

引导气泡

当用户点击一个区域或者控件后,会出现一个下拉菜单对其作为补充,通常背景会伴有黑色半透明蒙层,用户需要点击临时界面的功能区域,或者点击其他空白处,才能进行下一步操作。

引导气泡和其他浮层相比,更为轻量。

吐司

主要作用给予轻量的即时反馈,且并不需要用户操作,持续时间短自动消失。

Toast交互的呈现方式一般是出现于页面内容刷新之后,位于页面中间或者底部。

通知条(Snackbar)

 Snackbar是Android系统中提供的一种兼容提示于操作的消息控件,跟toast很像,更像是它的增强版,都通常用于低干扰度的消息提示,该消息可被忽略且不会打断用户当前的操作。

 

    

原文地址:https://www.cnblogs.com/wangqian888/p/11926680.html