如何利用7秒時(shí)間,讓用戶決定使用我的App
用戶決定是否下載 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è)方面:
- 線上開藥:用戶覺得找醫(yī)生麻煩;
- 提供治療方案:用戶希望在網(wǎng)上找到治療方案;
- 線上問診:用戶想要就診,但由于時(shí)間、經(jīng)濟(jì)、交通等限制,暫時(shí)無(wú)法就診。
- 提供不涉及醫(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é)一下
- 用前兩個(gè)應(yīng)用截圖,展示 App 用戶故事最重要的內(nèi)容。只有 9% 的訪問者會(huì)看完前兩張應(yīng)用截圖。
- 字體大一點(diǎn),字?jǐn)?shù)少一點(diǎn)。隨著手機(jī)屏幕變大,“掃一眼”應(yīng)用截圖,正在成為用戶的習(xí)慣。很少有人會(huì)點(diǎn)擊放大截圖,仔細(xì)閱讀。只有不到 4% 的用戶會(huì)這么做。
- 不僅要有文字說(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)自作者
漂亮!最多四張,前兩張最重要 ??
?? ??
干活,直接就是喂嘴里了!
?? 反應(yīng)了一下,才想到“干貨”哈哈哈