从 0 开始搭建一套后台管理系统，成本巨大，所以都会选择一套成熟的组件库，基于此，再堆叠业务逻辑。我们公司的组件库基于[Ant Design](https://ant-design.antgroup.com/index-cn)。Ant Design 包含一套完整的后台解决方案，不仅提供了 75 个[组件](https://ant-design.antgroup.com/components/overview-cn/)，还开源了整套[设计方案](https://ant-design.antgroup.com/docs/spec/introduce-cn)，配色、字体、图标、布局等，还分享了众多的用户体验案例。官方基于 Ant Design 中的组件，还提供了一套开箱即用的中台前端/设计解决方案：[Ant Design Pro](https://pro.ant.design/zh-CN)，更贴近于页面研发，缩短开发时间。本文的很多优化思想，都来源于这两套开源库，不过也增加了很多自己的理解。 ## 一、站在巨人的肩膀上   在将系统呈现给用户之前，有必要用专业的眼光来为系统做一次初步的优化。下图是基于上述 2 个库整理的一张思维导图，包含了一个管理后台常用的几个部分，完善这几部分，可以让用户在使用系统时有较好的体验，像图表可视化之类较为特殊的模块并没有列出。 :-:  **1）基础结构**   管理后台的全局结构比较固定，包括侧边顶部的 Logo、侧边菜单、顶部菜单、面包屑导航。   侧边菜单可以隐藏，若要有更好的体验，还可以将宽度变为可自定义，例如左右拖动修改宽度。后台用户的页面权限也会集中到侧边栏，有权限的展示，无权限的隐藏。 :-:    在顶部菜单中，不仅仅可以用于导航（修改资料、登出等），还可以增加快捷的检索按钮，例如输入用户 ID，得到一个弹框，展示用户详情，包括基础资料、订单、操作记录、相册、设备等，将这些信息聚合在一起，便于查询。 :-:    当一个页面中有比较多的内容时，可以用标签页来分离，一个标签对应一个子页面。 :-:    回到顶部，在比较长的页面中比较实用，这个按钮也应该是管理系统不可获取的一个组成部分。 :-:  **2）反馈**   当用户和系统需要交互时，就得为用户在各个阶段提供必要、积极、即时的反馈。但同时要避免过度反馈，以免给用户带来不必要的打扰，对于能够及时看到效果的简单操作，可以省略反馈提示，下面是一组反馈示例。 :-:    常见的结果反馈可以分为两种：顶部全局提示和对话框提示（上图所示）。顶部全局提示就是 Toast，比较轻度，过几秒后会自动隐藏。而对话框提示就比较重，会终止用户操作，用于传递非常重要的信息。   表单的操作过程中可通过不同的校验规则给用户提供表单校验提示（上图所示），让他们及时的纠正错误。在表单中，对于比较复杂的字段，可以用气泡卡片的方式提供补充说明（下图所示）。 :-:    交互的操作过程中尽可能将状态反馈给用户，即时的响应会给用户增加信赖感。在操作需要较长时间才能完成时，显示该操作的当前进度和状态。若加载时间较长，应提供取消操作。 :-:    当目标元素的操作需要用户进一步的确认时，可以通过气泡确认框在目标元素附近弹出浮层提示，以此来询问用户，常见于数据列表操作一列中的按钮。 :-:  **3）数据列表**   数据列表在整个管理系统中占比非常重，其结构也比较固定，最上边是数据过滤（即查询条件），然后是数据统计（可选项），再有是数据列表（即表格区域），其中还包含列表工具栏（新建、刷新、排序等功能），后面是分页栏（图中没有画出），最后是批量操作。 :-:    在 Ant Design Pro 中有专门的组件实现[查询条件](https://next-procomponents.ant.design/components/query-filter)，内置查询和重置两个按钮，当条件比较多时，还能自动隐藏。在下图中，就能看到列表工具栏（贴在表格上边），提供的是批量导入、导出数据、创建应用等，这些按钮都可自定义。由于列表的字段较多，还提供了左右滚动，并且第一列和最后一列固定。批量操作是固定在页面底部的，并且会显示选中的数量。 :-:    在列表的加载过程中，可以提供骨架屏过渡，加载完成后，显示数据。当没有数据时，要提供空状态占位，而不是空白一片。 :-:    数据加载完成后，在悬停时，可以为当前那一行增加底色辨识。 :-:    文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。 :-:    分页器可以让用户清楚的知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。下图展示了分页器的各个部分，以及常用的功能。 :-:    上述是比较常见的数据列表，还有几类比较特殊的数据列表。第一种是行内可编辑的表格，点击操作列的编辑后，只读的列变为可操作的控件，比较快捷的编辑方式，适合字段较少的列表。图中最下面的添加一行数据，是一种的特殊的复制按钮。 :-:    第二种是可拖动排序的表格，将鼠标左键按住第一行的 icon，然后就能拖动这一行了。 :-:    第三种是卡片列表，展现形式与常规列表较为不同。在卡片中，可以根据业务侧重元素，例如提供放大图像的功能。 :-:  **4）表单**   表单也是后台系统中不可分割的一部分，现在很多时候不是单独的页面，而是数据列表的一部分。例如点击列表中的某个字段出现浮层表单，浮层的形式可分两种：弹框（Modal）和抽屉（Drawer），弹框适合字段较少的表单，如下所示。 :-:    由于抽屉提供的空间比较多，因此能包含更多的字段，如下所示。 :-:    除了浮层表单之外，对于较为复杂的表单，可以使用分步表单。将用户需要填写和确认的信息按照线性流程组织，利用步骤条告知用户完整的流程和进度，常常在最后提交前让用户再次确认信息，并在流程结束后给与明确的结果反馈。 :-:    登录表单是一种比较特殊的表单，独立于系统的基础布局结构。一般都会简单点，只提供用户名和密码登录，省略短信登录。 :-:    常用的表单控件包括输入框、单选框、多选框、下拉框等，这类都比较简单，复杂的有上传、数据联动和复制等。文件上传可以用比较简单的展现形式，如下所示。 :-:    而图像上传因为需要预览，所以得提供一块预览区域，常见的就是将按钮区域放大。 :-:    还有一种拖动上传，为了更好的体验，在上传的过程中，还需要实时更新进度条。 :-:  **5）按钮**   按钮虽然是一个小元素，但是它遍布整个系统，哪都有它。对于按钮，目前也有了一套成熟的设计规范，主要体现在样式和交互两方面。在下图中，1 是次按钮，2 是主按钮，3 是文字按钮，4 是图标按钮，5 是在按钮中添加图标。 :-:    主按钮是主色填充，表示高强调，其余按钮的强调级别依次降低。 :-:    红色用于警示用户该操作存在风险，通常删除按钮会被赋予红色。 :-:    在移动到按钮位置时，需要有个聚焦效果，例如高亮。在点击按钮时，需要有个过渡效果，例如增加阴影，确认点击成功。在通信时，可以有个加载效果。 :-:  **6）其它**   响应式是为了让后台可以支持移动设备的访问，在没有电脑的户外情况下，也能浏览后台，操作管理。   暗黑模式是一种体验优化，比较适合夜晚办公，也比较符合程序员的审美。在公司内部上线后，很快得到了业务方的肯定，还督促产品完善客户端的夜间模式。   异常页面也是后台系统不可缺少的一部分，权限不足提示 403，页面不存在提示 404，服务器错误提示 500 等。通过异常页，可以解释发生了什么异常，为用户提供相应的建议或操作，避免用户感到迷失和困惑。 :-:  ## 二、紧贴业务   虽然开源库已经扫清了许多的体验障碍，但是在实际业务中，还是会出现各类问题，集中体现在流程、功能、性能等方面。例如流程过于繁琐，需要简化；功能太少，需要补充；页面太卡，难以操作等。不过在优化体验之前，需要保证业务进度不受影响，换句话说，就是要有空闲的人力资源去做体验优化这个工作。 **1）解放生产力**   解放生产力就是为了让更多的人能参与到优化的工作中。我们团队之前在开发管理后台时，会先找一张类似的，然后复制一份，修改文件名称，在此基础上做改动。既然能复制，那就说明有很多共通之处，在整理 200 多张页面后发现，几种常规的布局大概占总页面数的 80% 以上，只有很小一部分的页面需要专门定制，那么接下来就是抽象出常规布局中所包含的组件。   模板组件呼之欲出，经过一周多时间的调试，在组内开始推广。在开发这套组件的时候，预留了许多回调，可根据不同场景做自定义的逻辑。在模板组件上线后，就将页面的开发从3天降低至1天以内，有些简单页面两三个小时就能布局完成。后续在浏览 Ant Design Pro 的组件库时，发现我的模板组件与这些组件类似，但是功能更为的丰富完善，能够适应更多复杂的场景。   这是一次非常典型的降本提效的经历，除此之外，我们还在研发各类工具，让各种业务走可视化的配置，不用再单独研发。例如一个将榜单活动配置化的工具，就是将常用的活动做成可视化配置的形式，目的是减少开发和测试人力，将 2 天的研发时间压缩至 2 小时。这个配置协调了 UI 组、产品组、测试组、前端组、数据组一起，制订出了相关规范，已成功运营了几十场活动。 :-:    给我们组自己减负，也是一个目标，那么也需要开发许多趁手的工具。例如设计BFF 平台，在研发完成后的一段时间才开始推广，我们组比较慢热，有段时间，新的业务接口基本都会走此平台，线上已有 70 多个接口在稳定运行着。 :-:    为了提升管理后台的开发效率，先后研发了后台页面可视化编辑器（即低代码）第一版和第二版，第一版组员接受度并不理想，第二版已经上线了 2 个菜单。不过，在使用体验上并不理想，后续还需要迭代完善，才能真正使用。 当然，解放生产力和体验优化大部分情况下是并行进行的，在进行一段时间后，获取的收益将会非常高。 **2）发现问题**   接下来谈谈发现问题，像流程、功能、性能等问题都是在深度使用后台系统后，才能遇到，因此想要发现这类问题，需要与相关人员交流。有条件的话，可以进行一对一的交流，提前通知后，让他们准备下。因为是给他们解决实际问题，所以一般情况下，他们都会积极配合。当时一下子收到了几十个问题反馈，经过整理后，修复比较容易实现的问题，诸如换个字体颜色、加个筛选条件、增加一列等。果断上线后，效果非常好，对你来说是一个小改动，但对业务方来说，却是实打实的提升工作幸福感。   另外一个发现问题的方法是发放满意度问卷，相比上一个方法，受众面更广，成本更低。毕竟一对一是要抽出双方时间的，不能频繁使用。但相对来说，一对一耳闻目染的效果肯定是最好的。如果收到的是高质量的问卷，那么收获也是满满的。   问卷的题目形式包括单选和问答，不要包含太多的专业术语，通俗描述，答案也不一定要用标准的五级量表（非常满意、满意、一般、不满意、非常不满意），可以更具象地去描述答案，方便用户选择。例如： * 对XX页面不太满意的原因是什么？ * 开发人员误解了需求 * 项目延期 * BUG太多不能用 * 其他   当选择其他时，可以提供文本框，输入具体原因。   除了在这类正式场景中获取问题之外，在日常时刻，其实也可以发掘，例如听到有人在抱怨 XX 功能太难用时，就可以去搭话了、某人在群聊中提到某功能有异常时等等。   有些体验问题也可以自己去发掘，例如某个数据列表中的字段由于太多，导致位置变形了，那么你可以主动去增加左右滚动条。筛选条件太少，就增加几个。日常也可以去观察其他开源管理系统的功能，考虑是否可以增加到自己的系统中，提升体验，响应式和暗黑模式就是在浏览其他系统时得到的灵感。 **3）解决问题**   解决问题的核心本质就是资源成本是否能负担的起。某些比较重要的体验问题，尤其是需要多端协调的，可以将其加到版本迭代中，这样既能引起重视，也能安排一个固定时间分出资源来解决。   不过大部分时候，体验优化上不了台面，提不上日程，优先级比其他需求要低很多。但好在管理后台大部分是由我们全栈管理着，优化工作可以由我们自己承担，不需要找人协作，可控性比较大。可以将那些优化见缝插针，逐个击破。   有些优化难以彻底解决，只能在已有条件下做到最好。例如后台有个审核内容的功能，可以一次性提交 200 条记录，在提交后，服务端会串行的做一系列的逻辑处理，那么不可避免的就会让接口响应会变慢。虽然在接口中，已经做了数据库表的索引，以及尽可能的与数据库少交互，包括一次性从数据库中读取多条记录，将数据缓存到 Redis 中等，但是再要优化，就得改变技术架构，成本会比较大，只能与业务方协商，暂时互相妥协。一般来说，随着业务的迭代，架构也是要跟着调整的，但受限于各种客观条件，有时候不得不搁置。   各个公司的业务都会有所不同，遇到的业务优化问题也会大相径庭，并没有银弹，得根据实际情况分析，在现有资源的前提下，找到最优解（占用的资源最少，得到的效果大家都能认可），这是一个平衡的过程，需要多多尝试。 ***** > 原文出处： [博客园-前端体验优化](https://www.cnblogs.com/strick/category/2360021.html) [知乎专栏-前端性能精进](https://www.zhihu.com/column/c_1610941255021780992) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。