首先一般讲适老化无障碍设计,我们都要提到的就是通用性设计和包容性设计。
原则:强调设计所有的系统和产品,使每个人都能使用,无论他们的年龄或能力。
百度百科将通用设计定义为:“能被失能者所使用,就更能被所有的人使用。通用设计的核心思想是:把所有人都看成是程度不同的能力障碍者,即人的能力是有限的,人们具有的能力不同,在不同环境具有的能力也不同。”
通用设计中应当也包含对于特殊人群的基本考虑,要让目标人群觉得:鱼和熊掌都可兼得,既照顾了特殊人群的使用,又兼顾所有人。
原则 :好的设计应该满足尽可能多得使用者的需求。
百度百科将包容性设计定义为:包容性设计着眼于清楚源于使用主体而造成的各种障碍,使每个个体都能平等、自信、独立的正常使用,为同一适用条件下的互动提供了新的视角,也为创造性和问题解决导向的设计提供了机会。
通过分析客户的困境,结合现状进行深入分析,发掘政府端客户的普遍性存在的问题。
大多数政府省市级领导人的年纪均在60左右,由于年龄普遍较大,对于设计的认知会有偏差,对于审美的把控以及设计本身的价值理解会偏弱。
从去年十月上旬开始,省级党委换届拉开大幕,在至今近8个月的时间里,全国31个省区市先后展开换届。经过此次换届,干部队伍的年龄结构得到进一步优化,初步形成“50后”为主导、“60后”渐成中坚的格局。
根据公开资料统计,31省区市书记平均年龄为58.1岁。其中,“40后”书记有6位,“50后”有22位,“60后”也有3位,某区党委书记胡XX和XX省委书记孙XX同为63年出生,是最年轻的书记。
视力:老年人视力的下降,影响眼睛对空间、颜色、明暗等加工等;
听力:听力弱化造成的听不清楚,尤其是在嘈杂的环境中,老年人听起声音来会更吃力;
表达力:专业化的术语以及需求,会使表达和沟通不便;
互联网和人工智能等技术发展变化太快导致认知力的不足。
绝大多数的老年人对现在数字化的产品很陌生,再加上复杂的界面操作,需要反复的学习使用才能熟悉掌握。
ToG类型的项目,我们的客户群体是政府的某个部门(G端行业中,政府部门因为权限和管辖内容的不同,客户的诉求也会不一样,同时由于决策层是一级一级往上的,对于各个层级的领导都需要去进行满足,对于设计的要求也就更高了),因此我们需要对客户的心理进行重点挖掘。
政府部门的领导或者员工大多数都是高知人群,对于工作的态度都是非常严谨,喜欢按规矩办事,分工明确,力求事情做到一丝不苟,有理有据,讲究严谨做人,务实做事。
政府部门的保密工作需要做的非常到位,尤其是关于公安等民生问题时。另外政府类客户一般对于数据的保密做的非常好,基本都是内网开发,私有化部署,一切互联网的东西连接内网都会报警。如果是外网开发,则需要做好数据存储,一定要非常注重数据安全。
政府类的软件或者产品,基本都有很强的实用性,实用好用才是客户最关心的问题,因此在系统架构上需要做到,简单高效,快速触达,减少客户的学习成本。
对于文字大小的需求比较强烈,提及最多的就是字体放大,加粗。
对于画面能够看清,需要重点表现在前景和背景的色彩对比度。
对于画面的表现,要更加的酷炫,在客户眼里,动态图形效果远远大于静态效果图。
随着年龄增长,人类的晶状体会变黄变浑浊,导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果,从而降低元素在界面中的对比度, 因此需要提高色彩的饱和度。
产品整体架构以及内容逻辑清晰,简单高效,上手简易。
通过对政府类客户的分析,挖掘客户最深层的需求,针对于以上的关键点,提出适合的解决方案,大体在一下6个方面的全面解析。
对于系统框架以及布局进行一屏式展示,减少系统层级的递进。
对于展示形式上可以更清晰准确, 尽量模块化展示每个需求,做到聚焦用户视角,提升画面表现。
整体交互流程简化,复杂以及多层级弹框尽量少使用。
中文字体类型的使用,在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。
英文字体类型的使用,英文数字的字体选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN字体。
字体大小的定义。在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常1080P页面,最小字号不小于16px,具体字体大小还需要参考设备清晰度,环境灯光,视距等因素。
界面中的前景与背景的对比度,是否足以让政府类客户清楚识别;
颜色不应该用作传达信息的唯一视觉手段,需要用额外的文字提示;
通过 H(色相)S(饱和度)B(明度)的数值来划分色域,在保持H值不变的前提下,定义了10个色域。所以在前后景的颜色选择上,满足跨度至少为6,才能让目标人群准确识别文字信息。
视觉呈现以及文案图像对比度至少要有7:1,大文本至少有4.5:1的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标,如Contrast Ratio 在线检测工具:
画面采用多种饱和度较高的颜色,而不是单色;
颜色的丰富程度决定了画面的视觉表达,色彩越丰富,画面表现越好;
增加图形的占比大小,提升视觉上的表现;
尽量采用识别度较强的图形和图标,尽可能贴近客户的认知范畴;
图标和图形尽量搭配文字描述,方便客户更清晰更快速理解。
观测距离的远近,也决定着画面的展示效果,尽可能的拉近观测距离;
正常视距观测下,以常规设计规范去制定即可,如若观测距离较近,则可适当缩小相应的视觉表现,反而观测距离较远,则放大视觉。
设备的尺寸、精度,分辨率大小都会影响目标人群的体验;
在设备精度较低,或者说点间距过大时,应当适当放大视觉表现,点间距小的则显示非常清晰,可适当缩小视觉表现。
为了保证适老化的推广,需要在适老化的基础上统一标准,在字体,颜色,框架,图形等内容上做出提炼,深入了解目标客户的需求以及客户心理。
本着严谨务实,安全性,实用性等原则,沉淀出一套符合目标人群的设计规范,应用并推广到不同设计团队以及推广到广大设计师中去。
我们需要不断践行适老化设计原则,体现设计的通用性和包容性,应当在设计表现和产品功能上更加的包容这个群体。人工智能大数据时代,虽说政府类客户会比普通人更容易接受,但是受制于某些原因,推动解决老年人面对智能技术的问题解决才是重中之中。
设计师也需要运用自己的专业性,来帮助目标人群融入数字化的生活中去。
因为在不久的将来,我们也会变成这个群体,当我们面对这些束手无策时,那时的设计又会是如何适老的呢?适老化设计是适合所有人的设计,所有的设计师都应该密切关注。
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咨询、用户体验公司、软件界面设计公司
数据可视化已迅速成为在网络上传播信息的标准。它用于各种行业,从商业智能到新闻,帮助我们理解和传达见解。
我们的大脑善于处理可视化信息,这使我们更容易理解图表或图形中可视化的数据,而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来呈现数据,以便数据被吸收和理解。它应该考虑用户对视觉处理的了解,提高并简化用户的数据体验。
目前有很多工具和框架可用于构建这些图形,是时候回归基础了。是什么让数据可视化有效?在设计数据时我们应该遵循哪些指导原则?
以下最佳实践将帮助您设计丰富、有洞察力的数据体验。
可视化是用于揭示模式的,提供上下文并描述数据中的关系。虽然设计师对给定的一组数据集中的模式和关系没有任何影响,但她可以根据用户的需求选择显示哪些数据以及提供怎样的语境。毕竟,就像其他产品一样,如果用户无法使用它,那么可视化就毫无意义。
为小白用户设计的可视化应该是结构化的、明确的和有吸引力的。他们应该用文字直接说明受众应该从数据中得到什么。
转换双亲的工作时间:妈妈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咨询、用户体验公司、软件界面设计公司
我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。
“得益于计算机技术和海量数据库的发展,个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣, 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts
“大数据的影响,就像四个世纪前人类发明的显微镜一样……而大数据,将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson
从数据,到海量数据,再到大数据,对人类的做事和思维方式都有很大的影响。在《大数据时代:生活、工作与思维的大变革》一书中,作者归纳了大数据的三个特点:
当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解,通过图表将杂乱的数据进行科学有序的呈现,使用户找到数据的变化规律以及潜在价值,帮助用户作出决策。就数据可视化的应用来看,应用范围极其广泛,如政府应用、商业决策、公共服务等等。
顾名思义,数据可视化就是将数据转换成图或表等形式,以一种更直观的方式呈现数据。通过可视化的方式,我们可以将大量复杂的数据通过图形化的手段进行有效地表达,帮助用户发现规律和特征,发掘数据背后的价值。
图 1 @Marco Zemolin Siresia Bagnoli
使用可视化的方式来表达复杂的数据,可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式,我们可以以清晰和连贯的方式解释大量的数据,从而让我们理解数据,得出结论。
案例:流媒体平台节目数量的变化
以下图为例,当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时,以表格方式呈现效果如下图:
未经可视化设计的表格数据图
如果通过可视化设计处理后效果如下图:
经可视化设计后的数据图
在这个案例中,我们可以看到,通过文字信息表达的方式,所有的数据在文字信息的表达中都只是零散的个体,我们很难在短时间内对列举数据有一个大致的了解,更不用说发现特征得到结论了;而在可视化表达中则不同,所有的元数据通过图表形成一个整体,数字信息被转化为视觉信息,通过可视化图表,通过观察点的位置和颜色即可感知到数据的差异,原本需要通过计算数字大小完成的对比,变成了肉眼可见的点的颜色与间距对比,我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。
据研究发现:人脑处理图片信息的速度显著快于处理文字信息,例如一篇 300 字的小故事,看一遍需要数十秒,而转化成图片后则只需要一眼即可记在脑海里。
这表明,在信息的类型中,人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事,帮助用户快速接收、处理信息,激发用户联想并产生情感共鸣。
案例一:新冠病毒如何通过空气传播
随着新冠疫情在全球各个地区的蔓延,如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。
图 2 @Mariano & Javier
案例二:在叙利亚,谁和谁战斗?
许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候,这些团体之间有的结盟,有的敌对,这让人难以理解。但是,Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩,将这些数据简化为一种简单的、易于理解和可互动的形式,让人们可以轻松了解这些团体之间的关系和故事
图 3 @Joshua Keating and Chris Kirk
现实生活中大部分的人是视觉学习者,他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此,相比起阅读和理解文本,大部分人更容易通过图表或其他可视化形式来理解数据,合理的数据可视化设计可以提高他们作出决策的速度。
图 4 @Bea Vaquero
1. 明确客户需求
设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通,确定他们的业务诉求,也可以理解为确定客户的初衷与目的,从企业客户对数据可视化的需求看来,通常会有两种类型:
明确客户诉求,通过设计手段帮助客户达成目标,这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要,我们才能快速推导产品结构、关键数据、视效风格等信息。
图 5 @Daria
2. 确定关键指标与优先级
关键指标是对一组或者一系列数据的统称。一般情况下,一个指标在屏幕上独占一块区域,所以通过关键指标定义,我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。
那么关键指标的选取依据是什么呢?我个人认为主要还是依据客户诉求,数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是,哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望,选择出一系列关键指标。
对于这些选取出来的关键指标,我们需要对其进行优先级的排列,一般来说,主要指标能够呈现业务的主要逻辑,一般放在显眼位置,用重点元素标识;次要指标围绕主要信息进一步阐述;辅助指标是对主要信息的补充,一般放在非核心区域,或者二级结构中。
通过合理优化关键指标并进行优先级排列,能够保证数据可视化的核心设计的重点,避免数据空洞散乱。
3. 合理使用数据图表
在选择图表展示相关数据指标时我们要思考各个指标的主要呈现,更进一步的讲,是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发,选择合适的可视化方式来呈现数据。
图 6 翻译自@Stephen Few
4. 合理进行页面布局
数据可视化页面布局的设计是相对灵活的,为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置,横向布局最为常见(人眼的水平运动比垂直运动快,会先注意水平方向的事物),核心数据场景划分在中心位置,占较大面积;其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。
@布局设计案例
5. 制定设计方向
在定义设计风格的阶段,从项目背景出发,综合行业类型、产品定位、品牌传播等因素,提取关键信息,构建设计框架。
数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主,是因为相比于浅色基调,深色背景设计能够有效缓解视觉疲劳,其次深色设计能够更好地营造对比差异以及数据层级,再者深色设计更容易呈现丰富的动态效果,营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性,例如党政机关类项目会慎重考虑用色,应当确保设计严肃,庄重。
数据可视化的设计除了对数据进行合理设计,还需要注重场景感的塑造,例如,我们通过场景化设计可以让某大数据平台成为大型“图书馆”,查看数据的过程就跟图书馆看书一致,场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据,当然合理的构建动态数据效果能够让数据具备“生命力”。
图 7 @Gan Gryc
6. 设计对比
除了尺寸和位置,我们还可以通过配色来突出数据。
无论是通过颜色或形状对比设计,容易产生强烈的视觉冲击力。
图 8 @Bureau Oberhaeuser
利用明度的对比,我们可以用深色烘托鲜明的色彩,或者用鲜明的色彩衬托某一块暗沉的色彩,亮色靠附近的暗色衬托显得更加鲜明,其色彩特征表现得更加充分;
图 9 @Zoey Shen
正确的对数据进行配色,让数据传递出的信息更清楚、更明白,例如国内 A 股,红色代表涨,绿色代表跌(美股绿涨红跌)如果给国内的股票、金融等相关客户做数据可视化设计时,需要避免不同地区文化所产生的差异。
图 10 @Dima Groshev
7. 选择 2D or 3D?
随着数字孪生概念的火热,越来越多的企业热衷于打造自己的 3D 数据可视化产品,那么 3D 可视化就一定比 2D 强吗?
数据可视化设计本身就是为了高效传达数据信息而服务的,相比平面呈现,3D 最大的优势在于多了空间维度,适合那些需要跟空间结合的数据呈现,例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗,显然不是绝对的;需要根据实际业务需求出发。
通常我们所说的数据 3D 可视化,就是把大量复杂抽象的数据信息,通过 3D 模型以视觉方式呈现出来,帮助人们理解和分析数据。相比于数据 2d 可视化,数据 3d 可视化具有以下的优势:
在一个实际的数据可视化产品项目中,有必要应用 3D 数据可视化的情形;
相比 2D,3D 的设计与开发成本相对较高;其次 3D 场景会容易产生视角遮挡以及操作成本等问题,那么从实际项目出发合理选择才是最重要的。
亚信数字楼宇@PRD MO UED
8. 设计还原
设计稿完成了并不代表设计师在这个项目中的工作就结束了,在后续的开发工作中,设计师还要与开发人员合作,减少上线产品与设计稿的差异。
这个阶段的工作也并非听上去那么容易,尤其是 3D 可视化设计,我们会使用相关 3D 工具制作设计效果,但 3D 设计工具与最终开发引擎存在着色、渲染等差异;在这个时候我们需要灵活运用开发引擎特性,提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识,帮助设计效果实现同时也提升对接效率。
亚信数字楼宇@PRD MO UED
9. 调优与测试
测试客户终端上线是否正常,有无适配所造成的兼容性问题;排查有无视效及体验问题,同时也要考虑极端场景下所产生的问题及应对方案。
对于大型 3D 可视化场景会存在性能卡顿,加载缓慢等问题,在保证视效基础上尽可能压缩相关美术资源,减少不必要的效果计算和内存占用量,根据实时效果需要不断优化性能提升产品体验度。
趋势一:数据可视化 ╳ AI人工智能
随着企业发展数据量日益庞大,通过人脑分析复杂数据变得越来越困难,我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据,为企业节省了宝贵的时间和资源,目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。
IBM 数据可视化专家 Mauro Martino 创建的仪表板,允许用户可视化新闻中出现的主题
趋势二:数据可视化 ╳ XR
AR 和 VR 技术的应用可以增强数据在空间上的感知,从而帮助人们更好地使用数据。通过结合 VR、AR 技术,用户能够更好,更快地理解、分析数据。最近进行的许多研究表明,VR 和 AR 具有较强的感官体验,可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析,并更快速地找到解决方案。
图 11 LM9000@5puj47980xk
趋势三:数据可视化 ╳ 实时数据
在数字时代,事物变化很快,企业需要对数据告诉他们的信息做出快速反应——正因为如此,实时可视化数据比以往任何时候都更重要。
在 COVID-19 大流行期间,企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。
实时数据可视化可以采取一些简单的形式,如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。
图 13 @Esri & The Science of Where Podcast
趋势四:数据可视化 ╳ 全面体验设计
以用户体验为核心的数据可视化设计是一种重要趋势,将用户放在第一位,然后是数据。无论处在哪个行业,设计师都应该遵循类似的思考过程,从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题,以及他们面临哪些可能的困难?他们需要什么信息和功能来解决这些问题?我们如何以最佳方式为他们打造数据可视化?
最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并,帮助用户进一步钻研数据并发现模式、趋势和相关性。
数据可视化是一门同时结合了科学和艺术的复杂学科,其核心意义在于清晰的叙述和艺术化的呈现,这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ,只有最终达到帮助用户理解数据和做出决策的目标,才能发挥它巨大的价值和无限的潜力。
作者:AsiaInfo Design
转载请注明:优设网
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章:大数据可视化界面设计之一:可视化大屏设计快速入门指南
大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇
大数据可视化界面设计之十:数据可视化必修课:表格篇