ui设计师的色彩搭配手册(配色知识教你掌握ui设计的配色方法和技巧)

本文主要介绍用户界面设计师和配色手册(配色知识教你掌握ui设计的配色方法和)，下面跟着东辰网详细了解一下吧。

这是一篇让你从实战中掌握配色方法的绝世文章。文章还附带色板和配色工具，推荐收藏学习。

我们从小就能熟练的分辨颜色，但是为什么在UI设计需要用到颜色的时候，我们却经常发现很难恰当的使用颜色做出和谐、得体、赏心悦目的设计呢？.....我认为原因是我们没有。;对色彩和实践了解不够，当我们做设计时，很容易过度使用色彩。作为一个设计初学者，你需要掌握基本的色彩理论，通过实践加深对色彩的理解，最终能够熟练运用各种色彩，搭配出一个平衡愉悦的设计。

在使用色彩的初始阶段，你可能会感到一些困难。我的建议是多阅读优秀的作品，多观察身边美好的事物，从中可以获得很多优秀的配色灵感，从而增强对色彩的认知。同时，在设计初期，尽量选择柔和或中性的颜色作为背景，只在需要吸引用户的元素或按钮上使用颜色注意。随着时间的推移，你会做得越来越好。

原色、中间色、复合色配色的开始步是选择一种主色。我建议选择明亮柔和的原色或者中间色作为出发点。这种选择往往相对安全，关键看你接下来怎么用，选对颜色搭配。

下面的颜色是苹果在原生应用中最常用的颜色。这些颜色对按钮、图标、菜单等视觉元素有非常好的效果。

并且切记不要过度使用颜色，只在需要引导用户操作的地方使用颜色。

色相、饱和度、明度(HSB或HS)当我们需要使用色彩时，先了解色彩的相关特性是非常重要的。很多人选择使用RGB颜色模型，但我想说，RGB是颜色的计算机表示，我们很难分辨一种颜色由多少红绿蓝组成。作为设计师，HSB颜色模型更有用，因为色相、饱和度、明度是我们大脑理解颜色的，这些属性对我们理解和使用颜色更有意义。

单色是指在同一个颜色上加一层1090%的白色或黑色的透明层得到的一组颜色。因为它们具有相同的色调，能产生和谐的对比效果，所以单色的应用在设计中非常重要。

在上面的例子中，通过调整黑色或白色层的透明度，可以获得不同的单色，并且它们可以很好地相互协调。

当你更熟练地掌握拾色器时，你可以通过上下拖动来调整亮度和饱和度，而不改变色相，从而获得一个新的单色。

类比指的是色相环中相邻的颜色。很显然，这样的配色不会产生高对比度。当你觉得自己的设计色彩过于单一时，可以利用相邻的色彩来增加色彩的变化，从而让你的设计更有层次感和动感。

例如，红色是橙色的相邻色，橙色是黄色的相邻色。

将色调值增加或减少3050，以获得新的相邻颜色。

互补色是指在色相环中相对(彼此成180度)的两种颜色。互补色使人产生强烈的对比效果。例如，紫色按钮在黄色背景上非常突出。当然也要看每种颜色的饱和度。补色经常用在需要突出的地方，比如按钮和警告，但是使用不当也可能让你的设计看起来很突兀。最好是通过实践来理解，请记住:对比。

将色相值增加整个色相条宽度的一半(即色轮中的相)，可以得到当前颜色对应的补色。

中性色调是指一系列深浅不同的灰色，由黑色、白色和黑白混合而成。中性色不属于冷色调或暖色调，可以起到中和剂的作用。过度使用色彩会使整个设计缺乏可用性，而中性色可以帮助绘制用户注意力回到内容本身。

使用中性色时，应尽可能避免与主色，因此建议中性色的饱和度始终设置为接近0的值。

中性色板的主色往往容易确定，但背景和文字颜色有时很难把握。它们的搭配非常微妙，需要设计师有足够的经验去组合，调整到最佳。以下是我在UI设计中经常使用的一些中性色板。

蓝色样本

蓝色是所有网站或AppUI中最常用的，给人一种安静、宽广、值得信赖的感觉。Twitter、脸书、IBM和LinkedIn等商业巨头都采用蓝色作为主色调。蓝色更容易和其他颜色搭配。

灰色样本

我们应该总是避免在UI中使用纯黑色(#00)。纯黑搭配其他颜色时，反差太明显。

如果要使用灰色，请使用明度值在30%以下或70%以上的灰色。具有平均亮度的灰色显示为一个点，可以和其他颜色不太搭配。

自定义样本

除了上面的蓝色和灰板，我们还可以使用任何颜色来定制我们自己的色板，但你总是需要使色板的颜色相互匹配。

首先滑动色相滑块选择一种主色，然后选择与主色相关的其他单色、相邻色、补色。最后通过调整这些颜色的饱和度和亮度，增加色彩的对比度和活力。

通过有效地使用对比，对比可以使你的内容更清晰，阅读更容易。好的对比，一般用两极的颜色，比如白色和黑色，浅蓝色和深蓝色，高光和低光。

UI中的亮度和暗度在某些情况下，你需要根据品牌或者可用性来权衡UI的亮度。比如iBook的应用，当外界环境变暗时，会自动切换到黑暗阅读模式。

再比如AppleWatch，完全采用黑色背景，可以很好的搭配它的边框。

明亮UI的配色原则要比背景亮。通过亮度的对比，可以让你想要突出的内容轮廓更加清晰易读，不要不要用太多的颜色。色彩总是能吸引人。;的眼睛，但过度使用往往会使人忽略了主要内容。

因此，颜色只用于需要突出提示的地方，比如重要的按钮和突出显示的状态。避免使用一般的白色，90%100%的白色最适中。

唐深色UI的配色原则不要用纯黑，那样会很难看清细节，和白色对比会太高。如果一定要用黑色，那就选择用深灰色来代替，可以消除高对比度。使用蓝色时，避免同时使用灰色。深蓝色更适合蓝色。颜色也有意义。应合理使用红、绿、蓝和中性颜色，分别表示不推荐的操作、肯定的操作、链接和非活动状态。使用这些按钮或功能时，避免让用户感到困惑。例如，唐不要使用绿色按钮删除。

使用图片中的颜色。你周围的一切，只要你留心，都充满了色彩的灵感。当你看到一张美丽的图片、一件事物或一件数码作品时，作为设计师你首先注意到的可能是美丽和谐的色彩。这时候可以拍照或者截图，然后提取颜色。这样，你就可以通过这些提取的颜色生成一个新的色样。

Sip是一款优秀的iOS应用，可以帮助你从照片中创建样本。

手动识别颜色的意思是通过手动的(肉眼识别颜)创建色样是比较理想的，但是这需要我们对颜色有很好的理解。任何工具自动识别生成的色样总是缺乏准确性，最好用自己的视觉。

下面这个例子，我选择了支付宝应用的界面，对应用使用的主色、副色、中性色进行了识别和分析。

主色调一般与整个品牌的颜色一致，会用在图标、按钮、菜单上。副色可以是与主色调相同的颜色，也可以是对比色、邻色等对比色。二次色很少使用，只在需要吸引用户的地方使用注意，比如消息提醒，打折促销等需要醒目标志的地方。对于背景色来说，是用来衬托内容的，也可以起到调和整个应用的色调的作用。那个这就是为什么我们会同时看到亮主题和暗主题的用户界面。

使用AdobeColorCC，您还可以选择不同的配色模式。甚至移动颜色挑选标志来选择不同的颜色添加到您的样本。

在Dribble上收集颜色，可以浏览和保存色板。你可以根据一种颜色找到所有以这种颜色为主色调的设计，从而激发你的灵感。

您还可以选择不同的颜色匹配模式，甚至移动颜色选择标志来选择不同的颜色添加到您的样本。

另一个我最常去的地方是Pinterest，在那里可以看到很多设计师收集的色板。这是我在Pinterest上的swatch板。

色彩指南了解色彩的基本原理，它们之间的关系，以及如何选择色彩进行配色，对你来说非常重要。我建议阅读下面这个关于色彩的指南，它不仅可以解释色彩的基本原理，还可以帮助你更深入地理解如何使用色彩。

材料设计中的色彩Google推出的材料设计色彩设计指南，其中推荐的色板对于你的WebUI或者iOS设计也是很有帮助的。

草图样本草图样本使您能够非常方便地保存或导入全局或文档样本。推荐的色板对你的IOS设计也很有帮助。我们通常可以从一个全局样本开始，包括iOS、材质设计和平面UI。

色彩渐变美丽的渐变效果在iOS中被广泛使用。通过选择两种匹配的颜色，然后简单地设置它们，就可以产生渐变效果。以下是众多渐变效果的绝佳合集。

SkalaColor一个可以在Sketch和XCode中使用的颜色选择器。支持RGB，HEX等不同格式。

欢迎关注作者s官方账号techmask。

这是一篇让你从实战中掌握配色方法的绝世文章。文章还附带色板和配色工具，推荐收藏学习。

我们从小就能熟练的分辨颜色，但是为什么在UI设计需要用到颜色的时候，我们却经常发现很难恰当的使用颜色做出和谐、得体、赏心悦目的设计呢？.....我认为原因是我们没有。;对色彩和实践了解不够，当我们做设计时，很容易过度使用色彩。作为一个设计初学者，你需要掌握基本的色彩理论，通过实践加深对色彩的理解，最终能够熟练运用各种色彩，搭配出一个平衡愉悦的设计。

在使用色彩的初始阶段，你可能会感到一些困难。我的建议是多阅读优秀的作品，多观察身边美好的事物，从中可以获得很多优秀的配色灵感，从而增强对色彩的认知。同时，在设计初期，尽量选择柔和或中性的颜色作为背景，只在需要吸引用户的元素或按钮上使用颜色注意。假以时日，你会做到的越来越好。

原色、中间色、复合色配色的开始步是选择一种主色。我建议选择明亮柔和的原色或者中间色作为出发点。这种选择往往相对安全，关键看你接下来怎么用，选对颜色搭配。

下面的颜色是苹果在原生应用中最常用的颜色。这些颜色对按钮、图标、菜单等视觉元素有非常好的效果。

并且切记不要过度使用颜色，只在需要引导用户操作的地方使用颜色。

色相、饱和度、明度(HSB或HS)当我们需要使用色彩时，先了解色彩的相关特性是非常重要的。很多人选择使用RGB颜色模型，但我想说，RGB是颜色的计算机表示，我们很难分辨一种颜色由多少红绿蓝组成。作为设计师，HSB颜色模型更有用，因为色相、饱和度、明度是我们大脑理解颜色的，这些属性对我们理解和使用颜色更有意义。

单色是指在同一个颜色上加一层1090%的白色或黑色的透明层得到的一组颜色。因为它们具有相同的色调，能产生和谐的对比效果，所以单色的应用在设计中非常重要。

在上面的例子中，通过调整黑色或白色层的透明度，可以获得不同的单色，并且它们可以很好地相互协调。

当你更熟练地掌握拾色器时，你可以通过上下拖动来调整亮度和饱和度，而不改变色相，从而获得一个新的单色。

类比指的是色相环中相邻的颜色。显然，这样的配色不会产生高对比度。当你觉得自己的设计色彩过于单一时，可以利用相邻的色彩来增加色彩的变化，从而让你的设计更有层次感和动感。

例如，红色是橙色的相邻色，橙色是黄色的相邻色。

将色调值增加或减少3050，以获得新的相邻颜色。

互补色是指在色相环中相对(彼此成180度)的两种颜色。互补色使人产生强烈的对比效果。例如，紫色按钮在黄色背景上非常突出。当然也要看每种颜色的饱和度。补色经常用在需要突出的地方，比如按钮和警告，但是使用不当也可能让你的设计看起来很突兀。最好是通过实践来理解，请记住:对比。

将色相值增加整个色相条宽度的一半(即色轮中的相)，可以得到当前颜色对应的补色。

中性色调是指一系列深浅不同的灰色，由黑色、白色和黑白混合而成。中性色不属于冷色调或暖色调，可以起到中和剂的作用。过度使用色彩会使整个设计缺乏可用性，而中性色可以帮助用户将注意力吸引回内容本身。

使用中性色时，应尽可能避免与主色，因此建议中性色的饱和度始终设置为接近0的值。

中性色板的主色往往容易确定，但背景和文字颜色有时很难把握。它们的搭配非常微妙，需要设计师有足够的经验去组合，调整到最佳。以下是我在UI设计中经常使用的一些中性色板。

蓝色样本

蓝色是所有网站或AppUI中最常用的，给人一种安静、宽广、值得信赖的感觉。Twitter、脸书、IBM和LinkedIn等商业巨头都采用蓝色作为主色调。蓝色更容易和其他颜色搭配。

灰色样本

我们应该总是避免在UI中使用纯黑色(#00)。纯黑搭配其他颜色时，反差太明显。

如果要使用灰色，请使用明度值在30%以下或70%以上的灰色。具有平均亮度的灰色显示为一个点，可以和其他颜色不太搭配。

自定义样本

除了上面的蓝色和灰板，我们还可以使用任何颜色来定制我们自己的色板，但你总是需要使色板的颜色相互匹配。

首先滑动色相滑块选择一种主色，然后选择与主色相关的其他单色、相邻色、补色。最后通过调整这些颜色的饱和度和亮度，增加色彩的对比度和活力。

通过有效地使用对比，对比可以使你的内容更清晰，阅读更容易。好的对比一般采用两极色彩，如白色和黑色，浅蓝和深蓝，高低光。

UI中的亮度和暗度在某些情况下，你需要根据品牌或者可用性来权衡UI的亮度。比如iBook的应用，当外界环境变暗时，会自动切换到黑暗阅读模式。

再比如AppleWatch，完全采用黑色背景，可以很好的搭配它的边框。

明亮UI的配色原则要比背景亮。通过亮度的对比，可以让你想要突出的内容轮廓更加清晰易读，不要不要用太多的颜色。色彩总是能吸引人。;的眼睛，但过度使用往往会使人忽略了主要内容。

因此，颜色只用于需要突出提示的地方，比如重要的按钮和突出显示的状态。避免使用一般的白色，90%100%的白色最适中。

唐深色UI的配色原则不要用纯黑，那样会很难看清细节，和白色对比会太高。如果一定要用黑色，那就选择用深灰色来代替，可以消除高对比度。使用蓝色时，避免同时使用灰色。深蓝更适合蓝色。颜色也有意义。应合理使用红、绿、蓝和中性色来表示不推荐的操作。肯定操作、链接和无效状态。使用这些按钮或功能时，避免让用户感到困惑。例如，唐不要使用绿色按钮删除。

使用图片中的颜色。你周围的一切，只要你留心，都充满了色彩的灵感。当你看到一张美丽的图片、一件事物或一件数码作品时，作为设计师你首先注意到的可能是美丽和谐的色彩。这时候可以拍照或者截图，然后提取颜色。这样，你就可以通过这些提取的颜色生成一个新的色样。

Sip是一款优秀的iOS应用，可以帮助你从照片中创建样本。

手动识别颜色的意思是通过手动的(肉眼识别颜)创建色样是比较理想的，但是这需要我们对颜色有很好的理解。任何工具自动识别生成的色样总是缺乏准确性，最好用自己的视觉。

下面这个例子，我选择了支付宝应用的界面，对应用使用的主色、副色、中性色进行了识别和分析。

主色调一般与整个品牌的颜色一致，会用在图标、按钮、菜单上。副色可以是与主色调相同的颜色，也可以是对比色、邻色等对比色。二次色很少使用，只在需要吸引用户的地方使用注意，比如消息提醒，打折促销等需要醒目标志的地方。对于背景色来说，是用来衬托内容的，也可以起到调和整个应用的色调的作用。那个这就是为什么我们会同时看到亮主题和暗主题的用户界面。

使用AdobeColorCC，您还可以选择不同的颜色匹配模式，甚至可以移动颜色挑选标志来选择不同的颜色添加到您的样本中。

在Dribble上收集颜色，可以浏览和保存色板。你可以根据一种颜色找到所有以这种颜色为主色调的设计，从而激发你的灵感。

您还可以选择不同的颜色匹配模式，甚至移动颜色选择标志来选择不同的颜色添加到您的样本。

另一个我最常去的地方是Pinterest，在那里可以看到很多设计师收集的色板。这是我在Pinterest上的swatch板。

色彩指南了解色彩的基本原理，它们之间的关系，以及如何选择色彩进行配色，对你来说非常重要。我建议阅读下面这个关于色彩的指南，它不仅可以解释色彩的基本原理，还可以帮助你更深入地理解如何使用色彩。

材料设计中的色彩Google推出的材料设计色彩设计指南，其中推荐的色板对于你的WebUI或者iOS设计也是很有帮助的。

草图样本草图样本使您能够非常方便地保存或导入全局或文档样本。其中推荐的色板是用来给你设计IOS的。也很有帮助。我们通常可以从一个全局样本开始，包括iOS、材质设计和平面UI。

色彩渐变美丽的渐变效果在iOS中被广泛使用。通过选择两种匹配的颜色，然后简单地设置它们，就可以产生渐变效果。以下是众多渐变效果的绝佳合集。

SkalaColor一个可以在Sketch和XCode中使用的颜色选择器。支持RGB，HEX等不同格式。

欢迎关注作者s官方账号techmask。

了解更多用户界面设计师和配色手册(配色知识教你掌握ui设计的配色方法和技)相关内容请关注东辰网。