写这篇文章是因为写完《 也许是最优秀的流媒体播放平台 - Spotify 体验报告 》(后简称《Spotify 体验报告》)后，收到了 Matrix 的运营编辑 @Tree li 邀请，来让我分享下关于文章中配图的设计思路。我绝对不知道，一个刚在少数派写了一篇文章的萌新，怎么收到了 Matrix 的运营编辑 @Tree li 邀请呢？当时我说另请高明吧，我实在我也不是谦虚。但是呢，@Tree li 说“大家已经研究决定了”，所以后来我就……好吧，扯远了，终于趁着假期¹ ，能把这篇文章补上了。

配图的目的

配图最主要的目的是为了用更直观的方式展示文字表达困难的内容，优秀的配图往往可以提升阅读的体验，让读者抛离晦涩难懂的文字来了解文章内容。亦或是一两个彩蛋，给读者惊喜。

于此同时，图片的存在也给读者一定的「休息空间」，从而让读者视觉上从密集的文字中脱离出来稍作休息，继续阅读。

在文章中的每一张图片，都要有考虑存在的意义。能够通过文字清楚直接表述的，没有必要添加图片。过多的图片，尤其是和文字关联不大甚至是没有关联的图片和文字交叉重叠时，会打断阅读的进程。反而严重影响阅读体验。这种做法主要泛滥于微信公众号的文章，好在那里面绝大多数文章本来就没有任何价值。

说到底，一篇文章的质量最终还是要回到文字的本身，去评判文章的优劣时，相比于图片的质量，文字的质量显然占更高的比重。为图片花费几个小时无可厚非，但同样的，也要花费更多时间对的文字进行打磨。

配图的要求

所有一味的为了所谓的美观因而牺牲阅读体验的做法终究是耍流氓。看得清楚，达到要求的优先级一定要大大高于「看着漂亮」。这里不是说要为了看得清楚，就不去在意「设计」，而是去把控的一个整体的平衡。举个例子来说，信息量密集的图表在移动设备阅读的时往往会很困难，在设计时要尽量避免。

配合品牌内容

当分享的一个应用的使用界面时，配图的风格最好同这个应用官方的视觉风格相吻合。让用户第一感觉不陌生，进而增强亲近感。

在允许的前提下，图片尽量从官网获取，而配色一般选择品牌颜色。通过 Chrome 的开发者工具，能轻松的获取官网的图片和品牌字体。如果你稍稍了解一点 HTML + CSS，可以轻松从官网找到无法直接保存下来的图片等元素。在《Spotify 体验报告》这篇文章中，很多渐变的取色就是来自官网的颜色代码，然后做成线性渐变制成的。配图也大量使用了官网上提供的元素。

此外，在对网页「下手」之前可以去官网仔细找找，很多优秀的公司会把 Logo 或产品的图片官方会在开发者页面提供，可以直接下载，他们还会对图片的使用方式提供文档，来规范你的展示方式。

排版的选择

在 PowerPoint 中，可选的版式丰富多样，但是出于 1. 看得清楚的优先级应高于看着漂亮。2. 为了确保在移动平台达到和桌面系统一样的体验 这两个要求，可选的排版就会变得很小。一般来说确保焦点在水平居中的位置。并且适当减少同一张图中的元素数量。

在制作过程中将多个元素水平均等的分布在画布中心，配合几何图形点缀，并对加之以阴影，从而得到一张典型的文章配图。

而使用透明背景还是用² 纹理作为配图的背景往往没有固定的要求。通常取决于整体的风格定位以及对配图比重的考量。当需要加强图片的重要性时，鲜明的颜色可以达到很好的效果。在修饰时，可以去 freepik.com 这类网站寻找很多可商用没有版权问题的矢量素材。

回头再看《Spotify 体验报告》，发现有很多不足的地方，很多配图看起来更像是 PPT，但是制作时出于展示 Spotify 品牌元素的考量，装饰元素略多，某种程度上影响了展示。

截图的处理

我派的文章往往少不了应用的截图，在展示截图的时候，尤其是单张图片时，往往套上手机壳，视觉上减少一定的突兀。而多张图片水平展示时，可以尝试给边框添加一条线来让截图和文字区隔出来。「套壳」时，在 Android 上可以使用「Screener」或我派的「带壳截图」，iOS 上面也有应用来实现套壳的效果。如果多张截图放在一张图片的话，也至少要有区隔，不要将屏幕上的内容同背景融为一体。

此外，保持美观的同时尝试只展示重要的内容，比如说你展示应用的功能时，通知栏上其他的图标只会让图片不够「干净」，在 Android 截图的时候，最好通过开发者选项进入 Demo 模式，给读者一个干净的通知栏。

指示标识 & 彩蛋

当同时插入多张图片并且每张图片加注单行文字后，经常会让人记不清这行文字对应的是上面的图还是下面的图，这个时候就最好有一个指示标识，比如「▲」和「▼」，给读者引导，不过在我派这边，显然还是尽量用对图片的「文字描述」更好些。

而彩蛋的存在对内容本身是无关紧要的，但通过配图去给一篇严肃的文章增加一些小幽默也算是给读者的一个惊喜。比如当我们说到在 Android 上使用 Bottom Navigation 可能会和虚拟键出现下巴和误触时，一张 HTC M8 的截图和「 ;-)))))))))))) 」注释就可以很好的体现出来。实际应用中，对于不严肃的文章，从 9GAG 或 imagur 添加一些 Gif 或者 Memes 都是很不错的选择。

类似这样的彩蛋不用太多，往往一两张就可以达到很好的效果。

封面的制作

在少数派编辑器使用指南中提到上传尺寸为 700 px * 233 px 的图片为封面，但是最好上传等比例更高分辨率的图片作为封面，来确保图片的清晰。文章正文页顶部的封面为 700 * 233 分辨率，而对于上首页的文章，官网采用的是 1440 px * 480 px 的大图，并把实际显示尺寸限定成 720 px * 240 px。

由于首页在移动设备显示时会根据屏幕的尺寸，视情况裁剪掉封面两边的内容（正文的配图不会出现这种问题），因此在制作封面图片时，如果有文字等主体，一定要将其放在整个封面的居中位置，并且确保宽度不要过长（事实上在很多情况下过长的文字都会对阅读体验大打折扣），来保证在任何情况下都可以看到文章的主体内容。

也是由于这个原因，相对于左右两段式的排版，我会选择主体居中的方式，配合文章内容，将背景使用矢量图片或者品牌元素。同样，这些元素大多可以从官网中找到，Chrome 的开发者工具异常强大。

相对于正文配图，需要一个绝对素雅的底色，我们制作封面的背景时经常需要一些图片（或者说是照片）用于展示 。这时候可以从 pixabay.com / unsplash.com / pexels.com 这类网站中找到大量符合条件的图片，这些图片你可以放到任何地方使用，不会出现版权问题。

制作配图的工具 & 演示

绝大多数图片制作处理的工具都可以完成要求。一般情况下，我会选择 PowerPoint 来完成（请开始你的吐槽）。因为它满足绝大多数的要求，而且对笔记本配置要求也不会太高。当然，面对一些复杂的设计，也会同 Photoshop 配合使用。

为了不把这篇文章写成 PowerPoint 分享，下面就只通过在我写的《Spotify 体验报告》这篇文章中展示「Your Daily Mixes」的一张配图，来分享下我自己制作配图的流程。

Spotify 大多数采用了是线性渐变。从 Spotify 官网的一个链接中找到了一个 Banner，我们直接截取一部分色块，粘贴到 PowerPoint 中。在工作区执行右键 - Format Background，来修改背景颜色。

在背景填充中选择渐变填充，类型为线性渐变，角度为 90°，然后选择两端颜色为之前截图色块的两段颜色。这一操作可以通过颜色选择中的取色器工具来完成。

接下来把 Spotify PC 客户端的 Your Daily Mixes 截图，放到 PowerPoint 中，并裁剪掉多余的部分，突出主体的显示。

因为 Mixes 下面有很大的留白，所以当时想到除了生硬的剪裁外，可以制作一个锯齿状的边缘，模拟撕裂的效果。因此通过插入-形状，绘制等边三角形，并复制多个。选择全部三角形，通过形状格式中的对齐命令，将三角形排列成一排。并通过格式 - 合并形状 - 联合，将这些三角形合并成一个整体。

移动这个合并后的锯齿到合适的位置，按 Ctrl 键同时选中图片和锯齿，执行格式 - 合并形状 - 拆分，然后删除不需要的元素，那么主体图形就制作完成了。之后通过执行 右件 - 图片格式 - 阴影，来调整阴影的位置。

最后要在图片顶端加上「Your Daily Mixes」文字，这时候我们就需要通过官网找到 Spotify 的品牌字体。打开 Spotify 官网，选中任意品牌文字，执行 右键 - 审查元素 打开开发者工具。可以看到 <span> 标签被选中，右侧的寻找 font-family 字样，发现其属性为 inherit，其意义为套用父元素的字体，所以我们在左侧的工具中向上寻找。直到看到右边的 font-family 属性中表明了明确的字体为止。第一个字体就是我们要用的字体名称：Circular。

然后我们需要下载这个字体。点击开发者工具顶端的 Sources，我们可以在左侧的菜单中逐一展开，寻找字体，也可以直接搜索字体名称。执行快捷键 Ctrl + P，搜索 web 字体格式 woff，然后对照字体名称，按回车键打开。这里有四个不同字重的字体，我们依次打开。在上面的标签中点击右键，拷贝链接地址来下载这几个字体。

下载后，通过转换工具把 woff2 格式的字体转换为可以在 PC 上安装的 ttf 字体。最后就可以给 PowerPoint 中的文字赋予这个字体了。

上面就是一张简单的配图制作过程，在使用 PowerPoint 制作配图的过程中，辅助线，布尔运算和对齐工具往往是离不开的。

总结

其实说到底，设计本不应该有一个绝对的标准来评判。而且有的时候跳出常见的设计标准和框架也可能会有一些超出意料的效果。配图的选取和制作，往往要把自己当成读者，来浏览写过的文章，就很容易发现在这个过程中出现一些「不适感」。消除浏览时的「不适感」的过程中，对技术往往没有太多的要求。更多的是一点点对设计的敏感，细心和认真。而这个，也许就是所谓「做事儿的方式」吧。

感谢你的阅读。