当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （6） 色彩 > 色彩
这节课我们讲一下色彩设计
色彩是视觉设计中重要的元素
要用好色彩
首先需要了解一些关于色彩的
基础理论知识
色环是了解色彩的基本工具
它有12种颜色
首先是三原色红黄蓝
三原色之间等量混合
产生二次色
例如红黄混合成为橙色
蓝黄混合成为绿色
红蓝混合为紫色
相邻的两色混合产生三次色
这样就产生了12种颜色的色环
在任意两个180度范围内的颜色
都含有相同的颜色
距离越远
共同色就越少
越接近共同色就越多
把这12种颜色变亮和变暗
就形成从明到暗的序列
圆内是明色
外圆是暗色
黑色灰色和白色是五彩色
属于百搭的调和色
事实上我们肉眼能分辨的颜色更多
不过掌握了色环这个工具
就可以百变不离其宗
一通百通了
此外
冷色和暖色也是很重要的概念
由颜色的冷暖
还可以联想到四季的色彩
蓝绿色的冷色系
和红橙色的暖色系之外的颜色
是相对中性的颜色
下面我们讲一下色彩搭配的规律
先讲一下单色搭配
单色搭配最容易掌握
因为它只有明度的对比
没有色相的对比
搭配起来也简洁和谐
例如这是几张单色的练习
这个界面只用了一种颜色
通过明暗的变化构成界面的层次
整体简洁清爽
这是另一个单色的界面
它是用渐变的背景丰富了视觉层次
我们再来讲一下双色搭配
使用两种色彩也会有很好的效果
我们可以选用对比色
也可以用邻近色或叫类比色
对比色就是色环上直线相对的两个颜色
类比色呢是色环上邻近的颜色
邻近色因为含有相同的颜色
比较容易协调
比如这个界面
运用了红色和紫色这两个邻近色的渐变
用黑色和白色增加了层次感
画面的布局疏密有致
对比恰当
很有冲击力
这个例子也是双色界面
它用了绿色和紫色
这两种色在色环上距离远一些
但也是类比色
这个搭配既对比又调和
也是非常不错的设计
这个界面细节非常丰富
但是它也只用了两种颜色
不同程度的红色
和低纯度的黄色
有一种温馨浪漫的气氛
这个界面以绿色和橙色两色为主
在大面积的灰色调和下
十分的协调
如果使用对比色的时候需要注意
应该以一种颜色为主
另一个颜色为辅
要避免大面积的对比
可以通过降低颜色的饱和度
和明度的方法
来弱化对比产生协调感
这是一个运用对比色的双色配色练习
下面我们讲一下三色
如果是三色搭配会有什么规律呢
三色搭配有三种情况
一种是类比色搭配
第二种呢是选用正三角形方向的三色
也就是三原色配色法
第三种称为分裂补色法
下面分别举例介绍
我们先看看类比色的三色搭配案例
也就是用三种邻近的颜色进行搭配
这种情况一般比较容易调和
三色的比例呢也可以比较随意
再看第二种三原色配色法
三原色配色法
是选用正三角形方向的三个颜色
那这三个颜色分别含有红黄蓝
这三原色的成分
搭配起来比较活泼
比如这个界面就用了三原色配色
第三种是分裂补色搭配
分裂补色搭配
是用了锐角三角形顶点方向的三个颜色
这其中呢就包含了分散的互补色
这种情况呢一般都是要先选定一种颜色
作为主色
把互补色作为辅助色
这样效果会比较协调
而且呢由于补色的对比
也会颇为生动
比如说这个界面就运用了分裂补色
它分别是红色紫色和黄色这三色
其中紫色和黄色
是一对补色
背景呢是降低了纯度的红色和紫色
形成画面的明暗层次
其中红色是主色
在紫色图形上
点缀了少量低纯度的黄色
形成了一定的空间层次
并且突出了左上方的红色飞行器图案
画面显得非常协调
也很有活力
这个界面呢
采用了浓烈的红色渐变做背景
红色是主色
绿色是补色
再搭配少量的橙色
协调中又有一种活力
下面我们讲一下四色法
四色搭配的组合显得比较复杂
这种情况一般会包含两对补色
建议呢选择一种主色
再有一个相对活跃的颜色
其余的颜色作为辅助色
在纯度和明度等方面进行调和
比如这个界面运用了四色法
主色是紫色
红色为活跃色
蓝色和绿色为辅助色
色彩搭配很生动
这是一个四色练习稿
同样使用了紫色 红色 蓝色和绿色
不过为了适配图形
在色彩纯度方面进行了调整
从这个例子也可以了解
图形比色彩对画面的主导性更强一些
四色搭配
实际可以看作是三色搭配的延伸
色彩越多越需要控制用色的比例
在掌握了基本的配色后
你还可以尝试做出改变
设计出更新颖的色彩
例如这个界面
尽管也采用了四色法
但主色是蓝绿色
辅助色为黄色
其余小面积的色彩
还不拘一格的使用了玫红
绿色和蓝色等进行点缀
丰富了主视觉的层次
这个界面也是运用了四色法
不过这四种颜色
没有按照矩形工具做选择
更像是对三色法的扩展运用
半透明的色彩叠加在照片背景上
像是磨砂玻璃般
具有一种朦胧之美
整体协调细节丰富
有通透感 很吸引人
这个儿童游戏的网站界面
采用了七八种颜色
即使如此也不显得杂乱
诀窍就在于颜色的比例关系
黄色是主导色
其余颜色都是辅助色
用蓝色做导航控件非常醒目
但是又不会显得太冲突
整体用色非常活泼
娱乐感强
符合儿童游戏网站的定位
初学者可以多参考一些
现成的配色方案
网上可以找到很多配色色板
可以尝试把它们用在自己的设计中
反复练习和体会
比如我们可以在一幅画面上
反复练习各种不同的色彩关系
体会它们的特点
或者选择同一个配色方案
尝试变换色彩搭配的比例
再选择另外一种不同的配色方案试一试
尝试做一些改变
看看是什么效果
也可以从一些吸引你的图片上
寻找配色灵感
比如说这个色彩练习
就是借鉴了前面那一张摄影作品的色彩
可以继续做一些修改和调整
比如加一些纹理
让画面柔和一些
反复练习直到满意为止
另外呢建议大家
不断积累一些自己喜欢的配色方案
把它们进行分类整理
方便以后使用
关于色彩
还有很多知识需要学习
比如色彩的情感特征
红色代表权力热情和警告
蓝色代表科技冷静和严肃等等
要选择和界面设计目标相符合的颜色
比如说使用冷色调
来体现这个界面的科技感
使用中性的色调和低纯度的色彩
来体现自然和复古的风格
用明亮的暖色体现浪漫温馨的感觉
用暗色调营造神秘的氛围
另外色彩还和特定的文化有关系
比如说在中国一般用红色代表节庆
不同的民族对色彩的偏好和禁忌
也是不一样的
例如埃及人喜欢绿色白色
而禁忌黑色和蓝色
苏丹人呢认为黄色是美的标志等等
例如淘宝新年促销网页的色彩
就使用了中国红来渲染节日的气氛
另外呢通过色彩的阶梯变化
能产生韵律感
比如这张图即使颜色很多
但是这种有规律的渐变
也产生了和谐之美
关于色彩我们就讲到这里
总结一下
色彩是界面视觉设计的重要元素
但是色彩的选择
要考虑界面的定位布局和形式的需要
你需要了解一些色彩的基本原理
和搭配规律
多练习多体验
还可以从优秀配色作品中
学习和提炼色彩
另外建议养成积累色彩搭配方案的习惯
以便未来在设计中随时能够派上用场
谢谢大家
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
