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

01项目背景

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

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

02项目概述

03设计亮点

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

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

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

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

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

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

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

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

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

相关推荐
harrain1 天前
antvG2折线图和区间range标记同时绘制
前端·javascript·vue.js·antv·g2
网络点点滴1 天前
组件通信-作用域插槽
前端·javascript·vue.js
Luna-player1 天前
Vue3中使用vue-awesome-swiper
前端·vue.js·arcgis
SuperEugene1 天前
Vue3 Pinia 状态管理规范:状态拆分、Actions 写法、持久化实战,避坑状态污染|状态管理与路由规范篇
前端·javascript·vue.js·前端框架·pinia
送鱼的老默1 天前
学习笔记--vue3 watchEffect监听的各种姿势用法和总结
前端·vue.js
angerdream1 天前
最新版vue3+TypeScript开发入门到实战教程之路由详解
前端·javascript·vue.js
送鱼的老默1 天前
学习笔记--vue3 watch监听的各种姿势用法和总结
前端·vue.js
长安第一美人1 天前
AI辅助下的嵌入式UI系统设计与实践(二)[代码阅读理解]
c++·嵌入式硬件·ui·显示屏·工业应用
HwJack201 天前
HarmonyOS应用开发中EmbeddedUIExtensionAbility:跨进程 UI 嵌入的“幕后导演“
ui·华为·harmonyos
掘金者阿豪1 天前
在AI时代,没有人是“只写一行代码的人”——我们为何都在被迫成为全栈?
vue.js·后端