中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

首先，讓我們來玩一個游戲。

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

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

覺得時間不夠？

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

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

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

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

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

HeyDoctor 簡介

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

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

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

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

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

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

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

二、用戶故事是什么？

在開始修改之前，我們要先搞清楚：用戶為什么會下載 HeyDoctor？他們想要的是什么？簡單來說，有以下幾個方面：

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

1. 用原圖還是縮略圖？

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

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

——Peter Fodor

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

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

2. 把最亮眼的放前面

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

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

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

——Peter Fodor

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

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

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

4. 總結(jié)一下

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

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

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

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

HeyDoctor 的應(yīng)用截圖，還是用老一代 iPhone 截的圖。雖然不是大問題，但是對我來說，App 就像 iPhone，總是越新越好。所以，先用新一代 iPhone 截圖。完美?。ㄕ堅徫业膹?qiáng)迫癥）

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

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

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

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

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

1. 突出聊天界面

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

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

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

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

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

2. 放大卡片，添加陰影

讓我們來研究一下 Uber 的做法。

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

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

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

六、第四步：再美化一下

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

1. 巧用透視效果

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

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

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

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

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

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

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

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

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

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

七、設(shè)計成果

1. 重新設(shè)計前

2. 重新設(shè)計后

八、結(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

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

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

題圖來自作者