今日分享丨点亮这四个技能，你也可以成为可视化专家

引言

以大数据、人工智能等为代表的新质生产力时代已悄然而至，央企、国企逐步意识到数据资源展示对于经营管理的重要性和紧迫性。数据可视化成为连接用户与数据的桥梁，藉由设计师的巧手，把复杂抽象的数据以基于管理需求，转化为直观、易懂的视觉画面，为决策提供依据，并带来了赏心悦目的视觉体验。

作为可视化行业从业者，今天为大家总结四个要素，让我们一起成为数据可视化设计专家！

可视化设计的四要素

数据感——UI 设计师能够通过简单的需求原形，选择更为准确的部件类型；

设计五大元素——能够驾驭科技风、互联网风、FUI 风等各种类型的可视化大屏设计；

动效设计——帮助可视化层级划分更清晰，提升视觉观感体验；

3D 效果——运用三维、二维软件，设计 3d、2.5d 图片、图标。

1 .数据感

在数据可视化设计中，数据感是首要的核心要素。当面对需求原型图时，设计师首先需要正确分析解读数据，基于实际场景判断低保真原型中图表样式是否恰当，思考是否有更贴切的图表类型可供选择。下图所示，图表分为四大类：比较、构成、联系、分布。

在选择图表类型时，一个常见的误区是仅根据数据本身来决定。实际上，真正决定图表形式的是需要传达的信息。例如，当需要分析各银行之间的融资分布情况时，比较类型的图表是首选，其中的柱状图无疑是最直观的数据表达形式。

数据感是需要培养的，可以借助如 echart 等网站进行学习和实践。可以帮助在工作中快速选择图表，从而有效传达数据信息。

2 .视觉风格

视觉风格在可视化设计中确实占据核心地位，掌握好这一点，无疑会使设计更具吸引力。可视化大屏的风格多以科技感强、深色系风格为主，设计时需要时刻谨记数据+科技的结合。

这类风格，通常深色的背景营造强烈空间感，亮色数据指标则更加突出，辅助拟物化、扁平化元素，多样性的光效。带给用户酷炫、未来科幻、FUI 的感受，非常适合大型企业，尤其是央企、国企等单位的需求。

而这类风格的实现，需要运用可视化设计五要素，即颜色、图片、图标、字体、空间布局，来共同实现

2.1 贴合行业调性的色彩搭配

选择合适的颜色搭配可以让数据更加直观、形象。可视化的行业、领域不同，选用不同颜色的搭配，不仅可以起到独具一格的效果，且让用户透过页面获得行业的归属感。

在确定了界面主题配色后，一定要搭配适合的图表配色方案，下图总结几种常见的配色方案。

2.2 科技感的图片、组件样式

可视化图片大致可以分为背景、主视觉、组件三大类。三类图片在可视化页面中扮演着不同的角色，共同的目标是使数据更加直观、生动并易于理解。

背景类图片通常是整个可视化页面的基础，它们奠定了整个页面的视觉风格和氛围。通常为深色系搭配透视的元素，能够营造出一种空间感，仿若置身于三维的空间之中。

主视觉图片是可视化页面中的核心元素，它们通常用于突出显示重要的数据或信息。设计与数据的主题和内容紧密相关，并且能够直观地传达数据的含义，常见地图、地球、业务逻辑结构图形元素。这类图片，确保它是页面中最亮眼的元素，倾向选择饱和度、明度相对高的色彩搭配，不仅吸引用户的注意力，也方便对数据的抓取。

组件类图片用于补充和完善主视觉图片和背景图片，常见导航、卡片标题、数字版、按钮、标签等。设计时，可结合项目方品牌 VI、企业文化、地域特色，深度融合个性化定制。以下图为例，某铁路运输企业智慧监控平台，可以从高铁图形出发，进行一系列的设计演变，确保界面既专业又独特，突出行业属性的同时，快速获得客户的认同感。

2.3 适配语义一致的图标

界面中的图标可分为公共图标和看板图标，公共图标是包括控件中的操作类图标，如搜索、下拉、关闭、翻页等。

看板图标，作为名称的图形抽象概括。包括科技、扁平两类风格。科技质感，视觉上更加饱满，常见光影、透视效果，更适合用于核心指标的图标风格呈现。扁平化的干净清爽，更适用于次级数据指标使用。

2.4 规范化字体、字号

选用字体时，应考虑字体的可识别性、与当前设计风格是否融合，以及是否已买版权，或选择免费可商用的字体。

设计大屏之前，规定合理的字号极为重要。若因字号使用不合理导致的返工，几乎所有相关元素都要进行相应的变动，是件极耗时的事情。基于 web 端开发，小于 12px 很多浏览器不会识别，前端的最小使用字号为 12px。下面为大家推荐在 1920*1080 常规分辨率下，常用字号。

2.5 合理的空间布局

布局，带给用户好的引导性与可读性。平衡感是可视化布局的重要原则，给用户一种稳定与舒适感。为大家介绍几种常见的平衡布局方式：

PC 端 16:9 页面，第一种中心布局排版，根据业务需求，将核心关键指标放置中间位置，占较大面积，其余指标按优先级依次展开。第二种上中下布局，按照权重高低，从上到下，从左到右依次排布。

可视化宽屏布局可通过业务内容具体分析。常见的两种展示方式：当页面层级明显，主要指标放置中间位置，次级图表数据在两侧展示。当整个页面业务同级，按模块去划分，主要内容在左侧，次要内容右侧。

当然，除以上四种布局，根据业务需求不同，版式也会有调整。

3.动效能力

动效是表达科技感的重要手段之一，它可以提升大屏产品的炫酷程度，营造智能效果，也可以让数据更加生动、形象，是不可或缺的视觉表现增色剂。现在市场上主流动效软件是 AE，可以结合 Blender、C4D，也是 3D 动效设计的最佳组合。

在设计动效时，首先需要思考页面中哪些元素该动，哪些元素不该动，不能为了设计动效而设计动效，反而忽略数据信息动传达。下面，为大家分享常见的三类动效。

3.1 入场动效

入场动效是元素在进入页面或刷新页面时只出现一次的动效，入场效果一般是缩放、位移、透明度属性的变化。多元素入场时要有先后和主次，例如下图的头部入场动效，系统标题和导航向两侧逐一展开，形成一个层级分明的入场展示。

数据展示也是常见的入场动效之一，常见于数字步进、图表加载、实时数据更新等，他们在导航、主视觉入场之后出现，是可视化动效中占比很高的一类。

3.2 持续动效

持续动效是元素在页面中的循环动画，一般用在图标、卡片标题、主视觉、背景渲染等，他们的出现让页面更加灵动鲜活起来，如下图：

但要注意，一个页面中不宜出现多处持续动效，否则会导致视觉难以聚焦数据信息。

3.3 混合式动效

混合式动效是常见主视觉的动效展示方式，主视觉承载界面的视觉焦点，其他位置的动效都不应该比主视觉动效更抢眼。通常有入场+持续两种动效模式。如下视频：可以看到，首先入场的是框架层、主视觉，数据图表在次级入场。入场动效结束后，页面中持续动效只有主视觉与一些面积较小的元素。这样的设计，界面主次关系一目了然，并快速建立对页面主要数据的抓取。

在可视化中，动效可以为用户创造更加愉悦和无缝的体验，有效提升可视化大屏品质的。未来，关于它的使用场景也会越来越多，希望大家多多学习，打好动效设计的基础，提高在可视化领域的核心竞争力。

4.3D 能力

3D 景深确实能够为用户带来强烈的空间感和沉浸式的视觉体验，这在游戏、电影、建筑可视化以及数据可视化等领域都发挥着重要作用。

3D 可视化对于 UI 设计师要求更高，设计师要有很好的立体想象能力和空间感。同时，学习专业的 3D 设计工具，如 Blender、Cinema 4D（C4D），这些工具能够帮助设计师构建复杂的 3D 场景，并通过材质、光影等效果让作品更加生动逼真。对于需要实现 3D 交互的应用场景，如游戏开发、数字孪生等，设计师还需要学习使用如 U3D、UE4 等游戏引擎开发软件；这些软件提供了强大的 3D 渲染和交互功能，具备实时数据接口，能够实现与后台数据的无缝对接；想要更好的掌握它们，还需要一定的编程基础，如 C++、C#等。

虽然 3D 软件在 3D 设计中是不可或缺的工具，在立体效果展现上，也不一定全然依靠 3D 软件。通过透视的设计手法，使用 PS、Sketch 软件，也可以轻松实现。二维软件有效缩短时间，降低对电脑配置的要求，且不会给开发增加额外成本。通过巧妙地运用光影、阴影和透视等技巧，设计师可以营造出令人信服的 2.5D 或伪 3D 效果。

下图，展示了如何结合 3D 软件渲染背景，在通过透视手法使用 ps、sktechs 设计有立体感的图形元素。这种方法既保证了视觉效果的出色表现，又兼顾了实际操作的可行性和效率。

下图，是用 ps 设计的图片、icon 和部件样式，若页面数据较空或过于平淡，不妨试试这类效果，适当的立体效果的增加，也可以为可视化页面的多添一分科技炫酷的氛围感。

建立可视化学习体系

建立属于自己的可视化学习体系，关键在于多看优秀案例，积累灵感；多动手实践，提升技能；多思考总结，不断优化。

推荐利用在线资源，线下书籍，参与社群交流，持续学习新技术和趋势，逐步构建并优化自己的可视化学习体系。

以下是一些值得推荐的可视化灵感网站：

1、Behance：Adobe 旗下的平台，集合了全球各地的设计师作品，涵盖了平面、UI/UX、插画、摄影等多个领域。

2、HUDS+GUIS：一个给设计师提供灵感和资源的网站，有很多创意有趣的设计，所有案例基本都有动效展示。

3、Dribbble：设计师们分享和发现创意作品的社区，适合寻找灵感和学习最新设计趋势。

4、Pinterest：一个视觉搜索和发现引擎，你可以通过关键词搜索找到大量的可视化设计灵感。

5、站酷、花瓣、UI 中国：国内知名的设计分享平台，提供了大量本土设计师的作品和教程。