蓝蓝设计ui设计公司作品案例-中节能现金流抗压测试软件交互及界面设计

中国节能是以节能环保为主业的中央企业。中国节能以生态文明建设为己任,长期致力于让天更蓝、山更绿、水更清,让生活更美好。经过多年发展,中国节能已构建起以节能、环保、清洁能源、健康和节能环保综合服务为主业的4+1产业格局,成为我国节能环保和健康领域规模大、实力强、专业覆盖面广、产业链完整的旗舰企业。

中节能现金流抗压测试软件是一套可以科学分析企业存量项目现金流量,随着外部条件(利率/汇率/收入到帐时间)变化,预测未来现金流量的软件系统。此次麦浪科技和蓝蓝设计合作,进行软件升级改版,进行交互方式的优化,参考了国际上后台管理软件的设计优点,风格简约而不简单,逻辑清晰,大数字及动效的使用,让用户体验更佳。

产品定位

通过现金流抗压测试软件,可以为企业存量项目现金流进行全方位压力测试,和评估,并预测下一阶段企业现金流量,为企业财务体系运转体统数据存量数据支撑和增量数据预测。现金流抗压测试软件是中节能财务体系中重要一环,是企业财务系统和业务现金流系统之间的安全屏障。

目标用户

中节能企业内部财务人员使用,年龄分布较大,普遍年龄在20-50之间。目标使用人群办公场所相对固定,主要集中于办公室;对人机交互效率要求较高且使用频率较高。主要进行办公类操作,希望系统能够便捷好用,稳定安全且易于理解。

设计风格

交互方面,采用平铺设计方案,将信息尽可能多的呈现在同一级页面中,同时对类别区域加以区分,在保证信息传递清晰流畅的同时,尽量减少用户点击行为和点击次数,提高办公效率。 视觉方面,以大为主,采用大间距,大对比,大字号的设计思路,保证页面呼吸感和节奏感的同时,兼顾信息传递,在主要业务页面突出产品的功能属性。

在交互原型设计过程中,蓝蓝与麦浪同事进行了深入的沟通,我们多次前往麦浪公司以及中节能公司了解业务,在确保对业务完全理解的情况下,充分吸收用户意见,与麦浪同事反复修改交互原型图,打磨交互细节。最终通过客户评定,确定交互原型。

在项目进行过程中,麦浪同事也提供很多支持

根据手绘原型图,制作并优化原型设计图

客户最终确定的交互原型图

页面设计

页面设计过程中,蓝蓝按照先定风格再深入设计的原则,先期提供不同风格的首页和登录页,供客户选择,待确定系统整体视觉风格后,再进行后续页面的设计。

本系统首页主要是核心数据的总览和展示,经过与客户讨论,首页主要显示"资产""负债""现金流"等方面的内容。在确定展示内容之后,蓝蓝设计尝试将行业特色和产品结合,运用情景化的设计,把行业"风机"融入进首页中来,同时深色的背景和多种元素的组合,也把科技感体现了出来。

设计过程中提供的其他方案

功能至上

蓝蓝对每个页面功能性也做了区分,并且根据页面的功能属性调整优化设计方案。

本系统按照页面属性分类,大致分为2类:图表展示和数据计算。针对图表展示类型的页面,蓝蓝采用平铺的展示方式,尽可能多的将数据呈现给用户,提高页面数据展示效率,减少用户交互行为。平铺展示这种方式对数据的分类展示要求较高,经过与客户沟通确认后,蓝蓝按照信息优先顺序进行排版,针对数字类型信息,采用横向平铺,针对图表展示信息,采用卡片和色彩区分不同类型的数据。蓝蓝还把页面操作区域放置在页面顶部,并采用吸顶设计,不会随着页面滚动而消失,在保证数据展示最优的同时,兼顾操作便利性。

数据计算类型的页面,偏向操作性,对页面交互、跳转逻辑较高。本系统中,需要操作的功能大多集中在数据的输入和计算相关的范围内。在交互层面, 蓝蓝与客户反复沟通,优化页面层级和交互逻辑,将不必要的功能隐藏展示,或者将原本在1页显示的信息分页展示,并在原型图中予以确认和展示。在视觉层,蓝蓝采用大字号的方式来突出需要输入的信息,并利用色块/图形化展示等方式,区分信息层级。在保证交互便利的同时,完整展示业务信息,丰富页面层次,也避免了信息过多带来的视觉压力,提升用户数据处理效率。

相关推荐
军训猫猫头3 小时前
20.抽卡只有金,带保底(WPF) C#
ui·c#·wpf
wuningw4 小时前
ant-design-ui的Select选择器多选时同时获取label与vaule值
ui·arcgis
SoraLuna9 小时前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
开发语言·macos·ui·华为·harmonyos
晓纪同学19 小时前
QT创建一个模板槽和信号刷新UI
开发语言·qt·ui
人才程序员1 天前
QML z轴(z-order)前后层级
c语言·前端·c++·qt·软件工程·用户界面·界面
程序视点2 天前
【安全漏洞】Vue UI库Vant组件遭恶意投毒,字节RspacK也中招!请紧急修复!
前端·vue.js·ui
m0_748238782 天前
前端使用 Konva 实现可视化设计器(20)- 性能优化、UI 美化
前端·ui·性能优化
m0_748239332 天前
随手记录第十四话 -- 在 Spring Boot 3.2.3 中使用 springdoc-openapi-starter-webmvc-ui
spring boot·后端·ui
Ke-Di2 天前
Unity-URP设置单独渲染UI相机
ui·unity
Tester_孙大壮2 天前
从想法到实践:Excel 转 PPT 应用的诞生之旅
ui·powerpoint·excel