爱学it学无止境
在将系统呈现给用户之前，有必要用专业的眼光来为系统做一次初步的优化。下图是基于上述 2 个库整理的一张思维导图，包含了一个管理后台常用的几个部分，完善这几部分，可以让用户在使用系统时有较好的体验，像图表可视化之类较为特殊的模块并没有列出。
1）基础结构
管理后台的全局结构比较固定，包括侧边顶部的 Logo、侧边菜单、顶部菜单、面包屑导航。
侧边菜单可以隐藏，若要有更好的体验，还可以将宽度变为可自定义，例如左右拖动修改宽度。后台用户的页面权限也会集中到侧边栏，有权限的展示，无权限的隐藏。
在顶部菜单中，不仅仅可以用于导航（修改资料、登出等），还可以增加快捷的检索按钮，例如输入用户 ID，得到一个弹框，展示用户详情，包括基础资料、订单、操作记录、相册、设备等，将这些信息聚合在一起，便于查询。
当一个页面中有比较多的内容时，可以用标签页来分离，一个标签对应一个子页面。
回到顶部，在比较长的页面中比较实用，这个按钮也应该是管理系统不可获取的一个组成部分。
2）反馈
当用户和系统需要交互时，就得为用户在各个阶段提供必要、积极、即时的反馈。但同时要避免过度反馈，以免给用户带来不必要的打扰，对于能够及时看到效果的简单操作，可以省略反馈提示，下面是一组反馈示例。
常见的结果反馈可以分为两种：顶部全局提示和对话框提示（上图所示）。顶部全局提示就是 Toast，比较轻度，过几秒后会自动隐藏。而对话框提示就比较重，会终止用户操作，用于传递非常重要的信息。
表单的操作过程中可通过不同的校验规则给用户提供表单校验提示（上图所示），让他们及时的纠正错误。在表单中，对于比较复杂的字段，可以用气泡卡片的方式提供补充说明（下图所示）。
交互的操作过程中尽可能将状态反馈给用户，即时的响应会给用户增加信赖感。在操作需要较长时间才能完成时，显示该操作的当前进度和状态。若加载时间较长，应提供取消操作。
当目标元素的操作需要用户进一步的确认时，可以通过气泡确认框在目标元素附近弹出浮层提示，以此来询问用户，常见于数据列表操作一列中的按钮。
3）数据列表
数据列表在整个管理系统中占比非常重，其结构也比较固定，最上边是数据过滤（即查询条件），然后是数据统计（可选项），再有是数据列表（即表格区域），其中还包含列表工具栏（新建、刷新、排序等功能），后面是分页栏（图中没有画出），最后是批量操作。
在 Ant Design Pro 中有专门的组件实现查询条件，内置查询和重置两个按钮，当条件比较多时，还能自动隐藏。在下图中，就能看到列表工具栏（贴在表格上边），提供的是批量导入、导出数据、创建应用等，这些按钮都可自定义。由于列表的字段较多，还提供了左右滚动，并且第一列和最后一列固定。批量操作是固定在页面底部的，并且会显示选中的数量。
在列表的加载过程中，可以提供骨架屏过渡，加载完成后，显示数据。当没有数据时，要提供空状态占位，而不是空白一片。
数据加载完成后，在悬停时，可以为当前那一行增加底色辨识。
文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
分页器可以让用户清楚的知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。下图展示了分页器的各个部分，以及常用的功能。
上述是比较常见的数据列表，还有几类比较特殊的数据列表。第一种是行内可编辑的表格，点击操作列的编辑后，只读的列变为可操作的控件，比较快捷的编辑方式，适合字段较少的列表。图中最下面的添加一行数据，是一种的特殊的复制按钮。
