【案例】如何设计抓眼球的APP商店预览图

由宝珠 · 发布日期 2020-05-07 · 已更新 2022-04-08

翻译：跳舞的花生审校：天蛙 & 宝珠 | UXRen翻译组 #339译文
作者：Girish Rawat

原文标题：《How to Design Scannable App Screenshots——Redesigning HeyDoctor’s App Store Screenshots》

让我们玩个游戏。在你手机里挑一个你喜欢的应用（app）。现在你是这个应用的创始人，并希望从投资人那拉到投资。你有1分钟时间向风险投资人展示你的应用。你得在60秒里说服他们投资。你会怎么做？你会描述这是个什么应用吗？你会说相比起竞品，这款应用有哪些独特之处吗？你会展示它的用户体验有多好吗？

应用商店（app store）里的用户平均用7秒时间决定是否想下载你的应用。一项关于下载决策的研究表明，在25,000位访问者中，有10,000人会在看过预览图后秒速安装应用，这个比例占据下载决策原因的第二位，排在第一的则是应用的评分。

我们发现人们花在应用详情页（store listing）的平均时间是7秒。事实上，大多数人甚至更早就离开了页面。感兴趣的用户浏览时间相对较长，但他们都通过同一条路径来了解应用：点击图标——浏览前两张预览图——扫读应用介绍的首行内容。

—— Peter Fodor.《为什么7秒能够成就你的应用，也能够毁掉你的应用》

预览图像镜子一样成像你的用户故事，并折射其用户体验。我借助Incipia上优秀人员收集的数据，研究了前100个应用和它们的预览图。我将在本文中引用多项研究的主要发现。

挑选应用：HeyDoctor

HeyDoctor是一款帮助用户线上问诊并拿到医生处方的应用，用户无需去医院看医生。HeyDoctor可以开处方药或者续开处方药，包括避孕药、增发剂、治疗尿路感染的药物等，用户还可以针对粉刺治疗、泌尿道感染、唇疱疹治疗等初级护理接受线上治疗。HeyDoctor的手机应用非常受欢迎，在App Store上有122条评论，评分为4.7星。

我们将重新设计HeyDoctor的预览图，并学习如何设计抓眼球的预览图。

免责声明

请知悉，我不在HeyDoctor工作，本案例研究中表达的观点完全是我个人的观点。区别于设计师、产品经理和任何一个在HeyDoctor工作中负责做重要决定的人，我无权分析用户背景，并且无法查看完整图片。设计决策应该是基于业务目标、资源优先级、技术约束等多重因素下制定的。因此，任何未经允许的案例研究都不很全面，而且我完全不建议HeyDoctor放弃他们当前的预览图，而采用我的重新设计。

一个不请自来的重新设计可能会像是这样的，开个玩笑。

当前设计

我们从HeyDoctor的iOS应用开始。以下是目前的预览图：

它使用了主标题加副标题的标准形式，这样很好地解释了该应用的用户故事。我们没有兴趣重新设计品牌或UI界面，因此在接下来的重新设计中，我们将尽量与它们保持一致。

用户故事

在我们深入研究并开始改变视觉设计之前，需要了解用户安装HeyDoctor是基于什么目的，以及当他们找到这款应用时在搜索什么。

按原处方取药。
用户希望找到一种简单的方式能够按照原处方在线购药，而无需去看医生。
生病后接受治疗。
用户在搜索他们生病后如何在线获取治疗。
咨询初级保健医生。
用户想找医生当面问诊，但由于时间，资金，或通勤限制，目前无法就诊。
在不涉及任何医保的情况下完成看病拿药。
用户不想用医保，可能是因为他们没有医保，也可能是因为医保的自付额度太高。

放屏幕截图（Screenshots）还是缩略图（thumbnails）？

从苹果起初推出3.5英寸屏开始，智能手机的屏幕尺寸已经变大了72%。美国在2018年销售的智能手机平均屏幕尺寸是5.5英寸。屏幕比以往更大了，产品设计师要考虑如何运用额外的可用空间。有人认为，更大的屏幕会吸引设计师在预览图上放更多的说明文字。但我们观察到的却恰恰相反。

我们总是观察到，只有不到4％的用户在找到应用时会放大看预览图，仅2％的用户会放大横屏预览图。对于游戏玩家来说，甚至不到0.5%。这或许是因为游戏玩法通常只看缩略图就足够清晰。

—Peter Fodor

只有不到4%的人会在应用详情页点击你的预览图。

设计师已经开始注意到这个尺寸让许多应用的预览图正在变成缩略图般的作用，只要看一眼便可，而不用点击进入。用户在2016年可能会期待点击预览图，阅读里面的文字。但是，随着应用商店有新的板式设计和更大的屏幕，用户不用再点击也能看到你的预览图了。

让我们来看一些从2016年到2018年重新设计后的一些预览图。请注意，几乎每个屏幕截图都有更少的单词数和更大的字号。

神奇的数字2

应用商店的前100个应用中，有78个有五张预览图，有13个有四张，6个有三张，还有3个只有两张。作为一名开发人员，你或许会认为应该选五张预览图，因为内容越多越好，是吗？不，你错了。

只有9%的用户滑动前2帧预览图去看更多预览图。横向屏幕截图的效果更差，只有5%用户会滑动前2帧。因此，必须依赖前2帧屏幕截图吸引用户。在第1帧告诉你的用户这是什么应用，并在后面1帧预览图中详细说明。

我们的研究结果清楚地表明，如果你使用竖屏图片，那么必须在前2帧（iOS10，Google Play）或前3帧（iOS11）就说明应用的核心功能。如果你真的想使用横屏图，那么请只用1帧。

——Peter Fodor

我们来研究下几个流行的应用（app）前2帧预览图。

突出显示的UI元素

用户浏览你的预览图是在试着弄清楚你应用的功能。文字说明有助于帮他们理解屏幕背后的上下文背景（context）。设计师需要通过突出显示特定的UI元素让用户更容易理解文字说明。

让我们来看几个例子：

知识要点：

在前2帧预览图中向用户解释你应用中最重要的用户故事。
仅9%的用户从应用商店进入你的应用详情页后会滑动前2帧预览图。
放大字号并删减文字。
随着智能手机的屏幕更大，用户习惯了快速浏览预览图，而不用点击查阅。只有不足4%的用户会点击预览图并查阅。
突出文字标题中的核心UI元素。
这会让浏览预览图更容易，也强化了预览图的扫视效果。

现在，我们对如何使预览图更具可读性有所了解，让我们开始把我们找到的关键方法实践到HeyDoctor’s的预览图吧~

第1步：将屏幕截图更新到最新版本

HeyDoctor的预览图使用的是旧版iPhone手机（外壳）。尽管这不是什么大不了的事，但我喜欢iPhone就像喜欢我的应用一样。如下是更新后的样子：

第2步：删减文字，让它更具可读性

我们试着用简洁的格式说明用户故事，使标题更有可读性。我们还去掉了副标题和说明文字，以适配更大的主标题。

第3张预览图展示了该应用的设置页面，同时标题说明了该应用不需要医疗保险。让我们用1张更相关的屏幕截图来代替。我把它替换为下图中右侧这张，它是你试着开处方药的页面，这也暗示了你不需要医保便可以开始使用。

第3步：突出显示相关的UI元素

如上所述，突出显示与标题相关的UI元素可以使标题更加清晰、易读。它还可以帮助用户更轻松地扫视屏幕截图。

聊天界面

让我们看下Tinder是如何突出他们的聊天UI：

它巧妙地将用户头像、聊天气泡和带有品牌色的背景来模拟其真实的聊天界面。

让我们尝试做类似的事情：

让我们把它放进预览图：

我试着把HeyDoctor的品牌色放进聊天框里。我认为不需要包含头像，因为在应用里与你对话的医生没有头像。

卡片和投影

让我们看一下Uber如何突出他们的UI元素。

我喜欢用卡片和投影这种小方式突出UI元素。我们将用这种样式来强调我们预览图中某些元素。

我决定把标题移到手机下面，这样用户读到标题之前，会先看到突出的UI元素。

第4步：改变外观

我们已经做了多处改变去提升我们预览图的扫视性。现在让我们把它设计的看上去更好。良好的视觉设计对于用户而言可能是一个难以置信的诱惑，这是在重新设计预览图时不应忽略的地方。

添加透视屏

透视屏看起来如此现代且光洁。你几乎可以在任何地方看到透视屏效果，从Apple完美渲染的产品广告到Dribble上的高度抛光模型（夸张点可认为Dribble最初是一个分享低保真原型的网站！）

我从中得到了一些适合我们的想法。

我选择第1张透视图，并将其分成2张预览图，因为我们目前只有3张预览图，在应用商店里我们可以加到5张预览图。

我在第1张上加了标题——“你的私人医生”。这样便于阅读，言简意赅的概括这个应用是干什么的。

更改背景渐变色

现在，背景和前景的对比度对我来说有点刺眼。让我们把它调成浅蓝色。

我们把选好的新颜色做成渐变色。

让我们看下现在的连环预览图看上去效果如何。

完美！

我在标题文字下面加一条斜线，以便用户区分文字区域和手机区域。

我从网上搜到一张很酷的插图。让我们把它当作最后1张预览图。

终稿

之前

之后

总结

总而言之，我们进行了4次以上的小迭代调整。但最终结果是为了让预览图方便浏览，并有现代感。这些改进都不需要先天的艺术技巧。在应用商店中研究个别几款应用，有助于解决我们遇到的问题。

原文来源：https://medium.com/free-code-camp/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e(2018.10.22)
版权声明：该文章在UXRen公众号（cnUXRen）首发后方可转载，转载时请注明出处及译者、审校者信息，如有违背，UXRen社区保留侵权追责的权力。