当UI遇上了PPT和图表设计,会发生什么?

在日常工作中,经常要用PPT来做工作汇报,或者使用Excel做数据报告,经常会涉及到配色这个难题,人是一个视觉动物,在什么情况下用什么颜色最佳?这个问题其实就是UI设计的范畴了,这里就总结下将UI设计原理怎么应用到我们日常工作中,比如Excel做表,PPT呈现,培养自己的色彩感知能力,久而久之就会对色彩很敏感了。既然说到色彩,当然是我们生活的大自然最美好不过了,多去感受大自然的美还是有助于我们对美的感知。


七色彩虹

一、六种配色理论方案

方案1. 补色搭配(A complementary combination)

互补(或称对比)色是指伊登色环上相对位置上的两种颜色,搭配在一起,可以打造活力四射的强烈视觉效果,特别是在颜色饱和度最大的情况下。


A complementary combination
方案2. 三角对立配色(The triad )

采用等边三角上的三种颜色进行搭配,可以在维持色彩协调的同时,制造强烈的对比效果。即便采用淡色或者不饱和色,这种搭配也可以营造出生气盎然的效果。


The triad
方案3. 类似色搭配(An analogous combination)

选择色环上相邻的2到5种(最好是2到3种)颜色进行搭配,可以打造出一种平和而又可爱的印象。下图为5种类似色组合的一个例子。


An analogous combination
方案4. 分裂补色搭配(The split complementary combination)

是补色搭配的变种。选定某主色之后,选择色环上与它的补色相邻位置上的两种颜色与之搭配。此种搭配既有对比,又不失和谐。如果你对补色搭配没有自信的时候,不凡用此方案代替。


The split complementary combination
方案5. 四元组配色(The tetrad )

选定主色及其补色之后,第三种颜色可选择色换上与主色相隔一个位置的颜色,最后一个颜色选择第三种颜色的补色,在色环上正好形成一个矩形。举例见下图。


The tetrad
方案6. 正方形配色(The square)

利用色环上四等分位置上的颜色进行搭配。这种方案,色调各不相同但又互补,可以营造出一种生动活泼又好玩的效果。举例如下图。


The square
各种颜色的搭配推荐

这里推荐几个网站,基本上可以解决各种图表设计和PPT配色。
一、 LOL Colors


这个萌萌的网站配色低调而且简单实用,从网站上的颜色搭配也能知道某些颜色组合起来可能会有意想不到的效果。将鼠标光标移动到颜色上方就会立刻显示色码。你可以选取喜欢的颜色后直接复制代码使用到设计中。可以说非常便捷了。

二、在线配色神器(网站点击标题即可)

1、 Color Claim


Color Claim它是一个设计大师自建的配色网站,每个都可以直接拿来取用。打开网站都是看起来很普通的图片,其实都是从大神个人多年来的设计中提取出的配色,凝结着配色智慧的结晶。

虽然看起来都很简单,颜色不超过三种,一共102款,但每个都有其鲜明的风格特色,我们总能从中找到适合自己的配色风格。

2、Material Design Colors

在这个网站可以找到19种颜色的14种渐变色的十六进制颜色码。

3、Colourco

Colourco

这个网站有多重选择,就是根据上面说的色谱原理来设计的,
单色Monochrome:表示一种颜色不同色阶选择
单色渐变

单色和深灰色:单色和深灰色搭配在一起的配色方案

单色和深灰色

单色和浅灰色:单色和浅灰色搭配在一起的配色方案

单色和浅灰色

类比:类似上面的类似色配色方案

类比

互补色
类比与补色

三角对立
三角对立

四元组配色
四元组配色

简单介绍一下在这个网站里可以通过鼠标滑动来改变颜色:
色调:鼠标左右移动或「Ctrl+ ← + →」
亮度:鼠标上下移动或「Ctrl + ↑ + ↓」
饱和度:Ctrl+ Shift + ↑ + ↓
鼠标单击锁定颜色,点击“垃圾桶”图标删除颜色

2、RGB颜色值与十六进制颜色码转换工具

但是在Office办公软件里只有RGB颜色值,所以就需要有一个工具将他们转化,请看下面这个网站


3、当你看到一种颜色,但是不知道它的RGB颜色值,又该怎么办?

其实我们日常截图的时候就会出现这个RGB值。试了下钉钉的截图没有用,但是使用了搜狗输入法里面的截图工具,来看看怎么获取。



只要把鼠标放到你想获取的颜色范围里,就会出现(255,102,0)这个就是颜色的RGB颜色值。


搜狗获取RGB颜色值

三、理论应用

话说这么多理论和工具到了实际运用还是不会,这个就需要多实践才可以运用自如,这种专业性配色本来就是UI的技术活,我们只要懂的基本运用就好。小编也是对数据可视化感兴趣,所以把这些总结下来,接下来我也会出几篇文章怎么将这些技术运用到Excel制图和PPT配色。

1、这里介绍一个需要用到上面的东西:阿里巴巴矢量图标

相信大家一定在PPT里面经常会用到一些矢量图标:


这些图标是没有颜色的,需要你自己配色,然后下载下来

仪表盘

这里介绍几个其他的矢量图标网站:超实用的矢量图标库

一份优秀的PPT都是由很多小的组件构成的,文子,图标,图表,各种需要展现出来的,但其实最核心的是PPT的逻辑思维,这点也是最需要学习的。

2、来看看几个Excel图表设计

更多内容,后面还需继续更新怎么运用这些到Excel图表和PPT设计。
参考文字链接:
1、https://brightside.me/article/the-ultimate-color-combinations-cheat-sheet-92405/
2、收藏这7个在线配色神器,再也不愁配色灵感了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269