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

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

说明

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




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


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

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

6925506521004fe19c827f9d541da529.png


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

e50280f5ceed4a91a43fa572655b8711.png


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


互补色方案


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

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

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


7c52cec5e7dd45dbb1598806b288c5cc.png


同色系方案

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

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


7131b3e1ee3b4f868d62a0591592e528.png


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

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


76c99c4bff1541c6bb6a93df9a194c4b.png


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

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

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


339435aa2ced4cdfb2c42022be772ff2.png


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



色彩系统可访问性

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

4587f775a135444e9b2007ff6719535d.png


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

image.png



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



文字提示信息可访问性

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


992e0d6738de49978d24518413c7f409.png








目录
相关文章
|
SQL 存储 分布式计算
阿里巴巴瓴羊基于 Flink 实时计算的优化和实践
本⽂整理⾃阿里云智能集团技术专家王柳焮⽼师在 Flink Forward Asia 2023 中平台建设专场的分享。
897 2
阿里巴巴瓴羊基于 Flink 实时计算的优化和实践
|
SQL 存储 关系型数据库
轻松入门MySQL:简明教程解析数据存储与管理(1)
轻松入门MySQL:简明教程解析数据存储与管理(1)
212 0
POST 请求出现异常!java.io.IOException: Server returned HTTP response code: 400 for URL
POST 请求出现异常!java.io.IOException: Server returned HTTP response code: 400 for URL
4667 0
|
9月前
|
人工智能 自然语言处理 测试技术
阿里云通义实验室自然语言处理方向负责人黄非:通义灵码2.0,迈入 Agentic AI
在通义灵码 2.0 发布会上,阿里云通义实验室自然语言处理方向负责人黄非分享了代码大模型的演进。过去一年来,随着大模型技术的发展,特别是智能体技术的深入应用,通义灵码也在智能体的基础上研发了针对于整个软件研发流程的不同任务的智能体,这里既包括单智能体,也包括多智能体合并框架,在这样的基础上我们研发了通义灵码2.0。
614 21
|
12月前
|
SQL 数据库
DBeaver执行sql文件
本文介绍了DBeaver这款支持多种数据库的通用数据库管理工具和SQL客户端,它具备查看数据库结构、执行SQL查询和脚本、浏览和导出数据等功能。
1432 1
DBeaver执行sql文件
|
前端开发 JavaScript UED
|
消息中间件 JSON Kafka
【十九】初学Kafka并实战整合SpringCloudStream进行使用
【十九】初学Kafka并实战整合SpringCloudStream进行使用
377 1
【十九】初学Kafka并实战整合SpringCloudStream进行使用
|
Kubernetes jenkins 持续交付
在K8S中,Jenkins如何集成K8S集群?
在K8S中,Jenkins如何集成K8S集群?
|
存储 人工智能 分布式计算
云计算的基本概念
云计算的基本概念
5022 0
|
运维 监控 JavaScript
【阿里云云原生专栏】Serverless架构下的应用部署与运维:阿里云Function Compute深度探索
【5月更文挑战第21天】阿里云Function Compute是事件驱动的无服务器计算服务,让用户无需关注基础设施,专注业务逻辑。本文详述了在FC上部署应用的步骤,包括创建函数、编写代码和部署,并介绍了运维功能:监控告警、日志管理、版本管理和授权管理,提供高效低成本的计算服务。
505 6