突然资讯网
首页 >> 科技 >> 正文

主要是模态框和非模态框的使用

日期:2021-01-27 17:29:13 来源:互联网 编辑:小狐 阅读人数:916

主要是模态框和非模态框的使用(图1)

最近在整理的组件规范,收集各个场景下的组件应用,在搜集应用控件时,弹窗的套用、混用、乱用情况挺多的。

主要是模态框和非模态框的使用:

模态框:一般会有一层黑色透明的蒙板,它打断用户所属的主流程,不能进行下去,只能到完成模态框的操作,才能返回到主流程中去,这个操作很明确,不会被误解。

非模态框:一般没有那一层蒙板,不会影响所属的主流程,也不用担心原有进度会停止,仍然可以持续操作,即打开非模态也能看见底层的主流程。

概述:模态or 非模态,统称为弹窗。

样式上可以理解为类似卡片,能够帮助用户快速定位获取关键信息和进行操作,它的内容是灵活的,一般情况下包含文字、图标、按钮。弹窗的设计是给用户传递与当前场景需要的操作相关的内容。

主要是模态框和非模态框的使用(图2)

场景使用:会根据业务的需要、场景要求,衍生出其他类多种形态。大多情况下先对弹窗分类,再对应到场景中使用。而实际上产品设计会从实际业务出发,从使用方式考虑,倒推来使用什么样的弹窗符合要求。

基本设计原则:层次要分明,突出重点。

主要是模态框和非模态框的使用(图3)

一、悄无声息的,你在不在乎它,它都会出现的

全局提示:一般由主动发起,不是用户请求的,大体分为进度提醒、提醒、公告提醒。

1. 进度提醒

这个是由发起的,表明用户当前所在的操作的进程中的位置,抑或是卡在进度未操作,无响应状态,用户。

位置:在页面的顶部浮层显示一块区域;统一放置分类里。

主要是模态框和非模态框的使用(图4)

主要是模态框和非模态框的使用(图5)

2. 提醒

来自一些重要的信息推送给用户,或者是来自其他用户的提示信息,抑或是操作反馈。

位置:将其放在右上侧,并自动关闭。

主要是模态框和非模态框的使用(图6)

3. 公告提醒

位置:与进度提醒同一位置,一般情况下并会在3S自动消失。

主要是模态框和非模态框的使用(图7)

二、强制打断用户当前流程的

部分功能需要用户打断去确认操作或是可能会造成比较危险的,不常用的,那么就需要改变用户操作焦点,将用户的注意力从原来流程中拎出来,那么这个时候需要一个方式隔离原有流程和需要当前操作的内容,模态框就是比较适用的。

叠加在窗口的弹出式窗口,弹框以对话的方式让用户参与进来,以对话的方式与用户产生交互操作。

操作反馈提示类:

1. 成功和失败

主要是模态框和非模态框的使用(图8)

2. 确认型弹窗

在简单的业务场景中,只需要用户进行确认的“确认”或“取消”等案例。一般情况下应用在对内容的提交、修改,在内容详情页里的删除操作,表格的批量删除等。

样式:标题(以所属对象作为标题)+文案(对对象的解释说明)+操作按钮。

主要是模态框和非模态框的使用(图9)

3. 操作型弹窗

在复杂的业务场景中,需要用户进行数据输入一系列操作。

一般会有新建内容(新建内容很多的就需要用新页面,弹窗有限空间满足不了大容量的数据输入)查看详情(内容多需要新页面展示)详情。有部分场景下,新建内容和内容是重合的。

一般样式:标题+数据输入组件+操作按钮

主要是模态框和非模态框的使用(图10)

复杂样式:标题+数据输入和数据展示组合控件+操作按钮

主要是模态框和非模态框的使用(图11)

4. 组合型弹窗(堆叠弹窗)

特殊复杂业务中,单层模态框不能满足实际业务的需要,考虑弹窗的容量大小以及主次用户类别使用的情况下,会使用堆叠弹窗,在有限的条件下,能做的就是尽量将弹窗分层次。

主要是模态框和非模态框的使用(图12)

三、弹窗出现不打断用户原有流程的

1. 气泡提示(解释说明的)

起辅助说明的,辅助用户决策。

样式:深色背景+文字描述;一般由鼠标滑入目标区域,展现气泡提示框,鼠标滑出即消失。

主要是模态框和非模态框的使用(图13)

2. 气泡对话框

一般简单场景中,对单条信息或者模块内的某一个内容执行操作确认。

主要是模态框和非模态框的使用(图14)

复杂的场景中,气泡框也承载需要用户去执行数据输入的操作,将气泡内的执行后的结果与原流程同步数据展示结果。

主要是模态框和非模态框的使用(图15)

除此之外,气泡框承载的内容和模态框操作类型有重合部分,不同的是,气泡框的数据与主流程的数据需要有对应关系。

3. 堆叠气泡框

四、特殊场景下

在某些复杂业务的场景下,需要模态框和非模态框搭配组合使用,特别是操作弹窗和气泡框之间。

一般情况下,是操作弹窗—>气泡框(气泡框—>操作弹窗这个类型不常有,主要是不符合用户的使用习惯)

主要是模态框和非模态框的使用(图16)

五、总结

对于弹窗的使用,应用到各个类型的用户场景下选择合适恰当的方式去满足需求,也许不尽人意,但也是在进步。不仅仅需要了解弹窗的类型,更需要了解业务场景,实际应用过程中需要两者相互碰撞,打破、重组,寻找到合适的方式。

本文相关词条概念解析:

模态

模态分析是研究结构动力特性一种近代方法,是系统辨别方法在工程振动领域中的应用。模态是机械结构的固有振动特性,每一个模态具有特定的固有频率、阻尼比和模态振型。这些模态参数可以由计算或试验分析取得,这样一个计算或试验分析过程称为模态分析。模态试验时,一般希望将悬挂点选择在振幅较小的位置,最佳悬挂点应该是某阶振型的节点。模态分析技术从20世纪60年代后期发展至今已趋成熟,它和有限元分析技术一起成为结构动力学的两大支柱模态分析作为一种“逆问题”分析方法,是建立在实验基础上的,采用实验与理论相结合的方法来处理工程中的振动问题。

延伸 · 推荐

生成字幕或者回答问题等,哥大,追踪AI技术和产品新动态,融合多模态信息,性能更强

子豪 发自 凹非寺现在,给添加字幕,又有了新玩法。这就是Facebook、哥伦比亚大学等大学的新研究,共同了一个框架— Vx2Text。这个框架可以帮助我们,从、音频等输入内容中提取信息,再以人类可以...

网友评论