bootstrap 模态框无法使用_模态窗 Modal Window - 产品中的??注意力设计
![](/assets/blank.gif)
本文是「经典交互模式」系列第二篇,前文回顾:面包屑导航 Breadcrumbs Trail
全文目录
- 什么是模态窗
- 模态窗的使用问题
- 模态框应用实践
什么是模态窗 Modal Window
我们在各种不同的屏幕应用中见过「模态窗」,全屏幕模态窗、弹出信息框、(跟随触发)弹出信息框、灯箱弹窗、多步骤对话框等等,它们有着不同的形状、大小和交互模式。
![](/assets/blank.gif)
可以说,所有屏幕应用都可以分为模态窗口和非模态窗口。
什么是模态窗口?我们先从「模态」理解起。
Modal 模态是指计算机处于一种特殊状态下,此时用户进行同样的输入操作,会得到不一样的输入结果。典型的案例即按下 大写锁定(Caps Clock)时,用户输入的字母会变成大写,此时大写锁定键成为了模态开关。
![](/assets/blank.gif)
而「模态窗」即指窗口的特殊模式:出现在前级主视窗前方,使主窗口可被看到(移动屏幕上可能出现全屏),但无法使用。用户想要返回主应用,需要先与模态窗进行互动。
在非模态窗中,用户可以自由的浏览、操作、返回或是通过导航跳转;而在模态窗中,你需要先完成操作,才可以返回状态。
![](/assets/blank.gif)
模态窗的使用问题
由于模态框覆盖原浏览内容且不进行操作无法离开的特点,它总被应用于强制打断用户的工作流程获取用户的注意力。久而久之,人们反而形成了一种「应激机制」——精准地找到「关闭按钮」,瞬间关闭。
![](/assets/blank.gif)
- 需要即刻的注意力
模态窗将系统置于一个特殊模态中,用户需要搞懂模态窗的内容并作出反应。
- 打断用户的工作流
从模态窗返回后用户需要额外的时间和精力想起此前的工作内容。
- 用户产生了额外的目标
有些复杂内容的模态窗花费了更多的额外成本,用户不得不将「关闭窗口」作为当前的任务目标。
- 遮挡了主窗口内容
特别是出现表单类模态窗口时,重要的信息被遮挡导致无法完成表单填写。
纵观带来的巨大交互成本,模态窗的使用却依旧广泛。因此,了解如何合理、节制地使用模态窗口或许可以帮助你创建更加安全、流畅的产品体验。
模态窗应用实践
- 展示更多内容
模态窗口可以用于展示更多的浏览内容,例如图片、视频等。
![](/assets/blank.gif)
- 完成一个独立的任务
模态窗口可以承载应用主任务之外的独立任务,它有着明确的触发点和结束点。
![](/assets/blank.gif)
- 显示重要警告 用于预防或改正严重错误
预防总比补救更重要。这可能是最常见的模态窗使用方式。那么什么才是「防止严重错误」的重要时刻呢?
1 只需要用户留意就可以避免的错误
![](/assets/blank.gif)
2 难以补救的错误
![](/assets/blank.gif)
- 补充重要信息 保证流程继续进行
由于信息的缺失,流程无法继续下去时,我们运用模态窗要求用户补全信息。
![](/assets/blank.gif)
- 避免让用户在模态框中做复杂决策
模态窗的内容应当简洁、直接,避免用户完成复杂的计算或研究。例如模态窗显示的商品优惠,却遮挡了原价信息,用户难以做出选择。
![](/assets/blank.gif)
- 避免用模态窗显示提示消息
警告或错误提示尽量出现在相关目标旁边,消息通知不需要额外占用用户的注意力。
![](/assets/blank.gif)
总结
无论是否使用模态窗口,我们的产品目的总是帮助用户解决问题、完成任务继而达成目标。没有人愿意自己着手的事情没打断,所以在应用模态窗时,衡量一下它的交互成本,并保证用户会觉得这次中断是有价值的。
参考链接
- Therese Fessenden, Modal & Nonmodal Dialogs: When (& When Not) to Use Them, Nielsen Norman Group
- Raluca Budiu, Interaction Cos, Nielsen Norman Group
- Naema Baskanderi, Best Practices for Modals / Overlays / Dialog Windows, uxplanet.org
- Fabian Sebastian, Modality Is the One UX Concept That Most Designers Don’t Fully Understand, uxplanet.org
bootstrap 模态框无法使用_模态窗 Modal Window - 产品中的??注意力设计相关推荐
- bootstrap 模态框无法使用_22 模态框Modal教程(plotly Dash Bootstrap版)
今天第22课,本节课程主要学习Dash Bootstrap Components中的模态框Modal,类似页面中常见的对话框,在python web网页设计中较为常用.欣赏一首很甜蜜安静的钢琴曲< ...
- angular模态框位置_宽带双波束双模态OAM反射阵天线
摘要 本文提出了一款背对背双开口环型宽带反射单元,并结合口径场叠加方法,设计了一款宽带双波束-双模态轨道角动量(OAM)反射阵天线.反射阵单元包含背对背双开口环型金属结构.FR-4介质基板.空气层和金 ...
- sqldeveloper导出数据字典_如何全面建设B端产品中的数据迁移方案
加关注,带你看世界 在新系统替换老系统或者系统升级的项目中,难免会存在数据迁移的工作,并且随着业务系统和数据结构的复杂性,数据迁移的难度越大. 这亦要求在项目实施的前期,根据客户的需求尽可能全面地考虑 ...
- ai人工智能在手机的应用_何时更重要地在产品中利用人工智能
ai人工智能在手机的应用 You need to go from your house to the Airport. Do you take a Limo or a bike? Of course ...
- 举例说明层次分析的三大原则_【图片】房屋室内装修中软装设计的六大原则和三大要点【成都装饰公司吧】...
据小编所知,"轻装修,重装饰"的概念越来越被人们接受,利用软装来装饰家居,不仅能省下一笔装修费,更会带来不一样的装修效果.下面成都装饰公司大晶装饰小编就为大家介绍一下房屋室内装修中 ...
- Bootstrap 学习之js插件(模态框(Modal)插件)
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. ( ...
- bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
- Bootstrap模态框遮罩问题
之前,遇到二级模态框问题,一直没解决,今天看了一下,不过我还是选择了简单的解决办法. 问题:一般模态框默认的点击遮罩,就会触发close事件,从而模态框关闭.二级模态框的时候也是如此. 但是我发现在二 ...
- bootstrap弹出的模态框水平垂直居中的实现
学习javascript从入门到放弃!,这是第一篇随笔,经验不足,如有不当之处,还望指出.好了废话不多说直接切入正题吧 1.bootstrap默认的model写法: //触发模态框的button &l ...
最新文章
- Python:Scrapy Shell
- Maven 版 JPA 最佳实践(转)
- 06.node类型设置
- JDK源码解析之 Java.lang.StringBuilder
- 出现次数超过一半的数(信息学奥赛一本通-T1186)
- springboot2.0 fastjson 日期格式化不生效解决
- 【清北学堂】广州OI学习游记
- G面经prepare: Straight Partition of A Deck of Cards
- LeetCode-1438. 绝对差不超过限制的最长连续子数组
- navicat和 plsql 连接oracle数据库 总结
- win10电脑上计算机图标怎么删除,Win10删除此电脑多余软件图标的详细方法
- Tarjan算法——求强连通分量
- 2000-2019年中国地级市人均GDP
- 【毕设记录日记】Python基础内容笔记整理6:函数
- 思科Cisco交换机的基本模式和命令基本使用和技巧大全
- 小米9开发版已开启Android,小米9迎来最后一个基于安卓9的系统,即将启动安卓q开发版内测...
- 24c512 c语言程序,24C32~24C512的51单片机读写程序
- 抖音集锦(你不得不看的那些镜头)
- uva 672 Gangsters( dp )
- 软银集团:从零到一万亿