【设计篇】36 # 如何理解可视化设计原则?

news2024/11/27 19:36:24

说明

【跟月影学可视化】学习笔记。

可视化设计的四个基本原则

基本原则一:简单清晰原则

我们可以看下面一张图:国际茶叶委员会制作的全球茶叶消费排行榜图表,目的是想说明喝茶最多的不是中国人

在这里插入图片描述

我们可以用更简单的直方图方式去表现

在这里插入图片描述

基本原则二:视觉一致性原则

互补色方案

互补色:指在饱和度和明度相同的情况下,色相值相差 180 度的一对颜色。因为互补色色相差距最大,所以它们并列时会产生强烈的视觉对比效果,这样能够起到强调差异的作用。

在突出数据之间的差异时,可以用互补色来增强对比效果。

下面就是使用了红、绿互补色的配色方案

在这里插入图片描述

同色系方案

同色系就是利用不同深浅的同色系颜色来表示不同的数据。

下图就采用同色系配色方案:看起来比较柔和,能减少视觉疲劳

在这里插入图片描述

基本原则三:信息聚焦原则

天级预报的图表:显示了温度、天气、风向、风速、浪高这些变量,每个变量都采用了不同的形式来展示,区分度很好,内容非常清晰也很聚焦。

在这里插入图片描述

这里还用了两种方式表示同一个元素:

  • 用不同的 y 轴高度来表示风速
  • 用红色、黄色、绿色这三种颜色箭头标记不同的风速等级

如果要强调用风速这个变量,我们可以考虑用颜色和高度同时表示风速,从而突出该信息,达到信息聚焦的效果

在这里插入图片描述

基本原则四:高可访问性原则

色彩系统可访问性

可视化的无障碍设计,主要体现在色彩系统上。因为用户可能包含视觉障碍人群,设计的颜色在我们看来已经足够有差异性,但不太友好的配色,以及到不同设备的呈现可能会给视觉障碍人士带来困扰。

在这里插入图片描述

可以利用色彩检查工具来辅助配色,在 Photoshop 中,选择视图 -> 校样设置 -> 红色盲型 / 绿色盲型之后,就能看到设计的图表颜色在视觉障碍人群眼中的效果。

在这里插入图片描述

另外也可以使用色盲在线模拟器

在这里插入图片描述

文字提示信息可访问性

如果图表库没有考虑文字缩放后的布局呈现,就会导致文字叠在一起之类的,使之完全不可阅读

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/143042.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c++11 标准模板(STL)(std::deque)(九)

定义于头文件 <deque> std::deque 修改器 移除末元素 std::deque<T,Allocator>::pop_back void pop_back(); 移除容器的最末元素。 在空容器上调用 pop_back 是未定义的。 指向被擦除元素的迭代器和引用被非法化。尾后迭代器是否被非法化是未指定的。其他迭代…

YOLOv5-common.py文件

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 目录一、任务说明二、导入相关包和配置1.基本组件1.1 autopad1.2 Conv1.3 Focus1.4 Bottleneck1.5 BottleneckCSP1.6 C31.7 SPP1.8 Concat1.…

C3P0数据库连接池详解 及连接JDBC步骤

目录 一、基本定义 二、使用C3P0&#xff08;数据库连接池&#xff09;的必要性 1.JDBC传统模式开发存在的主要问题 三、数据库连接池的详细说明 四、使用连接池的明显优势 1.资源的高效利用 2.更快的系统反应速度 3.减少了资源独占的风险 4.统一的连接管理&#xff0c…

SQL优化实战-0001:SQL查找是否存在,不要再使用count

文章目录1.需求分析与普遍SQL写法2.问题分析3.优化方案4.总结5.补充5.1 还有什么时候可以使用LIMIT 15.2 什么时候没必要使用LIMIT 11.需求分析与普遍SQL写法 业务代码中&#xff0c;需要根据一个或多个条件&#xff0c;查询是否存在记录而不关心有多少条记录。普遍的SQL及代码…

大战谷歌!微软Bing引入ChatGPT;羊了个羊高·薪招纳技术人才;Debian彻底移除Python2;GitHub今日热榜 | ShowMeAI资讯日报

&#x1f440;日报合辑 | &#x1f3a1;AI应用与工具大全 | &#x1f514;公众号资料下载 | &#x1f369;韩信子 &#x1f3a1; 『微软Bing』将引入 ChatGPT&#xff0c;与 Google 一场大战难免 微软计划2023年3月底之前推出 Bing 搜索引擎的新版本&#xff0c;使用 ChatGPT …

Lua中self 、自索引及其面向对象应用代码示例

一、Lua表的self标识 在lua中&#xff0c;表拥有一个标识&#xff1a;self。self类似于c中的this指针和python中的self。在lua中&#xff0c;提供了冒号操作符来隐藏这个参数&#xff0c;例如&#xff1a; t1 {id 1, name "panda",addr "beijing" }-…

快过年了,看我使用python制作一个灯笼的小程序

哈喽呀&#xff0c;最近一直在写一些关于新年的的python小东西&#xff0c;今天也不例外&#xff0c;我把那些都放到了一个专辑里面了&#xff0c;感兴趣的朋友们可以去看看一下哦 目录 前言 画外轮廓 画灯笼的提线 画灯笼盖 画一下各种柱子 小小的外壳来一下 其他的小装饰…

Python打包(问题记录,待解决)

引言 文章用于测试在Python3.8的版本&#xff0c;打包Obspy地震包&#xff0c;最后集成到PyQt5上。 部署或冻结应用程序是 Python 项目的重要组成部分&#xff0c; 这意味着捆绑所有必需的资源&#xff0c;以便应用程序找到它需要的一切 能够在客户端计算机上运行。 但是&…

基于Python Unet的医学影像分割系统源码,含皮肤病的数据及皮肤病分割的模型,用户输入图像,模型可以自动分割去皮肤病的区域

手把手教你用Unet做医学图像分割 我们用Unet来做医学图像分割。我们将会以皮肤病的数据作为示范&#xff0c;训练一个皮肤病分割的模型出来&#xff0c;用户输入图像&#xff0c;模型可以自动分割去皮肤病的区域和正常的区域。废话不多说&#xff0c;先上效果&#xff0c;左侧…

JAVA语言基础语法——JVM虚拟机默认处理异常的方式,try...catch捕获异常

1.JVM默认的处理方式 a&#xff0e;把异常的名称&#xff0c;异常原因及异常出现的位置等信息输出在了控制台 运行结果如下&#xff1a; b&#xff0e;程序停止执行&#xff0c;异常下面的代码不会再执行了 2.try...catch捕获异常&#xff08;自己处理&#xff0c;捕获异常&am…

数学建模-相关性分析(Matlab)

注意&#xff1a;代码文件仅供参考&#xff0c;一定不要直接用于自己的数模论文中 国赛对于论文的查重要求非常严格&#xff0c;代码雷同也算作抄袭 如何修改代码避免查重的方法&#xff1a;https://www.bilibili.com/video/av59423231 //清风数学建模 一、基础知识 1.皮尔逊…

Qt之Json操作demo

一、JSON简介&#xff1a; JSON(JavaScript Object Notation)是一种轻量级的数据交换格式&#xff0c;使用JavaScript语法来描述数据对象&#xff0c;但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程语言&#xff0c;被广泛用于Internet上的数据交换格式。…

多线程高级(线程状态、线程池、volatile、原子性、并发工具)

1.线程池 1.1 线程状态介绍 当线程被创建并启动以后&#xff0c;它既不是一启动就进入了执行状态&#xff0c;也不是一直处于执行状态。线程对象在不同的时期有不同的状态。那么Java中的线程存在哪几种状态呢&#xff1f;Java中的线程 状态被定义在了java.lang.Thread.State…

Java程序:jstack

前言 如果有一天&#xff0c;你的Java程序长时间停顿&#xff0c;也许是它病了&#xff0c;需要用jstack拍个片子分析分析&#xff0c;才能诊断具体什么病症&#xff0c;是死锁综合征&#xff0c;还是死循环等其他病症&#xff0c;本文我们一起来学习jstack命令~ jstack 的功能…

阳康后的第一篇博客,先来几道恶心二进制编程题

目录 一、统计二进制中1的个数 二、打印整数二进制的奇数位和偶数位 三、两个整数二进制位不同个数 一、统计二进制中1的个数 这是一道牛客网OJ题&#xff0c;感兴趣的话可以先做一遍再看解析哦 -> 牛客网的OJ链接 注意&#xff1a;上面的牛客网是接口型&#xff0c;不需…

Vagrant管理已存在的虚拟机

起因 某天打开VirtualBox后&#xff0c;发现之前创建的虚拟机都没了&#xff0c;后将虚拟机从本地磁盘又重新导入&#xff0c;但是发现使用 vagrant up 会创建新的虚拟机&#xff0c;而我要用vagrant管理已存在的虚拟机&#xff0c;就是 vagrant up的时候&#xff0c;我需要启动…

MySQL数据库:常用数据类型

一、整形和浮点型 数据类型大小说明对应C类型bit(n)n指定比特位数&#xff0c;默认1位比特位数&#xff0c;n范围1-64&#xff1b;存储数值范围2-2^n-1char[]tinyint1字节signed charsmallint2字节short intint4字节intbigint8字节long long intfloat(m,d)4字节单精度&#xf…

【前端】CSS基础

一、CSS基础 1.1CSS的介绍 CSS&#xff1a;层叠样式表&#xff08;Cascading style sheets&#xff09; CSS作用是什么&#xff1f;&#xff1f; 1.2CSS语法规则 写在哪里&#xff1f; CSS是style标签中&#xff0c;style标签一般写在head标签里面&#xff0c;title标签下…

真的强,又一个开源项目,杀疯了

最近&#xff0c;AI大模型连续火爆出圈&#xff0c;人工智能生成模型&#xff08;AIGC&#xff09;的热度尚未褪去&#xff0c;聊天机器人ChatGPT便引发全网热议&#xff0c;两周吸引百万用户。还有卷趴一半程序员的AlphaCode&#xff0c;生成全新蛋白质的ESM2等&#xff0c;不…

TypeScript,终于在实际项目中用到了泛型。

终于在实际项目中用到了泛型 里程碑式的纪录&#xff0c;终于不是anyScript了&#xff0c;代码写完只有一个any 应用 项目中组件化了这么一个东西 功能描述&#xff1a; 传进去一个数组&#xff0c;有个名&#xff0c;有个key&#xff0c;渲染成上图的div样式点击之后&#…