一、前言

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

 

二、本文结构概览

本文围绕“搜什么——去哪儿搜——怎么搜——素材的整理——灵感的迭代与更新” 五大块展开。下图向展示了这篇文章的知识结构，大家可根据思维导图，选择自己感兴趣的部分阅读，也可把这张图作为知识卡片收藏，帮助自己梳理建立灵感库的思路和方法。

 

三、灵感库建立的基础

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

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

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

 

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

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

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

 

媒介

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

 

数据类型

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

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

 

设计风格

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

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

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

 

业务场景

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

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

 

一句话描述业务需求

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

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

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

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

• 1、这样做可以把那些优先级低的干扰因素都过滤掉，留下真正核心的诉求，越是能简短的概括，越能真正把握需求的核心。我个人一直以来与业务方沟通需求后，都会尝试用一句话概括，若需求方认可，开始设计工作；不认可，则继续沟通。
• 2、对于数据可视化设计师来讲，明确自己在工作流中的角色、承担的责任、要解决的问题以及最终交付怎样的产出尤为重要，因为只有清楚了这些，这样我们才能有效分配自己的时间、确定跟上下游的协作策略，避免盲目的没有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将情绪板被放到了用户非常容易触达的位置，所以在大家的共同努力下，各类情绪板会越来越丰富，这个功能也会更有价值。

 

八、资源的自我更新与迭代

资源的自我更新

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

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

 

资源的迭代

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

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

 

九、Q&A

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

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

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

 

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

毋庸置疑，优秀的作品建立在良好的审美基础之上，好的作品看多了审美自然会有提升，但审美有了为啥还是做不出符合自己期望的作品来。这块有两个问题，一个是刻意练习的度没到，另一个是不会分析别人好的作品。刻意练习听名字就知道是什么意思，而作品分析就是我们要知道一个作品之所以让人眼前一亮，它“亮”在什么地方，就是要具体到细节，我们越是能够细致的指出那些让你觉得好的点，就越能模仿和借鉴，之后再辅以大量的刻意练习，才会有效果明显的提升。那么到底如何去拆解、分析一个数据可视化作品？有几步？有哪些方面？怎么做？如何应用？这一系列问题留待下篇文章继续聊。

当然了，下篇文章能否顺利发出，还是看大家是否喜欢和支持！

 

那么我们还是老规矩，想要了解一个事物首先需要知道的是它的定义

 

1.1 数据可视化的定义

较为笼统的来说数据可视化是一种由图形、图像、数字等元素组成的语言用于解释、呈现目标数据之间的关系。从这个定义上来看，数据可视化从外观层面来说是与图形、图像这些视觉元素密不可分，这也是数据可视化最为明显的特征

而结合我们实际的生活与工作来说，数据可视化是一种以图形符号为主要表现形式，将不可见的、抽象的、复杂的、枯燥的、专业的、不直观的数据内容，有趣的、浅显的传递给用户的有效手段。用户可以通过这样的手段在数据完成自己的目标（例如对选定范围内的数据进行分析发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下研究对象的情况等）这也是数据可视化最为明显的价值

 

1.2 可视化发展简史

关于可视化的发展史上可追溯至1950年，当时人们利用计算机创建出了首批图形图表，可以说是数据可视化图表最为早期的雏形，而在50-60年代的可视化中又以查尔斯·约瑟夫·米纳德的《1812－1813对俄战争中法军人力持续损失示意图》为代表

 

该图描绘了拿破仑的军队自离开波兰到俄罗斯边界后军力损失的状况，也是后世分析拿破仑对俄战争的重要数据分析资料，后来这种带状图被称为“桑基图”用来解释能量的流动

而可视化真正被提到一个应用理论的高度是到了1987年布鲁斯·麦考梅克和马克沁·布朗所编写的美国国家科学基金会报告《Visualization in Scientific Computing》（科学计算之中的可视化），其意在强调了基于计算机的可视化技术方法的必要性，此时的概念已经与现在我们所接触的工作中的数据可视化是非常接近

到了90年代初人们发起了一个称为“信息可视化”的研究领域旨在为许多应用领域（科学、商业、行政、财务、数字媒体）之中对于抽象的异质性数据集的分析工作提供支持，与前面提到的“科学可视化”交叉形成了现在耳熟能详的“数据可视化”，此时这个词汇才慢慢的被更多的专业领域的人所接受，并在之后互联网的不断发展中扩充着自己的分支

 

1.3 为什么会使用数据可视化

 

目前大量开始使用视觉可视化的原因其实非常简单大致的原因可以分为需要处理的数据量太大了和人脑不够用了

据不完全统计IBM公司每天有2.5亿字节数据的吞吐量，麻省理工学院的研究科学家Andrew McAfee和Erik Brynjolfsson教授指出，如今在互联网上传递的数据量比过去20年的总和还多，而且根据IDC预测，到2025年将有163万亿GB的数据

这是非常惊人的，而这么多需求的数据量单凭人脑的计算能力和处理能力来说是完全无法与之匹配的，研究表明人脑很难同时处理5组以上的抽象数据，所以这种单线程的处理方式就决定了需要借助外力

而对于用户尤其是决策层的用户来说在现实的工作场景中经常需要同时处理超过5组以上的数据并需要对其建立精准的分析模型以便于做出最准确的决策所以基于这样的需求，数据可视化设计氤氲而生

 

1.4 数据可视化的优势

 

基于数据可视化的需求来看，数据可视化的优势是显而易见的，可以概括为两点认知减负和传递赋能

认知减负是使用者在使用数据可视化工具时候的最直观感受，当所面对的庞大的、复杂的枯燥海量数据集变成了图像化、通俗化、形象化的视觉符号时我们会本能的放下对于面对再面对冰冷数据时候的抗拒和戒备，这是因为人对于一目了然更加接近自己熟悉的有趣事物的时候会更为亲切和愿意去主动理解

而且被处理过、规划过的简洁直观表现形式能更为直接的让使用者看到数据与数据之间的关联，进而分析出其潜在关系，在人对数据的认知这个环节上降低了识别成本和分析成本

传递赋能上图像传递更接近人类最本能的获ju取信息的方式，比起文字来说图像更像是一个解密的步骤，通过解开文字描述这重“密码”将最本质的信息进行呈现，而且对比文字，图像所能够承载的信息其实更为广泛，而且人类读图的效率要远远高于阅读文字

无论是一个约定俗成的语义符号形象还是符合语境的配色都能够起到比文字直白表述更为强烈的深入人心效果，并且图解的形式并不受限于语言的障碍，极大的降低了沟通成本

 

1.5 使用目标

 

基于用户的使用目标来说，使用数据可视化其实就像是一个侦探用“蛛网图”辅助自己梳理思绪进行破案的过程：将一些有关的，但是较为零散信息数据用一根根线索线穿插起来，形成体系化的联系，方便使用者迅速把握各个节点之间的关系进行推导

所以说我们在设计数据可视化的时候并不是对我们拿到的数据的无脑映射，而是要基于用户的目标经过一定的处理和优化后才能进行呈现，随时记住我们是给用户在打辅助，所以我们每一步的设计一定要基于用户的思考

 

用户的期望是能够高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互，提升自己的工作效率，降低自己的学习和使用成本

 

1.6 应用场景

数据可视化的应用领域较为广泛涉及医疗、统计、管理、金融、娱乐、人工智能等一系列领域，在UI的设计中我们最常接触到的包括：PC后台的数据概览、数据可视化大屏、游戏UI、后台实时监控等。

 

当我们大致了解了数据可视化的历史、使用原因、优势、用户目标、应用领域后下面就要切入我们设计师最为关心的话题：我们在设计中的任务

 

2.1 设计难点

 

数据可视化作为一门跨领域的学科，本身对于从业者而言就有着一定的综合素质要求，但由于国内教育并没有垂直教学学科所以在现在的阶段从业人员一部分由纯视觉设计专业的同学组成另一部分由纯工科类型的专业的同学组成

于是这就导致了非视觉设计师在进行设计时，会将全副精力放在强数据的准确性、合理性上，从而让视觉的易读性上有一定的损失，表现形式也较为单一枯燥，视觉感官较差，反观视觉设计师通常会将数据可视化在视觉表现形式上过度用力，虽然营造了很好的视觉体验，但是从其实用度、可用性上来说会大打折扣

于是设计的难点很多时候就会集中在平衡视觉与实用之间的关系 

 

2.2 设计目标

 

通过以上分析，不难看出设计的主要目标，而面对这句较为抽象的“把握设计与实用之间的平衡”其实无外乎也就是拆解到功能和视觉这两个方面

从功能上来说，我的目标是提升用户的数据阅读效率、让用户能够迅速Touch到目标信息，提升交互效率，一切都是以结果为导向，以解决用户问题为导向，一定记住人们不愿意接受未处理过的数据

 

而从视觉上来说，我们的目标是处理好在视觉上各个模块之间的统一、透气关系，同时将数据进行可视化的同时尽量提升感官上的审美体验与传达上的有趣

以上会作为后文中我们每一步设计的指导和检验和理性的方式，从实际操作的维度上来说二者也并不是五十比五十的分配，遵循的原则是：体验一定要让位于功能，所以在视觉的层面发挥的空间其实需要比较克制

 

了解了数据可视化的设计难点，明确了数据可视化的设计目标，那么我下面进入我们最重点的环节：可视化页面案例制作，由于数据可视化的形式较多，这次我们以工作中经常接触得到的PC页面数据概览页为例

 

3.1 明确性质

同样的细化到数据概览这个分支项目我们同样需要明确了解其基础定义和性质，严格意义上来说数据概览部分属于Dashboard design（仪表盘设计）的一种，其主要的目的和功能可分为分析和操作两块

 

所以从综合的角度来说数据概览部分可以理解为：1.其他模块的摘要视图，并显示来自应用程序各个部分的关键信息，从这点上来说建议此模块可以在其余模块设计完后再进行设计，如此有利于设计师从一个全局的视角切入进行设计，理解上也会更加透彻，否则很可能会陷入在你设计其他模块的时候不断地返回对其进行修改的怪圈

2.他也是核心功能、常用功能的快速操作助手和快捷页面跳转(有点类似于导航)，交互功能的排布和关键信息的显示其共同的要求点是显而易见的，即明确各个模块之间的层级，做好顺序、优先级排布这就需要你对业务目标有一定的了解，记住对业务目标不了解你的设计将毫无意义

你可以通过查询一些内部资料、报告、也可以询问产品经理等相关负责人，还可以通过用户调研得出，这里不展开说，具体可以去参考我的另一篇关于用户画像的文章，在动手之前你需要搞清楚：各模块之间优先级如何、你需要在一张单独的图表内展示多少变量、想展示一段时间内的值还是项目和项目之间嗨是组与组之间、每段变量中有多少关键数据需要展示等问题

 

3.2 定义模块优先级

如下图所示，在工作中我们经常接到需求的时候是面对一堆冗杂的数据集，组成了若干个模块，但是正如上文所说我们并不能对其进行无脑的可视化映射，所以首先要做的就是要对各个模块进行优先级的梳理排序

 

明确了各个模块的优先级排布之后我们开始对每一个单独模块进行可视化转化，即哪一个部分分别用什么类型的可视化形式表现，这一步非常类似于土地使用规划，当你在将土地划分完后，为每一块土地定义其使用类型

 

3.3 明确图表选择

想准确的将图表与所要表现的数据进行对应现需要了解图表本身所包含的基本元素

 

在这些元素中正常情况下一定在图表中的有：标题、时间范围、图形主体，经常出现的有：坐标系、图例、提示信息，有时候会有的有：切换选项和值域

知道了这些重要的基础信息了，那么在面对这么多图表的时候我们该如何正确的选择来进行使用呢

 

其实和之前说的一样：基于目的来进行思考，所谓的基于目的来进行思考也就是要明确你所确立的数据指标需要分析的维度，而日常使用的数据需要分析的维度无外乎：比较、构成、分布联系

 

3.3.1 比较类图表

比较类图表应该是大家最为熟悉的范畴，第一时间能够想到的就是柱状图，这也是运用最为广泛的图表之一，经常出现在PC端之中，用于描述分类数据之间的对比，描述的数据可以是地区、品类甚至一个时间周期，但由于其扩展能力有限，所以一般不建议项目超过12条

 

条形图与柱状图类似，看上去只是交换了X轴与Y轴，功能和承载数据种类较为类似，但不同的是，条形所能承载的项目数量相对于柱状图而言更多，由于其优良的纵向延展性一般用于手机端较多，而且从上到下的阅读方式符合人眼阅读习惯，所以也会经常用于排行榜的设计中

 

分组条形图是条形图的衍生之一用于比较多个变量在不同区域之间的数量关系，比如当想比较同样一款衣服和鞋子在四个门店中的一个季度的营业额时就可以使用分组条形图

 

双向条形图表适合比较两组以上的分类数据比较，和分组条形图较为类似，但是由于自身外观特征更适合用于比较两组意义相反的数据，也正是如此，双向条形图的组内二级分类数量一般不要超过3条最好

 

折线图与前者最大的不同就在于在坐标轴中加入了连续类别这个概念，数据基于时间等因素变得动态了起来，注重变化趋势的展现

 

面积图是折线图的延伸，除了表示变化趋势之外还能比较所选范围内积累的值

 

玫瑰图应该算是可视化图表中的“网红”，因为我们从小学的课本中就知道它还有一个别称叫“南丁格尔玫瑰图”它是一种圆形的直方图，使用半径长短表示数值大小，其特点就在于因为其独特的外观可以将数值之间的差距在视觉层面进行放大，和将坐标轴范围缩小来提升视觉上数值的碾压是一个道理，发布会吹水最爱，但是要注意的是这不是一个表示占比构成的图，因为玫瑰图的每一份角度是一样的，一定要和饼状图等图区分开来，它用来表示的还是数值与数值之间的大小

 

雷达图经常用于分析一些多维的性能数据、评分数据，经常打游戏的朋友应该不陌生，有多少五边形选手可以扣个1，每一项指标越接近圆心说明状态越差，越向外说明越佳

 

子弹图用于比较当前数值与目标之间的关系，比如看当前业绩是否达标，也可以通过标记划分区域来进行更好的评估

 

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单项分析，一定要有清晰的环节，比如监控买家从浏览到最后下单的数量统计以求得转化率，不适合无逻辑、无流程的分类对比

 

3.3.2 构成类图表

构成类图表整体上来说主要用于观察部分和整体的占比关系，最经典的莫过于饼状图，这个不用多说，通过每一份半圆角度所占整个圆的大小来表示部分和整体的关系，但是由于其所占面积较大，经常会让视觉过于集中，影响注意力

 

相对于饼状图而言，环状图十分有效的避免的干扰视觉的问题，其本质是将饼图中间掏空，功能与饼图基本一致，但是视觉上做到了轻量化，目前在日常设计中较为常用

 

旭日图相当于前面二者的结合，适用于展示多层级数据的占比关系，距离圆心越近代表层级越高，下一层级的总和构成上一层级，存在一定的父子层级关系

 

堆叠面积图出了可以表达趋势外，其优势在于能够表达总量和分量的构成关系，堆叠面积图上的最大的面积代表了所有的数据量的总和，是一个整体。各个叠起来的面积表示各个数据量的大小

 

堆叠柱状图的优势在于它既可以表达一级分类的比较，同时还能看出二级分类在各其一级分类中的占比，但是缺点在于二级分类并不是按照同一基准线对齐的，相比于堆叠面积图更为常用

 

瀑布图用表达两个数值之间的变化过程，过程值为正的时候，向上加，过程值为负的时候向下减

 

3.3.3 分布联系类图表

分布联系类地图在这两年在国人的心中其实已经非常熟悉了，因为疫情今年的地图可视化的应用经常出现在我们的生活中，地图可以结合不同的表达方式：

可以结合散点、可以结合动画、还可以结合引导线以及热力图的方式，图的形式使用视具体的业务需求来定

最后就是气泡图，这是在查看分布关系中最为经典的视觉模型，用气泡的面积大小表示数量，结合辅助线可以更好地观察分布情况

 

3.4 匹配图表 重构布局

 

当我们对每种图表的功能和使用范围有了一个较为明确的认知之后，下面我们就可以对我们之前所规划好的优先级的模块进行可视化形式（图表）的匹配了

进行匹配过后，我们将对布局进行重构，整体重构需要遵循的原则是

• 1.布局层级明确，首屏尽量曝光更多内容
• 2.统一透气，具有呼吸感 

 

3.4.1 布局层级明确，首屏尽量曝光更多内容

从首屏曝光更多内容来说主要是因为基于分析类的数据概览工作场景和Analytical dashboard自身特征决定的，用户希望能够通过仅仅一屏的的大小进行对各类信息的情况有基本的把控达到一眼全局的目的，其主要注意力都会放在首屏，所以我们需要尽可能的在首屏安排更多的信息

 

当然首屏内容也并不是越多越好，一般建议也尽量不要超过7组模块，而在层级明确这块儿主要是根据人眼阅读习惯所产生的优先级排布：正常情况下都是左上为优先级最高，而右下优先级较低，这是无数经典的眼动测试和设计总结产生的最常用结论，就不展开叙述了，所以当我们按照优先级、首屏曝光更多内容的原则进行处理后会得到如上图的布局

 

3.4.2 统一透气 具有呼吸感

 

这主要是视觉层面的问题，统一透气的要求在首页概览中可以依靠栅格系统来来解决，它可以有效的帮助页面布局的对其保持页面布局一致性，为页面建立基础布局框架，将页面中的所有元素都捆绑在一个体系之中，同时还能有效解决适配问题

 

3.5 模块拆解

完成了大规划之后，下面我们开始对一个一个的模块进行拆解同样的以目标指导设计，边设计边验证

 

3.5.1 层级明确 突出重点

 

和大规划一样，单独到每一个图表同样要时刻注意层级的梳理，销售渠道部分很明确应该是运用一个折线图的形式，由于业务目标上来说更关注销售额而不是销售额和订单数的比较，所以我们选用了一个带有切换选项的折线图形式

但是我们会很容易发现的在读图时会出现较大的视觉干扰，并没有能够很好地突出重点信息，视觉层级不清晰、混乱

于是我们对没有重点的视觉层级进行梳理，像之前划分模块那样，对视觉元素进行高、中、低的P0、P1、P2的设定，提升易读性

 

P0：层级最高的自然是重点信息突出部分，所以我们需要在其之上做加法，给予内容异形悬停样式进行具体强调，配合投影加强视觉效果，有效传递用户，拉开与别的元素的层级，同时数据部分用特殊字体并适当加大字号进行设计，方便用户第一时间能够看到所要强调的数据具体值

P1: 其次就是主体图形部分，这是用户需要看到的重要部分，在使用场景中会长时间盯视，所以采用更低的明度与更高的饱和色颜色确保易读性，但是也不致于会让用户太晃眼产生视觉疲劳，最后考虑到该模块所处位置属于页面中较为核心的地带，给予一定的颜色透明度渐变装饰，在强化主体图形的同时不致于太显单薄

P2：前两者都是一定程度的做加法，那么层级最低的元素比那需要开始做减法，此时轴线、刻度、切换选项等元素需要弱化视觉层级，降低透明度，尤其是背后的刻度线与背景的明度对比大概控制在1.6:1上较为合适

 

销售总额、订单数、渠道数同属于一个数据统计的范畴，最忌讳的就是把以上提供的三个信息给做平，让用户抓不住重点，面对这样的情况还是一样，确立需要突出的重点信息给予特殊文字和大小的设计，选择合适的主体图形

 

但在这里需要注意的是由于在这个模块中P0是金额数、订单数、渠道数这些重要值，所以可视化图形需要适当为其让步，不要放在阅读中心位置，按照P1来进行处理，而订单数、转换率这样的标题就成了P2需要适当降低透明度和文字大小，不干扰主要信息的表达

 

3.5.2 统一营造

说到统一，最先想到的一定是色彩，无非也就是需要处理好对立统一关系，而这其中统一的比例又要大于对立，配色上尽量选用同类色系，不宜太过花哨，尤其是对于B端而言，建议在可能的情况下不要超过5种，而且主色、辅助色，对比色的比例建议控制在6:3:1的比例（但不绝对），既能做到有所区别又不致于过于绚丽干扰视觉

 

你的主色不一定要迁就你的品牌色，但是一定要是如上文说的尽量低明度高饱和，以适应于长时间的注视

 

颜色过后就是字体，字体字体的使用需要极为谨慎，如果可以尽量只出现一种字体（但不要超过三种），并且只采用基础字体，正常情况下都是将其作为一个需要被降噪了的视觉元素来对待（比如降低透明度），在PC端中尽量也不要出现较多不同的字号，字重，造成没有必要的视觉干扰

 

除了字体之外，在统一感的营造上卡片的布局结构也需要尽量保持一致，这是为了提升易用性，同一个产品内，相同布局会给予用户相同交互、相同功能的暗示，也更容易培养用户习惯，提升操作效率

 

3.5.3 呼吸适中

呼吸感是留白的艺术，很考验设计师的排版能力，在单独的模块内，元素与元素之间尽量不要用实线进行间隔，可以的话利用亲密性原则通过元素间距的远近进行布局

而柱状图的设计上，柱与柱之间的间距最好大于柱宽的1.5倍，这样才显得视觉上较为透气，不致于太臃肿

 

最后就是模块中的边距留白部分，这点一定要重视，不然不仅你的版心会变散，还会严重影响你的页面呼吸感

 

3.5.4 细节处理

细节上首先要说的就是横纵坐标轴上的文字，上面的文字一定不要过长，最好的方式是将文字进行精简。然后横、竖排对齐处理，如果实在不能精简那么再进行斜排的方式

 

第二点就是横纵坐标轴有的时候会因为需要展示的数据过多而过于密集影响阅读，这个时候可以采用适当增加一个值域的划定的方式来进行坐标间距的缩放

 

第三点就是，在排行榜等模块可以适当增加一些小设计，比如金、银、铜的设计，提升情感化元素的融入

 

第四点就是，尽量不要选用一些3D的酷炫效果来做可视化，因为这种效果很容易对数据进行遮挡和扭曲，不是非常适用于高效阅读，也不适合PC页面上的交互，而且也不利于开发，比较得不偿失

 

3.6 组装自检

当所有的模块设计完成后，像拼高达一样进行组装，组装完成后适当调整其过于干扰视觉的地方，然后进行自检

自检不只是从检查你的视觉、你的模块间的布局，更重要的是带入使用角色来进行检查，你可以模用户使用中的各种需求场景，对已经制作好的页面进行交互和阅读，看是否能够快速高效地完成使用目标

当然除了自己之外，你还能在有条件的情况下找专家用户进行使用，即使记录使用中存在的问题并及时进行调整，当初步使用大致无问题后便可以交付

1

好了以上就是在B端设计中对于数据可视化尤其是PC端数据概览的设计探讨，当然其实关于数据可视化的范围还远远不止于此，感谢你能够耐心看到最后，如果这对于你的工作有一点帮助那么备感荣幸，也很感谢留下你的交流，我们下一期见

参考：

《10 rules for better dashboard design》Taras Bakusevych

《Data Visualization-Best Practives and Foundation》Cameron Chapman

且曼B端产品设计 美芳老师 《数据可视化设计之视觉篇》

知网文库

维基百科等 

作者：核糖bro

1转载请注明：学UI网》深度解析B端数据可视化-信息图表篇

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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