甲方竟敢说你的配色丑! 我来教你怼回去(二) - 优设-UISDC

甲方竟敢说你的配色丑! 我来教你怼回去(二)

2018/10/10 12480评论区

在上一篇《甲方竟敢说你的配色丑! 我来教你怼回去(一)》中,我们了解了色彩的性质以及色彩的分类之后,我们再通过色彩之间的搭配组合,来展现丰富多彩的配色效果。

色彩单体在设计中的影响力很大,而多种色彩的搭配能够展现出更加丰富多彩的印象,将合适的色彩进行有效的搭配,设计作品的质量会有很大的提升。

在色相环中,我们把色彩划分为12种基本色相,选取其中某一种色相做为基准色相,这样就会产生包括同一色相、邻近色相、类似色相、中差色相、对比色相、互补色相在内的六种色相之间的关系,了解这些关系之后,配色实践就变得简单多了。

色彩之间的搭配大体上可以分为两种:

  • 取得协调的配色
  • 强调设计的配色

取得协调的配色是通过同一或者类似的色相搭配,形成稳定、和谐的印象;

而强调设计的配色则是通过不同色相之间的相互碰撞,强调色相差异,从而形成某种色彩的印象。

一、取得协调的配色

由某一种色相或者在色相环上相邻的类似色构成,统一画面的配色,可体现整体统一性,强烈展现色相的印象,这种配色展现自然与和谐的印象,但同时也容易形成单调乏味的印象。

1. 同色系配色

同色系配色是由一种色相构成的统一性配色,主色和辅色都在同一色相上,可以体现整体画面的统一性。

同时这种配色也容易形成单调、乏味的味道,所以在明度和纯度上适当有一些变化,加强面积上的对比,使画面更加均衡。

下面举几个同色系配色的案例。

2. 邻近色配色

在色相环上相邻的色彩,因为色相上存在微妙的差异,所以配色效果比同色系配色稍微丰富,柔和过渡的色相使得页面看起来更加和谐。

下面举几个邻近色配色的案例。

3. 类似色配色

类似色色相上含有共通成分,配色也可以体现出和谐、协调的印象,这种配色是最能体现出色相差的配色类型。

类似色的色彩具有适度的变化和动感,同样可以用过色相差体现画面色彩的张弛效果。

下面举几个类似色配色的案例。

△ 图片来源:@chendafa123链接地址:https://dribbble.com/chendafa

二、强调设计的配色

在同色系色彩搭配构成的配色中,可以通过添加强调色的配色技巧,突出画面重点,强调色一般选择基本色的对比色或者黑色、白色。如何确保强调色限定在小面积内展现是关键。

1. 中差色配色

中差色色相上基本没有共通性,色彩包括了类似色色相到对比色色相,搭配出一种暧昧的印象,表现出舒适感和适度的刺激效果。

下面举几个中差色配色的案例。

2. 对比色配色

对比色配色也叫相反色配色,色彩对比效果十分强烈。

色彩之间互相衬托,形成明快、鲜明的印象,适合于表现活力四射,朝气蓬勃的画面。

下面举几个对比配色的案例。

3. 互补色配色

互补色在色相环的相对位置,色相差较大,配色体现出十分强烈的视觉冲击效果。

同时也容易形成廉价、劣质的印象。

下面举几个互补色配色的案例。

三、多色搭配的配色

一般来讲,三色搭配和多色搭配体现出明显的色相差异,富有张弛感的色彩组合呈现出活跃、动感的效果。多色搭配的要点在于通过高纯度的有彩色和黑色、白色的搭配,或者通过很高纯度的对比色之间的组合产生强烈的对比效果。

1. 三邻色搭配

在色相环上选取相邻的三种颜色搭配,有一定的色相差但不是很大,可以营造和谐的氛围,并且有丰富的质感和层次。

下面举几个三邻色配色的案例。

2. 三角形配色

使用与对角线相邻的颜色进行三色搭配,虽然三种颜色的选择方式并没有达到平衡,偏离互补色的不规则三角形所造成的色相的微妙差异,产生了有趣的设计效果。

下面举几个三角形配色的案例。

3. 正三角形配色

在色相环以正三角形为色彩搭配,色彩与色彩之间的间隔相当远,彼此间的差异很大,而色相的对比度提高,画面表现出了华丽的感觉。

下面举几个正三角形配色的案例。

4. 四边形配色

选取一对互补色相邻对四种颜色组成的配色,两两之间既有邻近色的和谐,也有对比色的强烈刺激,可以营造个性的感觉。

下面举几个四边形配色的案例。

5. 正四边形配色

色相环中的正四边形对于的颜色,色彩之间差异是均等的,整体设计自然呈现出协调的状态。

下面举几个正四边形配色的案例。

总结

色彩之间的搭配大体上可以分为色彩与色彩之间相互调和的配色,以及衬托某种色彩的配色两种。

相互调和的配色是通过统一的色相,或者类似色彩的配色通过不同色相之间的色彩碰撞,强调色彩差异,从而形成突出某种色彩的印象。

欢迎关注作者的微信公众号:「设计师的私人日记」

「高手的配色技巧」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/your-color-is-ugly-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 设计师专访 视觉设计 素材下载 设计流程 web前端开发 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里