zoukankan      html  css  js  c++  java
  • 组件化设计:弹窗的使用逻辑

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

     

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

     

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

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

     

    对话框(Dialog / Alert)

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

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

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

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

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

    浮层(Popover)

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

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

    半屏浮层

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

    引导气泡

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

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

    吐司

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

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

    通知条(Snackbar)

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

     

        

  • 相关阅读:
    bootstrap学习9-路径分页和徽章组件
    bootstrap学习8-输入框和导航栏组件
    bootstrap学习7-图标菜单和按钮组件
    bootstrap学习6-辅助类和响应工具
    bootstrap学习5-栅格系统
    bootstrap学习4-表单和图片
    bootstrap学习3-表格和按钮组件
    bootstrap学习笔记2
    相等操作符
    读《JavaScript dom编程艺术(第2版)》笔记 1-2
  • 原文地址:https://www.cnblogs.com/wangqian888/p/11926680.html
Copyright © 2011-2022 走看看