资金运营管理监控系统交互设计、UI设计及VUE开发

01项目背景

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

本次合作九恒星委托蓝蓝设计负责PC端界面视觉设计、大屏界面设计以及VUE前端开发。在交互设计中做了较多优化,重点展示领导关注内容,视觉设计尝试了多种国际国内中公认较好的风格和布局,在UI设计和开发中,考虑到后期不同客户的定制化程度高,重点在于母版布局的扩展性和组件的通用性。最终设计出既有国际流行风格、又契合国内用户喜好的UI设计。

02项目概述

03设计亮点

突出主要数据,增加轮播动效,以便用户快速识别和理解

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

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

卡片化设计提高了信息的获取效率,多彩的色彩使用户感受到朝气蓬勃

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

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

提升页面的整体美感,增强用户的信任感和好感度

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

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

相关推荐
码艺-Alimjan4 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
星光开发者5 小时前
基于决策树随机森林算法的小说推荐系统的设计与实现-计算机毕设【课程设计】78485
vue.js·算法·微信小程序·django·php·课程设计·express
传奇开心果编程6 小时前
【ArkUI进阶练中学】第11课:安全与合规进阶
学习·ui·华为·harmonyos
vx_Biye_Design6 小时前
springboot高校选课系统82776-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·课程设计·express
niyongsheng6 小时前
后端零改动,给若依换一套现代化前端
vue.js·开源·node.js
用户9177533718759 小时前
从零封装一个地图组件库:OpenLayers + Vue 的工程化实践
vue.js
雪芽蓝域zzs10 小时前
第7节:多选模式、自定义选项渲染、受控弹窗显隐
vue.js·elementui
传奇开心果编程10 小时前
【ArkUI进阶练中学】第12课:应用架构演进与遗留系统迁移
学习·ui·华为·harmonyos
acd1200911 小时前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js
vx_Biye_Design11 小时前
springboot一站式旅游管理平台81037-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·课程设计·express·旅游