可视化是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。面对医疗行业，如何将行业数据，转化为视觉可视化中的点线面，是在这个项目中需要思考的问题。

本文将带来设计师在医疗院感可视化项目中的设计过程及思考，讲述如何在业务场景下对数据进行抽取表达。通过可视化打破传统院感系统的表单呈现，使院感场景具备互动性、观赏性，满足不同角色的使用需求。同时院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析，从而控制院感发生和预防。

本项目以浙江省建德市第一人民医院为案例，地理数据以建德医院坐标为准。

项目背景
院感是什么？院感为医院感染，入院48小时内都有可能感染到院感细菌。在医院里有专门的院感医生职位，对医院感染进行有效的预防与控制。而传统院感管理的工作流：医护人员及院感医生 > 院感系统分析疑似病例 > 得出结论预防或治疗。这种偏人工的方式数据获取方式，无法更的获取院感发生的原因、定位、以及未来的院感预测。

P1 因此我们通过对医院数据的整理，抽离出影响院感的数据，将院感发生、发展、管控、治疗、预测全流程进行整合。

P2 通过医院>楼层>人员三个层面，空间和时间两个维度对院感展示。打破传统院感系统的表单呈现，使院感场景具备互动性、观赏性，满足不同角色的使用需求：如院长的展示性需求。院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析，从而控制院感发生和预防。

P3 同时在这样的设计场景下，可以覆盖的医疗业务场景和数据单位也会更多元，具有一定的商业化价值。

P4 设计流程
整个项目的设计流程可以分为4个阶段：信息收集、可视化、线上搭建、效果调试。在此项目实践中，重点投入在前三大部分。

P5 Part1信息收集
我们基于项目背景，梳理要展现的数据指标，对整体业务场景进行故事脚本的规划（即如何展现前期的数据收集，并把其串联在整体业务场景中），设定动作摄像机语言，同时也需要了解最终呈现的硬件设备与使用环境。

P6 Part2可视化

1.交互信息框架
首先梳理院感的信息框架和交互方式。

整个大屏分为院楼层，呈现整体院感数据的统计；楼层屏，作为重点病区的监测预测；个人屏，分析病例回溯病程，从而预测院感。三屏之间相互跳转， 交互演示方式从医院的外部跳转内部结构、再到患者的个人维度，三屏都分别展示相关的数据指标。

P7 2.视觉风格
在大屏视效风格探索上，期初的目标是希望可以打造不一样行业视觉语言，所以选择不同于以往的设计大屏风格，选择白色的风格，符合大家对医护行业的认知。但到中期发现，在硬件设备上展示发是过曝的。因此对设计风格进行调整改为X光片的风格，色系上偏冷绿的感觉。这是在这个项目中的试错经验之一。

P8 3.建模设计
在可视化部分中遇到的难点：建筑模型的高还原。下图为建德第一人民医院实拍图。在大屏项目中，必须真实还原地理位置。而在此医院没有清晰的CAD图纸提供的；在Google的卫星地图下也没有的建筑结构的，所以我在建模的过程中，是踩了坑的，先盲画了一版，但是精细度不够，过于粗糙。

P9 因此我反复看得到的资料，通过在确定地理氛围内，去丰富场景。这样的好处是使业务场景更加丰富，包括扩展到院外的车流数据，为业务场景提供更多可能性 当然后期也摇到了建筑内部的消防图，根据消防图绘制内部结构。

P10 4.数据面板
对可视化组件的组件进行设计：时间筛选、数据统计、占比关系、趋势分析。设计之前也参考了很多概念版的可视化设计，希望在院感屏上可以呈现一种科技概念的感觉。

P11 Part3线上搭建
1.获取地理数据
这部分是非常耗时的，datav是数据驱动的可视化产品，在搭建部分，是全程依靠datav平台的。
首先需要明确地理数据，通过高德数据通过点线成面，可以作为场景定位，也就是物理模型的经纬度数据 后面还原数据效果，造虚拟数据，是非常依赖于这个坐标数据的。
119.291724 , 29.472365
这是建德医院的坐标，医院在地图上的数据是很简化的，颗粒度很大，具体位置无法显示。

P12 因此我们需要建立与地理数据绑定的建模，先对位置。

P13 在这个过程中我发现，如果最开始没有对准位置，也不用紧张，可以在DATAV平台增加hook数据过滤器，解决地理数据与世界坐标无法对齐的问题。

2.线上场景还原
根据对确定过位置模型进行烘焙还原。这个过程中遇到了一些不知名的原因烘焙失败，原因可能是命名有中文/位置数据错误/模型块面复杂等，遇到这样的问题就需要重新从头检查烘焙流程每一步。

P14  3.数据维度展示还原
这一步我们需要把前期做好的数据可视化效果，还原到线上模型中。在这一步我遇到的问题是因建德医院内部具体结构的缺失，使一些可视化效果无法精准匹配到模型上。所以设计过程中只能依赖于在对的地理位置上丰富的场景内造数据，这个过程是比较吃力的。

P15 这个问题的解决办法是通过开发工具和导出的结构俯视图，对位置，然后转化出LEGO的数据

P16 在数据效果还原的过程中，也发现我在前期设计的数据效果，不能全部实现，有些是依赖于开发的 。这时可以通过其他组件效果代替尝试，比如热力的效果用粒子放大，通过参数调节得到热力 再比如局部房间的扫管，通过设计部分多次烘焙模型，不断叠加扫光层，得到房间监测的效果
P17 设计小结
综合以上的经验，院感可视化从设计到落地，整体结构应该是这样从物理基础坐标的获取、到场景搭建、再到数据展示的过程。在这个过程中会用到DATAV、C4D、数据库、简单的代码等技术来实现。

P18 这个项目虽然这只是医疗行业中一个小的业务场景，但我们的业务数据提取及可视化设计思路，他不仅限于医疗行业，同时也可以成为场馆类大屏解决方案的一部分，是具有一定商业化价值的。同时在这过程中沉淀下来的人体结构模型，和一些设计经验，是可以复用到对应行业解决方案中，达到提效。

转自：

随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。所以数据可视化设计，绝对是热门的设计之一。很多 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 这些工具模拟时会发现比较困难。同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计。一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。

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

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

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

附上最终视觉效果图：

总结

大屏设计需要注意的点：

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

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

文章来源：优设   

一、前言

与其他相对成熟的设计领域（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、我自己也收集研究了不少优秀作品，为何做的时候还是不知道如何下手？

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

 转自：站酷-BYMD 

转自：站酷-姚成浩

与其他相对成熟的设计领域（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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。