【读书笔记4】弹框体系总结：模态弹框和非模态弹框

Posted 2023-05-07

参考技术A 原文链接： 弹框体系总结：模态弹框和非模态弹框 - 优设-UISDC

概要： 弹框主要完成信息传递和用户反馈两大功能。所有的 对话框、浮层、提示条 我们都习惯性的称之为弹框，其实弹框我们可以分为两种： 模态弹框和非模态弹框。

1、模态和非模态。 最大的区别就是是否强制交互。模态会打断用户的当前流程，不操作的话，其余功能无法使用。

2、模态弹框。模态弹框属于一种重量性反馈，一般用户用户进行重要的操作。 优点：很好的获取用户的视觉焦点；缺点：打断用户的操作流程。

A 对话框： 对话框一般用于用户进行一项很重要或者有风险的操作，这时会弹出一个对话框给用户提示信息，用户根据提示来进行判断。一般出现在屏幕的中间位置，会对界面的主要内容造成遮挡。

除常规对话框，可进行信息录入，还可用于营销宣传。

B 动作栏： 对话框的加强版。Alert和Dialog一般都只有两个按钮，动作栏可提供多个功能按钮，展示样式多变。

但也有例外。有的动作栏只有两个选项。网易云音乐删除歌曲，通过动作栏来完成（笔者觉得也可使用对话框）。

C 浮层。 浮层是用户点击控件或者界面某一区域浮出的半透明的临时视图。样式跟动作栏很相似，都可向用户展示多个功能选项。但浮层可以出现屏幕中的任何位置，能够给用户更具有指向型的提示。

小结： 在不考虑信息录入情况下，对话框适用于用户进行判断操作，而动作栏和浮层适用于用户进行选择操作，而浮层相对于动作栏更具有指向型。

3、非模态弹框。

不强制交互，也不会弹出半透明背景层，停留后会自己消失。非模态属于轻量级反馈。

A Toast 

但真实的toast出现在屏幕的任何位置。甚至可以加ICON，背景颜色也能改变。toast的优点在于不会打断用户当前的操作流程，属于轻量级，缺点是易被忽视，而且不适合展示过多信息。为增加可读性和美感，一般采取文字加ICON。

B Snackbar

由文字加功能按钮组成。可点击按钮进行交互。及时不点击也会消失，一般位于屏幕下方。可将其看作带有icon的toast。

属于非模态，但有模态的一些特点。有按钮可供交互，出现在界面下方，和action sheet很像。

小结：非模态偏重信息提示，模态即可信息提示也可供交互。toast为轻量级弹框，snackbar集众家所长。

4、弹框体系的建立优化

任何弹框都会对用户造成干扰，即使是toast。从用户体验角度看，一个操作流程所受到的干扰越少越好。

案例（方案3最佳）：

多态按钮：

此外多态按钮的使用也可以帮助我们解放弹框的压力。例如，支付宝的支付界面，立即支付按钮可以跳转到付款成功的状态，这时候就没有必要再用弹框给用户提示了。

3、

模态弹框（Modal）简单实用

1.需要引用bootstrap的js、css文件，且需引用jquery文件，因为bootstrap的js依赖jquery

<script type="text/javascript" src="../assets/js/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="../assets/css/bootstrap.css"/>

2.详细说明：

• 使用Button触发弹框，通过data-target="modal的ID"来定义想要加载哪个模态框。
定义Modal使用到的Bootstrap样式：
1. modal：用来把 <div> 的内容识别为模态框。
2. fade：切换效果，当模态框被切换时，它会引起内容淡入淡出。
3. aria-hidden、aria-label和aria-labelledby为无障碍网页相关字段。

<button class="btn btn-primary form-control" data-toggle="modal" data-target="#myModal">弹出模态框</button>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    标题
                </div>
                <div class="modal-body">您有一条新短消息,请注意查收!</div>
                <div class="modal-footer"><button class="btn btn-info" data-dismiss="modal">确认</button></div>
            </div>
        </div>
    </div>