案例分享：数据可视化大屏设计经验分享（高级篇）

本期分享的是工作中的实际案例——首都国际机场数据可视化大屏幕设计。以下是板式元素、图表、文案、3D层层分析讲解效果技术和开发落地。 案例解析 下图是我们优秀的技术人员使用模板直接布局的页面，也可以理解为需求页面。接下来，我需要根据页面的内容重新定义风格设计。 原图 当我看到这个页面时，我必须首先知道他在做什么？功能是什么？是纯数据显示还是监控预警？通过这些理解，我们基本上可以知道是否存在交互行为。数据可视化的设计理念会有很多不同，功能也会有不同的设计方向。 其次，分析主次数据和总分数据，分析当前图表的合理性和大屏幕的设计比例尺寸，最终通过分析对页面进行合理的布局显示。 通过分析重新布局页面，如下图所示： 重新布局图 最终设计稿 数据可视化页面设计，如果页面有一个非常引人注目的主视觉图，那么其他元素一般不会过度设计，如果是视觉元素整个页面太花。 上图左右两侧的图表只是简单的呈现，让整体视觉更有呼吸感和张力。如果每个图表都加了边框，页面会显得局促，常见的3D地理城市的主视觉是3D模型、辅助元素一般不过度修饰。 1. 关于板式元素 主题风格构思阶段： 既然是首都国际机场，那就用3D地球是最好的展示，3D地球无疑是一个沉重的视觉元素，飞机围绕地球来回飞行形成光线，所以页面上会有很多线条。 设计注重你有我，我有你，所以这个页面可以设置为线条的主题，其他元素可以尽可能用纤细的效果设计。例如，页面中纤细的条形图、柱形图和环形图可以反映元素之间的相关性，实现整体视觉平衡和谐。 注：用3思考D当地球来设计时，我提前与开发沟通，知道它可以实现，然后开始设计，所以有不确定的设计，立即与开发沟通。 元素设计阶段： 标题设计 左边的标题看起来僵硬，不符合产品页面的整体色调。右边的标题采用斜体和轻微的渐变色，可以渲染页面飞机的动态氛围，所以右边的设计形式更合适。 但并不是意味着所有的产品标题都应该使用斜体渐变颜色，这取决于产品。例如，政府产品更应该反映庄严的氛围，正常的形式更合适。 天气、空气质量、时间元素 必须增加天气温度、空气质量和时间。原因是飞机在户外飞行时会注意天气，而北京机场的空气质量尤为重要。此外，由于时间是机场的实时数据，与实时数据相比，当前时间非常有意义，因此应反映时间。 2. 关于图表设计 图表一修改： 总航班量图截图 虽然上图可以清楚地表达所有数据，但图表包含航班总数，视觉性能较弱，不能直观地表达延误航班和取消航班。 改版后 修订后，从出港量和入港量两个维度合并同类项： 出港量包括：延误出港航班，取消出港航班； 进港量包括：延误进港航班，取消进港航班。 以大品牌为重点，突出进出总航班数量，然后分别列出延误航班数量和取消航班数量，使数据之间的关系非常清晰。同时，两个维度的数据也可以相互比较。 用色说明： 延误航班用黄色，黄色情绪映射等待，延误等待； 取消航班用红色，红色情绪映射停止，取消停止。 图表二修订： 问题图表 事实上，上图中的环形图并不合适。环形图更适合总量的每个百分比。事实上，标题今日前五名延误进港机场希望展示前五名城市的延误进港排名。排名最直观。 但是从页面的整体来看，有两个地方使用了条形图和柱形图。如果这里还是条形图，页面看起来会很单调，图表也没有多样性。所以现在设计要体现图表的多样性，也可以直观的呈现排名。 改版后图表 修改后仍采用环形图，以注释的形式呈现排名从高到低，两者都可以考虑。这种设计思维方式是设计思维。设计师不仅要考虑视觉，还要考虑功能目的，善于在两者之间找到平衡。 3. 优化标题和文案 第一次修改： 问题标题 上图左右标题唯一的区别就是一个是进字，一个是出字。如果不仔细看，很难一眼看出左右两个字的区别。所以在设计标题的时候，一定要提炼关键词，把可以作为明显区别的关键词放在前面。 调整后标题 调整后的标题将关键字放在前面，观众可以快速识别。 第二次修改： 问题标题和数据格式 这个图表数据反映了航班数据的延误，所以标题的关键字应该是延迟，延迟在标题中间不能快速识别数据类型。 此外，图表上的数据格式是错误的，航班数量不应该有小数点，因为航班数量是整数。 调整后 调整后，关键词延误进出港机场-今日前五可以通过横杠将今日前五分开，更直观。 4. 3D效果技法 3D地球效果： 原图进出港途中的细节上下分开： 一开始通过进出港切换的方式呈现，就是一个大地球，一个小缩略图，可以点击切换，也可以自动轮播大小切割。 初稿 考虑到该产品没有任何交互操作，在这里设计交互行为是不合理的，所以需要改变形式。 定稿(数据每15分钟刷新一次) 调整后，将两个数据呈现在地球上，并用两种不同的光颜色表示进出港。 青色:北京扩散的方向代表出港 蓝色：关注北京的方向代表进入香港 如果你仔细查看页面，你会发现所有进入香港的人都是蓝色的，比如进入香港的总航班数量、进入香港的人数和即将进入香港的航班；同样，出港的人都是蓝色的，目的是建立观众对数据类型颜色的认知。 3D地球技术教程： 3D纯用地球动画效果C4D软件完成： 地球使用世界地图 地球的凹凸效果用材料代替和凹凸 小飞机动画使用对齐曲线动画 插件用于生成国家间样条 LON—LAT Connection 插件用于光粒 X-Particles 我们一一介绍： 首先，一张叫球皮的世界地图，ps调整色调，直到满意。 调色球皮 将球皮放入材料中，用替代和凹凸代替表面的凹凸效果。 材质设置 小飞机动画采用对齐曲线动画，转动关键帧，记得勾选切线，否则飞机会横飞。 飞机绕地球动画 插件用于生成国家间样条 LON—LAT Connection，这一步非常关键，插件的使用非常简单：洲-国家-城市-洲-国家-城市，tab可设置样条曲线的高弧度等。 设置城市链接样条 最后，使用插件 X-Particles 渲染光粒效果，用头发渲染光效果，第一个光冻结，小光依次循环发射。 光线渲染 以上教程很笼统，有基础的同学肯定会明白，接下来我们来看看如何发展落地。 3D地球效果开发落地： 首先，我们需要知道一个网站Echartsj 里面有个3D路径图，见下图： Echartsj网站截图 上图中的两个地球路径图组件都可以达到我们的效果。我们只需要把色调调整好的球皮交给开发人员，更换组件中的图片。组件生成的地球原理是一样的，也是用一张图包裹成球的。地球数据的光线颜色可以改变，颜色值可以交给开发人员。 案例总结： 数据可视化设计，首先了解功能，分析数据之间的关系； 构思主题，围绕主题设计其他元素，与效与开发沟通； 分析数据，合理选择图表，灵活运用图表； 不要忽视文案设计，提取关键词； 加强技术，了解数据可视化设计网站。 最后 数据可视化大屏幕设计对视觉性能和数据的合理呈现有一定的要求。这两点由设计师主导。因此，在设计之前，了解数据之间的关系非常重要。记住不要太依赖原型图。 作者：吴星辰，微信公众号：互联网设计帮助 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。