美文网首页产品 运营 设计@产品
设计小结系列:后台系统该如何优化改版

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

作者: be250bfd7ae7 | 来源:发表于2018-02-18 09:47 被阅读44次

    背景:

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

    登陆页

    为什么改版?

    样式老旧:

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

    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标签一目了然,每个角色下面可新建员工,编辑资料及删除。对比原页面用户操作流程,极大的精简了页面复杂程度,突出当前场景的操作,对不必要对干扰信息进行了隐藏和转移。统一了角色管理各流程体验。

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

    相关文章

      网友评论

        本文标题:设计小结系列:后台系统该如何优化改版

        本文链接:https://www.haomeiwen.com/subject/jkavtftx.html