当前位置：首页 > 窍门 > 科技数码

强烈推荐！帮你从零开始全面掌握UI设计的配色方法（一）

来源： 最后更新：22-03-23 02:23:34

一篇你绝对不想错过的文章！以前的色彩知识大多是基础科普，容易看完就忘，配色时还得翻书。但今天这篇，大多是从实战出发，学完可以立刻上手，而且还附有作者本人的色板、配色工具等等，无论是小白还是UI设计师，这篇都不容错过！

　　

　　我们从小都能熟练地区分颜色，但为什么当我们需要运用色彩进行UI设计的时侯，却往往发现很难恰到好处地运用色彩，作出那些和谐得体、令人赏心悦目的设计来呢？……我觉得原因是我们对色彩的认识和实践不足，以及当我们做设计时，很容易会过度地使用色彩。作为设计初学者，你需要掌握基本的色彩理论，通过实践不断加深对色彩的认识，并最终能够熟练地运用各种色彩，搭配出平衡且使人愉悦的设计来。

　　

　　基色、间色、复色

　　

　　配色的第一步是选择一个主色，我建议从选择一个明亮，柔和的基色或间色作为开始。这样的选择往往是相对安全的，关键看你接下去如何使用它以及选择合适的色彩去搭配它。

　　

　　色相、饱和度、明度 （HSB 或 HSV）

　　

　　当我们需要运用色彩时，首先理解色彩的相关特性非常重要。许多人选择使用RGB色彩模型，但我想说RGB是计算机对于色彩的表示形式，我们很难说清一种颜色是由多少红，绿，蓝组成的。作为设计师，HSB色彩模型更加好用，因为色相，饱和度，明度是我们大脑对色彩理解方式，这些属性对于我们理解和运用色彩更有意义。

　　

　　单色（Monochrome）

　　

　　是指通过对同一颜色，加上10-90%白色或黑色的透明度层后获得的一组颜色。由于他们的色相相同，而又能产生和谐的对比效果，因此单色的应用在设计中非常重要。

　　

　　邻近色（Analogous）

　　

　　是指在色相环中相邻的色彩。很显然这样的配色方案不会产生高对比度。当你觉得自己的设计在色彩上太过单一时，可以使用邻近色来增加色彩上的变化，从而使你的设计更有层次和活力。

　　

　　比如红色是橙色的邻近色，而橙色又是黄色的邻近色。

　　

　　互补色（Complementary）

　　

　　是指色相环中，相对（互为180度角）的两个颜色。互补色让人产生强烈地对比效果。例如，紫色按钮在黄色背景上非常的突出。当然，这还取决于每一种颜色的饱和度。互补色经常用在需要突出显示的按钮、警告等地方，但使用不当也有可能使你的设计显得非常突兀，通过实践来理解是最好的，请记住： 对立对比 。

　　

　　中性色调

　　

　　是指由黑色、白色及由黑白调和的各种深浅不同的灰色系列，中性色不属于冷色调也不属于暖色调，它可以起到中和剂的作用。过多的使用色彩会使整个设计缺乏可用性，而中性色却可以帮助将用户的注意力拉回到内容本身。

　　

　　对比

　　

　　通过有效地使用对比可以使你的内容更加清晰从而让阅读变得轻松。好的对比，一般会采用色彩的两极，如白与黑，淡蓝与深蓝，高亮与低亮。

　　

　　UI中的明与暗

　　

　　在一些情况下，你需要根据品牌或可用性来权衡UI的明暗。比如iBook的应用中，当外界环境变得昏暗时，它会自动切换到暗色的阅读模式。

　　

　　明亮UI的配色原则

　　

　　内容应该比背景明亮。通过亮度的对比，可以使你想突出的内容轮廓更加清晰易读

　　

　　不要过度使用颜色。颜色总是可以抓住人们的视线，但过度使用却会往往会人们忽视主体内容，因此，仅在需要进行突出提示的地方，如重要的按钮以及需要突出的状态时，使用颜色。

　　

　　暗色UI的配色原则

　　

　　不要使用纯黑，那样很难看到细节，另外与白色的对比会显得过高。

　　

　　如果你必须使用黑色，那么请选择使用暗灰作为替代，这样可以消除过高的对比度

　　

　　当使用蓝色时避免同时使用灰色。深蓝与蓝色更相配

标签: 平面设计  标签  简介  UI  

免责声明：本文系转载，版权归原作者所有；旨在传递信息，其原创性以及文中陈述文字和内容未经本站证实。

本文地址:http://www.zuomama.com/qiaomen/youxi/145736.html

强烈推荐！帮你从零开始全面掌握UI设计的配色方法（二）

网站首页 返回栏目

UI设计 一个完整的UI设计流程是怎样的？