تسجيل الدخول الآن 很多UI设计师最近突然被公司派了数据可视化的活儿，心里多半会犯嘀咕：这该怎么下手？说实话，数据可视化这几年确实火，大数据产业一膨胀，企业纷纷上马大屏项目，设计师被临时抓壮丁的情况太常见了。我刚做完一个案例，顺手记下来，权当抛砖引玉，欢迎随时交流。
这个项目叫"XX应用云"，底下分了五个模块：云综合调度、数据查询渠道、数据应用处理、数据存储管理、管理运行维护。每个大模块下面还挂着若干子系统，结构不算简单。大屏首页要展示的东西列得挺细——全局数据量、4个重点关注指标、2个次要指标；五大模块的入口；搜索功能，默认综合检索；还有按指标多维展示的关注数据信息，维度涵盖指标、地图、区域排名、部门、类别；最后加上云导航。
接到需求后，我先琢磨了一下大屏可视化的门道。大屏多是多屏拼接，面积够大，用户得站远了看，字必须清晰。交互方式也在变，早年间用电脑操作，现在iPad、手机、激光笔都上了。视觉上背景多用重色，把数据衬出来，一屏说一件事，别搞杂了。
对照这些特点，原稿问题很明显：布局乱，视觉失衡，层次出不来；主色调蓝配黄，单调又没章法；图表种类少，数据想说什么看不明白。
改版从优化布局开始，格栅对称，左右平衡。视觉设计这块，得先把数据吃透——哪些是主要的、次要的，总量和细分什么关系，各数据什么维度。心里有数了，可以先纸上画草图，边做边调。
客户想要"科技感强、视觉效果酷"，这算是把关键词定下来了。结合大屏场景，背景用深色调，数据变化用亮色，既抓眼球又节能。
主题风格具体落到地图上头。原版中国地图平铺直叙，层次感弱。改成科技蓝主调，加外发光和多层阴影，地图一下子立体起来。科技线连缀各城市，示意数据流动；背景用淡一些的旋转线衬托，画面丰富但不抢戏。
选图表是个技术活。我习惯从四个维度想：数据之间有没有关联？集中在什么范围？差异体现在哪？各部分占比多少？维度定了，图表类型基本也跑不了。然后从候选里挑最贴切的，ECharts原图不够好看就再美化，但有两条底线不能破——用户一眼得看懂，开发那边得能实现。
说到实现，沟通太重要了。有些效果代码写起来简单，设计师用PS、AI、AE却做不出；反过来也一样。所以得先摸清边界，设计师能发挥到哪、哪里必须收敛，心里要有数。项目周期和预算都是硬的，别钻牛角尖。
城市排名这块就是个取舍的例子。排名项太多会干扰地图主体，跟客户商量后只留前五。显示形式也换了，不用传统条形图，改用电格形式——页面上已经有三处条柱图了，再来一个就太单调。科技圆盘配上升科技线，数据降序排开，直观也有变化。
最后走一遍完整流程：需求分析、布局优化、关键词定义、主图风格确立。动态效果配上，收工。
当然，这篇只是粗线条的梳理。具体操作手法、图形元素怎么选、不同大屏配什么组件，可视化设计的水远比这深。权当一块敲门砖，有错漏的地方欢迎指正，一起琢磨。
