色彩的运用课件.ppt

1.1-5 对比色配色 主导的对比配色需要精准地控制 色彩搭配和面积，其中主导色会 带动页面气氛，产生激烈的心理 感受。 观点：红蓝色反应不同交互和信 息的可操作性，针对系统操作和 用户操作的区分。 31 1.1-6 中性色配色 用一些中性的色彩作为基调搭配， 常应用在信息量大的网站，突出内 容，不会受不必要的色彩干扰。这 种过配色比较通用，非常经典。 观点：利用大面积中性色作为主 导色，品牌色在这里起到画龙点 睛的作用，用于一些需要重点突 出的场景，强调交互的状态等。 32 1.1-7 多色搭配下的主导 主色和其他搭配色之间 的关系会更丰富，可能 有类似色、中差色、对 比色等搭配方式，但其 中某种色彩会占主导。 观点：谷歌设置了四种品 牌色，通过主次、合理的 比例应用在界面中，并通 过组控件不同的交互状态 合理分配功能任务。 33 二、色调调和而形成的配色方式 2.1 有主导色调配色 这是由同一色调构成的统一性配色。深 色调和暗色调等类似色调搭配也可以形 成同样的配色效果。即使出现多种色相， 只要保持色调一致，画面也能呈现整体 统一性。根据色彩的情感，不同的调子 会给人不同的感受： ? 2.1-1 清澈的色调 ? 2.1-2 阴暗的色调 ? 2.1-3 明亮色调 ? 2.1-4 深暗色调 ? 2.1-5 雅白色调 34 2.1-1 清澈色调 清澈调子使页面非常和谐， 即使是不同色相，相同色调 的配色能让页面保持较高的 协调度。 观点：互补的色相搭配在一起， 通过统一色调的手法，可以缓 和色彩之间的对比效果。 35 2.1-2 阴暗色调 阴暗的色调渲染场景氛围，通过不 同色相的色彩变化丰富信息分类， 降低色彩饱和度使各色块协调并融 入场景，白色和明亮的青绿色作为 信息载体呈现。 观点：多色彩经过统一色调处理， 区域间非常协调，也不影响整体 页面阴暗气氛表现。 36 2.1-3 明亮色调 明亮的颜色活泼清晰，热 闹的气氛和醒目的卡通形 像叙述着一场庆典，但铺 满高纯度的色彩，过于刺 激，不适宜长时间游览。 观点：饱和度与纯度特性 明显的搭配，在达到视觉 冲击力的同时，可适当采 用对比色或降低明度等方 法调和视觉表现。 37 2.1-4 深暗色调 页面以深暗偏灰色调为主，不同的色彩搭配， 像在叙述着不同的故事，白色文字的排版， 整个页面显得厚重精致，小区域微渐变增加 版面质感。 观点：以低暗色调构成整体画面氛围， 小面积明亮部分不会影响整体感觉。 38 2.1-5 雅白色调 柔和的调子使页面显得明快温暖，就算 色彩很多也不会造成视觉负重。页面的 同色调搭配，颜色作为不同模块的信息 分类，不抢主体的重点，还能衬托不同 类型载体的内容信息。 观点：同色调不同色彩的模块， 就算承载着不同的信息内容也能 表现很和谐。 39 2.2 同色调配色 这是由同一或类似色调中的色相变化 构成的配色类型，与主导色调配色中 的属于同类技法。区别在于色调分布 平均，没有过深或过浅的模块，色调 范围更为严格。 观点：综合运用的情况，整体界 面是有主导色调，在布局例如重 点图标等是同色调配色灵活运用。 40 2.3 同色深浅搭配 这是由同一色相的色调差构成的 配色类型，属于单一色彩配色的 一种。 与主导色调配色中的同色 系配色属于同类技法。从理论上 来讲，在同一色相下的色调不存 在色相差异，而是通过不同的色 调阶层搭配形成，可以理解为色 调配色的一种。 观点：同色深浅配色有着极 高的统一性，但有点枯燥。 41 三、对比配色而形成的配色方式 一般说来，颜色从纯度，明度，色相 上进行对比，明暗对比，深浅对比， 冷暖对比等。颜色的对比很容易激发 视觉上的冲击。颜色的对比原则从另 一个层面上讲，也是一种衬托。为了 让设计更好的表达主题，人们往往需 要用很多相关元素去衬托主题。 ? 3.1 色相对比 ? 3.1-1 双色对比 ? 3.1-2 三色对比 ? 3.1-3 多色对比 ? 3.2 纯度对比 ? 3.3 明度对比 42 ？？ 配 色 那 点 事 主讲：赵新 1 目录 contents 色彩 概念 ? 色相环 ? 色彩三要素 ? 色彩冷暖 ? 色彩关系 色彩 搭配 色彩 情感 1 2 3 4 经验 分享 ? 红色 ? 橙色 ? 黄色 ? 绿色 ? 蓝色 ? 紫色 ? 黑色 ? 白色 ? 色相差配色 ? 色调调和配色 ? 对比配色方式 ? 配色选择 ? 给颜色加上特效 ? 颜色的黄金法则 ? 勿忘黑色 ? 自然中提取颜色 2 色彩的概念 1 ? 色相环 ? 色彩三要素 ? 色彩冷暖 ? 色彩关系 3 色相环——构成 色相环由 12 种基本的颜色组成。首先包含的是色彩三原色，即红、黄、蓝。原色混 合产生了二次色，