地理空间数据可视化 (Geo Spatial Data Visualization) 是近年来兴起的一个热门领域，越来越多的政府、企业青睐于通过这种强视觉的形式来展示政绩与实力。市场需求的增长也吸引了越来越多的设计师投身于这个领域。而在这样一个细分领域，也对设计师的能力提出了全新的要求。在该领域，我们团队沉淀出一套固定且可复用的设计模式。
数据可视化已迅速成为在网络上传播信息的标准。它用于各种行业，从商业智能到新闻，帮助我们理解和传达见解。
我们的大脑善于处理可视化信息，这使我们更容易理解图表或图形中可视化的数据，而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来呈现数据，以便数据被吸收和理解。它应该考虑用户对视觉处理的了解，提高并简化用户的数据体验。
目前有很多工具和框架可用于构建这些图形，是时候回归基础了。是什么让数据可视化有效？在设计数据时我们应该遵循哪些指导原则？
以下最佳实践将帮助您设计丰富、有洞察力的数据体验。
可视化是用于揭示模式的，提供上下文并描述数据中的关系。虽然设计师对给定的一组数据集中的模式和关系没有任何影响，但她可以根据用户的需求选择显示哪些数据以及提供怎样的语境。毕竟，就像其他产品一样，如果用户无法使用它，那么可视化就毫无意义。
为小白用户设计的可视化应该是结构化的、明确的和有吸引力的。他们应该用文字直接说明受众应该从数据中得到什么。
转换双亲的工作时间：妈妈VS爸爸
来源：https://flowingdata.com/2016/04/20/parent-work-hours/
另一方面，面向专家用户的可视化可以显示更精细的数据视图，以驱动用户探索和发现。细节和数据密度应该简单明了。
工作来来往往：国民失业
来源：http://graphics.wsj.com/job-market-tracker/
这是一个发人深省的数字：《纽约时报》网站上只有10-15％参与可视化交互的访客实际点击了按钮。《纽约时报》的图形团队制作了一些业内最好的作品，但几乎没有人与他们互动！
这表明，关于交互可视化设计，我们不能依赖交互来建立理解。关键数据不能隐藏在交互元素后面，而应该在没有交互的情况下可见。
然而，什么样的交互比较好呢？允许整合更多数据（否则可能被排除），以允许感兴趣的读者更深入地研究数据集。Nathan Yau 的流动数据已经垄断了这种交互式可视化风格市场，正如他关于死亡原因和预期寿命的图表中所展示的那样。
2005年至2014年的死亡率数据：死因如何因性别和种族而异
来源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引点，一个引发关注的点，可以让你的读者在远远地浏览之前，亲自参与该项目。看看 Quartz 这款有趣的书写和文化作品。这件作品首先要求读者简单地绘制一个圆圈——在继续文化形态的分析概述之前——画出简单而有效的可视化的特征。
画圆圈的方式说了很多关于你的故事
来源：https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/
同样， The Pudding 最近发布了一个交互式可视化软件，向读者讲述有关生日悖论的知识（生日悖论，指如果一个房间里有23个或23个以上的人，那么至少有两个人的生日相同的 概率要大于50%。）。虽然大多数非统计学家可能会发现生日悖论，这是概率论中的一个标准问题，非常枯燥且不直观，但这种可视化使得它看起来简直令人着迷。创作者融入最近的用户互动的方式使得整个体验非常具有关联性。
生日悖论实验
来源：https://pudding.cool/2018/04/birthday-paradox/
这两个交互式示例都起作用，因为它们允许读者参与数据且不需要通过交互来理解。
视觉突出性，使视觉元素从周围环境凸显的特性，是数据可视化的强大工具。它可以用于引导用户注意可视化中最重要的信息，以帮助防止信息过载。通过使用视觉突出一些细节并压制其他细节，可以使我们的设计更清晰，更容易理解。
一些视觉变量——颜色和大小——是我们创造和控制视觉显著性的关键。
色彩方案是优秀的数据可视化的关键。众所周知，色彩特别擅长打破伪装。我们可以使用温暖，高饱和度的颜色来突出关键数据点，并应用冷色调，使用低饱和度的颜色将不太重要的信息放到背景中。
2014：最热的年份
来源：https://www.bloomberg.com/graphics/2014-hottest-year-on-record/
尺寸也很明显。较大的元素比较小的元素更有吸引力，因此要扩大您希望读者首先阅读的元素，并缩小不太相关的文本和元素。
Cleveland 和 McGill 在信息可视化方面的著名工作，研究了视觉编码的有效性（即数据维度与视觉属性的映射）。他们根据人们对视觉编码的准确感知程度，对不同类型的视觉编码进行了排序，给出了以下（简化的）列表：
这对数据可视化设计的意义在于，我们显示定量信息的首选应该是按位置进行编码（如经典散点图和条形图所示）。与基于角度（如饼图）或基于区域（如气泡图）的编码相反，基于位置的编码有助于观众在更短的时间内进行更准确的比较。
然而，这并不是说所有可视化都必须是条形图或散点图。在研究可视化数据的新方法时，牢记这些原则是个好主意。
我真正想要强调的是，颜色不应该用于编码定量信息，而是应该用来编码分类信息。也就是说，我们可以使用颜色来表示属于不同类别的数据。
出生时的预期寿命
来源：http://www.vizwiz.com/2017/11/life-expectancy.htm
5.使结构元素像刻度线和轴一样清晰但不显眼
无论你是否支持 Edward Tufte 在设计中极简主义的极端方法，都要帮自己一个忙，从你的图表中消除视觉上的混乱。通过在数据元素和非数据元素之间创建可视化对比，来让您的数据大放异彩，就像 Nadieh Bremer 在他的获奖作品“美国出生时间”中所做的那样。
婴儿潮：白天工作时间出生高峰期
来源：https://www.visualcinnamon.com/portfolio/baby-spike
删除不起任何作用的结构元素使数据清晰（如背景、线条和边框）。减弱必要的结构元素（如轴、网格和刻度线），否则这些元素会与您的数据争夺注意力。网格为浅灰色，最宽设为0.5 pt，轴为黑色或灰色，最宽设为1 pt。
编码数据的每个元素都需要进行标记，以便读者理解它所代表的内容。简单吧？
错。太多设计师依靠图例来告诉读者哪些符号或颜色代表图表中的哪些数据系列。列举图例虽然对设计师来说很容易，但对读者来说却很难。它们迫使读者在图例和数据之间来回扫描，给读者的记忆带来不必要的压力。
更好的方法是直接在图表上标记数据系列。这往往更像是一个挑战，但是，嘿，你是设计师。你的工作就是做这项工作，以便于读者不必这样做。在下面的例子中，Nathan Yau 完成了避免使用图例的工作，创建了一个带有大量直接标签的小型交互式多重显示。
每人每日平均消费量
来源：https://flowingdata.com/2016/05/17/the-changing-american-diet/
7.使用消息传递和视觉层级创建叙事流程
最好的可视化讲述着引人入胜的故事。这些故事来自数据中包含的趋势、相关性或异常值，并且由于数据周围的元素而加强。这些故事将原始数据转化为有用的信息。
从表面上看，似乎数据可视化完全与数字相关，但一个伟大的数据故事是无法用语言来讲述的。信息传递具有清晰的视觉层次，才能一步一步地引导读者阅读数据。
例如，可视化的标题，应该明确阐明一个关键观点，使读者领会。分散在数据中的微小注释，可以通过异常值或趋势引起读者注意，从而为关键观点提供支撑。
来源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html
我在这里要说的是：帮助读者，确切地告诉他们在数据中寻找什么！
正如我刚才提到的，我们可以在可视化中使用注释来帮助创建数据故事的过程。有时我们可以添加图形元素来使这些注释更有意义，以便将这些信息更直接地关联到我们的数据。
以这张来自 Susie Lu 的图片为例。“夏季大片”和“奥斯卡季”的数据重叠赋予了原本看似随机的高峰和低谷以意义。它们帮助观众理解数据的重要性，比单独使用字幕或注释更直接。
2015 - 2017.08 票房趋势：强大的开场和后期的爆发
来源：https://susielu.com/data-viz/box-office
静态可视化通常以 JPG 和 PNG 等位图图像格式发布，这对移动端用户来说是一个明显的挑战。许多数据可视化的美妙之处在于它们的视觉细节——微小的数据点和微妙的编码——而这些细节许多在静态格式的小屏幕上被丢失了。
例如：Accurat 工作室在诺贝尔奖上的精美复杂的作品，在印刷和高分辨率视网膜显示器上看起来非常棒的全尺寸，却在移动设备上几乎难以辨认。
视觉数据
来源：http://giorgialupi.com/lalettura/
为移动体验设计，或者使用像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化，或者为印刷、桌面和移动设备多种载体创建相同的静态可视化设计。
我今天谈到的所有最佳实践可以归结为一件事：在复杂性和清晰度之间找到合适的平衡，以满足受众的需求。
制作精美的、探索性的可视化细节总是诱人的，但这不一定是最合适的方法。在设计图形时要考虑周到 ，让读者的知识和目标决定应该包含哪些数据以及包含多少数据，并整理数据以讲述您想要讲述的故事。
原文标题：10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB
原创作者：MIDORI NEDIGER
原文链接： https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/
翻译作者：桃花果
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。
「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。
为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。
用户声音｜不同的故事相似的诉求
面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。
外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。
通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：
案例收集｜发现问题，大胆假设
纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：
视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。
综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决
视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。
基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。
竞品分析｜寻找实践证据，谨慎验证
我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。
以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。
直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）
通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。
紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。
除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。
文字陷阱：中英文字高不等于字号
举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。
原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。
论文查阅｜寻找理论证据，谨慎验证
研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好
参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》
对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。
认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。
假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。
面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。
通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。
基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。
如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。
下面以视觉、交互、信息三个层次解剖设计过程背后的思考。
视觉层｜高密度-克制的留白
眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》
如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。
理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律
表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。
理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》
用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。
设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
开车的同学知道，一般我们用“指哪打哪”来形容汽车转向精准、没有虚位。“指哪打哪”是指汽车的操控体验，更是驾驶乐趣的一部分。驾驶员轻拨动方向盘，轮胎转向带来的阻力以及路面反馈传至车身，动力的线性输入与制动的时实响应让驾驶员能控制自如。
“指哪打哪”形容车听从驱使，是人对车的输入控制以及车对人的输出反馈，是一个互相修正的过程。在数据可视化设计中，操作“听从驱使”的可视化作品又是一种什么样的体验呢？
某公司运营同学需要找出品类销量下滑的原因。在图表上，运营同学的思路是找出症结、定位问题、关联分析、验证设想、得出结论并给出运营策略调整方案。
某同学向公安报案称账户被盗大额资金，公安案件科分析专员从受害人的资金流向追溯至相关木马团伙，通过关系扩散查验可疑人员，顺藤摸瓜最终找到嫌疑人并抓捕。
上面两个示例提供足够便捷的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便用户查看更多视图空间，快速定位感兴趣的数据空间，这种操作体验能帮助用户事半功倍。
听从驱使本质上是用户对可视化的控制能力，是一种主观感知与信念。听从驱使包括两部分，“驱动 Drive”与“使能 Enable”，这两步正向不断迭代，引导用户一步步剥开数据的面纱。
数据可视化听从差遣，用户可根据前馈信息预示、驱动可视化，用户对可视化作品享有控制权，数据可视化符合用户的显性需求。
数据可视化遂用户心愿，用户根据反馈引导进行下一步操作，帮助探索数据规律或者发现更多数据奥秘，数据可视化符合用户的隐性需求。
用户处在海量、无序、异构数据的海洋中时，需要随时面对有限屏幕空间与无限数据空间带来的冲突。可视化应当给予用户适当的选择权，让其可对信息进行控制，具备信息聚焦、下探的能力。这些可视化能力能提升用户的参与度和探索意愿，不让其迷失在数据的海洋中。
移动端长按滑动（Touch & Hold）更新激活点数据、左右轻扫（Swipe）平移视图是用户的既定认知。左图长按滑动后的反馈为平移视图，此时用户心里咯噔一下，又继续操作了一遍，操作的预期与结果确实不一致，有些“不听使唤”。右图符合用户心智模型，预期与输出结果一致。
不听从驱使：视图平移，不符合预期-长按滑动时数据点不更新（如下图）
听从驱使：视图不动，符合预期：长按滑动时数据点更新（如下图）
由此可以看出，如果可视化作品操作时不符合用户的既定认知，可视化则变得不受控，用户心里会紧张、导致重复范错，甚至责怪自己。
如果赋予用户较高的驱使感且得到正向的反馈指引，引导用户操作下一步，那么用户心态会更积极，更愿意接受挫折及试错，这种听从驱使可以消除未知、不确定性所带来的紧张与焦虑。
前面讲过，可视化听从用户驱使需具备两点能力：
· 驱动 Drive：通过前馈预示让用户知道可视化能做何互动；
· 使能 Enable：通过反馈引导用户进一步让用户与可视化互动；
可视化交互时，驱动用户完成一期探索，探索后反馈引导发出的信号成为下一步操作的前馈提示，再次驱动用户操作可视化后，如此反反复复直到帮助用户找到数据的潜在规律或者找出数据真相。
从心理学的四个概念进一步解释：
· 示能：可视化特性与预设交互的关系，是否可被操作；
· 意符：即信号，告诉用户可采取什么操作，如何行动；
· 映射：事物之间的关连关系，是怎么联系的；
· 反馈：操作之后的回应，是否及时、有效；
示能 Affordance 指可视化作品可能的潜在行动，只有当它们都是可以被感知的用户才容易地发现它们，它揭示了用户与可视化互动的可能性。
例如我们默认认为屏幕上的可视化都可以进行交互，PC 可视化作品可以 Hover 交互，移动端可以点点按按。示能存在但可能不可见，可视化设计师的一部分职责就是实现示能的可见性。
意符 Signifiers 是可视化作品传递的信号，暗示可能的潜在行动，让用户该知道该如何去控制可视化。无论是示能还是交互方式，都应照顾用户已有习惯，需符合用户心智模型。
在 PC 可视化上，可视化设计师很容易忽略鼠标指针样式设计，经常默认一个鼠标样式进行到底，可视化如何驱动用户以及如何让用户具备可视化的能力全靠猜。
映射 mapping 表示可视化元素间关系，应用于控制-反馈模式的设计或布局；比如方向盘可控制汽车转向，下拉筛选器出来的选择框。以空间布局对应关系的自然映射为例。
反馈 feedback 是用户操作之后的回应，反馈应当是即时、有效的。在可视化设计时，如果需要，我们建议给出用户深层次的反馈以便指引其进行下一步的操作。
要做到听从驱使，需给用户控制感，让用户享有对可视化的控制能力。例如提供足够便捷的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便用户查看更多视图空间，快速定位感兴趣的数据空间，亦或根据特定变量对数据进行排序、突出、降维处理等。当我们将这些组件与交互动作进行结合，用一些习以为常的交互去操纵可视化时，用户将会很清晰、并且有信心控制好当前视图。
数据可视化不仅仅只是一张好看的图，它构建的是一个系统，这个系统随时在解决有限屏幕空间与无限数据空间带来的冲突。这个系统可以驱动用户完成一系列操作后引导用户有能力进一步拿到结果，如此反复交替迭代，帮助用户完成一些平时看来不可思议的任务。只有这样，用户才能操纵听从驱使的可视化，就像文章开头所述，如老司机开车一样丝般润滑。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考：如何让图表清晰的传达信息，同时带来美观的视觉感受。
为了达到清晰传达和视觉美观的目标，我们结合实际项目，进行大量探索及思考，梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法，涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。
图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。
为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。
1. 底层元素设计
在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，最大程度突出主图形，底层元素全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在 1.2:1 时，人眼较难看到元素；当对比度在 2.0:1 时，视觉强度过强，易吸引用户注意力。通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在 1.6:1 左右，视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀，只在需要查看时可以被发现。
2. 中层元素设计
中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、描边等样式，丰富视觉层次，带来美观的视觉感受。
3. 顶层元素设计
我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。
4. 最终效果
通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用户能够在第一时间接收到最重要的信息，提升信息读取效率。
图表排版是指各元素在图表中的尺寸及布局等，对于 B 端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对 B 端后台类产品的排版规则，力求保证用户图表的使用体验。
1. 图表尺寸
图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到高效读取信息的目的。
“迷你图”尺寸最小，舍弃了 Y 轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息高效读取。
“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每 4 像素 1 个数据点，Y 轴坐标刻度不超过 5 个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。
“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。
最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。
2. 坐标轴
坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？
第一是横纵坐标轴的刻度出现过密情况。
如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能解决。
第二个常见问题是刻度的说明文字过长。
如果是 X 轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜 45°~90°的办法(如文字全部为中文，可用竖排代替倾斜 90°)，缓解信息过密看不清的情况。
如果是 Y 轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。
如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库，需要提前预估刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库，则不必提前处理，图表库会自动按刻度长度进行整体调整。
3. 图例
图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题，我们基于业务特点，针对 B 端商业产品矩阵制定了图例布局指导原则。
我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有明确的更优方案时选用。
当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空间。
色板作为常见的数据表达手段，能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试，梳理总结出图表色彩的两个关键维度：辨识度与统一性。既需要颜色间突出强烈可清晰辨别，又需要颜色整体能形成统一风格，以达到清晰传递和美观的目标。如何平衡辨识度与统一性，是我们遇到的难题。
1. 辨识度
辨识度在图表中有两方面：颜色与页面底色的辨识度，各颜色之间的辨识度。对于第一种，我们采用控制颜色的明亮程度来确保色彩辨识度，尤其对于黄色、青色等本身较亮的颜色，降低颜色的明度，确保在浅色背景下颜色可辨识。
对于第二种也就是各颜色之间的辨识度，通过实验发现单纯的颜色色相变化，例如红色与橙色的区分，人眼不容易分辨。所以采用了色相变化+明度变化的方法，即深红色与亮橙色，深蓝色与亮紫色等，这样用户能在第一眼就明确分辨，保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中，运用欧几里得距离公式测算颜色间的距离长短，来衡量各颜色间色差数值。颜色间距离越远代表色差越大，利用数据辅助衡量辨识效果。
2. 统一性
色彩统一性的作用在于确保图表整体风格一致，色彩搭配舒适，从而带来美观、统一的视觉感受。为达目的，我们首先提炼商业产品设计风格为明亮、强对比，其次把设计风格转化为色彩数值。经过实验，把颜色明度限制在 50%-70%，把饱和度限制在 75%-85%，并在区间内不断波动。这样既保证了色彩视觉感受的统一，各颜色间又能够有清晰的辨识度。
3. 颜色量化与工具
量化颜色，将色彩转化为数值，利用数值来验证设计师的「感觉」，能够保证方案合理性，保证设计质量。但通过尝试，我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料，我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式，它能够将人眼对颜色的感知精确的量化为数值，例如黄色相比蓝色明度更高，都能如实的反馈到数值上。也由于此特性，HCL 模式在诞生距今不到 20 年间，已被一些先锋设计师用于数据可视化的呈现中。
但是 HCL 作为小众色彩模式，目前设计软件鲜有支持，造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题，我们已初步完成智能配色程序，只需输入品牌色，就能自动生成图表色版，并在风格上与品牌色匹配，达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末，帮助大家直观的查看和使用 HCL 模式颜色。
数据价值就像不为人知的宝藏，隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙，是发掘数据价值的强有力武器。通过对图表的不断探索优化，我们希望能够最大化数据的价值。通过图表，让数据最直观的展现；通过图表，让其背后的规律浮出水面被人探知；通过图表，让 B 端不再有难懂的数据。
附：色板及 HCL 工具
文章来源：优设网 作者：百度MEUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图表是数据可视化中最常用的一种表现形式，一定要吃透它。
随着互联网数字化越来越完善，数据可视化这个词的使用频率也越来越高，而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计，都离不开图表的使用。然而关于图表类相关的资料太零碎了，不成体系，对于初学者非常不友好，本篇文章我从图表的祖辈开始，把它都给挖了出来，希望对你有帮助。
图表的定义：可直观展示统计信息的属性，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地可视化的手段。
英文叫法：Chart。
用户对图形的敏感程度远远大于文字，所以产品就需要把数据信息可视化，用简单的图形表示出更多的信息量，而图表是数据可视化中最常用的表现形式。
接下来我们来介绍图表的具体构成及元素解析。
图表是由：标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成，每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。
顾名思义，标题就是图表的名字，标题是必不可少的元素。标题的内容一定要言简意赅，不要太长，能两个字写清楚绝对不用三个字。
标题的常用位置有 3 个：左上角、顶部居中、底部居中。
一般情况下，标题字号 / 色值要突出一些，用户第一眼看到 chart 的时候，要清晰的看到这个图表是做什么的。
特殊情况下，如果需要对标题有额外解释的话，两种展现形式：
图例的组成
颜色、名称、数值、单位。
图例的展现形式
圆形、开关、矩形、鼓包线、实线、虚线。
图例的位置
从左至右、从上至下。
图例的作用
图例的颜色选择
同一组图例中，不要出现相近的颜色，否则在图表显示中分不清彼此。
产品使用中，要规范图例颜色使用，一般分为两种：
图例过多时如何展示
共用图例
如果多个 chart 的图例一样，可进行合并，减少冗余图例。
图例省略
如果 chart 中只有一个图例的话，可省略。
图例名称限制
根据不同使用场景，为了更好的展示效果，要给图例名称设置一个最大值，超过最大值后省略展示。
坐标轴分为 X 轴和 Y 轴，常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。
刻度值代表的意义
坐标轴使用规则
是否带单位：
对齐方式（常用，但非必须）：
刻度值过多时如何显示：
刻度值的选用一定要是同一个规律，禁止同距离的刻度值代表不同数据。
刻度点的样式使用规则：
刻度的线朝外。
数据的展示是 chart 中最为明显的地方，可以说如果只显示一个元素的话，就是他了。
数据展示的使用规则：
网格线的作用
呼应坐标轴，美观度。
网格线的使用规则
网格线使用实线居多，尽量不用虚线。
使用场景
横、纵、横纵结合、无网格线。
通常情况下，提示信息用来标识出 chart 中重要点的数据信息，需要注意的是：重要信息尽量简化，信息量不要太大，言简意赅就好。
根据不同产品的使用场景，有的时候会用到阈值，当达到某个阈值后，就会触发某种联动。这个时候就需要有个水位线了，它起到警示的作用。
形式有两种，实线和虚线，颜色的选取则取决于产品的警告级别。
水位线可以是一个，也可以是多个，视情况而定。
时间轴可以灵活地调节刻度值的上下限，从而更精确的看到自己想看的数据。
时间轴的功能及限制没有不是很复杂，所以就不过多解释了，需要用的话就用。
定义
折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。折线图是通过线条的波动来表示数据的波动，主要体现的是数据随着时间的推移而变动的图表。
使用场景
常用于观察一段时间内数据波动的浮动变化，比如：一天内内存的使用情况。
使用建议
Y 轴刻度值选择要合理，当前显示的数据波动要最大化的显示；
重要节点可以单独做重点标注；
数据拐点要平滑，不要太锋利。
定义
面积图和折线图比较类似，区别在于面积图把数据区域做了个面积划分，让数据的显示更加清晰。
使用场景
面积图展示尽量不要超过 3 个图例，否则数据多的情况下，数据的展示会特别乱，影响观看。
使用建议
面积区域要和折线的颜色用统一色系，不要换色系；
面积区域一般要比折线颜色浅一些，这样视觉上更加让人舒适；
如果多条数据情况下也用面积图的话，面积区域尽量使用透明度，否则有的数据会被遮挡看不到。
定义
柱形图，又称长条图、柱状统计图。用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。
使用场景
使用建议
柱状图的厚度不要是固定值，要做成自适应来应对不同尺寸的分辨率显示；
厚度与间距的对比要合理设计；
可使用小圆角，千万不要用大圆角，太丑了……
如果想要强调某个柱子的话，可以进行颜色区分，但是柱子颜色不要超过 2 个（同一维度下）；
如果想要在柱子上显示数值的话，使用建议（下面的顺序为推荐顺序）：
定义
饼图仅排列在工作表的一列或一行中的数据，它是有一个总和数据，方面查看每个类别分别占总数据的百分比的一种图表。
使用场景
使用建议
定义
环形图是由两个不同大小的圆叠在一起，切割中心部分得到的一种图形。
使用场景
使用建议
环形图的两个圆要从中心对齐。
定义
堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。
使用场景
常用于不同资源中流量 / 容量的使用。
使用建议
定义
堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。
使用场景
常用于不同维度下相同几个指标的展示。
使用建议
上面介绍了常用的图表的使用建议，但是图表类型远远不止于此，还有很多非常用的图表类型，这次我先给大家列出来，如果大家感兴趣的话，我后面再写一期冷门图表的使用建议：
雷达图，散点图，K 线图，盒须图，热力图，旭日图，桑基图，树图，漏斗图，仪表盘。
1. echartsecharts
网站链接：https://echarts.apache.org/zh/index.html
2. highcharts
网站链接：https://www.highcharts.com.cn/
3. antv
网站链接：https://antv-g2.gitee.io/zh/examples/gallery
Chart 是数据可视化必修课中最重要的模块之一，不可忽略。只有了解每个 chart 的定义及使用场景，才能在产品中用到最合适的那一个。
文章来源：优设网 作者：Luck gg
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：tob.design 作者：三鱼先生
蓝蓝设计( 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设计情报局
这是一款智慧工地云平台，运用5G通讯技术,结合PC端和APP端,规范工地管理提高安全质量的检查整改效率和流程将整个工地纳入监控范围,扬尘监测、大型设备监测、材料进场管理、车辆出入监控,了解实时动态等信息;人员信息实名制录入管理,进场人脸考勤识别打卡,可一键上传考勤薪资数据至住建局,接受政府单位监督;提升管理人员对工地的多维度把控和管理效率。
2021~继续前行
转自：站酷
作者：爱吃草莓的丫丫
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
