前几篇我们主要是把管理后台设计时候的核心模块粗略的说了一下，这一篇我们重点聊一下关于功能设计排版样式上的注意事项。
第一篇传送门：管理后台类产品在设计时注意事项（一）
第二篇传送门：管理后台类产品在设计时注意事项（二）
第三篇传送门：管理后台类产品在设计时注意事项（三）
导航设计
管理后台一般需要在短时间内完成大量的操作，除了在不同的业务切换之外，还需要确保操作的准确性。导航应该是需要精心设计的，目标是让操作更有条理，点击和跳转的路径尽量少。
导航的栏目的切分等同于业务的切分，一般最多到三级。
左导
- 主流的设计思路，用户学习成本较低，用户在操作时主要集中在右侧区域。右侧的宽度和使用tab可保证用户不需要切换导航便可完成当前任务。
顶导
- 如果业务模块清晰，不需要很多二级入口时，可使用顶导。顶导可为下面的业务操作区域留出更多的空间，方便展示更多的字段和信息。
- 若业务比较复杂，牵扯众多业务逻辑时，可使用顶导与左导联动。前提是一级业务分割清楚，无交叉。否则会给用户带来极大的困惑，提升操作难度。
面包屑导航
- 一般用于操作区域的引导性导航，尤其是存在三级导航时。保证用户不需要操作左导或顶导完成操作的切换。
- 一般在右侧会有主要操作按钮入口，如”新增””发布”等等
列表设计
查找区域
- 提供快速定位：通过可确定数据的唯一字段，提供搜索功能，如ID或手机号
- 尽量使用多个筛选项，可通过组合筛选找到数据。筛选项应与前台保持一致
- 提供默认选项：全部/不限，时间筛选一般有开始时间和结束时间
- 尽量不要提供模糊搜索：通过查询快速定位，开发成本较高
- 归纳列表数据的分类，作为筛选项
- 优先级取舍：用户关心、常用、重要的直接展示，其余的隐藏，如高级搜索
- 提供搜索条件清空操作，尤其是筛选项较多时
列表展示区域
- 表头一般为编号、名称、属性、数量、操作选项
- 按照关注度优先级依次对其由左到右进行排列展示。即将关注度高的字段放到最前面。
- 编号/ID（编号一般自然数字排序，ID为数据库中唯一标示，如UID）
- 如果要显示的字段过多，可以冻结首列，提供滚动条通过鼠标操作查看
- 若单列内需要展示数据内容较多，可以通过折行、鼠标Hover、或缩小字号来处理
- 若过操作区域选项比较多，可以使用下拉或支持右键菜单
- 提供批量操作（全选、部分全选、反选等），可在列表的头尾同时提供，方便操作
- 提供多维度的排序组合：默认、正向、反向
- 提供分页功能，尽量在一页内展示所有数据，如20条。超出时提供分页。分页最好是支持快速定位和上下翻页。
常规操作
- 查看：展开更多详细信息，若信息较多时一般为新开页面
- 增加：若字段内容较多时需要新开页面，到具体的表单操作页面。需要设定完成的路径，如保存、继续添加、返回。若返回列表一般要刷新页面才能看到具体的新数据。只是填补某条信息的某个字段时，当前页面使用弹窗即可，降低使用者的操作成本，提升效率。
- 删除：删除操作时，需要二次确认或者进入回收站。同时要记录操作的日志。
- 修改：同增加，数据要默认带入。新开页面时，完成的路径一般为返回。
首页
此处的首页为管理后台登录后的首页，一般会设计成Dashboard类。
登录后首页主要包含的功能模块有：
- 重要的系统通知或待办事项提醒：需要管理角色登录后立即处理的，如异常登录、待处理紧急任务
- 核心业务的数据的汇总统计展示，可快速了解当前业务情况，如用户基数、新增用户数、当日成交额等
- 业务快捷入口，可直接操作，如待审核内容列表、新增内容入口等
- 其他系统类信息：登录时间、IP地址、日志、设备等等
大家可以多多参考一下“微信公共平台”的设计或者Ant Design的设计规范等，里面会有更多关于交互设计的说明。
其他再啰嗦两句
- 管理后台的设计标准是管理效率的提升及成本的降低，最终目标都是为了业务流程更便捷，也就是前台用户提供更好的体验；
- 后台尽量不要使用太过专业的术语，避免用户不清楚其含义而产生效率的降低和误操作，必要时提供操作手册和说明；
- 管理后台对产品经理能力侧重点不同，但需求分析和产品的设计思路是一致的，只不过场景更集中于该公司内部的使用对象和需求；
关于管理后台类的“注意事项”主要就更新这么多，这几篇收到不少朋友和学员的建议，稍微说明一下：
1、内容定位主要是“PM的注意事项”：在原来线下课程中，后台的设计基本上要用一天才能讲完。如果是真的写下来，时间和精力上实在不允许，抱歉啦；
2、这里的管理后台还是通用概括，许多后台类产品是带有很强的业务属性的，比如电商订单系统、OA的审批流程、CMS的内容管理等，要说的内容就更多啦。
3、上课和分享的时候，我一直都在强调知识体系和结构化思维，好比一辆燃油车的发动机、地盘、变速箱三大件，管理后台你可以用下图的方法去拆解你的知识体系：
总之，希望对你有帮助。
原创文章，作者：研究院精选，如若转载，请注明出处：https://www.pmtemple.com/academy/9800/
微信扫一扫 
支付宝扫一扫 
