管理后台设计总结

1.框架

为了节省时间，开发一般会选一个成熟的框架来进行设计。在这个框架下，很多导航、组件、控件都是现有的，你的设计越接近这个框架，研发成本越低。设计师一定要了解常用的框架：vue、react、angular。其中vue有element控件库，react有ant design控件库，这些都会节省你很多时间。

2.导航

后台类产品常用导航有：顶部导航、左侧导航和混合导航。如果导航数量较少且标题较短，适合使用顶部导航；如果标题较长，且导航数量较多，则使用左侧导航；导航复杂，层级较多的适合使用混合导航。

need-to-insert-img

3.组件库/设计规范

在做后台类产品的时候，设计规范真的很非常非常非常重要，为什么？因为后台产品基本都是增、删、改、查，都是围着着表单、表格来做设计，而且后台类产品页面很多，像我做的彩印中央平台就有100多页。为了保证操作的一致性，减少工作量，设计师需要提取相同的部分做统一的规范。与规范相伴的就是组件库，前面也提到了现在有一些成熟的组件库供大家使用，axure也自带一些常用的控件，但是因为你做的业务不同，总有一些组件需要自己设计，这些就需要设计师提炼出来形成规范。

4.如何创新

交互设计师在设计后台类产品的时候，经常觉得没有成就感，觉得都是那些组件、控件、表格、表单，可发挥的余地不大，产品经理也能胜任。我的观点是：在形式创新方面，后台类产品确实发挥的余地不大，交互设计师应该聚焦于以下几个方面来创新：

 1.让业务更容易理解

 2.复杂的问题简单化，用最简单的组件来解决问题

 3.提高操作效率，鼠标每减少一次点击，累积下来整个系统的操作效率就会很高。

下面我以例子来说明以上几点

（1）.让业务更容易理解

下图是产品经理画的，页面内有四个按钮“批量导入、批量导出、预览图片、上传图片”，第一眼觉得没问题，后听产品经理介绍这几功能的时候，才知道这几个按钮是有联系的。用户添加成员需要几步：批量导入名单>下载系统生成的名单图片>打印>盖公章>上传盖公章图片。但是这个界面根本没体现出来，谁都不知道他们之间的关系，所以这就是设计师需要设计的地方。

优化后的界面：1.修改按钮名称让它更能体现背后的功能  2.体现它们之间的关系  3.把不相关按钮隔开放到其他位置

 （2）.复杂的问题简单化，用最简单的组件来解决问题

下图是产品经理画的一个新增红名单的页面，旁边还特意写了备注，仔细一看，简直头疼，感觉好复杂，能不能简单些，这是设计师要做的工作。

转化思维，红名单其实就是对特定用户不推送某种彩印，把标签变为”不接收彩印类型“，控件也改为多选框。优化后的界面如下：

（3）.提高操作效率，鼠标每减少一次点击，累积下来整个系统的操作效率就会很高。

举一个百度统计的例子，一般情况下查询区都使用下拉菜单来筛选，百度统计对一些筛选条件少的选项使用了tab，这样用户在操作时每个选项就少点击一次，累积起来一个页面就少点击4次

5.总结

设计师做一些后台类的产品还是很有益处的，因为后台一般都是对用户端的配置，这样你就更能了解整个系统的运作，明白前后端如何进行数据交互的。  

后台类的设计虽然在形式上有些固化，但是设计师却更应该在理解业务的基础上，使用这些常用组件搭建出用户更易理解，更高效的界面。