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

01项目背景

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

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

02项目概述

03设计亮点

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

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

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

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

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

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

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

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

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

相关推荐
一 乐4 小时前
医院挂号|基于springboot + vue医院挂号管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·医院挂号管理系统
RReality6 小时前
【Unity Shader URP】Matcap 材质捕捉实战教程
java·ui·unity·游戏引擎·图形渲染·材质
深蓝海拓6 小时前
基于QtPy (PySide6) 的PLC-HMI工程项目(十)框架初成的阶段总结
网络·笔记·python·学习·ui·plc
Swift社区6 小时前
鸿蒙游戏 UI 怎么设计才不乱?
游戏·ui·harmonyos
Watermelo6178 小时前
理解 JavaScript 中的“ / ”:路径、资源与目录、nginx配置、请求、转义的那些事
前端·javascript·vue.js·chrome·nginx·正则表达式·seo
AI先驱体验官10 小时前
臻灵:数字人+大模型,实时交互的技术临界点在哪里
大数据·人工智能·深度学习·microsoft·重构·开源·交互
|晴 天|10 小时前
[特殊字符]️ Vue 3项目架构设计:从2200行单文件到24个组件
前端·javascript·vue.js
Ruihong11 小时前
Vue v-html 与 v-text 转 React:VuReact 怎么处理?
vue.js·react.js·面试
Fisschl11 小时前
Vue 封装 Echarts 组件
vue.js
for_ever_love__11 小时前
UI 学习 Appearance 外观管理
学习·ui·ios·objective-c