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

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

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

产品定位

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

目标用户

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

设计风格

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

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

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

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

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

页面设计

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

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

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

功能至上

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

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

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

相关推荐
SoraLuna2 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
小乖兽技术7 小时前
C#与C++交互开发系列(二十):跨进程通信之共享内存(Shared Memory)
c++·c#·交互·ipc
martian66513 小时前
QT开发:掌握现代UI动画技术:深入解析QML和Qt Quick中的动画效果
开发语言·c++·qt·ui
初九之潜龙勿用15 小时前
C#结合JS解决Word添加无效位图导致进程停滞的问题
javascript·ui·c#·word·asp.net
AI原吾19 小时前
`psdparse`:解锁Photoshop PSD文件的Python密钥
python·ui·ai·photoshop·psdparse
赵锦川1 天前
nuiapp vue3 uni-ui uni.uploadFile 图片上传
javascript·vue.js·ui
写bug的小屁孩1 天前
登录注册窗口(一)
运维·服务器·数据库·c++·用户界面·qt6.3
dangoxiba1 天前
[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集:制作UI系统的主菜单界面和选择存档界面
ui
如风暖阳1 天前
浅谈UI自动化
ui·面试·自动化
番茄灭世神1 天前
Qt学习笔记第41到50讲
qt·ui·上位机