写给设计师的数据可视化指南

用户头像
深圳/UI设计师/5年前/819浏览
写给设计师的数据可视化指南

如今越来越多的设计师和数据打交道,尤其是B端的设计师,数据可视化更是必不可少的一个技能,越来越能体现一个设计师的专业能力


一. 什么是数据可视化


数据可视化是数据内在价值的最终呈现手段,它利用各类图表及图形化的设计手段将复杂、不直观的数据有逻辑地展现出来,使用户找到内在规律,发现问题,从而指导经营决策,挖掘数据背后的商业价值。


作为设计师,把握设计与功能之间的平衡,更好的沟通与传达信息,即是设计的重点。




二. 信息图表的分类


信息图表的呈现方式可分为六大类:图解(Diagram)、图表(Chart)、表格(Table)、统计图(Graph)、地图(Map)、图形符号(Pictogram)。



1. 图解

主要运用插图对事物进行说明,将无法用语言传达的内容,以生动形象的图形解释出来。


2. 图表

运用图形、线条及插图等,阐述事物的相关关系,流程图就是典型的图表。


3. 表格

根据特定信息标准进行区分,设置纵轴和横轴,表格广泛应用于通信、研究和数据分析。



4. 统计图

通过数值来表现变化趋势或者进行比较,具有 直观 、 形象 、 生动 、 具体 等特点,在统计资料整理与分析中占有重要地位。



5. 地图

描述在特定区域和空间里的位置关系,信息地图也可分为两大类:

  • 第一类,将整个区域的布局或结构完整呈现的地图。

  • 第二类,将特定对象突出显示的地图。



6. 图形符号

图形符号的设计原则是尽可能不使用文字,其作用有两条:

  • 避免语言不通造成的困扰。

  • 更便捷的、更清晰的传递信息。




三. 基本设计步骤


制作统计图的过程可以被四个步骤,分别是:明确目的、选择图表、视觉设计、突出信息。



1. 明确目的

明确数据可视化的目标,通过数据可视化我们要解决什么样的问题,需要探索什么内容或陈述什么事实,并选择合适的图表。


2. 选择图表

围绕目标找到能提供信息的指标或者数据,选择合适的图形去展示需要可视化的数据。



日常工作中,有六种基本图表已经可以覆盖我们大部分的使用场景,也是做数据可视化最常用的六种图表类型。




3. 视觉设计

以可视化的手段将数据转化成有趣的设计语言。在构建一套完整的可视化图表时,至少需要6种颜色的调色板来进行设计,然而大多数配色方案并不具有这么多种颜色。


4. 突出信息

根据可视化展示目标,将重要信息添加辅助线或更改颜色等手段,进行信息的凸显,将用户的注意力引向关键信息,帮助用户理解数据意义。



四. 适用于所有图表的制作规则


1. 图表中的线条


有无刻度线

当数据的数值非常重要时,一定要使用刻度线来让观众更清晰的了解数据。


刻度线的颜色

刻度线要比数据的层级低,不要使用全黑或者全白的线条。


坐标线

坐标线应该比刻度线更粗、颜色更深,才能让整个图表显得更有主次的区分。


2. 选择合适的坐标上下限


选择合适的坐标下限

一般来讲,我们应该把我们的坐标下限设置为0。

当然也可不将坐标轴起点设定为0,在视觉上让人形成对比强烈的感觉,从而突出业绩。



比如在小米的发布会中,为了对比,小米把数据的下限起点设置为了10000,从而使小米的跑分数据看似跑赢了友商一倍还多,但其实小米的数据增长,只比友商高出了25%。


选择合适的坐标上限

坐标轴中另一个需要注意的点即为坐标上限。上限界定的方式有两种,可根据需求自行判断。

  • 如果只是为了比较各个数据的数值,可以用数据的最大值作为坐标轴上限。

  • 如果是需要将数据与某个最大值比较,则用此最大值作为上限。


3. 刻度值

刻度线和刻度值相辅相成,这会让图表看起来更加规范。设计的时候要注意以下几点:

  • 间隔均匀

  • 不要使用非水平和竖直的文字标注,也不要使用转行


4. 突出信息

  • 重要的内容用颜色区分,把不重要的内容变为灰色

  • 添加必要的辅助说明

  • 添加必要的辅助线



五. 折线图的制作规范


1. 有层次区分的折线/曲线

当我们在制作一个复杂的折线图时,我们想要显示其中的一条数据,最好的方法就是加强它与其他元素的对比,从而提高它的重要性层级。

  • 利用我们之前的方法,把其他的数据变为灰色。

  • 将我们需要强调的曲线置于顶层。



2. 什么时候用折线图

同一数据在不同时间下的数据值用折线图,同一时间下的不用数据用柱状图。



3. 使锯齿状的线条平滑

如果折线上下浮动过于剧烈,那么你应该尝试拉长间隔。




六. 饼图的制作规范


1. 避免过度分割饼图,否则最终会导致根本无法阅读

如果一定要给出一个确切的分类数目,一般不要超过9个,超过的话,建议用条形图来展示,不要太依赖于饼图。



2. 饼图的起始位置要得当

人们的阅读习惯往往是从12点钟开始的(跟表盘类似)。所以我们在制作饼图时也要遵循观众的阅读习惯,从12点钟方向开始制作,这样才能呈现出更加清晰的数据。



3. 饼图的顺序要得当

拿到数据后,先对数据进行从大到小的数据排序,才更有利于我们展示数据。当数据中有“其他”类别时,将“其他”放置在饼图的最后来展示。




七. 面积图的制作规范


1. 尽量不重叠,使用透明色

当图表中要展示多组数据时,最好保证所有的数据都不重叠,这样才可以更好的展示数据。如果无法避免重叠,则应该适当的设置颜色和透明度,使得重叠的区域变得更加易读。



2. 不要超过四个类别

面积图只适合展现少量的数据,最多建议不要超过四个类别,否则就会导致非常难以识别。因此在多个类别下,要尽量避免使用面积图。




总结

总结了这么多,发现数据化还有如此之多的细节。往常我们做图表设计,可能只是用网上自动生成的图表简单调整下,或者按照通用样式来设计。然而,通用样式虽然能表达数据意义,但也缺少了对图表细节的把控,失了精致优雅的感觉。作为数据可视化设计的一小部分,就是这些设计细节,决定了图表最终的传达效果。


以上就是个人的小小的学习总结,希望可以给大家一些启发和借鉴~~


7
举报
|
27
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】银行卡icon
UI应用平面图标
【新年UI图标】珠宝icon
【新年UI图标】30个图标
手表表盘UI系列
3D卡通UI界面图标可爱插画免扣素
科技医疗透明柜UI界面设计
抽象液态渐变UI背景模版
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】游戏/娱乐icon
高级表盘系列UI源文件
【新年UI图标】影音icon
UI界面 组件
UI 登录界面设计模板包
3D渐变流体抽象矢量UI背景图
我的钱包-UI界面设计-app
【新年UI图标】优惠券icon
Security Camera UI kit
拟物风质感写实UI卡片合集源文件
新拟态风格 UI设计组件库
钱包ui模板
高级感金属拟物 UI设计组件库
新能源APP应用UIKit
【新年UI图标】汽车icon
你可能喜欢
相关收藏夹
大家都在看
登录注册