網頁設計 ? 視覺設計 ? 這樣設計App Store應用截圖,可提高下載率

這樣設計App Store應用截圖,可提高下載率

發表于: 視覺設計. 評論
贊助商鏈接

一款產品的創始人,需要在短時間內說服風投進行投資時,一般會怎么做?重點講述APP的主打功能?闡明與競品相比的獨特優勢?或是大談產品極致的用戶體驗?這個問題我們可以留給創始人。

那一款產品,如何在短時間內吸引用戶下載呢?這個問題可以從設計App Store應用截圖入手,通過優化APP截圖視覺從而提高下載量。

先讓我們看一個調查了25000個用戶和10000個應用的下載研究,調查結果顯示:在App Store,用戶平均用時7秒決定是否下載一個APP,其中應用截圖是僅次于應用評分的第二大影響因素。

研究報告:我們發現用戶在蘋果商店的應用下載頁面,只會停留7秒鐘。事實上大部分用戶停留的時間只會更短,用戶如果有明確的下載需求,花費的時間會長一點。但是用戶的操作行為非常一致:一看應用圖標,二瀏覽前兩張截圖,三快速掃描應用的文字說明—Peter Fodor, Why 7 seconds could make or break your mobile app

應用截圖就像一面鏡子,可以快速反映APP的功能和體驗。利用 Incipia團隊收集的相關APP數據,我研究了頭部100個應用的屏幕截圖。在進行多種角度的研究后,發現了截圖設計的關鍵方法。

設計案例:HeyDoctor

Heydoctor是一款在線醫療APP,可以讓用戶足不出戶就享受到家庭醫生般的服務。

目前HeyDoctor在App Store有122個評論,評分4.7。它支持在線開具處方和補充藥物處方,同時提供一些簡單的治療服務。

我們將重新設計它的屏幕截圖,同時學習如何設計可掃描和易讀性強的截圖。

免責聲明

首先聲明,我并非HeyDoctor的工作人員,本次重設計完全是個人研究。由于并非這款APP的設計師和產品人員,我無法全面了解用戶群體,頁面設計和功能流程,因此本次的重設計并不能盡善盡美。產品設計往往需要綜合考量商業目標,資源排序和技術限制,并非僅僅只是設計本身。所以我并不建議HeyDoctor采用我的設計方案做替換。

圖:“Make your app flat”?—?some guy. Meme credits:@parasmael

目前的設計

讓我們先來看看HeyDoctor的屏幕截圖

三張屏幕截圖均由主標題 副標題 頁面截圖組成,可以很好地講述用戶故事。原有的品牌色和UI設計,在重設計時會繼續保留。

用戶故事

開始深度設計前,需要了解用戶會出于哪些需求下載HeyDoctor

1 )在線開具處方:? 用戶希望無需見醫就可以開具處方和補充處方

2 )治療疾病: 用戶想在線上進行疾病治療

3 )咨詢醫生: 由于時間,經濟和通勤的限制,用戶希望線上咨詢醫生

4 )醫療服務無需保險: 由于沒有醫療保險或者醫療保險的費用高昂,用戶想要無需保險的醫療服務

截圖or縮略圖?

2018年主流智能手機的屏幕尺寸為5.5英寸,相較于第一代iPone的3.5英寸,增長了35%的屏幕面積。在設計更大的屏幕截圖時,一種思路是增加文字,但我們觀察到的情況卻截然相反。

長期觀察中發現,豎屏模式下只有不到4%的用戶,會點擊截圖查看;而橫屏模式下只有2%,對于游戲玩家用戶,這個比例不到0.5%。用戶可能僅憑截圖縮略圖就可以了解整個APP。—Peter Fodor

不少App的設計師已經注意到4%這個指標,開始設計無需點擊即可瀏覽全貌的截圖。2016年,用戶的習慣可能是點擊截圖縮略圖放大,進而查看全部的內容;但是隨著App Store的設計布局變化和大屏化的趨勢,用戶已經習慣一掃而過。

對比下在2016~2018年重新設計過的APP,幾乎全部采用了更少的文字和更大的字體。

神奇的數字2

應用市場排名前100的APP中,78個使用了5張截圖,13個使用了4張截圖,6個使用了3張截圖,另外2個僅使用了2張截圖。如果作為一個開發,你可能錯誤地覺得應該放置5張才好,畢竟截圖越多,展示的內容越多。

其實只有9%的用戶會滑動頁面去查看更多截圖,橫屏模式下的用戶更少,只有5%。所以截圖必需在前兩張就設法吸引住用戶。第1張截圖可以告訴用戶APP的功能,然后在后續的截圖內展示具體信息。

我們的研究很清晰的指明,豎屏模式下,App必需在前2張截圖(iOS10, Google Play),或者前3張截圖 (iOS11) 來展示應用的核心功能。而如果是寬屏模式的截圖,你只有第1張截圖有機會展示核心功能。—?Peter Fodor

我們可以用一些常用App的前2張截圖驗證下。

UI元素突出顯示

用戶通常掃視應用截圖并借助文字說明去了解APP的功能。但更簡單的設計方案是:APP功能相關的UI元素突出顯示,而不是過度依賴文字。

我們來看一些示例

學習點(敲黑板)

1 ) 前2張截圖務必展示核心的用戶故事? : 只有9%的用戶會去滑動查看超過2張的截圖

2 ) 增大字體同時減少字數:? ?隨著大屏化的趨勢,用戶越來越習慣直接查看截圖,事實上也只有4%的用戶會去點擊截圖查看

3 )功能相關的UI元素突出顯示? : 可以讓截圖一目了然,增加易讀性

增強截圖易讀性的方法就是如上三點,現在我們開始練習下這些方法

Step 1:使用最新的iPhone去截圖

HeyDoctor目前是使用舊版iPhone截圖。并非鼓勵大家更換手機,我也很珍惜我的舊iPhone,但是截圖使用最新的iPhone會更完美。

Step 2:減少文字,增加易讀性

副標題和文字說明刪掉,同時字體變大。簡潔的設計模式,用戶故事只會更易讀。

很明顯,第三張截圖圖文不符。標題表明提供醫療服務無需保險,頁面截圖卻是設置功能頁面。打開HeyDoctor,處方服務功能的第一個頁面更符合主題。它間接暗示用戶,無需保險也可得到醫療服務。

Step3 ?突出顯示功能相關的UI元素

如前文所述,功能相關的UI元素突出顯示,使得文字更有可掃描和易讀性。兩者相輔相成,用戶因此更容易理解截圖內容。

聊天界面UI

我們看看Tinder采用什么方法突出UI元素

它巧妙地使用了個人頭像,聊天氣泡和品牌顏色來模仿真實的聊天用戶界面。

我們也來嘗試下

我們將制作的聊天圖片插入屏幕截圖內

聊天界面設計中,聊天氣泡采用HeyDoctor的品牌色。APP的設計中,醫生角色沒有頭像,因此選擇性的刪掉。

卡片和投影

我們看看Uber采用什么方法突出UI元素

它做了點細微的改變,使用卡片和陰影來突出UI元素。我們也來嘗試下這種方法。

將標題移到屏幕截圖下方,用戶會在標題之前看到突出的UI元素。

Step 4:外觀設計變化

針對屏幕截圖,已經總結了3種不同的優化設計方法。接下來從視覺方面進行優化,畢竟良好的視覺設計可以很好的吸引用戶。

增加透視屏幕

等距屏幕具有現代感和拋光的高級感,不論是Apple的廣告,還是Dribble上高度拋光的模型產品,都可以看到它的身影。

因此我做了HeyDoctor的一系列透視屏幕圖

考慮到常用App 平均放5張屏幕截圖,而目前只設計了3張,我把第一張透視模型圖拆分為2張屏幕截圖。

第一張屏幕截圖的標題-?“Your personal doctor”,簡練的總結了HeyDoctor的所有功能并且易于閱讀。

漸變色背景

個人覺得目前的背景色和前景色的色彩對比太強烈,因此把背景色調成明度高一點的藍色。

我們使用新的藍色做一個漸變色

來看下最后修改好的屏幕截圖

非常完美!繼續在標題下方添加一道凸紋,可以明顯區分開屏幕透視圖和標題文字

從web網站(https://www.freepik.com/)下載了一張很酷的矢量插畫,用它做最后一張屏幕截圖。

最終的設計

之前

之后

總結

一言以蔽之,屏幕截圖僅僅經過4個步驟的迭代優化,就顯著地增加了閱讀的效率和現代感。而且,任何一個步驟的優化都不需要藝術天賦,只要學會從常用APP里發現問題,并尋找解決方案即可。

感謝閱讀本文!周末寫這篇文章很有趣,希望可以給大家一個設計APP屏幕截圖的新思路。

原文:https://medium.com/free-code-camp/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e
作者:Girish Rawat
譯者:Luserry (id: caiyunyisheji)

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。