最值得收藏的色彩设计方法！

编者按：最值得收藏的色彩设计方法！为什么要整理设计色彩方法？在色彩设计应用中，我们对色彩的理解程度不同，影响设计页面的性能，熟练运用色彩搭配，设计不是事半功倍。优秀的设计作品，其色彩搭配必须和谐得体，赏心悦目，反思我们在设计过程中，什么样的色彩搭配更容易达到设计目的，什么影响我们的色彩搭配思维？以下几点往往会影响色彩搭配思维：首先，让我们简单地理解色调和色调的概念：接下来，我们根据三种颜色匹配方法，结合一些案例，分析页面中颜色的应用方法。一、色差形成的配色方法1.1有主导色彩配色，这是由一种色相组成的统一配色。也就是说，如果不是相同的色相，色环上相邻的相似颜色也可以形成相似的配色效果。当然，也有一些颜色差距很大的做法，比如对比色，或者是否有颜色对比，但这里首先要讲的是主色的配色案例。1.1-1同色系配色同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人一种页面非常一致的感觉。twitter案例的整体蓝色设计给人留下了统一的印象。颜色的深度分别承载不同类型的内容信息，如信息内容模块。白色背景代表用户内容，浅蓝色背景代表回复内容，深蓝色背景代表可回复操作。颜色主导信息水平，保持twiter的品牌形象。观点：页面层次和模块的颜色差分，代表不同的功能任务属性。1.1-2相邻配色相邻配色方法比较常见，搭配比同色系略丰富，色相柔和过渡看起来也很和谐。ALIDP案例纯度高的颜色基本上用于组控件和文本标题的颜色。每个控件使用相邻的颜色，使页面不那么单调，然后降低不同背景颜色和模块划分的颜色饱和度。观点：基于品牌颜色的相邻颜色应用，灵活应用于各种控件。1.1-3类似配色类似配色也是常用的配色方法，对比度不强，给人一种平静和和谐的感觉。BENMAPT案例红色和黄色主页，颜色基本用于不同组的控制性能，红色用于导航控制、按钮和图标，但也作为辅助元素的主要颜色。用橙黄代替品牌色，用于内容标签和背景搭配。观点：基于品牌颜色的类似颜色应用，页面的各种控件和主要内容主次使用。1.1-4中差色配色中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩。facebook的案例颜色深度营造空间感，也有助于内容模块层次的划分，统一的深蓝色系统应用，传播品牌形象。中间色绿色按钮起到丰富页面色彩的作用，同时也突出了绿色按钮任务水平最高的作用。深蓝色天花板导航开辟全站路径，引导用户向下阅读。观点:利用色彩对比突出按钮任务优先级，增加页面氛围。1.1-5对比色主导的对比色需要准确控制色彩搭配和面积，主导色会带动页面氛围，产生强烈的心理感受。YouTube案例红色的活泼反映了丰富多彩的内容。品牌红色赋予组控件颜色和可操作任务，贯穿整个网站的可操作提示，可以反映品牌形象。红色代表导航指南和类别分类，蓝色代表登录按钮，默认用户头像和标题，显示用户生成的内容信息。观点：针对系统操作和用户操作的区别，红蓝反映了不同交互和信息的可操作性。1.1-6中性色彩搭配以一些中性色彩为基调，常用于信息量大的网站，突出内容，不受不必要的色彩干扰。这种过配色比较通用，很经典。Bechan的案例黑色突出了网站导航和内容模块的区别。品牌蓝主要用于点击操作控件，包括用户名称和内容标题。与大规模使用品牌色彩相比，更能突出内容和信息，适用于以内容为王的通用平台网站。观点：以大面积中性色为主色，品牌色在这里起到画龙点睛的作用，用于一些需要突出重点的场景，强调交互状态等。1.1-7多色搭配下的主色与其他搭配色的关系会更加丰富，可能会有类似的颜色、中差色、对比色等搭配方式，但有些颜色会占主导地位。谷歌拥有丰富的产品线，通过四种品牌颜色根据一定的纯度比，然后使用无色黑白灰色可以匹配不断变化的配色方案，使品牌具有非常统一的感觉。在大多数页面上，蓝色将作为主导颜色，其他三种颜色将作为辅助颜色，并设置不同的任务属性。黑色、白色和灰色主要用作辅助颜色。对于平台网站，多色主导具有很好的延展性。观点：谷歌在界面中设置了四种品牌颜色，通过主次、合理的比例应用，并在不同的交互状态下合理分配功能任务。二、色调和谐形成的配色方式2.1有主导色调配色，这是由同一色调组成的统一配色。类似的颜色搭配，如深色和深色，也可以形成相同的配色效果。即使有多种色相，只要色调保持一致，画面也能呈现整体统一。2.1-1清晰色调SHOTFOLIO案例清晰色调使页面非常和谐，即使是不同颜色相同颜色的配色也能使页面保持更高的协调性。蓝色的另一个页面产生了一种安静而寒冷的气氛。茶色让我们想起了土壤的厚度，给页面增添了一种稳定和坚定的感觉，同时又温暖又冷。观点：互补色相搭配在一起，通过统一色调的手法，可以缓解色彩之间的对比效果。2.1-2黑暗色调概念应用案例黑暗色调渲染场景氛围，丰富信息分类，降低色彩饱和度，使各种色块协调融入场景，白色和明亮的绿色作为信息载体呈现。Tips：多色经统一色调处理，区域间十分协调，不影响整个页面的黑暗气氛表现。2.1-3明亮的色调Kidsplus案例明亮的色彩活泼清晰，活泼的氛围和引人注目的卡通形象描述了庆祝活动，但充满了高纯度的颜色，太刺激，不适合长时间旅行。观点：饱和度与纯度特征的明显搭配可以通过对比色或降低亮度来调和视觉表现，同时达到视觉冲击。2.1-4深色LEESFERY案例页面主要是深灰色，不同的颜色搭配，如叙述不同的故事，白色文本排版，整个页面显得厚而精致，小区域逐渐增加了布局纹理。观点:整体画面氛围以低暗色调形成，小面积明亮部分不会影响整体感觉。2.1-5优雅的白色Very案例柔和的色调使页面显得明亮而温暖，即使有很多颜色也不会造成视觉负荷。页面颜色相同，颜色作为不同模块的信息分类，不抓住主体的重点，也可以衬托不同类型载体的内容信息。观点:即使携带不同信息内容，同色调、不同颜色的模块也能表现出和谐。2.2 同色调配色是由同一或类似色调中的色相变化组成的配色类型，属于与主色调配色中的同类技术。区别在于色调分布平均，没有太深或太浅的模块，色调范围更严格。在实际设计和应用中，Tumblr的案例往往采用一些更全面的技术，如整体主导色调，小范围布局将采用相同的色调搭配。以tumblr的发布模块为例。虽然页面有自己的主色调，但小模块使用相同颜色和不同颜色的功能按钮，结合颜色变化和图形来表达不同的功能点。由于相同的颜色，模块非常稳定和统一。观点:综合运用，整体界面有主色调，同色调配色在布局上灵活运用，如关键图标。2.3同色深度搭配是由同色相的色差组成的配色类型，属于单色配色的一种。 与主色调配色中的同色系配色属于同类技术。从理论上讲，同一色相下的色调没有色相差异，而是通过不同色调阶层的搭配形成的，可以理解为一种色调配色。以紫色界面为例，Genrecolours案例利用相同的色相通过色调深度对比来营造页面空间层次。虽然颜色深度搭配合理，但有些很难区分主次，因为颜色搭配相同，颜色的特点决定了心理感受。观点:同色深浅配色统一度极高，但有点枯燥。3、对比色形成的配色方法可分为互补色或相反色组成的配色效果、白色、黑色等明度差组成的明度对比效果、纯度差组成的纯度对比效果。3.1-1双色对比色对比视觉冲击强烈，容易吸引用户的注意力，使用时经常大规模搭配。VISA案例VISA是一个信用卡品牌，深蓝色传达和平安全的品牌形象，黄色能让用户感到兴奋和快乐。此外，蓝色可以在降低亮度后与黄色搭配，同时也可以缓解视觉疲劳。观点:无论是整体对比还是局部对比，对比色都给人强烈的视觉冲击力，结合色彩心理学，对品牌传播效果更好。3.1-2三色对比色比三色对比色更丰富，通过强化色调突出某种颜色，在色彩面积上更加讲究。NAVER案例以大面积绿色为主导航站点，形象鲜明突出。使用品牌颜色对应的两种中差色作为二次导航，降低一种蓝色系统的亮度，然后使用相同颜色的西瓜红作为当前的位置状态。二次导航的内部对比非常强烈，但不影响主导航效果。观点：在三色对比中，西瓜红作为一种强调颜色限制，在小面积显示非常重要，面积直接影响画面的平衡感。3.1-3多色对比多色对比给人一种丰富饱满的感觉，色彩搭配协调会使页面非常精致，模块感强。Metro案例Metro风格采用大量颜色，分隔不同的信息模块。为了保持大模块的面积相等，模块可以细分为不同的内容层次。单色模块只携带一个信息内容，具有高度识别的相应功能图标。观点:只要保持一定的比例关系，页面就可以整齐有序。3.2纯度对比相对于色彩对比，纯度差对比，对比色彩选择多，设计应用广泛，可用于一些突出的品牌、营销场景。PINTEREST案例页面中心登录模块，通过降低纯度来创建无色相背景，然后利用红色按钮的对比来形成纯度差。与色彩相比，纯色对比冲突的刺激感相对较小，很容易突出主要内容的真实性。观点：使用比较重要的是把握比例、面积、构图、节奏、颜色、位置等可能改变的元素，形成强烈的视觉冲突。3.3明度对比明度对比接近生活的实际反映，设计通过环境距离、阳光角度等明暗关系趋于真实。ARKTIS的案例明度对比足以构成画面的空间深度，呈现远近的对比关系，突出近景的主要内容，低明度显示远景的距离。亮度差使人注意力集中在亮区，呈现出药瓶的真实写照。观点:明度对比使页面看起来更简单、更统一，高低明度差可以产生距离关系。结论：色彩是最能引起心境共鸣和情感认知的元素，三原色能调配出非常丰富的色彩，色彩搭配更是千变万化。在设计颜色匹配时，我们可以放弃一些传统的默认风格，了解设计背后的需求和目的，思考颜色在页面场景表达和情感交流中的作用，从而有基础、有组织、有方法地构建颜色匹配方案。