界面配色和配图技巧

最终呈现效果如下（如图19）。

图19

于是我们完成了一个比较满意的概念性设计。这样的概念性设计并不是直接用来投入产品的，而是用来丰富我们的思维。在我们需要设计一个现实中的页面时，我们就可以找到我们的概念作品，将概念作品中的颜色和风格直接运用在真正的产品页面中（如图20）。

图20

需要注意的是：正式的产品设计里导航的高度、标签栏的高度等都是有具体规范的，我们需要遵守这些设计规范，不能天马行空。比如我们在iOS平台上设计APP的话，界面尺寸为750x1334px，顶部信息栏加导航栏的高度为128px，底部标签栏的高度为98px。如果你设计的平台是Android，那么需要遵守另外的规范。关于字体，概念性APP可以使用任何字体，但是我们需要投产的设计字体应是苹果的默认自带字体，英文通常为SF-UI字体，中文为苹方字体。

当当当！设计任务出色地完成了！是不是要感谢概念设计的铺垫呢（如图21）？

图21

四、色彩的配置方法

文章的最后，我想分享配色中的几个小方法。

1．色彩统一

在我们把握界面色彩的同时，我们要把控住色彩的明度、纯度、色相在一定范围内，不能悬殊过大。我们可以看到下图中（如图22），画面中颜色明度纯度都差不多。

图22

想要作品比较亮眼，最好避免使用纯度太高的颜色，纯度高的色彩组合在一起，虽然纯度上达到统一，但是也会显得十分的花哨和辣眼睛（如图23）。

图23

2．画面节奏感

节奏感是指我们在用色的时候，界面上难免会出现冷色和暖色，在他们的配色比例上我们需要做到偏重哪一边。大面积冷色调中如果出现一点暖色，那么整个画面会出现亮点和协调。下图中（如图24），冷色面积和暖色面积比例还是有偏重的，蓝色面积、灰色面积、红色面积和橙色的面积各不一样，这种色彩的层次感就增加了节奏感，给人带来印象深刻的视觉冲击。

图24

3．色彩的重量

画过颜料画的同学可能知道，在我们构建一幅画的时候，会有一个大调子，比如说冷色明亮的调子，暖色昏暗的调子。我们在亮调子的画中，会多加白色亮色颜料；在暗调子的画中，会加入深色的颜料调和。决定这些的因素是色彩的明度和纯度。我们把明度提高纯度降低，会使得画面变亮变轻，同时给人的感觉是轻快放松的；我们把明度降低纯度提高会使得画面变沉重，给人的感觉是沉稳冷酷。我们在思考一个界面配色的同时，不是看到好的配色就立马用到设计中，首先考虑的是设计的主题是什么，符合什么样的特性，然后我们再根据分析结果找到最匹配的色彩范围。

这是我总结出来的一些配图以及如何让配图与界面整体更加和谐的小技巧，希望各位都能设计出更棒的作品来！

最后来做一个作业吧，请依据今天所学，为下面三个新闻界面配色配图（如图25）。源文件可下载。

图25

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/