配色方法,三种UI的选择配色方法

2022-12-26 18:34:35 来源/作者: / 己有:72人学习过

3、 调整透明度(1%-100%随意,省心的做法是直接键入一个整数值,比如:轻质感类页面可以选20%-40%,重质感感类可以键入60%或以上)

如下图(将色块使用“柔光”混合模式,调整不一样的数值得到不同的效果)

配色方法,三种UI的选择配色方法

同样的方法:界面中的字体颜色、细节线条、按钮渐变、边角高光、描边阴影……都可以用这样的方法取色使用这个方法的优点是:色彩获得比较简单 , 无需了解色彩的指数和直方图 , 不用看色轮.....只需要设计师具备色彩的审美 , 能够合理的应用。

配色方法,三种UI的选择配色方法

方法三: 色彩提取法

这个方法是从现有的自然色、图片色中提取所要的颜色,给应用和搭配赢得了不少的时间。

1、找图

找一张符合所要设计界面风格的图(本教程用图为Galaxy S4自带壁纸)

配色方法,三种UI的选择配色方法

2、提取颜色

将图片放入PS中,点击“存储web所有格式”(Windows快捷键为Ctrl+shift+Alt+s),格式选择png,色块选择8。

在颜色显示区域会留下8种颜色,点击颜色区域右侧下拉按钮,会找到“存储颜色表”,把他存储到桌面上或者你容易找到的地方。然后用PS打开,色板中会显示刚才提取到的颜色。

配色方法,三种UI的选择配色方法

成功提取出8种颜色

配色方法,三种UI的选择配色方法

3、应用

配色方法,三种UI的选择配色方法

配色方法,三种UI的选择配色方法

具体的颜色应用为:

1、导航文字及logo的颜色为最浅的蓝色;

2、Banner区域既大背景,这里用了开始的图片。上面的大标题logo则用了最深的蓝色;

3、内容区域出现的提取到的三个色相的色彩,如果只是排列剩下的几个颜色的话,颜色会很冲,所以用了几张图片来过度颜色调整画面的节奏。现在看来效果还不错,内容区域的文字颜色与导航文字一致,都是最浅的蓝色;

4、内容区域的几个按钮并没有用提取的颜色,而是用白色叠加然后调整透明度出来的。

总结 : 以上的三种配色方法思路是完全不一样的,希望多多少少能带给大家一些收获。在学习新的方法的同时,也要学会举一反三,结合自己已有的经验和设计师独有的对色彩的感觉,形成一套属于自己的配色方法。