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

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

说明

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




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


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

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

6925506521004fe19c827f9d541da529.png


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

e50280f5ceed4a91a43fa572655b8711.png


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


互补色方案


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

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

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


7c52cec5e7dd45dbb1598806b288c5cc.png


同色系方案

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

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


7131b3e1ee3b4f868d62a0591592e528.png


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

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


76c99c4bff1541c6bb6a93df9a194c4b.png


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

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

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


339435aa2ced4cdfb2c42022be772ff2.png


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



色彩系统可访问性

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

4587f775a135444e9b2007ff6719535d.png


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

image.png



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



文字提示信息可访问性

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


992e0d6738de49978d24518413c7f409.png








目录
相关文章
|
7月前
|
芯片 Python
前道设计
前道设计
51 3
|
XML 存储 安全
深入理解HttpSecurity的设计
介绍了基于配置文件的使用方式以及实现细节,如下:
109 0
|
5月前
|
uml
系统分析与设计问题之什么是完全复用
系统分析与设计问题之什么是完全复用
|
6月前
|
SQL 存储 缓存
第四章 逻辑架构(1)
第四章 逻辑架构
41 1
|
6月前
|
SQL 存储 缓存
第四章 逻辑架构(2)
第四章 逻辑架构
36 1
|
数据可视化
【设计篇】35 # 如何让可视化设计更加清晰?
【设计篇】35 # 如何让可视化设计更加清晰?
78 0
【设计篇】35 # 如何让可视化设计更加清晰?
|
设计模式 架构师 Java
聊聊简单设计
聊聊简单设计
137 0
|
算法 BI
贪心策略设计并解决会场安排问题
贪心策略设计并解决会场安排问题
335 3
贪心策略设计并解决会场安排问题
|
设计模式 关系型数据库 API
常用设计原则分析
对常用设计原则进行升入分析,探讨
166 0
|
存储 消息中间件 算法
服务设计要解决的问题
 前几天和同事聊天,同事说:   “业务的服务(相对于我们基础架构这边的底层技术)在技术上就需要解决三个问题:分布式、通信和存储。”   我回忆之前做业务的时光,觉得确实,再加上一个“服务治理”就差不多了。想想“服务设计要解决的问题”这个话题可以把之前静儿写的很多文章做一个归纳概括。今天做一个总结。
服务设计要解决的问题
下一篇
DataWorks