数据可视化设计的一些技巧
一、什么是数据可视化
把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。
在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。
二、什么是大屏数据可视化
大屏数据可视化是以大屏为主要展示载体的数据可视化设计。
“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。
利用面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论、决策，故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。
三、大屏数据可视化设计原则
设计服务需求
大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。
那什么是业务需求呢？
业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。
先总览后细节
大屏因为大，承载数据多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。可以通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户需要时可通过鼠标点击等交互方式唤起。
四、大屏可视化设计流程
1. 根据业务场景抽取关键指标
关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。
确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。
2. 确立指标分析维度
同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。
我们在选定指标后，就需要跟项目组其他小伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步的讲，是我们想通过可视化表达什么样的规律和信息。
我们可以从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。
1.联系：数据之间的相关性
2.分布：指标里的数据主要集中在什么范围、表现出怎样的规律
3.比较：数据之间存在何种差异、差异主要体现在哪些方面
4.构成：指标里的数据都由哪几部分组成、每部分占比如何
3. 选定可视化图表类型
当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里，筛选出最能体现我们设计意图的那个就好了。选定图表注意事项：易理解、可实现。
易理解：
就是可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。
可实现：
（1）我们需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现。
（2）我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难。同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难。
所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计！一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。
4. 制作图表
当确定了要使用哪些图表做图后，开始进入制作流程，影响最终图表展现效果的元素一般分为两个层面：
非数据层：
不受数据影响样式的元素，比如说背景、网格线、外边框等等。这类元素起到的是辅助阅读作用，但如果不加处理全部放出，视觉上会显得杂乱和不够简洁，干扰到你真正想展示的信息。对于这类元素，应该尽量隐藏和弱化。
隐藏
·去除不必要的背景填充
·去掉无意义的颜色变化
·去掉不必要的外框
弱化
·坐标轴淡色或隐藏
·网格线淡色或隐藏
数据层：
受数据影响样式的元素，比如说柱状图的柱条长度，柱条颜色，柱条展示个数，气泡图气泡大小等等，这类元素的展示效果和图表本身的数据息息相关，一旦图表本身的数据比较极端，有可能会使得最终视觉展现不尽如人意，我们无法改变具体的数据，是否就完全无法操控这些元素了呢？
精简数据项
在做数据报告时，不管有多少数据项，为了完整和精确性，所有的内容都会显示出来，但在大屏中，如此满的数据展示，不但忽略了视觉体验，还会让用户抓不住重点，对于饼图来说，建议扇区个数不要超过5个，例如保留占比前5的扇区，剩下的非重点数据全部归到“其他”。
保留前五或后五
如果柱状图的数据项过多，展示时会过于密集，建议先把数据项按照数值大小排序，只保留前五或后五的数据项。
5. 页面布局、划分
尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。
6.可视化设计
根据选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有：指标类信息点和地理类信息点两大可视化数据。
指标类信息点可视化效果相对简单易实现，而地理类信息点一般可视化效果酷炫，但是开发相对困难，需要设计师跟开发多沟通的。
地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的。
数据可视化大屏设计少不了动效，动效是可视化重要的组成部分，动效的增加能让大屏看上去是活的，增加观感体验。但过分的动效极其容易喧宾夺主，让观看者的眼球不知道往哪里聚焦，反而弱化了数据的展示。
7.样图沟通确认
样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个“低保真”原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一下子走到终点，然后又大修大改的情况。
因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点，所以这一步我们需要用尽可能简单的方法 ，把之前几步的成果在页面上快速体现出来，然后根据样图效果尝试确定五方面内容：
1.之前确立的布局在放入设计内容后是否依然合适；
2.确立的图表类型带入数据后是否仍然客观准确；
3.根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受；
4.已有的样式、数据内容、动效等在开发实现方面是否存在问题；
5.大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。
大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现。所以这一步在样图沟通确认环节非常重要，有时候需要开发出demo，反复测试多次。
8.页面定稿、开发
事实上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工作在定义好分析指标后就已经开始进行了，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来。
一般开发用代码写不出的样式或动效，都需要设计师切图作支持：比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。
9.整体细节调优与测试
这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。
视觉方面的测试：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。
性能与数据方面的测试：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在奔溃、卡死等情况；后台控制系统能否正常切换前端页面显示。
五、大屏设计的注意事项
1. 字体使用
字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。
如果页面是云端部署，需要嵌入字体包时，我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。
一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字
2. 颜色搭配
（1）色彩明度与饱和度差异显著、对比鲜明， 尽量避免使用邻近色配色
3. 页面布局
主次分明、条理清晰、注意留白，合理利用大屏上各小的显示单元，并尽量避免关键数据被拼缝分割。
六、问题
设计稿投到大屏上显示效果不佳怎么办？
大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下，我们应该在设计开始前，就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品，然后投上去查看实际效果。
因为大多数时候大屏都会存在色彩偏差，这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现。如果不可以，那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面，样图沟通环节及时测试也很重要。
文章来源：优设 作者：Captain相
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
语言交流是人类的本能，近几年语音交互的迅速崛起让产品更加人性化了。然而即使不考虑技术限制，人与机器的互动也不是只有听或说单一模态的，因为这不符合我们的自然交流。目前，在居家场景中，用户与电视的交互依然是对众多信息-图像、语音、触感-的同时处理，它们分别对应着观看、听说和必要的遥控器操作。对UX设计师而言，如何让电视端同时承载这样多的感知设计是值得思考的。
语音体验设计是一个很大的系统，从用研、功能、内容到交互、技术实现等等，而GUI的展示只是一种辅助模态。今天我想探讨的是如何结合GUI与VUI展开界面设计。
文章分两个部分：电视端VUI的搭建和一次改版迭代。
1. VUI的构成
2. 改版需求
3. 界面改版
4. 设计验证
“Voice User Interface (or VUI) is an interaction model where a human interacts with a machine and performs a set of tasks at least in part by using voice.”
<Voice User Interface Design>
VUI：是一种交互模态，让人能够或多或少通过语音交互与机器共同完成一系列任务；
领域：是将用户想要完成的任务分为一些大的类型，比如视频领域、音乐领域、百科领域等；
意图：指某领域下的具体任务，比如视频领域下的“我想看某部电影”，即为影视搜索意图。
小明：“给我推荐点美剧”；
电视：“看看这些有没有你喜欢的”，并推送一些热门美剧；
小明：考虑了一会儿....说“风骚律师吧”；
电视：起播《风骚律师》。
在这个故事中，除了众所周知的VUI应具备的基础功能-听和说-以外，我们还需要定义更完整的体验流程：
1. 小明如何开启与电视的对话？因为电视机不能一直处于聆听状态，那样很可能会识别用户无意图的语言，从而误响应。
2. 电视端应该以什么方式推荐美剧？如果只一个个播报片名，小明会记不住。
3. 推荐几部合适？隔空喊话的情况下（远场语音，下图解释），最好不需要再用遥控器翻页。
4. 如果小明问的是其他领域问题，比如天气、歌曲、球赛等，对应的媒体资源会涉及到多样化的信息类型，如图形、音频等。不仅要统一设计风格，还要为未来可能支持的新领域/新意图预留承载框架。
5. 如果小明的询问得到了错误答复，或者一直未被答复，除了技术上提高识别率和语义理解程度，该怎么缓解用户的茫然和愤怒情绪？
6. 当小明问了一个问题，不被理解，但换个问法却成功理解。如何教会小明尽可能一次就做出能被识别的表达？
7. 我们能支持几十个领域、几百种意图，怎样能让小明知道一共有哪些？
8. 如何结束对话，以免电视一直聆听造成误识别？
9. ......
为了回答以上问题，我们经过大量的模拟对话、竞品分析和demo体验，从而定义了电视端VUI的交互流程和组成模块：
唤起、聆听、思考、反馈、退出：
电视端的语音有三种对话状态：
1. 单轮对话：每说一句话都需要唤起一次语音；
2. 多轮对话：一次唤起，多轮对话，但轮数受限于领域范围；
3. 全双工模式：一次唤起，多轮对话，轮数不限。
图源网络
这是本文重点描述的部分，电视端的GUI包括：
1. 状态指示动画：告知用户当前状态；
2. 提示词条：提示用户有哪些说法；
3. 用户指令：用户说法的文字识别结果，它让人知道自己说的话是否被正确识别，若出了错，用户就知道原来是错在这一环节；
4. 电视答复：文字+音频；
5. 内容展示：所有媒资内容的呈现，如果没有，则不展示。比如，天气需要展示图像，而交通限行用一句话回答即可。
旧版设计方案概览：
语音GUI分为两块：语音基础界面（必须）和内容展示区（可选），基础界面包括上图中的1234内容。
上图效果是从17年逐渐搭建起来的框架，随着需求增多、不同设计师的参与，设计越来越碎片。从易用性、视觉、开发维护难度和新功能兼容上，都存在很多问题：
1. 布局调整
由于电视用户使用最多、最重要的功能是观看影视，所以优先考虑视频领域。因此布局调整的优先顺序是：基础界面>视频领域>其他领域。
2. 建立视觉规范
建立原子化设计规范：配色方案、文字、间距、圆角、图标，以及可复用和拓展的组件、模版。
3. 统一状态动效
将上文的5种基础状态结合全双工状态统一设计，并为未来可能开发的主动提示等状态，预留一席之地。
经过竞品分析，穷举了7种可能的布局方式：
这么多的优缺点该如何取舍？我们将痛点归类，并根据通用的交互原则排列了优先级：
最后决定用B1-底部长矩形，但设计UI时需要借鉴B2那样增加一点渐变过渡。而针对B1的痛点，需要重新设计小面积状态指示动画，并定义好低栏左侧的识别文字与右侧的提示词条之间间距，从技术上，我们能做到跟进用户说话和播报内容，说一句、展示一句。
电视端就像是一块自由发挥的大画布。视频海报的摆放，得从几个方面考虑：
1. 背景占比：半屏、全屏、半屏至全屏；
2. 导航方式：宫格（我们的海报尺寸是可以统一的，所以不考虑瀑布流，此阶段也没有专题分类，无需考虑tab栏和泳道栏）；
3. 海报方向：横幅、竖幅；
4. 展示数量：是否超过一页、海报尺寸。
市面上的竞品就有这几种方案：
行为数据显示，我们用户的视频意图分两种：明确自己想看什么－“播放陈情令”，和不明确目标、向电视寻求推荐－“推荐点古装剧”。我们分别称为普通推荐和个性化推荐。由于前者在大多数情况下内容较少，所以用半屏，后者则用全屏。由于视频会单独设计一个APP，故最后定的普推和个推的坑位都是十张：
上面确定了视频领域，而其他几十个领域的信息，同所有平面设计的信息一样，都是文字、图片、图标的排列组合，可以把它们按照原子化设计系统，从分子到模版逐步搭建：
这样的结构，能确保20多个带内容的领域都能从中找到对应的排列方式，模版如下表。这里看起来可能比较抽象，可以先看后面的UI效果图再回来看这里。
实际界面中，内容可能会以前面的任何一种排列形式出现，给较少的内容使用大背景是浪费，反过来则拥挤杂乱，故不同内容需要不同的背景。依然还是穷举了5种背景待选择：
1. 卡片
2. 悬空半透明容器
3. 半屏羽化背景
4. 半屏实心背景
5. 全屏背景
按照痛点的优先级打分：
可见方案d-半屏实心背景最佳，但它最适合内容量级为中等的情况。所以我们考虑了是否也采用卡片和全屏来适应内容过少和过多的情况。最后结论是：只采用方案d和e，舍弃a，因为d的背景高度可以随内容的多寡而变化。这样以来，设计就不会很碎片化了。
到这里，已经确定了语音基础界面（低栏）、各领域信息排列方式和背景。接下来就像搭积木把它们组合起来，这一步重点考虑的是内容是否上焦点和翻页，这需要根据具体领域的资源参数和使用场景甄别。
正好在做这个项目时，我们电视端的视觉规范也在完善中，所以焦点色、文字、栅格等规范是直接从规范库搬过来的。
实际效果：（抱歉GIF原图太大了，只好展示一小截。手机拍摄有一点色差，实际的色彩还原度是很高的。）
我们找来40名用户体验新旧版本语音，进行了偏好测试和用户反馈收集，部分反馈如下：
40名用户中，有80%认为新版更好，分别有12.5%和7.5%的人认为两者差不多和旧版更好。这次的改版中，UI&交互、动效、颜色&背景三者，体验感分别提升了12%、2%和7%。
当时大家对新版评价最高的是：简洁易看、空间利用率高、布局更好。
吐槽最多的问题是：背景色太深、配色单一，动画不够好看、不够明显。我们随即对背景色做了优化，上图看到的是优化后的效果。
后续兼容性验证：新版结构能较好适应节假日换肤、半屏小程序、第三方App适配等多种需求。
文章复盘了电视端语音的基础界面、视频领域、其他领域和背景的重构过程。主要用到的方法有原子化设计理论、竞品分析、痛点云图（表格形式）和用户偏好测试。对界面布局有较好的优化效果。最大的收获是掌握了从最底层元素展开剖析的方法，这种细致的方法用来搭建界面设计会很稳固、全面，并且拓展性强。
经验和不足：
1. 大屏经常强调沉浸式体验，因而电视端叠加功能很多，但必须要注意分个主次。一是叠加内容不能太多，要么就不叠加、全屏展示。二是一定要考虑背景播的不确定因素，避免花乱；
2. 上面只是分析了二维平面，还有次级页面、时序等三、四维的规则还未深入学习研究。这样的研究会对所有App设计都有更好的指引。
3. 我们虽然已有了简单的导航、栅格等布局规范，但内容展示区依然是毫无章法的自定义排列，智能电视产品还没有像手机、PC一样较成熟的设计框架，我觉得苹果的tvOS模版规范做的比较稳定，我们也应该借鉴，形成自己的风格。
文章来源：优设 作者：lady珠珠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
数据可视化即数据的图形表示，旨在以更易于掌握和理解的有效方式传达大量海量数据。从某种意义上说，数据可视化是原始数据和图形元素之间的映射，它决定了这些元素的属性如何变化。可视化通常是通过使用图表，折线或点，条形图和地图来进行的。
Data Viz是描述性统计的一个分支，但它需要设计，计算机和统计技能。
美学和功能齐头并进，以直观的方式传达复杂的统计信息。
Data Viz工具和技术对于做出以数据为依据的决策至关重要。
在形式和功能之间取得了很好的平衡。
每个STEM领域都将从了解数据中受益。
Jorge Rey的化石燃料Dataviz
如果我们能看到它，我们的大脑就可以内在化并对其进行反思。这就是为什么理解图表和查看趋势比阅读大量的文档要花费大量时间和精力进行合理化更容易和有效的原因。我们不想重复人类是视觉生物的陈词滥调，但这是事实，可视化更加有效和全面。
在某种程度上，我们可以说数据Viz是讲故事的一种形式，目的是帮助我们根据数据做出决策。这些数据可能包括：
追踪销售
识别趋势
识别变化
监控目标
监测结果
合并数据
秘密7 –塞尔吉奥·费尔南德斯（Sergio Fernandez）提出离婚可视化的理由
数据可视化对于每天处理大量数据的公司很有用。必须立即显示您的数据和趋势。胜过浏览庞大的电子表格。当趋势立即脱颖而出时，这也可以帮助您的客户或观看者理解它们，而不会迷失在混乱的数字中。
话虽如此，Data Viz适用于：
年度报告
简报
社交媒体微叙事
信息手册
研究
趋势贩运
SciViz
烛台图，用于财务分析
确定路线
可以看到数据可视化的常见情况是在销售和营销，医疗保健，科学，金融，政治和物流中。
娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金统计信息图
简短的答案：决策。数据可视化具有快速识别模式和解释数据的不可否认的好处。更具体地说，它是确定以下情况的宝贵工具。
识别变量关系之间的相关性。
获得有关受众行为的市场见解。
确定价值与风险指标。
随时间监视趋势。
通过频率检查速率和潜力。
应对变化的能力。
太空垃圾-BBC科学焦点，作者：Federica Fragapane
您可能已经猜到了，Data Viz不仅仅是简单的饼图和图形，而且还具有视觉吸引力。该分支用于可视化统计信息的方法包括一系列有效类型。
地图可视化是一种很好的方法，可以分析和显示与地理位置相关的信息，并通过地图准确地将其呈现出来。这种直观的方法旨在按区域分布数据。由于地图可以是2D或3D（静态或动态），因此可以使用多种组合来创建Data Viz地图。
COVID-19支出数据可视化POGO，George Railean
但是，最常见的是：
区域地图：显示国家，城市或地区的经典地图。对于每个区域中的不同特征，它们通常以不同的颜色表示数据。
线图：它们通常包含空间和时间，由于对特定场景进行了分析，因此通常是路线选择的理想选择，尤其是该地区的驾车或出租车路线。
点地图：这些地图分发地理信息的数据。它们是企业确定区域中建筑物确切位置的理想选择。
热图：它们根据特定属性指示地理区域的权重。例如，热图可以按区域分布感染者的饱和度。
图表以图形，图表和表格的形式显示数据。由于图形确实是图表的子类别，因此它们经常与图形混淆。但是，两者之间的差别很小：图形显示数据组之间的数学关系，并且仅是表示数据的统计图方法之一。
图表数据可视化，作者：Madeline VanRemmen
顺便说一句，让我们谈谈数据可视化中最基本的图表类型。
条状图
他们使用一系列的条形图来说明数据。它们是较轻量数据的理想选择，并遵循不超过三个变量的趋势，否则，条形变得混乱且难以理解。
饼状图
这些熟悉的圆形图按部分划分数据。切片越大，部分越大。它们非常适合描述整体的各个部分，它们的总和必须始终为100％。当您需要显示一段时间内的数据发展或缺少任何部分的价值时，请避免使用饼图。甜甜圈图与饼图具有相同的用途。
线形图
他们使用一条线或多条线来显示随着时间的发展。它允许同时跟踪多个变量。一个很好的例子是跟踪品牌多年来的产品销售情况。面积图与折线图具有相同的用途。
散点图
这些图表使您可以通过数据可视化查看模式。它们有两个不同值的x轴和y轴。例如，如果您的x轴包含有关汽车价格的信息，而y轴包含有关薪水的信息，则正向或负向关系将告诉您某人的汽车所反映的薪水。
表格
与我们刚刚讨论过的图表不同，表格几乎以原始格式显示数据。当您的数据难以以视觉方式呈现，并且旨在显示应该阅读而不是可视化的特定数值数据时，它们是理想的选择。
数据可视化| Aishwarya Anand Singh的养蜂与否
例如，图表非常适合显示特定区域内一段时间内特定疾病的数据，但是当您还需要了解具体原因（例如原因，结果，复发，治疗时间和治疗方法）时，最好使用表格。
它们并没有什么不同，因为它们在视觉上都代表数据。通常，您搜索信息图表并找到标题为“数据可视化”的图像，反之亦然。但是，在许多情况下，这些标题都不会引起误解。这是为什么？
数据可视化仅由一个元素组成。它可以是地图，图表或表格。另一方面，信息图表通常包含多个Data Viz元素。
与可能简单或极其复杂且繁重的数据可视化不同，信息图表简单易行，并且面向更广泛的受众。即使对于信息图表代表的研究领域之外的人，后者通常也是可以理解的。
有趣的是，数据Viz不提供叙述和结论，而是提供这些叙述和结论的工具和基础。虽然信息图表在大多数情况下提供了故事和叙述。例如，数据可视化地图的标题可能是“按区域划分的空气污染饱和度”，而带有相同数据的信息图则显示为“ A区和B区在C国污染最严重”。
数据可视化可以在Excel中进行，也可以使用其他自动生成设计的工具，除非将其设置为演示或发布。但是，信息图表的美学非常重要，其设计必须吸引更广泛的受众。
在交互方面，数据可视化通常提供交互式图表，尤其是在线形式的图表。另一方面，信息图表很少互动，通常是静态图像。
Skype通过可视化.com进行可视化
该过程自然类似于创建信息图表，并且围绕了解您的数据和受众。更准确地说，这些是准备有效的数据可视化以使您的查看者立即了解的主要步骤和最佳实践。
准备工作已经完成了一半。在甚至开始可视化数据之前，必须确保您了解该数据的最后细节。
不可否认的是，了解您的数据查看对象是另一个重要部分，因为不同的人对信息的处理方式不同。您要为数据可视化的对象是谁？他们如何处理视觉数据？只需给他们一张饼图就足够了，否则您将需要更深入的可视化报告？
您正在可视化什么样的信息，它能反映出您的目标吗？
最后，考虑要使用多少数据并加以考虑。
图片来自Brodie Vissers
在上一节中，我们列出了可在数据可视化中使用的基本图表类型。要确定最适合您工作的人，需要考虑的因素很少。
图表中将有多少个变量？
您将为每个变量放置几项？
值之间的关系是什么（时间段，比较，分布等）
话虽如此，如果您需要展示整个项目的各个部分，那么饼图将是理想的选择。例如，您可以使用它来展示特定产品的市场份额的百分比。但是，饼图不适用于时间范围内的分布，比较和跟踪趋势。在这些情况下，条形图，散点图，s和折线图更为有效。
另一个示例是如何在图表中使用时间。使用水平轴会更准确，因为时间应该从左到右。它在视觉上更直观。
Oberhaeuser的MagnaGlobal广告市场海报
首先删除所有不会增加价值并且基本上是图表多余的数据。有时，您必须处理大量数据，这不可避免地会使您的图表变得非常复杂且难以阅读。不要犹豫，将您的信息分成两个或多个图表。如果这对您不起作用，则可以使用突出显示或使用更合适的内容更改整个图表类型。
提示：使用条形图和柱形图进行比较时，请按值（而不是字母顺序）以升序或降序对信息进行排序。
图片由萨曼莎·赫尔利（Samantha Hurley）
在每种可视化形式中，颜色都是您最好的朋友和最强大的工具。它们产生对比，重音，强调并直观地引导眼睛。即使在这里，色彩理论也很重要。
设计图表时，请确保不要使用超过5或6种颜色。除此之外，任何其他操作都将使您的图表不堪重负，并且难以为观众阅读。但是，您可以使用颜色强度来发挥自己的优势。例如，当您在不同的时间段内比较同一概念时，可以将数据从所选颜色的最浅阴影到其较深的颜色进行排序。它会创建适合您时间线的强烈视觉效果。
选择颜色时要考虑的事项：
不同类别的颜色不同。
系列中所有图表的采用一致调色板，方便以后将进行比较。
最好使用对色盲友好的调色板。
Jamie Kettle可视化塑料废物污染数据
当您想成为数据可视化设计中的佼佼者时，请多多发挥自己的灵感。查看优秀的示例、信息图、其他人的工作，并了解哪种方法最适合您需要实现的每种数据。
下图这个Twitter帐户数据可视化是一个很好的例子。同时，我们还将精选一些令人称赞的示例，这些示例将使您有信心开始为数据创建视觉效果。
lilit Hayrapetyan创作的大数据纪录片的人脸
作为另一种艺术形式，Data Viz为一些令人惊叹的精心设计的图表提供了沃土，这些图表证明了数据也可以是美丽的。现在，让我们来看看一些例子。
我们从孟小伟的个人项目开始，介绍他玩《黑暗之魂3》的经验。这是信息图表和数据可视化也是个人设计工具的完美例子。这项研究非常庞大，但非常专业地归类为针对不同概念的不同类型的图表。所有数据可视化都使用相同的调色板进行制作，并且在信息图表中看起来很棒。
我的黑暗之魂3孟小伟在播放数据
凯蒂·西尔弗（Katie Silver）根据评论家和观众的评论汇总了有史以来最伟大的100部电影。可视化显示了每部电影的关键数据点，例如发行年份、奥斯卡提名和获胜、预算、利润、IMDB得分、类型、拍摄地点、电影背景和制作工作室。所有电影均按发行日期排序。
凯蒂·西尔弗（Katie Silver）的100部最佳电影数据可视化
费德里卡·弗拉加帕内（Federica Fragapane）显示了2017年全球50个最暴力城市的数据。这些项目根据人口在垂直轴上排列，并根据凶杀率在水平轴上排序。
这些数据可视化和插图由Valerio Pellegrini为《透视》杂志制作。它们显示了一个饼图，其中包含行业细分以及对就业贡献的散点图。
视角杂志–家族企业by Valerio Pellegrini
该地图显示了太阳系中18000多个小行星的轨道数据。每个小行星都显示在1999年除夕的位置，并按小行星的类型进行了着色。
埃莉诺·卢兹（Eleanor Lutz）的太阳系轨道图
KatjaFlükiger对头条新闻的故事情有独钟。数据可视化旨在传达销售对算术的影响程度。该项目在马里兰大学艺术学院完成，目的是可视化对移民的引用，并对用词选择和上下文所暗含的价值判断进行颜色编码。
标题语义学KatjaFlükiger
该数据可视化用于回答月球是否引起地震。该图显示了根据月球的相位和轨道位置而发生的地震的时间和强度。
月亮与地震艾西瓦娅·阿南德·辛格（Aishwarya Anand Singh）
可视化效果显示了从2003年到2015年发射的卫星。该图表示了专注于项目的机构类型以及为其提供资金的国家。左侧显示了每年的发射次数和卫星应用次数。
有线英国–由Nanosats拍摄的黎明（Valerio Pellegrini）
数据可视化不仅是一种科学形式，而且还是一种艺术形式。其目的是帮助任何领域的企业快速理解复杂数据，并开始根据该数据做出决策。为了使您的图表高效且易于阅读，这一切都与了解您的数据和受众有关。这样，您就可以选择正确的图表类型，并使用可视化技术来发挥自己的优势。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
数据可视化实践案例帮助你思考在执行可视化设计时需要注意哪些方面以及如何让你的用户理解可视化图形。
数据可视化一直处于大热的状态，已成为互联网产品的基本配置。它用于各种行业，从商业智能到信息传达，帮助用户更好的理解数据背后的故事。
我们的大脑善于处理可视化信息，这使我们更容易理解图表或图形中可视化的数据，而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来呈现数据，以便数据被吸收和理解。它应该考虑用户对视觉处理的了解，提高并简化用户的数据体验。
目前有很多工具和框架可用于构建数据可视化图形，今天我们一起回归可视化设计的基础，了解是什么让数据可视化有效？在设计数据时我们应该遵循哪些指导原则？
以下 10 个要点和实践案例将帮助你进行思考，完成丰富、有洞察力的数据体验。
PART 01
可视化以视觉表现形式，将信息以概要形式抽提出来，提供上下文并描述数据中的关系。虽然设计师对给定的一组数据集中的模式和关系没有任何影响，但他可以根据用户的需求选择显示哪些数据以及提供怎样的语境。毕竟，就像其他产品一样，如果用户无法使用它，那么可视化就毫无意义。
为新手用户设计的可视化产品应该是结构化的、明确的和有吸引力的。他们应该用文字直接说明受众应该从数据中得到什么。
转换双亲的工作时间：妈妈 VS 爸爸
另一方面，面向专家用户的可视化产品可以显示更精细的数据视图，以驱动用户探索和发现。细节和数据密度应该简单明了。
工作来来往往：国民失业情况
PART 02
《纽约时报》网站上只有 10 - 15％ 参与可视化交互的用户实际点击了按钮。《纽约时报》的图形团队制作了一些业内最好的可视化作品，但几乎没有人与这些作品互动。
这表明，在可视化设计中，我们不能依赖交互操作帮助用户建立理解。关键数据不能隐藏在交互操作后面，而应该明确的展示在图表中。
然而，怎样在可视化中融入交互比较好呢？
设计师应该允许在图表中整合更多数据（排除非关键数据），允许感兴趣的用户更深入地研究数据集。
Nathan Yau 的流动数据是在可视化中合理应用交互操作的知名案例，在可视化行业中广泛应用。下图是他在关于死亡原因和预期寿命的图表应用交互操作的案例，顶部 tab 可以切换数据展示维度，点击曲线，可以看到对应的数据。
2005 年至 2014 年的死亡率数据：死因如何因性别和种族而异
来源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引点，让你的用户在浏览图表之前，就亲自参与该项目。看看 Quartz 这款有趣的书写和文化作品。这件作品首先要求读者在文化形态的分析概述之前，简单地绘制一个圆圈 ，这个圆圈展示了有效的可视化的特征。
画圆圈的方式说了很多关于你的故事
同样， The Pudding 最近发布了一个交互式可视化软件，向读者讲述有关生日悖论的知识（生日悖论，指如果一个房间里有 23 个或 23 个以上的人，那么至少有两个人的生日相同的概率要大于 50% ）。虽然大多数非统计学家可能会发现生日悖论，这是概率论中的一个标准问题，非常枯燥且不直观，但这种可视化使得它看起来有趣且易于理解。创作者融入最近的用户互动的方式使得整个体验非常具有关联性。
生日悖论实验
这两个在可视化产品中融入交互操作的案例都很成功，因为它们使用交互带读者参与数据研究。
PART 03
视觉突出性，使视觉元素从周围环境凸显的特性，是数据可视化的强大工具。它可以用于引导用户注意可视化中最重要的信息，以帮助防止信息过载。通过使用视觉突出一些细节并压制其他细节，可以使我们的设计更清晰，更容易理解。
一些视觉变量 —— 颜色和大小 —— 是我们创造和控制视觉显著性的关键。
色彩方案是数据可视化设计的关键因素。众所周知，色彩特别易于视觉识别。我们可以使用温暖，高饱和度的颜色来突出关键数据点，并应用冷色调，使用低饱和度的颜色将不太重要的信息放到背景中。
2014：最热的年份
尺寸也非常易于营造视觉突出性。较大的元素比较小的元素更有吸引力，因此要扩大您希望用户首先阅读的元素，并缩小不太相关的文本和元素。
PART 04
Cleveland 和 McGill 在信息可视化方面的著名研究 —— 视觉编码的有效性（即数据维度与视觉属性的映射）。他们根据人们对视觉编码的准确感知程度，对不同类型的视觉编码的识别程度进行了排序，给出了以下（简化的）列表：
1.位置
2.长度
3.角度
4.区域
5.颜色
这对数据可视化设计的意义在于，我们显示定量信息的首选应该是按位置进行编码（如经典散点图和条形图所示）。与基于角度（如饼图）或基于区域（如气泡图）的编码相比，基于位置的编码有助于用户在更短的时间内进行更准确的比较。
然而，这并不是说所有可视化都必须是条形图或散点图。在研究可视化数据的新方法时，牢记这些原则是个好主意。
我真正想要强调的是，颜色不应该用于编码定量信息，而是应该用来编码分类信息。也就是说，我们可以使用颜色来表示属于不同类别的数据。
出生时的预期寿命
PART 05
无论你是否支持 Edward Tufte 在设计中使用极简主义的极端方法，都需要不断思考，如何消除图表视觉上的混乱。通过在数据元素和非数据元素之间创建可视化对比，来让您的数据大放异彩，就像 Nadieh Bremer 在他的获奖作品“美国出生时间”中所做的那样。
婴儿潮：白天工作时间出生高峰期
删除不起任何作用的结构元素使数据清晰（如背景、线条和边框）。减弱必要的结构元素（如轴、网格和刻度线），否则这些元素会与数据争夺注意力。(网格为浅灰色，最宽设为 0.5 pt，轴为黑色或灰色，最宽设为 1 pt )
PART 06
图表中的每个数据都使用图例标注，以便读者理解它所代表的内容，这样的设计对吗？
错。太多设计师依靠图例来告诉用户哪些符号或颜色代表图表中的哪些数据。列举图例虽然对设计师来说很容易，但对读者来说却很难。它们迫使读者在图例和数据之间来回扫描，给读者的记忆带来不必要的压力。
更好的方法是直接在图表上标记数据。作为设计师，你的工作就是完善体验，便于用户阅读。在下面的例子中，Nathan Yau 进行了去除图例的设计，创建了一个带有大量直接标签的小型交互式多重显示。
每人每日平均消费量
最好的可视化讲述着引人入胜的故事。这些故事通过图表中的趋势、相关性或异常值展示，图表数据周围的元素可以进一步丰富故事内容。这些故事将原始数据转化为有用的信息。
从表面上看，似乎数据可视化完全与数字相关，但一个伟大的数据故事是无法用语言来讲述的。信息传递清晰的视觉层次，才能一步一步地引导读者阅读数据。
例如，可视化的标题，应该明确阐明一个关键观点，使读者领会。分散在数据中的微小注释，可以通过异常值或趋势引起读者注意，从而为关键观点提供支撑。
我在这里要说的是：帮助用户，确切地告诉他们在数据中寻找什么！
正如上一条建议提到的，我们可以在可视化中使用注释来丰富数据故事。有时可以添加图形元素来使这些注释更有意义，以便将这些信息更直接地关联到我们的数据。
以这张来自 Susie Lu 的图片为例。“夏季大片”和“奥斯卡季”的数据重叠赋予了原本看似随机的高峰和低谷以意义。它们帮助观众理解数据的重要性，比单独使用字幕或注释更直接。
2015 - 2017.08 票房趋势：强大的开场和后期的爆发
PART 09
静态可视化通常以 JPG 和 PNG 等位图图像格式发布，这对移动端用户来说是一个明显的挑战。许多数据可视化的美妙之处在于它们的视觉细节 —— 微小的数据点和微妙的编码 —— 而这些细节许多在静态格式的小屏幕上被丢失了。
例如：Accurat 工作室在诺贝尔奖上的精美复杂的作品，在印刷和高分辨率视网膜显示器上看起来非常棒的全尺寸，却在移动设备上几乎难以辨认。
视觉数据
为移动体验设计，使用像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化，尝试为印刷、桌面和移动设备多种载体创建相同的静态可视化设计。
PART 10
今天谈到的所有最佳实践可以归结为一件事：在复杂性和清晰度之间找到合适的平衡，以满足受众的需求。
制作精美的、探索性的可视化细节总是诱人的，但这不一定是最合适的方法。在设计图形时要考虑周到 ，让读者的知识和目标决定应该包含哪些数据以及包含多少数据，并整理数据以讲述想要讲述的故事。
文章来源：站酷 作者：TCC设计情报局
蓝蓝设计的小编 http://www.lanlanwork.com
