查看原文
其他

百度的数据可视化设计,专业又好看

UI设计达人 2023-07-30

The following article is from 百度MEUX Author 商业用户体验部

可视化图表是提升信息传递效率的一种有效方法,特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中,如果没有系统的可视化知识,会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么,在复杂的数据关系中如何设计和选用图表,如何在好看的同时提升信息传达效率,看完这篇文章希望对你的设计过程有所帮助。



// 为什么要数据可视化


数据可视化就是用图表来表示数据信息,它所传达的信息包括你所拿到的数据源和你分析后的结果,再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息,是我们可视化的最终目的。


举个例子,同样一组数据,用表格的形式呈现是很难有所洞察的;如果将各个地区维度的数据聚合以柱图形式呈现,很容易就能看出各个地区间数据的差异,并从中洞察规律


关于如何设计好数据可视化图表,这边总结了三个步骤:选择适合的图表,强化视觉层次,图表响应式适配。



一、选择适合的图表


数据可视化的图表种类繁多,当我们真的开始作图,往往会遇到一个困境:有这么多类型,要如何选择正确的图表呢?首要依据是考虑所要传达的信息意图,即所要制作的图表它的任务是什么,再通过分析数据关系来选择表达方式;第二层意图是图表传达内容,这时候我们就需要根据数据的特征去突出和强化。


1. 分析数据关系


根据数据分析的方式来看,每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构,再结合数据关系作出选择。了解图表的可能知道,一般图表的数据关系有构成、比较、分布,以商业数据为例,常见的还有流转关系。



构成关系


构成关系的图表表达的是部分和整体的关系,用于分析总体和各部分的占比比例,构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小,也可以使用比较关系的图表。


常用图表:饼/环图、堆叠图、面积图等,如涉及到层级结构,还会用矩形树图或旭日图等特殊结构图表。


关键词:“占比、比例、百分比”



比较关系


比较关系是基础分析中常用的一种图表类型。在一定的取值范围内,通过对两个或两个以上的指标分析,可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式,趋势对比用于表示一段时间内数据的变化,分类对比用于比较数据规模。


常用图表:趋势对比常用图表有折线图、散点图等;分类对比常用条形图、柱状图、气泡图等。


关键词:“增减、升降、涨跌、波动”



分布关系


利用空间分区来展示数据之间的分布关系,常用于体现两个或以上数据的相关性。

常用图表:散点图、热力图、雷达图等


关键词:“随着……而变化、A/B之间的相关性、交/并集”等



关联与流转


流转关系是B端数据常用的一种关系,它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等,以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。


常用图表:关系图、桑基图、漏斗图、进度图等


关键词:“流程步骤、留存、转化、关系”



2. 分析数据特征


按数据关系和分析目的选择好图表类型后,第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有:变量特征、维度特征、层级特征、流程特征。


变量特征


分辨一个指标通常有两类特征,按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势,离散数据通常统计各分类下数量的变化。


  • 连续型数据:指在一定区间内可以任意取值的数据叫连续数据,其数值是连续不断的。如身高、体重等带有时间因素变量的数据等,通常用折线图体现变化趋势。

  • 离散型数据:指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据,用柱图表现更加体现变量的特征。



维度特征


多维度分析需要将多个变量在同一平面上直观的表示,可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据,可使用不同颜色进行分类


  • 根据分析视角选择图表:对于多维度变量的数据我们需要明确分析的视角,去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据,如需要全局视角查看个班的综合素质,推荐使用雷达图;对比单科成绩的变化分布,则推荐使用堆积图。



层级特征


多层级数据由多个部分构成一个整体,又称树形结构数据。除了用结构树图表表现以外,还可以考虑以下两种图表类型:


  • 矩形树图:突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小,它以面积的形式突出展现各个子层级节点的占比,可帮助用户看到数据的层次结构以及各层级之间的关系。


例如:上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额,通过色调来区分不同类型,颜色的深浅代表分类下的子集,面积体现销售占比。对比一般结构树图表,它的优势在于可以有效利用空间。


  • 旭日图:突出细分层级关系。由多个圆环图嵌套而成,也称为径向树图,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。常用于细分分析方法,将事物从大到小进行拆解。每个级别的数据通过1个圆环表示,离原点越近代表圆环级别越高。旭日图在显示一个环如何被划分为多个层级时最有效,而矩形树图适合比较相对大小。



流程特征


流转关系是表达数据转化流程的重要类型,不仅包含统计意义上的数据总和,同时还表达了信息流转的路径;其中桑基图和漏斗图都可以表达路径中流量的变化,不同的是桑基图重点强调流量的强度和走向,漏斗图更加注重突出转化率和效果,根据不同的表达目的选用。





二、强化视觉层次


选择合适的图表后,在信息传达上也需要正确的表达,展示形式美观的同时能够清晰的体现数据特点。


1. 强化数据特性


使用图表正确的表达信息,需要设计师在强化数据特性的同时避免偏差


  • 趋势易感知:折线图数值如过于平均导致趋势平缓,有时候无法体现偏差;在强调数据趋势的场景下,推荐用动态取值范围让波动保持在一定范围内,放大波动占比更突出趋势。



  • 展示更准确:柱状图依靠柱体面积体现最终数值,使用动态范围截断将会导致数据解读不完整;始终将 y 轴从 0 开始,才能更准确的反映柱图中的值。



2. 色彩视觉传达


除了在设计构图上优化以外,颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知,错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板,精确传达信息同时后续的项目在选用时也可以达到用色的统一。



我们在之前的文章里有介绍过图表的取色模型,通过调整颜色HSL值的区间,可以得到以下三种意图色板:


  • 定性型-分类色板:用于区分不同的类型,又称为无序色板。适合区分没有内在顺序的类别

  • 定量分歧型-发散色板:通过两边互补色来体现,具有明亮的中间值,然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值

  • 定量顺序型-顺序色板:从亮到暗或相反的渐变。适合可视化从低到高的数字。


那么我们要怎么样去使用这些色板呢?下面几个案例将带你了解其中的差异。


定性型:使用色调来进行分类


数据内在没有顺序差别时,建议使用色调值(H)进行区分;如定义国家、行业等类型。如果希望图表看起来更加专业,以下有几项分类色板的小建议:


  • 选取尽量少的色调:取色时无需使用整个色环,使用邻近色或互补色的取色方式显得更加专业。



  • 色板适度明暗交替:一些视障人士无法区分色相,主要靠颜色的明暗差异来识别,通过饱和度和暗度的调整,创造明暗交替的色板。



定量型:使用深浅色板强调内在顺序


如果在同一个分类下包含子类别,或者数据本身具有排名属性,那么建议使用连续色板来突出他们内在的顺序,使图表更加易读。


  • 顺序色板-选择合适的插值:根据数据的分布情况选择不同的的插值断点,突出数据的差异。如以下案例中,根据统计学概念设定不同的取值区间,左侧示例使用的是平均线性差值,反映的是数据的集中趋势;右侧示例使用的是中位数插值,能更好的体现数据分布的形态。



  • 发散色板-关注对比色的识别性:尽量避免红绿配色,如需使用绿色,偏黄或偏蓝的绿色更易分辨,对视障人士也更加友好。





三、图表中的响应式设计


B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报,在基础设计完成后还需要考虑到图表展示的环境,根据不同端去适配显示效果,以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。


1. 布局框架适配


在网页端显示时,有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态,将非必要的的元素转化或隐藏,保留重要的图形元素去适应当前空间;元素隐藏后使用悬浮交互来保证信息的展示,保持图表的可读性同时也避免产生元素的重叠。


如案例中的图表,在不同尺寸下通过改变和隐藏图表元素,以达到适配当前空间的效果。


2. 图表元素适配


要适配移动端,网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外,还需要考虑手机屏幕的尺寸和图表元素的适配性,去兼容相关的交互操作。


  • 信息浮层:在图表中,信息卡元素是传达信息内容的重要组件,在网页端中悬浮展示,通常会占据很大空间;图表适配移动端后,信息浮层改动到图表上方常驻显示,并跟随手指的滑动变化响应数值,完整展示信息的同时也避免了页面抖动。



  • 坐标轴标签:过长的坐标标签在适配过程中会产生重叠,而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配,避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配,精简空间避免堆叠。



3. 极值适配


因B端平台的特性,我们无法预知客户传入的数据量,可能会遇到因数据量过多,造成图表显示不佳,数据读取困难等问题。这种情况下,提前考虑数据极限场景,通过交互的形式变化的方式让用户获取完整信息,提升理解同时信息展示更灵活。


  • 缩放和平移:在数据范围过多时增加取值范围的缩略轴组件,通过限制展示范围让数据量显示可控。



  • 互动切换视图:如果折线的类别过多且无法省略的,建议分组查看。默认状态仅当前组折线高亮,其他数据以浅色显示,通过切换的方式查看其他组别的信息。



  • 悬浮鼠标高亮:在分类过多不好分辨时,可使用悬浮高亮的交互方式突出相关联的数据组。



还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因,在这篇文章就不做深入讲解了,以后可独立介绍。



// 结语


数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确,才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据,确保用户能够更好的接收信息,才是可视化的关键。


* 以上图表中均为虚拟数据,仅作为案例参考


希望对大家有所启发,请记得把文章转发到你的朋友圈,点个在看,咱们一起加油吧!


推荐阅读

(点击标题可跳转阅读)

ChatGPT 又升级?设计师如何榨干它的能力(别被老板看到…)这个布局设计曾被知乎网友嘲讽,然而6年了我还在用
微信版「小红书」正式上线回复 灵感 下载UI设计灵感合辑
点个 “ 在看” 好文不断

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存