九恒星-资金运营管理监控系统交互及界面设计及VUE开发 发表于:2024-04-27

PC端界面设计 | 大屏设计 | VUE 开发

01 项目背景

北京九恒星科技股份有限公司是一家企业资金管理软件产品及企业金融信息增值服务的提供商,致力于通过信息技术的应用,帮助企业改善现金流;在金融机构与企业之间架起桥梁,让企业的资金流更加顺畅。大屏主要应用场景,公司会议,集团视察,行业参观等。领导驾驶舱主要应用场景:财务公司各级领导日常运营决策查询,公司会议等,是系统重要的展示功能,可作为系统特色功能或是门面,使用较为频繁。

本次合作九恒星委托蓝蓝设计负责PC端界面视觉设计、大屏界面设计以及VUE开发。在交互设计中重点展示领导关注内容,定制化程度高,重点在于母版布局的扩展性和组件的通用性,能够根据主体快速定位到分析内容。在工作过程中双方及时沟通,达到了效率高、品质好成果。

02 项目概述

产品定位

为企业和组织提供全面的资金管理解决方案。通过数据分析和报告生成,帮助用户深入了解资金运营状况,识别潜在风险,并优化资金配置和投资决策。系统还注重安全性和数据保护,确保用户的财务信息得到保密和可靠的处理。通过定制化服务和用户界面设计,资金运营管理监控系统旨在成为企业财务团队和高管层的得力助手,促进资金管理的效率和透明度。

目标用户

系统主要的目标用户是财务部门人员、高管层、投资者以及审计与监管机构等。负责企业或组织财务管理的专业人士,需要监控系统提供的数据支持决策,投资和风险管理等方面的工作。负责对企业财务运营情况进行审计和监管的相关机构,可以通过监控系统获得必要的数据和信息用于审核和监管。

设计风格

本次蓝蓝设计负责两个系统的设计,大屏设计风格是科技感并且界面中能体现出金融的元素,主色调采用蓝色和黄色相结合。蓝色主要突出科技感,黄色体现金融。PC 端的设采用简洁扁平化的卡片式设计,在数据本身做设计,突出主要数据,减少用户的视觉思考,从而提升用户体验。

03 设计亮点

增强感情话设计,让界面变得有温度

右侧是客户给的原型,只是把要展示的数据简单罗列了一下。考虑到大屏应用场景,比如公司会议,集团视察,行业参观等,都是宏观数据展示为主。所以在设计时不仅要考虑美观性,更要考虑到整体的交互布局以及交互方式,确保关键数据和指标在界面上以醒目的方式呈现,以便用户快速识别和理解。设计清晰简洁的布局,避免信息过载,使用户能够轻松找到需要的信息。

设计后三大主题采用轮播的形式,当某一个主题转到前面时,周围的数据会随之变化,页面添加适当的动效可以增强用户与界面的互动感,提升用户体验和参与度。

增强感情话设计,让界面变得有温度

PC端驾驶舱页面虽然和大屏的内容大部分相似,但使用的场景是财务公司各业务部门领导、数据分析人员使用,也包括各级领导日常运营决策查询,公司会议。重点展示领导关注内容,定制化程度高,所以重点在于母版布局的扩展性和组件的通用性。

界面整体采用简洁风格设计,去除多余的装饰和复杂元素,使用户专注于核心信息,减少干扰。采用卡片化设计,卡片设计将信息分割成独立的模块,使内容更易管理和组织。通过卡片设计,重要的信息可以被突出显示,吸引用户注意力,让用户能够快速浏览和扫视页面内容,找到他们感兴趣的信息。同时卡片设计可以更好的适配响应式布局,适合不同屏幕尺寸和设备,能够灵活地调整布局和展示方式。

增强感情话设计,让界面变得有温度

右侧是“价格数据看板”的原型,是多个看板的一个,原型中内容过于杂乱,没有统一规范,重点数据不突出等痛点。

看板的设计统一在上面加了一个小 banner 图,banner 图有的右侧插画和标题相呼应,每个看板有一个主题颜色,下面数据沿用首页的的卡片化设计。饼、柱、折线等控件设计新颖,合理,具有高可复用性。

04 界面欣赏