关于后台弹窗的设计

戴戴戴戴戴虎全

青岛/UI设计师/2年前/6086浏览

版权

关于后台弹窗的设计

戴戴戴戴戴虎全

针对个人在梳理后台弹窗中所遇到的问题进行的梳理和说明

前言：
最近在梳理公司产品中常见的弹窗，准备将他们统一抽离出来作为前端系统中的业务组件。
在抽离中发现有很多有意思的弹窗类型，在工作中由我自己设计并整理出来的弹窗长相也是有所不同。

首先梳理了常见的弹窗类型与常见类型：
1、模态弹窗：常见的弹窗类型分别为，对话弹窗、内嵌表单弹窗、分步表单弹窗、文件选择弹窗、复杂信息展示。
2、非模态弹窗：常见的类型有，通知提醒、全局提示、警告提示、气泡卡片、文字提示。

本篇将主要对于模态弹窗的造型样式进行探讨。

模态弹窗：

模态层位置：
页面最上层，使用半透明黑色在页面中进行整体覆盖。主要是在弹窗的底层，衬托弹窗，使弹窗不会被忽视掉，想要继续使用就必须先与弹窗进行交互。

优势：
通过全局的半透明黑色能够让用户更加聚焦，集中精力去处理好当前事情，能够通过透明度展示背景，让用户了解到自己并没有离开当前页面。
劣势：
打扰用户，感到强烈的中断的感受。

结构拆解：

1、 常见对话弹窗
常见警示弹窗分为：提示icon、提示标题、描述文本和操作按钮层。PS：特殊情况会有增加选项和输入框等进阶操作。

2、表单弹窗
从最基础的结构进行拆解，常见表单弹窗分为三层结构：标题层、内容区、操作按钮层。

表单弹窗主要进行表单事项的填写，也有增加继续创建功能，提升批量填写时用户体验

由此基础造型也会衍生出其他的弹窗造型：
如关闭在弹窗外、存在标题介绍文本、存在提示横条、超大尺寸弹窗、运营型弹窗等

还有一种弹窗是标题下需要出现提示条，对表单弹窗填写内容有提示性说明，但我翻了好多后台产品也没有发现，所以就先放一下我司的弹窗样式。（如果有相似产品也欢迎大家讨论）

3、分步表单弹窗
分步弹窗的主要特点是页脚上会有下一步、上一步两个选项供用户进行选择，同时用户点击下一步后，就会在左上角提示用户可以进行返回。
分步弹窗能实现具有先后条件且内容较少的需求，在工作中主要是新手引导或者有前后关系录入的弹窗会用到。PS：对于复杂流程在分步弹窗中可以通过由易到难的渐进式设计，减轻用户在填写时的心理压力，提升用户体验。

4、文件选择弹窗
附件上传弹窗是用户文件上传的重要途径，在 B 端产品中，现都采取拖动文件上传，相对而言更简便。PS：也可先前置选择支持上传的文件类型，减少导入过程中的失败情况。

5、复杂信息展示
复杂弹窗通常可以扩展为超大弹窗，再进行根据场景选择合适的容器可变为抽屉或独立新页面，进行更多的内容承载。

弹窗的尺寸大小设置
在看了这么多的模态弹窗样式后，相信很多人会有一个疑问，🤔️我的弹窗能设计成各式各样，但是弹窗的尺寸大小可以有一个规范吗？
答案就是必须要有一个规范！不让你就会得到前端自我发挥设计出来的各种弹窗大小！（本人最初的教训）
弹窗的高度与宽度
现在我们可以通过各种大厂的设计规范找到适合自己业务的弹窗尺寸设计。
ant design官网链接：
https://ant.design/index-cn
近期ant design刚发布了5.0版本，从「更聚焦」、「去干扰」、「轻松感」三个方向对系统视觉进行了升级。

Tdesigns官网链接：
https://tdesign.tencent.com/

通过对他们设计规范的查阅我们可以看到常见的弹窗尺寸规范：两个系统都对宽度进行了具体的定义，但是没有涉及到高度的限制。

高度设置

首先对弹窗高度而言，后台产品是基于浏览器进行打开使用，所以高度上要考虑产品实际的展示高度，而不至于因为弹窗高度过高出现页面滑动和弹窗内滑动同时出现的情况。

主流显示器分辨率
IDC评述网12月08日报道：根据百度统计最新数据显示，在11月份，电脑分辨率1920*1080以14.67%的占比继续称霸国内市场。

实际产品在浏览器中的展示大小
以Chrome浏览器为例，在1080px高度的窗口下需要考虑减去顶层导航栏的80px高度和底层系统栏的48px的固定高度，通过计算（右键检查也可）得到Chrome浏览器的中部内容区域高度为929px；所以在规范弹窗高度时，不能超出页面高度，同时也需要留出距离顶部和底部的安全距离。