首页

G端可视化中的适老化设计

博博

一、通用性和包容性设计


首先一般讲适老化无障碍设计,我们都要提到的就是通用性设计和包容性设计。


通用性设计


原则:强调设计所有的系统和产品,使每个人都能使用,无论他们的年龄或能力。

百度百科将通用设计定义为:“能被失能者所使用,就更能被所有的人使用。通用设计的核心思想是:把所有人都看成是程度不同的能力障碍者,即人的能力是有限的,人们具有的能力不同,在不同环境具有的能力也不同。”

通用设计中应当也包含对于特殊人群的基本考虑,要让目标人群觉得:鱼和熊掌都可兼得,既照顾了特殊人群的使用,又兼顾所有人。



包容性设计


则 :好的设计应该满足尽可能多得使用者的需求。

百度百科将包容性设计定义为:包容性设计着眼于清楚源于使用主体而造成的各种障碍,使每个个体都能平等、自信、独立的正常使用,为同一适用条件下的互动提供了新的视角,也为创造性和问题解决导向的设计提供了机会。


那么我们应该如何践行通用性和包容性设计在G端可视化中的理念呢?



二、客户的困境-现状分析


通过分析客户的困境,结合现状进行深入分析,发掘政府端客户的普遍性存在的问题。


年龄分布适老


大多数政府省市级领导人的年纪均在60左右,由于年龄普遍较大,对于设计的认知会有偏差,对于审美的把控以及设计本身的价值理解会偏弱。

从去年十月上旬开始,省级党委换届拉开大幕,在至今近8个月的时间里,全国31个省区市先后展开换届。经过此次换届,干部队伍的年龄结构得到进一步优化,初步形成“50后”为主导、“60后”渐成中坚的格局。

根据公开资料统计,31省区市书记平均年龄为58.1岁。其中,“40后”书记有6位,“50后”有22位,“60后”也有3位,某区党委书记胡XX和XX省委书记孙XX同为63年出生,是最年轻的书记。



生理机能下降


视力:老年人视力的下降,影响眼睛对空间、颜色、明暗等加工等;

听力:听力弱化造成的听不清楚,尤其是在嘈杂的环境中,老年人听起声音来会更吃力;

表达力:专业化的术语以及需求,会使表达和沟通不便;



认知能力不足


互联网和人工智能等技术发展变化太快导致认知力的不足。

绝大多数的老年人对现在数字化的产品很陌生,再加上复杂的界面操作,需要反复的学习使用才能熟悉掌握。



三、设计的探索-客户心理


ToG类型的项目,我们的客户群体是政府的某个部门(G端行业中,政府部门因为权限和管辖内容的不同,客户的诉求也会不一样,同时由于决策层是一级一级往上的,对于各个层级的领导都需要去进行满足,对于设计的要求也就更高了),因此我们需要对客户的心理进行重点挖掘。


1、政府部门客户的特点


  • 严谨务实原则

政府部门的领导或者员工大多数都是高知人群,对于工作的态度都是非常严谨,喜欢按规矩办事,分工明确,力求事情做到一丝不苟,有理有据,讲究严谨做人,务实做事。


  • 安全性原则

政府部门的保密工作需要做的非常到位,尤其是关于公安等民生问题时。另外政府类客户一般对于数据的保密做的非常好,基本都是内网开发,私有化部署,一切互联网的东西连接内网都会报警。如果是外网开发,则需要做好数据存储,一定要非常注重数据安全。


  • 实用性原则

政府类的软件或者产品,基本都有很强的实用性,实用好用才是客户最关心的问题,因此在系统架构上需要做到,简单高效,快速触达,减少客户的学习成本。


所以针对政府客户特点,我们需要做到严谨务实的态度,安全实用,简单高效。



2、政府部门客户的需求


  • 正文字要大

对于文字大小的需求比较强烈,提及最多的就是字体放大,加粗。


  • 屏幕要看清

对于画面能够看清,需要重点表现在前景和背景的色彩对比度。


  • 画面要酷炫

对于画面的表现,要更加的酷炫,在客户眼里,动态图形效果远远大于静态效果图。


  • 饱和度要高

随着年龄增长,人类的晶状体会变黄变浑浊,导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果,从而降低元素在界面中的对比度, 因此需要提高色彩的饱和度。


  • 逻辑要清晰

产品整体架构以及内容逻辑清晰,简单高效,上手简易。


所以针对政府客户的需求,我们需要做到画面清晰,视觉酷炫,色彩明亮,逻辑清晰。



四、策略的应对-解决方案


通过对政府类客户的分析,挖掘客户最深层的需求,针对于以上的关键点,提出适合的解决方案,大体在一下6个方面的全面解析。


1、解决方案:框架


对于系统框架以及布局进行一屏式展示,减少系统层级的递进。

对于展示形式上可以更清晰准确, 尽量模块化展示每个需求,做到聚焦用户视角,提升画面表现。

整体交互流程简化,复杂以及多层级弹框尽量少使用。



2、解决方案:字体


  • 中文字体

中文字体类型的使用,在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。


  • 英文字体

英文字体类型的使用,英文数字的字体选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN字体。


  • 字体大小

字体大小的定义。在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常1080P页面,最小字号不小于16px,具体字体大小还需要参考设备清晰度,环境灯光,视距等因素。




3、解决方案:颜色


  • 颜色对比

界面中的前景与背景的对比度,是否足以让政府类客户清楚识别;

颜色不应该用作传达信息的唯一视觉手段,需要用额外的文字提示;

通过 H(色相)S(饱和度)B(明度)的数值来划分色域,在保持H值不变的前提下,定义了10个色域。所以在前后景的颜色选择上,满足跨度至少为6,才能让目标人群准确识别文字信息。


  • 对比度检测

视觉呈现以及文案图像对比度至少要有7:1,大文本至少有4.5:1的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标,如Contrast Ratio 在线检测工具:

https://contrast-ratio.com/



  • 颜色多样

画面采用多种饱和度较高的颜色,而不是单色;

颜色的丰富程度决定了画面的视觉表达,色彩越丰富,画面表现越好;



4、解决方案:图形


增加图形的占比大小,提升视觉上的表现;

尽量采用识别度较强的图形和图标,尽可能贴近客户的认知范畴;

图标和图形尽量搭配文字描述,方便客户更清晰更快速理解。



5、解决方案:视距


观测距离的远近,也决定着画面的展示效果,尽可能的拉近观测距离;

正常视距观测下,以常规设计规范去制定即可,如若观测距离较近,则可适当缩小相应的视觉表现,反而观测距离较远,则放大视觉。



6、解决方案:设备


设备的尺寸、精度,分辨率大小都会影响目标人群的体验;

在设备精度较低,或者说点间距过大时,应当适当放大视觉表现,点间距小的则显示非常清晰,可适当缩小视觉表现。



五、规范的提炼-应用推广


为了保证适老化的推广,需要在适老化的基础上统一标准,在字体,颜色,框架,图形等内容上做出提炼,深入了解目标客户的需求以及客户心理。

本着严谨务实,安全性,实用性等原则,沉淀出一套符合目标人群的设计规范,应用并推广到不同设计团队以及推广到广大设计师中去。



六、未来的期许-设计使命


我们需要不断践行适老化设计原则,体现设计的通用性和包容性,应当在设计表现和产品功能上更加的包容这个群体。人工智能大数据时代,虽说政府类客户会比普通人更容易接受,但是受制于某些原因,推动解决老年人面对智能技术的问题解决才是重中之中。

设计师也需要运用自己的专业性,来帮助目标人群融入数字化的生活中去。

因为在不久的将来,我们也会变成这个群体,当我们面对这些束手无策时,那时的设计又会是如何适老的呢?适老化设计是适合所有人的设计,所有的设计师都应该密切关注。



七、全篇总结


1-不要依赖颜色来传达信息(客户更喜欢文本,有特殊含义除外:四色预警,国标色);

2-文字展示要清晰,字号大小要更加适合目标群体;

3-提高颜色对比度,丰富画面色彩,禁止使用单一色系;

4-界面中重要元素应尽量避免使用蓝色(特殊行业除外:公安等其他);

5-增加图形以及图标的视觉表现,尽可能做到一目了然,便于客户理解;

6-尽可能拉近观测距离,提升观测体验;

7-选用高性能,高清晰设备,提升观感,优化客户体验;

8-针对政府客户特点,做到态度严谨务实,安全实用,简单高效;

9-针对政府客户的需求,做到画面清晰,视觉酷炫,色彩丰富明亮,逻辑清晰;

10-盲目照搬照抄而不去具体问题具体分析,这些无障碍设计在某种程度上就会成为“障碍”设计。



作者:AYONG_BDR      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

数据可视化设计案例实操

博博

什么是Resdesign


Redesign并不是一个简单的美化过程,视觉只是Redesign的一部分而不是全部。如果你做产品重构只是为了视觉更美观,从各种网站获取灵感用样机包装,没有任何产品架构以及交互逻辑,那么你的改版必定不会很完美。


但同时也会有很多人陷入这种误区,产品中过时的设计规范会使你的用户会流失到设计体系更好的竞品那里。重构你的产品设计语言,让他看起来更美观,这当然很好,但是也不能盲目的跟随设计趋势,没有任何逻辑做改版,这样会导致交互逻辑的紊乱以及产品架构不清晰。


今天阿勇就从网上任意摘选了一个产品功能需求有问题的一个页面来进行一个页面改版,一起来看看吧!



产品逻辑分析


1、产品主视觉指意不明,贵州省地质灾害防治指挥平台,地图处资源应集中于贵州省,且全国视角下可以下钻贵州省市区。

 

2、地质灾害防治主视觉应该着重展现崩塌、滑坡、泥石流、地裂缝、等地质现象的展示,并展示预警信息,以及现场地质现象视频反馈,以便于指定指挥方针。

 

3、此平台信息展示包含人员调度,现场指挥,设备数量,数据资源统计,覆盖区域,预警告警,各地区地质灾害排行,综合防治等信息的内容。

 

4、产品布局不合理,各区域所占比重需要重新估量,并且主视觉数据资源匮乏,内容单一。

 

5、业务逻辑没有很好的展现,各区域所要展现的数据信息不明确,业务紊乱。

 

6、画面中对于业务的理解不够深,导致画面空洞,数据展现量不够,产品失职。








如何进行页面分析


根据颜色:颜色不宜太多,对于特殊行业,固定的颜色是有固定的含义的,比如红橙黄蓝四色预警。


根据布局:不合适的布局总是会让人觉得很别扭,并且对于页面整体效果会有很大的影响。 

根据风格:蓝色系风格就尽量选用色相接近的颜色,画面颜色太多,颜色也会失去其本身的美观度以及特殊含义。 


如何发现并解决问题

对于画面不合理的地方需要记录下来,对当前板块的内容进行正确的导向,比如你发现这个字体不合适,你的脑海中一定会有正确的用在此处的字体;比如间距,换行,字号等方面也是如此,心中得有一杆秤,去衡量设计的美感。



了解功能,分析数据之间的关系:

了解本产品的应用领域,以及产品功能,分析画面需要展示的数据有哪些,合理的通过设计展示数据之间的关系。

 

构思主题,围绕主题设计其他元素:

对原来的主题进行产品功能重构,设计新的配色方案,画面内容布局,标题以及主视觉的重新设计,围绕主题进行设计元素的制作。

 

分析数据,合理选用不同样式图表:

对各个数据进行分析,对内容进行编排,选择合适的图表去展示数据,合理的同时,又具有美感。

 

提取共性,结合需求做产品规划:

提取各个模块的设计形式的共性,并结合产品需求进行合理的规划,重构页面。

 

加强技法,了解可视化设计规范:

通过不同的设计技巧来表现画面的美感,制定属于产品的设计规范,并运用这些规范去规范页面布局以及设计,这是要在深度了解可视化设计的前提下。


优化-01


优化了原本单调并无亮点的主视觉区域,通过添加覆盖区域/区域告警/视频监控等信息大量丰富了画面并实现了地质灾害自动化管理,从事件发生到事件解决,真正实现地质防治的自动化。 


优化-02


将原本的区域设备数量排行,换成了各地区地质灾害数量排行,更能反映出地质灾害集中在哪些地域,事发频率以及爆发率进行排序,颜色上通过红橙黄来进行前三的强调,更有层次感。 


优化-03


将原本的区域在线设备,换成了数据资源统计,是为了更清晰的去表达具体日期下的设备数量情况同时可以避免数据表达不清晰的问题。 



更多组件样式

新增告警列表,设备数量,资源调度信息,展示历史告警记录,合计设备数量,总结资源调度数量,真正掌握自动化地质防治指挥。



最终修改成品



设计师应该跳脱出自己狭义的视角重新来审视“设计趋势”,为自己带来更多的可能性。


视觉只是表现层,理解业务,理解数据,合理表述才是核心。道理大家都懂,但真正的理解数据却是很多设计师迈不过去的门槛。


送给大家一句忠告,永远不要迷信产品原型,设计也不应该被原型所制约,要勇于用自己的设计思维去验证产品的合理性,要用商业眼光去对产品进行查漏补缺,要站在用户的立场上去试想产品的可能性。



作者:AYONG_BDR      来源:优设网



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

10个WEB数据可视化最佳实践案例

鹤鹤



数据可视化已迅速成为在网络上传播信息的标准。它用于各种行业,从商业智能到新闻,帮助我们理解和传达见解。

我们的大脑善于处理可视化信息,这使我们更容易理解图表或图形中可视化的数据,而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来呈现数据,以便数据被吸收和理解。它应该考虑用户对视觉处理的了解,提高并简化用户的数据体验。

目前有很多工具和框架可用于构建这些图形,是时候回归基础了。是什么让数据可视化有效?在设计数据时我们应该遵循哪些指导原则?

以下最佳实践将帮助您设计丰富、有洞察力的数据体验。

1.为特定受众设计

可视化是用于揭示模式的,提供上下文并描述数据中的关系。虽然设计师对给定的一组数据集中的模式和关系没有任何影响,但她可以根据用户的需求选择显示哪些数据以及提供怎样的语境。毕竟,就像其他产品一样,如果用户无法使用它,那么可视化就毫无意义。

为小白用户设计的可视化应该是结构化的、明确的和有吸引力的。他们应该用文字直接说明受众应该从数据中得到什么。



转换双亲的工作时间:妈妈VS爸爸

来源:https://flowingdata.com/2016/04/20/parent-work-hours/

另一方面,面向专家用户的可视化可以显示更精细的数据视图,以驱动用户探索和发现。细节和数据密度应该简单明了。



工作来来往往:国民失业

来源:http://graphics.wsj.com/job-market-tracker/


2.使用(但不要依赖)交互促进探索

这是一个发人深省的数字:《纽约时报》网站上只有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/

这两个交互式示例都起作用,因为它们允许读者参与数据且不需要通过交互来理解。

3.利用视觉突出性聚焦并引导体验

视觉突出性,使视觉元素从周围环境凸显的特性,是数据可视化的强大工具。它可以用于引导用户注意可视化中最重要的信息,以帮助防止信息过载。通过使用视觉突出一些细节并压制其他细节,可以使我们的设计更清晰,更容易理解。

一些视觉变量——颜色和大小——是我们创造和控制视觉显著性的关键。

色彩方案是优秀的数据可视化的关键。众所周知,色彩特别擅长打破伪装。我们可以使用温暖,高饱和度的颜色来突出关键数据点,并应用冷色调,使用低饱和度的颜色将不太重要的信息放到背景中。



2014:最热的年份

来源:https://www.bloomberg.com/graphics/2014-hottest-year-on-record/

尺寸也很明显。较大的元素比较小的元素更有吸引力,因此要扩大您希望读者首先阅读的元素,并缩小不太相关的文本和元素。

4.使用位置和长度表达定量信息并使用颜色表达分类信息

Cleveland 和 McGill 在信息可视化方面的著名工作,研究了视觉编码的有效性(即数据维度与视觉属性的映射)。他们根据人们对视觉编码的准确感知程度,对不同类型的视觉编码进行了排序,给出了以下(简化的)列表:

  1. 通过共同的规模定位
  2. 长度
  3. 角度
  4. 区域
  5. 颜色

这对数据可视化设计的意义在于,我们显示定量信息的首选应该是按位置进行编码(如经典散点图和条形图所示)。与基于角度(如饼图)或基于区域(如气泡图)的编码相反,基于位置的编码有助于观众在更短的时间内进行更准确的比较。

然而,这并不是说所有可视化都必须是条形图或散点图。在研究可视化数据的新方法时,牢记这些原则是个好主意。

我真正想要强调的是,颜色不应该用于编码定量信息,而是应该用来编码分类信息。也就是说,我们可以使用颜色来表示属于不同类别的数据。



出生时的预期寿命

来源: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。

6.直接标记数据点

编码数据的每个元素都需要进行标记,以便读者理解它所代表的内容。简单吧?

错。太多设计师依靠图例来告诉读者哪些符号或颜色代表图表中的哪些数据系列。列举图例虽然对设计师来说很容易,但对读者来说却很难。它们迫使读者在图例和数据之间来回扫描,给读者的记忆带来不必要的压力。

更好的方法是直接在图表上标记数据系列。这往往更像是一个挑战,但是,嘿,你是设计师。你的工作就是做这项工作,以便于读者不必这样做。在下面的例子中,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

我在这里要说的是:帮助读者,确切地告诉他们在数据中寻找什么!

8.将上下文信息直接叠加到图表上

正如我刚才提到的,我们可以在可视化中使用注释来帮助创建数据故事的过程。有时我们可以添加图形元素来使这些注释更有意义,以便将这些信息更直接地关联到我们的数据。

以这张来自 Susie Lu 的图片为例。“夏季大片”和“奥斯卡季”的数据重叠赋予了原本看似随机的高峰和低谷以意义。它们帮助观众理解数据的重要性,比单独使用字幕或注释更直接。



2015 - 2017.08 票房趋势:强大的开场和后期的爆发

来源:https://susielu.com/data-viz/box-office

9.为移动体验而设计


静态可视化通常以 JPG 和 PNG 等位图图像格式发布,这对移动端用户来说是一个明显的挑战。许多数据可视化的美妙之处在于它们的视觉细节——微小的数据点和微妙的编码——而这些细节许多在静态格式的小屏幕上被丢失了。

例如:Accurat 工作室在诺贝尔奖上的精美复杂的作品,在印刷和高分辨率视网膜显示器上看起来非常棒的全尺寸,却在移动设备上几乎难以辨认。



视觉数据

来源:http://giorgialupi.com/lalettura/

为移动体验设计,或者使用像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化,或者为印刷、桌面和移动设备多种载体创建相同的静态可视化设计。

10.平衡复杂性与清晰度以促进理解

我今天谈到的所有最佳实践可以归结为一件事:在复杂性和清晰度之间找到合适的平衡,以满足受众的需求。

制作精美的、探索性的可视化细节总是诱人的,但这不一定是最合适的方法。在设计图形时要考虑周到 ,让读者的知识和目标决定应该包含哪些数据以及包含多少数据,并整理数据以讲述您想要讲述的故事。

原文标题: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端产品如何做好数据可视化?收下这篇7000+的干货!

博博

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


我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 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

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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






大数据可视化界面设计之七:想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

博博

在如今这个时代,越来越多的信息和内容呈现开始依赖数据驱动,也开始有更多的场合需要信息图来辅助呈现,对于可视化数据,从来没有像现在的要求这般高。但是另一方面,我们周围充斥着大量错误的图表呈现,希望这篇文章提供的 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 个超实用的经验总结一定要先看过!


结语


对于所有想要在数据的可视化设计上有所建树的同学而言,强烈建议阅读一下 Dona M.Wong 所撰写的《华尔街日报信息图设计指南:呈现数据和事实的注意事项》,本文中很多内容都受到了这本书的启发。

作者:陈子木

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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





轻松三步搞定数据统计分析:统计+分析+可视化!

涛涛

我们都知道,数据是支撑决策的重要依据,于是我们可以看到,几乎所有的产品,都会具有数据统计分析的功能模块。往大了说,比如数据中台;往高端了说,比如数据大屏、数据看板、数据驾驶舱;往本质了说,其实就是数据的统计分析。作为一个非数据型产品经理,或者是初级产品经理,该怎样设计这个功能模块呢?

如果你刚好为此苦恼,不妨试一下我最近研究的这三步曲:统计+分析+可视化!

前言

关于数据统计分析,首先表达一个我蛮认同的观点:

好的数据分析师,要像眼科医生一样:配眼镜可能有很多专业的方法,有很多专业的工具,可在配的过程中,医生纠结的不是自己的理论,而是关注用户看得清不清楚,不断问用户“这样可以吗?这样更清楚吗?再这样试试呢?”

—— 接地气的陈老师

相信在工作中,大家经常会碰到一些“孔乙己”式的数据统计分析,一开口就是“xx 指标体系”,再加上一大堆什么“权威的、标准的、BAT 认定的”这之类的修饰词汇。这特么就是典型的虚假数据分析啊,因为这些大多数时候,耗时费力,却没有解决实际问题。

并且这种虚假的数据统计分析,还有它遵循的理论模型:

轻松三步搞定数据统计分析:统计+分析+可视化!

而真正的数据统计分析,就像太极拳的精髓一样:“只重其义,不重其招,你忘记所有的招式,就练成太极拳了。”(以解决业务问题为根本)

统计

要搞数据的统计分析,那第一步我们得先有数据,也就是数据的统计工作。提起数据统计,那自然绕不开数据埋点。如果你们公司从来没整过埋点这个事,那也不用大费周章,因为界内已经有很多成熟的埋点公司了,例如神策、友盟等等,直接花钱办事就完了,也不贵。

我们今天研究的,是通过埋点,能够获得哪些数据呢?总结下来,大概有这么五类:

埋点获取五类数据

  1. 整体概况
  2. 用户获取
  3. 活跃与留存
  4. 事件转化
  5. 用户特征

来来来,我们逐个剖析一下,这几类数据,具体都包含什么,以及获取这些数据有啥用。

1. 整体概况

轻松三步搞定数据统计分析:统计+分析+可视化!

实时数据意义:可以获取到每个小时的产品实时数据,帮助你了解产品目前的实时情况。

使用概况意义:产品整体的使用情况,包括用户量、访问情况、留存等,帮助你对产品整体指标有一个大致的了解。

2. 用户获取

轻松三步搞定数据统计分析:统计+分析+可视化!

渠道访问意义:每个渠道的用户的使用情况,包括渠道中新用户的占比、留存等,帮助你了解产品在获客层面上的优势与不足。

版本数据意义:每个版本的使用情况,帮助你了解在产品升级的过程中,是否在活跃和留存方面有所改善。

3. 活跃与留存

轻松三步搞定数据统计分析:统计+分析+可视化!

访问流量意义:产品的每日访问数据,指标集中在新老用户的访问行为上,提供访问次数、时长、次数分布、访问时段高峰等指标,帮助了解新老用户在使用产品时的一些行为特征。

用户留存意义:提供用户 7 日,次日,次周,次月留存的数据,帮助你了解新老用户的使用粘性。

4. 事件转化

轻松三步搞定数据统计分析:统计+分析+可视化!

自定义事件意义:用户自定义关键事件,系统会自动生成该事件的发生次数、人数以及分布情况,也就是能够看到用户都在干啥。

收益类事件意义:用户自定义收益类事件,系统会自动生成该事件的发生次数、人数以及分布情况,会根据你选择的数值类型属性,计算该数值的总值、人均值以及次均值。也就是能够看到用户都咋花钱的。

5. 用户特征

轻松三步搞定数据统计分析:统计+分析+可视化!

用户特征意义:能够看到我们的用户,都是哪些牛鬼蛇神~

分析

有了埋点的数据以后,那就是怎样利用这些数据,充分发掘这些数据的价值了。数据分析的套路就更多了,把下面这些学会,应该“二八原则”里面的“八”就能够搞定了~

1. 常见的数据分析指标

轻松三步搞定数据统计分析:统计+分析+可视化!

综合性指标:反映产品的整体情况。

流程性指标:反映用户的使用行为。

业务性指标:反映具体的业务情况。

2. 常见的数据分析维度

轻松三步搞定数据统计分析:统计+分析+可视化!

数据细分:通过不同的细分维度分析,往往可以追溯到问题发生的原因,还能为后续的一些动作提供参考依据。

数据对比:没有对比就没有伤害,一方面是横向比较,即自身和别人进行对比,如常见的同比、环比;另一方面是纵向比较,即自身和自身进行对比,比如行业竞品、全站数据、AB 测试等。

3. 常见的数据分析方法

轻松三步搞定数据统计分析:统计+分析+可视化!

HEART 模型:Google HEART 模型的提出,可以让大家反思自己的产品设计思维,同时运用相关设计工具去提高 HEART 五项指标来完善用户体验,打造更好的产品。

AARRR 模型:该模型出自于《增长黑客》,它是在 2007 提出,当年的获客成本还比较低廉,而这种模型很简单又很直观地突出了增长的所有重要元素,所以这个模型很长时间内都很受欢迎。

RARRA 模型:而现在获客的成本与日俱增,市场情况和 2007 年已经完全不同。现在黑客增长的真正关键在于用户留存,而不是获客。于是,一个突出了用户留存重要性的模型 RARRA 诞生了。

可视化

有了统计的数据以及分析的维度之后,最后一步工作就是可视化啦!

而想要完成这一步,又快又好的方法,那自然就是参考各种规范啦,首先我们可以去一个叫做「e-charts」的网站,去查看各种可视化图表,因为开发很多时候,就是依照这些开源的图表库进行撸代码的~

轻松三步搞定数据统计分析:统计+分析+可视化!

而我们设计的时候,就需要借助各种原型组件啦。数据可视化的内容有很多,我们来举几个典型例子:

1. 折线图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:选用的线型要相对粗些,线条一般不超过 5 条,不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。预测值的线条线型改为虚线。

2. 柱形图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。一般来说,柱形图最好添加数据标签,如果添加了数据标签,可以删除纵坐标刻度线和网格线。

3. 条形图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,最好添加数据标签,尽量让数据由大到小排列,方便阅读。

4. 饼图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:把数据从 12 点钟的位置开始排列,最重要的成分紧靠 12 点钟的位置。数据项不要太多,保持在 6 项以内,不使用爆炸式的饼图分离。不过可以将某一片的扇区分离出来,前提是你希望强调这片扇区。

饼图不使用图例,不使用 3D 效果,当扇区使用颜色填充时,推荐使用白色的边框线,具有较好的切割感。

5. 其他

轻松三步搞定数据统计分析:统计+分析+可视化!

这种数据可视化的图表还有很多,而它的意义就在于,用图表代替大量堆砌的数字,有助于阅读者更形象直观地看清楚问题和结论。我也在工作中搜集到了一些不错的数据可视化原型组件,有需要的同学可以自行下载啦~

结语

好了,以上就是今天的所有内容了,正如前言所说的,我们今天只讨论武功招式,不讨论内功心法。

延伸一下:数据统计分析,最终还是要从业务中来,到业务中去,一切的形式,都是次要的,关键还是要以解决业务问题为根本、但对于我们这些“新手”来说,经验主义自然也是要借鉴的!相信今天总结的内容,也足够支撑大家比葫芦画瓢啦。


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

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:晓庄同学产品笔记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




实战经验!可视化大屏设计案例全方位复盘!

涛涛

随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。所以数据可视化设计,绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化设计,肯定是一头雾水,不知从何入手。本文结合最近设计案例,分享大屏可视化设计过程中遇到的一些问题以及设计思路,供大家一起交流与学习。

>

△ 最终动态效果图

案例分解

首先放的是项目改版前的页面:

1. 需求介绍

某某应用云,分为五大云平台模块:云端综合调度、数据查询通道、数据应用处理、数据存储管理、管理运行维护。每个大模块下⾯有若干个子系统。

可视化⼤屏首页需要展示的内容包括:

  • 全局数据:云平台的数据总量,以及 4 个重要关注数据项,2 个次要关注数据项;
  • 云平台的五⼤大模块:云端综合调度、数据查询通道、数据应用处理理、数据存储管理、管理运行维护(只有两个 tab 切换链接);
  • 搜索功能:搜索类型分为 6 个,默认选中「综合」类型进行搜索;
  • 重点关注数据信息按指标分多维度展示:原始图上的维度包括指标、地图、地域排名、部⻔排名、类别;
  • 云导航:展示场景在公司展厅,材质为 Led 拼接屏,设计尺寸为 1920×1080。

2. 需求分析

分析大屏可视化的一些共性:

  • 屏幕大:大屏一般都是多屏拼接,整体屏幕面积大。
  • 观距远:用户需要远处观看屏幕,要保证数据文字清晰可见。
  • 交互弱:通过电脑已经无法满足大屏交互需求,现在也有部分开始采用 ipad、手机、激光笔等方式。
  • 视觉强:背景色多采用重色,衬托凸显数据,更好地为观者传达数据信息。
  • 一屏一内容:一屏内容,说明一件主要事情,统计好它的相关数据,避免其他的干扰。

结合大屏的一些共性特点针对看到的线上旧版本设计,分析存在的问题。

  • 布局混乱,导致视觉不平衡,看不出页面层次。
  • 蓝色为主色调,黄色点缀颜色显得比较单一没有规则。
  • 图表比较单一,不能有效传达数据信息。

3. 布局

整合数据,分析出主要数据、次要数据、总量数据、细分数据、各数据的维度等等。首先优化页面布局,可以先在纸上画一画,然后脑子里有大概思路以后再用电脑绘制,如下图:

采用栅格化对称布局,让整体视觉左右平衡。

4. 风格

一提到数据可视化大家往往能想到科技、数据、蓝色等一些普遍关键词。

了解到客户是想做一个科技感强、炫酷的视觉效果。可以在网上找一些效果图或是自己曾经做过的案例供客户选择,确定一个大致的风格,然后结合具体的业务场景进行设计。

5. 颜色

颜色上结合产品使用场景,以及整个产品调性还是以蓝色为主,背景选用深色调,让视觉更好聚焦,内容部分采用比较透亮的蓝色系,保证内容与背景有一定的对比关系,便于业务信息传达。

6. 主体地图

地图为大屏的主要展示内容,首先分析展示的目的是为了看清各个城市间的不同分布情况,和城市数据的汇集效果。

如图:

改版前:地图过于单薄,没有立体感,太平缺乏层次,颜色黄色不符合产品调性。

改版后:主色调改为科技蓝,在原有地图上增加外发光和多层阴影叠加,增加地图的立体感,地图上增加科技线条上升的效果代表每个城市数据变化的提升,地图背景采用比较弱化的转动线条圆形,衬托地图主体,使得画面更加丰富。

7. 地图效果的实现方法

首先用 ps 拉框助手新建一个山东的地图(拉框助手的使用获取方法可以参照上篇文章)。

完成后会得到一个叫 map 文件夹的地图分层文件,如图所示。这里需要对每个城市的颜色进行调整,为了区分每个城市之间的数据不同关系。

调整完块之间的颜色后,就需要给地图整体增加立体效果。

首先,是整体给地图加了一个描边和外发光。描边是为了强化地图边缘,外发光是为了地图与背景有一个区分。

其次为了增加地图立体感,需要给地图增加多层阴影叠加的效果。复制现有形状层,拼合成一个山东省的地图,如下图:

最后,把拼合好的图层移动到 map 文件夹下面,阴影可以添加多层,这里针对每一层进行不同颜色大小的调整,就是下面的这种效果了,地图的体积厚度感也就出来了。这里只是提供一个大概的思路,大家可以多去尝试。

整体地图效果调整完成后,就是给地图增加些纹理,和上升线条这些细节上的效果了。纹理可以用图案叠加,或者找一张纹理图剪切蒙版实现,最后再添加上升线条的效果,地图的效果就完成了。

最后加上线条上升的动态效果:

8. 数据图表拆分

在选定数据图表之前,首先要确定图表之间的关系,可以从以下四个维度进行思考分析:

  • 联系:数据之间的相关性;
  • 分布:指标里的数据主要集中在什么范围、表现出怎样的规律;
  • 比较:数据之间存在何种差异、差异主要体现在哪些方面;
  • 构成:指标里的数据都由哪几部分组成、每部分占比如何。

可以参照下面这个图:

△ 图片来自于网络,侵删

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

传统的图表比如 echarts 图表在视觉上展示可能不是很美观好看,可根据选择的图表在其基础之上进行美化设计,总之选定图表最重要的两个点就是:易理解、可实现。

易理解:就是要考虑最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。

可实现:主要是跟开发前期沟通好实现方式,一般都采用开源组件库的居多,比如 echarts 组件库,我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用 Ps/Ai/Ae 这些工具模拟时会发现比较困难。同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计。一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、死磕不放。

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

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

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

附上最终视觉效果图:

总结

大屏设计需要注意的点:

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

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

文章来源:优设   

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

涛涛

 

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

前言 



说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化的设计,那么肯定是一头雾水,不知从何入手。


什么是数据可视化?

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。简而言之就是把枯燥无味的数据,通过图形化设计表现,达到一种更加精准和的数据分析和表达


下面要跟大家分享的是,我经手的一个真实数据可视化大屏项目改版,接下来会分享给大家一套全面的数据可视化技法,包括科学的运用图表、运用色彩、把控数据层级以及视觉层级,达到美学形式与功能需要齐头并进。



 案例解析 


首先看下线上旧版的设计,分析存在的问题。


undefined


问题

1、左侧大面积文字导致视觉不平衡,且密集

2、整体用色暗淡,图表用色没有规则

3、图表运用不恰当,不能有效传达数据信息

4、缺标题,数据信息优先级排列不恰当


结合这些问题作出了改版,


undefined


因为是改版所以能够看到线上真实的数据信息,这样旧版的数据呈现就能给到重要的设计参考价值,例如能够知道TOP10热门关键字大概是几个字,在设计图表时就会依据字数的长短来参考设计,也可以知道是否有极端数据,从而运用更适合的图表呈现等等。


下面依次对照新改的版本,解决旧版出现的问题。


问题一:

1、左侧大面积文字导致视觉不平衡,且密集


undefined


注解:

由于左半部分有大篇幅的文字,视觉上会显得密集,容易视觉疲劳,右半部分大面积的色块图表使得整个界面视觉上不平衡。


解决方案就是在把文字用排行榜图形分开,放到文字中间部分,这样就丰富了只有文字的单调设计,整体视觉较为平衡和谐,并且这样还能够突出强调重要数据信息。



问题二:

2、整体用色暗淡,图表用色没有规则



undefined


注解:

提取旧版的颜色,色彩很暗淡,对于深色背景来说,这样的配色方式并不会有好的视觉表现。


暗色背景通常用高饱和高明度的颜色,对比暗色背景更能聚焦视觉,突出数据可视化的表现,亮丽的色彩能够让数据可视化设计的更加绚丽。


数据可视化大屏设计慎用大面积的渐变色,小面积可尝试,一般大屏都是拼接屏,品牌不一样色差会表现不一,所以初稿出来后可以先去大屏上看下效果。



undefined


注解:

图表用色没有规则,上图三个图表都表现 “正面” “中立” “负面” 三个维度数据信息,但在用色上没有一个统一的规则,例如三个图表中黄色分别代表不同的维度信息,这样就无法建立观者的认知。




undefined


“负面”有警示的作用,运用红色调较为合理,“中立”色彩情绪上适合黄色调,黄色会给人中性的感受,例如马路上的等待的黄灯,例如一片树叶从绿色到黄色再到枯萎灰色,给人一种过程中的中立情绪感受等,“正面”就是给人积极的一面,所以绿色或者主题色蓝色都是很恰当的。



问题三:

3、图表运用不恰当,不能有效传达数据信息


undefined


注解:

同一个界面中左侧文字TOP10属性类似的“核心媒体TOP10”展示形式最好能有共性。旧版运用了柱状图并不恰当,尤其是标题字数过多时候并不推荐使用柱状图文字倾斜的展示方式,改版后加上相同的排行榜图标,数据直接展示出来,TOP10的效果会更好。



undefined


注解:

数据需要对比分析,显然这个玫瑰图表并不能很好的说明对比,每个维度大小排列没有规律,实际数据分布不均匀,导致没有对比的效果,改版后突出总的数据,用条形图从大到小依次排列各维度数据,数据上有对比,视觉上更有主次。

undefined


注解:

首先是旧版用色不恰当,最严重的问题是图表上没有任何数据,因为展示型的大屏,很少有交互行为,这样的设计是不可取的,不能让观者去猜百分比数据,数据可视化就要用图表数据的形式展示出来最直接的信息,除非是展示趋势并不是准确的数据。



undefined


注解:

旧版用的条形堆积图,其实更适合百分比数据的对比呈现,一个维度下面有若干个子项,比较适合分组柱状图(新改版为分组柱状图)或者分组条形图更为恰当。



undefined


注解:

旧版色彩搭配不和谐,趋势图需要突出趋势线,而不是体现数据的面积,红框注释不够直接尤其在颜色过多时,更不好分辨各个颜色指向的维度,新版的设计则能够准确指出各个维度的趋势线。



问题四:

4、缺标题,数据信息优先级排列不恰当


undefined


注解:

新闻的标题跟转发数才是观者关注的,而来源和时间就是次要关注信息,所以视觉上要为观者分出层级,这样不仅能够使观者看着更舒适,视觉上也很有层次,不杂乱。


旧版标题、来源、时间、转发数、都是相对于内容居中的状态,这种排版是不符合表格排版规则的,简单的做法就是文字左对齐,数字右对齐,数字右对齐能够更快速识别数据量大小,跟其他数据的对比,文字左对齐则是根据人从左到右的阅读习惯。


之前专门总结过一篇数据表格如何排版的文章,想了解的朋友,文章下面有数据可视化系列文章链接。



undefined


注解:

设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架,例如要遵循先总后分,先具体后抽象的逻辑,上图旧版把趋势放到了页面的第一视觉位置,就有点宣兵夺主了,根据先具体后抽象,改版后具体数据放到第一视觉位置,趋势信息排后。


旧版大屏没有标题,我是谁?我在干什么?我要去哪里?所以标题务必得有。


总结:

说了这么多设计要点,新手可能还是不知道设计的切入点在哪里,所以总结一个数据可视化设计分三步走法。


第一步:了解数据要表达的本质。

拿到一组数据,先分析主次,这组数据要表达什么?是展示数据,还是对比数据,或是实时监控数据,从而确定展示的优先级。


第二步:确定使用图表。

通过了解数据要表达的本质后,选择适合他的图表,这时候就需要打开几个开源的图表网站找图表,记住你的图表用的是网站的哪一个,开发如果找不到就丢给他网址。

网站有:Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts


第三步:整体效果调整

功能性的数据展示都没问题,还要看下整体效果,例如用了过于多的柱状图,可能就会影响了整体的美感,图表尽可能多样性,数据表达信息就要用不同的图表展示。




 最后 


数据可视化设计核心就是,通过美学设计形式把数据精准和的分析和表达


数据可视化设计是目前较为热门的设计工种,通过本文分享的项目迭代案例,希望能够让你对数据可视化有些许了解。

想做大数据可视化?来看高手的实战案例!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在大数据时代,数字化转型已经成为行业迫切的需求。2016-2018年金融、医疗、政府、安全等行业在大数据方向上的投入持续增加,大数据可视化的需求呈现爆发式增长,相关产品也纷纷推出:阿里 DataV 的「双十一的天猫可视化大屏」、360的数博会企业安全大屏、帆软的 BI系统。面对井喷式的市场需求和部门业务在 To G、To B 的拓展需求,需要快速储备大数据可视化的能力,作为一个 To C 的设计团队面临的挑战和责任都是巨大的。

(编者注:由于本文动图太大,将近100M,为了不影响移动端读者的阅读体验,本文图片都是静态截图,动图文章链接戳:https://docs.qq.com/doc

一、项目背景

在过去一年中,潘洛斯(Penrose)团队参与了「灵鲲」态势感知系统、「麒麟」系统、「鹰眼」反电话诈骗系统等14个大数据可视化产品的设计。随着产品不断的探索和迭代,积累了一些行之有效的大数据可视化设计的心得和方法。基于「灵鲲」这个案例,分享一下我们在大数据可视化方向的设计和思考,希望能够给对大数据可视化感兴趣的同学提供一些思路。

「灵鲲」是 MIG 安全云部门与潘洛斯(Penrose)团队合作的,基于潘洛斯大数据可视化引擎衍生出的一款金融风险监控可视化产品。应北京与深圳金融办的需求,搭建灵鲲金融风险态势感知系统,实现事中风险控制,减少网络欺诈损失。

着手设计之前,我们需要了解:大数据市场规模和各行业投入有多大, 政企客户的大数据可视化产品的痛点是什么?对比深耕多年的竞品,我们设计的突破口在哪?——挖掘我们的机遇和发力点。

二、我们的客户,目标群体

数据显示,2017年中国大数据产业规模为4700亿元。随着一系列政策的出台,大数据国家战略正在加速落地,大数据行业将持续增长,预计2018年中国大数据产业规模将达到6200亿元,增幅达32%。需求层面,预计2020年大数据应用市场需求中,仅政府需求就占比35%,另外包括医疗、交通、金融等多个行业在大数据和信息化建设投入也将持续增加。

除了旺盛的需求以外,我们还注意到很多政企内部数据基础很好,以宜昌为例,宜昌智慧办汇集了来自32个部门、60个系统的大量详尽的实施城市数据。与这些政企单位合作,易形成行业灯塔,便于规模复制。另外,针对大数据可视化,目前政企已不满足于「面子工程」,更多的希望大数据可视化与 AI 结合,呈现更复杂多样的数据,以辅助决策。

基于以上的市场潜在规模的考察和典型客户研究,在进行「灵鲲」产品能力规划时,我们主要考虑以下三类使用场景: 政府机构决策、展会展台及参观视察。

在金融局等相关政府机构的日常工作中,决策层和相关工作人员会基于实时金融平台数据,针对日常事务或紧急事件进行决策管理,监控大厅也就应运而生。基于这种工作方式,我们可以发现潘洛斯的产品特性非常契合监控大厅的使用场景。在监控大厅中,用户是通过两种不同的信息界面进行工作的,分别是综合数据可视化大屏(总屏)以及工作人员独立使用的电脑屏幕(分屏)。其中,在总屏上,呈现的内容通常是一些对于决策者来说至关重要的信息:正在发生的事件的状态和可能趋势(发生了什么)、值得注意的风险(需要团队做什么)以及风险的处理进度(团队做的怎么样);而在分屏上,主要为工作人员提供数据分析及风险事件处理功能,帮助团队对事件迅速作出响应,协作。

不同于工作场景,灵鲲产品在展会中展台的主要受众是参会人士,除了一般民众外,更有价值的观众主要来自于媒体和潜在客户等。所以在这个场景中展示的内容与实际工作中的数据可视化内容有一定的区别,更多的是对产品能力的展示、产品的宣传以及社会价值的呈现。如何直观的呈现产品的能力,并使观众快速获得有价值的信息并留下深刻印象非常重要。这也决定了在这个场景中,用户不仅包括观众,也包括演讲者。我们需要考虑如何通过控制端让讲演者而流畅的完成产品介绍。

在金融局等政府机构,经常会有上级领导视察参观的接待活动。这些来访的贵宾往往希望了解关于机构更全面和具体的信息,包括但不限于工作流程、工作成绩等,所以我们认为这个场景综合了以上两种场景的主要特点。这里的用户包括来访人员,演示人员以及工作人员,展示的内容也往往不局限于金融风险大数据的可视化,还会包括工作方式和流程本身。

三、行业竞品对比,反观自身发力点

通过对阿里 DataV,AntV、360、帆软的大数据可视化产品的体验,我们从产品呈现、产品体验、产品技术、部署方式和商业模式几个维度的横向对比。阿里的技术对可视化效果的局限性很大,优点是产品实现模板化、系统实时可交互,用户可以快速搭建自己的可视化产品;360产品可视化呈现3D化,数据呈现效果和数据感知度较2D更优,但是系统非实时可交互,而且搭建周期长,成本较高;帆软的可视化是传统报表型,可视化效果呈现缺乏竞争力。

经过对比,我们不难发现3D化数据呈现能力和数据感知度是最高的。但是局限于目前的技术,项目成本高、研发周期长、难以满足业务的发展速度。

四、我们的机遇和挑战

基于市场需求和竞品分析,我们从以下三个方面分别分析了产品的机会和突破点:

  • 可视化:数据和场景的呈现3D化,满足更多维度的数据呈现,支持云+本地实时大数据呈现能力;
  • 产品化:场景、组件、数据、图表全部实现可云端动态更新和配置的模块化,降低维护成本、提高服用率、缩短项目周期,无缝打包接入业务数据,提供丰富可自定义的可扩展接口;
  • 大数据+AI:基于公司多领域多业务线的大数据融合以及 AI 能力提供丰富的基于时间、空间、数据的预测预警、统计表达能力。
1. 产品架构规划

基于对灵鲲态势感知系统的使用场景、用户需求以及机会点的考虑,我们规划了未来产品的整体架构,包括大屏端、云端、客户管理端、小屏端以及虚屏端。大屏端基于本地端引擎进行大数据可视化呈现。客户管理端包括报表和配置管理等工具,帮助用户进行分析数据和策略管理。小屏端主要考虑操作控制和移动办公等移动使用场景,提供大屏控制、移动审批、监管、公众号等功能。以上三个端由云端拉取和更新数据。虚屏则提供差异化的大数据可视化体验,如增强现实等新奇有趣的玩法。由于大屏端在我们的规划里是态势感知系统的核心,且落地到合作方的模块,以下分享的内容将主要围绕大屏的内容设计展开,未来如果产品规划中的其他模块陆续上线,我们再做分享。

2. 大屏内容设计

本地端引擎

早期我们设计的「麒麟」系统、「鹰眼」反电话诈骗系统在对外在大屏上展示主要是通过 web 端的方式去实现,虽然适配性尚可,但很多设计效果无法完全还原。我们也尝试性用 webGL 和 three.js 的方式把设计效果再做进一步提升,但迫于研发周期和实际性能的压力,最后也只能作罢。中期我们尝试使用3D工具输出视频的方式做过一些过渡,输出效果是没有问题,但如果在展会上遇到媒体采访,事情就会变得异常尴尬。媒体会询问展示内容的真实性,数据的实效性,甚至采访的时候需要停留在某一个画面,我方参会人员配合起来非常麻烦。后来我们也研究过竞品使用的工具,例如 Ventuz,工具最终输出的效果是不错,但是界面、操作极其复杂,相关教程和素材在网络上极少,授权费用也相当昂贵。最终经过我们内部商讨和研究,也请教了一些 IEG 专家的意见,决定使用游戏引擎作为本地端的显示引擎。

Unity 和 Unreal 我们也纠结过许久,甚至 Unity 上我们也出过可交互的 Demo,但最终选择了 Unreal 的原因主要有以下几个点:

  • 基于前面我们提到的产品架构,我们的核心是在大屏,而大屏部署主要依赖 PC 做为计算平台,相较于 Unity,Unreal 在 PC 端的技术积累要更加深厚,实时渲染出来的光影效果和质感表现要更稳定于 Unity 的输出;
  • Unreal 自带蓝图-可视化脚本系统,这对于设计团队出身,零代码开发经验的我们来说上手、学习起来更快更方便;
  • 线上有大量的视频教程,各种插件和美术素材也比Unity更丰富;
  • 有《蝙蝠侠:阿卡姆骑士》、《最终幻想15》和《绝地求生》这些3A沙盘游戏作为先例,Unreal 对于大规模的场景渲染能力是可被预期的,而 Unity 目前还没有可以拿得出手的案例。

色彩基调

为了打造灵鲲产品的可视化,在竞品中脱颖而出,我们从产品功能、用户、愿景三个维度发散,提炼出设计指南的关键词:智能、直观、未来,塑造独特的大数据可视化风格体系。

灵鲲金融态势感知系统内容架构分为数据维度和场景维度,数据是核心,场景是大数据呈现的承载体;场景使用具有金属质感的深青灰,符合理性的、冷静的、智能化产品的个性;数据色彩使用透明、发光、具有未来感的高亮色,和场景形成强对比,使数据更为突显、更具吸引力;为了强化客户对于风险的感知,通过颜色区分数据的风险等级,更直观的传达数据的含义。如:高风险的使用红色,红色让人联想到危险、警报。

呈现方式

在现有的产品和传统认知中,大数据产品内容是各种样式的图形和图表,主要以平面为主。我们从游戏、科幻电影中收集了一轮大数据可视化内容相关的案例,从视觉维度上看,主要有这几个特点:一、具有很强的空间感,支持多种数据同屏呈现,可交叉分析对比,承载性强;二、高精度的模型和材质,丰富的粒子、动效,更加贴近现实的光影呈现;三、互动性强,可交互,实时演算。

从大数据可视化的内容维度上看,梳理的3D架构,主要包括:数据维度>基础建设>交通运输>行政分区>自然条件。

数据维度层是最核心的部分,位于场景上方最突出的位置,能够更清晰的展示风险数据的分布、量级;行政区域和交通层是城市场景最基础的数据维度,方便用户进行区域的数据对比和分析;基础建设层包括城市的建筑、标志性建筑、照明、桥梁、等,还原城市独特风貌;通过突出城市的标志性建筑,强化城市、区域的识别性,辅助数据传达;自然条件层包括地形、河流、植被、展示真实的环境特征,用户更有代入感。

△ 北京场景

△ 鸟瞰视角、漫游视角自由切换,满足全局、街道、建筑的不同颗粒度的数据呈现,方便用户进行纵向的数据对比。

△ 场景整体风格图

数据表现

灵鲲的3D数据样式有柱状图和散点图。如何把司空见惯的数据样式,设计出产品的个性,是我们重点要解决的问题。为了体现大数据的力量感,使用科幻电影中的聚合能量、发光的能量石作为柱状图的主图形;同时把数据采集、融合、分析的过程具象为动态粒子网络,作为辅助图形。数据图形和结构中都融合了品牌 DNA 的三角图形,数据样式更具有品牌的个性。

△ 柱状图

△ 散点图

预见未来的功能创新

时间线:3D的维度基础上,我们增加了时间的维度,通过拖动时间线查看不同时间点的数据的变化趋势,由此对未来数据进行预测。为了强化用户对于时间感知,设计了白天和晚上两种风格,白天和夜晚随着时间变化而变化。

天气系统:天气是未来数据分析极其重要的一个因子,它会直接影响交通(例如人流、物流、航空)、医疗(例如疾病传播、医院就诊)等领域。所以我们设计了通用的天气系统组件,呈现实时天气情况,以辅助用户进行数据分析。

控制端:符合大屏使用场景和用户操作习惯,同时小屏控制端支持更复杂更精准的操作。

组件库搭建

为了提升产品搭建的效率,降低了研发周期和成本,产品功能模块实现了组件化,分为3D场景组件、3D数据组件、2D数据组件。任何一位设计师都可以根据产品需求,搭配组件模块,快速搭建大数据可视化产品。

数据内容的包装

通过该产品,一方面能够辅助金融局等政府机构领导把控整体金融平台风险、辅助做出平台整改指导决策意见,展示金融工作成绩;另一方面体现出腾讯大数据能力和公司的社会责任;最后,通过从更长远的眼光去包装产品,打造智慧监管标杆产品,从而推动与政府客户更深入广泛的合作。具体内容通过以下两条线进行组织:

横线:各个监管维度

灵鲲金融风险态势感知系统专注于呈现金融风险数据的呈现,主要分为公司层面和用户层面,综合体现潜在的风险趋势和实际影响的范围。除了灵鲲用于监管金融数据,整个监管平台还负责展示包括政治、生态、电信、消费在内的多个监管维度,这些维度与金融监管维度为同一个内容层级。我们考虑到腾讯的大数据能力可以帮助更多城市综合管理者了解整个网络社会的全局性风险,所以每个维度都是智慧监管必不可少的一部分,并且每个维度之间的横向交叉对比能够使智慧监管平台发挥出更大的社会价值。

纵线:监管颗粒度

灵鲲系统中观众可以从全局数据一直下钻到个体数据,实现不同颗粒度的监管目的。

具体来讲,全国的安全风险最终是以加权平均后的指数形式体现出来;再到具体的省份和城市,内容细化到具体风险事件的发生情况,如电信安全监管维度,呈现电信诈骗使用的伪基站的位置,以及发送诈骗短信的数量等;最后细化到城市中的机构和建筑,呈现具体机构的运行情况和具体高风险企业所在建筑进行实时监控。

3. 产品演示视频

https://v.qq.com/x/page/d0742kep4k1.html

结语

潘洛斯团队是基于 DNA 设计中心下的大数据可视化团队,成员来自于 MIG 安全和医疗部门,早期专注于 To C 端的产品设计,过去一年里随着公司战略的变化和部门业务方向的变化,我们逐渐开始把产品设计的重心和思考放在了 To B、To G 领域,不断做着尝试和探索。以前做 To C 的时候我们关注的更多是 DAU、转化率、日活、满意度这些和产品体验相关联的指标,满足绝大多数互联网用户的诉求是我们首要去解决的问题。现在做 To B、To G 领域的设计,我们更多思考的是如何包装我们现有的业务能力,能够通过更加简单、直接、有效的方式触达给我们的客户,让他们更容易理解像腾讯这样拥有海量数据和算法能力的互联网公司如何帮助他们进一步提升他们的业务效率和产出,给这个社会创造更多的价值,这也是腾讯多年来想要承担的社会责任之一。

文章来源:优设

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

可视化数据大屏应该如何设计

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

2018年如自己所愿,终于有机会可以尝试下数据大屏的可视化设计,但是想象总归是美好的,新手上岗第一次总是那么不太如意,陌生而又熟悉着。在做过几次尝试后,自己又私下里翻阅了一些关于数据大屏方面的设计文章,好的设计图片。有很多不足,也有很多刚开始做的时候没有注意到的点,这次整理作品,也顺便把大概的设计流程整理了一下。给自己的一个复盘总结,也是一次设计分享。

可视化数据大屏应该如何设计可视化数据大屏应该如何设计



可视化数据大屏应该如何设计

文章来源:UI中国

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

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档