管理系统后台设计

少于 1 分钟阅读

Contact me

或者用邮件交流 jacky.wucheng@foxmail.com

1. 设计原则

操作人员每天都要花大量的时间在管理后台上, 管理后台需要尽可能地简洁, 高效, 帮助操作人员快速完成任务.

根据”web交互设计-页面交互细节设计-页面表达原则”中的12条原则, 个人认为对于后台管理系统来说, 最重要的有这么几条原则:

  1. 信息量精简, 需要什么有什么, 不冗余.
  2. 信息表达明确直接, 注意措辞. 措辞不当很容易让管理操作变的更加混乱和复杂.
  3. 操作前, 结果可预知. 链接和按钮表意明确, 让用户预知点击后会发生什么后台操作.
  4. 操作时有反馈. 跳转页面, 或者在当前页面Ajax刷新时显示页面效果, 避免用户无感知而重复点击, 依然无果.
  5. 操作后可撤销. 也就是在异步操作过程中, 允许终止操作, 同时需要详细记录每一步操作历史, 允许回滚操作.
  6. 导航要明确, 让操作人知道自己在什么流程的什么环节. 在管理后台功能复杂强大的时候, 越是该如此.

2. 设计方法

  1. 理清功能模块.
  2. 规划好操作流程.
  3. 使用原型工具绘制原型.
  4. 根据设计原则, 使用恰当的风格.
  5. 优化使用体验.

2.1 理清功能模块

管理后台的模块层次结构要求很高, 管理后台的注重点在功能性, 易用性和流程化, 在UI上可以稍逊色, 但是前面的功能不可怠慢, 否则这将成为一个功能混乱和复杂的系统.

深刻理解业务, 对功能进行抽象, 划分模块层次.

模块的层次结构划分为:

  1. 主模块
  2. 二级模块
  3. 三级
  4. …(层次不可太多, 最好保持在3个以内)
  5. 功能操作

PS

思维导图是一个很好理清思路, 划分模块层次的工具

2.2 规划好操作流程

每个功能模块中, 良好的操作流程的引导, 比培训和手册更加有效. 做到让用户跟着你的流程走, 就能够完成一项任务.

2.3 用原型工具绘制原型

用原型工具对每个页面绘制原型图.

工具的选择有:

  • Axure RP
  • PhotoShop
  • Google Doc - PPT

2.4 选择恰当的设计风格

不错的模板分享网站可以参考

2.5 优化使用体验

有两种说法:

  1. 快速出原型, 先完成主要功能, 然后再慢慢优化. 但是往往就没有后续的优化.
  2. 边开发边优化, 相对快速原型开发来说, 会比较耗时. 在需求不明快速试错, 或者 快速迭代开发时, 该方法不太适用. 要做到既快速迭代, 又能开发到哪儿优化到哪儿, 还是需要比较厚的技术积累的.

所以还需要看实际场景来决定采用哪种方法.

3. 优秀的产品参考

优秀的后台产品参考:

  • 淘宝的商家后台
  • 有赞微商城的后台
  • 微信公众平台后台
  • 聚合分析的后台聚合数据平台

4. 优秀的工具

5. 优秀的模板

不错的模板分享网站

免费的管理后台模板 其中 基于Bootstrap 3, 各设备屏幕自适应的模板有

  1. AdminLTE, github
  2. Bcore Bootstrap
  3. django-xadmin, github
  4. DevOOPS

6. 参考