全文阅读约10分钟，无高深理论，直述弹窗在tob产品中的应用场景。弹窗在B端设计中应用非常高频了，根据应用场景我把它分为三类，一类为模态弹窗(有黑色不透明度的背景遮罩)，一类为非模态弹窗(无遮罩)，一类归为其它。模态弹窗模态弹窗的特性：模态弹窗一般通过点击触发，出现时自带遮罩，会有强烈的跳出感，且视觉聚焦于弹窗内容。90%的模态弹窗应用于信息的新增和编辑场景、及信息的强提醒、信息确认；做为单独的信息载体模块，一般用于整体业务逻辑的延伸和补充，所以很多时候前端也很愿意用弹窗来解决。因为到达弹窗意味着某个小分支流程的结束。弹窗由于承载内容小于页面，有时候会涉及到录入信息过多的情况，这个时候如果让所有内容都在一个弹窗内显然体验不好，于是就需要内容分步，一般不建议超过三步。以上方案仅适用于分完步骤后单信息内容不多，如果单步骤信息还是很多，承载信息的容器单靠以上弹窗显然不够用了，这就引出了抽屉。抽屉具备与弹窗相同的特性，并没有跳出当前页，并且能承载更多信息。这里面需要注意的几个交互小细节，一个是弹窗的关闭，模态弹窗的关闭有四个热点和esc快捷键，需要注意：“有信息录入类的弹窗尽量取消掉遮罩层的关闭热点，或者给二次确认提示，防止用户不小心误触，导致信息的重复填写。弹窗关闭热点一个是分步骤填写类弹窗or抽屉，涉及到上一步和下一步的操作，在交互中需要考虑每一步是否需要保存？(保存分为本地保存和数据库保存)，本地保存即保存在浏览器中，一般页面刷新后，保存的数据会消失，但是可以用作临时保存，而数据库保存是存在后台数据表中，绑定用户信息，不会随着页面的刷新而丢失，但是会占数据库内存，而且需要后端配合，本地保存前端就能写。所以针对本地还是数据库保存，就得看用户的使用场景及信息的重要程度，及内容的多寡。想象一下，你花了十分钟填写的信息弹窗因为一次误触关闭了，你还要回过头来在重新填写一次，是不是就很崩溃！抽屉要注意的交互细节是：层级不要超过二级，底部的确认和取消需要固定在浏览器底部。同时抽屉要遵循网页的栅格布局，然后就是上面说过的保存事项。而关于弹窗什么场景下只加确定按钮、什么场景需要确定和取消两个按钮，什么场景仅留下删除icon，就是根据弹窗内容来判断当前的语义。你需要用户填写信息，必然要加确定和取消，确定的作用更多的是做一次填写信息的判断，信息的录入是否符合要求、是否有未填写的等；做某个重要操作前必然需要加上确定和取消，主要是向用户强调这步操作你要慎重哦！取消按钮就是给用户反悔的机会。当详情类弹窗仅用来看看的话，原则上是不需要加上确定和取消的，因为你没有任何操作。关于遮罩的黑色不透明度是深点好还是浅点好，就看你的整体视觉风格了，走的小清晰风自然是浅点好，跳出感受也会稍微弱一点，这个不透明度的深浅我个人认为不要太过即可，并且整个TOB端产品都应该保持一致。深一点带来的好处就是视觉更加聚焦，如黑夜中的灯光一样。非模态弹窗模态弹窗常用于各分支业务流程的信息延展，代表着分支的小终点，而非模态弹窗常用于某个终点结束后的反馈(正确or错误反馈)。其次应用于系统报错提示，及消息提示几大应用场景。图片来源antdesign图片来源antdesign非模态弹窗基本都是全局提示，位于网页顶部展示，停留时间在2s左右；消息提示弹窗一般右上角展示，弹窗的消失需要手动点击确认或关闭，同时还可能伴有跳转新页面的链接以做快捷操作。全局提示其它除了以上两种常用弹窗类型，还有气泡、浮层这种类型弹窗的组件，我把它们归为其它。气泡常应用于缩略内容的展开描述，在tob类产品中非常常见，当你遇到单个信息内容过长且重要性层级不是那么高的时候可以应用该组件。交互形式一般默认鼠标悬浮展开。当你遇到某些重要操作需要二次确认一下，但是又不希望阻断当前操作时，也可以用到以下形式的浮层，相对于模态弹窗操作路劲更短，阻断感受又不会太强。交互形式一般为点击展开。之后就是浮层了，浮层常应用于图表类的数据展示，浮层的展示位置也会随着鼠标悬浮的点位不同而不同，这里主要注意的就是做好图表的安全区域规范，浮层的展示要求在安全区域内。同时需要注意鼠标悬浮的位置最好有线的指引，使用户明确浮层所展示数据的当前位置。最后全文讲解了模态弹窗、非模态弹窗、抽屉、气泡、浮层的相关特性及应用场景；关于分类是建立在我在应用过程中的认知上的分类，大家不用太过纠结怎么分类是正确的，只要知道在什么样的场景下应用什么样的弹窗类型即可。该文仅做新人指导，希望大家保持思考，在合适的场景应用或设计合适的组件，才是我们设计师存在的价值之一。写作不易，欢迎点赞、收藏、转发，哈哈哈！往期文章
