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

01项目背景

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

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

02项目概述

03设计亮点

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

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

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

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

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

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

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

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

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

相关推荐
春波petal1 小时前
Vue3防抖搜索:从Lodash到customRef全解析
vue.js·vue3·防抖搜索
达子6662 小时前
第22章_HarmonyOs开发图解之 蓝牙
vue.js
无人生还2 小时前
从 Vue3 到 React · 快速上手系列第 9 篇:自定义 Hook(对标 Composables)
前端·vue.js·react.js
2501_933923252 小时前
前后端交互避坑指南:从登录到留言板
交互
别怪我很水3 小时前
Vue element admin 浏览器本地存储 localStorage、useStorage
前端·javascript·vue.js
蓝速科技3 小时前
蓝速科技丨双屏翻译机重构跨国商务沟通的交互范式
科技·重构·交互
猫猫不是喵喵.14 小时前
Vue3 Props 属性
前端·javascript·vue.js
测试开发技术21 小时前
AI 测试提效 | 告别手工写脚本,分享我的 Playwright + Skill 批量生成 UI 自动化脚本方案
自动化测试·人工智能·ui·自动化·agent·skill·ai测试
小罗水21 小时前
第17章 后台管理端与演示支持
javascript·vue.js·ecmascript
吾儿良辰1 天前
Flutter 迎来重大变革:Material 设计系统拆分,迈向更开放的 UI 框架
javascript·flutter·ui