如何打造一個用戶體驗良好的下載頁面？

這裡來談一個容易被忽略的問題—下載頁。

下載頁是移動互聯網在傳播移動端產品的必備頁面。由於一些產品經理對這塊注意不足或者不屑在這個地方深究，導致產品在下載頁的體驗並不好。同時很少見有人專門對此撰文，因此來簡單聊聊下載頁面存在的「坑」、流程設計和界面設計。

通過梳理完善下載頁的業務流程，能改善下載產品過程中的用戶體驗，同時能進一步提高產品經理的流程化意識。

1 下載頁面的作用

1.1 展示產品核心功能與界面設計的窗口

為什麼一個下載頁面是如此的重要？下載頁是產品重要的入口。用戶看到一個產品時，根本不會去看密密麻麻的介紹文字。更多的是粗略看產品介紹頁的圖片。此時下載頁承載著傳遞產品的核心特點、最新功能和展示界面設計的功能。

1.2 App下載前的最後一道障礙

下載頁是用戶下載決策前的最後一道障礙。根據漏斗模型，從用戶開始了解你的產品，到查看產品介紹到下載，最後到開始使用產品，用戶將會呈漏斗狀減少。下載頁是一個非常重要的過渡頁。頁面的設計是否美觀，下載流程是否順暢都關係到用戶是否繼續使用產品。在下載頁應儘可能的避免較多的點擊次數。

2 下載過程中存在的坑

最大的來自騰訊的微信與應用寶。微信是手機必備社交軟體，但其自帶的瀏覽器不允許（非法）跳轉。因此，使得很多下載鏈接無法自動下載移動客戶端。（支付寶下載頁甚至被完全屏蔽了）於是一些產品經理直接採用了騰訊開發平台提供的微下載鏈接。微下載是騰訊官方提供的下載鏈接，可自動判斷手機系統類型。微下載鏈接方便了iOS系統的跳轉，但在Android端體驗不好。

應用寶是國內最大的第三方安卓應用市場，眾多的安卓移動客戶端通過應用寶分發出去。用安卓微信掃描二維碼，打開下載頁面，「普通下載」按鈕故意做得很小，而突出顯示了「安全下載」按鈕。點擊安全下載，首先下載的卻是應用寶的APK。點擊普通下載，則還需用戶點擊確定。如果用戶是第一次接觸肯定會點擊錯誤。例如下圖的簡書安卓版。這種方式是常用的流氓手段~

3 下載流程分析梳理

首先在闡述流程之前，PM要釐清用戶可通過什麼方式進入到下載頁面，用戶所使用的訪問方式（工具）是什麼，手機系統是iOS還是Android。通過簡單的思維導圖可梳理出本產品可能存在的組合場景。

從進入下載頁的方式主要分為兩類：

1. 直接訪問下載頁面。用戶通過主頁跳轉或者其他頁面跳轉到下載頁面。
2. 掃描（網站/文章）二維碼。

隨著二維碼的普及，越多越多的信息通過二維碼傳播，而下載頁的鏈接生成二維碼置於海報、文章中。可能的方式包括在網站下載頁面直接用微信掃一掃/瀏覽器掃描二維碼,在文章末尾識別二維碼。

下載頁面訪問方式包括web端（PC瀏覽器）、wap端（手機瀏覽器）和微信（內置瀏覽器）。

另外要考慮的不同的手機操作系統。當前主流為iOS與Android，兩者在下載方式有很大的不同。iOS僅能通過APP Store下載安裝。Android可以通過直接下載APK，也可以通過應用市場安裝，效果都一樣。

在下載頁面流程的設計之前有2個原則應充分注意到：

1）儘可能減少跳轉，減少用戶點擊的次數。

跳轉次數越多，用戶點擊次數更多，用戶的耐心被消耗，則頁面跳出率越高。當然還要結合其他因素一起考慮。要盡量避免在諸如下載軟體首先下載的是應用寶軟體這種被「坑」的事情。

2）把簡單留給用戶，把複雜留給自己。

對於前端展示給用戶的邏輯儘可能簡單，而背後可能存在的複雜的判斷留給後台來進行。用戶都是「懶」的，下載流程要讓用戶少想少操作。如Keep下載頁，用iPhone版微信掃描，點擊下載，依然提示在瀏覽器中打開，這種情形本可以避免。

結合上面提到的各種坑以及流程設計原則，通過梳理可得到這樣一個下載流程圖。

（點擊查看大圖）

從上圖我們可以歸納出3種典型具體的使用場景：

1）用戶A打開官網下載頁面，使用iPhone 版微信掃一掃二維碼後，頁面跳轉至wap端下載頁面，點擊「立即下載」按鈕，則頁面經過跳轉，最後打開了該APP的APP Store詳情頁，點擊即可下載安裝。微信的跳轉必須要用到騰訊提供的微下載鏈接。從點擊掃一掃到下載完成，用戶A僅點擊了3下。例如，用iPhone版微信掃描網易雲音樂官方下載二維碼，則可直接跳轉至APP Store。

2）用戶B手持安卓手機，用百度瀏覽器掃描海報中的下載二維碼，頁面跳轉至wap端下載頁面，點擊「立即下載」按鈕，瀏覽器提示將要下載移動客戶端的APK。點擊確定，從自己伺服器下載APK並安裝。從點擊掃一掃到下載完成，用戶B僅點擊了3下。如下圖的支付寶。

3）用戶C手持安卓手機，用微信識別出圖片中的下載二維碼，頁面跳轉至wap端下載頁面，點擊「立即下載」按鈕，此時彈出提示界面，提示用戶「用瀏覽器打開」。用戶在手機瀏覽器打開後，則其後與第2種場景一致。雖然這樣讓用戶增加了2步操作，但有效避免了應用寶里存在的大坑。下圖為安卓微信版下載Keep、銅板街APP，在點擊下載後，均提示用戶用瀏覽器打開。

以上說了那麼多，其實就是告訴大家需要分清不同的下載場景，針對每種場景選擇一個最優的方式。每一種情況下，盡量縮短操作。當然，你甚至還可以在此流程基礎上進一步優化。比如優酷在安卓瀏覽器掃描二維碼，可直接彈出下載提示框。

4下載頁面設計的要點

4.1 兩套界面

Web端與Wap端由於所在的屏幕大小不一，因此需針對兩個不同的訪問端展示不同的下載頁面。Wap端用戶的頁面大小和交互方式決定了用戶決策時間短，其應做得盡量簡潔。

4.2 web端設置iOS與Android下載入口

通過前面的分析，在下載頁面二維碼必不能少。Web端下載頁面放置一個二維碼已經足夠。但同時我們還需留意一些特殊需求的「長尾」用戶。比如某些用戶安卓手機無法聯網或者想節省移動流量但又想安裝某APP,則需通過桌面下載安裝。用戶想看下APP Store對該產品的介紹。基於以上就可考慮在Web端設置iOS與Android下載入口。

4.3 設計突出核心功能

正如前面所說，下載頁面是一個移動產品的臉面，是用戶接觸產品的第一層。下載頁面要突出產品的核心功能，最近更新的亮點功能，以及產品主要頁面。在界面設計層次，儘可能的吸引用戶的眼球。無論是動感十足還是文藝小清新，這就是產品和UI設計師共同討論的問題了。

利益聲明：以上舉例app與本人均不存在利益相關，截圖僅用於說明。

作者：楊大興，公眾號：遊俠兒（youxiaer917），關注互聯網金融，愛閱讀愛健身的PM一枚。也可加本人wechat（ydx880917）交流。