色彩的运用ppt课件.ppt

配色那点事 主讲 赵新 1 目录contents 色彩概念 色相环色彩三要素色彩冷暖色彩关系 色彩搭配 色彩情感 1 2 3 4 经验分享 红色橙色黄色绿色蓝色紫色黑色白色 色相差配色色调调和配色对比配色方式 配色选择给颜色加上特效颜色的黄金法则勿忘黑色自然中提取颜色 2 色彩的概念 1 色相环色彩三要素色彩冷暖色彩关系 3 色相环 构成 色相环由12种基本的颜色组成 首先包含的是色彩三原色 即红 黄 蓝 原色混合产生了二次色 用二次色和原色混合 产生了三次色 4 色相环 三原色 这里所说的三原色是指美术三原色 RYB 红 黄 蓝 原色是色相环中所有颜色的 父母 在色相环中 只有这三种颜色不是由其他颜色混合而成 三原色在色环中的位置是平均分布的 如图所示 1 光的三原色RGB 红绿蓝 2 美术三原色RYB 红黄蓝 3 印刷三原色CMY 青洋红黄 红蓝黄 5 色相环 二次色 二次色所处的位置是位于两种三原色一半的地方 每一种二次色都是由离它最近的两种原色等量混合而成的颜色 如图所示 橙绿紫 6 色相环 三次色 三次色即是由原色和二次色混合而成的颜色 在色相环中处于原色和二次色之间 如图所示 黄橙红橙红紫蓝紫蓝绿黄绿 7 色彩三要素 是指色彩的相貌 用来区分不同的颜色 饱和度是指色彩的鲜艳程度 也成色彩的纯度 是指色彩的明暗程度 即深浅 色彩越接近黑色明度越低 越接近白色明度越高 壹贰叁 明度 饱和度 色相 8 色彩三要素 PS拾色器中右上角的颜色饱和度最高 向左 饱和度降低 明度增加 向下 饱和度和明度同时降低 向左下方 饱和度和明度也同时降低 9 色彩冷暖 右上角的颜色饱和度最高 向左 饱和度降低 明度增加 向下 饱和度和明度同时降低 向左下方 饱和度和明度也同时降低 10 色彩关系 色环上直线相对的两种颜色称为互补色 互补色形成强烈的对比效果 传达出活力 能量 兴奋等意义 壹 互补色 11 色彩关系 指在24色相环上相距120度到180度之间的两种颜色 称为对比色 贰 对比色 12 色彩关系 相邻的颜色我们称为类比色 类比色都拥有共同的颜色 这种颜色搭配产生了一种令人悦目 低对比度的和谐美感 这种搭配让你轻易产生不错的视觉效果 叁 类比色 13 色彩的情感 2 各种色彩都有独特的性格 它们与人类的色彩生理 心理体验相联系 从而使客观存在的色彩仿佛有了复杂的性格 14 色彩的情感 选择颜色之前 一定要先综合考量对象的特性 例如 科技类的印象中都是充满神秘的 可以考虑黑色 蓝色是比较容易接受的网站风格 再如 生态环保类大家可能首先想到的是绿色 那就不能选择出入太大的颜色作为主色调 选择对的颜色搭配或许是成功的一半 它能抓住用户对网站的第一感觉 传递信任感 让用户更容易记住 15 红色纯度高 刺激性大 注目性高 常作为最有力的宣传色 讯号色 竞争与进攻都可以用红色体现 由于红色刺激性强 很容易使人疲劳 烦躁不安 危险 邪恶 愤怒 鲜红色表示生命 热情 活力 喜庆 警告 能量 力量 热闹 领导地位 革命 温暖 勇气 快乐 红橙色浓而不透明 具有纯厚 温暖感等 16 一般火的温度较高 传热较大时 呈现出的不是红色 而是橙色 所以橙色较红色更暖 更鲜艳 是所有颜色中感觉最暖的色 是人们普遍喜爱的色彩 橙色在空气中的穿透力仅次于红色 注目性也性当高 具有明快的特点 因而橙色也被用为讯号色 标志色和宣传色 它同样容易造成视觉疲劳 17 黄色是阳光的颜色 黄色光的光感最强 明度最高 给人以光明 乐观 迅速 活泼 轻快的感觉 象征着光明 辉煌 灿烂和充满希望 发展 注意 法律 教育 黄色除了有积极意义外 有时也代表轻薄 软弱 背叛等 黄色物体在黄色光照下常有失色的现象 植物呈灰黄色 是衰败腐烂的征兆 人面呈灰黄色 被看成病态 天空昏黄 意味着黑暗降临 18 某些情况下它是一种友好的色彩 表示健康与活力 绿色通常用在农业领域 卫生环保等领域 但在很多人内心深处 它常被比作成嫉妒 卑鄙 植物的绿 不但给视觉以休息 还给人以清新的感觉 有益于镇定 疗养 休息与健康 黄绿 嫩绿 淡绿 给人以大自然活跃的青春感 如浓绿有盛夏印象 表现成熟 健康 灰绿 土绿 褐茶色意味着秋季 反映了收获 灰蓝绿 灰土绿 灰白绿 灰褐绿等色有冬季印象 反映了衰老和终结 19 如果说红色是积极的 热烈的 那么蓝色则是消极的 静的 内省的 含蓄的 暗示着智力 给人以冷静 智慧 理智 深远 永恒 信任 安全的感觉 在商业美术中 蓝与白一样不能引起食欲 但常用来表示寒冷 成为冷冻食品的标志色 蓝色可作食与色的陪衬色 20 无论是自然界还是社会生活中 紫色都较为稀少 因此紫色有神秘 高贵 优雅 华丽等感觉优雅 浪漫 高贵 神秘 魅力 自傲 轻率神奇 神秘 灵性 潜意识 创造力 尊严 皇室 悲哀 残酷 自大 自负 紫是表示虔诚的颜色 明亮的紫色 表示理解 优雅 美好的情绪 其暗色阴郁 暗示迷信或潜伏灾难 容易造成心理上的忧郁 痛苦和不安 21 无光对人们的心理影响有两种 一是积极类 黑夜使人得到休息 安静 深思 黑色有坚持 准备 严肃 庄重 坚毅之感 二是消极类 例如漆黑的地方 会让人失去方向 具有阴森 恐怖 忧伤 消极 沉睡等印象 黑色的心理特性 黑夜 葬仪 黑暗 罪恶 坚硬 沉默 绝望 悲哀 严肃 死亡 恐怖 刚正 铁面无私 忠诚 忠毅 粗莽等 22 白色为不含纯度的色 除因明度高而感觉冷外基本为中性色 明视度及注目度都相当高 由于白色为全色相 能满足视觉的生理要求 与其他色彩混合均能取得很好的效果 白色的心理特性 洁白 明快 清白 纯粹 真理 朴素 神圣 正义感 光明 失败等 23 色彩搭配 3 色相差而形成的配色方式色调调和而形成的配色方式对比配色而形成的配色方式 24 25 一 色相差而形成的配色方式 1 1有主导色彩配色这是由一种色相构成的统一性配色 即由某一种色相支配 统一画面的配色 如果不是同一种色相 色环上相邻的类似色也可以形成相近的配色效果 1 1 1同色系主导1 1 2邻近色主导1 1 3类似色主导1 1 4中差色主导1 1 5对比色主导1 1 6中性色主导1 1 7多色搭配下的主导 26 1 1 1同色系配色 同色系配色是指主色和辅色都在统一色相上 这种配色方法往往会给人页面很一致化的感受 观点 颜色差分割页面层次和模块 并代表不同功能任务属性 27 1 1 2邻近色配色 近邻色配色方法比较常见 搭配比同色系稍微丰富 色相柔和过渡看起来也很和谐 观点 基于品牌色的邻近色运用 灵活运用到各类控件中 28 1 1 3类似色配色 类似色配色也是常用的配色方法 对比不强给人色感平静 调和的感觉 观点 基于品牌色的类似色运用 有主次地用到页面各类控件和主体内容中 29 中差色对比相对突出 色彩对比明快 容易呈现饱和度高的色彩 观点 利用色彩对比突出按钮任务优先级 增加页面气氛 1 1 4中差色配色 30 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 3 1 1双色对比 色彩间对比视觉冲击强烈 容易吸引用户注意 使用时经常大范围搭配 观点 不管是整体对比还是局部对比 对比色给人强烈的视觉冲击 结合色彩心理学对品牌传达效果更佳 43 3 1 2三色对比 三色对比色相上更为丰富 通过加强色调重点突出某一种颜色 且在色彩面积更为讲究 观点 三色对比中西瓜红作为强调色限定在小面积展现非常关键 面积大小直接影响画面平衡感 44 3 1 3多色对比 多色对比给人丰富饱满的感觉 色彩搭配协调会使页面会非常精致 模块感强烈 观点 色彩色相对比 色彩面积对比 只要保持一定的比例关系 页面也能整整有序 45 3 2纯度对比 相对与色相对比 纯度差对比 对比色彩的选择非常多 设计应用范围广泛 可用于一些突出品牌 营销类的场景 观点 运用对比重要的是对比例的把握 面积 构图 节奏 颜色 位置等一切可以发生变化的元素 形成视觉的强烈冲突 46 3 3明度对比 明度对比接近生活实际反映 通过环境远近 日照角度等明暗关系 设计趋于真实 观点 明度对比使页面显得更单纯 统一 而高低明度差可产生距离关系 47 经验分享 4 配色选择给颜色加上特效颜色的黄金法则勿忘黑色自然中提取颜色 48 一些关于颜色的经验和规律 网站的整体格调 版面效果等是由颜色决定的 也是用户产生视觉共鸣的第一要素 色彩搭配虽然是一种抽象的东西 但它对于网页设计来说并不是那么困难 相信大多数用户对某种网站的主题和颜色的印象已经形成了一种定向 搭配起来容易得多 即使没有足够的理论知识和经验 甚至是色感 只要遵循以下几个方面 就可在网页上运用自如 49 配色选择 用户对颜色的认知绝大多数是类似的 如果太过花哨不仅不会带给用户视觉的享受 还会干扰视觉 网页在显眼的颜色方面配色最好不要超过三种 以免造成页面视觉体验的混乱 对于主色 只要选择色相差异明显的 在对比色 临近色 冷暖色调之间能够达到互补就可以了 或者在自己选择好的主色中参考类似网站案例 就可以简单完成配色 50 给颜色加上特效 颜色特效包括阴影 扭曲渐变 高光 线条映衬等 注重颜色的细节往往还是配色的成功之道 颜色种类尽管单调 但在特效上运用得当 也能彰显网页艺术特性 51 色彩的黄金法则6 3 1 颜色的搭配需要体现对比 这个对比从何而来 正式6 3 1法则让它成为现实 一般来说 一个合格的设计需要有60 的主色 30 的辅助色 加上10 的点缀色 所谓画龙点睛 这10 就是激活画面 提升设计层次的 大家可能都有感受 看到一个设计作品 我们首先大体有一个颜色感受 他大概是什么色系的 通俗一点讲 它是暖色系的 还是冷色系的 这个色系是我们说的60 的主色调 它可能被用来渲染画面气氛 另外的30 是为了画面的平衡 是为了衬托主色调而生 至于那10 刚才也有阐述 设计不能是死板的 有时需要一点点灵动 52 勿忘黑色 一般人对黑色有一定的恐惧感 因为黑色是没有色相的 会认为黑色会让画面变得死气沉沉 恰恰相反 有时候用