三、界面配图技巧
接下来我们就要开始配图了。在配图之前我先讲一下配图的几点技巧。
界面设计由拟物化走向扁平化这是大家众所周知的事情，（比如男同学们越来越喜欢周迅而不是柳岩了 = =），扁平化的重要理念就是突出内容本身，所以好的内容（文字、图片、视频）就成了界面设计整体中特别重要的一环。比如我们看这张图（如图12），同样的界面但配图不同，会让你觉得他们的逼格不在一个宇宙里。
图12
我们来分析一下这两个界面。右边不合适的配图会让界面看起来很山寨。在找图片的时候我们先得分析我们已有的界面信息。以上界面在没有配图的情况下，信息已趋于饱和，所以为了调整画面节奏感，我们需要找的是有空间感的配图，而不是右边那样构图很饱满的图，不然会破坏节奏感，使得整个界面秩序较差，不知道是先看图还是先看文字信息。左边的配图本身就有了空间，作为这个界面的配图，不仅能增加节奏感，还能营造氛围。当然，最重要的是，我们的配图和界面在配色上一定要达到统一。
我们在挑选一张好图的时候要注意贴近实际内容，不能因为图片本身的美观和逼格忽略了实际要表达的主题；还要注意图片上是否有多余的信息影响主题的表达，如果有的话尽量去掉或是用另一张图片来替换；最后一点很重要，图片的清晰度一定要过关。总之，一张好图并不是简单的好看就可以，重要的是主题表达是否到位。
结合上面所说的技巧，我们为刚才运动界面来配图，这个界面我事先预留了放置图片的位置（如图13）。
图13
因为是一款运动类的界面，所以我要找一张运动类图片，并且要贴合“活力”“清新”这两个关键词，经过多次尝试，最终用“跑步男”这个关键词找到了我想要的素材（如图14）。
图14
首先这张人物素材的动作幅度较大，速度力量感都很到位，而且人物衣服的配色和我们界面的配色非常的搭；还有一点，人物倾斜的身体和眼神具有非常好的引导视线的作用，能引导用户注意界面中的重要信息，我想尝试把这一点运用到界面中，所以我决定选择这张图片。
我们放入设计稿之中看看吧！然后把人物调整到合适的大小，这时候看起来好像也没什么毛病了（如图15）。
图15
但是没有对比就没有伤害（如图16）。
图16
这是我调整之后的，大家可以看看前后（图15为调整前，图16为调整后）的对比效果。下面我具体讲一下为什么调整成这样。
首先，人物素材虽然服装配色和界面配色比较搭，但是从明暗上明显比界面暗了几个等级，所以人物素材放在这个界面中会显得比较暗颜色比较脏。我们可以用吸管取色的方式来测试颜色。用吸管工具选取人物服装中介于最亮和最暗中间的颜色，为了更加准确我这里选取了5x5平均（如图17）。
图17
根据前边的分析，颜色处于调色板中间的地方会看起来显脏（颜色偏灰暗），所以我做了如下调整（如图18）。
图18
最终呈现效果如下（如图19）。
图19
于是我们完成了一个比较满意的概念性设计。这样的概念性设计并不是直接用来投入产品的，而是用来丰富我们的思维。在我们需要设计一个现实中的页面时，我们就可以找到我们的概念作品，将概念作品中的颜色和风格直接运用在真正的产品页面中（如图20）。
图20
需要注意的是：正式的产品设计里导航的高度、标签栏的高度等都是有具体规范的，我们需要遵守这些设计规范，不能天马行空。比如我们在iOS平台上设计APP的话，界面尺寸为750x1334px，顶部信息栏加导航栏的高度为128px，底部标签栏的高度为98px。如果你设计的平台是Android，那么需要遵守另外的规范。关于字体，概念性APP可以使用任何字体，但是我们需要投产的设计字体应是苹果的默认自带字体，英文通常为SF-UI字体，中文为苹方字体。
当当当！设计任务出色地完成了！是不是要感谢概念设计的铺垫呢（如图21）？
图21
