一款產(chǎn)品的創(chuàng)始人，需要在短時間內(nèi)說服風投進行投資時，一般會怎么做？重點講述APP的主打功能？闡明與競品相比的獨特優(yōu)勢？或是大談產(chǎn)品極致的用戶體驗？這個問題我們可以留給創(chuàng)始人。

那一款產(chǎn)品，如何在短時間內(nèi)吸引用戶下載呢？這個問題就需要留給我們的設(shè)計師來考慮了。

先讓我們看一個調(diào)查了25000個用戶和10000個應(yīng)用的下載研究，調(diào)查結(jié)果顯示：在App Store，用戶平均用時7秒決定是否下載一個APP，其中應(yīng)用截圖是僅次于應(yīng)用評分的第二大影響因素。

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

應(yīng)用截圖就像一面鏡子，可以快速反映APP的功能和體驗。利用 Incipia團隊收集的相關(guān)APP數(shù)據(jù)，我研究了頭部100個應(yīng)用的屏幕截圖。在進行多種角度的研究后，發(fā)現(xiàn)了截圖設(shè)計的關(guān)鍵方法。

設(shè)計案例：HeyDoctor

Heydoctor是一款在線醫(yī)療APP，可以讓用戶足不出戶就享受到家庭醫(yī)生般的服務(wù)。

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

我們將重新設(shè)計它的屏幕截圖，同時學(xué)習(xí)如何設(shè)計可掃描和易讀性強的截圖。

免責聲明

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

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

目前的設(shè)計

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

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

用戶故事

開始深度設(shè)計前，需要了解用戶會出于哪些需求下載HeyDoctor

1 ）在線開具處方： 用戶希望無需見醫(yī)就可以開具處方和補充處方

2 ）治療疾?。?用戶想在線上進行疾病治療

3 ）咨詢醫(yī)生： 由于時間，經(jīng)濟和通勤的限制，用戶希望線上咨詢醫(yī)生

4 ）醫(yī)療服務(wù)無需保險： 由于沒有醫(yī)療保險或者醫(yī)療保險的費用高昂，用戶想要無需保險的醫(yī)療服務(wù)

截圖or縮略圖？

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

長期觀察中發(fā)現(xiàn)，豎屏模式下只有不到4%的用戶，會點擊截圖查看；而橫屏模式下只有2%，對于游戲玩家用戶，這個比例不到0.5%。用戶可能僅憑截圖縮略圖就可以了解整個APP?！狿eter Fodor

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

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

神奇的數(shù)字2

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

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

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

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

UI元素突出顯示

用戶通常掃視應(yīng)用截圖并借助文字說明去了解APP的功能。但更簡單的設(shè)計方案是：APP功能相關(guān)的UI元素突出顯示，而不是過度依賴文字。

我們來看一些示例

學(xué)習(xí)點（敲黑板）

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

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

3 ）功能相關(guān)的UI元素突出顯示 ： 可以讓截圖一目了然，增加易讀性

增強截圖易讀性的方法就是如上三點，現(xiàn)在我們開始練習(xí)下這些方法

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

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

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

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

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

Step3 突出顯示功能相關(guān)的UI元素

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

聊天界面UI

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

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

我們也來嘗試下

我們將制作的聊天圖片插入屏幕截圖內(nèi)

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

卡片和投影

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

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

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

Step 4:外觀設(shè)計變化

針對屏幕截圖，已經(jīng)總結(jié)了3種不同的優(yōu)化設(shè)計方法。接下來從視覺方面進行優(yōu)化，畢竟良好的視覺設(shè)計可以很好的吸引用戶。

增加透視屏幕

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

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

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

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

漸變色背景

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

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

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

非常完美！繼續(xù)在標題下方添加一道凸紋，可以明顯區(qū)分開屏幕透視圖和標題文字

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

最終的設(shè)計

之前

之后

總結(jié)

一言以蔽之，屏幕截圖僅僅經(jīng)過4個步驟的迭代優(yōu)化，就顯著地增加了閱讀的效率和現(xiàn)代感。而且，任何一個步驟的優(yōu)化都不需要藝術(shù)天賦，只要學(xué)會從常用APP里發(fā)現(xiàn)問題，并尋找解決方案即可。

關(guān)于IOS應(yīng)用截圖的設(shè)計模板我們已經(jīng)提前整理完了：時尚的iOS APP ui屏幕截圖模板

原文：https://medium.com/free-code-camp/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e

作者：Girish Rawat

譯者：Luserry