如何利用7秒时间，让用户决定使用我的App

　　用户决定是否下载App的平均用时是7秒，也就是说在这7秒内，你的应用在AppStore里截图要足够吸引人，如何做到？本文作者以HeyDoctor这款App为例，聊一聊如何设计“吸睛”的应用截图，enjoy
　　首先，让我们来玩一个游戏。
　　从你的手机App中，选一个你真正喜欢的。假设，你是这款App的开发者，想要获得风险投资。你有一分钟的时间向VC们推销这款App，如果打动了他们，钱会自己送上门来。
　　那么，你会怎么利用这60秒的时间呢？你的卖点会是什么？是App的功能，是它优于竞品的独特之处，还是良好的用户体验？
　　觉得时间不够？
　　用户留给你的时间就更短了。用户决定是否下载App的平均用时是7秒。
　　一项针对用户下载决策的研究表明：“吸睛”的应用截图是促使用户下载的第二大原因，第一个原因是App评级。这项研究覆盖了25，000名AppStore访客、10，000次下载。
　　我们发现：用户浏览一个AppStore页面的平均用时是7秒。事实上，绝大多数人不到7秒，就把页面关掉了。感兴趣的用户会多看一会儿，但看的东西大同小异先看图标，再看前两张截图，最后扫一眼App简介的第一行字，没了。
　　PeterFodor《为什么这7秒钟，决定了手机App的生死存亡》
　　应用截图的重要性不言而喻。应用截图是App用户故事的缩影，反映了用户体验的大致流程。我研究了当下最热门的100款App，以及它们的应用截图。在此特别鸣谢Incipia（一家企业增长咨询公司，总部在美国）的朋友，为我提供了数据。在下文中，我也会引用多项研究的主要成果。
　　HeyDoctor简介
　　美国版“平安好医生”：
　　HeyDoctor是一款美国本土的健康管理App。用户足不出户，就可以寻医问药。HeyDoctor提供全方位的配药服务，包括避孕、生发、尿道感染治疗等方面，还可以根据医检报告配药。
　　HeyDoctor还提供初级卫生保健病例的问诊服务，比如：痤疮、尿道感染、唇疱疹等等。HeyDoctor拥有不错的口碑，在AppStore有122条评分记录，平均得分为4。7星。
　　下面，我将以HeyDoctor这款App为例，聊一聊如何设计“吸睛”的应用截图。
　　一、现有的设计
　　我们的修改对象是iOS版的App。现有的应用截图如下：
　　每张应用截图都有大标题和小标题，很好地阐释了用户故事。我们并不想重新打造HeyDoctor的logo和用户界面，所以我们选择保持原样。
　　二、用户故事是什么？
　　在开始修改之前，我们要先搞清楚：用户为什么会下载HeyDoctor？他们想要的是什么？简单来说，有以下几个方面：
　　线上开药：用户觉得找医生麻烦；
　　提供治疗方案：用户希望在网上找到治疗方案；
　　线上问诊：用户想要就诊，但由于时间、经济、交通等限制，暂时无法就诊。
　　提供不涉及医保的服务：用户想避开医保，因为他们没有，或者保费太高了。
　　1。用原图还是缩略图？
　　最开始的iPhone屏幕只有3。5英寸。如今，手机屏幕面积已经增长了72。2018年美国售出的手机中，平均的屏幕大小为5。5英寸。面对有史以来最大的手机屏幕，产品设计师不甘落伍，盘算着如何利用多余的空间。有的人会认为，屏幕大了，应用截图中，会有更多的文字说明。但是，据我们所知，事实恰恰相反。
　　我们多次观察，结果出奇地一致：在逛AppStore时，少于4的用户会放大竖屏的应用截图，只有2的用户会放大横屏的应用截图。对于游戏App来说，这个比例只有可怜的0。5！原因可能是，即使是缩略图，用户也能看清游戏玩法。
　　PeterFodor
　　只有不到4的访问者会点击你的应用截图，放大查看。设计师已经注意到了这一点。许多应用截图都成了缩略图，一眼就能看清，没有点击查看的必要。2016年，用户或许还会点击应用截图，放大，阅读上面的文字说明。但是，随着AppStore的改版和手机屏幕的增大，用户不会再点开应用截图了。
　　让我们来回顾一下2016年和2018年的应用截图。请注意：几乎所有的应用截图，字都变少了，字体都变大了。
　　2。把最亮眼的放前面
　　在最热门的100款App中，有13款展示了4张应用截图，有6款展示了3张，只有3款展示了2张。作为App开发者，你也许会选择放5张，因为内容越多越好，不是吗？当然不是。
　　只有9的用户会看两张应用截图。如果是横版截图，这个比例只有5。因此，想要吸引用户的眼球，设计师必须做好前两张截图。第一张截图就要告诉用户，你的App解决什么问题；后面几张截图，用来进一步展示App的功能。
　　我们的研究发现：对于iOS10和GooglePlay，你必须用前两张应用截图，解释清楚App的核心功能，不能超过两张！对于iOS11，也可以用前三张竖版截图。如果你真的想用横版截图，不好意思，你只能用一张。
　　PeterFodor
　　下面，让我们以一些热门App为例，欣赏一下前两张应用截图。
　　3。重点突出UI元素
　　每个用户心里都有一把尺。他们看到的，是应用截图；心里衡量的，是App的功能。文字说明有助于用户理解截图的内容。有些设计师更进一步，突出重点的UI元素，配上文字说明，App功能一目了然。让我们来欣赏一些范例：
　　4。总结一下
　　用前两个应用截图，展示App用户故事最重要的内容。只有9的访问者会看完前两张应用截图。
　　字体大一点，字数少一点。随着手机屏幕变大，“扫一眼”应用截图，正在成为用户的习惯。很少有人会点击放大截图，仔细阅读。只有不到4的用户会这么做。
　　不仅要有文字说明，还要突出相应的UI元素，让截图更容易看懂，也更加“吸睛”。
　　现在，对于如何提高应用截图的可读性，我们已经有了一点了解。
　　那就让我们学以致用，重新打造HeyDoctor的应用截图吧！
　　三、第一步：用新一代iPhone截图
　　HeyDoctor的应用截图，还是用老一代iPhone截的图。虽然不是大问题，但是对我来说，App就像iPhone，总是越新越好。所以，先用新一代iPhone截图。完美！（请原谅我的强迫症）
　　四、第二步：删减文字，提高可读性
　　我们会把用户故事讲得更简洁，以此提高文字说明的可读性。我们直接删掉小标题和介绍性的内容，为大标题腾出空间，换更大的字体。
　　第三张应用截图展示的是App的设置页面，但是文字说明却是“没有医保也能用App”。还是做到图文相关比较好。我决定把截图换成“线上开药”服务的打开页面，间接暗示“没有医保，你也可以享用App的服务”。
　　五、第三步：突出与文字说明相关的UI元素
　　正如上文所述，突出强调与文字说明相关的UI元素，可以提高应用截图的可读性，让用户看了一目了然。
　　1。突出聊天界面
　　让我们来研究一下，Tinder（交友App）是如何突出聊天界面的：
　　它的聪明之处在于：把头像、聊天气泡框这种活泼的元素，和背景色这种品牌元素相结合，模拟了一幅生动的聊天场景。
　　他山之石，可以攻玉。我们对HeyDoctor做了类似的改进：
　　把这个聊天界面，放到应用截图中：
　　我试着把HeyDoctor的品牌元素，融入到聊天气泡框的设计中。我觉得没必要加头像，因为医生们没有头像照片。
　　2。放大卡片，添加阴影
　　让我们来研究一下Uber的做法。
　　我个人很喜欢这种方法，稍微加点阴影，稍微放大卡片组件，突出强调UI元素的效果非常明显。
　　同样，我们也对应用截图的某些元素作了微调：
　　我决定把文字说明放到应用截图下方。这样一来，用户就会先看到突出展示的UI元素，再看到相关的文字说明。
　　六、第四步：再美化一下
　　为了让应用截图一目了然，我们已经做了三处改动。现在，我们要做的就是精益求精。优秀的视觉设计，可以吸引大批用户。重新设计应用截图时，这一点不容忽视。
　　1。巧用透视效果
　　等距视角（isometric）风格的应用截图，看起来现代感十足，十分优雅。等距视角风格的手机图案无处不在，从苹果公司精致得无可挑剔的产品广告，到Dribble（艺术作品交流网站）上精美的设计模型。（很难想象，Dribble这个网站上，最开始共享的是低水平的设计原型半成品！）
　　利用现有的应用截图，我绘制了几张透视图。
　　我把第一张透视图一分为二，因为我们只有3张应用截图，这样一来就凑够了5张。
　　我给第一张图配了文字说明“你的私人医生（Yourpersonaldoctor）”，通俗易懂，简洁明了，很好地概括了App的功能。
　　2。优化背景渐变效果
　　在我看来，背景和前景的色彩对比太突兀了，可以把蓝色变浅一点。
　　我选了编号如下的两种蓝色，制作了一组渐变色，作为背景。
　　让我们检验一下效果：
　　完美！我决定在文字说明下面，加一条分割线，把文字和图案分开。
　　我在网上找到了一个很酷的等距风格的图案，把它做成了第6张应用截图。
　　七、设计成果
　　1。重新设计前
　　2。重新设计后
　　八、结论
　　总之，我们只做了四次小的迭代调整。但效果很惊艳应用截图的内容一目了然，现代感十足。而且，完全没有依靠天生的艺术细胞，仅仅是研究了AppStore的一部分App，我们就知道，要从哪些方面进行调整。感谢阅读！