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

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

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

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

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

管理后台知识体系思维导图请在文末领取。

image
image

导航设计

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

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

左导

  • 主流的设计思路,用户学习成本较低,用户在操作时主要集中在右侧区域。右侧的宽度和使用tab可保证用户不需要切换导航便可完成当前任务。
image

顶导

  • 如果业务模块清晰,不需要很多二级入口时,可使用顶导。顶导可为下面的业务操作区域留出更多的空间,方便展示更多的字段和信息。

  • 若业务比较复杂,牵扯众多业务逻辑时,可使用顶导与左导联动。前提是一级业务分割清楚,无交叉。否则会给用户带来极大的困惑,提升操作难度。

image

面包屑导航

  • 一般用于操作区域的引导性导航,尤其是存在三级导航时。保证用户不需要操作左导或顶导完成操作的切换。

  • 一般在右侧会有主要操作按钮入口,如”新增””发布”等等

image

列表设计

查找区域

  1. 提供快速定位:通过可确定数据的唯一字段,提供搜索功能,如ID或手机号

  2. 尽量使用多个筛选项,可通过组合筛选找到数据。筛选项应与前台保持一致

  3. 提供默认选项:全部/不限,时间筛选一般有开始时间和结束时间

  4. 尽量不要提供模糊搜索:通过查询快速定位,开发成本较高

  5. 归纳列表数据的分类,作为筛选项

  6. 优先级取舍:用户关心、常用、重要的直接展示,其余的隐藏,如高级搜索

  7. 提供搜索条件清空操作,尤其是筛选项较多时

image

列表展示区域

  1. 表头一般为编号、名称、属性、数量、操作选项

  2. 按照关注度优先级依次对其由左到右进行排列展示。即将关注度高的字段放到最前面。

  3. 编号/ID(编号一般自然数字排序,ID为数据库中唯一标示,如UID)

  4. 如果要显示的字段过多,可以冻结首列,提供滚动条通过鼠标操作查看

  5. 若单列内需要展示数据内容较多,可以通过折行、鼠标Hover、或缩小字号来处理

  6. 若过操作区域选项比较多,可以使用下拉或支持右键菜单

  7. 提供批量操作(全选、部分全选、反选等),可在列表的头尾同时提供,方便操作

  8. 提供多维度的排序组合:默认、正向、反向

  9. 提供分页功能,尽量在一页内展示所有数据,如20条。超出时提供分页。分页最好是支持快速定位和上下翻页。

image

常规操作

  • 查看:展开更多详细信息,若信息较多时一般为新开页面

  • 增加:若字段内容较多时需要新开页面,到具体的表单操作页面。需要设定完成的路径,如保存、继续添加、返回。若返回列表一般要刷新页面才能看到具体的新数据。只是填补某条信息的某个字段时,当前页面使用弹窗即可,降低使用者的操作成本,提升效率。

  • 删除:删除操作时,需要二次确认或者进入回收站。同时要记录操作的日志。

  • 修改:同增加,数据要默认带入。新开页面时,完成的路径一般为返回。

image
image

首页

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

image

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

  • 重要的系统通知或待办事项提醒:需要管理角色登录后立即处理的,如异常登录、待处理紧急任务

  • 核心业务的数据的汇总统计展示,可快速了解当前业务情况,如用户基数、新增用户数、当日成交额等

  • 业务快捷入口,可直接操作,如待审核内容列表、新增内容入口等

  • 其他系统类信息:登录时间、IP地址、日志、设备等等

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

image
image

其他再啰嗦两句

  • 管理后台的设计标准是管理效率的提升及成本的降低,最终目标都是为了业务流程更便捷,也就是前台用户提供更好的体验;

  • 后台尽量不要使用太过专业的术语,避免用户不清楚其含义而产生效率的降低和误操作,必要时提供操作手册和说明;

  • 管理后台对产品经理能力侧重点不同,但需求分析和产品的设计思路是一致的,只不过场景更集中于该公司内部的使用对象和需求;


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

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

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

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

image

总之,希望对你有帮助。

image

福利及广告时间

上期学员中共有4位360+1位美团+1位58到家+1位讯飞和2位非互联网行业的同学上课。最为惊喜的是其中的一位无任何经验的小朋友以10K拿到了自己心仪公司的offer。

5月18号还有几个名额,咨询课程或加入PM资源分享群(主要分享干货文章、课件视频、职位人脉和恋爱机会😘等等)

更多干货请关注公共号【产品经理实战派】:通过实际案例讲解系统输出PM必备的实战技能,包括但不限于核心能力、思维方法、产品方法论、管理技巧、求职面试等。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容