与其他相对成熟的设计领域（UI、插画等）相比，数据可视化尚显小众，在一个细分、小众、不成熟的领域里做设计，「怎么去找灵感」确实是一些小伙伴经常遇到的问题。本文以本人工作经验为基础，系统性分析了该问题及对应的解决方法，并将其整理成文与大家分享，这在数据可视化行业内尚属首次。当然了，本文虽面向数据可视化设计师群体，但其中的方法是通用的，运用在其他设计领域也完全事半功倍。

本文结构概览

本文围绕「搜什么——去哪儿搜——怎么搜——素材的整理——灵感的迭代与更新」 五大板块展开。

灵感库建立的基础

灵感库的建立大体上分主动与被动两种。主动，是我们有意识地收集、整理相关作品素材形成灵感库的过程；被动，指通过朋友圈好友分享、同行推荐等获取灵感的方法。因为后者更不可控，影响因素较多，比如你所处的圈子、社交网络使用习惯等都会影响被动获取的质量。所以今天，我跟大家分享的主要是第一种主动建立灵感库的方法，而这个方法的核心我把它归纳为两个字 ：搜索。

搜索是现在这个时代我们主动获取信息的最主要手段，每天我们通过各类关键词在各类 APP 上获取各样的服务、产品和资源。灵感的主动收集就是一个通过关键词搜索，然后分类、整理、研究、再利用的过程。所以影响灵感收集的主要因素其实就是我们能不能用好搜索。不同的搜索方法、渠道、关键词极大地影响着我们获取到的信息质量，这也是本篇文章为何以搜索核心展开的原因。

如下图所示，同样的关键词在不同的搜索渠道，得到的内容质量是不一样的。

灵感库建立的第一步：搜什么？

互联网很大，如果没有明确的目标，找灵感的过程就跟刷抖音一样，恍恍惚惚几个小时，好像点了不少赞，收藏了不少干货，回头看其实并没有什么特别有价值的东西，所以找灵感要有目标，有 KPI 才行，有目标就有标准，有标准才有方向和效率。

如上图所示，我对数据可视化这个行业术语做了分析和拆解，这样做的目的是为之后搜索关键词的提取做思路的拓展。很多小伙伴在搜索可视化相关内容时，思路总是局限在「可视化」这个关键词上，但是直接使用这个关键词搜索，大多数时候并不能找到我们心理预期的结果，或者搜索多次后，看到的都是之前见过的作品，很难突破边界，获取更多新的灵感。造成的这个结果的原因显而易见，就是关键词的匮乏，不知道搜什么。而对「大屏数据可视化」进行解析之发现，以往的搜索，我们只使用了四个方向里的其中一个，其它三个方向并没有很好的利用。现在，我们以每个方向上的核心关键词为基础，去丰富它的下一级关键词，这样就会像枝芽新生一样，在各个节点延伸出丰富的词汇。

媒介就是指数据可视化设计最终落地在什么平台，一般来讲，大屏数据可视化设计落地的媒介当然就是大屏了，以它为核心做关键词的发散，可以产生其它几个二级关键词。

数据类型是主要数据的特征或来源，不同的数据类型，在可视化设计时有不同的视觉特征。比如地理信息的数据可视化，一般会与道路、河流、人造建筑、某区域内地标等一起出现，会有丰富的 3D 场景、动效，而图表信息相对较少；报表类信息的数据可视化，则主要以更好地展示报表内大量数据为主，所以强调信息的层级、主次，设计的目标是要减少用户认知负担、引起用户阅读兴趣，促进数据内容的有效传达，因而会较少使用动画，其次，因数据较多，也很难对应到某个具体的物理场景，故 3D 模型等也较少使用。

所以以数据类型为核心，拓展的二级关键词会让搜索结果更精准，更有针对性。

设计风格就是视觉设计整体上给人的想象和感受，好的设计就跟一个人一样，一定是有自己鲜明的个性和气质，能够引起人的共鸣和向往，唯有如此，设计才能吸引人，从而影响人，并最终传递自己的观点给观者。所以设计风格的定义是视觉设计中最重要的一环，也是最需要灵感和创造力的部分。

作为数据可视化设计师，我们想要找到的参考是那些具有数据可视化风格的作品，但这些作品本身并不一定是在讲数据可视化的内容，只要作品某部分的设计有我们想要的那种「感觉」，就可以了，而这个作品可能是某段影片、某个动效、某种图形、某个元素或声音。基于这样的思路，我归纳了一些具有数据可视化风格但不一定都是数据可视化作品的关键词。这就是一个特别有意思的点，我们想要找到某个内容，但当我们用最贴切它的那个名字去找时，却不一定能找到最能代表它风格的作品。所以当我们跳出数据可视化这样一个具体的点，而从更抽象的设计风格这个层面去看待它的时候，就能更好地发散思维、拿到了更多好的关键词，找到更多的刺激点。

以设计风格为例，我们从它的节点上找到任意一个关键词：SCI-FI，然后搜索这个关键词，我们看看搜索到的结果。

业务场景简单理解就是在什么情况下要解决什么问题，它是数据可视化的落脚点，也是数据可视化的商业价值所在。每个公司或团队，都会有自己专注的业务方向，所以在工作中找这方面的灵感，从业务场景入手效果最好。

简单回顾下，通过上部分文章的分析，我们从媒介、数据类型、设计风格、业务场景四个方面形成了一个数据可视化的关键词的矩阵。这个矩阵是建立灵感库的基础，之后每当我们有新的关键词要加入，或者有效果不好的关键词需要剔除，只需修改、迭代这个关键词矩阵即可。有了这个关键词矩阵后，我们如何利用它完成一次基于实际需求的灵感搜集？下面给大家举个小例子来看一下怎么用。

一句话描述业务需求

首先用尽可能简短的一句话描述业务方诉求。

一句话描述业务诉求后，我们把业务需求带到关键词矩阵中，就会获得如下图的结果：

可以看到，带入需求后，按树状结构去匹配与需求相吻合的关键词，就可拿到明确的搜索指引目录，然后我们按搜索指引，开始灵感收集即可。

这里有个小小的点，就是为什么要尽可能用简短的一句话来描述业务方诉求，

• 这样做可以把那些优先级低的干扰因素都过滤掉，留下真正核心的诉求，越是能简短的概括，越能真正把握需求的核心。我个人一直以来与业务方沟通需求后，都会尝试用一句话概括，若需求方认可，开始设计工作；不认可，则继续沟通。
• 对于数据可视化设计师来讲，明确自己在工作流中的角色、承担的责任、要解决的问题以及最终交付怎样的产出尤为重要，因为只有清楚了这些，我们才能有效分配自己的时间、确定跟上下游的协作策略，避免盲目地没有 KPI 的设计。

灵感库建立的第二步：去哪儿搜？

合适的关键词是第一步，它保证了我们搜索结果的有效性，而去哪儿搜决定了我们搜索结果的质量。如下图，针对数据可视化设计师，我对「去哪儿搜」这个问题按我自己的从业经验做了梳理。

从我的归纳里大家可以发现，我把数据可视化设计师的灵感来源分为了四大块（其它行业的设计也大体上就这四块），分别是：设计网站、产品或服务提供方、独立设计师或工作室、视频网站。

第一部分：设计网站

设计网站部分列出的都是设计师们都熟悉的几个站点，在之前，大多数灵感的收集都可在花瓣完成，但花瓣最近几次改版之后，已经没有以前那么好用了。对数据可视化方面的素材搜索，个人经验上，强烈推荐大家去 behance，虽然 behance 访问方面也面临一些困难，但是，但凡你想真的了解一些好的设计，这个网站，是你一定要想办法去经常逛逛的。至于为啥不推荐其它几个网站，倒并不是说其它网站不能用，只是搜索的结果相对局限。针对这块的具体分析，我会在文末的 Q&A 里进行。

第二部分：产品或服务提供方

我们知道，任何商业设计，一定是有一个业务或应用场景来支撑的，一定程度上设计就是在围绕业务场景提供视觉、交互、用户体验、品牌等方面的解决方案，也就是说设计是服务于业务场景的，反过来讲，服务于这个业务场景的就只有设计师么？当然不是。在市场条件下，服务的提供方除了像设计师这样的个体外，更多的是我们熟悉的另一个机构（组织），这个组织的名字叫「公司」。公司把大量专业的人员组织在一起，通过优势互补、强力协作，提供服务、解决需求方问题。对于数据可视化设计来讲，企业当然也参与其中。所以我们找灵感去服务提供方也是一个的方法。企业要证明自己的实力、要让潜在客户了解自己，必然会花大量的资源做营销做推广，而最常见的推广的落脚点就是企业官网。很多做数据可视化的公司，会在官网展示一些能体现自己业务特点、业务实力的案例，而这些案例就是这些企业最好的数据可视化设计作品了，没有人会在自己的脸上放垃圾上去，对不？ 所以但凡有案例展示的官网，案例基本都是最典型最好的设计，所以从这些案例中找灵感，也是一个有意思且有效的方法和途径。

△ 阿里DataV

△ Hightopo

△ Tob.Design

第三部分：独立设计师或工作室

独立设计师一般给人的感觉是什么呢？就是在自己垂直的领域内牛逼，近乎神一样的存在。独立设计师要能顺利「独立」，当然是在设计能力、个人品牌建设、客户维护、运营管理等方面都有比较硬核的水准，所以这部分设计师作品一般不会差。而工作室一般都是一个或者几个知名设计师组成的团队，在管理方面更「公司化」一些，这样的工作产出也会比较稳定，水平较高。就可视化（包括类可视化）领域来讲，个人比较认可和喜欢的工作室有以下几个（欢迎大家评论里补充，或参与文末问卷调查），Ta 们的作品风格鲜明，找灵感也是不错的参考

△ dennisschafer

△ huds+guis

以上对于「去哪儿搜」的分析，我相信可以给大家很好的启发：我们设计师寻找好的作品并不一定要通过设计相关网站进行，你看大家都能看到的东西，即使有突破，那也是大家所熟悉的样子，你只有从圈子里跳出去，看 80% 的人看不到的东西，你的灵感才有机会与众不同，标新立异。

灵感库建立的第三步：怎么搜？

前面两部分，我们介绍了搜什么（关键词的定义），去哪儿搜（合适的素材来源），接下来以 behance 为例跟大家聊聊怎么搜，介绍一些具体的方法。我们的目标是尽可能少的点击搜索按钮，且尽可能多的找到符合自己预期的有质量的作品。要做到这点，首先我改掉自己以往的不好的搜索习惯。

我知道很多小伙伴都是输入一个关键词，然后看结果页，没有满意的就换一个关键词继续，这样做很低效，容易漏掉结果页中符合你预期的好作品，并且也容易造成关键词的浪费，通过第一部分关键词矩阵的介绍，大家都知道，关键词是被定位推导而来的，若不停的换关键词，很快就会出现关键词用完了但是依然没有找到好灵感的囧局，所以榨干每一个关键词是搜索的重要手段，具体怎么做到这一点，我个人有以下思路给大家参考：

1. 直搜关键词

快速浏览、标记自己感兴趣的项目，稍后再做整理

通过这个结果页面我们看到，搜索结果包含「所有结果、项目、人物、情绪板」四个选项，默认显示所有结果，但这个意义不大，重点在项目跟情绪板。

项目

切换到项目标签，项目标签下展示的都是完整的项目作品，这是可以快速浏览，看到感兴趣的内容就把它标记到新的页面，等所有浏览查看结束后再细看每个项目，并对项目做进一步的分类和整理。

项目标签下提供的筛选项很实用，分类依据推荐「好评最多+本月」的组合，以月为单位既可选到大家都比较认可的新作品也避免了因数据波动造成部分作品质量差的情况。「已策展」类似站酷或 UI 中国的首页推荐，是被官方编辑认可和推荐的作品，一般都会有很高的质量，但时间上可能会比较久远。

在筛选器里面，有另一个比较实用的功能叫做「按色彩筛选」，如果客户或者业务方对主色调有要求，就可以通过色彩的筛选，找到更符合我们业务需求的相关作品借鉴，或者设计师自己对某类颜色的搭配总是调整不好，也可以通过筛选，看看其它同行是如何处理这类色彩的，这也是一个有针对性训练和学习的方法。

情绪版

情绪版就是花瓣里的画板，它是其 Ta 设计师采集的同类主题的作品合集，用法也跟花瓣一模一样，唯一的不同是花瓣可以采集站外的内容到画板，而behance 只能采集站内的内容，其余两者完全一致。

情绪版默认是按时间的先后顺序排列，所以可以通过筛选项，将排列顺序调整为「关注人数最多」，正常来讲，关注人数越多的情绪版收集的作品质量也越高。

2. 利用作品标签聚合同一主题作品，并集中浏览

我们知道，像站酷、UI 中国等平台，用户上传作品时，都需要给作品添加一些标签，这些标签的作用就是帮助网站做人工的作品分类，我们点击某一标签就能看到使用了同一标签的所有作品，可以说标签是比搜索关键词的内容检索手段。每一个作品下，都显示了作者上传作品时填写的标签，通过点击这些标签我们将搜索结果引入到了另一个更纯粹有效的内容领域。

更有趣的是，标签同样支持项目、情绪版这两个层面的进一步分类，同时也支持之前介绍过得分类筛选功能。也就是说，在最开始搜索时找准一个关键词，之后通过情绪板、作品标签等方式就能关联起来海量的内容。

3. 按图索骥：Ta推荐的作品

通过前两步，我们已找到了一些比较不错的作品，而优秀作品的背后当然是优秀的设计师或团队。所以点进作者的主页看，一般都会有惊喜的。除了能看到作者自己的作品外，我想说的是另一个标签「好评」，好评这个标签其实体现了作者的审美和职业方向，如果作者本人在领域内已经足够专业，那么能被 Ta 欣赏和点赞的作品大概率也不会差，所以好评这个按钮，是借助行业大咖的手帮我们做了一次作品的筛选和收集，点这个标签进去大多数时候是不会让你失望的，一般都惊喜满满。

4. Ta关注的设计师：顺藤摸瓜，串起一个行业的大咖

在今天，每个设计师离自己领域里最顶尖的大咖，只隔着 3.75 个人，通过点击作者的「正在关注」，你可以看到设计师本人还关注了行业里的哪些设计师，通过这样的操作 3 到 4 次，你会发现总有那么几个人，会在这个略显复杂的网络中被不同的大咖同时关注，那么 Ta 就是这个行业里比较顶尖的人才了。

在「正在关注」下面会显示作者所在团队，因为好多项目其实一个人是很难完成的，大都是好几个设计师协作的结果，所以如果你找到的这个设计师作品足够牛逼，那说明他的团队也是很不错的，顺便关注一波就好。

当你习惯这样摸瓜，一段时间后这个行业里几乎的大咖就都在你的关注列表里了，做到这一步后你就会有一个新的收获，这点我们后面再聊。

搜索结果的整理与优化

利用前面的搜索方式，我们已经找到了不少较为满意的作品，接下来我们需要再对这些作品做简单的筛选整理，把真正符合我们需求的作品整理出来。

我习惯用网站自带的收藏功能及部分精品资源本地收藏的方式来整理自己的灵感库。网站的情绪板我把它看作是一个各个终端通用的网盘。behance 提供了两个收藏作品的功能：点赞与保存到情绪版。站酷跟 ui 中国也有同样的功能。

点赞的作品，会统一收集到个人主页「点赞」标签下，所有作品按时间排列，比较乱，所以推荐把喜欢的作品收集到情绪板。建立情绪板可以按类别将作品整理到不同画板，由于情绪板是可以分享和被搜索的，所以使用情绪板整理灵感，不仅方便了自己，也益于同行。目前来看，情绪板在 behance 这个产品中已经跟花瓣中的画板非常像了，不仅可以采集一个完整的作品到情绪板，也可以采集作品中某个单独的图片或视频到情绪板，这样的灵活性跟花瓣完全一致，且 behance 将情绪板被放到了用户非常容易触达的位置，所以在大家的共同努力下，各类情绪板会越来越丰富，这个功能也会更有价值。

资源的自我更新与迭代

1. 资源的自我更新

经常玩抖音的小伙伴都知道，抖音会根据你的点赞、浏览等行为，为你推荐符合个人口味的视频，而这样的推荐功能在 behance 也有，behance 会根据你点赞收藏的作品、你关注的人，给你推荐相应作品，并且推荐作品是直接显示在首页的，每次打开 behance，你都会在网站最直观的位置看到 behance 为你推荐的内容，这里的内容大体上分为两类，一类是你关注的设计师的作品更新，另一部分基于已经关注的作者推荐相似的作品给你，就我个人使用体验来讲，推荐还是相当准确的。

behance 的推荐功能是资源自我更新的一个重要手段，你关注的同一领域作者越多，收藏的作品越多，它的推荐就越准确，这样就节省了一些资源搜索的时间成本。要想获得好的推荐结果，我建议你的 behance 上只关注一个领域的作者和作品，以我自己为例，我只关注数据可视化方向的作者和作品，虽然我也喜欢摄影、插画等，但我主业是数据可视化，所以为了提高首页推荐作品质量，其它两类我会去 500px 等更垂直的网站浏览，而不会在 behance 上关注。当然，网站只是个工具，你也可以有自己的用法，于我而言，我关注的核心是效率。

2. 资源的迭代

如果把我们收藏的内容比作是云盘里的资源，那么资源并不是越多越好，无论哪种类型的内容，当内容很多的时候找起来都会比较麻烦的。我们需要坚持做一些工作来不断减少资源的数量提高资源的质量，少而精是最好的状态，如此我们就不需要花很多时间去找某个内容，而已有的内容又都能很好的满足需求。要做到这点，我们需要给资源做迭代，所谓迭代就是去掉旧的过时的内容，添加新的更好的。每隔一段时间，回来翻一翻自己之前收藏的作品，会发现有些作品自己已经看不上了，因为在做灵感收集的过程中，我们的审美会自然有所提高，当输入的作品样本越来越多，我们对作品评价的维度也会更多，之前那些觉得好的作品，现在看来也就会有缺陷和不满，这是一个很正向的结果，成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品，添加更符合自己当前审美的作品到各个情绪版。

迭代还意味着我们需要对那些情绪版的标签做维护，对那些命名跟内容不大匹配的情绪板，要及时更新更恰当的命名。同时，也要对情绪板内容的类别做维护，比如动画、视频类素材最好不要跟图片类素材放一起，因为列表的封面图并不能体现作品详情里是否包含视频等内容，所以作品很多时找起来就比较麻烦，按内容的不同类型把内容分别收纳进不同的情绪版可以给我们后续的应用节省不少时间。

总结

1. behance在国内访问受限，为何要以它为例做灵感收集的方法介绍？

首先，Behance 国内访问不畅，并不影响它是世界范围最优秀的设计师聚集平台的事实。对于数据可视化而言，并不是一个新兴的领域，在国外早已有之，并且相对成熟，而国内相关作品、经验尚少，所以从获取知识的角度来看，behance 上你能获取到的数据可视化相关作品或内容，不管是数量还是质量上，都要比国内的好。

其次，正如文章刚开始我说的那样，文中介绍的方法对国内的大部分设计网站同样适用，尤其是关键词的定义、标签的使用、收藏及情绪板（画板）的使用技巧。综上，我当然是要介绍「更好」的灵感获取网站给大家，而不是揪着大家熟悉的聊。

2. 我自己也收集研究了不少优秀作品，为何做的时候还是不知道如何下手？

毋庸置疑，优秀的作品建立在良好的审美基础之上，好的作品看多了审美自然会有提升，但审美有了为啥还是做不出符合自己期望的作品来。这块有两个问题，一个是刻意练习的度没到，另一个是不会分析别人好的作品。刻意练习听名字就知道是什么意思，而作品分析就是我们要知道一个作品之所以让人眼前一亮，它「亮」在什么地方，就是要具体到细节，我们越是能够细致的指出那些让你觉得好的点，就越能模仿和借鉴，之后再辅以大量的刻意练习，才会有效果明显的提升。

文章来源：优设

本文的英文原标题是「10 Rules of Dashboard Design」，其中 Dashboard 如果翻译成仪表盘的话，总觉得不大容易理解，所以我在这里把它翻译为数据可视化。数据展示方面的设计，相信大家会经常用到，这篇文章有很多简单直接，立马就能用上的干货，一起来学习吧！

为什么数据可视化设计非常重要？

数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。

一个优秀的数据可视化界面包含以下几个关键要素：

• 清晰：一个好的数据可视化界面一定是能够清晰的展现用户所需要的信息。当用户看到界面内容时，应该能在 5 秒内了解到它的用途，而不是花费至少几分钟才能理解各个数据的含义。
• 有意义： 一个有用的数据可视化界面上的每一条信息都应该是有意义的。这些有意义的信息能准确传达设计师想要表达的内容。每一条数据的背后，用户都是可以读懂的。
• 一致性：优秀的数据可视化界面，会有一套非常严谨一致的版面。这里的一致性需要考虑到布局，结构和内容。
• 简单： 复杂的界面违背了数据可视化设计的初衷。如果一个信息呈现不够简单直接，那么肯定是在设计上出现了问题。

如何设计一个数据可视化界面？

数据可视化界面设计最重要的步骤是需要了解目标用户是谁，能为他们提供什么价值。了解目标受众的知识背景和理解水平能帮助你做出对他们有价值的设计。

在了解目标用户时，有必要了解受众感兴趣的数据类型。

「专注于用户的需求，更容易产生他们喜欢使用的结果。」

目标用户级别可能会在一级和另一级之间变化，这是一个挑战性的点。与其他任何设计项目一样，可以细分受众并将信息相应地分为基本内容和高级内容。

在界面中表示一组信息有多种方法，选择正确的数据指标是设计数据可视化的另一个关键元素。这也与目标用户的偏好有关，即他们希望看到什么样的信息。

「根据需要设计数据可视化界面，为不同的业务使用不同类型的展示方式。」

下面是为目标用户设计数据可视化界面时需要考虑的一些重要规则。

1. 区分层级

一个常见的错误就是设计师没有对信息区分层级，所有的内容看起来都一样重要。

可以尝试使用组件的大小和位置来区分数据的层次结构。

• 通过定义信息层级，让用户清楚什么是最重要的
• 在左上角显示更重要的信息，沿着对角线方向，信息的重要程度应该依次减弱，右下角的信息重要性最弱
• 还可以将信息划分为不同类别，并在不同的视图中显示它们

2. 简单易懂

数据可视化的真正目的是用一种更方便理解，更简单的形式来传达复杂信息。

• 不要放一些大多数用户都难以理解的信息
• 使用更少的列来显示信息
• 删除冗余内容来减少混乱

3. 一致性

使用一致性布局设计的数据可视化界面看起来更好。

• 为了使界面更容易阅读，可以在信息组之间使用类似的可视化效果。
• 把相关的信息放的更近一些
• 对相关内容进行可视化分组

4. 临近原则

在界面中把相近的信息放在一起可以帮助用户快速理解。

• 把相关的信息放的更近一些
• 不要将相关信息分散在界面上
• 对相关内容进行可视化分组

想更深入了解接近原则，看这篇：

5. 对齐

可视化组件元素需要在视觉上对齐，并保持视觉平衡。

• 将可视化组件元素在视觉上进行对齐，可以将界面组织的更好
• 尝试将组件元素进行网格布局设计
• 不对齐的界面会给用户带来糟糕的体验

6. 留白

留白是为了让界面有呼吸感，它使得用户在使用你的界面时能够有喘息的空间。

• 当用户查看需要的信息时，界面中的留白能够吸引用户的目光，提升用户体验。
• 减少留白会使用户的界面变得混乱
• 使用留白能对信息进行可视化分组

△ 留白太少简直就是在鼓励你的用户尽快离开

7. 颜色

使用有效的配色方案来吸引用户的注意力，帮助他们轻松地浏览信息。

• 仔细选择颜色，目标是使内容易于阅读
• 使用大对比度来显示背景上的视觉元素

△ 避免使用低对比度和低效的渐变

8. 字体

标准字体是可视化界面中的最佳字体，除非有特别的理由，一般不要用其他字体。

• 使用标准字体，因为它们更容易阅读和扫描
• 特别和美术字体可能看起来不错，但很难理解
• 避免所有的大写字母文字，因为它很难阅读，人类的大脑需要时间来消化它。
• 使用合适的字体大小和风格，有效地传达信息

△ 不要使用影响可读性的字体

9. 数字排版

显示精度超过要求的数字使它们难以阅读和理解。

• 必要时使用整数，因为长数字会使用户混淆
• 省去不必要的信息
• 让用户能够容易地比较简单的差异细节

10. 标签

使用能够快速有效地向用户传达所需信息的标签。

• 避免使用带旋转的标签，因为很难阅读
• 尽可能的使用标准的缩写

△ 避免旋转标签

总结

数据可视化旨在节省时间和精力，将复杂和抽象的数据以更简单的形式表示，目的是以用户能够理解的方式将关键信息传达给他们，确保自己理解用户所需，并给他们需要的信息。

文章来源：优设

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

电视 UI 算得上是一个偏冷门的界面设计，因为它的交互比较特殊，同时有一些限制，比如交互限制，焦点原则等等。以下就自己的项目经验为电视 UI 设计原则做一个总结。

智能电视的特性

对于现在家庭智能电视而言，技术在不断的进步，但是其饱和度和对比度有的还是很强，还会遇到大红碰到大紫的色块对比。但是信息变得简约了，都是以 tab 导航为主，下面是几个卡片信息瀑布流显示。语音提示很重要，会随着焦点的移动发出提示声响，提示用户电视焦点的移动状态。

小米电视商城全新改版，在接到需求后，一定要模拟用户来体验一下购物流程还有用电视购物的环境，环境应该是固定的，那就是在家里。电视和手机购物体验是不一样的，电视是要用遥控器来控制，所以每一步的操作流程都很珍贵，如果界面跳转太多，会给用户一种烦躁的感觉，所以尽量同一层级的信息要在同一界面填写完毕，避免二次跳转。

第二点说的就是焦点问题，焦点不能层次不齐，跳动太大会引起视觉不适。以小米电视商城详情为例，焦点尽量在同一水平线上，同行的焦点移动，视觉感受上会舒服很多。

设计尺寸

智能电视的分辨率和大家平常在 app 看电影的时候差不多，如上图所示，目前 1080p 最常见，2k 和 4k 基本都是资源类节目。设计尺寸以小米电视为例，通常做 1920*1080 的视觉稿就可以了，开发会适配比 1920*1080 小的电视屏幕，这样下来，如果小分辨率的电视没问题了，大的分辨率也就没问题了。

我们知道在设计 app 的时候，都有左右间距的控制，移动端一般常见的控制在 28px 或者 32px，电视端因为是大屏设计，所以预留的空间也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我设计的时候左右是固定的 120px，上面可以随设计内容来自定义，90px 或者 100px，都是可以的，只要视觉舒服即可。

焦点在电视端 UI 设计里显得尤为重要，因为它就是你的视觉焦点，焦点会随着遥控器上下左右确认而改变。焦点的设计不能是扁平的，因为那样不能够提醒用户焦点状态的位置，焦点的设计应该是放大的、夸张的、可以带边框，也可以使用投影外发光的方式来设计，确保能够给用户足够的清晰位置。

焦点放大我这里建议放大 1.1 倍或者 1.2 倍就可以了，再大就显得过于大了。

交互设计

如上图所示，我在设计焦点的时候，就用了放大+外边框的形式，这样焦点移动起来可以让用户足够看到位置所在。电视端的交互也是很简单的，基本属于十字交互，即自上而下，从左到右的交互方式。红色剪头属于禁区，所有的电视交互，没有斜 45 度的交互，这样是错误的。

大家可以看到，在 app 里，常见的弹窗和浮窗可以压盖在可点击功能上，比如美团的红包，爱奇艺的一键关注，即使是这样，也不会影响功能的正常使用。但是电视端的设计，如果两个可点击功能压盖在一起，焦点是无法获取的，因为它没法判断你想要选的那个功能，所以在电视上，一定要将两个功能分开来布局最为合适。

露出屏外的内容，和移动端设计是一样的。如果有多个卡片内容，我们需要将露出屏外的那张卡片做一些边界化处理，控制好间距，也就是说我们要将一个完整的卡片漏出来一些，让用户知道，后面还有内容；反之，用户可能不知道后面还有内容，就不会按遥控器右键查看了。

电视端 UI 设计忌讳控件隐藏，比如上图，如果有很多文字的时候，左边的设计是错误的，因为隐藏了 button 按钮。改为右边的设计是比较好的，我们可以选择焦点选中文字给一个弹窗状态或者其它，将 button 功能位露出来，如果一个界面可选功能位较少，我们设计的时候尽量在第一屏展示。如果实在不行，可以选择吸底吸边来设计。

视觉设计

颜色的选择运用是重中之重，因为这个会直接影响到用户的视觉体验。因为用户环境大多数是晚上的时候回去看电视，分开灯和关灯的情况，开灯的情况其实还好。如果关灯，颜色太刺眼的话，饱和度较高的颜色会直接影响到眼睛，这个危害是很大的，而且不一样颜色的色块，会增加用户的视觉负担，这样就得不偿失了。所以我们要避免大面积的使用单一纯色或者渐变色。

电视 UI 设计中，白色谨慎使用。因为白色过多实在是太刺眼了，我们可以选中较为灰一些的接近白色的颜色来代替。

背景的运用这里也建议使用深色的背景，原因和上述讲的一样，还有一个就是深色背景可以更好地衬托出界面的主要内容。反之如果用浅色的背景，有的卡片如果需求方要求设计成浅色，那么这样浅色的背景+浅色的卡片叠在一起，主要内容就特别难区分了。

我们在设计电视端 UI 的时候，要真实的先去体验一下特殊的场景，电视端每个 tab 是一个频道，每个频道的设计风格也是不同的，比如少儿频道，购物频道和电影电视剧频道，设计风格肯定不同，体验模拟流程可以让我们更快地了解电视特性。

字体的选择默认思源黑体，因为这个字体是开源字体，可以免费使用，没有版权之分，以上列入的字体是小米电视商城改版的字号，具体的字体和间距可以根据自己的设计需求变化。

关于字体的选择，当然你也可以选用其它字体，或者一些特殊字体，好看的字体，但是这样的话，字体包应该会很大，会影响一些加载速度。

字体颜色的选择尽量用白色或者亮色，深色背景上选用白色是最好的，这样更易于阅读。

字体的粗细大小，这里标题建议加粗选择，其余选择常规字体就好，避免太粗或者太细的字体。

更好的智能家居体验

电视的设计只是其中的一部分，未来我们的电视可能比现在的体验更加好，比如会出现实景商城，单一的图片形式已经不能满足我们对购物的需求，一些视频类，动效类的体验会更加合适。想让电视拥有好的体验并不是一件简单的事情，想必大家已经从诸多「电视盒子」上体验到了这一点。我们曾经熟悉的电视已经发生改变，而我们适应的手机、平板和电脑和新的电视还有着巨大的差别，我们需要忘掉之前熟悉的模式，未来五年、十年、甚至更久。电视、电灯、冰箱洗衣机等智能家具的体验，正是我们设计师需要在未来几年所做的事情，这很重要。

小米电视商城全新改版是我接触的第一个电视端 UI 设计项目，第一期的优化还有很多不足，根据项目经验总结了上面的规范。以上的基本设计规范掌握后，那么做电视 UI 基本问题不大，大的错误肯定不会有了，但是每个公司的设计规范肯定也有所差别。电视端的设计是个偏冷门的 UI 设计，多掌握一些另类项目经验也是设计师必备的技能。

文章来源：优设网

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

写在前面

2019年6月18日Material Design更新了设计指南中数据可视化部分，这是谷歌数据可视化团队形成的一套全面的数据可视化指南， 涵盖了设计原则、图表分类、图表的选用、样式设计、交互设计、仪表板设计等方面。个人阅读后进行了翻译，希望能够分享给更多对数据可视化有兴趣的设计同学！

全文章节目录：

原则

类型

选择图表

样式

行为

仪表板

数据可视化

数据可视化就是用图形描绘信息。

原则

数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。

数据可视化可以表达不同类型和规模的数据，包括从几个数据点到有大量变量的数据集。

类型

数据可视化可以以不同的形式表达。图表是表达数据的常用方式，因为它们能够展示和对比多种不同的数据。

图表类型的选择主要取决于两点：要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。

图表类型

1. 随时间变化

随时间变化的图表显示一段时间的数据，例如多个类别之间的趋势或比较。

常见用例包括：

股价表现、卫生统计、年表

2. 类别比较

类别比较图表是多个不同类别数据之间的比较。

常见用例包括：

不同国家的收入、热门场地时间、团队分配

3. 排名

排名图表显示项目在有序列表中的位置。

常见用例包括：

选举结果、性能统计

4. 占比

占比类图表显示了局部与整体的关系。

常见用例包括：

产品类别的综合收入、预算

5. 关联

关联类图表显示两个或以上变量之间的关系。

常见用例包括：

收入和预期寿命

6. 分布

分布类图表显示每个值在数据集中出现的频率。

常见用例包括：

人口分布、收入分布

7. 流程

流程类图表显示了多个状态之间的数据移动。

常见用例包括：

资金转移、投票计数和选举结果

8. 关系

关系图表显示多个项目之间的关系。

常见用例包括：

社交网络、词图

选择图表

面对多种类型的图表，以下指南提供了关于如何选择合适的图表见解。

显示随时间的变化

可以使用时间序列图表来表示随时间的变化，就是按时间顺序表示数据点的图表。表示随时间变化的图表包括：折线图，柱状图（条形图）和面积图。

*基线值是y轴上的起始值。

柱状图（条形图）和饼图

柱状图（条形图）和饼图都可用于显示比例，表示部分与总体的对比。

· 柱状图（条形图）使用共同的基线，通过条形长度表示数量

· 饼图使用圆的圆弧或角度表示整体的一部分

柱状图（条形图），折线图和堆叠面积图在显示随时间的变化方面比饼图更有效地。由于这三个图表都是使用相同的基线，因此可以更轻松地根据条形长度比较值的差异。

面积图

面积图有多种类型，包括堆叠面积图和层叠面积图：

· 堆叠面积图显示多个时间序列（在同一时间段内）堆叠在一起

· 层叠面积图显示多个时间序列（在同一时间段内）重叠在一起

层叠面积图建议不要使用超过两个时间序列，因为这样做会使数据模糊不清。取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。

样式

数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。

图表可以从以下方面进行优化：

· 图形元素

· 文字排版

· 图标

· 轴和标签

· 图例和注释

不同类型数据的样式设计

可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味或表达式）。

这些图形属性包括：

· 形状

· 颜色

· 大小

· 面积

· 体积

· 长度

· 角度

· 位置

· 方向

· 密度

不同属性的表现

多个视觉处理方法可以综合应用于数据点的多个方面。例如，在条形图中，条形颜色可以表示类别，而条形长度可以表示值（如人口数量）。

形状可用于表示定性数据。在此图表中，每个类别由特定形状（圆形，正方形和三角形）表示，这样可以在一张图表中轻松实现特定范围的比较，同时也可以进行类别之间比较。

1. 形状

图表可以运用形状，以多种方式展示数据。形状的设计可以是有趣的、曲线的，或者和高保真的等等。

形状程度

图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状（在触摸大小和功能可见性方面）展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

2. 颜色

颜色可用于以四种主要方式区分图表数据：

· 区分类别

· 表示数量

· 突出特定数据

· 表示含义

颜色区分类别

例：圆环图中，颜色用于表示类别。

颜色表示数量

例：地图中，颜色用于表示数据值。

颜色突出数据

例：散点图中，颜色用于突出特定数据。

重点区域

在不滥用的情况下，颜色可以突出焦点区域。不建议大量使用高亮颜色，因为它们会分散用户注意力，影响用户的专注力。

颜色表示含义

无障碍

为了适应看不到颜色差异的用户，您可以使用其他方法来强调数据，例如高对比度着色，形状或纹理。

将文本标签应用于数据还有助于说明其含义，同时消除对图例的需求。

3. 线

图表中的线可以表示数据的特性，例如层次结构，突出和比较。线条可以有多种不同的样式，例如点划线或不同的不透明度。

线可以应用于特定元素，包括：

· 注释

· 预测元素

· 比较工具

· 可靠区间

· 异常

4. 文字排版

文本可用于不同的图表元素，包括：

· 图表标题

· 数据标签

· 轴标签

· 图例

图表标题通常是具有最高层次结构的文本，轴标签和图例具有级别的层次结构。

字重

标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制，使用有限的字体样式。

5. 图标

图标可以表示图表中不同类型的数据，并提高图表的整体可用性。

图标可用于：

· 分类数据：用于区分组或类别

· UI控件和操作：例如筛选，缩放，保存和下载

· 状态：例如错误，空状态，完成状态和危险

在图表中使用图标时，建议使用通用可识别符号，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。

6. 坐标轴

一个或多个坐标轴显示数据的比例和范围。例如，折线图沿水平和垂直坐标轴显示一系列值。

柱状图（条形图）基线

柱状图（条形图）应从为零的基线（y轴上的起始值）开始。从不为零的基线开始可能导致数据被错误地理解。

坐标轴标签

标签的设计应体现图表中最重要的数据。应根据需要使用标签，并在UI中保持一致性。他们的出现不应该妨碍查看图表。

文字方向

为便于阅读，文本标签应水平放置在图表上。

文字标签不应该：

· 旋转

· 垂直堆叠

7. 图例和注释

图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和任何值得注意的内容。

1. 注释

2. 图例

在PC端，建议在图表下方放置图例。在移动端，将图例放在图表上方，以便在交互过程中保持可见。

标签和图例

在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。

8. 小显示屏

可穿戴设备（或其他小屏幕）上显示的图表应该是移动端或PC端图表的简化版本。

行为

图表具有交互模式，使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。

以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：

渐进式披露

提供了按需求逐步展示详细信息的明确途径。

直接操作

允许用户直接对UI元素进行操作，最大限度地减少屏幕上所需的操作数量，包括：缩放和平移，分页和数据控件。

改变视角

使一种设计可以适用于不同的用户和数据类型，例如数据控件和动效。

1. 渐进式披露

使用渐进式披露显示图表详细信息，允许用户根据需要查看特定数据点。

2. 缩放和平移

缩放和平移是常用的图表交互，会影响用户对图表数据深入的研究和探索。

缩放

缩放改变界面显示的远近。设备类型决定了如何执行缩放。

· 在PC端，通过单击、拖动或滚动进行缩放

· 在移动端，通过捏合进行缩放

当缩放不是主要操作时，可以通过单击和拖动（在PC端）或双击（在移动端）来实现。

平移

平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如，如果图表的一个维度比另一个维度更重要，则平移的方向可以仅限于该维度。

· 平移通常与缩放功能同时使用。

· 在移动端，平移通常通过手势实现，例如单指滑动。

3. 分页

在移动端，分页是一种常见模式，让用户通过向右或向左滑动来查看上一个或下一个图表。

在移动端，用户可以向右滑动以查看前一天。

4. 数据控制

可以使用切换控件，选项卡和下拉菜单筛选或改变数据。

用户调节控件时，这些控件还可以显示指标。

切换控件，选项卡和下拉菜单可以更改或筛选数据。

5. 动效

动效可以强化数据之间的联系，提升交互体验。应该有目的地使用运动（不是装饰性地），表达不同状态和空间之间的联系。

运动应该是合理，平稳，反应灵敏，不会妨碍用户的使用。

在此示例中，图表数据从按天显示动态切换到按周显示。转换期间不会显示所选日期范围之外的数据，从而降低了复杂性。

动画能够体现两个不同图表的相关性。

6. 空状态

图表数据为空的情况下，可以提供相关数据的预期。

在合适的情况下，可以展示角色动画创造愉悦和鼓励。

有特色的动画提升了空状态的效果。

仪表板

在称为仪表板的UI界面中，数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。

仪表板设计

仪表板的目的应在其布局，样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据，它的设计应该适合它的使用方式。

仪表板应该：

· 突出最重要信息（使用布局）

· 根据信息层级确定信息的焦点（使用颜色，位置，大小和视觉权重）

应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板，考虑了以下用户问题：

1. 需要注意的问题
2. 发生问题的时间

3.发生问题的位置

4.受问题影响的其他变量

1. 分析类仪表板

分析仪类表板让用户能够研究多组数据并发现趋势。通常，这些仪表板包含能够深入洞察数据的复杂图表。

用例包括：

· 随时间变化的突出趋势

· 回答“为什么”和“假设”的问题

· 预测

· 创建有深度的报告

分析类仪表板示例：

· 跟踪广告活动的收效

· 跟踪产品在其整个生命周期中的销售额和收入

· 随时间变化的城市人口趋势

· 跟踪随时间变化气候数据

分析类仪表板显示气候数据

2. 操作类仪表板

操作类仪表板旨在回答一组预设的问题。它们通常用于完成与监控相关的任务。

在大多数情况下，这些类型的仪表板具有一系列关于当前信息的简单图表。

用例包括：

· 跟踪目标的当前进度

· 实时跟踪系统性能

操作类仪表板示例：

· 跟踪呼叫中心的活动，例如呼叫音量，等待时间，呼叫长度或呼叫类型

· 监控在云端应用程序的运行状况

· 显示股市情况

· 监控赛车上的遥测数据

操作类仪表板显示设备存储指标

3. 演示类仪表板

演示类仪表板是为感兴趣的主题提供的展示视图。

这些仪表板通常包括一些小图表或数据卡片，用动态标题描述每个图表的趋势和见解。

用例包括：

· 提供关键绩效指标的总览

· 创建高级执行情况的概要

演示类仪表板示例：

· 提供投资账户绩效的总览

· 提供产品销售和市场份额数据的概要

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

「元辰」数据概念控制中心，基于真实的使用场景和概念的表现手法，打造的企业及个人后台数据管理系统。

主要分为首页概览、作品编辑、信息收集、数据统计和常规配置等，简单的动效使操作回馈有了更好的交互体验，且真实可依。

-

「元辰」注重真实的数据体验，致力把数据信息通过大屏实时简洁、有效的传达给使用者。针对精准用户“迅速获取信息、简化操作流程、减少学习成本”，我们将这些问题作为传达的核心要素，一直贯穿始终。

-

欢迎沟通探讨、合作交流。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前言 

注解：

新闻的标题跟转发数才是观者关注的，而来源和时间就是次要关注信息，所以视觉上要为观者分出层级，这样不仅能够使观者看着更舒适，视觉上也很有层次，不杂乱。

旧版标题、来源、时间、转发数、都是相对于内容居中的状态，这种排版是不符合表格排版规则的，简单的做法就是文字左对齐，数字右对齐，数字右对齐能够更快速识别数据量大小，跟其他数据的对比，文字左对齐则是根据人从左到右的阅读习惯。

之前专门总结过一篇数据表格如何排版的文章，想了解的朋友，文章下面有数据可视化系列文章链接。

注解：

设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架，例如要遵循先总后分，先具体后抽象的逻辑，上图旧版把趋势放到了页面的第一视觉位置，就有点宣兵夺主了，根据先具体后抽象，改版后具体数据放到第一视觉位置，趋势信息排后。

旧版大屏没有标题，我是谁？我在干什么？我要去哪里？所以标题务必得有。

总结：

说了这么多设计要点，新手可能还是不知道设计的切入点在哪里，所以总结一个数据可视化设计分三步走法。

第一步：了解数据要表达的本质。

拿到一组数据，先分析主次，这组数据要表达什么？是展示数据，还是对比数据，或是实时监控数据，从而确定展示的优先级。

第二步：确定使用图表。

通过了解数据要表达的本质后，选择适合他的图表，这时候就需要打开几个开源的图表网站找图表，记住你的图表用的是网站的哪一个，开发如果找不到就丢给他网址。

网站有：Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts

第三步：整体效果调整

功能性的数据展示都没问题，还要看下整体效果，例如用了过于多的柱状图，可能就会影响了整体的美感，图表尽可能多样性，数据表达信息就要用不同的图表展示。

 最后 

数据可视化设计核心就是，通过美学设计形式把数据精准和的分析和表达。

数据可视化设计是目前较为热门的设计工种，通过本文分享的项目迭代案例，希望能够让你对数据可视化有些许了解。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

（编者注：由于本文动图太大，将近100M，为了不影响移动端读者的阅读体验，本文图片都是静态截图，动图文章链接戳：https://docs.qq.com/doc）

一、项目背景

在过去一年中，潘洛斯（Penrose）团队参与了「灵鲲」态势感知系统、「麒麟」系统、「鹰眼」反电话诈骗系统等14个大数据可视化产品的设计。随着产品不断的探索和迭代，积累了一些行之有效的大数据可视化设计的心得和方法。基于「灵鲲」这个案例，分享一下我们在大数据可视化方向的设计和思考，希望能够给对大数据可视化感兴趣的同学提供一些思路。

「灵鲲」是 MIG 安全云部门与潘洛斯（Penrose）团队合作的，基于潘洛斯大数据可视化引擎衍生出的一款金融风险监控可视化产品。应北京与深圳金融办的需求，搭建灵鲲金融风险态势感知系统，实现事中风险控制，减少网络欺诈损失。

着手设计之前，我们需要了解：大数据市场规模和各行业投入有多大， 政企客户的大数据可视化产品的痛点是什么？对比深耕多年的竞品，我们设计的突破口在哪？——挖掘我们的机遇和发力点。

二、我们的客户，目标群体

数据显示，2017年中国大数据产业规模为4700亿元。随着一系列政策的出台，大数据国家战略正在加速落地，大数据行业将持续增长，预计2018年中国大数据产业规模将达到6200亿元，增幅达32%。需求层面，预计2020年大数据应用市场需求中，仅政府需求就占比35%，另外包括医疗、交通、金融等多个行业在大数据和信息化建设投入也将持续增加。

除了旺盛的需求以外，我们还注意到很多政企内部数据基础很好，以宜昌为例，宜昌智慧办汇集了来自32个部门、60个系统的大量详尽的实施城市数据。与这些政企单位合作，易形成行业灯塔，便于规模复制。另外，针对大数据可视化，目前政企已不满足于「面子工程」，更多的希望大数据可视化与 AI 结合，呈现更复杂多样的数据，以辅助决策。

基于以上的市场潜在规模的考察和典型客户研究，在进行「灵鲲」产品能力规划时，我们主要考虑以下三类使用场景： 政府机构决策、展会展台及参观视察。

在金融局等相关政府机构的日常工作中，决策层和相关工作人员会基于实时金融平台数据，针对日常事务或紧急事件进行决策管理，监控大厅也就应运而生。基于这种工作方式，我们可以发现潘洛斯的产品特性非常契合监控大厅的使用场景。在监控大厅中，用户是通过两种不同的信息界面进行工作的，分别是综合数据可视化大屏（总屏）以及工作人员独立使用的电脑屏幕（分屏）。其中，在总屏上，呈现的内容通常是一些对于决策者来说至关重要的信息：正在发生的事件的状态和可能趋势（发生了什么）、值得注意的风险（需要团队做什么）以及风险的处理进度（团队做的怎么样）；而在分屏上，主要为工作人员提供数据分析及风险事件处理功能，帮助团队对事件迅速作出响应，协作。

不同于工作场景，灵鲲产品在展会中展台的主要受众是参会人士，除了一般民众外，更有价值的观众主要来自于媒体和潜在客户等。所以在这个场景中展示的内容与实际工作中的数据可视化内容有一定的区别，更多的是对产品能力的展示、产品的宣传以及社会价值的呈现。如何直观的呈现产品的能力，并使观众快速获得有价值的信息并留下深刻印象非常重要。这也决定了在这个场景中，用户不仅包括观众，也包括演讲者。我们需要考虑如何通过控制端让讲演者而流畅的完成产品介绍。

在金融局等政府机构，经常会有上级领导视察参观的接待活动。这些来访的贵宾往往希望了解关于机构更全面和具体的信息，包括但不限于工作流程、工作成绩等，所以我们认为这个场景综合了以上两种场景的主要特点。这里的用户包括来访人员，演示人员以及工作人员，展示的内容也往往不局限于金融风险大数据的可视化，还会包括工作方式和流程本身。

三、行业竞品对比，反观自身发力点

通过对阿里 DataV，AntV、360、帆软的大数据可视化产品的体验，我们从产品呈现、产品体验、产品技术、部署方式和商业模式几个维度的横向对比。阿里的技术对可视化效果的局限性很大，优点是产品实现模板化、系统实时可交互，用户可以快速搭建自己的可视化产品；360产品可视化呈现3D化，数据呈现效果和数据感知度较2D更优，但是系统非实时可交互，而且搭建周期长，成本较高；帆软的可视化是传统报表型，可视化效果呈现缺乏竞争力。

经过对比，我们不难发现3D化数据呈现能力和数据感知度是最高的。但是局限于目前的技术，项目成本高、研发周期长、难以满足业务的发展速度。

四、我们的机遇和挑战

基于市场需求和竞品分析，我们从以下三个方面分别分析了产品的机会和突破点：

• 可视化：数据和场景的呈现3D化，满足更多维度的数据呈现，支持云+本地实时大数据呈现能力；
• 产品化：场景、组件、数据、图表全部实现可云端动态更新和配置的模块化，降低维护成本、提高服用率、缩短项目周期，无缝打包接入业务数据，提供丰富可自定义的可扩展接口；
• 大数据+AI：基于公司多领域多业务线的大数据融合以及 AI 能力提供丰富的基于时间、空间、数据的预测预警、统计表达能力。

1. 产品架构规划

基于对灵鲲态势感知系统的使用场景、用户需求以及机会点的考虑，我们规划了未来产品的整体架构，包括大屏端、云端、客户管理端、小屏端以及虚屏端。大屏端基于本地端引擎进行大数据可视化呈现。客户管理端包括报表和配置管理等工具，帮助用户进行分析数据和策略管理。小屏端主要考虑操作控制和移动办公等移动使用场景，提供大屏控制、移动审批、监管、公众号等功能。以上三个端由云端拉取和更新数据。虚屏则提供差异化的大数据可视化体验，如增强现实等新奇有趣的玩法。由于大屏端在我们的规划里是态势感知系统的核心，且落地到合作方的模块，以下分享的内容将主要围绕大屏的内容设计展开，未来如果产品规划中的其他模块陆续上线，我们再做分享。

2. 大屏内容设计

本地端引擎

早期我们设计的「麒麟」系统、「鹰眼」反电话诈骗系统在对外在大屏上展示主要是通过 web 端的方式去实现，虽然适配性尚可，但很多设计效果无法完全还原。我们也尝试性用 webGL 和 three.js 的方式把设计效果再做进一步提升，但迫于研发周期和实际性能的压力，最后也只能作罢。中期我们尝试使用3D工具输出视频的方式做过一些过渡，输出效果是没有问题，但如果在展会上遇到媒体采访，事情就会变得异常尴尬。媒体会询问展示内容的真实性，数据的实效性，甚至采访的时候需要停留在某一个画面，我方参会人员配合起来非常麻烦。后来我们也研究过竞品使用的工具，例如 Ventuz，工具最终输出的效果是不错，但是界面、操作极其复杂，相关教程和素材在网络上极少，授权费用也相当昂贵。最终经过我们内部商讨和研究，也请教了一些 IEG 专家的意见，决定使用游戏引擎作为本地端的显示引擎。

Unity 和 Unreal 我们也纠结过许久，甚至 Unity 上我们也出过可交互的 Demo，但最终选择了 Unreal 的原因主要有以下几个点：

• 基于前面我们提到的产品架构，我们的核心是在大屏，而大屏部署主要依赖 PC 做为计算平台，相较于 Unity，Unreal 在 PC 端的技术积累要更加深厚，实时渲染出来的光影效果和质感表现要更稳定于 Unity 的输出；
• Unreal 自带蓝图-可视化脚本系统，这对于设计团队出身，零代码开发经验的我们来说上手、学习起来更快更方便；
• 线上有大量的视频教程，各种插件和美术素材也比Unity更丰富；
• 有《蝙蝠侠:阿卡姆骑士》、《最终幻想15》和《绝地求生》这些3A沙盘游戏作为先例，Unreal 对于大规模的场景渲染能力是可被预期的，而 Unity 目前还没有可以拿得出手的案例。

色彩基调

为了打造灵鲲产品的可视化，在竞品中脱颖而出，我们从产品功能、用户、愿景三个维度发散，提炼出设计指南的关键词：智能、直观、未来，塑造独特的大数据可视化风格体系。

灵鲲金融态势感知系统内容架构分为数据维度和场景维度，数据是核心，场景是大数据呈现的承载体；场景使用具有金属质感的深青灰，符合理性的、冷静的、智能化产品的个性；数据色彩使用透明、发光、具有未来感的高亮色，和场景形成强对比，使数据更为突显、更具吸引力；为了强化客户对于风险的感知，通过颜色区分数据的风险等级，更直观的传达数据的含义。如：高风险的使用红色，红色让人联想到危险、警报。

呈现方式

在现有的产品和传统认知中，大数据产品内容是各种样式的图形和图表，主要以平面为主。我们从游戏、科幻电影中收集了一轮大数据可视化内容相关的案例，从视觉维度上看，主要有这几个特点：一、具有很强的空间感，支持多种数据同屏呈现，可交叉分析对比，承载性强；二、高精度的模型和材质，丰富的粒子、动效，更加贴近现实的光影呈现；三、互动性强，可交互，实时演算。

从大数据可视化的内容维度上看，梳理的3D架构，主要包括：数据维度>基础建设>交通运输>行政分区>自然条件。

数据维度层是最核心的部分，位于场景上方最突出的位置，能够更清晰的展示风险数据的分布、量级；行政区域和交通层是城市场景最基础的数据维度，方便用户进行区域的数据对比和分析；基础建设层包括城市的建筑、标志性建筑、照明、桥梁、等，还原城市独特风貌；通过突出城市的标志性建筑，强化城市、区域的识别性，辅助数据传达；自然条件层包括地形、河流、植被、展示真实的环境特征，用户更有代入感。

△ 北京场景

△ 鸟瞰视角、漫游视角自由切换，满足全局、街道、建筑的不同颗粒度的数据呈现，方便用户进行纵向的数据对比。

△ 场景整体风格图

数据表现

灵鲲的3D数据样式有柱状图和散点图。如何把司空见惯的数据样式，设计出产品的个性，是我们重点要解决的问题。为了体现大数据的力量感，使用科幻电影中的聚合能量、发光的能量石作为柱状图的主图形；同时把数据采集、融合、分析的过程具象为动态粒子网络，作为辅助图形。数据图形和结构中都融合了品牌 DNA 的三角图形，数据样式更具有品牌的个性。

△ 柱状图

△ 散点图

预见未来的功能创新

时间线：3D的维度基础上，我们增加了时间的维度，通过拖动时间线查看不同时间点的数据的变化趋势，由此对未来数据进行预测。为了强化用户对于时间感知，设计了白天和晚上两种风格，白天和夜晚随着时间变化而变化。

天气系统：天气是未来数据分析极其重要的一个因子，它会直接影响交通（例如人流、物流、航空）、医疗(例如疾病传播、医院就诊）等领域。所以我们设计了通用的天气系统组件，呈现实时天气情况，以辅助用户进行数据分析。

控制端：符合大屏使用场景和用户操作习惯，同时小屏控制端支持更复杂更精准的操作。

组件库搭建

为了提升产品搭建的效率，降低了研发周期和成本，产品功能模块实现了组件化，分为3D场景组件、3D数据组件、2D数据组件。任何一位设计师都可以根据产品需求，搭配组件模块，快速搭建大数据可视化产品。

数据内容的包装

通过该产品，一方面能够辅助金融局等政府机构领导把控整体金融平台风险、辅助做出平台整改指导决策意见，展示金融工作成绩；另一方面体现出腾讯大数据能力和公司的社会责任；最后，通过从更长远的眼光去包装产品，打造智慧监管标杆产品，从而推动与政府客户更深入广泛的合作。具体内容通过以下两条线进行组织：

横线：各个监管维度

灵鲲金融风险态势感知系统专注于呈现金融风险数据的呈现，主要分为公司层面和用户层面，综合体现潜在的风险趋势和实际影响的范围。除了灵鲲用于监管金融数据，整个监管平台还负责展示包括政治、生态、电信、消费在内的多个监管维度，这些维度与金融监管维度为同一个内容层级。我们考虑到腾讯的大数据能力可以帮助更多城市综合管理者了解整个网络社会的全局性风险，所以每个维度都是智慧监管必不可少的一部分，并且每个维度之间的横向交叉对比能够使智慧监管平台发挥出更大的社会价值。

纵线：监管颗粒度

灵鲲系统中观众可以从全局数据一直下钻到个体数据，实现不同颗粒度的监管目的。

具体来讲，全国的安全风险最终是以加权平均后的指数形式体现出来；再到具体的省份和城市，内容细化到具体风险事件的发生情况，如电信安全监管维度，呈现电信诈骗使用的伪基站的位置，以及发送诈骗短信的数量等；最后细化到城市中的机构和建筑，呈现具体机构的运行情况和具体高风险企业所在建筑进行实时监控。

3. 产品演示视频

https://v.qq.com/x/page/d0742kep4k1.html

结语

潘洛斯团队是基于 DNA 设计中心下的大数据可视化团队，成员来自于 MIG 安全和医疗部门，早期专注于 To C 端的产品设计，过去一年里随着公司战略的变化和部门业务方向的变化，我们逐渐开始把产品设计的重心和思考放在了 To B、To G 领域，不断做着尝试和探索。以前做 To C 的时候我们关注的更多是 DAU、转化率、日活、满意度这些和产品体验相关联的指标，满足绝大多数互联网用户的诉求是我们首要去解决的问题。现在做 To B、To G 领域的设计，我们更多思考的是如何包装我们现有的业务能力，能够通过更加简单、直接、有效的方式触达给我们的客户，让他们更容易理解像腾讯这样拥有海量数据和算法能力的互联网公司如何帮助他们进一步提升他们的业务效率和产出，给这个社会创造更多的价值，这也是腾讯多年来想要承担的社会责任之一。

文章来源：优设

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