mirror of
https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
synced 2026-01-21 05:40:35 +08:00
大屏，可视化设计
This commit is contained in:
zhangxiaohui
BIN
大屏效果图图片/食物/苏州大闸蟹.png
Normal file
BIN
大屏效果图图片/食物/苏州大闸蟹.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
大屏效果图图片/食物/苏州大闸蟹1.png
Normal file
BIN
大屏效果图图片/食物/苏州大闸蟹1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
大屏效果图图片/食物/苏州大闸蟹快递.png
Normal file
BIN
大屏效果图图片/食物/苏州大闸蟹快递.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
183
大屏设计/如何养成良好的灵感收集习惯？.md
Normal file
183
大屏设计/如何养成良好的灵感收集习惯？.md
Normal file
@@ -0,0 +1,183 @@
|
||||
- [如何养成良好的灵感收集习惯？](https://www.uisdc.com/2019-inspiration-collection-habit)
|
||||
|
||||
|
||||
|
||||
#### 设计师的灵感资源库
|
||||
|
||||
关于设计师的灵感资源库主要会牵涉到优秀作品（图片形式）、文章、音视频等形式。日常的采集习惯将会大大提升设计师后期的项目设计灵感来源与执行效率，设计做不好其中部分因素就是[灵感素材](https://www.uisdc.com/tag/灵感素材)没有找对。
|
||||
|
||||
之前大家也喜欢借助于一些网站平台、第三方工具、插件等形式进行收藏整理，今天我给大家分享的是如何利用本地存储加上良好的习惯来搭建灵感资源库。
|
||||
|
||||
|
||||
|
||||
△ 图片资源来源于设计平台和网络
|
||||
|
||||
#### 灵感资源库-图片
|
||||
|
||||
灵感资源库里面关于图片素材的采集与管理是最重要的形式之一，采集只是最底层的要求，更重要的是如何进行分析得出作品背后的轨迹，下面分享一点个人的经验。
|
||||
|
||||
**1. 建立灵感图库的目的**
|
||||
|
||||
素材采集如同竞品分析，辅助项目设计更加有理有据。看与分析不是为了抄袭，不看是无知的体现，任何的创新都是需要脑海中有大量的碎片化影像，然后进行拆分、重组与变化。
|
||||
|
||||
建立灵感图库相当于形成一本字典，当你遇到问题的时候可以进行查询，闲暇的时候可以进行回顾。去挖掘一些优秀作品背后的轨迹，以便能够运用到后期的项目中，提升工作执行效率。
|
||||
|
||||
|
||||
|
||||
**2. 利用工具而不依赖工具**
|
||||
|
||||
现在很多设计师喜欢借助一些网站平台、第三方工具、插件等形式进行灵感存储，这个有利有弊，我们最好是利用工具而不依赖工具。
|
||||
|
||||
如果过于依赖单一的形式，一旦发生什么变动你将会措手不及。在利用工具的便捷度的同时，最好做好本地存储，只要养成良好的习惯和熟练的管理方法，将会是你最安全的保障。
|
||||
|
||||
**3. 不要只是形式主义**
|
||||
|
||||
无论做什么，一旦你将它当成一种形式主义，那么将会是自我安慰。如同看书一样，你收藏了大量的电子书却从来没看，只会是浪费自己内存容量与时间精力。
|
||||
|
||||
我们需要的是吸收转化，不要只是形式主义，只有真正看懂了才能属于自己，不然将会是一堆库存。
|
||||
|
||||
**4. 与其追求数量不如注重分析**
|
||||
|
||||
之前遇到一些设计伙伴想要你将自己的素材拷贝一份给他，或者也有从一些交易平台低价购买上百G的素材等等。这些都是为了图方便，以为拥有就是如此简单，其实时间长了你就会发现，这种形式对自己的专业提升并没有帮助。
|
||||
|
||||
采集不是为了拿回一堆库存，而是需要经历发现、分析与转化的过程，哪怕你一天只获得了一张优秀的作品，只要你看懂了、记住了、有感悟，那也是一种不错的收获。
|
||||
|
||||
我们与其一味地追求数量，不如重点进行分析，这样你的专业进步才会最大化。
|
||||
|
||||
|
||||
|
||||
#### 本地存储
|
||||
|
||||
只要养成习惯和找到方法，本地存储也是非常方便与实用的，下面给大家分享一下本地存储的经验。
|
||||
|
||||
**1. 本地存储的优势**
|
||||
|
||||
本地存储不受其它风险限制，比如无网络、系统更新、服务器升级、经营关停等。也方便我们进行长期的存储管理，后期也可以随时进行查看。
|
||||
|
||||
**2. 存储技巧**
|
||||
|
||||
创建大分类：按照设计类别的不同或者与设计关联性的不同来建立大的类别，你可以直接用类别的名字进行命名，也可以根据重要程度或者自己经常浏览的习惯在前面加上序列号，方便形成自己的固定记忆。大分类可以全面一点，关联性不大的都可以建立类别，方便后期针对性地进行查询。
|
||||
|
||||
|
||||
|
||||
创建细分类别：根据大的类别创建细分类别，细分得越精细越好，尽量不要存在模糊的选项，这样以后资源多了找起来会比较慢。细分类别不一定只是二级分类，可以有三级四级甚至更多层级都可以，只要方便自己后期进行管理和查询就行。细分类别的命名也可以是单纯的类别名字，也可以加上序列号方便排序。
|
||||
|
||||
|
||||
|
||||
素材命名习惯：素材可以以关键词的形式进行命名，多个关键词中间可以用空格来区分，这样是方便后期通过关键词进行本地搜索。也可以在前面加上日期和编号，不仅可以方便排序管理，也能形成时间轴的概念，以后可以根据采集时间来判断自己的审美能力是否有所增长。
|
||||
|
||||
|
||||
|
||||
添加色彩标签：如果是 Mac 电脑进行存储的话，可以给素材添加色彩标签，这样可以对素材进行主色划分，以后在进行搜索的时候可以通过色彩标签来搜索。对于一些配色比较多样化的素材，我们也可以创建多个色彩标签。如果对色彩标签命名不满意是可以自定义名称的，也可以给同一个颜色追加多个命名，方便为一些中间色设置标签。例如：蓝色你可以通过命名来体现淡蓝色、深蓝色、天蓝色等等。
|
||||
|
||||
|
||||
|
||||
适合自己的才是最好的技巧，找到自己最习惯的一种方式。
|
||||
|
||||
**3. 本地存储目录管理**
|
||||
|
||||
最好是在前期就通过一些脑图软件或者表格工具创建本地存储的目录文件，方便以后快速查询目录。如果都通过每一个文件夹进行查看会比较慢，创建好目录管理在查询的时候可以先进行筛选。
|
||||
|
||||
|
||||
|
||||
**4. 习惯大于一切**
|
||||
|
||||
其实无论什么方法和技巧都只是一个手段，三分热度也是没太大意义的，最终能把这个形成一个习惯，并长期坚持才是结果最大化。
|
||||
|
||||
你需要在意的不是用什么工具或者是否本地存储，而是让它形成一种习惯。
|
||||
|
||||
#### 灵感资源库-文章
|
||||
|
||||
除了建立优秀图片形式作品资源库以外，文章资源的收藏和整理也是非常重要的。不仅可以加强行业资讯的了解，也能加深设计理论经验，后期也可以作为一种资料进行查询。
|
||||
|
||||
**1. 收藏不代表拥有**
|
||||
|
||||
很多设计师都喜欢收藏很多素材，甚至廉价购买了上百G的资源素材，以为因此便是拥有了，后面却发现基本没怎么看，也压根没用到项目中。
|
||||
|
||||
文章的收藏也是如此，看到好的文章都收藏在一些平台、微信收藏等渠道，安慰自己过一会儿好好看看，却发现一年过去了也没再回顾第二次。
|
||||
|
||||
收藏并不代表你拥有，想要更好地进行转化，光是收藏是不够的，下面分享一些个人经验。
|
||||
|
||||
|
||||
|
||||
**2. 建立图书馆式的文章管理库**
|
||||
|
||||
有些文章可能暂时没办法吸收转化，也有一些用于资料的存储方便后期再次转化，对收藏的文章进行图书馆式的管理将有助于进行后期的文章资源查询。
|
||||
|
||||
将收藏的文章按照细分类别进行存储，先分大类，再根据类别进行二三级目录式划分，只要建立清晰的文件目录，就算存储在本地也是非常便利的，还能进行无风险长期式保留。
|
||||
|
||||
收藏整理的过程虽然会更麻烦，但是这个过程中也将进一步加深你对文章的记忆。
|
||||
|
||||
|
||||
|
||||
**3. 精选重点加强记忆**
|
||||
|
||||
除了养成良好的文章收藏管理习惯以外，想要更好地对文章进行记忆，需要对阅读的文章进行重点内容整理，相当于将文章的精华部分以大纲的形式整理出来。在整理的过程中，对于一些观点突出或者对于自己帮助较大的一些文字信息单独摘录到一个新建文档里面，不仅可以方便后期进行快速查询，还能加深对文章内容的记忆度。
|
||||
|
||||
文章精选部分整理有点类似于读书笔记，但是没有那么全面，只是对一些重要的地方进行摘录。摘录的文档存储建议和整篇文章存储在一个文件夹，方便后期在查看的时候可以提前看一下摘录。
|
||||
|
||||
|
||||
|
||||
**4. 多看不如深度吸收**
|
||||
|
||||
无论做什么专业提升都需要我们多看、多做、多思考，多看只是一个简单的层面，如果没有吸收转化，终归会逐渐淡忘。
|
||||
|
||||
多看不如深度吸收，我们不需要一天阅读很多，但是你要排除一切干扰，要把精华的部分吸收进去。有时候我们在阅读时会在想一些事情，这样表面上文章在继续阅读，但是你会发现前面阅读的内容开始在脑海中逐渐模糊，因此你需要静心。读书那会儿我们喜欢大声朗读，其实就是为了让自己更加专注在自己的阅读世界，不被别人干扰，加深印象。
|
||||
|
||||
**5. 读书笔记的重要性**
|
||||
|
||||
从阅读吸收的角度来说，写读书笔记是最有效的方式之一。在阅读文章或者书籍的时候，把自己的读书心得记录下来或为了把文中的精彩部分整理出来而形成笔记。俗话说：「好记性不如烂笔头」，写读书笔记不仅能提高阅读书、文的效率，还能加深记忆。
|
||||
|
||||
最简单的一种写读书笔记的方法是「摘抄法」。把文章中的一些好的句子和段落摘抄下来，抄在本子上或卡片上。
|
||||
|
||||
|
||||
|
||||
常用的形式有（以下资料部分来源于百度百科）：
|
||||
|
||||
提纲式：以记住文章或者书籍的主要内容为目的，通过编写内容提纲，明确主要和次要的内容。
|
||||
|
||||
摘录式：主要是为了积累词汇、句子。可以摘录有用的词语、句子、段落，供日后回顾与运用。
|
||||
|
||||
仿写式：为了能做到学以致用，可模仿所摘录的精彩句子，段落进行仿写，达到学会运用的程度。
|
||||
|
||||
评论式：主要是对文章或者书籍中的观点、案例等加以评论，结合自己的观点与作者的描述，来加深该内容的记忆。
|
||||
|
||||
心得式：为了记下自己感受最深的内容，记下读了什么书，书中哪些内容对自己教育最深，结合实际写出自己的感受，即随感。
|
||||
|
||||
存疑式：主要是记录阅读文章或者书籍时遇到的疑难问题，边读边记，以后再分别进行询问请教，达到弄懂的目的。
|
||||
|
||||
简缩式：为了记住一些篇幅较长的文章，可抓住主要内容，把它缩写成短文。
|
||||
|
||||
#### 灵感资源库-音视频
|
||||
|
||||
除了对图片、文章进行采集分类与记忆转化以外，音视频的学习也是比较常见的。不过现在很多音视频是无法进行本地存储的，如果遇到无法存储的可以在学习的时候做好笔记，把内容转化为可存储的形式；对于一些可以下载的音视频资源可以按照图片与文章存储的形式进行采集分类。
|
||||
|
||||
**1. 转化为可存储的形式**
|
||||
|
||||
对于一些没办法直接下载存储到本地的视频教程资源，我们可以截图一些重点部分编辑成一个文档或者 [PPT](https://www.uisdc.com/tag/ppt) 形式进行存储，方便后期对视频内容能够快速查询；最好的方式是做好笔记，这个和读书笔记有点类似的概念，经过对内容进行整理编辑，不仅可以方便存储也能加深记忆。
|
||||
|
||||
对于一些音频文件我们如果无法存储的话，可以利用音频转换器转化为文字版本，方便存储。要是一些简短的音频自己手动转换就好，自己听一遍也能更好的记忆。
|
||||
|
||||
|
||||
|
||||
**2. 创建自己的音频资料**
|
||||
|
||||
有一个很好的加深记忆的形式，就是把文章朗读出来然后形成音频文件。虽然这个比较耗费时间，但是对于文章的记忆度是非常大的。之前我还看到有一个朋友一直在以这样的形式分享她阅读的一些文章，感觉这样的形式对于我们来说也是受益颇多。
|
||||
|
||||
|
||||
|
||||
**3. 以直播锻炼自己的另一面**
|
||||
|
||||
这是一个延展的话题，与资源库的创建没太大关联，但是我们收藏采集了这么多的资源最终的目的都是为了转化，如果只是一堆硬盘里面的冰冷素材，那就相当于是一堆杂物，只是做好了整理与封箱。
|
||||
|
||||
把自己的经验分享出来不仅可以对自己的知识进行验证，也能更好的利用这个机会进行梳理。文章的形式是其中之一，如果加上直播分享的话就会有新的收获。
|
||||
|
||||
- 通过直播可以加强自己在表达主题的时候对于流程的把控，如何让人从浅入深听懂你的分享；
|
||||
- 可以锻炼自己的表达能力，以后在工作中表达或者团队内部分享就不会怯场；
|
||||
- 锻炼自己的临场发挥能力和控场能力，生动有趣的分享都是这样一步一步尝试出来的；
|
||||
- 通过制作课件将会提升演示文档制作的经验，说不定以后制作 PPT 也能成为高手；
|
||||
- 更多你没发现的价值，期待你尝试第一次的公开分享。
|
||||
|
||||
|
||||
|
||||
####
|
||||
214
大屏设计/数据可视化设计师如何建立灵感库？.md
Normal file
214
大屏设计/数据可视化设计师如何建立灵感库？.md
Normal file
@@ -0,0 +1,214 @@
|
||||
- [数据可视化设计师如何建立灵感库？](https://www.uisdc.com/build-inspiration-library#)
|
||||
|
||||
|
||||
|
||||
#### 灵感库建立的基础
|
||||
|
||||
灵感库的建立大体上分主动与被动两种。主动，是我们有意识地收集、整理相关作品素材形成灵感库的过程；被动，指通过朋友圈好友分享、同行推荐等获取灵感的方法。因为后者更不可控，影响因素较多，比如你所处的圈子、社交网络使用习惯等都会影响被动获取的质量。所以今天，我跟大家分享的主要是第一种主动建立灵感库的方法，而这个方法的核心我把它归纳为两个字 ：搜索。
|
||||
|
||||
|
||||
|
||||
搜索是现在这个时代我们主动获取信息的最主要手段，每天我们通过各类关键词在各类 APP 上获取各样的服务、产品和资源。灵感的主动收集就是一个通过关键词搜索，然后分类、整理、研究、再利用的过程。所以影响灵感收集的主要因素其实就是我们能不能用好搜索。不同的搜索方法、渠道、关键词极大地影响着我们获取到的信息质量，这也是本篇文章为何以搜索核心展开的原因。
|
||||
|
||||
如下图所示，同样的关键词在不同的搜索渠道，得到的内容质量是不一样的。
|
||||
|
||||
|
||||
|
||||
#### 灵感库建立的第一步：搜什么？
|
||||
|
||||
|
||||
|
||||
互联网很大，如果没有明确的目标，找灵感的过程就跟刷抖音一样，恍恍惚惚几个小时，好像点了不少赞，收藏了不少干货，回头看其实并没有什么特别有价值的东西，所以找灵感要有目标，有 KPI 才行，有目标就有标准，有标准才有方向和效率。
|
||||
|
||||
|
||||
|
||||
如上图所示，我对数据可视化这个行业术语做了分析和拆解，这样做的目的是为之后搜索关键词的提取做思路的拓展。很多小伙伴在搜索可视化相关内容时，思路总是局限在「可视化」这个关键词上，但是直接使用这个关键词搜索，大多数时候并不能找到我们心理预期的结果，或者搜索多次后，看到的都是之前见过的作品，很难突破边界，获取更多新的灵感。造成的这个结果的原因显而易见，就是关键词的匮乏，不知道搜什么。而对「大屏数据可视化」进行解析之发现，以往的搜索，我们只使用了四个方向里的其中一个，其它三个方向并没有很好的利用。现在，我们以每个方向上的核心关键词为基础，去丰富它的下一级关键词，这样就会像枝芽新生一样，在各个节点延伸出丰富的词汇。
|
||||
|
||||
|
||||
|
||||
媒介就是指数据可视化设计最终落地在什么平台，一般来讲，大屏数据可视化设计落地的媒介当然就是大屏了，以它为核心做关键词的发散，可以产生其它几个二级关键词。
|
||||
|
||||
|
||||
|
||||
数据类型是主要数据的特征或来源，不同的数据类型，在可视化设计时有不同的视觉特征。比如地理信息的数据可视化，一般会与道路、河流、人造建筑、某区域内地标等一起出现，会有丰富的 3D 场景、动效，而图表信息相对较少；报表类信息的数据可视化，则主要以更好地展示报表内大量数据为主，所以强调信息的层级、主次，设计的目标是要减少用户认知负担、引起用户阅读兴趣，促进数据内容的有效传达，因而会较少使用动画，其次，因数据较多，也很难对应到某个具体的物理场景，故 3D 模型等也较少使用。
|
||||
|
||||
所以以数据类型为核心，拓展的二级关键词会让搜索结果更精准，更有针对性。
|
||||
|
||||
|
||||
|
||||
设计风格就是视觉设计整体上给人的想象和感受，好的设计就跟一个人一样，一定是有自己鲜明的个性和气质，能够引起人的共鸣和向往，唯有如此，设计才能吸引人，从而影响人，并最终传递自己的观点给观者。所以设计风格的定义是视觉设计中最重要的一环，也是最需要灵感和创造力的部分。
|
||||
|
||||
作为数据可视化设计师，我们想要找到的参考是那些具有数据可视化风格的作品，但这些作品本身并不一定是在讲数据可视化的内容，只要作品某部分的设计有我们想要的那种「感觉」，就可以了，而这个作品可能是某段影片、某个动效、某种图形、某个元素或声音。基于这样的思路，我归纳了一些具有数据可视化风格但不一定都是数据可视化作品的关键词。这就是一个特别有意思的点，我们想要找到某个内容，但当我们用最贴切它的那个名字去找时，却不一定能找到最能代表它风格的作品。所以当我们跳出数据可视化这样一个具体的点，而从更抽象的设计风格这个层面去看待它的时候，就能更好地发散思维、拿到了更多好的关键词，找到更多的刺激点。
|
||||
|
||||
|
||||
|
||||
以设计风格为例，我们从它的节点上找到任意一个关键词：SCI-FI，然后搜索这个关键词，我们看看搜索到的结果。
|
||||
|
||||
|
||||
|
||||
业务场景简单理解就是在什么情况下要解决什么问题，它是数据可视化的落脚点，也是数据可视化的商业价值所在。每个公司或团队，都会有自己专注的业务方向，所以在工作中找这方面的灵感，从业务场景入手效果最好。
|
||||
|
||||
|
||||
|
||||
简单回顾下，通过上部分文章的分析，我们从媒介、数据类型、设计风格、业务场景四个方面形成了一个数据可视化的关键词的矩阵。这个矩阵是建立灵感库的基础，之后每当我们有新的关键词要加入，或者有效果不好的关键词需要剔除，只需修改、迭代这个关键词矩阵即可。有了这个关键词矩阵后，我们如何利用它完成一次基于实际需求的灵感搜集？下面给大家举个小例子来看一下怎么用。
|
||||
|
||||
##### 一句话描述业务需求
|
||||
|
||||
首先用尽可能简短的一句话描述业务方诉求。
|
||||
|
||||
一句话描述业务诉求后，我们把业务需求带到关键词矩阵中，就会获得如下图的结果：
|
||||
|
||||
|
||||
|
||||
可以看到，带入需求后，按树状结构去匹配与需求相吻合的关键词，就可拿到明确的搜索指引目录，然后我们按搜索指引，开始灵感收集即可。
|
||||
|
||||
这里有个小小的点，就是为什么要尽可能用简短的一句话来描述业务方诉求，
|
||||
|
||||
- 这样做可以把那些优先级低的干扰因素都过滤掉，留下真正核心的诉求，越是能简短的概括，越能真正把握需求的核心。我个人一直以来与业务方沟通需求后，都会尝试用一句话概括，若需求方认可，开始设计工作；不认可，则继续沟通。
|
||||
- 对于数据可视化设计师来讲，明确自己在工作流中的角色、承担的责任、要解决的问题以及最终交付怎样的产出尤为重要，因为只有清楚了这些，我们才能有效分配自己的时间、确定跟上下游的协作策略，避免盲目地没有 KPI 的设计。
|
||||
|
||||
#### 灵感库建立的第二步：去哪儿搜？
|
||||
|
||||
合适的关键词是第一步，它保证了我们搜索结果的有效性，而去哪儿搜决定了我们搜索结果的质量。如下图，针对数据可视化设计师，我对「去哪儿搜」这个问题按我自己的从业经验做了梳理。
|
||||
|
||||
|
||||
|
||||
从我的归纳里大家可以发现，我把数据可视化设计师的灵感来源分为了四大块（其它行业的设计也大体上就这四块），分别是：设计网站、产品或服务提供方、独立设计师或工作室、视频网站。
|
||||
|
||||
**第一部分：设计网站**
|
||||
|
||||
[设计网](https://www.uisdc.com?s=设计网)站部分列出的都是设计师们都熟悉的几个站点，在之前，大多数灵感的收集都可在花瓣完成，但花瓣最近几次[改版](https://www.uisdc.com/tag/改版)之后，已经没有以前那么好用了。对数据可视化方面的素材搜索，个人经验上，强烈推荐大家去 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. 我自己也收集研究了不少优秀作品，为何做的时候还是不知道如何下手？**
|
||||
|
||||
毋庸置疑，优秀的作品建立在良好的审美基础之上，好的作品看多了审美自然会有提升，但审美有了为啥还是做不出符合自己期望的作品来。这块有两个问题，一个是刻意练习的度没到，另一个是不会分析别人好的作品。刻意练习听名字就知道是什么意思，而作品分析就是我们要知道一个作品之所以让人眼前一亮，它「亮」在什么地方，就是要具体到细节，我们越是能够细致的指出那些让你觉得好的点，就越能模仿和借鉴，之后再辅以大量的刻意练习，才会有效果明显的提升。那么到底如何去拆解、分析一个数据可视化作品？有几步？有哪些方面？怎么做？如何应用？这一系列问题留待下篇文章继续聊。当然了，下篇文章能否顺利发出，还是看大家是否喜欢和支持！
|
||||
549
大屏设计/设计师的数据可视化指南.md
Normal file
549
大屏设计/设计师的数据可视化指南.md
Normal file
@@ -0,0 +1,549 @@
|
||||
- [设计师的数据可视化指南](https://www.uisdc.com/data-visualization-design)
|
||||
|
||||
|
||||
|
||||
#### 什么是数据可视化
|
||||
|
||||
数据可视化就是借助视觉的表达方式（不局限于文字），将枯燥的，专业的，不直观的数据内容，有趣的、浅显的、直观的传达给观众的一种手段。
|
||||
|
||||
非设计师在制作数据可视化时，往往会因为重点突出数据的重要性，而让可视化图表变得枯燥乏味。而设计师在制作数据可视化时，又会因为过度注重绚丽多彩而让数据的呈现效果大打折扣。所以在这种大环境下，催生出了数据可视化行业。作为设计师，如何拥抱这个新兴的行业，如何把握设计与功能之间的平衡，从而更好的沟通与传达信息，即是本文的重点。
|
||||
|
||||
|
||||
|
||||
信息图表，就是数据可视化后产生的结果，就是我们在工作汇报中，项目介绍中，以及后台系统中经常见到的数据图表。信息图形由信息和图形两个词语组成，它被称之为「信息图形」(Infographics或Information Graphics)。
|
||||
|
||||
信息图形最初是在旧的纸质媒体上刊登的，更加有助于人们理解新闻信息的可视化内容。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 信息图表的分类
|
||||
|
||||
根据木村博之的定义，从视觉表现形式的角度，将「信息图表」的呈现方式分为六大类：图解(Diagram)、图表(Chart)、表格(Table)、统计图(Graph)、地图(Map)、图形符号(Pictogram)。
|
||||
|
||||
|
||||
|
||||
**1. 图解—主要运用插图对事物进行说明**
|
||||
|
||||
文字有时候是一种匮乏的信息传递方式，而可视化的方式，则是人类最本源的一种信息传递方式，图解就是将很多无法准确或高效用语言传达的内容，以生动形象的图形解释出来。下图是一张经典的对于咖啡种类图解，38种咖啡配方，不必要用多余的文字解释，直接用图解表示，简单明了，清晰易懂。
|
||||
|
||||
|
||||
|
||||
**2. 图表—运用图形、线条及插图等，阐述事物的相关关系**
|
||||
|
||||
图表通常用于简化人们对于大量数据之间的关系的理解。人们通常理解图表会比理解数据要快很多。图表和图解唯一的不同点在于，图解是用可视化的方式去传递信息，而图表则是用来去阐述信息之间的逻辑关系。流程图就是典型的图表。
|
||||
|
||||
下图是一张宠物狗的进化图，用巧妙的方式清晰地向我们传递了，狼是如何被人类驯化成不同种类的宠物狗的。
|
||||
|
||||
|
||||
|
||||
**3. 表格—根据特定信息标准进行区分，设置纵轴和横轴**
|
||||
|
||||
表格是按照行和列或者采用更复杂的结构排列的数据，表格广泛应用于通信、研究和[数据分析](https://www.uisdc.com/tag/数据分析)。其实表格并没有一个确定的定义，它会因为不同的行业和谈论环境而存在差异。
|
||||
|
||||
|
||||
|
||||
**4. 统计图—通过数值来表现变化趋势或者进行比较**
|
||||
|
||||
统计图是根据统计数字，用 几何图形 、事物形象和地图等绘制的各种图形。它具有 直观 、 形象 、 生动 、 具体 等特点。统计图可以使复杂的统计数字简单化、通俗化、形象化，使人一目了然，便于理解和比较。因此，统计图在统计 资料整理 与分析中占有重要地位，并得到广泛应用。
|
||||
|
||||
下图是大城市通勤的时长统计，通过这些柱状图，我们能很清晰的看出各个级别的城市通勤时长的比例关系，并了解他们的拥堵时长和非拥堵时长分别是怎样的情况。
|
||||
|
||||
|
||||
|
||||
**5. 地图—描述在特定区域和空间里的位置关系**
|
||||
|
||||
将真实的世界转换为平面，在此过程中必然要讲一些东西略去。实际上，要说「省略」是地图上最关键的词也不为过，无论是哪种信息地图，最重要的是让用户找到想要看到的信息。
|
||||
|
||||
信息地图也可分为两大类：
|
||||
|
||||
- 第一类，将整个区域的布局或结构完整呈现的地图。
|
||||
- 第二类，将特定对象突出显示的地图。
|
||||
|
||||
以下是美国各州拥有枪支人数占总人数的百分比统计图。
|
||||
|
||||
|
||||
|
||||
**6. 图形符号—不使用文字，直接用图画传达信息**
|
||||
|
||||
所谓图形符号（也就是我们常说的icon），基本就是通过易于理解、与人直觉相符的图形传达信息的一种形式。生活中处处存在图形符号，包括地铁站出入口上的地铁标识，路边的指示牌与限速标识。人们会约定俗成的运用一些符号来代表一些固定的意思，比如厕所门口的男女标识，很多商店为了个性化设计，使用了不常用的符号来表示男女，这会给消费者造成很大的困扰，因为这脱离了他们常见的理解范围。
|
||||
|
||||
图形符号的设计原则是尽可能不使用文字，其作用有两条：
|
||||
|
||||
- 避免语言不通造成的困扰。
|
||||
- 更便捷的、更清晰的传递信息。
|
||||
|
||||
多年来，最经典的图形符号应用案例可以说是奥运会和残奥会的运动图标了。图形符号可以说已经成为奥运会和残奥会的重要组成部分，就像火炬传递和运动会LOGO一样，从赛事门票到奥运村的品牌，图形符号都在被广泛使用。
|
||||
|
||||
下图即为东京奥运会的运动图形符号（局部）
|
||||
|
||||
|
||||
|
||||
#### 达到数据可视化目标的基本方法
|
||||
|
||||
目前我们工作中经常遇到的数据可视化，大多数是制作数据图表（即统计图 Graph），所以我们本文的主要教学内容也是围绕着如何制作统计图来说。
|
||||
|
||||
制作统计图的过程可以被四个步骤，分别是：明确目的、选择图表、视觉设计、突出信息。
|
||||
|
||||
|
||||
|
||||
- 明确目的：明确数据可视化的目标，通过数据可视化我们要解决什么样的问题，需要探索什么内容或陈述什么事实，并选择合适的图表。
|
||||
- 选择图表：围绕目标找到能提供信息的指标或者数据，选择合适的图形去展示需要可视化的数据。
|
||||
- 视觉设计：以可视化的手段将数据转化成有趣的设计语言。
|
||||
- 突出信息：根据可视化展示目标，将重要信息添加辅助线或更改颜色等手段，进行信息的凸显，将用户的注意力引向关键信息，帮助用户理解数据意义。
|
||||
|
||||
##### 1. 明确目的
|
||||
|
||||
大多数情况，明确图表本身要达到的目的，比制作好图表本身更加重要。如果对数据认识不清，就会造成2种结果：
|
||||
|
||||
- 无法拟定合适的图表标题，从而使读者失去阅读图表的兴趣。
|
||||
- 无法选择出正确的可视化方式，从而使图表难以理解。
|
||||
|
||||
**知识点 01：好的图表标题 ―― 等于成功的一半**
|
||||
|
||||
大多数图表都需要一个好的标题，这样才能让面试官知道他们在看什么。
|
||||
|
||||
标题应该是一个结论，是你希望面试官从中获得的信息（有意义并且有趣的部分），而不仅仅是对图表展示内容的概括（即无意义且无趣的部分）。
|
||||
|
||||
|
||||
|
||||
##### 2. 选择图表
|
||||
|
||||
Andrew Abela 根据统计图的主要功能，将所有的统计图分为了四大类：比较、联系、分布、构成。在其资料的基础上，我制作了一套更适合设计师的「图表选择器」（The Way of Data Visualization）。
|
||||
|
||||
|
||||
|
||||
通过上述图表选择器，我们可以轻易的根据我们想要展现的数据的种类，以及我们制作图表的目的，来选择到合适的图表。但是日常工作中，我们往往用不到这么多的图表种类，这个「图表选择器」更适合我们作为学习图表概念的工具。日常工作中，有六种基本图表已经可以覆盖我们大部分的使用场景，也是做数据可视化最常用的六种图表类型。
|
||||
|
||||
|
||||
|
||||
所以作为新手的我们，只要能熟练掌握这六种图表，即可应付大部分的使用场景，而对于我们这种更专业的人士来说，上述的「图表选择器」能够大大提高我们的工作效率。
|
||||
|
||||
##### 3. 视觉设计
|
||||
|
||||
接下来也是数据可视化中最重要的一步，视觉设计。很多时候我们在设计图表时没有既定的规则，全凭借在平面设计和UI设计中获得的知识来进行设计。但之所以数据可视化被单独细化成一个类别，并在国外蓬勃发展，甚至衍生出了专业的数据可视化设计师，就证明在数据可视化领域，很多规则是与其他设计不同的。
|
||||
|
||||
一个最简单的例子，市面上大多数的配色方案都在数据可视化领域不适用。
|
||||
|
||||
**毫无包容性的配色方案**
|
||||
|
||||
首先，适用于数据可视化的配色方案，一定在明度上是有变化的。很多配色方案不仅不具备这种特性，甚至不会考虑包容性。UI设计的配色方案看起来都很绚丽多彩，但是很明显，他们是为了用户界面而设计的。色盲人士往往很难去阅读那些运用了低包容性配色方案的可视化图表。
|
||||
|
||||
|
||||
|
||||
**没有足够多的颜色种类**
|
||||
|
||||
另一个问题就是，大多数配色方案并没有足够多的颜色种类。
|
||||
|
||||
在构建一套完整的可视化图表时，我们往往至少需要6种颜色的调色板来进行设计，我们见过的大多数配色方案并不具有这么多种颜色。
|
||||
|
||||
|
||||
|
||||
虽然这些配色方案同样绚丽多彩，但是他们不能灵活应对图表中复杂的信息层级。
|
||||
|
||||
**难以区分层级的配色方案**
|
||||
|
||||
渐变配色方案可以轻松解决上述两个问题（颜色之间有明显的对比，且可以无限细分颜色种类）。但很抱歉，这样的配色方案同样不适用数据可视化，我们举一些简单的例子大家就可以明白。
|
||||
|
||||
|
||||
|
||||
这些渐变色看起来没什么问题，但是当我们选择其中一个，将其颜色分类扩充到10时，问题就出现了。
|
||||
|
||||
|
||||
|
||||
你能区分出最左边的4个颜色之间有什么差别吗？恐怕很难。
|
||||
|
||||
前面的阐述，大多数是为了让大家对数据可视化有一个清晰的概念。在「视觉设计」这一章我将重点讲解，数据可视化（即图表制作时）需要注意的设计准则。下面的内容主要解决大家在数据可视化中所遇到的三个问题。
|
||||
|
||||
- 如何制作数据可视化图表？
|
||||
- 如何高效快速的制作数据可视化图表？
|
||||
- 如何制作一份兼具实用性和美观性的数据可视化图表？
|
||||
|
||||
#### 适用于所有图表的制作规则
|
||||
|
||||
##### 1. 图表中的线条
|
||||
|
||||
**有无刻度线**
|
||||
|
||||
当数据的数值非常重要时，一定要使用刻度线来让观众更清晰的了解数据。
|
||||
|
||||
如果你的听众只需要了解A数据大于B数据，那么刻度线是没有必要的，只需在坐标轴上使用小刻度即可。如果你的读者要花一些时间在柱状图上并感兴趣A数据是45.65而B数据是37.66，那么使用刻度线将有助于他们理解。
|
||||
|
||||
|
||||
|
||||
**刻度线的颜色**
|
||||
|
||||
如果确定要使用刻度线，则需要使它们比作为实际数据的点或者线条要层级低。因为这些刻度线也属于背景的一部分。
|
||||
|
||||
总结来说，不要使用全黑或者全白的线条。如果你的背景颜色是白色或者浅色系，那么你应该让你的线条灰一些。你也同样可以让这些线条变成亮灰色，点状或者虚线。
|
||||
|
||||
|
||||
|
||||
**负空间的刻度线网格**
|
||||
|
||||
你也可以使用灰色的背景，然后将刻度线反白。这是一种很好的利用负空间做设计的方法。或者刻度线可以用稍微偏黑色一点的灰色，因为很明显这样会让刻度线更融入背景一些。
|
||||
|
||||
|
||||
|
||||
**坐标线**
|
||||
|
||||
坐标线应该比刻度线，线条更粗，颜色更深，才能让整个图表显得更有主次的区分。
|
||||
|
||||
|
||||
|
||||
##### 2. 选择合适的坐标上下限
|
||||
|
||||
**选择合适的坐标下限**
|
||||
|
||||
一般来讲，我们应该把我们的坐标下限设置为0。
|
||||
|
||||
有人会问，这样的话我们的数据就会变得没有那么起伏变化了。那可能是因为你的数据本身就没有那么长势喜人。
|
||||
|
||||
但同样，其实很多事情可以反过来思考，之所以有人愿意不把坐标轴设定为0为起点，其实就是为了在视觉上让人形成对比强烈的感觉，从而突出业绩。这种方法的使用因人而异。
|
||||
|
||||
|
||||
|
||||
比如在小米的发布会中，为了对比，小米把数据的下限起点设置为了10000，从而使小米的跑分数据看似跑赢了友商一倍还多，但其实小米的数据增长，只比友商高出了25%。
|
||||
|
||||
再举个例子：这张条形图也是经福克斯新闻准许使用的。
|
||||
|
||||
|
||||
|
||||
3月31日目标的值为7,066,000，比6,000,000高17.8%，然而第二个柱形几乎是第一个柱形长度的三倍。
|
||||
|
||||
|
||||
|
||||
这也同时提醒我们要注意，在观看别人的图表时，仅仅观看柱状图的高低趋势往往不能得出正确结论，需要注意坐标轴起始位置有没有被人做过虚假处理。
|
||||
|
||||
同样的，有些人为了汇报业绩，也会使每个刻度的跨度不一致，从而提高柱状图整体的对比度。这种情况也应该多留心观察，不要被表面的内容所迷惑。
|
||||
|
||||
|
||||
|
||||
**选择合适的坐标上限**
|
||||
|
||||
坐标轴中另一个需要注意的点即为坐标上限。上限界定的方式有两种，可根据需求自行判断。
|
||||
|
||||
- 如果只是为了比较各个数据的数值，可以用数据的最大值作为坐标轴上限。
|
||||
- 如果是需要将数据与某个最大值比较，则用此最大值作为上限。
|
||||
|
||||
|
||||
|
||||
##### 3. 刻度值
|
||||
|
||||
虽然Y轴的刻度值标签通常放置在刻度线的最左边，但我们也可以把它们放置在其他的地方，比如刻度线的顶部。（但此时一定要把握好亲密性原则，稍不注意就会引起观众的困惑，这也是我们经常会在看其他图表时遇到的问题，到底刻度值标记的是哪一条刻度线？）
|
||||
|
||||
|
||||
|
||||
刻度线和刻度值相辅相成，这会让图表看起来更加规范。刻度值放置在哪里无所谓好坏，只是需要根据不同的场合加以使用。
|
||||
|
||||
**间隔均匀**
|
||||
|
||||
|
||||
|
||||
在坐标轴上应该使用均匀的跨度0,5,10,15,20，而非不均匀的跨度0,3,5,16,50。这里即呼应上方「坐标轴下限」中的最后一点，有时图表制作人也会用不均匀的刻度来蒙骗我们对数据产生误解。
|
||||
|
||||
当然，此处的举例只是夸大了错误的效果，现实生活中的不均匀刻度往往更加隐蔽，需要我们仔细去甄别。
|
||||
|
||||
**不要使用非水平和竖直的文字标注，也不要使用转行**
|
||||
|
||||
有时坐标轴上的注释文字会很多，所以很多人为了妥协，在小空间内显示出所有的文字标注内容，而使用倾斜的文本，或者将文本转行处理。
|
||||
|
||||
不要用过于复杂的设计形式，数据可视化的第一要义是简单易懂，所以在遇到标签文字过长时，可以采用以下方法进行解决。
|
||||
|
||||
|
||||
|
||||
##### 4. 数据的处理与排序
|
||||
|
||||
我们在每次制作前都对数据进行排序，而不是随机排布。这样我们可以在图表中为观众展示更多信息，即某个数据在总的数据库里面的序列。
|
||||
|
||||
**大小排序**
|
||||
|
||||
我们还是从一系列国家的数据开始。
|
||||
|
||||
|
||||
|
||||
目前的排布很随机，或者是按照字母表排序的。接下来我们要按照数值从大到小进行排列。
|
||||
|
||||
|
||||
|
||||
我们随机挑选一组数据，比如玻利维亚(Bolivia)，再上图中，我们只能得到玻利维亚的数据值，以及他大概在数据库中排在中游的位置，仅此而已。但是下图中，根据大小排列好的数据，我们不仅可以获得刚才的两个信息，同时还能马上知道玻利维亚在整个图表中的排名（第四名）。同时你还可以看到吉尔吉斯斯坦（Krygyzstan）和越南(Vietnam)居于榜首而美国(America)是倒数第一，这就是好的图表能给我们带来的「更多的信息」。
|
||||
|
||||
我们再看一遍按照字母表排序的图表，你能轻易的输说出「冈比亚(Gambia)」排名第几吗？
|
||||
|
||||
|
||||
|
||||
**刻意的序列**
|
||||
|
||||
在发布会中我们常常见到，为了突出自己产品的强悍，往往要与友商的数据做对比，在这种情况下，我们的数据也不是随机排布的，我给这种数据排布方法起了个名字，叫「刻意的序列」。
|
||||
|
||||
在 魅族 16th 的发布会中，这张旗舰机重量对比的图表很有讲究，可以发现，除了索尼（最重的手机）以及 魅族 16th（最轻的手机）外，其余所有的手机都是按照降序排列。不看颜色对比，把 236g 的索尼和 152g 的魅族放置在一起进行讲解，以更加突出魅族的轻薄。
|
||||
|
||||
那么这个图表的数据排序其实经过了三次处理。
|
||||
|
||||
- 把重量从高到低排序。
|
||||
- 把重量最高的和最低的手机单独放置，并给予特殊颜色单独显示。
|
||||
- 把这两个数据放置在最后，再次突出对比，吸引观众注意。
|
||||
|
||||
这就是我们学习数据可视化时非常需要注意的细节点，在数据可视化中，细节决定成败。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##### 5. 关于图例的设计
|
||||
|
||||
**数字需要四舍五入**
|
||||
|
||||
我们有时为了保证图表的清晰整洁，并不能完全选择符合数据上限和下限的数字作为刻度，而是选择一些取整的数字。
|
||||
|
||||
同样的，这不仅仅适用于图例中的数字，同样适用于坐标轴上下限的数字。
|
||||
|
||||
|
||||
|
||||
**标记图例的边界比标记图例的范围更好**
|
||||
|
||||
在需要用多种颜色做区分的图表中，有时可以通过标记图例边界而不是标记图例范围的方式，来提高观众的阅读效率。
|
||||
|
||||
|
||||
|
||||
**水平或者垂直方向的图例**
|
||||
|
||||
对于数字的刻度，水平图例往往比垂直图例更加容易阅读，因为这符合我们的阅读习惯。
|
||||
|
||||
|
||||
|
||||
但是，对于有类别区分的图例来说，垂直图例往往效果更好，因为我们可以在图例的右边放置更长的文本（跟坐标轴的注释同样的道理）
|
||||
|
||||
|
||||
|
||||
**删除内部边界**
|
||||
|
||||
有时我们甚至可以更简约的表示图例，当你只想表达一个渐进的过程，24和55之间的差异并不重要，观众只需要知道后者比前者大即可。在这种情况下，我们可以尝试只标记出图例的最大值和最小值，而不必要标记出每个边界或者颜色，这样可以给观众减少不必要的信息负担。
|
||||
|
||||
|
||||
|
||||
##### 6. 图表上的文字信息
|
||||
|
||||
文字标注的作用，不是来填充空白的，而是用来强调相关信息或拓展额外的背景知识的。
|
||||
|
||||
**引用消息来源**
|
||||
|
||||
大多数情况下，我们制作的图表都不会将原数据附在旁边，因此最好在图表中引用你的数据来源。一般来说，引用规则是在左下角防止数据来源信息，往往采用特殊字体。
|
||||
|
||||
|
||||
|
||||
引用消息来源，既可以方便你随时索引数据来源（就像我文章开头的每一个图表都标注出了他的原标题+索引网址），也可以增加数据的可信度。（有趣的事，人人往往不会关注数据来源于哪里，只要有来源，就会大大增加人们的信服感）
|
||||
|
||||
|
||||
|
||||
**用数字辅助表达**
|
||||
|
||||
有时你需要在你的图表中标注出数据值，而不仅仅应该依赖视觉元素向观众传达信息。
|
||||
|
||||
|
||||
|
||||
通常来说，不需要太严谨的图表，我们会对数据值进行一定程度的处理。
|
||||
|
||||
- 有小数的值四舍五入。(234.19 ―― 234)
|
||||
- 在数据的量级非常大时，将一定位数数字取整。（52,133 ―― 52,000)
|
||||
- 当所有数据的量级都非常大时，将一定位数的数字缩进单位中。（521,000,000 元 ―― 5.21 亿元）
|
||||
- Y轴刻度值尽量转化为千位分隔符，如K，M，B。
|
||||
- Y轴最大值取值要恰当，保证图表占据2/3以上。
|
||||
|
||||
如果我们不这样处理，你就会发现你的图表总是不那么整洁。
|
||||
|
||||
##### 7. 控制字体的数量
|
||||
|
||||
图表中的字体数量以及字体大小的种类加起来不要超过3种（标题和副标题除外）。通常来说，我们在制作时会把注释和坐标轴标签设置为两种字体样式，所以只需要确保将这两者统一起来，那么就可以保证我们的图表不超过3种字体样式。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 柱状图的制作规范
|
||||
|
||||
**1. 柱状过宽或过窄**
|
||||
|
||||
|
||||
|
||||
过宽的柱会让图表看起来笨重，尽量保持柱的轻薄，这样可以保持优雅的外观，但是太薄了会让用户很难对数据进行比较。
|
||||
|
||||
标准的数值为，柱的宽度为「柱与柱间距」的2倍，当然这只是个参考值，实际我们根据不同的情况，对宽度作出调整。
|
||||
|
||||
|
||||
|
||||
##### 2. 尽量不要超过7个值
|
||||
|
||||
一般进行数据比较时，柱状图建议不要超过5个数据值，对于条形图来说，建议不要超过7个数据值。
|
||||
|
||||
#### 折线图的制作规范
|
||||
|
||||
**1. 有层次区分的折线/曲线**
|
||||
|
||||
当我们在制作一个复杂的折线图时，我们想要显示其中的一条数据，最好的方法就是加强它与其他元素的对比，从而提高它的重要性层级。
|
||||
|
||||
- 利用我们之前的方法，把其他的数据变为灰色。
|
||||
- 将我们需要强调的曲线置于顶层。
|
||||
|
||||
|
||||
|
||||
**2. 什么时候是用折线图**
|
||||
|
||||
2017年1月和2月的大米出口量是相关的，他们代表一种数据在不同时间下的数据值，因此我们可以用折线图将它们连接起来。但是2017年1月的大米出口量和玉米出口量（16万吨）是不相关的，所以我们不能随便用折线图来代替柱状图。
|
||||
|
||||
|
||||
|
||||
用折线图可以很好的表示每天去医院的人数，因为统计每天去医院的人数可以用来观察趋势。
|
||||
|
||||
**3. 按照时间推进的数据并不能总是用折线图来表示**
|
||||
|
||||
有时我们也需要进行一些区分。如果我们想要绘制美国大规模枪击事件的伤亡人数随时间推移的图表。这些枪击事件确实是一个接一个发生的，但是它们本质上却没有关系，所以你不能用折线图（应该用条形图）。
|
||||
|
||||
但是，如果按年份对它们进行归类，并计算每年的伤亡人数。这样的情况下可以使用折线图进行统计，因为统计结果的趋势变化是有意义的，是可以得出相应的结论的。
|
||||
|
||||
**4. 使锯齿状的线条平滑**
|
||||
|
||||
如果你的折线上下浮动过于剧烈，那么你应该尝试拉长时间间隔，比如不每天采样而以周为单位来采样。观众们不会去阅读锯齿状的线条，或者说他们不会喜欢这样的图表。
|
||||
|
||||
|
||||
|
||||
**5. 在你的折线图中绘制数据点**
|
||||
|
||||
当有些特定的数值特别重要时，我们可以在线条上标注出他们，如果你有大量的数据需要展示，或者你只想展示数据的走势，那么其实你只需要使用折线就足够了，不需要增加数据点。不信你可以试试，大量的数据点 = 混乱不堪的界面。
|
||||
|
||||
|
||||
|
||||
#### 饼图的制作规范
|
||||
|
||||
饼图和圆环图在数据可视化方面生病狼藉，但却是使用的最频繁的图表之一。饼图是一种应该避免使用的图表，因为肉眼对面积大小不敏感，并且几乎没有对与角度大小的概念。更何况是肉眼完全无法重合比较的图形。
|
||||
|
||||
|
||||
|
||||
例如上面左图，我们很难去比较每日从肉类（Meat）中摄入的卡路里与从糖类（Sugar&Fat）中摄入的卡路里数量的比例。人眼的直觉中，糖类与肉类的比例应该在2：1左右，但实际的比例却是1.5：1。
|
||||
|
||||
上述右图将这一现象放大的更加明显。人眼的直觉中，办公与接待的数值差距非常大（这是由于我们直觉更习惯从面积上做判断），但实际上接待与办公的比例为1.5：1。
|
||||
|
||||
很多设计师认为饼图应该是被禁止使用的图表，我觉得不能说的太绝对，不管怎样，迄今为止事实情况是，仍然有很多人在使用饼图，所以我们至少可以争取正确的使用他们。
|
||||
|
||||
虽然如此，但是在强调个体与总体的比例关系方面，饼图还是有其独特的优势。
|
||||
|
||||
**1. 避免过度分割饼图，否则最终会导致根本无法阅读**
|
||||
|
||||
|
||||
|
||||
那么有同学会问：分割多少块是过度分割？这是一个需要在实际制作时进行判断的问题。一个简单的方法，如果我们已经很难从图中看出其中一块扇形是另一块的两倍大了，或者好几块较小的扇形看起来差不多大时，那么就不能再分割了。此时可以考虑把较小的类目归入一个更大的：「其他」模块。
|
||||
|
||||
如果一定要给出一个确切的分类数目，我认为一般不要超过9个，超过的话，建议用条形图来展示，不要太依赖于饼图。
|
||||
|
||||
|
||||
|
||||
例：这张饼图来自维基百科，它展示了国家的不同区域。
|
||||
|
||||
左边这张饼图已经分割出了无数个扇形了，但旁边另分离出一张饼图，显示出了左图中更多的，看不到的更小国家的情况，以此来提供更多的信息。其实还有很多的方法可以展示这组数据，例如树状图或者普通的地图。局限较大的饼图只适用于展示只有几组值的数据。
|
||||
|
||||
除饼图外，环形图（甜甜圈图）亦可表示占比，其差异是将饼图的中间区域挖空，在空心区域显示文本信息，比如标题，优势是其「空间利用率更高」。
|
||||
|
||||
|
||||
|
||||
**2. 饼图的起始位置要得当**
|
||||
|
||||
人们的阅读习惯往往是从12点钟开始的（跟表盘类似）。所以我们在制作饼图时也要遵循观众的阅读习惯，从12点钟方向开始制作，这样才能呈现出更加清晰的数据。
|
||||
|
||||
|
||||
|
||||
**3. 饼图的顺序要得当**
|
||||
|
||||
这个规则与其他的数据图表一致，我们在拿到数据后，不要急于去进行数据可视化，而是应该对数据进行排序处理，一般来讲，我们对于图表都要进行从大到小的数据排序，才更有利于我们展示数据，但是有一个例外的情况。
|
||||
|
||||
当数据中包含一个类别叫「其他」时，无论其他的内容占比为多少，我们最好都把他放置在饼图的最后来展示。
|
||||
|
||||
|
||||
|
||||
**4. 切割的展示方式**
|
||||
|
||||
有时，我们可以想一些创意形式来解决饼图对比不够明显的问题。
|
||||
|
||||
|
||||
|
||||
当我们将饼图分拆开来设计时，将他们设置为同一起点，我们可以清晰的对比出数据的大小，但严格意义上来讲这已经不算是饼图了。
|
||||
|
||||
#### 散点图的制作范围
|
||||
|
||||
**1. 散点图可以承载最多四个维度的变量**
|
||||
|
||||
当包含多重变量时，散点图本身包含2个维度的数据，当出现更多维度时，我们可以通过改变散点的颜色和大小甚至是形状来对数据进行更多维度的划分，这个时候，散点图即变成了气泡图。
|
||||
|
||||
|
||||
|
||||
**2. 尽量为散点图添加趋势线**
|
||||
|
||||
通过添加趋势线，可以更好的让观众感受数据的变化，人们不会愿意接受未处理的数据，往往倾向于接受已经被处理好的数据结果。
|
||||
|
||||
|
||||
|
||||
#### 面积图的制作规范
|
||||
|
||||
面积图又叫区域图，与折线图很相近，都可以用来展示随着连续时间的推移数据的变化趋势。区别在于，面积图在折线与类别数据的水平轴（X轴）之间填充颜色或者纹理，形成一个面表示数据体积。相对于折线而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而不是确切的单个数据值。面积图有三种不同的形态，根据数据以及背景的不同，均有其最佳的展示环境。
|
||||
|
||||
**1. 尽量不重叠，使用透明色**
|
||||
|
||||
当图表中要展示多组数据时，最好保证所有的数据都不重叠，这样才可以更好的展示数据。如果无法避免重叠，则应该适当的设置颜色和透明度，使得重叠的区域变得更加易读。
|
||||
|
||||
|
||||
|
||||
**2. 不要超过四个类别**
|
||||
|
||||
####
|
||||
|
||||
面积图只适合展现少量的数据，最多建议不要超过四个类别，否则就会导致非常难以识别。因此在多个类别下，要尽量避免使用面积图。
|
||||
|
||||
|
||||
|
||||
#### 突出信息
|
||||
|
||||
**1. 重要的内容用颜色区分**
|
||||
|
||||
有时我们为了突出展现某部分数据，需要对它们进行特殊的处理（包括添加辅助线，更改颜色，线条粗细等方法）来加大它们与其他数据的对比，以吸引用户注意，并表明你想陈述的观点。
|
||||
|
||||
|
||||
|
||||
如上左图，通过添加辅助线和标红的方式，来显示快递公司未达到60万件派件标准的月份，从而突出显示公司业绩不合格部分。如上右图，通过对9月份的颜色区分，来突出显示二手房价格在9月份达到前所未有的高度。
|
||||
|
||||
**2. 把不重要的内容变为灰色**
|
||||
|
||||
对于不太重要的内容，我们通常会把它们的层级降低，将其变为灰色往往是一个好方法。（如上左图中1-6月与9月数据的配色，以及上右图中1-8月数据的配色）
|
||||
|
||||
通常来说，我们会用灰色来标记：
|
||||
|
||||
- 未被选中的元素或者背景。
|
||||
- 为重要的数据点做对比的数据。
|
||||
- （在交互图表中）不是当前选中的元素。
|
||||
|
||||
|
||||
|
||||
**3. 没有那么多重点信息**
|
||||
|
||||
如果你觉得每个信息点都很重要，然后为他们都做了特殊的备注，那么请把他们都去掉，因为那恰恰证明他们都不重要。
|
||||
|
||||
数据可视化的精髓就在于你去用视觉元素去帮助用户做筛选，如果观众们真的很想知道每个数据代表什么，那或许你应该给他们展现一份表格而不是图表。
|
||||
|
||||
|
||||
|
||||
**4. 添加必要的辅助说明**
|
||||
|
||||
|
||||
|
||||
关于这个图表，如果我们不进行标注的话，它只能讲述故事的一部分。如果要把故事讲述的全面，那么就必须添加一些标注。
|
||||
|
||||
如果我告诉你，这个图表想告诉我们，在第6天的时候该团队使用了敏捷开发，在使用新技术初期，Bug数量明显上升，而后瞬间下降。加上了标注，图表讲述了一个跟之前完全不一样的故事。
|
||||
|
||||
所以，我们为了更好的说明我们的目的，有时需要对图表进行特殊处理，包括做一些突出某些信息的标注。
|
||||
|
||||
**5. 添加必要的辅助线**
|
||||
|
||||
这一点主要针对于柱状图和折线图，比如当我们想要呈现两个不同时期的数据变化时，添加辅助线可以更直观地体现出其中的变化。
|
||||
|
||||
比如像这个图表，为了体现出响应速度有很大的提升，，添加了相关辅助线并标注了相应的数字，使 PRO5 和 SONY Z3+ 之间的对比更加明显。
|
||||
|
||||
|
||||
BIN
智慧交通/应急大数据.png
Normal file
BIN
智慧交通/应急大数据.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Reference in New Issue
Block a user