设计小结系列：后台系统该如何优化改版

背景：

这是我们金服研发的一款产品，提供自动对账功能，支撑多个资金通道，减轻财务对账压力。提供医院对账单电子化，对账监管实时化，数据管理集中化。同时按照管理需要可灵活的对账务数据进行处理，按模板形成各种统计报表输出，并自助分析给出业务和决策支撑建议。

登陆页

为什么改版？

样式老旧:

• 页面视觉设计太过老套，严重脱离目前主流软件的设计风格和趋势，功能模块的信息展示不够直接快速，间距字体颜色等不合理，增加认知负担。

首页

1.日收支，月收支 文字大小，颜色，距离 都太随意。影响信息阅读和获取。

2.数据图应该有XY轴精确数据点，可点击交互

查询结果

3.收入和笔数，支出和笔数，距离不合理，容易误导用户。

4.表格内容太过密集，信息获取困难。

---

信息框架混乱：

• 功能业务区和帮助文档及用户登录信息及平台信息全都混在一起，没有分类分区，严重影响产品的使用体验。

• 页面层级混乱，弹窗带弹窗又带弹窗，页面展示过于厚重，路径过深，记忆负担重。同时没有面包屑不利于用户感知当前路径及任务操作。

  
  查询结果

1.商户信息，交易管理，密码修改，帮助文档，联系我们，全都并列在一起。真正业务功能类菜单又在折叠菜单里，每次切换查询都要反复寻找和多次点击。

2.查询结果列表内容众多，点击详情按钮后弹出详情页，详情页又带有日期和条件查询，又带明细按钮，明细按钮点击又弹出详情页和查询条件。已经大大超出了弹窗所能赋予的简单体验。

---

步骤繁琐：

• 整个产品围绕账单进行查询，对账，上传，下载操作，但目前的层级结构及交互方式过于笨重原始。

  
  查询结果

1.时间查询和其他条件查询无序的混在一起，没有正确的引导用户正确操作，时间选择控件也不好用。

2.重置按钮多余而且让小白用户难以理解。

3.查询结果只要离开本页面再回来就会消失，不利于后台用户多次查看数据对比的习惯，又要重新操作一遍。

---

体验不统一：

• 随着产品的发展和不同需求功能的添加，页面的信息框架不能统一，而且维护成本高，同时影响产品本身的专业性和信任感。

  
  角色管理
  角色管理

1.新增业务功能页面基本属于开发人员想象产物，整个产品的页面结构及交互逻辑都是杂乱不统一，直接影响产品本身的严谨和专业形象，甚至影响到公司对外的品牌形象。

2.多选控件体检不佳，和其他页面多选控件又不统一。

---

设计目标

简洁-快速：

• 删除一些无用的信息和功能，减少用户使用及认知负担。
• 零散信息重新整合归类，符合主流用户的操作框架和认知模式。
• 重新设计信息框架，减少不必要的层级跳转，给信息结构减肥。

• 增加核心及常用 的查询条件和操作，隐藏不常用的信息设置及查询条件，减少干扰和分心。

  
  首页
  image.png

查询结果

1.和用户信息有关的都放到右上角区域，包括帮助。符合绝大部分网站的使用习惯，虽然后台有他后台自己的特殊性，但尽量还是要贴合日常已经养成的使用习惯。

2.这套后台系统其实已经上线快两年了，后台产品不像前端产品那样的频繁迭代，当把无关业务功能操作的东西删除和移走后，发现实际就剩6个菜单。因此我建议把6个功能菜单直接拿到一级显示，这是基于我们产品功能并不多，而且比较稳定。之前的两级菜单，用户切换功能菜单时频繁折叠打开折叠打开，降低效率也影响愉快的心情。

但是，为了避免以后功能菜单增加时一级显示太多而不好分类情况，和开发人员讨论后由开发人员后台代码写成2级结构，但前端展示1级。这样就友好的解决了目前的用户体验及后期的功能扩展版本迭代。

3.主体页面都统一划分成上下两个区域，上面是查询条件和输入，下面是结果展示及再操作，这样从视觉焦点上引导用户正确操作，减少思考和犯错。经过和产品及项目经理讨论，展示其中三种最常用也是能覆盖绝大多数使用场景的查询条件，把非主流的专家查询隐藏在更多条件里。

4.查询结果详情页依据信息分类重新排列组合，参照格式塔理论，一目了然的呈现结果。同时控制每列的最小显示空间，保证在1366分辨率笔记本上能一屏显示不用滑动。避免老页面里出现的左右滑动查看表格内容，造成记忆负担和频繁操作。

---

简洁-快速：

• 把重点的突出，弱化次要的，人眼对信息是扫描的浏览。
• 增加面包屑导航，减少记忆负担，同时便于长线程操作和页面展示。

• 重新设计了权限管理页面，根据角色的使用场景及目标，让管理者更加直观的管理其他角色。

  
  查询结果

1.原来这个表是镶嵌在上个弹窗里的，复杂庞大的数据显示显然不适合多层弹窗结构，用户也容易迷失路径。所以采用面包屑二级显示，这样既方便了页面展示又减少了用户操作负担。

员工管理
角色管理
角色管理 角色管理

1.员工管理页面的整个交互流程重新设计。根据登陆进来的员工展示其权限可操作的内容。角色tab标签一目了然，每个角色下面可新建员工，编辑资料及删除。对比原页面用户操作流程，极大的精简了页面复杂程度，突出当前场景的操作，对不必要对干扰信息进行了隐藏和转移。统一了角色管理各流程体验。

这版本的优化设计上线后，从交互到视觉都全面优化，得到了用户的良好反馈，也让自己对后台设计有了新感悟。