用戶決定是否下載 App 的平均用時(shí)是 7 秒，也就是說(shuō)在這7秒內(nèi)，你的應(yīng)用在App Store里截圖要足夠吸引人，如何做到？本文作者以 HeyDoctor 這款A(yù)pp為例，聊一聊如何設(shè)計(jì)“吸睛”的應(yīng)用截圖，enjoy~

首先，讓我們來(lái)玩一個(gè)游戲。

從你的手機(jī) App 中，選一個(gè)你真正喜歡的。假設(shè)，你是這款 App 的開發(fā)者，想要獲得風(fēng)險(xiǎn)投資。你有一分鐘的時(shí)間向 VC 們推銷這款 App，如果打動(dòng)了他們，錢會(huì)自己送上門來(lái)。

那么，你會(huì)怎么利用這 60 秒的時(shí)間呢？你的賣點(diǎn)會(huì)是什么？是 App 的功能，是它優(yōu)于競(jìng)品的獨(dú)特之處，還是良好的用戶體驗(yàn)？

覺得時(shí)間不夠？

用戶留給你的時(shí)間就更短了。用戶決定是否下載 App 的平均用時(shí)是 7 秒。

一項(xiàng)針對(duì)用戶下載決策的研究表明：“吸睛”的應(yīng)用截圖是促使用戶下載的第二大原因，第一個(gè)原因是 App 評(píng)級(jí)。這項(xiàng)研究覆蓋了 25,000 名 App Store 訪客、10,000 次下載。

我們發(fā)現(xiàn)：用戶瀏覽一個(gè) App Store 頁(yè)面的平均用時(shí)是 7 秒。事實(shí)上，絕大多數(shù)人不到 7 秒，就把頁(yè)面關(guān)掉了。感興趣的用戶會(huì)多看一會(huì)兒，但看的東西大同小異——先看圖標(biāo)，再看前兩張截圖，最后掃一眼 App 簡(jiǎn)介的第一行字，沒了。

——Peter Fodor《為什么這 7 秒鐘，決定了手機(jī) App 的生死存亡》

應(yīng)用截圖的重要性不言而喻。應(yīng)用截圖是 App 用戶故事的縮影，反映了用戶體驗(yàn)的大致流程。我研究了當(dāng)下最熱門的 100 款 App，以及它們的應(yīng)用截圖。在此特別鳴謝 Incipia（一家企業(yè)增長(zhǎng)咨詢公司，總部在美國(guó)）的朋友，為我提供了數(shù)據(jù)。在下文中，我也會(huì)引用多項(xiàng)研究的主要成果。

HeyDoctor 簡(jiǎn)介

美國(guó)版“平安好醫(yī)生”：

HeyDoctor 是一款美國(guó)本土的健康管理 App。用戶足不出戶，就可以尋醫(yī)問藥。HeyDoctor 提供全方位的配藥服務(wù)，包括避孕、生發(fā)、尿道感染治療等方面，還可以根據(jù)醫(yī)檢報(bào)告配藥。

HeyDoctor 還提供初級(jí)衛(wèi)生保健病例的問診服務(wù)，比如：痤瘡、尿道感染、唇皰疹等等。 HeyDoctor 擁有不錯(cuò)的口碑，在 App Store 有 122 條評(píng)分記錄，平均得分為 4.7 星。

下面，我將以 HeyDoctor 這款 App 為例，聊一聊如何設(shè)計(jì)“吸睛”的應(yīng)用截圖。

一、現(xiàn)有的設(shè)計(jì)

我們的修改對(duì)象是 iOS 版的 App?，F(xiàn)有的應(yīng)用截圖如下：

每張應(yīng)用截圖都有大標(biāo)題和小標(biāo)題，很好地闡釋了用戶故事。我們并不想重新打造 HeyDoctor 的 logo 和用戶界面，所以我們選擇保持原樣。

二、用戶故事是什么？

在開始修改之前，我們要先搞清楚：用戶為什么會(huì)下載 HeyDoctor？他們想要的是什么？簡(jiǎn)單來(lái)說(shuō)，有以下幾個(gè)方面：

1. 線上開藥：用戶覺得找醫(yī)生麻煩；
2. 提供治療方案：用戶希望在網(wǎng)上找到治療方案；
3. 線上問診：用戶想要就診，但由于時(shí)間、經(jīng)濟(jì)、交通等限制，暫時(shí)無(wú)法就診。
4. 提供不涉及醫(yī)保的服務(wù)：用戶想避開醫(yī)保，因?yàn)樗麄儧]有，或者保費(fèi)太高了。

1. 用原圖還是縮略圖？

最開始的 iPhone 屏幕只有 3.5 英寸。如今，手機(jī)屏幕面積已經(jīng)增長(zhǎng)了 72%。2018 年美國(guó)售出的手機(jī)中，平均的屏幕大小為 5.5 英寸。面對(duì)有史以來(lái)最大的手機(jī)屏幕，產(chǎn)品設(shè)計(jì)師不甘落伍，盤算著如何利用多余的空間。有的人會(huì)認(rèn)為，屏幕大了，應(yīng)用截圖中，會(huì)有更多的文字說(shuō)明。但是，據(jù)我們所知，事實(shí)恰恰相反。

我們多次觀察，結(jié)果出奇地一致：在逛 App Store 時(shí)，少于 4% 的用戶會(huì)放大豎屏的應(yīng)用截圖，只有 2% 的用戶會(huì)放大橫屏的應(yīng)用截圖。對(duì)于游戲 App 來(lái)說(shuō)，這個(gè)比例只有可憐的 0.5%！原因可能是，即使是縮略圖，用戶也能看清游戲玩法。

——Peter Fodor

只有不到 4% 的訪問者會(huì)點(diǎn)擊你的應(yīng)用截圖，放大查看。設(shè)計(jì)師已經(jīng)注意到了這一點(diǎn)。許多應(yīng)用截圖都成了縮略圖，一眼就能看清，沒有點(diǎn)擊查看的必要。2016 年，用戶或許還會(huì)點(diǎn)擊應(yīng)用截圖，放大，閱讀上面的文字說(shuō)明。但是，隨著 App Store 的改版和手機(jī)屏幕的增大，用戶不會(huì)再點(diǎn)開應(yīng)用截圖了。

讓我們來(lái)回顧一下 2016 年和 2018 年的應(yīng)用截圖。請(qǐng)注意：幾乎所有的應(yīng)用截圖，字都變少了，字體都變大了。

2. 把最亮眼的放前面

在最熱門的 100 款 App 中，有 13 款展示了 4 張應(yīng)用截圖，有 6 款展示了 3 張，只有 3 款展示了 2 張。作為 App 開發(fā)者，你也許會(huì)選擇放 5 張，因?yàn)閮?nèi)容越多越好，不是嗎？當(dāng)然不是。

只有 9% 的用戶會(huì)看兩張應(yīng)用截圖。如果是橫版截圖，這個(gè)比例只有 5%。因此，想要吸引用戶的眼球，設(shè)計(jì)師必須做好前兩張截圖。第一張截圖就要告訴用戶，你的 App 解決什么問題；后面幾張截圖，用來(lái)進(jìn)一步展示 App 的功能。

我們的研究發(fā)現(xiàn)：對(duì)于 iOS10 和 GooglePlay，你必須用前兩張應(yīng)用截圖，解釋清楚 App 的核心功能，不能超過(guò)兩張！對(duì)于 iOS11，也可以用前三張豎版截圖。如果你真的想用橫版截圖，不好意思，你只能用一張。

——Peter Fodor

下面，讓我們以一些熱門 App 為例，欣賞一下前兩張應(yīng)用截圖。

3. 重點(diǎn)突出 UI 元素

每個(gè)用戶心里都有一把尺。他們看到的，是應(yīng)用截圖；心里衡量的，是 App 的功能。文字說(shuō)明有助于用戶理解截圖的內(nèi)容。有些設(shè)計(jì)師更進(jìn)一步，突出重點(diǎn)的 UI 元素，配上文字說(shuō)明，App 功能一目了然。讓我們來(lái)欣賞一些范例：

4. 總結(jié)一下

1. 用前兩個(gè)應(yīng)用截圖，展示 App 用戶故事最重要的內(nèi)容。只有 9% 的訪問者會(huì)看完前兩張應(yīng)用截圖。
2. 字體大一點(diǎn)，字?jǐn)?shù)少一點(diǎn)。隨著手機(jī)屏幕變大，“掃一眼”應(yīng)用截圖，正在成為用戶的習(xí)慣。很少有人會(huì)點(diǎn)擊放大截圖，仔細(xì)閱讀。只有不到 4% 的用戶會(huì)這么做。
3. 不僅要有文字說(shuō)明，還要突出相應(yīng)的 UI 元素，讓截圖更容易看懂，也更加“吸睛”。

現(xiàn)在，對(duì)于如何提高應(yīng)用截圖的可讀性，我們已經(jīng)有了一點(diǎn)了解。

那就讓我們學(xué)以致用，重新打造 HeyDoctor 的應(yīng)用截圖吧！

三、第一步：用新一代 iPhone 截圖

HeyDoctor 的應(yīng)用截圖，還是用老一代 iPhone 截的圖。雖然不是大問題，但是對(duì)我來(lái)說(shuō)，App 就像 iPhone，總是越新越好。所以，先用新一代 iPhone 截圖。完美！（請(qǐng)?jiān)徫业膹?qiáng)迫癥）

四、第二步：刪減文字，提高可讀性

我們會(huì)把用戶故事講得更簡(jiǎn)潔，以此提高文字說(shuō)明的可讀性。我們直接刪掉小標(biāo)題和介紹性的內(nèi)容，為大標(biāo)題騰出空間，換更大的字體。

第三張應(yīng)用截圖展示的是 App 的設(shè)置頁(yè)面，但是文字說(shuō)明卻是“沒有醫(yī)保也能用 App”。還是做到圖文相關(guān)比較好。我決定把截圖換成“線上開藥”服務(wù)的打開頁(yè)面，間接暗示“沒有醫(yī)保，你也可以享用 App 的服務(wù)”。

五、第三步：突出與文字說(shuō)明相關(guān)的 UI 元素

正如上文所述，突出強(qiáng)調(diào)與文字說(shuō)明相關(guān)的 UI 元素，可以提高應(yīng)用截圖的可讀性，讓用戶看了一目了然。

1. 突出聊天界面

讓我們來(lái)研究一下，Tinder（交友 App）是如何突出聊天界面的：

它的聰明之處在于：把頭像、聊天氣泡框這種活潑的元素，和背景色這種品牌元素相結(jié)合，模擬了一幅生動(dòng)的聊天場(chǎng)景。

他山之石，可以攻玉。我們對(duì) HeyDoctor 做了類似的改進(jìn)：

把這個(gè)聊天界面，放到應(yīng)用截圖中：

我試著把 HeyDoctor 的品牌元素，融入到聊天氣泡框的設(shè)計(jì)中。我覺得沒必要加頭像，因?yàn)獒t(yī)生們沒有頭像照片。

2. 放大卡片，添加陰影

讓我們來(lái)研究一下 Uber 的做法。

我個(gè)人很喜歡這種方法，稍微加點(diǎn)陰影，稍微放大卡片組件，突出強(qiáng)調(diào) UI 元素的效果非常明顯。

同樣，我們也對(duì)應(yīng)用截圖的某些元素作了微調(diào)：

我決定把文字說(shuō)明放到應(yīng)用截圖下方。這樣一來(lái)，用戶就會(huì)先看到突出展示的 UI 元素，再看到相關(guān)的文字說(shuō)明。

六、第四步：再美化一下

為了讓應(yīng)用截圖一目了然，我們已經(jīng)做了三處改動(dòng)?，F(xiàn)在，我們要做的就是精益求精。優(yōu)秀的視覺設(shè)計(jì)，可以吸引大批用戶。重新設(shè)計(jì)應(yīng)用截圖時(shí)，這一點(diǎn)不容忽視。

1. 巧用透視效果

等距視角（isometric）風(fēng)格的應(yīng)用截圖，看起來(lái)現(xiàn)代感十足，十分優(yōu)雅。等距視角風(fēng)格的手機(jī)圖案無(wú)處不在，從蘋果公司精致得無(wú)可挑剔的產(chǎn)品廣告，到 Dribble（藝術(shù)作品交流網(wǎng)站）上精美的設(shè)計(jì)模型。（很難想象，Dribble 這個(gè)網(wǎng)站上，最開始共享的是低水平的設(shè)計(jì)原型半成品?。?/p>

利用現(xiàn)有的應(yīng)用截圖，我繪制了幾張透視圖。

我把第一張透視圖一分為二，因?yàn)槲覀冎挥?張應(yīng)用截圖，這樣一來(lái)就湊夠了 5 張。

我給第一張圖配了文字說(shuō)明——“你的私人醫(yī)生（Your personal doctor）”，通俗易懂，簡(jiǎn)潔明了，很好地概括了 App 的功能。

2. 優(yōu)化背景漸變效果

在我看來(lái)，背景和前景的色彩對(duì)比太突兀了，可以把藍(lán)色變淺一點(diǎn)。

我選了編號(hào)如下的兩種藍(lán)色，制作了一組漸變色，作為背景。

讓我們檢驗(yàn)一下效果：

完美！我決定在文字說(shuō)明下面，加一條分割線，把文字和圖案分開。

我在網(wǎng)上找到了一個(gè)很酷的等距風(fēng)格的圖案，把它做成了第 6 張應(yīng)用截圖。

七、設(shè)計(jì)成果

1. 重新設(shè)計(jì)前

2. 重新設(shè)計(jì)后

八、結(jié)論

總之，我們只做了四次小的迭代調(diào)整。但效果很驚艷——應(yīng)用截圖的內(nèi)容一目了然，現(xiàn)代感十足。而且，完全沒有依靠天生的藝術(shù)細(xì)胞，僅僅是研究了 App Store 的一部分 App，我們就知道，要從哪些方面進(jìn)行調(diào)整。感謝閱讀！

原文作者：Girish Rawat原文鏈接：https://medium.freecodecamp.org/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e

翻譯：即能，公眾號(hào)：「即能學(xué)習(xí)」

本文由 @?即能 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自作者