为金融安全防线的构建、金融秩序的稳定,贡献力量

图标设计 | 交互设计 | 界面设计 | html开发

“银行统一监管报送系统”是银丰新融第二次和蓝蓝设计合作,这次合作更加特殊,在疫情期间大家远程办公。该项目主要是全面满足各类监管报送要求,各类监管报表的灵活定制,满足最新监管规则要求,自动灵活的数据采集加工等等。蓝蓝设计与银丰新融合作,负责交互设计,界面设计及开发。

这个项目的时间要求特别紧迫, 工作量非常大,特别是开发工作比较艰巨。对接负责人非常敬业,每次反馈的文档都特别的详细,并且每天都会开会讨论当天工作进度及成果,及时沟通解决项目中遇到的各种问题和困难。尽管项目进行的EXT开发过程中遇到一些困难,但经过大家一起努力最终克服困难。

银丰新融银行统一监管报送系统 产品定位

银行业面临人民银行、银监会及外管局三大监管当局,其建设的监管报送平台应充分满足各报送模块的报送

业务流程与监管要求,主要包括:人行大集中统计报表、人行标准化、人行利率报备统计报表、人行支付指标统计报表、人行理财产品报表、银监会EAST系统、1104报表等等二十余种监管类报表。

财政银行界面设计 目标用户

银丰新融业务范围覆盖了银行、保险、第三方支付、信托、证券、担保公司等金融企业,客户总数将近200家。其中,银行业客户占绝大部分比重,银行客户遍布国有银行、政策性银行、股份制商业银行、城市商业银行、农村商业银行、农村合作银行、农村信用社以及村镇银行等各类银行机构。

财政银行界面设计 设计风格

第一版设计采用商务风的蓝色,整体采用比较流行的扁平风,简洁大方,布局方面,以大间距和卡片式布局等主流布局为主,主要突出信息本身。由于整个系统比较庞大,首页是重新画的原型然后设计,其他页在原有的原形基础上进行美化,设计整体完成后,还适配了红色、橘黄色和绿色几个版本。

首页原型

银行统一监管报送系统软件界面设计

首页风格采用深蓝色和白色为主,浅蓝为辅,整体较为稳重且简洁大方。

整体布局采用左侧为统计图、代办统计、常用菜单和公告。右侧为用户的登录信息,以及用户相关办理数据和消息。

统计图可根据后期需求进行左右切换;代办事项统计分成两排罗列,后续可根据用户的不同角色来定制最关心的前八个数据;常用菜单可自定义;公告以时间时间轴的方式展示,左右切换显示更多,点击某条可查看详情。

左侧点击全部、已审批、待办事项或消息时下面内容会随之切换成相对应的数据。

首页定稿设计图

财政银行界面设计
银丰新融银行统一监管报送系统软件界面设计
银丰新融银行统一监管报送系统软件界面设计
财政银行界面设计

EXT开发说明

项目属于后台管理系统,框架采用的是ext4.5版本,是在原系统的上进行二次开发升级,保留原先接口大大缩减了客户的开发时间,整体共有二十多页,其中还有四套不同主题的换肤功能。整个系统兼容的主流浏览器为ie、火狐、google和safari。页面适配于1920~1366。

开发过程中为了兼顾原有系统和设计图遇到很多困难,ext原有控件比较单一很难达到设计图上的样式,比如首页的一些快捷入口每个模块要随着内容的多少进行自适应并且需要左右切换,还有聊天窗口的样式等等。尽管困难重重蓝蓝设计在整体项目进行中并没有顾此失彼,而是把需要克服的问题都一一罗列出来,每天会进行会议讨论总结把困难逐个克服。最后通过大家的共同努力给整个想项目画上了完美的句号。更多的细节展示请看视频。

财政银行界面设计
银丰新融银行统一监管报送系统软件界面设计

数据明细页原型

财政银行界面设计

数据明细页是在原有原型基础上进行优化设计,所以布局上没有太大的改变。设计的时候在信息组织上做了小的调整,比如单选框换了一种表现方式,更加直观减少用户的视觉思考。下面“数据源物理表字段”中下面的按钮调到了和标题一行的右侧,这样既节省了一行位置,又和上面模块的按钮相对应。再列表的设计上,也不同于传统表格,进行了创新使视觉效果更加清新。

数据明细页设计图

监管报送软件UI设计及EXT开发

数据报错页原型

监管报送软件UI设计及EXT开发

数据报错页是在原有原型基础上进行优化设计,所以布局上没有太大的改变。在风格上进行调整按钮中的图标蓝蓝设计进行了统一的改版设计,由于后续该系统会有换肤功能,所以在按钮这块为了使按钮在其他色调的界面上也较为和谐,蓝蓝设计根据每个图标的含义进行了双色设计。该页面的每个模块都有展开收起的功能,下面是每个模块收起时的效果。

数据报错页设计图

监管报送软件UI设计及EXT开发
监管报送软件UI设计及EXT开发

银丰新融银行统一监管报送系统软件界面设计
监管报送软件UI设计及EXT开发

监管报送软件UI设计及EXT开发

  返回