R/VR 场景下的可视化 UI 设计是一个多学科交叉、极具挑战性的领域。兰亭妙微设计师从传统的二维 UI 设计思维中跳脱出来，充分考虑三维空间、用户交互和视觉舒适度等新的因素。通过遵循设计原则和策略，运用科学的设计流程和工具，我们能够创造出更加优质、符合用户需求的 AR/VR UI 设计，为用户带来前所未有的沉浸式体验，推动 AR/VR 技术在更多领域的广泛应用。随着技术的不断进步，我们期待在这个领域看到更多创新的设计理念和实践成果。

合理使用数据图表可以帮助用户更好地理解复杂的数据，提高用户体验和数据的可读性。选择合适的图表类型并遵循最佳设计实践是确保图表有效传达信息的关键。
数据图表是一种非常重要的可视化工具，它能够帮助用户更直观地理解和分析数据。借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点：准确性、创新性、简洁性

为什么说是撕开 B 端封印呢？没接触过 B 端的同学，很大一部分都认为 B 端不就是简单的列表和图形吗？拿开源组件拼拼凑凑就可以了，有什么可设计的？

其实这个想法完全错了，你如果接触后就会发现，B 端所需要的掌握的产品知识、思维逻辑、规范意识等等太多了。

而且近几年 B 端这个词出现的频率越来越高了，因为前几年大家都在争 C 端市场，纯 C 端的流量争夺已经进入了尾声，B 端产品反而带来了新的机会点，同时也被慢慢的重视起来，比起以往 B 端设计师，现在需要掌握的技能也越来越多。你可以查阅一下一些招聘网站，现在 B 端可视化方面的岗位是非常火爆，与 C 端相比，人才缺口更大，未来几年 B 端也会更加火爆，有机会接触 B 端的话就不要错过机会。我们团队平均招聘一个合适的设计师基本要两个月的时间。

说了这么多，我们开始今天的主题吧！

首先在座的可能有部分设计师没有接触过数据可视化的设计，那么第一个问题来了，什么是可视化？大家想一想。给大家三秒钟~

通过可视的表达来增强用户处理数据的效率。

接下来我会从三个方面来讲解如何构建可视化：

    · 灵感需要迸发，更需要积累

    · 从零到一设计驱动

    · 设计度量

一、灵感需要迸发，更需要积累

1.1  数字时代下，99%的问题都是旧问题

数字时代下仍有信息不对称的情况，尤其是关键技术和设计上的问题，但是如果你用心寻找，就会发现你的新问题则是别人很久之前的旧问题了。所以要做个有心人。

但是问题又来了，有时候真的不知道该怎么找、去哪找？这是个很常见的问题。因为可视化不比插画、平面等这些成熟的领域，他是比较小众的，所以灵感以及素材的搜寻是一个令新手设计师头疼的事情，再加上对关键词的熟悉程度不够，导致很多设计师只停留在【可视化】这个关键词里，最后感觉搜来搜去都是见过的图，没有新意。

1.2  明确目标，知道自己想要找什么

互联网信息太多了，漫无目的的找灵感，只会浪费时间，一会看到这张图好看，一会看到那张图好看。不知不觉几个小时就过去了。

1.3  建立关键词词库

确定目标后，就要细化关键词了。怎么建立关键词词库呢？

关键词词库由3部分组成：终端、设计类型、业务类型。

    · 终端：大屏、移动端、web 等等。

    · 设计类型：每个细分的数据可视化类别都是有一些专有名词的，比如最近比较热门的车载HMI系统，那他的类型关键词就是 HMI。通过这些关键词，你会搜到更精准的结果。设计类型关键词比如：AR/VR、HUD、HMI、FUI等等，你要了解你们公司相关类型的关键词，记录下来。以及跟你们有关联的，都记下来，补充自己的词库。

    · 业务类型：智慧城市、生物医疗、监控部署等等。

这三类单独或组合进行搜索，就会看到更多可视化产品了。把关键词词库建立起来后，就可以去常用的网站上搜索了，最好用的还是 behance 和 Pinterest。

1.4  除了常用的设计网站，还有哪里可以看？

企业官网：很多做数据可视化的公司，会在官网展示一些能体现自己业务特点、业务实力的案例，而这些案例就是这些企业最好的数据可视化设计作品了， 所以但凡有案例展示的官网，案列基本都是最典型最好的设计，所以从这些案例中找灵感，也是一个有意思且有效的方法和途径。

1.5  你看到了别人看不到的，设计才能有所不同

总结一句话：你看到了别人看不到的，设计才能有所不同。如果你和别人看到的是一样的，你怎么比别人做的更优秀？

1.6  兴趣推送

经常刷短视频/新闻网站的应该知道，系统会根据你的点赞、收藏、浏览等数据来给你安排后面的内容推送，以保证给你推送更精准的内容。设计网站亦是如此，behance 等网站上也都是千人千面，它会根据你的点赞收藏等来读取你的喜好，进而推送更精准的作品。所以假设你是一个B端数据可视化方向的，你就经常搜、点赞收藏相关作品，之后你的首页出现相关内容的几率也会变大。

1.7  定期清理，更新迭代

最后一点，这个也是好多设计师的通病，收藏即学到。

灵感库要求精而不是多，每隔一段时间，回来翻一翻自己之前收藏的作品，会发现有些作品自己已经看不上了，因为在做灵感收集的过程中，我们的审美会自然有所提高，当输入的作品样本越来越多，我们对作品评价的维度也会更多，之前那些觉得好的作品，现在看来也就会有缺陷和不满，这是一个很正向的结果，成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品，添加更符合自己当前审美的作品到灵感库里。

这样慢慢完善你的地基，才能更高的向上走。

二、从零到一  设计驱动

讲完第一部分，我们开始搭建产品。

我负责从零到一的项目大大小小的得有10来个了，我认为在产品整个产品周期中设计师的话语权最高的时候就是项目初期，是可以做到设计驱动的。既然设计可以有足够的的话语权，你就得规划好未来的设计走向。

产品初期，经常会有几个争议比较大的问题，我们来聊一下。

2.1  设计先行还是调研先行？

这是新项目必须要做的选择题，再讲之前你先想一下，如果是你，你会如何选择？

我的观点是设计先行。（当然设计先行是建立在你至少对这个项目的行业有个简单的了解之后，先设计再用户调研），为什么呢？因为如果用户调研先行的话，用户只会反馈当下最想要的东西，从而有可能给你带来误导。就比如我们经常举的一个例子：汽车出来之前，人们只想要一匹更快的马。

我们要解决的不是用户当下想要的东西，而是痛点背后用户真正需要的东西是什么。在 0-1 的这种创造性的项目，往往设计者才是当下最懂产品的人，你把决策权交给一些不懂产品的人，做到最后只能是迷失了方向，锅还是设计来背。所以一开始设计师要把决策权拿在手中，掌握航向。

2.2  设计先行还是规范先行？

这个问题在现在看来相对比较统一，但有的同学还是有疑惑，所以我拿出来再跟大家聊一下。

首先我的观点是设计先行，在设计之前就定好规范的基本都是自己YY的，返工率极高。等你在做具体设计的时候就知道之前做的规范都是白费力气了。一般都会选用在项目完成之后或者主风格及主要页面完成后再输出规范，这样既可以减少规范的改动，也可以保证后面功能延用规范，一举两得。

当然了，设计规范不是所有项目都要有的，它是为了减少工作而不是增加工作，如果是一次性项目，就不需要再额外花费精力去输出规范了，浪费资源~

2.3  完成和完美那个更重要？

现在都是争分夺秒的时代，任务是无止境的，没有做完的时候。造成这个局面的无非就是一个问题：时间不够用。通常的做法就是先完成再迭代，做产品久了你就会发现，完成比完美更重要，不完美你还可以再迭代，完不成就有可能错过一个风口，从而失去了变完美的可能~

聊完这三个问题，我们在设计的时候也要有一些注意项，真正的做到设计驱动。

2.4  把复杂变得清晰简单而且美

对于设计师来说，我们的任务就是把复杂问题变得清晰简单而且美，所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法，把无形的、复杂的技术，通过有形的、可视化的方式展示出来，让客户更直观、清晰的感受到产品的功能，看得懂其在业务场景中产生的价值。

2.5  转换视角，建立共鸣

站在客户视角，聚焦客户关注的核心问题，通过情景把内容有序组织起来，快速与客户建立共鸣，有效降低内容理解难度。

2.6  产品架构可以不那么复杂

把复杂的业务/功能简单化、傻瓜化，最大的降低学习成本，能帮用户操作的绝不让用户亲自去操作。你要让用户在1分钟之内了解你的产品是做什么的、有什么功能，你就成功了。

2.7  大胆隐藏冗余内容

B 端项目中内容量是巨大的，面对庞杂的信息，去粗取精，提炼各场景的核心内容，避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂，还要严格控制文字长度，保证内容可以被快速扫描和理解。

2.8  尊重用户习惯

不要妄想改变用户养成的惯性思维，你要记住惯性思维大于设计思维，他的阅读习惯、操作习惯都是不易改变的，不要为了个性化而尝试去改变，大部分情况下结果不会是那么的理想，除非你有极大的把握。

2.9  选用合适的图表

这个是常提到的，我就在这里简单给大家提个醒。比如做数据对比，柱状图更能清晰表达出用户想要的结果，你却非要放个酷炫的雷达图，他的本质目的都没达到，要美观有何用？

每个图表都适合哪些场景使用，像 antv、hicharts 等都有介绍，我就不一一赘述了，我之前也写过一篇关于如何合理利用图表的文章，大家有兴趣的可以去看一下。

三、设计度量

产品设计的好与坏我们需要去验证、去度量。我们怎么去验证可视化的好与坏呢？

美与丑也是主观的，没有绝对的美，也没有绝对的丑。一个产品，总会有人喜欢有人不喜欢，但是我们要迎合大多数人的审美。

所以就需要一个方法论来验证产品的好与坏，现在各大厂都在做自己的一套产品验证的方法论，阿里在这方便算是国内做的不错的，我举几个常用的度量模型。

    · 阿里云：UES

    · 蚂蚁金服：PTECH与易用度

    · 1688：五度模型

    · 优酷：DES

UES 目前是国内最好的，在 5 月份的阿里设计周上也正式对外讲解了 UES 模型。我拿阿里云的 UES 简单讲一下吧，这么多度量模型，无论他的方法、维度有所不同，但他们的目的是相同的：通过模型来度量设计成果。

    · 易用性：易操作性、易学性、易见性 ...

    · 一致性：整体样式、通用框架、常用场景及组件 ...

    · 任务效率：任务完成率、任务完成时间、功能使用率 ...

    · 性能：首屏渲染时间、API 请求响应时间、页面请求响应时间 ...

    · 满意度：产品满意度 ...

UES 分为 5 个模块，这 5 项是整个产品生命周期需要验证的。

关于 UES 我就介绍到这里吧，UES 模型要是展开讲的话，半天都讲不完，感兴趣的话可以去阿里云官方发布的 UES 模型的相关资料中深度研究一下，看看适不适合自己的产品。

上面是度量产品的模型，接下来针对我们 B 端设计师，我们也要有一些指标来度量自己是否合格。

3.1  设计效率

现在内卷盛行的时代，各大厂都在讲人效，毕竟时间才是最珍贵的，所以现在都在想方设法的提高人效。而且 B 端相对 C 端来说，可以有更多自动化的工具。

举个我公司的例子，我刚去的时候基本没有自动化工具，每个设计师每天也都在忙碌，谁也没偷懒闲着。但是我发现有很多重复性的体力劳动是不需要多少思考就能完成的，但是却耗费了将近 1/3 的时间。所以我就在想如何提高人效，把一些体力劳动用一些工具来代替，这样就能释放设计资产，去做更重要的事情。

当时就做了第一个自动化的工具：设计系统，现在大家对这个词应该不陌生，但是我们刚开始做的时候比较早，还没有一些比较完善的设计系统供我们参考，所以我们也算是前几批摸索设计系统的团队。设计系统做好后是可以把这1/3 的设计时间节省了下来，而且团队的规范性更加统一。

后面的话我们也是做了一些其他的自动化工具，比如结合一些插件做到 icon、组件等发布的自动化，并且与研发同学打通，有相应的自动化提醒工具，这样也节省了与研发的沟通成本。

在工作中，流程上能减少一步就是成功，慢慢来，万里长征就是一步一步走出来的。

3.2  增长设计

增长这个词来源于【增长黑客】这本书，顾名思义这个词的就是通过设计来促进产品增长。

这个词用在 C 端上比较多，因为 C 端可验证的方法比较多，见效快，所以我们常见的一些增长设计的案例都是关于 C 端的，而 B 端的话，受限制的因素较多，设计只是影响增长的一部分，而且见效慢。

但是虽说影响因素多、见效慢，我们还是可以抓住机会、多去尝试一些方法来做到设计增长。我这个方法不行，我就换一种尝试。大家都是在摸索中过河~

3.3  为业务赋能

所有的设计都是要为业务赋能、为商业买单。我们设计的本质就是为用户解决问题，让用户以最直观的方式理解产品。不要为了所谓“我认为很美”而与业务背道而驰。

3.4  体验创新

用户体验设计师会越来越重要，近两年逐步被重视，而且未来几年会越来越重视。行业内需要更多动脑的人而不是仅仅会动手的人。

现在到了互联网下半场，拼的不仅是功能，用户体验的重视程度已经被提升了上来，在工作中的占比也越来越重。

再加上现在这个超级内卷的时代，你不提升，你的竞争对手就把你干掉了。而且你如果只是一成不变的维护老版本，你去下家面试的时候都没有拿得出手的产品。

3.5  善用工具

现在各种办公类工具、软件层出不穷，而且很多工具是比较类似的，有的设计师再选工具的时候就很纠结，我认为完全没必要纠结，首先你要明确我想要达到什么目的，只要某个软件满足着你的需求就可以用。

工具是为人服务的，我们的设计软件从 PS – Sketch – Figma，无论怎么变化总要围绕一个目的：更高效的完成工作。

尤其是一些自动化工具，现在人工智能升级很快，要多关注设计自动化方面的工具，让他来解放我们的双手。

总结

最后送给大家一句话：

这时代唯一不变的，就是变化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Nathan Yau 在《数据之美》中写到，可视化并不仅仅是一种工具，而更像是一种媒介，能最大化帮助我们挖掘数字背后的信息，让数据「开口」讲故事。

可视化设计将信息和数据转化为用户能够理解的图表、图形和地图等元素，通过色彩、样式凸显其中的变化，帮助用户更的获取信息、判断趋势、识别变化等。那么在可视化设计中怎么让用户能更好的看清看懂数据或信息、让用户快速感知数据变化、让数据于用户所处的情境相呼应是微交互思考的方向。

降低理解难度

通过可视化表达，将不易理解的信息呈现的更加清晰明了，帮助用户理解吸收。

1. 支付宝-基金指数

运用一般人对红绿灯的理解，将其绿灯行红灯停的概念，运用在基金投资上，帮助新手能简单理解指数估值的走势，更容易去判断该基金买卖的时机，绿灯为值得购买，红灯为建议卖出。

2. 支付宝-基金收益

欲购买基金时，透过尺标的形式选择购买金额，同时下方展示购买该金额的预期收益，并用实际生活中的物品举例，帮助用户理解获益的金额价值。

3. 手机淘宝-金币小镇

做任务签到获取能量，使用进度条的形式，来表达能量与金币值转换的关系，如当前获取多少的能量，能兑换成多少金币。

让用户感知变化

可视化中的变化凸显能帮助用户快速达成目标，在最少的时间内获取更多的信息，并引导用户进行更深层次的探究。可视化中的变化凸显能帮助用户快速达成目标，在最少的时间内获取更多的信息，并引导用户进行更深层次的探究。

1. AirVisual-空气质量指标

依据颜色与人脸图形表达空气质量程度，颜色从绿黄橙红紫暗紫色，人脸图形从开心、难过的表情、戴口罩到戴防毒面具等，来表达空气质量从好到坏，让用户能直接看到颜色与图形就能感知到当前情况，且知道对应的防范方式。

2. 我的天气-3D地图

日出日落的时间以动态的地球展示，地球滑动操作，让用户能实际感知到地球的光照情况。

3. 腾讯手机管家-充电状态

手机充电时，以整个屏幕作为充电量的比例展示，以虚拟鸭子游水的有趣形象，透过水位的高低表达当前已经充电到达的数值。

呼应用户所在情景

在可视化中增加与用户情境相关的元素，能够让用户获得更贴切，更直接的信息感知。

1. 高德-导航

当开车导航的当下，如果车速过快，在屏幕的双侧会显示红色的超速效果提示，比起左上角的车速展示，能更直接快速的感知到已经超速了。

2. 高德-用时预估

查看行程导航的预估用时，运用柱状图直观展示不同出发时间到达目的地的所需时间，滑动时有震动的切换效果，同时上方地图会显示该时段路途上的拥堵情况，显示预计到达时间。

提升数据操控感

提供足够便捷的筛选或操控组件，方便用户查看更多视图空间，快速定位想要的内容。

1. 携程-机票票价对比

运用柱状图展示不同日期的机票票价，能直观看出价格间的差异，点击后，可切换到该日期，查看具体航班资讯。

2. 携程-机票低价提醒

机票的价格是浮动的，可透过低价提醒的设置，主动提示用户票价已到达该预期价位，设置时如果价格设置的过低，到达的可能性越低，因此以价格滑动条操作，并以绿橙红表达成功率的高低做提示。

文章来源：优设   作者：AlibabaDesign

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。所以数据可视化设计，绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求，如果不了解数据可视化设计，肯定是一头雾水，不知从何入手。本文结合最近设计案例，分享大屏可视化设计过程中遇到的一些问题以及设计思路，供大家一起交流与学习。

△ 最终动态效果图

案例分解

首先放的是项目改版前的页面：

1. 需求介绍

某某应用云，分为五大云平台模块：云端综合调度、数据查询通道、数据应用处理、数据存储管理、管理运行维护。每个大模块下⾯有若干个子系统。

可视化⼤屏首页需要展示的内容包括：

• 全局数据：云平台的数据总量，以及 4 个重要关注数据项，2 个次要关注数据项；
• 云平台的五⼤大模块：云端综合调度、数据查询通道、数据应用处理理、数据存储管理、管理运行维护（只有两个 tab 切换链接）；
• 搜索功能：搜索类型分为 6 个，默认选中「综合」类型进行搜索；
• 重点关注数据信息按指标分多维度展示：原始图上的维度包括指标、地图、地域排名、部⻔排名、类别；
• 云导航：展示场景在公司展厅，材质为 Led 拼接屏，设计尺寸为 1920×1080。

2. 需求分析

分析大屏可视化的一些共性：

• 屏幕大：大屏一般都是多屏拼接，整体屏幕面积大。
• 观距远：用户需要远处观看屏幕，要保证数据文字清晰可见。
• 交互弱：通过电脑已经无法满足大屏交互需求，现在也有部分开始采用 ipad、手机、激光笔等方式。
• 视觉强：背景色多采用重色，衬托凸显数据，更好地为观者传达数据信息。
• 一屏一内容：一屏内容，说明一件主要事情，统计好它的相关数据，避免其他的干扰。

结合大屏的一些共性特点针对看到的线上旧版本设计，分析存在的问题。

• 布局混乱，导致视觉不平衡，看不出页面层次。
• 蓝色为主色调，黄色点缀颜色显得比较单一没有规则。
• 图表比较单一，不能有效传达数据信息。

3. 布局

整合数据，分析出主要数据、次要数据、总量数据、细分数据、各数据的维度等等。首先优化页面布局，可以先在纸上画一画，然后脑子里有大概思路以后再用电脑绘制，如下图：

采用栅格化对称布局，让整体视觉左右平衡。

4. 风格

一提到数据可视化大家往往能想到科技、数据、蓝色等一些普遍关键词。

了解到客户是想做一个科技感强、炫酷的视觉效果。可以在网上找一些效果图或是自己曾经做过的案例供客户选择，确定一个大致的风格，然后结合具体的业务场景进行设计。

5. 颜色

颜色上结合产品使用场景，以及整个产品调性还是以蓝色为主，背景选用深色调，让视觉更好聚焦，内容部分采用比较透亮的蓝色系，保证内容与背景有一定的对比关系，便于业务信息传达。

6. 主体地图

地图为大屏的主要展示内容，首先分析展示的目的是为了看清各个城市间的不同分布情况，和城市数据的汇集效果。

如图：

改版前：地图过于单薄，没有立体感，太平缺乏层次，颜色黄色不符合产品调性。

改版后：主色调改为科技蓝，在原有地图上增加外发光和多层阴影叠加，增加地图的立体感，地图上增加科技线条上升的效果代表每个城市数据变化的提升，地图背景采用比较弱化的转动线条圆形，衬托地图主体，使得画面更加丰富。

7. 地图效果的实现方法

首先用 ps 拉框助手新建一个山东的地图（拉框助手的使用获取方法可以参照上篇文章）。

完成后会得到一个叫 map 文件夹的地图分层文件，如图所示。这里需要对每个城市的颜色进行调整，为了区分每个城市之间的数据不同关系。

调整完块之间的颜色后，就需要给地图整体增加立体效果。

首先，是整体给地图加了一个描边和外发光。描边是为了强化地图边缘，外发光是为了地图与背景有一个区分。

其次为了增加地图立体感，需要给地图增加多层阴影叠加的效果。复制现有形状层，拼合成一个山东省的地图，如下图：

最后，把拼合好的图层移动到 map 文件夹下面，阴影可以添加多层，这里针对每一层进行不同颜色大小的调整，就是下面的这种效果了，地图的体积厚度感也就出来了。这里只是提供一个大概的思路，大家可以多去尝试。

整体地图效果调整完成后，就是给地图增加些纹理，和上升线条这些细节上的效果了。纹理可以用图案叠加，或者找一张纹理图剪切蒙版实现，最后再添加上升线条的效果，地图的效果就完成了。

最后加上线条上升的动态效果：

8. 数据图表拆分

在选定数据图表之前，首先要确定图表之间的关系，可以从以下四个维度进行思考分析：

• 联系：数据之间的相关性；
• 分布：指标里的数据主要集中在什么范围、表现出怎样的规律；
• 比较：数据之间存在何种差异、差异主要体现在哪些方面；
• 构成：指标里的数据都由哪几部分组成、每部分占比如何。

可以参照下面这个图：

△ 图片来自于网络，侵删

当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

传统的图表比如 echarts 图表在视觉上展示可能不是很美观好看，可根据选择的图表在其基础之上进行美化设计，总之选定图表最重要的两个点就是：易理解、可实现。

易理解：就是要考虑最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。

可实现：主要是跟开发前期沟通好实现方式，一般都采用开源组件库的居多，比如 echarts 组件库，我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用 Ps/Ai/Ae 这些工具模拟时会发现比较困难。同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计。一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。

案例中在图表选择上，强化科技感元素，条形图打破传统条形图的展示形式，采用电池晶格的展示形式，在保持图表功能的同时更加凸显科技感。

从页面的整体看，已经有两处用到了条形图、柱状图，如果这里还是条形图，那么页面看起来会很单调，图表也没有表现出多样性，所以现在设计要体现图表的多样性也能够有排名的直观呈现。以下图表采用科技圆盘的形式，运用科技线条的上升状态代表排名的先后顺序，所有图表都采用数据降序来展示排名更加直观。

改版前的图标样式比较单一，改版后针对每组数据不同的对比形式，采用比较贴合的图表进行展示，篇幅原因就不一一做展示了。

附上最终视觉效果图：

总结

大屏设计需要注意的点：

• 需求分析：对需求进行梳理，分清数据间的主次关系以及对比指标，跟客户沟通清楚细节。
• 确认布局：布局上根据数据主次关系，采用栅格化布局（可以在纸上画一下理清思路）。
• 情绪板定义设计关键词，确定风格。找参考图给客户确认大致的设计方向。
• 颜色贴合业务。
• 图表易理解可实现。

以上是我对数据可视化大屏的案例总结，希望能帮助到你。除此之外还有很多地方没有涉及到，包括具体设计的操作方式、选取图形元素的具体方法，以及在各种大屏中所需要的相对应的组件等，在庞大的可视化大屏设计系统中，还有很多值得学习参考和优化的知识，欢迎沟通交流，大家一起努力。

文章来源：优设   

来越多的企业开始意识到优秀的设计之于数据的重要性。优秀的设计可以让枯燥乏味的数据变得更加直观、友好，从而帮助顾客理解数据的意义，让企业与顾客建立更好的关系，从而更好地发挥作用。