说明

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

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

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

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

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

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

互补色方案

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

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

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

同色系方案

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

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

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

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

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

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

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

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

色彩系统可访问性

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

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

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

文字提示信息可访问性

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

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

  1. .NET Core实战项目之CMS 第八章 设计篇-内容管理极简设计全过程

    写在前面 上一篇文章.NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程中我带着大家进行了权限部分的极简设计,也仅仅是一个基本的权限设计.不过你完全可以基于这套权限系统设计你的更 ...

  2. .NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程

    写在前面 这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解 ...

  3. 阿里巴巴设计公开课《数据可视化设计在行业中的实践与应用》-阿里云数字可视化大屏经验分享

    摘要 (1)如何应对行业数据可视化大屏项目中的增量需求 数据时间性 数据空间性 (2)如何应对行业数据可视化大屏项目中的存量需求 数据字段-服务于具体的功能-组成业务场景 应对行业数据可视化大屏项目中 ...

  4. 通用权限管理设计篇(二)——数据库设计

    让我们接着来进行数据库的设计.在数据库建模时,对于N对N的关系,一般需要加入一个关联表来表示关联的两者的关系.初步估计一下,本系统至少需要十张表,分别为:权限表.用户表.角色表.组表.用户权限关联表. ...

  5. 大屏数据可视化设计指南!

    基础概念 1. 什么是数据可视化 把相对复杂.抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用 ...

  6. .NET Core实战项目之CMS 第九章 设计篇-白话架构设计

    前面两篇文章给大家介绍了我们实战的CMS系统的数据库设计,源码也已经上传到服务器上了.今天我们就好聊聊架构设计,在开始之前先给大家分享一下这几天我一直在听的<从零开始学架构>里面关于架构设 ...

  7. 浅谈可视化设计-数据时代的“美味烹饪师”(下)

    目录: 1. 什么是大屏数据可视化 2. 设计流程介绍 3. 结合情感打造二维设计美感 4. 构建空间感&二维与三维的融合 5. 小结 结合情感打造二维设计美感 上篇我们讲到了<可视化设 ...

  8. .NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计

    这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计.不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如 ...

  9. 直播:全能项目经理 - 设计篇(2015-2-16)

    课程简介: 这次为你分享的是设计篇,主题是:做高性价比设计! 软件设计是为软件服务的,要服从项目的商业目标. 1)一味追求所谓的优雅设计,项目可能会死的很惨.客户购买的是软件而不是你的设计.如果你在客 ...

最新文章

  1. oracle异地迁移,数据泵实现Oracle数据迁移到异地库
  2. 在Linux下如何安装配置SVN服务
  3. VBA 的编写与执行
  4. php$pat,PHP的Session管理框架 patSession | 码农软件 - 码农网
  5. 实验一基于 的词法分析实验_[源码和文档分享]基于JAVA实现的基于DFA的词法分析程序...
  6. boost::fusion::traits::tag_of用法的测试程序
  7. 在linux学习中遇到的问题
  8. auto_ptr解析
  9. java爬虫工具xpath提取,2020-07-16--爬虫数据提取--xpath
  10. thinkphp5 判断数据是否存在_ThinkPHP 5.1 中间件中判断要访问的操作是否存在
  11. 【转】js版的俄罗斯方块!!
  12. kafka key的作用_震惊了,原来这才是Kafka的“真面目”!
  13. Redis 2.8.9源码 - Redis中的字符串实现 sds
  14. Qt设置鼠标光标样式
  15. Serverless实战——2分钟,教你用Serverless每天给女朋友自动发土味情话
  16. 【IoT】BLE 广播的基础数据定义:广播名字类型和设备类型标志
  17. Android Studio4.0以上设置护眼背景色
  18. matlab如何仿真递推型dft算法,递推dft算法
  19. MYSQL补充SQL语句
  20. h5移动端调试工具vConsole

热门文章

  1. 6轴关节机械手仿真和控制QtQuick3D 和 CodeSys Robotics
  2. 2021PMP最全总结-五大过程
  3. 同步原语问题汇总--芒果TV进击面试
  4. UDS protocol - 周期报文 periodical message 多字节通信 multi-byte message
  5. pycharm无法安装加载插件、三方库解决办法
  6. step 7文字出现乱码/?
  7. Zigbee Light Link协议的五种Key
  8. 今天分享几个牛逼的网站,不知道你用过没?
  9. Qt记录:Qt编程遇C2001错误,提示“常量中有换行符”
  10. 在linux运行brook,linux命令----dmsetup