东华软件-征信系统后台管理界面设计

图标设计 | 交互设计 | 界面设计 | Lay ui框架及组件开发

东华软件股份公司成立于2001年1月,是深圳证券交易所的上市公司。公司以应用软件开发、计算机信息系统集成及信息技术服务为主要业务,具有信息产业部计算机信息系统集成一级资质,是国家规划布局内的重点软件企业,是国内最早通过软件能力成熟度集成(CMMI)5级认证的软件企业之一。

本次征信系统后台管理界面设计是与东华软件众多合作项目中的一个,也是”征信系统“系列设计中的一环。后台管理系统设计过程聚焦多任务并行,多角色操作,着重解决征信工作人员多任务切换,多场景使用过程中遇到的问题,优化操作流程,合理布局界面,创新色彩搭配;最终输出满足操作要求,符合征信系统行业特色的设计视觉稿。

产品定位

为征信工作人员定制专属后台管理系统,根据不同业务种类不同,制定相应的业务办理流程及方式,对业务实行分类管理,提高业务办理效率;
根据服务人员角色权限定制不同功能及页面,减少系统复杂程度,实现“专业人员办理专业业务”的功能。

目标用户

金融机构决策者

金融机构决策者

商业银行业务员

商业银行业务员

征信系统管理人员

征信系统管理人员

反洗钱监测人员

反洗钱监测人员

税务系统管理人员

税务系统管理人员

设计风格

金融
专业
舒适
沉稳
大气

内容布局模块化,灵活适应多种场景

模块化设计是B端产品的主流设计模式,尤其是针对多种管理权限的产品,模块化设计能够根据页面需求灵活地编排内容。我们在构筑视觉体验过程中,运用”情感化设计“理念,融入了产品品牌文化,品牌特征等元素,深入考察行业特性,将行业的金融风格,产品的品牌特质完美地提炼出来并体现在页面中,使页面呈现出丰富的层次变化和灵活地排版布局。

注重效率与人机交互体验的平衡

根据用户的使用场景及客户提供的原型图,我们对系统架构及交互逻辑进行改造,我们力求在首页中展现80%以上的入口按钮,同时展现任意角色关心的全部关键信息,让用户无需页面跳转即可完成关键工作任务。针对用户最常用的操作区域,我们进行信息整合归类,并进行图形化提炼,定制相应的内容看板及快捷菜单,简化列表信息,在完整展现用户关心内容的同时有效地规避了信息过多、过于冗长而给用户造成的心理负担。

首页界面设计-原型

原型

首页界面设计

分步式导航,操作信息可视化管理

征信系统内有大量数据需要录入系统内,而这些数据的录入很多需要在同一个页面操作,面对如此需要录入多的信息,我们提出了”操作分步骤,步骤可管理“的交互原则,进而演化出分布式导航的步骤管理机制,最终确定左侧为分布式导航,右侧为数据录入表单的页面布局形式。在分布式导航下,用户可以点击任意步骤导航直接跳转到该步骤表单页进行信息录入。分布式导航可以承载最多2级的步骤导航,极大地增强了信息录入阶段分步录入的可视化管理空间,将数据录入效率提升到了新的高度。

清晰的页面层级,全面提升操作体验

成功的网页设计界面要美观是一方面,内在页面层级的规划,逻辑跳转则是网站设计的另一个核心点。蓝蓝设计在网站过程中不断深挖用户使用习惯,调整优化页面逻辑和页面层级,强调”好用、易用“操作原则,新增页面顶部tab页签栏,优化下拉选择菜单的操作方式,让用户操作顺手,步骤可掌控,结果可预知。

分步式导航,操作信息可视化管理

主要页面说明-个人用户属性管理

1全局导航栏:导航栏采用简化的图标设计形式设计,鼠标点击一级菜单伸出二级,三级菜单;这样可以节省空间,提高页面空间利用率。

2下拉列表框:下拉列表根据本系统作出相应的优化,下拉列表内采用二级确认形式,即下拉多选后需要再次点击确认按钮,这样可以防止误操作,且支持多选操作,减少选择点击次数,提高选择效率。

主要页面说明-个人用户属性管理
主要页面说明-流程查询

主要页面说明-流程查询

3流程步骤:流程查询界面步骤较多,采用流程导航方式能够快速定位到相应的条目区域,方便用户查询及操作。页面向下滚动时,流程导航会固定在界面顶端,方便用户点击跳转。

4授权档案列表:授权档案采用列表样式展现,列表的优势是直观,整齐,能够在有限的区域内展示尽可能多的内容。对于页面内容极多的流程查询页面来说,这种布局方式是最有效,最节省空间的。

5授权档案列表:分页器在列表中是很常见的,在本项目中,我们分页器统一为复合式分页器,即用户既可以点击”下一页“跳转,还可以直接选择页数跳转,如果页面较多,也可自定义输入页数跳转,这样的分页跳转方式能够很好地兼顾单页跳转和大幅度的隔页跳转,方便用户查询数据。
由于业务需要,表单中保留批量操作按钮,我们在每条信息最左侧添加复选框,同时增加”全选“复选框,用户在使用过程中可以直接勾选条目,进行批量操作。

主要页面说明-反洗钱系统帮助中心

6全局搜索框:反洗钱帮助中心主要是为用户提供国家 新法规、命令,反洗钱知识等文件的查阅及普及,考虑到文件数量较多,我们增加了全局搜索功能,搜索结果直接以模拟文件的形式呈现在当前页面,方便用户检索及查阅。

7别样的卡片展示方式:根据公文形式的不同,反洗钱帮助中心的文件大致分为国家规定,行业规定,管理办法,命令等不同公文类型,为了区分不同类型的文件,我们用模拟政府文件的形式展示不同类型的公文,模拟政府公文形式展示,可以体现出平台的专业性,严谨性,突出平台的特色。

主要页面说明-反洗钱系统帮助中心
文件详情

8文件详情:和文件目录保持一致,文件详情页面也采用了模拟真实文稿的方式来展现正文,同时还采用了模拟便签的形式,将”下载“和”返回“按钮置于正文页面左侧,模拟真实场景的设计既保持了页面风格的统一,也为客户带来真实,沉浸的视觉体验。

主要页面说明-个人信用等级

9客户信息展示:本区域为客户信息展示,包括客户个人信息,评级总结,评级记录,客户信息雷达图示意等信息。客户信息雷达图是本次设计的亮点所在,雷达示意图能够同时展现不同维度的数据,也能够直观地展现出不同维度之间数据的对比结果。当用户鼠标移至某一维度时,会弹出相应的悬浮框来展示当前维度下具体信息。

10散点分布图:散点分布图是展示用户信用等级分布的主要表现形式,散点图可以从两个维度展现用户信用状态,用户可直观地看到自己当前信用评级的排名情况。

11评级详情:评级详情是对客户信用得分来源的系统性说明,信用评级分为多个项目,每个项目有固定的权重和本人相应的得分,将这些项目权重和分数通过内部相应的算法即可得出个人信用综合评分。由于项目内容较多,算法较复杂,列表以其信息承载量大,信息展示工整的优点,成为展示信息评级内容的最佳展示方式。

主要页面说明-个人信用等级

控件展示

控件展示
控件展示

  返回