界面配色和配图技巧

一、简单思路分析

假设我们希望完成一个运动类APP的设计，那么我们需要做什么呢？第一步就是竞品分析。我们需要分析出市场上常见的运动类APP设计都长什么样（如图1）。

图1

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

我们发现，现在市场上的运动类app大多用色比较重，或是暗色调。这样的配色方案多少会为了满足商业或运营的需求，我们在平时做练习的时候可能不容易考虑到这些点，那么就从我们所看到的东西来分析。

重色调更加有力量感、品质感。我们同样能看到图片都做了压暗处理，这样在突出文字的同时也能让图片的品质感有提升，还有就是能和界面的色调统一。看到这种配色的界面会有一种我们都要练成专业运动员的感觉。当然也不能排除竞品都这么做我们也要这么做这个因素。

这些配色方案当然也很不错，但是对于部分上班族来说，包括设计师，我们的锻炼时间相对较少，而且在经常加班的状态下，我们的锻炼方向更应该倾向于调整自己的身体状态，让自己元气满满地进行一天的工作。所以，假如我来做这款产品界面的话，我更倾向于让界面看起来更加清新且充满活力。这样的话既能满足上班族的状态，又能做出差异化。

基于以上分析，我决定从"活力、清新"的角度出发，做出一款充满活力和清新感觉的app。因为这篇文章要将配色和配图的技巧，我们就不对界面的排版结构等方面做详细分析。

这是我做好的一个运动风界面，围绕这个界面我来讲一下配色和配图的技巧（如图2）。

图2

二、界面配色技巧

我这里采用的是从现有图片中获取配色的方法。

首先，围绕"活力""清新"这两个个关键词，可以联想到比较具象的事物，比如冲浪、植物、阳光等。然后根据这些具象的关键词来寻找图片（如图3）并挑选出自己喜欢的图片（如图4）。

图3

图4

这时候就可以把挑选好的图片置入ps，直接用吸管工具吸取图片中的颜色并记录下来。我这里选择了图4中右上角那张图（如图5）。

图5

我通过吸取图片中颜色得出一组蓝色和绿色的组合。组合必须达到两点要求：一是颜色之间要和谐；二是必须有亮色有暗色，因为界面中既有背景也有文字，所以必须明暗上拉开差距，才能保证阅读。

我们发现这些颜色都在调色板偏右或偏下的位置（如图6），根据调色板的特性，这些位置的颜色饱和度高而且会泛黑。这里要强调一个点，我们要的是图片中的配色方案，比如蓝配绿，蓝配黄等，并不是具体的色值，因为我们的作品是要在屏幕上显示的，直接运用原图片中的色值会让整个界面看起来特别暗。

图6