-
-
辰哥 管理员
发表于2018-9-5 10:59
今天聊点带色的话题
图表配色方案大全
让你做的图表
骚过巴黎时装周场外任何一位时髦精
时髦精释义:流行的东西成了精(并没什么卵用)
虽说配色是设计师的专业范畴,而且对于专业的设计师来说,配色也是一门终生的学问。
但是!!你也不希望你做出来的图表弥漫着一股……
......此处省略N+1张辣眼睛图表
俗话说,不会配色的数据分析师不是好员工。
好看的图表配色方案应该是不刺眼的,颜色过渡自然,
不会使用大量的禁忌色,让人能觉得更加舒适和谐。
下面辰哥将带着大家一起来学习图表配色
此篇文章得到了我们UI设计红姐帮忙
以及zeus小姐姐1块钱的赞助
闪瞎的霓虹色
图:霓虹色图表
闪亮的霓虹色会让人看起来好像能让图表显得更加突出,乍一看说不定还能让你觉得很潮、非常流行。但是这些颜色往往并不会让领导的眼睛觉得舒服,反而会让人觉得 “闪瞎了”,眼睛疲劳后,根本无法聚焦到图表的关键数据上。
使用这种配色的图表数据难于阅读,不好识别,和暗色调的背景搭配的时候,这种晃眼的感觉尤其明显。而如果用霓虹色作为背景的话,这个图表几乎没法看,因为除了霓虹色之外的数据根本没法看清楚。
震颤效应配色
图:震颤色图表
图表如若使用一些高饱和度的色彩搭配,会产生一种“震颤效应”,会让你觉得两种色彩之间会产生模糊、震颤或者发出光晕的视觉效果。
这些高饱和度配色的图表极具侵略性,让人觉得不舒服。极少的数据报表会尝试这样的颜色搭配。当然,如果你的领导喜欢这种让人晕眩的图表配色,请务必将辰哥的这篇文章假装不经意地分享给他。
浅色+浅色
图:浅色图表示例
浅色+浅色的图表也是非常常见的错误搭配。领导可能厌倦了你天天发土味图表给他,他提出想要看起来小清新一点。于是你的图表变成了这样让人觉得乏味的“小清新”。
这些“小清新”图表,浅色的图形和浅色数字或者背景叠加在一起,让图表中的数据几乎没法看清楚,最终缺失可读性,让领导忽视你在工作中的重要指标和关键数据。
亮色+亮色or深色+深色
图:深色图表示例
就像浅色+浅色的图表一样,亮色+亮色和深色+深色的搭配,都因为饱和度接近而造成的图表数据缺失辨识度。
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/79054d4af73948c0bec26651c6949a8c.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/b31fe75af5404142a4c42e5222255589.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/a68e0683c27b4b62906949b69d9127f2.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/c711693b07fa4569b18e5a826431b941.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/4d2836e3ddc04767a27ce29844ca5285.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/172ee29e2e3d481bbab200bdd58b4d40.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/e6284909af3447f089607b04d2c61ff4.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/20b384330adc44c09c0e3554504f37b8.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/a4e7690b726d4981842a6c5f4558f363.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/8c671670da704f8ca5f59457afd54dad.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/ed87661b05094e22b09c7d3af4af182f.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/90959127e9ce42ccaa354d57f4ae61a0.png)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/321258f9ddf948128e2a1a607cb8b459.png)
![](static/image/common/none.gif)
![](http://5b0988e595225.cdn.sohucs.com/images/20180905/6d6a286a7c1443fca0720e77d74d9138.png)