《配色方法_三种ui的选择配色方法》由会员分享，可在线阅读，更多相关《配色方法_三种ui的选择配色方法（10页珍藏版）》请在金锄头文库上搜索。
1、 1 / 10配色方法，三种 UI 的选择配色方法方 法 一 :色 轮 配 色色 轮 由 12 种 基 本 的 颜 色 组 成 。首 先 包 含 的 是 三 原 色 （ Primary colors ） ， 即 蓝 、 黄 、 红 。原 色 混 合 产 生 了 二 次 色 （ Secondary colors ） ， 用 二 次 色 混 合 ， 产 生 了 三 次 色 （ tertiary colors ） 。色 轮 有 五 个 同 心 环 组 成 ， 从 暗 到 亮 -暗 色 处 于 大 环 ， 明 色 处 于 小 环 ， 而 中 间 是 颜色 的 基 本 色 相 。根 据 颜 色 的 关
2、系 有 以 下 几 种 配 色 分 类a、 单 色 配 色单 色 搭 配 就 是 以 一 个 颜 色 为 主 ， 然 后 利 用 颜 色 的 深 浅 来 进 行 搭 配 的 方 法 ， 即 色轮 中 ， 一 种 色 相 的 暗 、 中 、 明 三 种 色 调 ， 单 一 颜 色 是 比 较 单 调 ， 所 以 利 用 颜 色 的 深 浅变 化 来 增 加 多 彩 性 。优 点 ： 画 面 统 一 ， 搭 配 时 相 对 简 单 而 且 一 般 都 不 会 给 人 难 看 的 感 觉 ， 一 般 不 会 给人 难 看 的 感 觉 。 2 / 10案 例 :b、 邻 近 色 配 色在 色 相 环
3、上 相 邻 的 色 彩 互 为 邻 近 色优 点 : 色 调 统 一 ,具 有 低 对 比 度 的 和 谐 美 感 。 这 种 颜 色 搭 配 产 生 了 一 种 令 人 悦 目 、 低对 比 度 的 和 谐 美 感 。 类 比 色 非 常 丰 富 ， 在 设 计 时 应 用 这 种 搭 配 同 样 让 你 轻 易 产 生 不错 的 视 觉 效 果 。 3 / 10案 例 :c、 互 补 色 和 对 比 色 配 色互 补 色 是 在 色 相 环 上 180相 对 的 两 个 颜 色 ， 而 对 比 色 则 是 在 色 相 环 上 150到 180范 围 内 相 对 的 两 个 颜 色 。 4
4、/ 10优 点 ： 补 色 和 对 比 色 形 成 强 列 的 对 比 效 果 ， 传 达 出 活 力 、 能 量 、 兴 奋 等 意 义 。 补 色 要达 到 最 佳 的 效 果 ， 最 好 是 其 中 一 种 面 积 比 较 小 ， 另 一 种 比 较 大 。 比 如 在 一 个 蓝 色 的 区域 里 搭 配 橙 色 的 小 圆 点 。案 例 :d、 分 裂 补 色 配 色如 果 我 们 同 时 用 补 色 及 类 比 色 的 方 法 来 确 定 的 颜 色 关 系 ， 就 称 为 分 裂 补 色 。优 点 ： 这 种 颜 色 搭 配 既 具 有 类 比 色 的 低 对 比 度 的 美 感
5、 ， 又 具 有 补 色 的 力 量 感 。 形 成了 一 种 既 和 谐 又 有 重 点 的 颜 色 关 系 。 如 在 上 面 三 种 颜 色 中 ， 红 色 就 显 得 更 加 突 出 。案 例 : 5 / 10e、 原 色 搭 配 配 色除 了 在 一 些 儿 童 的 产 品 中 ， 三 原 色 同 时 使 用 是 比 较 少 见 的 。 但 是 ， 无 论 是 在 中 国 还是 在 美 国 的 文 化 中 ， 红 黄 搭 配 都 是 非 常 受 欢 迎 。 红 黄 搭 配 应 用 的 范 围 很 广 从 快餐 店 到 加 油 站 ， 我 们 都 可 以 看 见 这 两 种 颜 色 同
6、 时 在 一 起 。蓝 红 搭 配 也 很 常 见 ， 但 只 有 当 两 者 的 区 域 是 分 离 时 ， 才 会 显 得 吸 引 人 ， 如 果 是 紧 邻 在一 起 ， 则 会 产 生 冲 突 感 。 6 / 10案 例 :f、 二 次 色 搭 配二 次 色 之 间 都 拥 有 一 种 共 同 的 颜 色 其 中 两 种 共 同 拥 有 蓝 色 ， 两 种 共 同 拥 有 黄 色 ，两 种 共 同 拥 有 红 色 ,所 以 它 们 轻 易 能 够 形 成 协 调 的 搭 配 。优 点 ： 如 果 三 种 二 次 色 同 时 使 用 ， 则 显 得 很 舒 适 、 吸 引 ， 并 具 有
7、 丰 富 的 色 调 。 它 们同 时 具 有 的 颜 色 深 度 及 广 度 ， 这 一 点 在 其 它 颜 色 关 系 上 很 难 找 到 。 7 / 10案 例 :方 法 二 : 叠 柔 配 色 法这 个 方 法 ， 看 起 来 复 杂 ， 但 用 起 来 很 简 单 。主 要 分 三 个 步 骤1、 任 意 选 择 一 个 白 色 或 黑 色 , 或 黑 白 渐 变 （ 可 以 是 点 、 线 、 面 甚 至 字 体 ）2、 然 后 混 合 模 式 选 择 叠 加 或 柔 光 8 / 103、 调 整 透 明 度 （ 1%-100%随 意 ， 省 心 的 做 法 是 直 接 键 入 一
8、 个 整 数 值 ， 比 如 ： 轻 质感 类 页 面 可 以 选 20%-40%， 重 质 感 感 类 可 以 键 入 60%或 以 上 ）如 下 图 （ 将 色 块 使 用 “柔 光 ”混 合 模 式 ,调 整 不 一 样 的 数 值 得 到 不 同 的 效 果 ）同 样 的 方 法 ： 界 面 中 的 字 体 颜 色 、 细 节 线 条 、 按 钮 渐 变 、 边 角 高 光 、 描 边 阴 影 都 可 以 用 这 样 的 方 法 取 色 使 用 这 个 方 法 的 优 点 是 :色 彩 获 得 比 较 简 单 , 无 需 了 解 色彩 的 指 数 和 直 方 图 , 不 用 看 色 轮
9、 .只 需 要 设 计 师 具 备 色 彩 的 审 美 , 能 够 合 理 的 应用 。 9 / 10方 法 三 : 色 彩 提 取 法这 个 方 法 是 从 现 有 的 自 然 色 、 图 片 色 中 提 取 所 要 的 颜 色 ， 给 应 用 和 搭 配 赢 得 了不 少 的 时 间 。1、 找 图找 一 张 符 合 所 要 设 计 界 面 风 格 的 图 (本 教 程 用 图 为 Galaxy S4 自 带 壁 纸 ）2、 提 取 颜 色将 图 片 放 入 PS 中 ， 点 击 “存 储 web 所 有 格 式 ”（ Windows 快 捷 键 为Ctrl+shift+Alt+s） ,格
10、 式 选 择 png， 色 块 选 择 8。在 颜 色 显 示 区 域 会 留 下 8 种 颜 色 ， 点 击 颜 色 区 域 右 侧 下 拉 按 钮 ， 会 找 到 “存 储 颜 色 表 ”， 把 他 存 储 到 桌 面 上 或 者 你 容 易 找 到 的 地 方 。 然 后 用 PS 打 开 ， 色 板 中 会 显 示 刚 才提 取 到 的 颜 色 。 10 / 10成 功 提 取 出 8 种 颜 色3、 应 用具 体 的 颜 色 应 用 为 ：1、 导 航 文 字 及 logo 的 颜 色 为 最 浅 的 蓝 色 ；2、 Banner 区 域 既 大 背 景 ， 这 里 用 了 开 始
11、的 图 片 。 上 面 的 大 标 题 logo 则 用 了 最 深 的蓝 色 ；3、 内 容 区 域 出 现 的 提 取 到 的 三 个 色 相 的 色 彩 ， 如 果 只 是 排 列 剩 下 的 几 个 颜 色 的 话 ，颜 色 会 很 冲 ， 所 以 用 了 几 张 图 片 来 过 度 颜 色 调 整 画 面 的 节 奏 。 现 在 看 来 效 果 还 不 错 ，内 容 区 域 的 文 字 颜 色 与 导 航 文 字 一 致 ， 都 是 最 浅 的 蓝 色 ；4、 内 容 区 域 的 几 个 按 钮 并 没 有 用 提 取 的 颜 色 ， 而 是 用 白 色 叠 加 然 后 调 整 透 明 度 出 来的 。总 结 : 以 上 的 三 种 配 色 方 法 思 路 是 完 全 不 一 样 的 ， 希 望 多 多 少 少 能 带 给 大 家 一 些 收获 。 在 学 习 新 的 方 法 的 同 时 ， 也 要 学 会 举 一 反 三 ， 结 合 自 己 已 有 的 经 验 和 设 计 师 独有 的 对 色 彩 的 感 觉 ， 形 成 一 套 属 于 自 己 的 配 色 方 法 。
