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