资源预览内容
第1页 / 共19页
第2页 / 共19页
第3页 / 共19页
第4页 / 共19页
第5页 / 共19页
第6页 / 共19页
第7页 / 共19页
第8页 / 共19页
第9页 / 共19页
第10页 / 共19页
亲,该文档总共19页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
第 3 章 色彩搭配在网站中的应用 色彩本身具 有非常微妙 的表现力, 它们可以产 生出一种刺 激人们大脑 中对某种形 式 存在 的 物 体 的 共 鸣 , 展 现 出 对 待 生 活 的 新 的 看 法 与 态 度 。 合 理 使 用 色 彩 扩 大 了 设 计 者创作的想像空间,赋予了创作新的不定性。 3.1 网页配色 网页的色彩搭配往往是令初学者感到头疼的问题, 尤其是那些完全没有美术基础的人。对 于 一 个 商 业 网 站 而 言 , 到 底 用 什 么 样 的 色 彩 进 行 搭 配 , 才 能 既 好 看 又 合 理 呢 ? 本节将从最基础的知识开始,帮助读者掌握色彩的使用。 3.1.1 色彩的基本知识 1从色谱开始 一条连续彩虹中的 “可视 光 ”分解成从蓝到红的色谱,如图 3-1 所示。 图 3-1 色谱 在色谱中,线性罗列了所有的基本颜色,也是所有颜色的根本。 2色环 在从红到紫 的光谱中, 等间的选择 两种或两种 以上的颜色 ,相邻的两 个色相互混 合 又得 到 另 一 种 特 殊 的 颜 色 。 如 此 周 而 复 始 , 从 而 构 成 一 个 首 尾 相 交 的 环 , 被 称 为 孟 赛尔色相环,即 色环 。从本 质上 讲,色 环就 是色谱 可以 看到的 颜色 所形成 的线 性连续 环。 如图 3-2所示就是一个色环。 图 3-2 色环 3三原色的概念 如同大家所 知道的,三 原色是能够 按照一些数 量规定合成 其他任何一 种颜色的基 色 。 所 有 的 颜 色 其 实 都 是 由 三 原 色 按 照 不 同 的 比 例 混 合 而 来 。 色 彩 的 三 原 色 为 红 、 黄 、蓝,而色光的三原色为红、绿、蓝。 下面将介绍几个关于色彩的重要概念。 z 色相:指颜色的属性,是红色、绿色还是蓝色。如图 3-3 所示,分别为同一张图片的三种色相。 图 3-3 同一张图片不同色相 z 纯度:也称 作饱和度, 是指在同等 明度的条件 下,颜色从 灰色到纯色 的变化。如图 3-4 所示为 同一张图片,饱和度分别为- 100、 0、 +100 时的 状态。 图 3-4 同一张图片不同纯度 z 明度:从黑到白中间增加 9 个均匀过渡的灰度阶段,被称为明度,也叫明度尺。如图 3-5 所示 为同一张图片明度分别为- 50、 0、 +50 时的状态 。 36 第3章 色彩搭配在网站中的应用 Part 1基础篇Part 2实例篇Part 3技术篇图 3-5 同一张图片不同明度 3.1.2 常见的配色方案 1近似色 近似色是已 给出的颜色 之外的任何 一种颜色。 如果从橙色 开始,它的 两种近似色 应 该选择红和黄。如图 3-6 所 示,为近似色在色环上的位置。 用近似色的颜色主题可以实现色彩的融洽与融合。如图 3-7 所示,列 出了几种近似色的搭配方案。 图 3-6 近似色 图 3-7 使用了近似色的配色方案 如图 3-8 所 示,为使用了近似色搭配方式的商业网站。蓝色系的搭配,给人以清凉、专业的感觉。 图 3-8 使用了近似色的商业网站 37 2补充色 补充色也叫对比色,是指在色环中的直接位置相对的颜色,如图 3-9 所示 。 如果想要使网站中的色彩强烈突出、富有冲击力的话,可选择对比色。 假如正在组合一幅柳丁的图片,用蓝色背景将使柳丁更加突出。如图 3-10 所示。 图 3-9 补充色 图 3-10 蓝色背景下的柳丁 如图 3-11 所 示 , 为使用了补充色的网站。 大块的橙色和蓝色用到一起, 具有强烈的冲击力,达到了视觉上的震撼效果。 图 3-11 使用了补充色的网页 3分离补色 分离补色可以由 23 种颜色组成。在色环上选择一种颜色,它的补色就在色环的另一面。 可以使用补色旁边的一种或多种颜色。 这样的一组颜色叫做分离补色, 如图 3-12 所示 。 分离补色的 搭配可以起 到类似补充 色的强烈对 比作用,但 有近似色的 缓冲,可以 使 页面效果更加柔和。 如图 3-13 所示, 为 使用了分离补色搭配方式的网站。 这个网站给人的感觉是色彩鲜明,但是又不会过于突出。 38 第3章 色彩搭配在网站中的应用 Part 1基础篇Part 2实例篇Part 3技术篇图 3-12 分离补色 图 3-13 使用了分离补色的网站 4组色 组色是色环上距离相等的任意 3 种 颜色。如图 3-14 所示为色 环上的一组组色。 图 3-14 色环上的一组组色 因为 3 种颜色形成了对比关系,所以组色被用作一个色彩主题时,会对浏览者造成紧张的情绪。一般在商业网站中,不采用组色的搭配。 3.1.3 配色的选择 配色是浏览者访问主页时目光无法回避的设计要素。 当浏览者看到网站标题的一瞬间,已 经 决 定 了 配 色 的 效 果 不 可 轻 视 。 在 不 经 意 间 , 浏 览 者 对 网 站 的 印 象 就 被 固 定 下 来,就好比 初 次 拜 访 别 人 家 , 和 主 人 谈 话 之 前 , 看 到 客 厅 的 装 饰 风 格 , 便 可 以 大 致 推 测 出 主人的性格。 因此,根据 网站的整体 风格来选定 网站的配色 十分重要。 当网站的内 容、标题和 配 色一 致 时 , 就 能 发 挥 最 大 的 效 用 。 欢 快 的 内 容 与 明 快 的 配 色 相 叠 加 , 可 以 传 递 出 发 自内心的喜悦。相反,和网站内容不相配的颜色,会引起混乱、产生破坏性的效果。 如图 3-15 所 示,为 Dior 国际网站的香水产品宣传页,左图使用了金色作为网页的主色 调 , 显 得 高 贵 、 典 雅 , 烘 托 出 了 产 品 的 高 格 调 和 高 品 味 。 右 图 使 用 了 蓝 色 的 色 调,虽然也 显 示 出 了 页 面 的 和 谐 , 但 无 法 表 现 出 产 品 的 内 涵 , 因 此 让 人 感 觉 有 些 离 题 , 冲 淡了网页的主题。 39 图 3-15 根据网站内容确定配色 本节将通过介绍几种颜色搭配方案的效果,帮助用户掌握利用颜色定位网站的技巧。 1色调的选择 色调包括鲜 艳的色调、 柔和的色调 、亮色调、 暗色调等等 ,是配色的 各项因素中 最 有决定权的一种。例如如图 3-16 所示 ,是鲜艳的色调。 图 3-16 鲜艳的色调 如果网站采用的配色是在这种色调的范围内, 那么无论在色相和对比量上下多少功夫,都无法表现出稳重的印象。因此选择合适的色调非常重要。 2色调的分析 ( 1)鲜艳的 色调 所谓鲜艳的 色调,即不 与黑、白、 灰进行混合 的,只有纯 色的色调。 这种色调的 选 用会给人以强有力的、 生机勃勃的年轻人的感觉。 如图 3-17 所示便是一个使用了鲜艳色调的网站。大片的黄色进行搭配,给人热情洋溢的感觉。打开网页,欢快的气息扑面而来。 ( 2)深色调 将鲜艳的色 调稍微加一 点黑色,便 成为了深色 调。深色调 传达了有力 、强烈的男 性 形象。 如图 3-18 所示, 便是 一个使用了深色调的网站。 用了红色的搭配, 但是由于红色中混合了黑色,便给人以更加沉稳的感觉。 图 3-17 使用了鲜艳色调的网站 图 3-18 使用了深色调的网站 40 第3章 色彩搭配在网站中的应用 ( 3)亮色调 将鲜艳的色 调稍微加一 点白色,便 成了亮色调 。与鲜艳色 调相比,亮 色调略显得 温 柔一点,是大多数人的喜爱。如图 3-19 所示,便是 一个使用了亮色调的网站。 ( 4)淡色调 Part 1基础篇Part 2实例篇Part 3技术篇将亮色调再 加一点白色 ,便成了淡 色调。淡淡 的颜色,可 以给人清新 的感觉,令 人 联想 起 婴 儿 的 肌 肤 , 给 人 以 最 温 柔 的 感 觉 , 远 离 商 业 的 形 象 。 不 少 个 人 网 站 采 用 的 就是淡色调, 如图 3-20 所示, 便是 一个使用了淡色调的网站。 淡淡的蓝色, 给人以清新的感觉, 搭配网站简单的布局,营造了一个轻松的氛围。 图 3-19 使用了亮色调的网站 图 3-20 使用了淡色调的网站 ( 5)浑浊色 调 将淡色调稍 微加一点灰 ,便成了浑 浊色调,产 生了明亮但 不会过于鲜 艳的感觉, 塑 造了稳定的都市形象。如图 3-21 所示 ,便是一个使用了浑浊色调的网站。 同样是使用了蓝色,但是由于给淡色调中混合了灰色,给人以更加稳定的观感。 ( 6)中间色 调 给亮色调加一点黑, 就构成了中间色调, 可以给人最沉稳的成人印象。 如图 3-22 所示,便是一个使用了中间色调的网站。 图 3-21 使用了浑浊色调的网站 图 3-22 使用了中间色调的网站 这是一个典型的商业网站,亮色调的蓝色混合黑色的使用,塑造了沉稳的公司形象。 41 ( 7)暗色调 将亮色调稍 微加一点灰 色,就构成 了暗色调。 暗色调给人 的感觉不仅 仅是鲜艳色 调 、亮 色 调 和 淡 色 调 的 那 种 单 纯 而 明 快 的 气 氛 , 更 表 达 了 一 种 沉 稳 而 安 静 的 、 素 雅 的 气氛。如图 3-23 所示 ,为使用了暗色调的网站。 图 3-23 使用了暗色调的网站 这个网站也是使用蓝色作为主色相,但暗色调的使用使得整个网站给人安宁的感觉。 3色相的选择 在前面介绍 色彩的基本 知识时,已 经介绍了色 相的概念。 用红、绿、 蓝这样的名 称 来区 别 颜 色 , 其 实 这 种 区 别 就 是 色 相 的 区 别 。 根 据 不 同 颜 色 在 色 环 上 的 位 置 关 系 , 便可以进行配色的变化。 通常在制作 商业网站的 时候,选用 色彩都希望 传达一种稳 重、安定的 印象。在这 种 情况下,多数采用的就是同系色或同类色。如图 3-24 所示为色 环上的同类色。 如图 3-25 所 示为使用了同类色配色的网站。 图 3-24 色环上的同类色 图 3-25 使用了同类色的网站 虽然整个网 站使用的都 是冷色调, 但由于控制 住了颜色的 混合及明度 对比,所以 并 没有给人过于冷淡的感觉。 当使用一种单色, 然后增加或降低亮度时, 产生的不同颜色就是同系色。 如图 3-26 所示为同系色。 42 第3章 色彩搭配在网站中的应用 图 3-26 同系色 如图 3-27 所 示,为使用了同系色的网站。 Part 1基础篇Part 2实例篇Part 3技术篇图 3-27 使用了同系色的网站 绿色虽然象 征着快乐与 希望,但由 于整个网站 采用了同系 色,因此在 快乐中也传 达 出沉稳的印象。 4不同色相的分析 不同的色相 ,会向用户 传达不同的 信息。因此 色相的选择 对于表达公 司的形象也 有 至关 重 要 的 作 用 。 色 相 按 照 色 系 分 , 可 分 为 暖 色 和 冷 色 。 下 面 将 分 别 介 绍 这 两 种 色 系的不同效果。 ( 1)暖色 暖色由红色 调组成。比 如红色、橙 色和黄色。 它们给选择 的颜色赋予 温暖、舒适 和 活力, 也产生了一种色彩向浏览者显示或移动, 并从页面中突出出来的可视化效果。 如图 3-28所示,为色环上的暖色系。 如果公司希 望展现给客 户的是一种 温暖、温馨 的形象,那 么可以考虑 选择暖色制 作 公司的网站。如图 3-29 所 示,便是一个使用了暖色的网站
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号