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.总结
设计师做一些后台类的产品还是很有益处的,因为后台一般都是对用户端的配置,这样你就更能了解整个系统的运作,明白前后端如何进行数据交互的。
后台类的设计虽然在形式上有些固化,但是设计师却更应该在理解业务的基础上,使用这些常用组件搭建出用户更易理解,更高效的界面。