只修改配图，就能让作品集质感大幅提升的实操案例

推荐阅读

正好最近有一个学员的提交的作业，在配图上有比较明显的问题，所以我们以它为案例进行配图的优化。

下面是原图：

声明：这次的优化以优化配图为主，为了更好地进行前后对比，基本不修改原界面布局和样式。

一、首页配图优化说明

首先做个简单的配图分析，作为新闻应用来说，配图的来源是非常灵活的，因为任何题材都可以是新闻的一部分，所以给了设计师非常大的发挥空间。接下来看首页的用图，能感觉到非常刻意地迎合主色，所以会显得过于单调。并且多数图片都缺乏主体，使得图片的焦点松散，没办法支撑整个页面的重心。

第一步先调整首页的顶部轮播图，这张图会关联到背后的浅色背景，以及下方蓝、红的瓷片区，主色很多再用蓝色不合理。而作为顶部轮播图要关联最近热点，且这个热点应该有良好配图来源的，那我会先想到理想 L6 或小米 SU7 这些电车，以它们的新闻和图片做首图不会有任何不合理的地方。

理想官网虽然有很多优秀图例，比如下面这些：

但并不是所有单看优秀的图例都适合应用到界面中，使用下来的结果会变成这样：

这都是上面提到的问题，所以想要效果好就必须用更简单的图例，所以我只选择主体突出背景内容很少的单车图例，然后再根据选的图去修改对应文章标题，结果如下：

然后瓷片区内用的键盘和标题非常不搭，所以直接找个 Openai 的创始人照片来替换：

再往下的新闻列表根据最近能想到的一些事件去找图，秉承 “先找图，后配字” 的思路完成，同时为了兼顾真实性新闻类型就得不一样，上面用了车的图下面专题就要换别的类型（也可能是广告），比如最近的苹果 iPad Pro 新闻，虽然本来要找 iPad 的图但没找到合适的，看到华为的，那就顺带把标题改成两者对比的即可：

再下面就是视频卡片，作为视频的封面首先高度是可以优化的，不一定要按原比例显示节省空间，所以线上 APP 的视频卡片都有目的性的缩短了高度。

然后我们再挑选相关的新闻图，比如娱乐八卦、科技动态等，将图片填入并替换标题即可。

再往下是一个更偏向广告类型的专题，而在这里要强调第二个问题，前面所有的图例用的都是摄影图，但一个图片内容多的页面要对图片进行管控并不只是摄影图本身的特点，还要对图片的类型做出更改，比如使用平面广告或插画等其它元素。

所以在这里我们可以应用平面广告图（Banner 设计），但鉴于很多同学的平面水平……我不得不给出以下建议：

1. 找到合适的广告图 1：1 临摹，同时练习 Banner 设计
2. 直接应用线上的成熟案例，截图或者素材置入进去

理论上 UI 设计里的配图只要引用即可，这些次要广告图不想自己设计问题不会太大，一定程度上规避掉对应能力不足的问题。否则独立设计做出来的成果往往只能成为减分项，还要耗费大量的时间去调整，降低设计的效率。

下面是选择成品替换的效果，广告图的高度会根据成品图的要求做出一定的调整（这里改了后续其它同类组件高度也改）：

这样我们就完成了初步的首页配图的调整，可以看看下面前后对比：

在最终效果中，最后一张广告图在底部其实平衡感并不好，在手机上浏览的时候因为单屏限高不会有感觉，但在界面的整屏展示中，效果是不太好的。

所以最后还可以把上面的专题图也替换成广告图进行呼应，同时让画面的图片类型更均衡。

二、其它页面配图优化

接下来进行频道卡片的优化，目前的配图用了主色的图片，所以形成了同色的背景，蓝的太突出了。

在页面中反复应用主色没有必要，但作为第二页面又强行引入别的明亮的色系也没必要，所以我打算一开始就找比较写实沉重的照片，颜色压暗。

想起来最近巴以冲突的照片再次获得荷赛奖，就去搜了下荷赛奖（新闻摄影奖项）相关的优秀作品，有不少符合我们的需求而且画面也充满故事性，作品也有完整的事件说明：

然后就是用这些图片来替换原来的图例了：

这里用哪个结果是待定的，因为这里考虑得更远一点的话，就是选的配图影响的不只是当前页面，而是和其它页面摆在一起时的效果。

在接下来的视频合集页面中，作为一个视频专题内容要有关联性，那么前面的摄影组图就有发挥空间，作为一个关联性的页面直接用成套的图例进行填充而不是另起炉灶。

接着是话题页面，和上面视频合集类似，下面的图片内容有关联性，所以选择一个主题或找到一张锚点图例以后，以它展开置入其它同类型图片。

这里我选择用 AI 相关的话题，这样可以用 3D 相关的场景图做新闻封面而不是只有摄影图：

最后就是剩下的推荐页面了，按常规思路替换下图片即可：

三、最终效果对比

下面是配图更换前后的对比效果：

在这次案例里，只改图会有比较大的局限性，如果想要发挥图片的最大效果是需要调整组件样式配合的。并且作为新闻类的应用，写实性要求比较高，所以必须要保持克制不能在用图上太浪，导致最终得成品 “一眼顶针”……

PS：因为是演示也不想做太激进，用力过猛对你们影响不好 =.. = ！

虽然没有把整个项目所有图片改一遍，但还是选出多个页面的目的，就是为了表明配图是具有全局性要求的，需要考虑和其它页面排列时的协调性，是整体的拼图。

而根据应用题材、配色的差异，配图的整体应用逻辑也不同，比如潮流、运动、电商、音乐的类型适合色彩多冲击力强的，阅读、新闻、AI、B 端类的应用适合色彩均匀不突出的类型。这些都要靠设计师尝试不同的方案选择最好的那一个。

结尾

花费那么大的力气选图看似和 UI 界面本身关系不大，但在激烈的人才市场竞争过程中，配图的好坏就是能直接影响招聘方的心态，只是大多数面试官口嫌体正直而已。

而这种配图的选择能力是会随着经验的增加越来越老练和高效的，在经历前期一两年做图 5 分钟配图两小时的磨难以后，就能产生质的飞跃，而届时你们发现 UI 设计师里还可以划分成两个类型，会用图的和不会用图的，而这个门槛是后者无法轻易超越的。

顺便说一句，以前有整理过配图的一些素材，后来链接失效没更新了，可以不用纠结那些素材了，毕竟年代久远了，而且高质量的配图应用是无法用事先准备的批量素材满足的。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」