當發布一個app，你需要花很多時間和資源去吸引用戶。你可以使用許多手段把人們引到你的app，像廣告、推薦、公共關系和內容營銷。但是當別人終于下載了app，他們有時會覺得被拋棄了。你必須很清晰地告訴用戶為什么他們需要你的app。

研究表明90%的用戶下載app后只用一次，然后就永久地刪除了。人們經常棄用app是因為界面設計真的很難，或者整體就是很差的體驗。app沒有幫用戶解決問題，在界面、菜單和按鈕操作中他們感覺很困惑。

 

在用戶界面設計基礎的第五章，Jane Portman說過：

“一旦用戶登錄app，他們經常被放在一邊。他們開始溺亡，而不是游向目標。”

 

對給你app第二次機會的用戶，他們需要理解4件事：

1. 為什么他們需要這個app

2. 這個app能為他們做什么

3. 它最重要的特性是什么

4. 如果使用這些特性

最好的理解你app目的的方式就是通過一個過程體驗的管理。

 

什么是引導頁？

這個詞是來源于人力資源。意思是幫助一個新員工適應新的工作環境。在軟件開發領域，根據新用戶的加入，引導頁的意思是幫助用戶成功適應并完全擁抱一款產品。

引導頁遵循著2/8原則。只有你快速教別人如何使用小的特性，那些他們會花80%時間使用的特性，才是有效的。但是你也應該解釋為什么這些特性這么有用。

引導頁的完成，在于展示了一系列主要信息，那些展示給用戶如何通過和app交互來解決問題或者展示了app主要創意和關鍵性特征的信息。引導頁能采用多種形式：

l  介紹性的幻燈片或視頻

l  小提示

l  界面引導

l  內容示例

l  復雜的解決方案

所有的這些方案在與用戶交流中都是有效的。選擇一種對你目標用戶最管用的方式，讓你app的功能更容易被理解。

接下來的視頻會展示一些幻燈片，這些幻燈片被用于一個旅游app來達到引導用戶的目的。

（此處是視頻示例，請點擊原文查看）
 

我喜歡這種實現方式，因為很有趣。在飛行的過程中，你將會在低溫環境中睡眠。。。這是個抓住用戶體驗的好例子。我也喜歡設計簡潔。只有3張幻燈片——創建賬戶——選擇星球——離開——但是他們完美地傳達了app的主旨。

Beats Music這個app使用了引導頁旨在吸引用戶，讓他們的音樂試聽體驗變得個性化：

Beats Music 的引導頁 (查看大圖)

 

這種類型的引導設計對用戶的音樂品味有要求，讓他們的體驗更加獨特。“只為了你”這個信息是一種很棒的方式，來告訴用戶能從分享個人偏好中獲得什么好處。而且，人們喜歡談論別人，談論他們喜歡什么。引導頁可能是必須迎合多樣化用戶的最好策略。

IFTTT，一個眾所周知的服務，在聯網服務中自動化小任務，它使用了小提示去解釋其獨特的產品。

IFTTT的引導提示 (查看大圖)

IFTTT展示了一個菜譜應該是什么樣的，解釋了界面中的每個元素，被用到的特殊模塊——觸發頻道、操作頻道——幫助人們更清晰的理解“如果。。。然后。。。”這個邏輯。

 

策略

既然我們知道有不同的引導形式，讓我們想出如何設計盡可能讓人愉悅的引導體驗。

如果你為一款編輯圖片的app設計引導頁，你可能會做4-5也介紹性的幻燈片。一款有圖表和預算功能的金融類app可能需要更多的細節描述或系統提示。對于一個音樂類的app，你可能會采用一個幫手來簡要解釋如何使用控件去創建一個跟蹤軌跡。

有些設計師采用了繁雜的方法，把兩種后更多種方式結合使用。例如，你可能把一個包含線索和幫助菜單的介紹性的視頻進行了詳細地說明。以谷歌inbox這款應用的視頻為例。

讓我們一起來探索6個吸引用戶的策略。

1.引發積極情緒

一旦人們開始使用一款app，他們很容易忘記這個入門培訓，然后迷失在頁面設計中。為了把他們引導到正確的方向，你可能要gamify你的app。比如，你可以提供一些與成就相關的小技巧，或者在用戶完成一些任務時表揚他們。成就引發積極情緒。如果你的產品能讓人們有成就感，那么就會一直用。

在用戶界面設計基礎的第五章，Jane Portman說過：

“任何用戶引導都是心理學：早期的成就感。成就會讓用戶回來。”

看MailChimp是如何通過表揚用戶完成任務來引發他們的積極情緒：

MailChimp (查看大圖)

MailChimp使用了它獨特的方式和顧客溝通。“擊掌”是很有趣的，令人興奮的。MailChimp只是需要告訴用戶他們的活動很快就會發出去，但是MailChimp給信息添加了情感。擴充情緒在設計中是很有力的技巧。

當滿足以下標準時，引導頁能觸發情感：

l  導航是有意義的，很容易被理解；

l  設計從視覺上對目標用戶是有吸引力的；

l  幻燈片的播放方式很有趣，能讓用戶想繼續往下翻；

l  整個的體驗是印象深刻的，有個性的，能表達品牌和客戶的個性。

我們在Yalantis用這些標準來設計我們的引導過程。下面的概念說明了我們如何利用情感需求去吸引一個假定的時尚app的目標受眾。當時的想法是幫助年輕女性選擇時尚的服裝。但我們并沒有嚴格重點講解假定產品的功能。我們創建了引導頁，作為一個情感上有吸引力的設計示例。

（此處是視頻示例，請點擊原文查看）

我們用了Adobe After Effects（你可能很容易實現這個想法，用任何的原型工具，結合插圖）。我們挑選出自然色彩為原型，引導頁是與一個人的日常生活中的經歷聯系的。

2.展示用戶能做什么

當構想引導頁的體驗時，從客戶的角度考慮。展示客戶如何能從產品中獲利是一種展示這個產品有多好的方式。

寫下3個簡短的句子，簡要地見識這個app能提供的價值。谷歌的inbox就是一個很好的范例：

谷歌的Inbox (查看大圖)

inbox使用動詞和圖標在每個屏幕上來描述價值。動詞促使人們采取行動，好過言論的任何其他部分。

在我們自己的例子中，如下圖所示，我們演示了用戶與視頻編輯app交互的全過程，從用戶按下記錄鍵的時刻到編輯視頻，使用濾鏡和在社交媒體上分享視頻。我們強調了這個app所有功能能帶來的好處。盡管視頻功能聽起來可能有些復雜，我們為引導頁選擇了簡單的文字描述，這樣用戶能很清晰地理解他們將怎么從app中獲得好處。

（此處是視頻示例，請點擊原文查看）

3.提高對競爭優勢的關注

如果你的產品不得不和很多類似的解決方案競爭，明確強調其競爭優勢。用3-4張幻燈片告訴人們是什么使得你的應用程序和別人的不同。簡明扼要地解釋為什么人們需要你的app。

“全面”“一周兩次”“有限定的”“提醒”—以下4張幻燈片解釋了雅虎News Digest這個app的價值，比說一堆話管用。

雅虎的News Digest (查看大圖)

我喜歡News Digest引導頁的顏色。不僅僅信息突出了雅虎app和市場同類app有多么大的不同，也是因為顏色和用戶界面很配。

4.內容示例解析

如果用戶能看到內容樣本，他們將能更好地理解如何和app進行交互。

內容樣本會在產品和文檔編輯的app中主要使用。你總是能把內容樣本和提示性的幻燈片結合起來。

這是Dropbox在它的Paper app中使用了內容樣本引導用戶：

Dropbox 的Paper  (查看大圖)

把文件夾里的想法組合起來可能聽起來很復雜，但是Dropbox使用了引導頁去展示這個功能是多么簡單。界面簡潔明快，能幫助用戶快速的獲得想法。

用內容樣本做引導的情況也同樣出現在Mac的Readdle應用上。

Readdle 的documents (查看大圖)

Readdle展示給用戶哪些文件他們能夠管理，這些文件從哪里來。內容樣本強調了app價值構成的獨特性：一個包含你所有文件夾的地方。

5.使第一印象產生持久的影響

首先，引導頁的設計應該讓用戶第一次使用app的時候就采取行動。

初始的“白板”設計得當可以推動用戶采取其第一個操作。呼喚采取行動，比如一個創建新文件的插圖提示，就可以讓用戶馬上創建文件。使用白板設想未來將會發生什么。

有效的白板會教育用戶，讓用戶高興，也會提示到用戶。想想接下來的3個app，哪一個完全填充了空白屏幕：

Three apps that fill up the empty screen (查看大圖)

在第一個截圖中，我們看到了一個安裝信息類app的要求，對它能提供的價值做了一行描述。第二個截圖說服用戶導入一張銀行卡，簡化他們的費用跟蹤。第一個截圖推薦用戶增加對他們個人簡介中的職位，讓個人主頁更有吸引力。最后一張是一個有趣的設計，邀請用戶“找特別棒的廣告”。

6.實施漸進式學習系統

這是最復雜的策略，適合大型技術先進的高門檻項目。漸進式學習是一個混合系統，包括在互動各個階段不顯眼的教程、技巧和動力。

用這種方法，用戶在沒有任何視頻或知道的情況下，學習如何使用該產品。他們能輕松地找到專業工作所需的隱藏功能。漸進式學習通常包括分配制度。

 

元素

一旦你挑選出適合自己的策略，思考下怎么設計。引導頁的設計有4個關鍵因素。

1.按鈕和導航

如果你呈現了一張幻燈片，顯示箭頭等符號，預示著用戶應該滑動到下一個界面。

我迄今看到的一個最好的引導頁的設計是Dropbox的旋轉木馬app的設計，這款app如今已下線。當用戶第一次進入這個app，他們被邀請“開始”。在點擊“開始”，他們可能會向下滾動才能看到描述應用程序主要功能的幻燈片。指向標推動用戶滑動到下一頁。在引導頁的最后，用戶能注冊去使用這個app。

Dropbox的旋轉木馬app (查看大圖)

當旋轉木馬發布的時候，是相當成功的，大部分是因為它很明智的界面設計和有吸引力的引導體驗。不幸地是，該項目被停掉了。這主要是由于在Dropbox的生態系統薄弱的產品定位，并且有來自Google圖片，蘋果的iCloud和Facebook的Moments的激烈競爭。Dropbox把旋轉木馬的核心功能移植到了它的主app上。

在虛擬的旅游app的引導頁示例中，我們使用了可操作的導航。每一次點擊帶領用戶到另一個階段。我們也通過提示運用了垂直滾屏來達到一種直觀的用戶體驗。我們使用了蘋果的Motion去做這個原型。

（此處是視頻示例，請點擊原文查看）

2.提示

提示是在一定順序下出現的一系列的溝通元素。提示是連接各種組件的橋梁，簡要描述了用戶如何與這些組件進行交互。

使用提示能快速的引導用戶瀏覽界面，幫助他們在app里進行第一步的操作。一旦app更新了，你也能使用提示展示新功能。

提示能以多種形式呈現：

  -強調積極的元素

  -作為文本提示

  -彈窗里的提示

  -填充頁面的空白區域

考慮你要把提示展示給什么類型的用戶看。有經驗的用戶將會被這些提示激怒，所以讓他們跳過。

還有，有些用戶不想被引導，無論這個提示有多么吸引人。你需要尊重他們的意愿，讓他們可以跳過。

3.文字

引導頁上的問題需要遵循特定原則：

簡潔和清晰

讓每個幻燈片頁面都是一個單獨的句子，用簡潔清晰的語言描述app的關鍵價值。

可讀性

文字應該能抓住視線，在背景上能很容易識別。

整體性

文字字體和呈現應該符合整體設計語言，能反映出產品的情緒。

聽聽你的用戶，嘗試辨別出他們喜歡什么，想要聽到什么。考慮什么對他們可能很難理解，因此，需要更全面的解釋。

注意：如果你有計劃把你的app推廣到阿拉伯國家或東南亞，讓界面能在水平或垂直方向翻轉。語言上從右至左閱讀的，比如中國、日本和韓國，不應該被冷落。看看我的文章“阿拉伯、日本和中國在用戶界面和用戶體驗設計中的排版”

4.圖形化

不要在界面上過度使用文字。使用插畫、圖片會讓用戶留下視覺印象。只有文字，很難達到預期目標。視覺上兩個最重要的評判標準就是簡單性和通用性。你的圖片、圖標和符號在不同的國家和地區都應該能被平等地接受。

在圖形設計中你可能用到的最主要的形式是插畫、照片、適配、gif和截圖。

既然我們已經知道了我們能用在引導頁上的方法和元素，接下來唯一要做的就是做實際的設計。

 

設計引導頁的原型工具

我們在Yalantis上用以下工具：

Principle

Pixate

Flinto

InVision

Atomic

framer.js

Form (RelativeWave做的)

所有這些工具都能讓你做出在團隊中分享的交互原型。

我最喜歡的是Principle。我能用它在幾分鐘內做一個常用的動畫的交互原型。它很容易被操作。不像許多其他的移動UI原型工具，Principle被設計得很方便。它的簡潔性能提高你的呈現效果，讓你的設計過程更加靈活通用。

RelativeWave公司的framer.js和Form是為那些認為設計師應該知道如何編碼的人設計的。 這些工具能讓開發人員更簡單地實現你做的原型效果。

最容易創造原型的工具就是InVision，但是它對動畫同樣有限制。

我們也使用以下視頻編輯工具：

Adobe After Effects

Apple Motion

這些也能讓你創建自定義動畫，探索界面元素之間如何轉換。

 

如何讓引導頁起作用

引導頁的設計不是用來解釋界面中的單個細節，讓用戶不流失。一個典型的移動app是有許多不同的功能、組件和交互的。你不需要在引導過程中都提到它們。

指出app主要的目的和好處就夠了。以下是對引導流程設計整個過程的一個簡單總結：

1、列出產品的幾個核心特性

2、識別出產品的價值構成

3、寫下你的競爭優勢，以及產品的市場定位

4、用案例描述具體的使用場景

5、選擇能包含app價值的最合適的引導方案

6、設計圖形元素和導航流

7、在你的引導設計中創建一個交互原型

8、測試原型

9、迭代提升體驗

 

常見的誤區

在設計引導體驗時，設計師有時會犯錯。這里就是一些普遍的錯誤做法：

 -不要解釋頁面具體的細節。會讓用戶覺得自己很笨。

  -不要讓引導太長或不清晰。那樣只會出發消極情緒和誤解。

  -不要抄襲同類app。引導的設計應該是獨一無二的，對你的產品和你特定的用戶而言。

  -不要為了引導而引導。引導是整個和用戶交流系統里的一個組件，不要因為別人都這么做，而僅僅把它當做一個特性來設計。引導頁應該補充和加強產品的使用體驗。

記住即使是最好的引導體驗也不能修復整個產品的用戶體驗問題。

設計引導可能需要一些時間，但是最終，用戶的體驗才是最重要的。在設計一個引導體驗的時候記住以下幾點：

  -通過分析和用戶測試，衡量你的引導設計的有效性。手上有相關數據，你就更能找到成功的秘訣。

  -從他人的錯誤中學習，我們很幸運有那么多資源。

  -研究好的引導頁設計的案例。在UX Archive, User Flow Patterns和Pttrns上獲得靈感。

如Help Scout公司的Samuel Hulick所言，引導頁不是一個特性，它的設計是一個漫長的過程，不會隨著注冊按鈕而結束。

 

結論

盡管有很多人已經說過引導頁的重要性，很多公司仍然不重視。這也是可以理解的，畢竟設計引導頁也要花很多時間和資源。

但是讓我們看看數據告訴了我們什么：

  -根據 Gomez對線上購物行為的一條研究，88%的線上用戶在經歷了一個差的體驗后很少會回訪。

  -94%的設計是與第一印象相關的。

  -好的引導能提高60%的轉化率。