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

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

说明

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




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


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

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

6925506521004fe19c827f9d541da529.png


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

e50280f5ceed4a91a43fa572655b8711.png


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


互补色方案


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

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

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


7c52cec5e7dd45dbb1598806b288c5cc.png


同色系方案

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

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


7131b3e1ee3b4f868d62a0591592e528.png


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

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


76c99c4bff1541c6bb6a93df9a194c4b.png


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

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

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


339435aa2ced4cdfb2c42022be772ff2.png


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



色彩系统可访问性

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

4587f775a135444e9b2007ff6719535d.png


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

image.png



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



文字提示信息可访问性

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


992e0d6738de49978d24518413c7f409.png








目录
相关文章
|
4月前
|
存储 前端开发 容器
前端开发的设计思路【精炼】(含数据结构设计、组件设计)
前端开发的设计思路【精炼】(含数据结构设计、组件设计)
51 0
|
存储 缓存 搜索推荐
复杂系统设计原则与案例
## 一、复杂是软件的本质属性 ### 1.1 复杂是软件的本质属性 正如Brooks所言,软件复杂性是软件固有的属性,这种固有的复杂性主要由4个方面的原因造成的: - 问题域的复杂性 - 管理开发过程的复杂性 - 随处可变的灵活性 - 描绘离散系统行为的问题 上面每一个方面都有极大的挑战,以「问题域的复杂性」为例,现在我们的大型系统中,动不动就几十个应用,组合在一起就是一个复杂的系统,而每个
1449 4
复杂系统设计原则与案例
架构:第九章:架构设计(为什么要这么设计,解决了什么问题)
架构:第九章:架构设计(为什么要这么设计,解决了什么问题)
127 0
|
数据可视化
【设计篇】35 # 如何让可视化设计更加清晰?
【设计篇】35 # 如何让可视化设计更加清晰?
75 0
【设计篇】35 # 如何让可视化设计更加清晰?
|
设计模式 关系型数据库 API
常用设计原则分析
对常用设计原则进行升入分析,探讨
159 0
|
容器
框架设计思维符合语义即可使用,而不用关心底层的实现
框架设计思维符合语义即可使用,而不用关心底层的实现
226 0
框架设计思维符合语义即可使用,而不用关心底层的实现
|
架构师 NoSQL Java
架构之思-分析那些深入骨髓的设计原则
架构之思-分析那些深入骨髓的设计原则
架构之思-分析那些深入骨髓的设计原则
|
XML 数据格式
改善代码设计 —— 处理概括关系(Dealing with Generalization)
  系列博客       1. 改善代码设计 —— 优化函数的构成(Composing Methods)       2. 改善代码设计 —— 优化物件之间的特性(Moving Features Between Objects)       3.
975 0