管理系统后台设计
Contact me
或者用邮件交流 jacky.wucheng@foxmail.com
1. 设计原则
操作人员每天都要花大量的时间在管理后台上, 管理后台需要尽可能地简洁, 高效, 帮助操作人员快速完成任务.
根据”web交互设计-页面交互细节设计-页面表达原则”中的12条原则, 个人认为对于后台管理系统来说, 最重要的有这么几条原则:
- 信息量精简, 需要什么有什么, 不冗余.
- 信息表达明确直接, 注意措辞. 措辞不当很容易让管理操作变的更加混乱和复杂.
- 操作前, 结果可预知. 链接和按钮表意明确, 让用户预知点击后会发生什么后台操作.
- 操作时有反馈. 跳转页面, 或者在当前页面Ajax刷新时显示页面效果, 避免用户无感知而重复点击, 依然无果.
- 操作后可撤销. 也就是在异步操作过程中, 允许终止操作, 同时需要详细记录每一步操作历史, 允许回滚操作.
- 导航要明确, 让操作人知道自己在什么流程的什么环节. 在管理后台功能复杂强大的时候, 越是该如此.
2. 设计方法
- 理清功能模块.
- 规划好操作流程.
- 使用原型工具绘制原型.
- 根据设计原则, 使用恰当的风格.
- 优化使用体验.
2.1 理清功能模块
管理后台的模块层次结构要求很高, 管理后台的注重点在功能性, 易用性和流程化, 在UI上可以稍逊色, 但是前面的功能不可怠慢, 否则这将成为一个功能混乱和复杂的系统.
深刻理解业务, 对功能进行抽象, 划分模块层次.
模块的层次结构划分为:
- 主模块
- 二级模块
- 三级
- …(层次不可太多, 最好保持在3个以内)
- 功能操作
PS
思维导图是一个很好理清思路, 划分模块层次的工具
2.2 规划好操作流程
每个功能模块中, 良好的操作流程的引导, 比培训和手册更加有效. 做到让用户跟着你的流程走, 就能够完成一项任务.
2.3 用原型工具绘制原型
用原型工具对每个页面绘制原型图.
工具的选择有:
- Axure RP
- PhotoShop
- Google Doc - PPT
2.4 选择恰当的设计风格
不错的模板分享网站可以参考
2.5 优化使用体验
有两种说法:
- 快速出原型, 先完成主要功能, 然后再慢慢优化. 但是往往就没有后续的优化.
- 边开发边优化, 相对快速原型开发来说, 会比较耗时. 在需求不明快速试错, 或者 快速迭代开发时, 该方法不太适用. 要做到既快速迭代, 又能开发到哪儿优化到哪儿, 还是需要比较厚的技术积累的.
所以还需要看实际场景来决定采用哪种方法.
3. 优秀的产品参考
优秀的后台产品参考：
- 淘宝的商家后台
- 有赞微商城的后台
- 微信公众平台后台
- 聚合分析的后台聚合数据平台
4. 优秀的工具
5. 优秀的模板
不错的模板分享网站
免费的管理后台模板 其中 基于Bootstrap 3, 各设备屏幕自适应的模板有