首先，什么是App 预览和截屏，就是当你在 App Store 中搜索 App，和在App详情中看到的图片。这些图片必须和iPhone的比例相同。虽然你可以直接在iPhone上截图之后直接上传，但是在这样一个曝光频率很高风水宝地，这几张图的好看与否就决定了用户对于这个App的第一印象。很多App也都在这几张图上做了很多文章。所以今天我就来讲讲，在我设计这些截屏的时候，都是怎么迭代的，都用了哪些工具，踩过哪些坑，以及我的思考。
这是 App 上线时的第一版截屏，当时的功能比较简单，每张图就是简单的套壳截屏，也没有什么设计可言。尤其是第一张图，就是当时随手拍的一张照片，现在看来在美感上简直是灾难。唯独可以谈上几句的就是没有使用纯白和纯黑色的文字和背景。让效果看起来还算是舒适。下面链接就是我用的截图设计工具，使用起来也非常简单，自带了许多iPhone模版，可以很方便的更改。
在这个版本中，首先是App增加了许多新功能。我很努力的尝试在这几张截图汇总全部表达出来。按照常规的套路，第一张是 App 的总览，以及主要的 Slogan，为 Pro 设计。后面的几张就是各个功能点。另外一点就是国际化，在这个版本中，我加入了英文。但这几张图放在现在来看，依然感觉不太及格。
首先依旧是头图的问题，这里的头图是我在滨海湾的商场里拍的一张图，也许单独拿出来确实确实说得过去。但是这里的图片的作用只能是配角，作用不是显示拍照的摄影师水平有多高，而是和谐的融入到整张图的氛围中，让用户能够更加专注于App的设计和功能。
另外一点需要考虑的是，App 截屏在用户屏幕上的面积是很小的，所以无论是布局，还是素材都应该尽量简单，不然就会显得杂乱。很显然这张头图就是一个反面例子。
接下来是背景。为了增加一些设计感，我给背景都加上了渐变。但是似乎有点过头了，大范围的渐变反倒让背景过于凸显。同时也让文字的可读性变低了。
终于，在V3.0，我对App Store截屏进行了重新设计。并且投入了极大的时间和精力。而且这次用上了十分重的3D设计工具--Blender。
首先我找到了iPhone的USDZ 模型，接着我又在 Sketchfab 上寻找可以与其搭配的素材。比如找到了一台佳能胶片相机，一个台灯，一个镜头，和一个木头桌子。将这些素材全部导入Blender。我需要对素材做一些修改，例如需要在材质贴图上抹去佳能的标签。把iPhone的贴图上替换成屏幕素材。接下来就是布置，打光，渲染。这些花了我两天的时间。
但这还没有结束，最后渲染出的是没有背景的PNG图片，我又将图片导入Photoshop，在PS中为其增添背景，文字，同时调整画面的阴影，高光，噪点，让其更真实。
不过我犯了一个很严重的错误，就是在Blender输出图的过程中，我忘记分图保存成不同的场景了。而是每输出完一张图我就把布景都给拆了然后去设计下一个布景。这就造成了我要更新界面UI的时候才发现，要在Blender里把更新的界面贴上去已经不可能了。这也是一部分我废弃这个方案的原因。
而且这次我做了五个语言的本地化：简体中文， 繁体中文，英文，西班牙语，日语。光是Photoshop的设计就让我累的够呛，因为我还需要设计如何将文字以遮挡的方式融入到图层中。
从结果上来看，这次的设计起码是及格了。重点突出的比较得当。同时也有一些心思，比如Live Photo那张图，我特地给Live Photo的图标打上了高光。并且整个画面还有微微的景深虚化，更能聚焦在图标上。字体我使用了 OPPO Sans，这是我目前比较喜欢的中文字体，至少我认为看起来比苹方好看。
可是当我看了一圈其他App的设计，我发现似乎我这样的截屏，似乎有点过于特别了。比如绝大多数设计都以简约扁平为主，有的也没有真机的边框，背景再填充上一些渐变的线条，色块。最后字体采用一些艺术字就完成了。我的截屏和App Store的风格就显得格格不入，再加上更改复杂的原因，最后我还是决定重新设计。
我想了半天，突然发现我总把自己不自知的框在了一个框架之内，那就是每张图片都要有手机，有截图。如果跳出这个思路，是不是就会让设计更轻松一些呢？于是就有了目前的截屏设计。一共由七张图片组成。
第一张图，没有照片，只有一个 No Fusion 的图标，以及一句Slogan。
这张图我很满意，左上的图标投下细腻的长阴影。大大的No Fusion占据了空白，让整张图片更具风格。图标旁边淡淡的编辑推荐，不显眼但很精致，有一种淡泊名利的感觉。右下的纯白色Slogan，和上方白色字体的图标呼应，能够吸引眼球。
而且由于文字和截屏被分开变成了两张，我终于可以将第二张直接放上截屏。这次相机里的照片我也非常满意。正如前面所说的，这张照片是我特意处理成黑白色的，非常简约，使其非常好的融入在了氛围之中。（忘了把左下角预览图也做成黑白的）同时橙色的对焦框画面的中心。和下一张图左上的“专业功能，一触即达” 呼应。
第三张图也蕴藏着一些小设计，例如HDR的辉光，锁定的橙色字体，白平衡的黄和蓝。这里还有一个比较有意思的点想要和大家分享。这两年苹果的 SF Pro 字体，不仅有可变字重，还新增了可变字宽。利用可变字宽，也可以给你的设计增色不少。并且今年宽体字也第一次被用在WWDC的Session中。
所以，在我的设计中，第三张的英文为了更显紧凑，使用了Compressed。第五张的ProRAW，为了突出，使用了Expanded，效果还是挺不错的。
另外这次整个流程都变成了在Figma中完成，算是从上一次的复杂工作流中返璞归真了。得到的效果也不差。不得不说，简约的设计真的非常适合没有专业设计经验的独立开发者。同时Figma的体验真的比PS好很多，比如我之前在PS中做了四张图，每张图都要存成一个PSD文件，然后又需要制作五个语言的本地化，这样就有20个文件要保存。但是在Figma中，一切都非常简单。Figma真的很适合干这种活。
好了，以上就是我几个月来对于App Store截屏的思考和设计，希望对你有所帮助。如果觉得设计的还不错，也欢迎来试试我的App。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。