js33333金沙线路检测

为什么要整顿设计色彩步骤？

在色彩设计利用中
，，，我们对色彩分歧水平的理解
，，，影响到设计页面的阐发
，，，纯熟地使用色彩搭配
，，，设计时岂不事半功倍。一张优良的设计文章
，，，它的色彩搭配注定和谐得体
，，，令人赏心好看
，，，反思我们在设计过程中
，，，怎么的色彩搭配更容易达到设计主张
，，，又是什么影响了js33333金沙线路检测配色思想呢？

以下几点；；；嵊跋焐蚀钆渌枷：

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 同色系配色

同色系配色是指主色和辅色都在统一色相上
，，，这种配色步骤往往会给人页面很一致化的感触。

twitter的案例：https://twitter.com/

整体蓝色设计带来统一印象
，，，色彩的深浅别离承载分歧类型的内容信息
，，，好比信息内容？
，，，白色底代表用户内容
，，，浅蓝色底代表回复内容
，，，更深一点的蓝色底代表可回复操作
，，，色彩主导着信息档次
，，，也维持了twitter的品牌形象。

概念：色彩差宰割页面档次和？
，，，并代表分歧职能工作属性。

1.1-2 邻近色配色

近邻色配色步骤比力常见
，，，搭配比同色系稍微丰硕
，，，色相柔和过渡看起来也很和谐。

ALIDP的案例：https://alidp.org/

纯度高的色彩
，，，根基用于组控件和文本标题色彩
，，，各控件选取邻近色使页面不那么单调
，，，再把色彩饱和度降低用于分歧布景致和？榛帧

概念：基于品牌色的邻近色使用
，，，矫捷使用到各类控件中。

1.1-3 类似色配色

类似色配色也是常用的配色步骤
，，，对比不强给人色感沉静、、、和谐的感触。

?

BENMAPT的案例

??

红黄双色主导页面
，，，色彩根基用于分歧组控件阐发
，，，红色用于导航控件、、、按钮和图标
，，，同时也作辅助元素的主色。利用偏橙的黄色包办品牌色
，，，用于内容标签和布景搭配。

概念：基于品牌色的类似色使用
，，，有主次地用到页面各类控件和主体内容中。

1.1-4 中差色配色

中差色对比相对凸起
，，，色彩对比明快
，，，容易出现饱和度高的色彩。

facebook的案例：http://www.facebook.com/

色彩深浅营造空间感
，，，也辅助了内容？榈荡沃
，，，统一的深蓝色系使用
，，，传布品牌形象。中央色绿色按钮起到丰硕页面色彩的作用
，，，同时也凸起绿色按钮工作层级为最高。深蓝色吊顶导航买通整站蹊径
，，，并有疏导用户向下阅读之意。

概念：利用色彩对比凸起按钮工作优先级
，，，增长页面空气。

1.1-5 对比色配色

主导的对比配色必要精准地节制色彩搭配和面积
，，，其中主导色会带头页面空气
，，，产生强烈的生理感触。

YouTube的案例：https://www.youtube.com/

红色的热烈体现内容的丰硕多彩
，，，品牌红色赋予组控件色彩和可操作工作
，，，贯通整个站点的可操作提醒
，，，又能体现品牌形象：焐啻淼己街敢屠嗄糠掷
，，，蓝色代表登录按钮、、、默认用户头像和标题
，，，展示用户所产生的内容信息。

概念：红蓝色反映分歧交互和信息的可操作性
，，，针对系统操作和用户操作的分辨。

1.1-6 中性色配色

用一些中性的色彩作为基调搭配
，，，常利用在信息量大的网站
，，，凸起内容
，，，不会受不用要的色彩滋扰。这种过配色比力通用
，，，极度经典。

Bechan的案例：https://www.behance.net/

玄色凸起网站导航和内容？榈姆直
，，，品牌蓝色重要用于可点击的操作控件
，，，蕴含用户名称、、、内容标题。相较于大片使用品牌色的手法
，，，更能凸起内容和信息
，，，适合以内容为王的通用化、、、平台类站点。

概念：利用大面积中性色作为主导色
，，，品牌色在这里起到画龙点睛的作用
，，，用于一些必要重点凸起的场景
，，，强调交互的状态等。

1.1-7 多色搭配下的主导

主色和其他搭配色之间的关系会更丰硕
，，，可能有类似色、、、中差色、、、对比色等搭配方式
，，，但其中某种色彩会占主导。

Google的案例：www.google.com

对于拥有丰硕产品线的谷歌来说
，，，通过4种品牌色依照肯定的纯度比
，，，再用无色彩是非灰能搭配出千变万化的配色规划
，，，让品牌极具统一感。在大部门页面
，，，蓝色会充任主导色
，，，其他3色作辅色并设定分歧的工作属性
，，，是非灰多作为辅助色
，，，对于平台类站点来说
，，，多色主导有非：玫难诱剐浴

概念：谷歌设置了四种品牌色
，，，通过主次、、、合理的比例利用在界面中
，，，并通过组控件分歧的交互状态合理分配职能工作。



(二)色调和谐而形成的配色方式

2.1 有主导色调配色

这是由统一色调组成的统一性配色。深色和谐暗色调等类似色调搭配也能够形成同样的配色成效。即便出现多种色相
，，，只有维持色调一致
，，，画面也能出现整体统一性。

凭据色彩的感情
，，，分歧的调子会给人分歧的感触

2.1-1? 明澈的色调 ???

2.1-2? 幽暗的色调

2.1-3? 明亮色调

2.1-4? 深暗色调

2.1-5 ?雅白色调

...

2.1-1 明澈色调

SHOTFOLIO的案例

?

明澈调子使页面非：托
，，，即便是分歧色相形同色调的配色能让页面维持较高的协调度。蓝色另页面产生安静冰凉的空气
，，，茶色让我们想起大地泥土的厚实
，，，给页面增长了不变踏实感触
，，，同时温暖蓝色的冰凉。

概念：互补的色相搭配在一路
，，，通过统一色调的手法
，，，能够缓和色彩之间的对比成效。

2.1-2 幽暗色调

概念利用的案例

?

幽暗的色调渲染场景氛围
，，，通过分歧色相的色彩变动丰硕信息分类
，，，降低色彩饱和度使各色块协调并融入场景
，，，白色和明亮的青绿色作为信息载体出现。

Tips：多色彩经过统一色调处置
，，，区域间极度协调
，，，也不影响整体页面幽暗空气阐发。

2.1-3 明亮色调

Kids plus的案例

?

明亮的色彩活跃清澈
，，，热烈的空气和能干的卡通形像叙述着一场庆典
，，，但铺满高纯度的色彩
，，，过于刺激
，，，不合适长功夫观光。

概念：饱和度与纯度个性显著的搭配
，，，在达到视觉冲击力的同时
，，，可适当选取对比色或降低明度等步骤和谐视觉阐发。

2.1-4 深暗色调

?

LEES FERRY的案例

?

页面以深暗偏灰色调为主
，，，分歧的色彩搭配
，，，像在叙述着分歧的故事
，，，白色文字的排版
，，，整个页面显得厚重精彩
，，，小区域微渐变增长版面质感。

概念：以低暗色调组成整体画面氛围
，，，小面积明亮部门不会影响整体感触。

2.1-5 雅白色调

Very的案例

?

柔和的调子使页面显得明快温暖
，，，就算色彩好多也不会造成视觉负重。页面的同色调搭配
，，，色彩作为分歧？榈男畔⒎掷
，，，不抢主体的重点
，，，还能衬托分歧类型载体的内容信息。

概念：同色调分歧色彩的？
，，，就算承载着分歧的信息内容也能阐发很和谐。

?

2.2?同色调配色

这是由统一或类似色调中的色相变动组成的配色类型
，，，与主导色调配色中的属于同类技法。区别在于色调散布均匀
，，，没有过深或过浅的？
，，，色调领域更为严格。

tumblr的案例：www.tumblr.com

在现实的设计使用中
，，，；；；嵊眯└酆系氖址
，，，例如整体有主导色调
，，，小领域布局会选取同色调搭配。拿tumblr的颁布？槔此
，，，固然页面有自己的主色调
，，，但小？槭褂猛鞣制缟实闹澳馨磁
，，，结合色相变动和图形表白分歧的职能点
，，，众多的按钮放在一路
，，，由于同色调原因？榧炔槐渫骋弧

概念：综合使用的情况
，，，整体界面是有主导色调
，，，在布局例如重点图标等是同色调配色矫捷使用。

2.3 同色深浅搭配

这是由统一色相的色调差组成的配色类型
，，，属于单一色彩配色的一种。?与主导色调配色中的同色系配色属于同类技法。从理论上来讲
，，，在统一色相下的色调不存在色相差距
，，，而是通过分歧的色调阶级搭配形成
，，，能够理解为色调配色的一种。

Genrecolours的案例

?

拿紫色界面来说
，，，利用统一色相通过色调深浅对比
，，，营造页面空间档次。固然色彩深浅搭共同理
，，，但有些难以分辨主次
，，，由因而统一色相搭配
，，，色彩的个性决定着生理感触。

概念：同色深浅配色有着极高的统一性
，，，但有点单调。

(三)对比配色而形成的配色方式

由于对比色相互对比组成的配色
，，，能够分为互补色或相反色搭配组成的色相对比成效
，，，由白色、、、玄色等明度差距组成的明度对比成效
，，，以及由纯度差距组成的纯度对比成效。

3.1 色相对比

3.1-1 ?双色对比?

3.1-2 三色对比

3.1-3 多色对比

3.2 纯度对比

3.3 明度对比

?

3.1-1 双色对比

色彩间对比视觉冲击强烈
，，，容易吸引用户把稳
，，，使用时时时大领域搭配。

VISA的案例：http://www.visa.cn/

VISA是一个信誉卡品牌
，，，深蓝色通报和安然全的品牌形象
，，，黄色能让用户产生兴奋幸福感。别的蓝色降低明度后再和黄色搭配
，，，对比鲜明之余还能缓和视觉委顿。

概念： 不论是整体对比还是部门对比
，，，对比色给人强烈的视觉冲击
，，，结合色彩生理学对品牌通报成效更佳。

3.1-2 三色对比

三色对比色相上更为丰硕
，，，通过加强色调重点凸起某一种色彩
，，，且在色彩面积更为讲求。

NAVER的案例：www.naver.com

大面积绿色作为站点主导航
，，，形象鲜明凸起。使用品牌色对应的两种中差色作二级导航
，，，并降低其中一方蓝色系明度
，，，再用同色调的西瓜红作为当前地位状态
，，，二级导航内部对比极度强烈却不影响主导航成效。

概念： 三色对比中西瓜红作为强调色限定在小面积展示极度关键
，，，面积巨细直接影响画面平衡感。

3.1-3 多色对比

多色对比给人丰硕饱满的感触
，，，色彩搭配协调会使页面会极度精彩
，，，？楦星苛摇

Metro的案例：http://www.microsoft.com/

Metro风格选取大量色彩
，，，分隔分歧的信息？椤Ｎ执竽？榍蛎婊喑
，，，？槟诓磕芄幌阜殖龇制缒谌莶慵
，，，单色？橹怀性匾恢中畔⒛谌
，，，配上对应职能图标鉴别性高。

概念：色彩色相对比、、、色彩面积对比
，，，只有维持肯定的比例关系
，，，页面也能整整有序。

3.2 纯度对比

相对与色相对比
，，，纯度差对比
，，，对比色彩的选择极度多
，，，设计利用领域宽泛
，，，可用于一些凸起品牌、、、营销类的场景。

PINTEREST的案例：http://www.pinterest.com/

页面中心登录？
，，，通过降低纯度处置制作无色相布景
，，，再利用红色按钮的对比
，，，形成纯度差关系。与色相对比相较
，，，纯色对比矛盾感刺激感相对小一些
，，，极度容易凸起主体内容的真实性。

概念： 使用对比重要的是对比例的把握
，，，面积、、、构图、、、节拍、、、色彩、、、地位等所有能够产生变动的元素
，，，形成视觉的强烈矛盾。

3.3 明度对比

明度对比靠近生涯现实反映
，，，通过环境远近、、、安阳角度等明暗关系
，，，设计趋于真实。

ARKTIS的案例

?

明度对比够组成画面的空间纵深档次
，，，出现远近的对比关系
，，，高妙度凸起近景主体内容
，，，低明度阐发蓝图的距离。而明度差使人把稳力集中在高亮区域
，，，出现出药瓶的真实写照。

概念： 明度对比使页面显得更单纯、、、统一
，，，而凹凸明度差可产生距离关系。


总结：

色彩是最能引起表情共识和感情认知的元素
，，，三原色能调配出极度丰硕的色彩
，，，色彩搭配更是千变万化。设计配色时
，，，我们能够摒弃一些传统的默认形状
，，，相识设计背后的需要主张
，，，思虑色彩对页面场景阐发、、、感情通报等作用
，，，从而有凭据、、、有条理、、、有步骤地构建色彩搭配规划。

本文转自：http://mux.alimama.com/

链接：http://mux.alimama.com/posts/1392