数据可视化设计师必备的图表规范指南

在企业大数据、后台管理面板、金融行业等与数据有关的UI设计中,数据可视化设计是必不可少而且非常重要。

但是很多设计师不懂可视化当中不同用途的图表规范,只是为了设计出好看的数据图表,在不停的寻找设计灵感参考,最终发现了即使有漂亮的可视化数据图表,但却不能用在自己的项目上非常可惜。

为什么会出现这样的情况呢?

原因其实无非就是:设计师除了自身比较少接触数据设计外,就是对可视化的设计规范不了解。

主要从以下几个方面去归纳:

数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比,并用它来讲故事,以此来帮助用户做出决策。数据可视化可以表达不同类型和规模的数据,包括从几个数据点到有大量变量的数据集。

所以我们在进行数据可视化的时候需要注意三点要求:

优先考虑数据的准确性、清晰度和完整性、以不会曲解信息的方式来呈现信息。

为用户浏览数据时创造便于研究和比较的条件与功能。

预测用户对数据深度、复杂性和形式的需求,针对不同设备大家可以进行可视化展示内容和形式。

数据可视化是可以以不同的形式去表达的,图表是表达数据的常用方式,因为它们能够展示和对比多种不同的数据。

图表类型的选择主要取决于两点:

常见的用例包括:股价的升降表现、数据统计、年报等。

图源:网络

2)不同数据间的类别比较

3)展现不同数据间的排名图表

排名图表显示项目在有序列表中的位置,常见用例包括:选举结果、性能统计。

4)不同部分数据在总体数据中的占比

占比类图表显示了局部与整体的关系,常见用例包括:产品类别的综合收入、预算。

5)两个数据以上的关联比较

关联类图表显示两个或以上变量之间的关系,常见用例包括:收入和预期寿命。

6)数值间的分布

分布类图表显示每个值在数据集中出现的频率,常见用例包括:人口分布、收入分布。

7)数据的流程

流程类图表显示了多个状态之间的数据移动,常见用例包括:资金转移、投票计数和选举结果。

8)数据关系

关系图表显示多个项目之间的关系,常见用例包括:社交网络、词图。

面对多种类型的图表,以下表格总结了关于如何选择合适的图表。

*基线值是y轴上的起始值。

柱状图(条形图)和饼图都可用于显示比例,表示部分与总体的对比。

面积图有多种类型,包括堆叠面积图和层叠面积图:

数据可视化使用自定义样式和形状,使数据更容易理解,以适合用户需求。

图表可以从以下方面进行优化:

不同类型数据的样式设计:

这些图形属性包括:

不同属性的表现:

多个视觉处理方法可以综合应用于数据点的多个方面,例如:在条形图中,条形颜色可以表示类别,而条形长度可以表示值(如人口数量)。

形状可用于表示定性数据。在此图表中,每个类别由特定形状(圆形,正方形和三角形)表示,这样可以在一张图表中轻松实现特定范围的比较,同时也可以进行类别之间比较。

图表可以运用形状,以多种方式展示数据。形状的设计可以是有趣的、曲线的,或者精确和高保真的等等。

形状精确程度:图表可以展示不同精度程度的数据。

用于细致研究的数据应该用适合交互的形状(在触摸大小和功能可见性方面)展示,而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

颜色可用于以四种主要方式区分图表数据:

1)颜色区分类别

例:圆环图中,颜色用于表示类别。

2)颜色突出数据

例:散点图中,颜色用于突出特定数据。

3)重点区域

在不滥用的情况下,颜色可以突出焦点区域。不建议大量使用高亮颜色,因为它们会分散用户注意力,影响用户的专注力。

4)颜色表示含义

5)无障碍

为了适应看不到颜色差异的用户,您可以使用其他方法来强调数据,例如高对比度着色,形状或纹理。将文本标签应用于数据还有助于说明其含义,同时消除对图例的需求。

图表中的线可以表示数据的特性,例如层次结构,突出和比较。线条可以有多种不同的样式,例如点划线或不同的不透明度。

线可以应用于特定元素,包括:

文本可用于不同的图表元素,包括:

图表标题通常是具有最高层次结构的文本,轴标签和图例具有最低级别的层次结构。

字重:标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制,使用有限的字体样式。

图表可以表示图表中不同类型的数据,并提高图表的整体可用性。

图表可用于:

在图表中使用图标时,建议使用通用可识别符号,尤其是在表示操作或状态时,例如:保存、下载、完成、错误和危险。

一个或多个坐标轴显示数据的比例和范围,例如,折线图沿水平和垂直坐标轴显示一系列值。

1)柱状图(条形图)基线

柱状图(条形图)应从为零的基线(y轴上的起始值)开始,从不为零的基线开始可能导致数据被错误地理解。

2)坐标轴标签

标签的设计应体现图表中最重要的数据,应根据需要使用标签,并在UI中保持一致性,他们的出现不应该妨碍查看图表。

3)文字方向

为便于阅读,文本标签应水平放置在图表上。

文字标签不应该:

图例和注释描述了图表的信息,注释应突出显示数据点,数据异常值和任何值得注意的内容。

1—注释,2.—图例。

在PC端,建议在图表下方放置图例。在移动端,将图例放在图表上方,以便在交互过程中保持可见。

1)标签和图例

在简单图表中,可以使用直接标签。在密集的图表(或更大的图表组的一部分)中,可以用图例。

在称为数据大屏的UI界面中,数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。

数据大屏设计:数据大屏的目的应在其布局,样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据,它的设计应该适合它的使用方式。

数据大屏应该:

应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板,考虑了以下用户问题:

分析类数据大屏让用户能够研究多组数据并发现趋势。通常,这些数据大屏包含能够深入洞察数据的复杂图表。

用例包括:

分析类数据大屏示例:

分析类数据大屏显示气候数据

操作类数据大屏旨在回答一组预设的问题。

操作类数据大屏示例:

操作类数据大屏显示设备存储指标

演示类数据大屏是为感兴趣的主题提供的展示视图。

这些数据大屏通常包括一些小图表或数据卡片,用动态标题描述每个图表的趋势和见解。

THE END
1.华为图标显示在哪设置华为图标设置在哪华为图标设置在:【华为图标显示在哪设置 华为图标设置在哪】 打开设置,点击桌面和壁纸 , 桌面设置 , 可打开或关闭锁定布局 , 自动对齐,循环滑动按钮 。 华为技术有限公司总部位于中国广东省深圳市龙岗区坂田华为基地,华为于1987年在中国深圳正式注册成立 。2007年合同销售额160亿美元,其中海外销售额115亿美元,并且是...http://m.husay.cn/a/202411/5334669.html
2.css和js改变鼠标的图标形状和样式的方法网页元素上显示系统自带的鼠标样式可能不是我们想要的鼠标样式,经常需要改变鼠标的样式。 css指定鼠标样式 div { cursor: pointer; } 自定义鼠标样式 div { cursor:url(url图片地址) } js改变鼠标样式 document.getElementById(id).style.cursor='pointer'; ...http://tv.speechb.com/detail/30725e67d5a742a2a3316b86f7a55b09
3.如何选择合适的图标?来看这份图标类型和风格汇总六、大尺寸图标样式 大尺寸图标在界面中使用较少,更多用于产品标识或品牌宣传。 1.线性图标 1.1标准线性图标 在设计任何图标前,都可以先创建一个线性轮廓,确保形状看起来足够美观后再添加颜色。 关键点: 这类图标最容易制作。 避免出现轮廓羽化。 线条粗细要一致。 https://www.niaogebiji.com/article-33800-1.html
4....hover)选中(单击,pressed)状态下更换图标样式sgggr三种图标样式(从左往右分别是normal,hover,pressed): 先上效果图: (1)第一种方法:在样式表中设置border-image(在网上看到有人使用background-image的,不推荐,因为那样的话图标大小是不会自动缩放的,有兴趣的可以试一下)。 QPushButton *button1 =newQPushButton(this); ...https://www.cnblogs.com/sggggr/p/12673026.html
1.PPT中设置图标的三步指南(ppt怎么设置的图标)将鼠标放在这些控制点上,当鼠标变成双向箭头时,按住鼠标左键并拖动,即可调整图标的大小。 要移动图标,只需点击并拖动图标到幻灯片上的所需位置。 第三步:设置图标样式 选中图标后,可以在菜单栏中找到“格式”选项(如果您的PPT版本不支持,可能需要通过右键点击图标并选择“设置形状格式”)。 https://ppt.zaixianjisuan.com/fangan/pptzhong-she-zhi-tu-biao-de-san-bu-zhi-nan.html
2.WPSOffice中的图形设计工具使用介绍首先,WPS Office中的图形设计工具主要包括“插入形状”、“文本框”、“图像”、“SmartArt”以及“图表”等功能。这些工具不仅能够丰富文档的视觉效果,还能够增强内容的表达力,使其更加生动有趣。 ### 插入形状 在WPS Office中,用户可以通过“插入”菜单中的“形状”功能,选择常见的几何形状(如矩形、圆形、箭头等...https://www.yihemeixiao.com/news/3665.html
3.可爱小图标设计与应用指南.gif格式:虽然主要被用于动画制作,但其透明背景和较小的文件大小使其适用于某些特定的图标设计场合。 .svg格式:是一种基于XML的矢量图形格式,兼容性强,支持CSS样式,适用于Web设计和响应式图标。 在选择图标格式时,考虑最终用途、图像质量和存储需求是至关重要的。不同格式有着各自的优势和局限,选择合适格式能够确保...https://blog.csdn.net/weixin_36431814/article/details/144124458
4.office2010样式怎样选选word2010中,“样式”按钮在哪个工具栏上1、首先,打开Office2010中的Word文档,点击位于左上角的“插入”按钮。接着,在弹出的菜单中选择“形状”选项,打开形状列表。这里提供了多种形状供用户选择,点击任意一个形状并确认,即可在文档中插入图形。在插入图形后,可以通过点击图形右下角的箭头,打开样式选项,对图形进行详细的设计和调整。 https://www.915go.com/bangong/15410.html
5.从文件图标到个性化图片(打造独一无二的桌面体验,让文件图标焕发...在电脑使用中,我们每天都要面对各种各样的文件和文件夹,而它们的图标却往往统无聊。想象一下,如果我们能够将这些文件图标改成我们喜欢的、个性化的图片,岂不是会让我们的桌面变得更加独特和有趣?本文将为你介绍如何实现这一目标。 为什么要定制文件图标? https://www.2petclub.cn/post/9338.html
6.设置图标的视觉特征win11问题win7win10问题设置图标在用户界面中扮演着重要角色,帮助用户快速找到系统设置选项。 1、设置图标的视觉特征 设置图标通过线性、面性等风格,展现出独特的视觉魅力和识别度。 2、设置图标的形状与样式 设置图标样式多样,包括线性、面性、双色线面等,适应不同平台和功能需求。 https://www.shangyouw.cn/win11%E9%97%AE%E9%A2%98/arc363771.html
7.模板窝4、选中最上面的第一个矩形,右键鼠标设置图形格式,在右侧的设置图形格式窗口中切换到填充设置,在填充中选择图片或纹理填充,然后点击图片将一个logo填充到第一个矩形上;其他的矩形也是同样的操作,依次将ogo图片填充到对应的11个矩形中。 以上就是ppt排版logo图标的教程,希望大家喜欢。https://www.moban110.com/article/0t4svpf97121
8.androidstudio怎么设置按键形状在本文中,我们介绍了三种设置按键形状的方式:使用自定义背景、使用按钮样式和使用矢量图标。通过这些方式,可以根据需求来设置按钮的形状。无论选择哪种方式,都需要注意保持按钮的可点击性和可访问性。希望本文对你在Android Studio中设置按键形状有所帮助。 https://blog.51cto.com/u_16213317/8961634
9.圆形状样式图标矢量圆形状样式图标矢量艺术插画图片下载摄图网为设计师提供大量图片素材和摄影照片:圆形状样式图标矢量圆形状样式图标矢量艺术图片,偶像,圆,圆圈,标志,模板,现代的,矢量,艺术,风格等,你现在浏览的正版图片编号304361944,搜索图片就来摄图网!https://699pic.com/tupian-304361944.html
10.如何在.NET电子表格应用程序中创建流程图腾讯云开发者社区此步骤介绍如何应用样式主题以及如何将自定义样式应用于形状。用户可以使用“形状格式”选项卡的“形状样式”部分自定义形状的背景颜色和轮廓颜色。 对于本例,流程图形状和连接器的样式如下: 7.分组流程图形状 对流程图形状进行分组可确保所有相关元素保持在一起并保持其预期布局,从而降低意外修改的风险。Spread 的设计...https://cloud.tencent.com/developer/article/2343574
11.WPS如何改变图片形状呢?wps改变图片形状的操作步骤摘要:WPS无论是在生活中还是工作中都需要用的一种最常用的办公软件,接下来小编就来给大家详细助解WPS如何改变图片形状呢?wps改变图片形状的操作步骤,我们一起来瞧一瞧,看一看吧! 操作步骤如下: 1、在计算机桌面的Wps演示图标上双击鼠标左键,将其打开运行。如图所示; 2、在打开的Wps文稿窗口,插入图片,并将图片复制...https://www.hqew.com/tech/news/1791551.html
12.形状选择工具—KritaManual5.2.0文档几何属性是形状选择工具的的第一个标签页。你可以在里面查看和微调形状的左上角 X/Y 坐标 (左边一组数值框) 和形状的宽度和高度 (右边一组数值框)。点击最右边的锁定图标,形状的宽高比将被锁定。 等比例缩放样式 勾选:在缩放时,形状的描边将与形状本身保持比例,一同缩放。 不勾选:在缩放时,形状的描边将保持...https://docs.krita.org/zh_CN/reference_manual/tools/shape_selection.html
13.办公自动化实验实验指导书5)“页面设置”:B5纸、页眉、页脚=0、整表在页面的“水平”方向“居中” 6)加表格线、数据对齐方式设置步骤 (A)加表格线:仅选中有数据的区域,单击“格线”图标---选“田”字按钮 (B)进入“单元格格式”设置窗口,在“文本对齐方式”的两个方向均选“居中” 7)...https://emtc.dlou.edu.cn/2013/1222/c2449a22096/page.psp
14.基础组件Button按钮按钮形状 图标按钮 按钮尺寸 块级元素 页面导航 自定义颜色 API Props Events Slots 类型定义 主题定制 样式变量 Button 按钮 介绍 按钮用于触发一个操作,如提交表单。引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp } from 'vue'; import { Button } from 'vant'; const ap...https://www.bookstack.cn/read/vant-3.6.4-zh/536e04f8892def29.md
15.如何在PowerPoint中插入形状和图标?3. 使用颜色和样式来突出显示形状和图标,以增强视觉效果并吸引观众的注意力。 4. 如果您不确定要使用哪种形状或图标,可以查看PowerPoint的内置模板或在网上搜索一些流行的选项。 5. 如果您经常需要插入形状和图标,可以考虑使用快捷键以提高效率。例如,在Windows上,可以使用Ctrl + Shift + S来快速插入形状。 https://www.sousou.com/bk/53872.html
16.UnrealEngine4游戏开发指南第1章是本书的基础。该章介绍如何和在哪里下载Unreal Engine,了解源代码版本和启动器版本之间的区别。Unreal Engine安装(如果是源代码版本,则是编译)之后,展示Unreal Engine的用户界面。该章还讲述浏览器、BSP以及如何更改游戏的启动画面和图标。 第2章讲述在启动并运行Unreal Engine后如何将自定义的FBX资源导入Unreal...https://www.epubit.com/bookDetails?id=UB6c8733ad1529e
17.如何使用图标集在Visio 专业版 中,图标集是一种可在将数据导入绘图中的形状后应用的数据图形。 以下示例显示了这三个形状中每一个形状的“On”跟踪字段的图标集: 显示条件或“25%,50%,75% 已完成...” 图标集适用于显示条件。例如,绿色图标表示处于良好状态的形状,黄色图标表示部分良好状态,红灯表示关注点。 https://support.microsoft.com/zh-cn/office/85a2863a-90cf-4a19-acb8-a3216cac4b7a
18.ppt制作小图标PPT中自带了一个丰富的图标库,我们可以通过直接插入这些图标来快速制作各种小图标,而不需要自己重新绘制形状或者寻找素材。 具体操作方法如下: 1. 点击“插入”-“图标”,打开图标库窗口。 2. 在图标库中选择需要插入的小图标类型和样式,点击“插入”按钮。 http://www.chinauci.cn/news/brandnews/42150.html
19.在Photoshop中使用渐变随机:随机创建符合上述设置的渐变。选择该按钮,直至找到所需的设置为止 要创建具有指定设置的预设渐变,请在“名称”文本框中输入名称,然后单击“新建”。 如何使用渐变预设 全面了解如何应用 Photoshop 中新的和改进的“预设”面板。从色板到图案,从渐变到样式和形状,Julieanne Kost 探索了所有预设。 Julieanne Kost...https://helpx.adobe.com/cn/photoshop/using/gradients.chromeless.html