Bootstrap

可视化大屏如何助力差旅管理

前言

差旅管控驾驶舱是一款服务公司内部的差旅费控可视化平台,以一个容器的形式聚合内部的差旅费用、差旅报销、 差旅安排、财务管理能力,并以可视化的形式呈现。接下来分享我如何进行设计以及流程是如何推进的。

流程整合

在设计项目开始之前,进行详尽的流程梳理和与主管的深入沟通是至关重要的。这个过程不仅有助于确保项目的成功,还能够促进双方对项目目标和期望的共识。

最终整合为:改版背景,场景梳理,问题汇总,升级方向、经验总结 5 个方面

改版背景

主管长期负责管理差旅费用,借助公司既有系统的数据概览,能掌握费用支出类目、金额及波动情况,开展预算把控、报销鉴别等常规管控工作。

但在向外部合作方展示管理成效、向高层汇报项目成果时,现有管理模式有短板,仅靠数字表格难以让汇报对象快速抓取关键信息、凸显重点,缺乏用图表等可视化形式关联费用与项目进度、业务成果、成本优化成效的呈现方式,是成果展示汇报环节亟待攻克的难题。

场景梳理

经过对管理层相约进行会议调研之后,将场景分为 3 类:

  1. 数据分析:助力管理层解读差旅费用预算与实际支出的相关数据信息
  2. 辅助决策:为市场拓展筑牢坚实的数据根基
  3. 洞察市场:借助差旅数据解读助力主管回溯总结并实现成果转化

问题汇总

通过走差与调研,将痛点拆解为三个部分:

  1. 业务不清晰:缺少分析维度,业务逻辑没有从宏观数据贯穿通至围观组件。
  2. 主图表达不清晰:主图数据表达不清晰,使用户无法得到场景化的有效数据,视觉效果较差。
  3. 规范混乱:文字、色彩不规范,设计风格不统一,重点数据不过突出,整体页面缺少质感。

升级方向

梳理页面逻辑

重新构建页面布局,依数据逻辑和用户需求分区展示关键数据,提升易读性,助主管掌握重点。梳理页面逻辑,优化数据跳转路径,确保展示连贯,如点击关键数据可弹出关联明细。依据数据特点与用户需求,从组件库、图表库筛选并二次设计图表,突出重点、标注异常、融入巧思装饰,以契合差旅数据展示需求。

定义设计规范

业务需求定设计规范,布局合理、选适配字体与图标,融入品牌元素,显专业和特色;融入高端商务风,借简约布局、质感模拟、优雅交互,赋大屏生命力与魅力;选银灰、湛蓝、金黄、柑红配色,依特性传达金钱、商务属性。

选择合适图表

基于业务目标与用户需求,循业务路径统计筛选柱状图、条形图、折线图等常用图表类型。将图表分比较类、构成类、分布类,依数据特性量身定制图表以匹配之,提升分析效能。最后,运用清晰可视化视觉语言,增强图表可读性与美观性。

地图视觉迭代

主图为国内地图,旨在提升决策效率。设计运用暗色调背景、3D 效果、微渐变、外发光增强科技感。历经四版迭代:一版视觉冲击力弱、质感差;二版暗黑色调不符商务气质;三版视觉噪音多、过亮;四版平衡质感与信息阅读,数据清晰,获主管确认。

图表视觉升级

对图表进行优化:一是视觉升级,依色彩心理选色、规范字体,提升识别度与数据清晰度;二是增设占比图例,以简约样式标注数值占比,助快速理解数据;三是添加装饰元素,汲取多元灵感装饰,让图表信息丰富且具视觉吸引力。

大屏模版化

大屏模版化适配需求关键在于:一是设定统一模块宽度(278PX),保障布局灵活一致,方便模块添加与重排;二是拆分内容为独立模块,可按需配置优化,适配多样展示需求;三是借此显著削减定制化开发量,助力快速降低开发成本。

经验总结

流程化整合有利于设计流程的推进,从前期的团队调研到后面的开发的落地都需要整体的跟进。最后还要说一点,针对和主管们的开会时候不要胆怯,因为本质上是你帮助主管完成自己的任务,只对事不对人就好了。

;