UI设计实战课程 网页色彩基础知识二.ppt

开讲啦！ 网页中的色彩（二） 在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，设计时就能事半功倍。一张优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目，反思我们在设计过程中，怎样的色彩搭配更容易达到设计目的，又是什么影响了我们的配色思维呢？ 以下几点常会影响色彩搭配思维： 1.仅关注色彩表象 2.搭配方法不够系统 3.色彩与构成掌握不到位 一、色相和色调 二、基础配色方法 (一)色相差而形成的配色方式 1.1 有主导色彩配色 这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色，如果不是同一种色相，色环上相邻的类似色也可以形成相近的配色效果。当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色彩的对比，但这里先讲述带主导色的配色案例。 根据主色与辅色之间的色相差不同，可以分为以下各种类型： 1.1-1 同色系主导 1.1-2 邻近色主导 1.1-3 类似色主导 1.1-4 中差色主导 1.1-5 对比色主导 1.1-6 中性色主导 1.1-7 多色搭配下的主导 1.1-1 同色系配色 同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。 同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。 1.1-2 邻近色配色 1.1-3 类似色配色 1.1-4 中差色配色 1.1-5 对比色配色 1.1-6 中性色配色 1.1-7 多色搭配下的主导 (二)色调调和而形成的配色方式 2.1 有主导色调配色 这是由同一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的配色效果。即使出现多种色相，只要保持色调一致，画面也能呈现整体统一性。 根据色彩的情感，不同的调子会给人不同的感受 2.1-1 清澈的色调 2.1-2 阴暗的色调 2.1-3 明亮色调 2.1-4 深暗色调 2.1-5 雅白色调 2.1-1 清澈色调 2.1-1 清澈的色调 2.1-2 阴暗色调 2.1-3 明亮色调 2.1-4 深暗色调 2.1-5 雅白色调 2.2 同色调配色 2.3 同色深浅搭配 (三)对比配色而形成的配色方式 由于对比色相互对比构成的配色，可以分为互补色或相反色搭配构成的色相对比效果，由白色、黑色等明度差异构成的明度对比效果，以及由纯度差异构成的纯度对比效果。 3.1 色相对比 3.1-1 双色对比 3.1-2 三色对比 3.1-3 多色对比 3.2 纯度对比 3.3 明度对比 3.1-1 双色对比 3.1-2 三色对比 3.1-3 多色对比 3.2 纯度对比 3.3 明度对比 总结： 色彩是最能引起心境共鸣和情绪认知的元素，三原色能调配出非常丰富的色彩 ，色彩搭配更是千变万化。设计配色时，我们可以摒弃一些传统的默认样式，了解设计背后的需求目的，思考色彩对页面场景表现、情感传达等作用，从而有依据、有条理、有方法地构建色彩搭配方案。 感谢听讲 ! 麦子学院---在线职业教育 未来 我来