国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

覺得時間不夠？

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

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

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

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

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

HeyDoctor 簡介

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

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

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

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

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

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

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

二、用戶故事是什么？

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

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

1. 用原圖還是縮略圖？

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

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

——Peter Fodor

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

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

2. 把最亮眼的放前面

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

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

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

——Peter Fodor

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

3. 重點突出 UI 元素

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

4. 總結(jié)一下

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

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

那就讓我們學以致用，重新打造 HeyDoctor 的應用截圖吧！

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

HeyDoctor 的應用截圖，還是用老一代 iPhone 截的圖。雖然不是大問題，但是對我來說，App 就像 iPhone，總是越新越好。所以，先用新一代 iPhone 截圖。完美?。ㄕ堅徫业膹娖劝Y）

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

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

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

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

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

1. 突出聊天界面

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

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

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

把這個聊天界面，放到應用截圖中：

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

2. 放大卡片，添加陰影

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

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

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

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

六、第四步：再美化一下

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

1. 巧用透視效果

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

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

我把第一張透視圖一分為二，因為我們只有3張應用截圖，這樣一來就湊夠了 5 張。

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

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

在我看來，背景和前景的色彩對比太突兀了，可以把藍色變淺一點。

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

讓我們檢驗一下效果：

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

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

七、設(shè)計成果

1. 重新設(shè)計前

2. 重新設(shè)計后

八、結(jié)論

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

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

翻譯：即能，公眾號：「即能學習」

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

題圖來自作者