色彩策画方法.pdf

色彩设计方法 为什么要整理设计色彩方法 ？ 在色彩设计应用中 ，我们对颜色不同程度的理解 ，影响到设计页面的表现 ，熟练 运用色彩搭配 ， 设计时岂不事半功倍。一张优秀的设计作品 ，它的色彩搭配必定和谐得体 ，令人赏心悦目 ，反思我 们在设计过程中 ，怎样的色彩搭配更容易达到设计目的 ，又是什么影响了我们的配色思维呢 ？ 以下几点常会影响色彩搭配思维 ： 1.仅关注色彩表象 2.搭配方法不够系统 3.色彩与构成掌握不到位 首先 ，我们简单理解一下色相和色调概念 ： 谈谈一些基础配色方法 接下来我们按三个大类的配色方法 ，结合一些案例 ，分析色彩在页面中的应用手法。 (一)色相差而形成的配色方式 1.有主导色彩配色 这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色 ，如果不是同一种色相 ，色环上相邻的类似色也可以形成相近的配色效果。当然 ，也有一些色相差距较大的做法 ，比如撞 色的对比 ，或者有无色彩的对比 ，但这里先讲述带主导色的配色案例。 根据主色与辅色之间的色相差不同 ，可以分为以下各种类型 ： 1- 1 同色系主导 1-2 邻近色主导 1-3 类似色主导 1-4 中差色主导 1-5 对比色主导 1-6 中性色主导 1-7 多色搭配下的主导 … 1- 1 同色系配色 同色系配色是指主色和辅色都在统一色相上 ，这种配色方法往往会给人页面很一致化的感受。 tw it t er的案例 ：ht t ps://tw it t er.co m/ 整体蓝色设计带来统一印象 ，颜色的深浅分别承载不同类型的内容信息 ，比如信息内容模块 ，白色 底代表用户内容 ，浅蓝色底代表回复内容 ，更深一点的蓝色底代表可回复操作 ，颜色主导着信息 层次 ，也保持了tw it t er的品牌形象。 观点 ：颜色差分割页面层次和模块 ，并代表不同功能任务属性。 1-2 邻近色配色 近邻色配色方法比较常见 ，搭配比同色系稍微丰富 ，色相柔和过渡看起来也很和谐。 A LIDP的案例 ：ht t ps:// lidp.o rg/ 纯度高的色彩 ，基本用于组控件和文本标题颜色 ，各控件采用邻近色使页面不那么单调 ，再把色彩 饱和度降低用于不同背景色和模块划分。 观点 ：基于品牌色的邻近色运用 ，灵活运用到各类控件中。 1-3 类似色配色 类似色配色也是常用的配色方法 ，对比不强给人色感平静、调和的感觉。 BENMA PT 的案例 红黄双色主导页面 ，色彩基本用于不同组控件表现 ，红色用于导航控件、按钮和图标 ，同时也作辅 助元素的主色。利用偏橙的黄色代替品牌色 ，用于内容标签和背景搭配。 观点 ：基于品牌色的类似色运用 ，有主次 用到页面各类控件和主体内容中。 1-4 中差色配色 中差色对比相对突出 ，色彩对比明快 ，容易呈现饱和度高的色彩。 f ceboo k的案例 ：ht t p://www.f ceboo k.co m/ 颜色深浅营造空间感 ，也辅助了内容模块层次之分 ，统一的深蓝色系运用 ，传播品牌形象。中间色 绿色按钮起到丰富页面色彩的作用 ，同时也突出绿色按钮任务层级为最高。深蓝色吊顶导航打通整 站路径 ，并有引导用户向下阅读之意。 观点 ：利用色彩对比突出按钮任务优先级 ，增加页面气氛。 1-5 对比色配色 主导的对比配色需要精准 控制色彩搭配和面积 ，其中主导色会带动页面气氛 ，产生激烈的心理 感受。 Yo uT ube的案例 ：ht t ps://www.yo ut ube.co m/ 红色的热闹体现内容的丰富多彩 ，品牌红色赋予组控件色彩和可操作任务 ，贯穿整个站点的可操作 提示 ，又能体现品牌形象。红色多代表导航指引和类目分类 ，蓝色代表登录按钮、默认用户头像和 标题 ，展示用户所产生的内容信息。 观点 ：红蓝色反应不同交互和信息的可操作性 ，针对系统操作和用户操作的区分。 1-6 中性色配色 用一些中性的色彩作为基调搭配 ，常应用在信息量大的网站 ，突出内容 ，不会受不必要的色彩干扰 。这种过配色比较通用 ，非常经典。 Bech n的案例 ：ht t ps://www.beh / 黑色突出网站导航和内容模块的区分 ，品牌蓝色主要用于可点击的操作控件 ，包括用户名称、内容 标题。相较于大片使用品牌色的手法 ，更能突出内容和信息 ，适合以内容为王的通用化、平台类 站点。 观点 ：利用大面积中性色作为主导色 ，品牌色在这里起到画龙点睛的作用 ，用于一些需要重点突出 的场景 ，强调交互的状态等。 1-7 多色搭配下 主导 主色和其他搭配色之间的关系会更丰富 ，