大数据可视化大屏设计阅历,教给你
作者头像
  • 武飘
  • 2019-07-02 12:54:42 1

大数据产业正在以惊人的速度迅猛发展,随着大数据时代的到来,越来越多的企业开始重视数据资源的管理和应用。大数据可视化大屏逐渐成为众多企业的首选展示方式。作为UI设计师,我们也需要紧跟时代潮流,掌握这一领域的设计技巧。

接下来,我将从UI设计、交互设计和动效设计三个角度分享我在大数据可视化大屏设计方面的经验和见解。

一、UI设计

设计大数据可视化大屏时,务必始终以数据展示为核心。无论多么炫酷的表现形式,都必须确保不会干扰数据的有效呈现。

例如,天猫双十一可视化大屏利用3D地球和粒子效果展示了数据。下面介绍几种关键的设计要点。

  1. 拼接大屏

大部分大屏采用拼接屏设计。在进行UI设计时,应考虑到屏幕之间的缝隙可能会影响视觉效果。虽然内容不会丢失,但可能会出现图像被分割的情况。因此,设计时可以设置参考线,以避免此类问题。

  1. 设计尺寸

拼接大屏通常采用16:9的高清屏。设计尺寸可以根据拼接屏数量进行计算。比如,3×5的大屏,高度设为1080像素,每块屏的高度为360像素,宽度则根据比例计算得出。这样可以得到最终的设计尺寸。

  1. 视觉设计

在设计前,需要充分了解需求,整合数据,并进行分类处理。设计风格一般选择深色背景,深色背景有助于突出数据,同时也更为柔和舒适。大屏设计没有滚动条,因此长宽固定。字号建议不小于12号,数据信息建议使用14号以上的字号。此外,可以选择一些具有科技感的字体,并提供给开发者。

设计完成后,最好在实际大屏上进行效果测试,以便根据大屏的显示效果进行调整。

推荐一个jQuery插件库网站,里面有许多不错的动态效果。

二、交互设计

大数据可视化大屏可以分为两类:“纯展示型”和“展示+功能型”。前者几乎没有交互,后者则具备更多功能,如实时监控、数据对比等。

重点讨论“展示+功能型”的大屏产品结构。这类产品围绕核心数据进行信息架构设计。由于大屏主要用于内部员工,交互设计可以相对简化,不需要过多引导性元素。例如,可以设计隐藏式交互,如鼠标移动时出现控制面板。交互设计应尽量避免频繁跳转,以保持用户对主页面的关注。

三、动效设计

动效是大数据可视化大屏的重要组成部分。适当的动效可以增强用户体验,但过度的动效可能会分散观众的注意力。因此,动效设计需要谨慎。

  1. 如何完成动效设计

我习惯使用AE中的Bodymovin插件生成JSON文件。此外,也可以将动画渲染为视频,并转换为适合网页播放的格式,如OGG或WebM。

  1. 3D动效设计

对于3D动效设计,可以使用C4D、AE和PS等软件进行制作。具体步骤包括模型准备、动画制作、导入AE等。

  1. 3D地球可视化

3D地球的实现可以通过开源网站ECharts或Highcharts来完成。这两个网站各有优缺点,可以根据实际需求选择。

四、总结

大数据可视化大屏设计是一个持续迭代的过程。在实际应用中,可能会遇到各种问题,因此需要在项目落地后继续跟进优化。希望这些分享对你有所帮助。

    本文来源:图灵汇
责任编辑: : 武飘
声明:本文系图灵汇原创稿件,版权属图灵汇所有,未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:图灵汇",违者将依法追究责任。
    分享
可视化大屏教给阅历数据设计
    下一篇