首页

大数据可视化界面设计之六:想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

博博

数据可视化的目的,是要对数据进行可视化处理,以能够明确地、有效地传递信息。” ——Vitaly Friedman

如何让人们在海量的数据中,发现数据的规律,或者清晰的发现特异的数据,那数据可视化是一个有效的表达方式。

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。如图

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

马克·吐温有一句名言“世界上有三种谎言:谎言,该死的谎言和统计数字。”人们经常曲解数字,谎言并不是源于数字本身,而是错误或不负责任的使用数字的人,向他人展示数字的时候,你有责任展示出真相。——《数据之美》

数据真相的展示离不开数据图表的合理选用,那么如何正确的选用呢?就来聊一聊基础数据图表类型的选用及辨析。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

常用的基础图表类型


第一部分:选用合适的图表类型


在数据可视化设计工作中,折柱饼图表是最常用的,同时也是最容易混淆的。一组数据既可选用折线图,又可选用柱状图的时候,设计师的内心往往会产生“我该选用哪种图表能更好地将数据传达给用户呢”的疑惑中。

基于上述疑问,下面给大家一些设计指引供参考。

1. 柱状图 VS 折线图

折线图主要表示一段时间内数据变化趋势,柱状图用于描述分类数据之间的对比。如果不需要展示数据的变化趋势,建议不要使用折线图,而选择柱状图。

相较于折线图,柱状图更多的关注数据之间的对比而非趋势。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 柱状图 VS 条形图

在大多数情况下,折线图和柱形图是可以互相替换的。

1)用户针对横向长短的敏感性高过竖向,涉及到排行时最好使用条形图。

2)标签较长时,使用条形图。例如:城市人口流入量的数据展示,由于城市名称文本比较长,建议使用条形图。

3)当图表画布高度大于宽度时使用条形图,利用高度空间的富余,展现更多的条形。

反之,建议使用柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图 VS 饼环图

基于人的认知特征,人对面积、角度的敏感性没有对长短的敏感性强。当类别的值接近时,不建议使用饼环图,除非是强调单个数据在总体中的占比,突出数据在群体中的特点。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 折线图 VS 面积图

通常情况下,面积图是折线图的一种衍生。在面积图里,数轴和线之间的区域通常用颜色或阴影来增加易读性。面积图数据集之间差异化部分在视觉上得到突显。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 饼图 VS 环图

从本质上来看,饼图与环图属于同一类图表类型。但二者在数据可视化的表现上各有侧重。从图形映射角度来说,弧长比面积、角度更易被识别、更有效。因此,相对饼图,环图让数据更具可读性,同时,可以将强调数据放置在环图中部,引起用户关注。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 堆叠柱状图 VS 饼图

如果在饼图或环图的基础上增加一个多数据的对比,就需要引入堆叠柱状图。相较于饼图,每一个单个堆叠柱状图就是一个饼图的变形,可满足用户的单一数据的部分之间的对比关系。将堆叠柱状图横向排布,就实现了整体数据之间的对比,而饼图是不能进行整体数据的对比。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

7. 堆叠面积图 VS 堆叠柱状图

堆叠面积图强调数量追随一个数据变化而变化的程度,同时强调部分和整体的变化趋势。

堆叠柱状图强调的是整体的对比,也可以直观的看出每个系列的值,尤其是当需要看某一单位的综合以及各系列值的比重时,最适合。

当日期数据点较多时,比如展示近50年某一组数据趋势的变化时,建议使用堆叠面积图,可动态交互,如X轴放大缩小可较为直观的展示数据。当日期跨度较小,如近7天、近3天某一组数据的的变化关系时,建议使用堆叠柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


第二部分:应用中需要注意的细节


1. 折线图

1)为了可读性,折线图线的数量建议不要超过5条。当折线数量超过5条时,可在图表默认状态中高亮最重要的部分。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)为了数据的易读性,建议折线视觉效果使用实线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)慎用曲线。单折线图中线条是唯一的主题,线条的每一个点都真实的反应数据的起伏,一般建议使用折线。

若线条趋势不需要非常精确呈现,且需要消除个别差一点和整体的趋势,可以用平滑曲线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4)折线图可以处理大量数据,非常适合给用户一些具有参考价值的数值,建议添加比较数据

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 面积图

面积图作为折线图的一种衍生,可用来展示连续性数据,可很好地表示趋势、累积、减少以及变化。堆叠面积图更擅于展示部分和整体之间的关系或趋势,而不是传达特定的值。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图

1)柱子之间的间距不要过大,增加数据易读性。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)使用合理的数据油墨比,降低用户获取数据的认知成本

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 堆叠柱状图

堆叠柱状图的数值必须能相加,相加无意义的数据不建议使用堆叠柱状图。如图,同一区域的人员年龄相加,是没有数据意义的,如果将年龄改为人员数量,就可以横向对比不同区域的人员数量,是具有实际意义的。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 条形图

分类数目是固定的,空数据也要展示。如果省略部分空数据节点,会造成不必要的误解,同时,数据的整体分布状况也不能完全表达出来。同理,柱状图也是一样。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 饼环图

1)若计算百分比,每个切片的数值不能为负,饼图切片的大小与其相应的值成比例,所有切片相加必须为100%。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)通过扇形区块的面积,弧度和颜色等视觉标记,展现部分与部分之间以及部分与整体的占比关系。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)饼环图各切片有序排列

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


写在最后


虽然,数据可视化通常会让人联想到商业的分析师,但它通常比想象的更具创意并且丰富多彩。从业务仪表板、公共健康可视化到流行文化趋势分析,数据可视化涵盖了广泛多样的应用情景。

随着数据可视化的发展,数据表现形式也越来越丰富、多样,如在Echarts中有近40个大类的图标样式介绍。如桑基图、雷达图、地图等等。一些之前比较少见的图表类型,也越来越常见,如玫瑰图(南丁格尔玫瑰图),通过人民网在疫情期间的应用,也为大众所熟知。

一般来说,相较于基础图表,目前发展的数据可视化图表,应用场景相对来说比较局限,同时制作方式也较为复杂,不同于基础图表,通过Excel就可以实现,复杂图表的制作需要比较专业的工具,或专业人员来实现,如需要专业的数据分析师通过Tableau、Qlikview、FineBI等数据分析工具来实现,有较高的学习与应用成本。

好的可视化设计一定集易读、突出数据价值、易于分析、美观为一体的,最终让数据变得更加简单,方便交流,反之,不仅让数据变得更复杂,而且还会带来错误诱导。因此,如何让数据分析变得轻松、流畅并且易读,从而提高用户的工作效率,降低用户的工作负担,则成为设计师的重要责任。

本文只是介绍了部分基础图表的应用经验,后续有机会将继续完善可视化图表应用经验的沉淀及分享。

作者:弘毅

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇













揭秘2021红点设计大奖作品KNOWING——通过可视化提高对数据的理解

雪涛

AIOps智能运维平台KNOWING荣获2021年度红点大奖,从它的数据可视化之路可了解如何通过设计提高对数据的理解

微众银行智能化运营团队的软件系统KNOWING荣获2021年度红点大奖,这是团队在多方面获得的奖项之一,也很好的体现了软件系统和团队的综合能力。


关于红点奖

红点大奖是世界上最大的国际设计奖项,是世界知名设计竞赛中最大最有影响的,至今已经举办了大约66年。该组织以“寻找好的设计和创造力”为指导原则,为设计师和公司提供了一个设计作品展示和评估的平台。Red dot由“red dot product design ”产品设计奖,“red dot communication design ”传达设计奖及“red dot design concept ”设计概念奖,三大奖组成red dot设计奖家族。近年红点获奖的数量随着世界工业生产和设计能力的成熟而增加。尽管如此,红点奖和IF奖是世界上仅有的,公认评判好设计的国际机构,而能得到至尊奖 Red Dot:Grand Prix的设计更是行业翘楚。今年,23名国际专家查看、讨论和评估了来自世界49个国家的9178份传达类参赛作品。

有兴趣的话,可以了解一下红点是如何评审和颁奖的
评审——  红点是怎样评选的 The best products in 2020 – The Red Dot Jury selects the award winners_哔哩哔哩_bilibili
颁奖—— 2019红点产品设计大奖 - 红点盛会_哔哩哔哩_bilibili

从设计奖的动态看趋势

德国红点奖机构于2015年在中国设立“中国好设计”奖 (China Good Design)简称CGD,发起针对中国的全新国际化设计奖项。自加入世界贸易组织WTO,中国成为了世界工厂,为世界各国生产基础工业产品。随着中国工业生产能力逐步发展走向成熟,现代工业生产的中心由德国和美国转向了中国。从德国红点奖在中国成立分部的举措,除了看到商业盈利的目的外,还可以看到一个风向标,这就是在信息时代下,更多适应时代的好设计会出现在中国,这也给全球相关专业人士带来了机遇和挑战。蔚来就请德国设计师设计汽车和Logo就是其中一个案例。


得奖项目介绍

项目名称:KNOWING

发布时间: 2019.04

设计师:朱倩蓉

程序员:张若君

项目经理:莫林林

团队:微众银行智能化运营室

地点:中国深圳

奖项类别:2021红点设计大奖-界面与用户体验设计

什么是KNOWING

KNOWING的意思是“having or reflecting knowledge, information, or intelligence”拥有知识、信息,甚至智能。不止于人的专家的知识,KNOWING期望通过挖掘数据和神经网络等IT技术,给监控系统带来更多机器智能,甚至能反哺给人类智能。


  


KNOWING是一个为保证银行IT系统正常运营的监控软件系统。它给IT系统的运维人员提供如智能数据监控、检测IT系统异常及定位和分析异常的服务。通过有效监控和管理,IT系统能实现超越电信系统的可用率。这意味着,IT系统的问题能够被快速察觉和扑灭,不会影响银行的业务,更不会从而导致商业损失,银行用户也因此可享受7*24流畅的线上服务。


设计背景

作为一个数据导向且面向专业人员的软件系统,过往的IT监控系统会展示大量的数据表格,IT运维人员通过表格查询找到所需要的数据,再通过个人经验定位和分析IT系统异常的原因。但是纷繁的数据和庞杂的查找工作,以及对个人经验的依赖需要耗费大量人力,而人的操作是会出现滞后、误判、遗漏、效率低等问题的。KNOWING在原始系统的基础上挖掘了更多的数据关联关系,一方面想用有效的方式展示这些数据关系,另一方面想帮助IT运维人员更快速理解更精准判断数据,从而提高工作效率。

因此,KNOWING的设计就需要与其他的系统不同,尽管并不面向非IT人员,它还是需要用图形化的界面展示密集的数据,通过可视化和交互来体现数据的关联关系,促进对数据逻辑快速理解。


总览

总览页面最上方的时间横轴展示了在一定时间段内检测出的重要IT异常,点击某个异常红点,下面的条状颜色区块是展示这异常分析的5个阶段。接着是异常的影响、评级、分析结论、具体指标等模块,模块的顺序按逻辑分布,从总到分,从粗到细。


根因分析流程可视化

异常分析的最后一个阶段是根因分析(RCA),是异常一个从检测到根因分析的双向流程。通过数据可视化的设计,这个流程可以被非常形象表达和快速理解。左侧是对数据流的3次分类处理,右侧是通过AI,如指纹识别一般找到当次事件与历史记录的共同特征,从而推断当次事件的类型,根据类型推导根因。双向分析最终汇聚成中间的结论。


交易树

KNOWING实时生成交易树,它展示的是一单银行交易所经过的所有IT节点。节点内外和枝干的设计细节表达了该节点的不同状态。IT运维人员可以从交易树中快速得到交易的概览信息。

交易树的生成


子系统知识图谱

IT系统内存在着大量的子系统,KNOWING描绘出了他们复杂的关联关系,这就是子系统知识图谱。图中可以根据部门分簇查看子系统,也可查看全量或单个子系统。若搜索某个子系统,则以此子系统为中心查看所有关联关系。这样,运维人员可以从不同的角度了解子系统并形成全局概览。

3种视图查看:按部门、全量、单个

按部门分类查看

查看全量

查看单个


从以上的例子可以看到,可视化不是单纯的图表方式展示数据,数据可视化是将密集的抽象数据压缩并还原为形象方式展示。由于抽象的信息是人类演化的后期发展出来的,生物性决定了人脑天生擅长处理形象的物体。所以信息越形象,需要经过大脑处理的区域就越少,获取的速度就越快。

https://v.youku.com/v_show/id_XNTgyMDkwODIzMg==.html?firsttime=95


对设计与科技的思考

IT技术逐渐渗透各个领域,行业与行业、技术与技术间逐渐融合。科技,尤其是IT技术和设计未来会如何相互影响?经过多年对后台产品的设计以及经年的学习和深入思考,本人确实看到了一些趋势也沉淀了一些见解。以下是我给红点奖写的一些思考。

科技如何改变设计

科技是人类能力的外化,科技是新工具即新形式。设计的本质就是做内容和形式的适配,所以,新科技的到来意味着形式的改变,而形式的改变会影响内容,这就需要重新做内容和形式的适配工作,也意味着新设计需求涌现。

设计的未来挑战

从设计的角度来讲,过去被设计物的传达是单向静态的,因为工业时代的事物相对简单。我们慢慢在步入智能时代,物体会从静态的变为智能动态的。所以,静态的单向的传达会逐渐变为动态的双向的交互。比如原来的静态的画面通过显示设备传达设计师的意图,如今还需要考虑到智能系统和交互设备所拥有的能力,根据使用者的不同反应给出反馈。因此,新设计需要考虑的元素会更多更复杂。


未来已来。

设计师想要在新的时代迎接挑战,甚至是拔得头筹,一方面,可以参考工业革命时期科技对设计的影响来预判未来的变化;另一方面,在新工具产生的时候,设计师与其挣扎纠结而故步自封,不如快速接受新时代的变化,学习新知识和运用好新工具。

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

文章来源:站酷 作者:Z085740511 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何做好数据可视化

雪涛

在如今这个时代,越来越多的信息和内容呈现开始依赖数据驱动,也开始有更多的场合需要信息图来辅助呈现,对于可视化数据,从来没有像现在的要求这般高。但是另一方面,我们周围充斥着大量错误的图表呈现,希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图。

1、选择正确的图表类型

不同的图表类型所承担的功能是截然不同的,不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征,因此,在设计信息图之前,先理清需求,再来选择使用哪种图表能够更好地呈现。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

2、根据数据的正负值选择正确的绘图方向

当使用数据在0的左右波动,产生正负差异的时候,请使用基线来正确反应正负关系,不要在同一侧来呈现数据,这样很容易带来误读。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

3、始终从0处开始绘制条形图

和折线图不同,条形图如果从非 0 的位置开始,确实更容易反应趋势,但是给所体现的数据量级和特征是失真的。比如在下面的案例中,B看起来是D的3倍以上,但是实际的情况是,两者差异并不大。所以需要从座标 0 处开始呈现数据,这样会更准确。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

4、折线图应该清晰呈现Y轴上的趋势变化

对于折线图,需要考虑一下 Y轴上的尺度,因为如果单位太大,那么折线图所呈现出来的波动幅度不够大,趋势的表达也不够清晰。这个时候,建议调整Y轴上的单位大小,确保折线的波动幅度大概占整个Y轴的 2/3 即可。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

5、使用折线图的时候注意时间

折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式,它有助于说明随着时间推移,某些情况的变化,但是当间隔时间频率不对,参差,缺失,那么折线图的数据可能会无法对应,这个时候使用条形图其实是更容易呈现的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

6、不要使用平滑的折线图

平滑的「折线」在视觉上看起来是愉悦,但是它歪曲了背后的实际数据,也很难读到关键的转折点数据。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

7、避免让双折线互相交叉

通常,为了为了节省可视化设计的空间,设计师会采用双折线来呈现数据,但是在数量级不对等的情况下,折线图会很难读,甚至容易会误导用户,这个时候,建议分开使用2个不同的座标系来呈现,更加易读,同样可以看的出趋势,也不会得出错误的结论。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

8、限制饼图中的扇形的数量

饼图是最常用但是也是最容易误用的图表之一,在绝大多数的情况下,条形图是更好的选择。如果你决定使用饼图,那么这里有2个基本的建议:

不要超过7个不同的扇区,让饼图尽量简单
你可以将额外的片段分组到「其他」的扇区中

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

9、在饼状图中直接标注对应的数据

没有合适的文本标签说明的情况下,无论信息图设计得多好都没有意义,直接在图表上进行明确的标识,才会对观看者产生价值,需要观看者自己去关联的设计是失败的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

10、不要在扇面上做标注

不要将数值直接放置在饼状图的扇区上,在较小的扇区块上数据会非常难读,相反,使用引线来指引数据对应的区块会是更好的方法。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

11、控制饼图中扇面的排序让其方便阅读

对于饼状图的切分方式,有2种常见的顺序:

将最大的一块置于12点钟方向,然后顺时针按照大小来排布所有的块
将最大的一块置于12点钟方向,然后在右边放次大的块,右边放置再次的块,基本上就是越大的扇区约靠上。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

12、避免随机排列

同样的建议也适用于其他的图表,不要使用字母顺序来进行排列,不要使用笔画排序,而是按照数据大小来进行排列,水平条形图就将最大数据放在顶部,垂直排布则将最大数据的放在左侧,减少阅读的时候的信息分辨的障碍。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

13、不要牺牲信息图的可读性

饼状图通常是最不容易读的图表,因为它很难对相似的数据进行对比,所以在将它设计成环状的时候,我们可以使用辅助的数据来呈现,但是一定不要牺牲彩色扇区的可读性,这样看起来高级但是并不具备基本的可读性。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

14、视觉效果不要影响数据的呈现

不要让不必要的视觉效果来分散用户的注意力,这可能会导致用户对于数据产生误解,通常你应该避免使用:

3D元素和阴影
渐变和失真的色彩
斑马纹或者过多的网格线
装饰性过强的字体

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

15、选择和数据属性匹配的配色

配色是可视化设计当中绕不开的一个重要的部分,在设计的时候可以考虑以下三种不同的配色方案:

使用定性的配色方案,不同的色相对应不同的元素,确保在整体配色的可访问性
使用符合一定顺序(比如明暗)的近似色的配色,呈现出一种连续的色彩变化
横跨冷暖色调的配色方案,将中性色置于中间,用来呈现存在正负关系的数据变化

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

16、使用无障碍的配色

根据目前的统计数据,大概 12 人当中有一个人存在视觉障碍,有的是色盲,有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。

在配色方案当中使用不同饱和度和明暗的色彩
使用去色效果来校验你的配色的对比度

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

17、关注内容的易读性

在信息图的排版易读性上同样是有要求的,要避免分散用户的注意力,不会制造视觉障碍:

选择清晰的非衬线字体,避免使用衬线体和过度装饰的字体
避免使用斜体、粗体和全大写字体
确保和背景之间的信息对比度
不要旋转文本

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

18、使用水平条形图来优化倾斜标签

这是一个非常简单的技巧,能够确保用户在阅读的时候足够轻松,不会因为倾斜的文本扭伤脖子或者加重落枕的症状。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

19、事先选好你的图表库

如果你的设计项目是面向 Web 或者移动端的交互式图表,那么你需要考虑的第一个问题就是,要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同,你需要在一开始就基于你的需求和设计想法,做出选择。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

20 、不只停留在在数据静态呈现上

信息图本质上是在对数据进行优化处理、呈现的基础上,帮助用户进行探索,最大化地从数据中获得信息洞察,让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

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

文章来源:优设   作者:Taras Bakusevych

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




如何制作数据可视化地图

雪涛


第三方地图的获取和对接

普通地图一般都是去对接三方平台,如百度地图、高德地图、腾讯地图、谷歌地图等。他们都会提供对应的地图开放服务。以高德地图为例,实操一下地图的获取和调色方法以及最后跟开发交付的流程。

首先登录高德开放平台,点击右上角控制台


进入控制台会进入下图页面(大家可以多点点查看下平台的相关功能内容,比如点击数据可视化里面会有集成的地图可视化效果)


数据可视化里面后有一些集成的模板化的效果,大家可以点点看看



回到主题点击自定义地图就可以对地图进行自定义配置了,如下图: 



页面上会有好多配置好的模板供你选择,也可以选择自己自定义配置,根据需要选择一个点击进去,就进入地图配置页面。


上图中左侧为地图的可配置项目,点击选择可根据自己的需求对地图进行配置,包括颜色字体界线等等都可以配置。每个配置项下面都会有很多配置子项,非常详细,当然里面会有些收费的配置项需要付费后使用,这块大家可以多点点,根据自己需求来做调整。


如果想要获取3d建筑的样式把右下角层级超过17后,会显示建筑,可根据需求调整角度和位置。


最后将调整好的样式,直接放大全屏后截屏后就可以在设计稿里使用了。


关于开发样式的对接

将配置好的文件点击右上角的发布,直接继续点击发布


发布成功后会出现如下的弹框,里面会有一些调用和使用地图的方法。


根据使用需求可选择不同平台的使用方式,直接复制链接丢给开发就好了。

3D地图建模及贴图的制作获取方法

首先看下网上找的两张参考图的效果

(图片源自网络,如侵权删)

(图片源自光启元,如侵权删)


3D地图的获取和建模的流程

首先大家可以在网上下载地图的边界轮廓文件,这里推荐网站-阿里云Data V 的一款地图选择器(http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580163&lng=106.72278672066881&zoom=3.5)

这里可以下载对应的各个省份 城市的边界地图轮廓模型的svg文件,点击左下角进行下载


以山东省为例将下载好的svg文件导入ai里转换成ai格式,这里要注意的是另存的时候一定要选择比较早的版本,建议存为Illustrator 8图中箭头所指的那个版本,要不然c4d会是识别不出来。


将转换好的ai文件导入c4d,执行挤压。山东省的3d模型就建好了。


模型建好之后需要将模型进行展UV处理(展uv:将一个3D立体的模型拆开,展开成一个平面2D图片。作用:使模型的贴图效果更真实。)这里用到展uv的插件(FDUVToolkit 1.0)后台回复 uv插件可获取插件。下图是在c4d中展完uv的样图,截图保存下做备用(为后面的贴图位置做参考,后面的贴图需要和展uv的这个图一一对应上)。


将处理好的模型导出obj备用(后面给开发和在ae中处理效果都会用到这个格式)



漫射贴图制作的思路

首先在Google Eaeth Pro 上面找个省份对应的位置然后执行文件-保存就能保存当前展示得地图纹理了(建议保存两张贴图,一张带边界和地名的方面后面制作贴图的时候方便对上位置,第二张就是无边界地名的作为最终的漫射贴图)。


将c4d展完uv的截图、还有制作模型下载的地图边界路径、和刚才的截图一一拖入ai里面 ,新建一个4k(这里根据需求建就行)的画布,将展uv的截图缩放到画布大小,如下图,然后根据边界轮廓都对应好 执行剪切蒙版,最终会得到下面的图的效果。(切记贴图的位置一定要和上面uv截图的位置一致,要不然贴上会是乱的)

高度贴图的思路(用到软件QGIS)

首先去地理空间数据云上下载素材:选择对应的行政区位置。


将下载好的数据解压后倒入QGIS软件;倒入的图片稍微有些明显的拼接的缝隙 将图片位移处理后导出备用。



最后处理完的贴图如下:(切记贴图的位置一定要和上面uv截图的位置一致)

法线贴图的获取和处理思路

将处理好的高度贴图导入到ps中 执行-滤镜-3D-生成法线图


直接点击确定,法线图就做好了,直接导出就可以了,最终效果如下:


这样整个3d地图所需要的贴图就都做好了 。

最后贴图制作好了之后就是贴到模型上处理效果,因篇幅原因本期暂时不分享了。


城市模型的获取方法

推荐一个网站用于下载地图数据叫-OpenStreetMap (OpenStreetMap 是一个由地图制作爱好者组成的社区。这些爱好者提供并维护世界各地关于道路、小道、咖啡馆、铁路车站等各种各样的数据。)    


地址:https://www.openstreetmap.org/#map=15/39.9198/116.4536需要的自取。


首次打开是这样的


点击导出会进入下面界面,(ps:当前屏幕看到的区域就是要导出下载的位置)点击下方的蓝色导出按钮就会提示下载,最终得到一个map.osm的文件。    


下面需要将下载好的地图数据转换成模型,这里用到的软件是Blender及他的GIS插件公众号回复“Blender” 或“GIS插件”领取安装包(包里有详细安装说明)


先打开Blender:选择 GIS - 导入 - Open Steeet Map xml(.osm)    

 
根据界面内容 选择刚下载的文件进行导入    


导入后就会得到下面的城市模型了,如下图:    


执行:文件 - 导出 - 选择后缀是.obj的这个如下图 就可以将模型导出obj了。    
 

做到这一步本次的分享也要接近尾声了,后续的操作可继续在Blender里做效果,或者通过Blender导出城市的obj格式的模型文件,用C4D打开做效果。


以上方法只是获取一些建模的方法,后面一些定制化需求需要针对某一个建筑单独建模,一般都是基于实测数据画出建筑的整体外轮廓,然后把实际拍摄的大楼四个面的照片进行处理制作为贴图贴上,篇幅原因大概讲一个思路。


最终的效果-深色


浅色效果


关于开发对接

一般这种效果都会有好多种实现方法,threeJS,webgl,U3D,Ue4,Ventuz等等,如何对接开发给开发提供那些东西,这都取决于开发使用的工具和实现的方式,这里建议做之前充分跟开发沟通想要的效果,可以让他们做个调研方案,这样会事半功倍,免得做一些无用功,出现设计和开发相互甩锅来回扯皮的情况。

    

不管是基于什么实现大致的实现思路都是差不多的,基本都是会需要设计师提供地图模型、UV贴图、烘焙贴图、材质参数等等。   

 

这些东西对接其实跟咱们自己建模贴图然后在处理材质灯光(有些不支持灯光渲染,就需要把灯光的效果烘焙到贴图上直接给贴图)这些参数是一个原理,把基础模型和对应的参数和贴图,给到开发就可以了。  

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

文章来源:站酷   作者:MR小六

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




数据可视化--如何应用这12种图表

雪涛

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?下面介绍这12种图表是如何应用的以及它们的优缺点

图表设计原则

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?总结了几个设计图表的基本原则

1.确保准确性

数据可视化的设计首先需要始终保持数据的准确性和完整性。通过使用清晰的标签、准确的轴线等精准的的展示数据,使数据时刻都是真实可信未修饰过的,不能为了修饰美化数据而歪曲混淆信息。

2.提升用户体验

为用户浏览数据提供上下文标识有助于用户快速感知数据,设计时要考虑到用户现有的心智模型——这些心智模型可能由广泛使用的工具塑造而成,创建出色的可视化体验可使用标志性的功能引导用户找到他们需要的东西。以帮助感知快速响应的系统。

3.突出重点

减少认知负担使用户专注于主要的信息上,需要对整体视觉进行降噪处理。最大化数据信息的呈现比率并避免设计过多无关的图形元素。应用颜色促进图形的理解:标签、分类、突出显示或度量;帮助用户理解层次结构、数据方向和关系。


12种图表应用方式

下面介绍12种图表,应该根据什么样的场景结合哪种数据结构使用,以及是否存在可替代的方案等。其中有几种是在实际使用中并不常用的类型,大众对这类图表的理解并不多,我们只有在理解图表的含义及功能才可快速应用在设计中。

1.气泡图

气泡图也是散点图的一种,其拥有多元变量,除 X 轴和 Y 轴所代表的变量值外,每个气泡的面积代表第三个值。

缺点:气泡的大小是有限的,太多的气泡会使图表难以阅读。

设计时需注意:

a. 选择合适的气泡大小,不可过大或者过小,太的气泡容易遮挡到其他气泡不便于选择查看被遮挡的详细数据;太小的气泡难以选择

b. 不要使用奇怪的形状,均采用同一种气泡类型仅通过颜色做区分即可;无需做太多造型,多种造型结合不够直观难以区分种类


2.热力图

热力图用于指示区域内每个点的权重。除了将地图作为背景层外,还可以使用其他图像。热力图中的颜色通常与密度挂钩,每个颜色代表一个数据区间,通过使用颜色的对比来表示地理区域或数据列表的密度分布信息。

如何设计?

a. 使用简单的地图轮廓: 少量的留白轮廓可适当区分个区域边界,大量留白轮廓使边界过于清晰使各区域有割裂感的会分散注意力。

b. 使用简单的图案:图案过多容易干扰阅读,尽量不使用图案,如果必须要用使用1-2种即可,过多则难以驾驭;

c. 使用合适的颜色: 强烈的颜色会导致视觉负担,难以区分轻重缓急。使用单色或相近色,并调整阴影以区分区域更好。

d. 选择合适的数据范围:数据范围区间应该是均等的,而超出范围的数据可用 +/- 表示。

这些是设计热力图时需要注意的地方,适用于大多数情况,当然这也不能作为绝对的标准,需要具体情况具体分析。


3.桑基图

桑基图显示了从一个指标到其子级指标的流量及比例。在流程的每个阶段,节点可以组合或分割路径。两端的节点宽度显示其数值大小,因此节点越宽,占比越大。可用于财务、管理和能源分析或代表产品的生命周期。这种类型的可视化可用于描述实体从源头到终点的流程

优点:对于文字流尤其有用:金钱、货物、时间、选票等,但也可用于许多其他目的。通过连接流线可以直观的区分变量的聚散关系。

缺点:桑基图只能通过节点、连接和数值展示简单的数据故事。不能从中推导出更复杂的关系。


4.华夫饼图

华夫饼图是一个非常有趣的图表,通常由100 个方块组成一个整体,因此它可以根据指标与整体的关系进行着色或填充显示指标的占比情况,就像饼图一样,同时它也适合显示单个百分比。

优点:它能够显示整体的各个部分并比较单个百分比的多样性,指标比例能够更清楚地通过色块面积表示。

缺点:涉及太多指标时颜色区分变多使展示变得过于复杂,无法直观看出单个指标的面积结构,因此适合用在只有少数指标的展示


5.矩形树图

当画面中需要多次出现饼图或环形图展示指标间占比情况时,重复元素过多用户阅读时更加如意感觉到乏味,此时可以采用矩形树图展示占比,通过使用色块面积比例来区分指标间占比大小情况。

优点:使用区域空间而不是角度显示数据,当类别超过五个时(避免有时难以标记的饼图)以及可视化类别内的子类别,树形图比饼图更有用。

缺点:此类图表应用不够普遍,可能有大量用户对这种图表形式不太了解。


6.旭日图

旭日图是树图的一种替代方案,采用圆环形式表示分层数据信息。层次结构从内圈到外圈扩散,其展示形式像太阳一样由中心向四周发散。圆环的每个指标被切片对应一个节点,圆心是根节点,在出现多个层级换结构时通过圆心切换回上一层级。旭日图在用色上最好采用不同深浅的颜色来表示父子级结构在色调上保持一致性,使用户能够直观的看出层级间的关联关系。

优点:可以显示层次流以及整个关系的一部分

缺点:如果配色方案不正确,那么理解图表就会变得困难。此外,过多的切片会使图表拥挤且难以阅读。


7.靶心图

同样是占比图的一种,与常见饼图不同之处在于,该图的指标间没有关联即占比百分数相加不等于100,但又需要同时查看指标的占比情况,因此需要采用这种形式进行对比分析

优点:适用于指标间比较分析,视觉上较为直观;

缺点:因层叠环形过多无法在图表上加大量文字辅助展示


8.热词云

热词云是展示文本数据的可视化形式,由大量关键词组成的云状彩色图形。通过关键词的大小颜色等区分词语的使用频率以及重要性,可以快速帮助用户感知最突出的关键词。

优点:能够快速获取关键词信息,可通过热词快速检索所需信息

缺点:因热词云需要大量的数据支撑,对数据依赖度高,如果数据过少效果则不明显,不适合精确分析。


9.河流图

河流图是显示指标的大小或比例如何随时间变化,“流线”的垂直宽度表示该实体的大小。可以通过使用固定比例查看所有指标的整体大小的变化;也可以使用相对比例以某一项指标为参照目标,其他指标的值与此做对比;若所有指标始终达到 100%呈现的效果类似于面积图。

优点:可查看新指标的出现而其他指标消退的速度,整体的趋势发展状态比较直观。

缺点:虽然看趋势发展方向比较直观,但是详细的信息阅读起来较为困难。


10. 瀑布图

瀑布图通过对初始值进行多次加减运算来呈现达成某个值的运算过程。在瀑布图中,需定义好颜色的含义,不同的颜色用于显示不同的操作过程,例如绿色表示加法,红色表示减法,蓝色表示所有操作后收到的总值。这里起始值和最终值之间的所有值都是浮动的。

优点:快速查看在上一数据的基础上当前数据的变化情况

缺点:使用此图表是只能表示过程的流程


11.仪表盘

仪表盘是一种物化图表常用在时钟、汽车仪表等,通过指针角度代表当前数值进度。它可以直观地表示一个指标的进度或实际情况。一个仪表板仅能表示一种含义,若出现两种含义的仪表尽量分开展示,

优点:仪表适用于间隔之间的比较。

缺点:不适合用在具有多个分量的数据结构


12.甘特图

甘特图直观地显示了任务的时间区间、实际进度以及与需求的比较。因此管理人员可以轻松了解项目的进度情况。

优点:适合快读查看项目进度、状态随时间变化、项目流程等时间管理类信息

缺点:可查看整体情况,详细细节还需进行具体标注


总结

图表的类型多种多样,实际项目中使用何种图表需要根据数据间的关系来决定,如果画面出现同类型结构关系的频率过高想要增加画面的趣味性减少阅读的疲惫感可以通过改变图表的颜色进行区分,或者变换图表类型,有部分图表是可以替换使用的,例如:饼图表示占比关系,可以换成南丁格尔玫瑰图或环形图,也可换成上文所提到过的华夫饼图、矩形树图。因此在设计时可以不用太过于局限在图表的结构上,可以在其他方向进行优化。



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

文章来源:站酷    作者:胖kuan 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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






B端数据可视化设计指南(信息图表篇)

雪涛

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

在如今的工作中(尤其是 B 端)越来越多的会开始出现数据可视化的身影,对于一部分小伙伴来说这个概念是较为陌生的,面对这道无形之中提升的“门槛”我们常常会表现的手足无措。所以,为了让大家对于数据可视化不再那么束手无措,我希望能通过这篇文章和大家一起交流学习,解决一些属于我们共同的问题。

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化的基本信息

1. 数据可视化的定义

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

2. 可视化发展简史

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

3. 为什么会使用数据可视化

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

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

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

4. 数据可视化的优势

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

认知减负是使用者在使用数据可视化工具时候的最直观感受,当所面对的庞大的、复杂的枯燥海量数据集变成了图像化、通俗化、形象化的视觉符号时,我们会本能的放下对于面对冰冷数据时候的抗拒和戒备,这是因为人对于一目了然更加接近自己熟悉的有趣事物的时候,会更为亲切和愿意去主动理解。而且被处理过、规划过的简洁直观表现形式,能更为直接的让使用者看到数据与数据之间的关联,进而分析出其潜在关系,在人对数据的认知这个环节上降低了识别成本和分析成本。

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

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

5. 使用目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

6. 应用场景

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

设计师们的任务

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

1. 设计难点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

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

2. 设计目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

案例制作

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

1. 明确性质

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

所以从综合的角度来说数据概览部分可以理解为:

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

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

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

2. 定义模块优先级

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

3. 明确图表选择

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

比较类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

构成类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

分布联系类图表

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

4. 匹配图表 重构布局

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

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

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

统一透气 具有呼吸感

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

5. 模块拆解

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

层级明确 突出重点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

统一营造

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

呼吸适中

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

细节处理

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

6. 组装自检

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

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

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

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


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



文章来源:优设    作者:肃静、

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




B端产品如何做好数据可视化?

雪涛

我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。

  • 背景
  • 什么是数据可视化
  • 数据可视化的应用价值
  • 如何做好数据可视化设计
  • 数据可视化发展趋势
  • 结语

背景

“得益于计算机技术和海量数据库的发展,个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣, 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts

“大数据的影响,就像四个世纪前人类发明的显微镜一样……而大数据,将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson

从数据,到海量数据,再到大数据,对人类的做事和思维方式都有很大的影响。在《大数据时代:生活、工作与思维的大变革》一书中,作者归纳了大数据的三个特点:

  • 更多:不是随机样本,而是所有的数据;
  • 更杂:不是精确性,而是混杂性;
  • 更好:不是因果关系,而是相关关系。 [1]

当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解,通过图表将杂乱的数据进行科学有序的呈现,使用户找到数据的变化规律以及潜在价值,帮助用户作出决策。就数据可视化的应用来看,应用范围极其广泛,如政府应用、商业决策、公共服务等等。

什么是数据可视化

顾名思义,数据可视化就是将数据转换成图或表等形式,以一种更直观的方式呈现数据。通过可视化的方式,我们可以将大量复杂的数据通过图形化的手段进行有效地表达,帮助用户发现规律和特征,发掘数据背后的价值。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 1 @Marco Zemolin Siresia Bagnoli

数据可视化的应用价值

1. 易于理解,有利于发现信息特征

使用可视化的方式来表达复杂的数据,可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式,我们可以以清晰和连贯的方式解释大量的数据,从而让我们理解数据,得出结论。

案例:流媒体平台节目数量的变化

以下图为例,当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时,以表格方式呈现效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

未经可视化设计的表格数据图

如果通过可视化设计处理后效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

经可视化设计后的数据图

在这个案例中,我们可以看到,通过文字信息表达的方式,所有的数据在文字信息的表达中都只是零散的个体,我们很难在短时间内对列举数据有一个大致的了解,更不用说发现特征得到结论了;而在可视化表达中则不同,所有的元数据通过图表形成一个整体,数字信息被转化为视觉信息,通过可视化图表,通过观察点的位置和颜色即可感知到数据的差异,原本需要通过计算数字大小完成的对比,变成了肉眼可见的点的颜色与间距对比,我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。

2. 将数据转化为更具吸引力的故事

据研究发现:人脑处理图片信息的速度显著快于处理文字信息,例如一篇 300 字的小故事,看一遍需要数十秒,而转化成图片后则只需要一眼即可记在脑海里。

这表明,在信息的类型中,人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事,帮助用户快速接收、处理信息,激发用户联想并产生情感共鸣。

案例一:新冠病毒如何通过空气传播

随着新冠疫情在全球各个地区的蔓延,如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 2 @Mariano & Javier

案例二:在叙利亚,谁和谁战斗?

许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候,这些团体之间有的结盟,有的敌对,这让人难以理解。但是,Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩,将这些数据简化为一种简单的、易于理解和可互动的形式,让人们可以轻松了解这些团体之间的关系和故事

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 3 @Joshua Keating and Chris Kirk

3. 帮助人们作出决策,加快决策过程

现实生活中大部分的人是视觉学习者,他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此,相比起阅读和理解文本,大部分人更容易通过图表或其他可视化形式来理解数据,合理的数据可视化设计可以提高他们作出决策的速度。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 4 @Bea Vaquero

如何做好 B 端数据可视化设计

1. 明确客户需求

设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通,确定他们的业务诉求,也可以理解为确定客户的初衷与目的,从企业客户对数据可视化的需求看来,通常会有两种类型:

  • 侧重于汇报展示,主要用途是为了对外宣传、对内展示等,对于这类需求,设计时可强化视觉效果的呈现,对数据进行场景化设计,尝试让数据以一种新的载体,有趣的互动等形式结合展现。
  • 侧重于数据分析和协助决策,对于这类需求,一定要清晰了解需求方的业务内容和重点指标,重点关注数据的维度、种类、数量等信息,视效设计上应该优先满足业务诉求。

明确客户诉求,通过设计手段帮助客户达成目标,这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要,我们才能快速推导产品结构、关键数据、视效风格等信息。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 5 @Daria

2. 确定关键指标与优先级

关键指标是对一组或者一系列数据的统称。一般情况下,一个指标在屏幕上独占一块区域,所以通过关键指标定义,我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。

那么关键指标的选取依据是什么呢?我个人认为主要还是依据客户诉求,数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是,哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望,选择出一系列关键指标。

对于这些选取出来的关键指标,我们需要对其进行优先级的排列,一般来说,主要指标能够呈现业务的主要逻辑,一般放在显眼位置,用重点元素标识;次要指标围绕主要信息进一步阐述;辅助指标是对主要信息的补充,一般放在非核心区域,或者二级结构中。

通过合理优化关键指标并进行优先级排列,能够保证数据可视化的核心设计的重点,避免数据空洞散乱。

3. 合理使用数据图表

在选择图表展示相关数据指标时我们要思考各个指标的主要呈现,更进一步的讲,是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发,选择合适的可视化方式来呈现数据。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 6 翻译自@Stephen Few

4. 合理进行页面布局

数据可视化页面布局的设计是相对灵活的,为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置,横向布局最为常见(人眼的水平运动比垂直运动快,会先注意水平方向的事物),核心数据场景划分在中心位置,占较大面积;其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

@布局设计案例

5. 制定设计方向

在定义设计风格的阶段,从项目背景出发,综合行业类型、产品定位、品牌传播等因素,提取关键信息,构建设计框架。

数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主,是因为相比于浅色基调,深色背景设计能够有效缓解视觉疲劳,其次深色设计能够更好地营造对比差异以及数据层级,再者深色设计更容易呈现丰富的动态效果,营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性,例如党政机关类项目会慎重考虑用色,应当确保设计严肃,庄重。

数据可视化的设计除了对数据进行合理设计,还需要注重场景感的塑造,例如,我们通过场景化设计可以让某大数据平台成为大型“图书馆”,查看数据的过程就跟图书馆看书一致,场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据,当然合理的构建动态数据效果能够让数据具备“生命力”。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 7 @Gan Gryc

6. 设计对比

除了尺寸和位置,我们还可以通过配色来突出数据。

无论是通过颜色或形状对比设计,容易产生强烈的视觉冲击力。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 8 @Bureau Oberhaeuser

利用明度的对比,我们可以用深色烘托鲜明的色彩,或者用鲜明的色彩衬托某一块暗沉的色彩,亮色靠附近的暗色衬托显得更加鲜明,其色彩特征表现得更加充分;

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 9 @Zoey Shen

正确的对数据进行配色,让数据传递出的信息更清楚、更明白,例如国内 A 股,红色代表涨,绿色代表跌(美股绿涨红跌)如果给国内的股票、金融等相关客户做数据可视化设计时,需要避免不同地区文化所产生的差异。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 10 @Dima Groshev

7. 选择 2D or 3D?

随着数字孪生概念的火热,越来越多的企业热衷于打造自己的 3D 数据可视化产品,那么 3D 可视化就一定比 2D 强吗?

数据可视化设计本身就是为了高效传达数据信息而服务的,相比平面呈现,3D 最大的优势在于多了空间维度,适合那些需要跟空间结合的数据呈现,例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗,显然不是绝对的;需要根据实际业务需求出发。

通常我们所说的数据 3D 可视化,就是把大量复杂抽象的数据信息,通过 3D 模型以视觉方式呈现出来,帮助人们理解和分析数据。相比于数据 2d 可视化,数据 3d 可视化具有以下的优势:

  • 展示空间相关的数据,因为空间数据具有三个维度,如果想要将其以视觉方式直观呈现出来,就必须要借助 3d 模型。例如显示一栋大楼不同楼层的人员分布情况,此时只有 3D 数据可视化能够帮助我们达到目标;
  • 视觉冲击力更强,相比于 3D 可视化从视觉上表现力更强;
  • 场景/对象仿真,在一些需要高度仿真的项目,例如与军事、地理勘测相关的项目中,数据 3D 可视化就不可或缺了,无论宏观态势还是细微结构的精密运行,数据 3d 可视化都可以将相关信息清晰呈现给使用者,将真实的环境、对象搬到屏幕上,降低使用者的认知成本。

在一个实际的数据可视化产品项目中,有必要应用 3D 数据可视化的情形;

  • 需要展示多维空间数据
  • 需要通过对场景/对象进行仿真,减少使用者的认知成本和学习成本
  • 需要依靠 3D 效果来提升视觉冲击力

相比 2D,3D 的设计与开发成本相对较高;其次 3D 场景会容易产生视角遮挡以及操作成本等问题,那么从实际项目出发合理选择才是最重要的。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

8. 设计还原

设计稿完成了并不代表设计师在这个项目中的工作就结束了,在后续的开发工作中,设计师还要与开发人员合作,减少上线产品与设计稿的差异。

这个阶段的工作也并非听上去那么容易,尤其是 3D 可视化设计,我们会使用相关 3D 工具制作设计效果,但 3D 设计工具与最终开发引擎存在着色、渲染等差异;在这个时候我们需要灵活运用开发引擎特性,提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识,帮助设计效果实现同时也提升对接效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

9. 调优与测试

测试客户终端上线是否正常,有无适配所造成的兼容性问题;排查有无视效及体验问题,同时也要考虑极端场景下所产生的问题及应对方案。

对于大型 3D 可视化场景会存在性能卡顿,加载缓慢等问题,在保证视效基础上尽可能压缩相关美术资源,减少不必要的效果计算和内存占用量,根据实时效果需要不断优化性能提升产品体验度。

数据可视化发展趋势

趋势一:数据可视化 ╳ AI人工智能

随着企业发展数据量日益庞大,通过人脑分析复杂数据变得越来越困难,我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据,为企业节省了宝贵的时间和资源,目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。

B端产品如何做好数据可视化?收下这篇7000+的干货!

IBM 数据可视化专家 Mauro Martino 创建的仪表板,允许用户可视化新闻中出现的主题

趋势二:数据可视化 ╳ XR

AR 和 VR 技术的应用可以增强数据在空间上的感知,从而帮助人们更好地使用数据。通过结合 VR、AR 技术,用户能够更好,更快地理解、分析数据。最近进行的许多研究表明,VR 和 AR 具有较强的感官体验,可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析,并更快速地找到解决方案。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 11 LM9000@5puj47980xk

趋势三:数据可视化 ╳ 实时数据

在数字时代,事物变化很快,企业需要对数据告诉他们的信息做出快速反应——正因为如此,实时可视化数据比以往任何时候都更重要。

在 COVID-19 大流行期间,企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。

实时数据可视化可以采取一些简单的形式,如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 13 @Esri & The Science of Where Podcast

趋势四:数据可视化 ╳ 全面体验设计

用户体验为核心的数据可视化设计是一种重要趋势,将用户放在第一位,然后是数据。无论处在哪个行业,设计师都应该遵循类似的思考过程,从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题,以及他们面临哪些可能的困难?他们需要什么信息和功能来解决这些问题?我们如何以最佳方式为他们打造数据可视化?

最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并,帮助用户进一步钻研数据并发现模式、趋势和相关性。

结语

数据可视化是一门同时结合了科学和艺术的复杂学科,其核心意义在于清晰的叙述和艺术化的呈现,这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ,只有最终达到帮助用户理解数据和做出决策的目标,才能发挥它巨大的价值和无限的潜力。

文章来源:优设 作者:AsiaInfo Design

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


数据可视化设计指南:设备篇

雪涛

整个合辑一共有 10 篇文章,分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章,具体展开来讲一讲可视化大屏设计的知识点。(我命名为可视化设计十要素)

同时也会包含    同学们问我的问题以及我搜集的问题,将会以问答的形式去给大家讲一讲,如有不对的地方,还请大家指出,我们一起探讨进步!

文章较长,请仔细阅读,基本涵盖:设备信息,分辨率尺寸,大屏适配,投屏事项,掌握本文可应对日常可视化设计设备方面的知识。

超全面的数据可视化设计指南(一):设备篇

设备分类

1. LED 屏幕

政府大屏主要以点间距去区分屏幕的精细度,点间距越小,造价约昂贵;面积越大越整体,造价越高。离屏幕越近颗粒感越强,设计效果也就越不清晰,LED 显示屏表面不平整是导致 LED 显示屏图像失真的主要原因。LED 显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍:按照不同点间距进行分类,P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20(间距越小,图像越清晰,价格也越高,一般政府 led 屏基本都在 P1.25-P6 之间)。

最佳视距=像素间距/(0.3~0.8),这是一个近似范围。如 LED 显示屏 P16mm,最佳视距为 20~54 米。

超全面的数据可视化设计指南(一):设备篇

2. 液晶拼接屏

拼接屏相比于点间距比较小的 LED 屏,价格方面会更便宜一点,拼接屏设计时最主要就是拼缝的处理,注意拼缝,设计时非必要情况下,都要跳过拼缝,尤其是“圆”这个造型。

拼接屏:46 寸,55 寸 物理分辨率:1920*N 1080*N(n 代表屏幕数量),1.7mm、3.5mm、0.88mm、0.44mm、无缝隙;企业常用(1.7mm 和 3.5mm)

大屏拼接缝隙:设计时应尽量不要跨屏去设计,会使画面交叉,不重叠,尤其是圆形。

超全面的数据可视化设计指南(一):设备篇

3. 大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成 N 块后分配给 N 个视频显示单元,完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要,输出信号数量等于显示单元数量。

超全面的数据可视化设计指南(一):设备篇

4. 视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备,一般来说输入信号数量要大于输出信号数量。(我们想在 9 块显示器上同时监控 100 个摄像头传来的信号,就用矩阵来实现即可)

视频矩阵是指通过阵列切换的方法将 m 路视频信号任意输出至 n 路监控设备上的电子装置,一般情况下矩阵的输入大于输出即 m>n。有一些视频矩阵也带有音频切换功能,能将视频和音频信号进行同步切换,这种矩阵也叫做视音频矩阵。

模拟视频矩阵的输入设备:监控摄像机、高速球、画面处理器等很多个设备,显示终端一般为监视器,电视墙,拼接屏等(通常视频矩阵输入很多,一般几十路到几千路视频,输出比较少一般 2-128 个显示器;例如 64 进 8 出,128 进 16 出,512 进 32 出,1024 进 48 出等)。

超全面的数据可视化设计指南(一):设备篇

总结:矩阵只能负责信号的切换,不能处理,不能做效果。大屏拼接处理器功能十分强大,具备矩阵功能的同时,还可以实现任意开窗、漫游、叠加、场景保存与轮换。

5. 液晶拼接屏的优势 – 拼接处理器预设场景

4*2 大屏展示端,我们通过控制端,借由拼接处理器可以对大屏进行随意开窗,漫游,叠加,画中画等效果。在控制端拖动布局,大屏会随之改变布局,非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。

如果你们企业还在因为屏幕适配以及尺寸问题而纠结,或者想展示:开窗,漫游,叠加,画中画等效果,毫无疑问你们应该选择拼接处理器,这比传统投屏方式更合适,更没有比例不对的困扰。

超全面的数据可视化设计指南(一):设备篇

预设场景一:

把控制端的分屏进行编号,接下来移动控制端对应的编号区块,就可以对大屏进行重新布局,图中展示的正是我们的预设正常场景。场景为居中布局,左右两侧为图表展示。

超全面的数据可视化设计指南(一):设备篇

预设场景二:任意窗口布局

对控制端进行随机布局,将主视觉模块移动到左侧四块屏幕,图表都集中在右侧,由此我们就由预设场景的居中布局变成了左右布局,左侧为主视觉。

超全面的数据可视化设计指南(一):设备篇

预设场景三:任意窗口漫游

可以随意的关闭大屏某个模块的漫游,通过控制端进行屏幕的显示以及不显示。

超全面的数据可视化设计指南(一):设备篇

预设场景四:任意窗口平移

画面的任何一个模块都是可以进行平移操作的,我们将模块一和模块五可以平移拖拽到任何一个位置。

超全面的数据可视化设计指南(一):设备篇

预设场景五:任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处,还可以控制模块置顶和置底,非常灵活。

超全面的数据可视化设计指南(一):设备篇

6. WEB 端大屏

基于 web 网页端的展示方式,通过在 web 开发,有需要时会投屏到大屏上去展示。设备比例一定不能差距过大,比如 16:9 的投屏到 32:9 的大屏就不是合适,解决方案可以是外接一块 1920 的显示器即可。

此处要注意 web 端演示时,记得全屏显示,浏览器边框滑动条等可以不考虑,前端会做相应的浏览器细节考虑,设计按正常分辨率即可。

超全面的数据可视化设计指南(一):设备篇

7. 触摸屏

触摸屏(Touch Panel)又称为“触控屏”、“触控面板”、“触控台“,是一种可接收触头等输入讯号的感应式液晶显示装置。

当接触了屏幕上的图形按钮时,屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏,原理等同于 iPad 控制,只是载体不同。

设计规范以及按键反馈等交互体验与 iPad 类似。

超全面的数据可视化设计指南(一):设备篇

8. 滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等,通过特殊设计的机械滑轨控制装置,结合高清液晶拼接幕墙,实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息,包括图片、文字、视频等,是一种全新的互动展示形式,可与触摸同时使用。

超全面的数据可视化设计指南(一):设备篇

9. 虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者 LED 大屏显示屏动态/静态三维显示:智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型,这是一种高科技的模型操作员通过程序,可以随意调整沙盘的尺寸、规划区域、区域布置,快速展示多种全新的创意。

具有三维显示效果,并可以从不同角度观察创意模型,筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果,实体沙盘为底,虚拟沙盘做效果叠加。

分辨率:物理实际分辨率

超全面的数据可视化设计指南(一):设备篇

设备适配

Q:原本设计尺寸是 1920*1080,使用场景是 PC 端,同时在大屏中展示,尺寸为 3840*1080,该如何适配?

A:首先我们需要了解适配最主要的痛点就是:灵活,复用性高,可延展。

超全面的数据可视化设计指南(一):设备篇

围绕这几个点我们可以通过模块化开发去做,将每个模块单独开发。我们设计师做这种需求之前,就需要提前去构思,在设计各模块时,尽量使用可扩展和可自适应的图形,这样面对适配的时候我们可以通过移动,缩放这些模块,来完成适配。尽量避免二次设计以及开发,提升时间成本。

图形放大适配:

超全面的数据可视化设计指南(一):设备篇

图形位移适配:

超全面的数据可视化设计指南(一):设备篇

Q:如果是 16:9 适配非 32:9 是否也是这么去适配的?如果是特殊的形状或比例该怎么适配?

A:我们适配一定要记住灵活,减少工作量这些原则,如果不遵循这些原则,那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏,如何用开发一套的时间去适配两个甚至是多个终端,这是我们需要注意的。当然考虑到一些实际情况,会有一定程度上的修改,但是一定是要从节省工作量去出发的。

尺寸计算

场景一:拼接屏分辨率计算,已知某项目设备分辨率为宽高 4*2 拼接屏,设计稿我们该如何去定义分辨率?分辨率又是多大?

从命题我们可以看到 4*2 的拼接屏,我们可以通过一块屏幕为 1920*1080 去计算,那么通过计算分辨率应该是 1920*4 &1080*2,也就是 7680*2160,这样就计算出我们的分辨率了。

超全面的数据可视化设计指南(一):设备篇

场景二:LED 屏分辨率计算,已知某项目 LED 屏幕物理尺寸为宽 15 米,高 4 米,设备分辨率未知(可以支持 4K 或者 2K 输出),那么如何去制定分辨率?

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目,那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一:屏幕支持 4K 输出,既然支持 4K 输出,保证画面输出的清晰我们可以将设备的高度设定为 2160

此场景下公式为:15/4=X/2160 X=8100 那么可以大概得出宽度大概为 8100 像素(只是我们通过计算大概得出来的)

可能二:屏幕支持 2K 输出

此场景下公式为:15/4=X/1080 X=4050

超全面的数据可视化设计指南(一):设备篇

重点来了,不要以为这样就结束了,我一直强调的可视化设计师为什么一定要在现场,为的就是方便各种测试。刚才我们只是通过计算得出的大概数值,此时我们可以在纸上画一个正方形,并投到设备上,如图。

  • 结果一:如果正方形比例不变,设计尺寸无限接近于大屏实际比例;
  • 结果二:如果正方形比例被拉伸,设计尺寸小于大屏实际尺寸;
  • 结果三:如果正方形比例被压缩,设计尺寸大于大屏实际尺寸。

超全面的数据可视化设计指南(一):设备篇

此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了,通过这样的方式去测试设备大概的分辨率的大小比例,在我们产出效果图之后,也可以投射设计图的方式看看屏幕是否是完美适配,这种方法可以在未开发之前,尽可能确定屏幕对设计图的影响,从而避免对开发造成大规模修改。

注意:这样做也只是在不知道设备分辨率的情况下,去大概计算设备分辨率,仅供参考!

投屏事项

1. 电脑直接投屏

使用场景:会议室,展厅等

等比例投屏,投屏电脑投到 2*2 大屏(4K)

投屏电脑支持输出 4K 分辨率,投屏电脑分辨率以 3840*2160 作为设计,投到 4K 拼接屏上,大屏会完美展示,并且画面非常清晰。

超全面的数据可视化设计指南(一):设备篇

投屏电脑支持输出 2K 分辨率,投屏电脑分辨率以 1920*1080 作为设计,投到 4K 拼接屏上,只会以 1920*1080 进行输出,因为输出像素只能支持 2K,也只是 1920*1080 的放大。

超全面的数据可视化设计指南(一):设备篇

此处需要了解两个概念:输出像素和显示像素,输出像素指的是投屏电脑的最大支持分辨率,显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计(就是以大屏尺寸为主),但是也要看输出设备的像素大小。

2. 硬件投屏本地运行

使用场景:科技展厅,以及一些带主机的设备。

此种情况,一般我们的大屏会自带主机,大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示,那么我们直接就可以通过显示器的尺寸去做设计,这样就是大屏的设计尺寸。

一般这种靠硬件的投射,都是在拼接处理器的处理下,将多个屏幕拼合成一个大的显示器,再通过拼控系统(硬件投屏)进行输出。

超全面的数据可视化设计指南(一):设备篇

一般我们可以将我们大屏的(UE4 或者 U3D 开发)应用程序打包,打包成一个后缀为.exe 的应用程序,在大屏电脑上直接点击,程序就可以在大屏上完美的跑起来,也不需要去进行电脑投射大屏。

超全面的数据可视化设计指南(一):设备篇

3. 控制端操控大屏

如果通过控制端去控制大屏,那么投射设备就可以通过多种方式去展示了,可以是手机、平板、触摸屏、手势控制、体感控制等等。

这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了(比如 750*1334,2048*1536),设计尺寸就是我们大屏本身的分辨率就可以了。

超全面的数据可视化设计指南(一):设备篇

4. 多主机多信号投屏

此种情况主要使用场景:屏幕宽度非常高,并且内容可以分很多模块展示,模块彼此之间不受影响独立展示,这种情况下我们就可以通过此种方式去投屏。通过多个主机分别去投射大屏的同等大小区域,比如图中的场景模块被我分成了四等份,我们就可以通过四台主机去分别投射四个模块,形成一个完整的大屏。

此种大屏设计尺寸我们以输出设备的尺寸为主要参考,四台主机那么整体宽度就是 1920*4=7680,高度就是 1080(如果设备支持 4k 输出,那么提升相应的设备尺寸*2 就可以了)。

超全面的数据可视化设计指南(一):设备篇

5. 不同比例投屏及解决方案

Q:如果遇到一个设备是 16:9,投屏到一个 20:3 比例的大屏幕, 那我设计尺寸以 16:9,还是 20:3?

A:我们要记住,如果面对的是正常比例投屏到非等比的大屏,我们需要遵守的规范一定是:一切以大屏展示为主。所以我们设计尺寸一定是按照 20:3 来设计的,大屏展示正常才是我们的唯一标准,投屏电脑可能会出现的问题,我们只能妥协(投屏电脑可能只能展示很小的一部分,但也是没有办法的)

那么我们遇到这种是否就没有办法了呢?在这阿勇给大家提供了三种解决办法,在实际工作中,我也遇到过这种问题,所以在这给大家分享一下。

方案一:外接显示器(外接多个显示器,一般主机可以另外外接四个显示器,这样就可以解决投屏电脑显示不全的问题了)

超全面的数据可视化设计指南(一):设备篇

方案二:采用拼控系统,而不是用纯粹的设备投屏(拼控系统完美解决了尺寸不一致的难点)

超全面的数据可视化设计指南(一):设备篇

方案三:设计两稿,16:9,20:3 我们都去做设计(做两套系统,相当于做的适配)

超全面的数据可视化设计指南(一):设备篇

Q:请教大家一个问题,电脑的分辨率是 3840*2160,单个大屏的分辨率是 1920*1080,拼 9*6 的大屏,设计尺寸该设置多少啊?这样设计尺寸会不会太大了,如何优化这个设计稿尺寸?

A:前面的文章我们已经介绍过拼接屏的尺寸的问题,这个问题的解答:1920*9/1080*6,这个就是设计分辨率,通过计算得出,最终设计稿尺寸为 17280*6480。可以看出设计分辨率确实太大了,设计的时候如何去优化设计尺寸呢?

超全面的数据可视化设计指南(一):设备篇

通过命题我们可以看出电脑分辨率是支持 4K 的,就是说输出分辨率和显示分辨率我们都是可以上 4K 的,而 4K 的分辨率一般会做 3840*2160,再结合设计稿尺寸 17280*6480,可以将整个效果图尺寸缩小三倍,也就 5760*2160。设计可以按照这个分辨率去出图,最终交付给开发的就是切三倍图,并提示开发是缩小三倍做的。

超全面的数据可视化设计指南(一):设备篇

总结:不管在面对什么尺寸的设计,都要记住,万变不离其宗,一切以大屏完美展示为准则,所有的一切都是要在大屏上观看,为了完美展示,投屏电脑,设备控制等页面可以适当的让步。

全篇知识点

通过以上的知识点总结,不知道大家对于数据可视化大屏设计是否有了新的认识,数据可视化对于设备的尺寸,设备的信息,以及投屏注意事项,都要有更多的了解才可以。下图就是总结本篇文章的知识点。

超全面的数据可视化设计指南(一):设备篇

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



文章来源:优设 作者:

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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





小数据里的大秘密

雪涛

本次活动中,嘉宾通过众多丰富、有趣的案例介绍了数据可视化的概念、作用和设计方法,信息量满满。

分享框架:

嘉宾首先分享了2个数据可视化案例:

  1. 设计师把阅读困难症患者普遍能看到的东西进行实体化、视觉化,让别人能进入他们的世界。
  2. Aaron Koblin的作品《Flight Patterns》,让人眼突破视域的界限,以“鸟瞰视角”来看北美居民的迁徙过程。

 

活动笔记:

1. 什么是数据视觉化?

其实它就是把不可见的数据转化为可间接被观察数据的过程。它不提供回答,只是提供一种观察的新方式。

举例一个来自小数据观察的自我探索项目:太极。

将太极拳的动作进行数据采集完成了第一张数字国画,有人质疑说好看但无用,嘉宾解释由于好看吸引了人群,从人群的行为进行观察可能会有意想不到的发现。

数据视觉化的初衷并不是为了解决问题,而是为了探索。

前田约翰(John Maeda)曾经说过:“好艺术的使命是唤起思考,好设计则是让事物变得清晰,并能解决实际的问题!”

 

2. 数据视觉化有什么用?

介绍两张数据视觉化历史上教科书级别的神图:

  1. 《拿破仑东征》诞生于1861年,由法国工程师查理·米兰德绘制,描述了1812年拿破仑东征俄罗斯的失败战役。图中透过2个维度呈现了6类资料:拿破仑军的人数、距离、温度、经纬度、移动方向,让人在一个静态的平面上同时观察多种数据变成可能。
  2. 另一位南丁格尔女士,是一名护士。作为军医,她清楚地知道大部分士兵都不是战死沙场,而是死在医疗环境极差的军营里,她自己懂,可是怎样才能影响国会呢?她发明了玫瑰图,用以表达军医院季节性的死亡率,对象是那些不太能理解传统统计报表的公务人员。她的方法打动了当时的军官统领和维多利亚女王本人,于是医事改良的提案才得到大力支持。为了纪念她的贡献,后来她的头像被印在了英镑上。

数据可视化研究的不仅仅是“数据如何能被看清”,还有“数据如何能被看懂”。

 

2.1 数据如何被看清?

可以通过颜色,大小,方向去提高数据的差异性。最简单的例子就是报表中的标红。

  1. 有效标红的第一步:去颜色干扰,第二步:去分隔线干扰;
  2. 去掉没有用的东西,例如框框、加粗;
  3. 对齐很重要:数据右对齐、信息左对齐,注意表头对齐;
  4. 间隔和行距也很重要;
  5. 单位很重要,尽量减少数字本身的长度,不超过4位;
  6. 去重非常重要(尽可能减少画面里的重复信息,可以让重要的信息更突出);
  7. 字体修正(看个人喜好)。

 

2.2 数据如何被看懂?

嘉宾介绍了4个项目:

项目1:国内外艺术院校的数据可视化展示。

由于经常会有同学问各大美院或艺术类院校之间的区别。嘉宾抓取了17所国内国外院校的数据来做展示,蓝色是代表“设计类”,白色代表“纯艺术类”。从中也可以看到院校的结构是否扁平。

 

项目2:嘉宾基于wikidata数据库编写的小工具。

最初只是用来快速查找艺术家的基础信息,后来加入视觉化功能,把所有查询到的人排列到一根时间轴上,横向观察她所关注的艺术家的生活年代及寿命。

通过可视化的展示,她发现自己关注的都是集中在某一个时期的艺术家,除了看到自己的喜好之余还很有效地发现自己的知识盲区(只有看到了自己知道什么,才能知道自己还不知道些什么)

我们可以发现在人类历史上,很多人物在时间即便在空间上没有交集,却在时间上相遇了。

比如Jackson Pollock,艺术史上动态艺术里面用身体的律动去做油画的一个非常重要的艺术家,他和计算机之父图灵原来都是同一年出生的,酒鬼Jackson Pollock居然比图灵还多活了两年。

我们还能八卦一些爱情故事,原来摇滚界的神话列侬跟小野洋子是姐弟恋,而且列侬只陪伴了洋子生命的一小段时间。

我们可以清楚地看到“看得见”的魅力。

很多信息的缺失并不是不存在,而是无法被看见,被观察。

因为看不见,很多信息甚至是完全错误的。在测试代码的过程中作者更意外地发现爱迪生的生日被错写为2016。

 

项目3:纽约大都会艺术博物馆做的Unfinished项目。

Unfinished是大都会艺术博物馆别馆在首次开幕时的处女展,Unfinished讨论的是“艺术很重要”的话题:在艺术的世界里,什么是未完成,展期为半年。嘉宾认为这个线下展展期太短非常可惜,希望可以通过技术的手段延长展期,更希望能降低门槛,让更多世界各地无法前来观展的人可以有机会参与讨论。

于是嘉宾将Unfinished展做成了Google的插件,安装插件之后,当新打开空白页的时候,空白页会自动被Unfinished的作品填满,把一个简单的空白窗口变成艺术之窗,同时让人不需要任何搜索便进入展览。

此外嘉宾赋予了这次改造更多的交互空间,让人可以实现在传统线下博物馆没有的体验,让他们自由地在“未完成”的作品上进行创作并分享,延长了作品的寿命,让艺术品重回人们的生活中,赋予其新的价值和灵魂。

 

项目4:通过整理全国美展的数据总结的一些获奖规律

得到的3个有趣的结论是:

  1. 高亮的红色、黄色很受欢迎
  2. 1999年,30多、40多的艺术家容易获奖
  3. 画一张少数民族在沙发上抱着一头牛的作品在数据上是很可能获奖的

 

3. 数据如何被视觉化?

在实际工作里,大部分人会接触到的数据视觉化实际上是信息图表,关于信息图表的一些规范和小技巧嘉宾也有提及到:

在做图表时,动机往往比较重要。

下图是为了说明布什总统下台的话,居民税收会增长多少,其实只有不足5%的区别,但对图表做了去零线处理,使得看起来差异很大。

作图的时候要先说明结论。

比如下面的表格是员工为了向老板说明自从少了两位员工之后,单子处理不过来了,意思就是说老板你得给我加人。

千万不要出现彩虹柱状图,折线图在多周数据对比的时候会非常实用。

 

最后是一些推荐的网站和资源:

最后释疑:

数据可视化大屏设计经验分享

雪涛

数据可视化设计的一些技巧



一、什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。

在当前新技术支持下,数据可视化除了“可视”,还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。



二、什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论、决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。



三、大屏数据可视化设计原则


设计服务需求

大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。


那什么是业务需求呢?

业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。



先总览后细节

大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。



四、大屏可视化设计流程


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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档