1. PmTemple首页
  2. 产品经理
  3. 产品设计

管理后台类产品在设计时注意事项(四)

前几篇我们主要是把管理后台设计时候的核心模块粗略的说了一下,这一篇我们重点聊一下关于功能设计排版样式上的注意事项

第一篇传送门:管理后台类产品在设计时注意事项(一)

第二篇传送门:管理后台类产品在设计时注意事项(二)

第三篇传送门:管理后台类产品在设计时注意事项(三)

管理后台类产品在设计时注意事项(四)
管理后台类产品在设计时注意事项(四)

导航设计

管理后台一般需要在短时间内完成大量的操作,除了在不同的业务切换之外,还需要确保操作的准确性。导航应该是需要精心设计的,目标是让操作更有条理,点击和跳转的路径尽量少。

导航的栏目的切分等同于业务的切分,一般最多到三级。

左导

  • 主流的设计思路,用户学习成本较低,用户在操作时主要集中在右侧区域。右侧的宽度和使用tab可保证用户不需要切换导航便可完成当前任务。
管理后台类产品在设计时注意事项(四)

顶导

  • 如果业务模块清晰,不需要很多二级入口时,可使用顶导。顶导可为下面的业务操作区域留出更多的空间,方便展示更多的字段和信息。
  • 若业务比较复杂,牵扯众多业务逻辑时,可使用顶导与左导联动。前提是一级业务分割清楚,无交叉。否则会给用户带来极大的困惑,提升操作难度。
管理后台类产品在设计时注意事项(四)

面包屑导航

  • 一般用于操作区域的引导性导航,尤其是存在三级导航时。保证用户不需要操作左导或顶导完成操作的切换。
  • 一般在右侧会有主要操作按钮入口,如”新增””发布”等等
管理后台类产品在设计时注意事项(四)

列表设计

查找区域

  1. 提供快速定位:通过可确定数据的唯一字段,提供搜索功能,如ID或手机号
  2. 尽量使用多个筛选项,可通过组合筛选找到数据。筛选项应与前台保持一致
  3. 提供默认选项:全部/不限,时间筛选一般有开始时间和结束时间
  4. 尽量不要提供模糊搜索:通过查询快速定位,开发成本较高
  5. 归纳列表数据的分类,作为筛选项
  6. 优先级取舍:用户关心、常用、重要的直接展示,其余的隐藏,如高级搜索
  7. 提供搜索条件清空操作,尤其是筛选项较多时
管理后台类产品在设计时注意事项(四)

列表展示区域

  1. 表头一般为编号、名称、属性、数量、操作选项
  2. 按照关注度优先级依次对其由左到右进行排列展示。即将关注度高的字段放到最前面。
  3. 编号/ID(编号一般自然数字排序,ID为数据库中唯一标示,如UID)
  4. 如果要显示的字段过多,可以冻结首列,提供滚动条通过鼠标操作查看
  5. 若单列内需要展示数据内容较多,可以通过折行、鼠标Hover、或缩小字号来处理
  6. 若过操作区域选项比较多,可以使用下拉或支持右键菜单
  7. 提供批量操作(全选、部分全选、反选等),可在列表的头尾同时提供,方便操作
  8. 提供多维度的排序组合:默认、正向、反向
  9. 提供分页功能,尽量在一页内展示所有数据,如20条。超出时提供分页。分页最好是支持快速定位和上下翻页。
管理后台类产品在设计时注意事项(四)

常规操作

  • 查看:展开更多详细信息,若信息较多时一般为新开页面
  • 增加:若字段内容较多时需要新开页面,到具体的表单操作页面。需要设定完成的路径,如保存、继续添加、返回。若返回列表一般要刷新页面才能看到具体的新数据。只是填补某条信息的某个字段时,当前页面使用弹窗即可,降低使用者的操作成本,提升效率。
  • 删除:删除操作时,需要二次确认或者进入回收站。同时要记录操作的日志。
  • 修改:同增加,数据要默认带入。新开页面时,完成的路径一般为返回。
管理后台类产品在设计时注意事项(四)
管理后台类产品在设计时注意事项(四)

首页

此处的首页为管理后台登录后的首页,一般会设计成Dashboard类。

管理后台类产品在设计时注意事项(四)

登录后首页主要包含的功能模块有:

  • 重要的系统通知或待办事项提醒:需要管理角色登录后立即处理的,如异常登录、待处理紧急任务
  • 核心业务的数据的汇总统计展示,可快速了解当前业务情况,如用户基数、新增用户数、当日成交额等
  • 业务快捷入口,可直接操作,如待审核内容列表、新增内容入口等
  • 其他系统类信息:登录时间、IP地址、日志、设备等等

大家可以多多参考一下“微信公共平台”的设计或者Ant Design的设计规范等,里面会有更多关于交互设计的说明。

管理后台类产品在设计时注意事项(四)
管理后台类产品在设计时注意事项(四)

其他再啰嗦两句

  • 管理后台的设计标准是管理效率的提升及成本的降低,最终目标都是为了业务流程更便捷,也就是前台用户提供更好的体验;
  • 后台尽量不要使用太过专业的术语,避免用户不清楚其含义而产生效率的降低和误操作,必要时提供操作手册和说明;
  • 管理后台对产品经理能力侧重点不同,但需求分析和产品的设计思路是一致的,只不过场景更集中于该公司内部的使用对象和需求;

关于管理后台类的“注意事项”主要就更新这么多,这几篇收到不少朋友和学员的建议,稍微说明一下:

1、内容定位主要是“PM的注意事项”:在原来线下课程中,后台的设计基本上要用一天才能讲完。如果是真的写下来,时间和精力上实在不允许,抱歉啦;

2、这里的管理后台还是通用概括,许多后台类产品是带有很强的业务属性的,比如电商订单系统、OA的审批流程、CMS的内容管理等,要说的内容就更多啦。

3、上课和分享的时候,我一直都在强调知识体系和结构化思维,好比一辆燃油车的发动机、地盘、变速箱三大件,管理后台你可以用下图的方法去拆解你的知识体系:

管理后台类产品在设计时注意事项(四)

总之,希望对你有帮助。

原创文章,作者:研究院精选,如若转载,请注明出处:https://www.pmtemple.com/academy/9800/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

185-1614-2515

在线咨询:点击这里给我发消息

邮件:admin@pmtemple.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code