當(dāng)發(fā)布一個app，你需要花很多時間和資源去吸引用戶。你可以使用許多手段把人們引到你的app，像廣告、推薦、公共關(guān)系和內(nèi)容營銷。但是當(dāng)別人終于下載了app，他們有時會覺得被拋棄了。你必須很清晰地告訴用戶為什么他們需要你的app。
研究表明90%的用戶下載app后只用一次，然后就永久地刪除了。人們經(jīng)常棄用app是因為界面設(shè)計真的很難，或者整體就是很差的體驗。app沒有幫用戶解決問題，在界面、菜單和按鈕操作中他們感覺很困惑。
在用戶界面設(shè)計基礎(chǔ)的第五章，Jane Portman說過：
“一旦用戶登錄app，他們經(jīng)常被放在一邊。他們開始溺亡，而不是游向目標(biāo)。”
對給你app第二次機會的用戶，他們需要理解4件事：
1. 為什么他們需要這個app
2. 這個app能為他們做什么
3. 它最重要的特性是什么
4. 如果使用這些特性
最好的理解你app目的的方式就是通過一個過程體驗的管理。
什么是引導(dǎo)頁？
這個詞是來源于人力資源。意思是幫助一個新員工適應(yīng)新的工作環(huán)境。在軟件開發(fā)領(lǐng)域，根據(jù)新用戶的加入，引導(dǎo)頁的意思是幫助用戶成功適應(yīng)并完全擁抱一款產(chǎn)品。
引導(dǎo)頁遵循著2/8原則。只有你快速教別人如何使用小的特性，那些他們會花80%時間使用的特性，才是有效的。但是你也應(yīng)該解釋為什么這些特性這么有用。
引導(dǎo)頁的完成，在于展示了一系列主要信息，那些展示給用戶如何通過和app交互來解決問題或者展示了app主要創(chuàng)意和關(guān)鍵性特征的信息。引導(dǎo)頁能采用多種形式：
l 介紹性的幻燈片或視頻
l 小提示
l 界面引導(dǎo)
l 內(nèi)容示例
l 復(fù)雜的解決方案
所有的這些方案在與用戶交流中都是有效的。選擇一種對你目標(biāo)用戶最管用的方式，讓你app的功能更容易被理解。
接下來的視頻會展示一些幻燈片，這些幻燈片被用于一個旅游app來達(dá)到引導(dǎo)用戶的目的。
（此處是視頻示例，請點擊原文查看）
我喜歡這種實現(xiàn)方式，因為很有趣。在飛行的過程中，你將會在低溫環(huán)境中睡眠。。。這是個抓住用戶體驗的好例子。我也喜歡設(shè)計簡潔。只有3張幻燈片——創(chuàng)建賬戶——選擇星球——離開——但是他們完美地傳達(dá)了app的主旨。
Beats Music這個app使用了引導(dǎo)頁旨在吸引用戶，讓他們的音樂試聽體驗變得個性化：
Beats Music 的引導(dǎo)頁 (查看大圖)
這種類型的引導(dǎo)設(shè)計對用戶的音樂品味有要求，讓他們的體驗更加獨特。“只為了你”這個信息是一種很棒的方式，來告訴用戶能從分享個人偏好中獲得什么好處。而且，人們喜歡談?wù)搫e人，談?wù)撍麄兿矚g什么。引導(dǎo)頁可能是必須迎合多樣化用戶的最好策略。
IFTTT，一個眾所周知的服務(wù)，在聯(lián)網(wǎng)服務(wù)中自動化小任務(wù)，它使用了小提示去解釋其獨特的產(chǎn)品。
IFTTT的引導(dǎo)提示 (查看大圖)
IFTTT展示了一個菜譜應(yīng)該是什么樣的，解釋了界面中的每個元素，被用到的特殊模塊——觸發(fā)頻道、操作頻道——幫助人們更清晰的理解“如果。。。然后。。。”這個邏輯。
策略
既然我們知道有不同的引導(dǎo)形式，讓我們想出如何設(shè)計盡可能讓人愉悅的引導(dǎo)體驗。
如果你為一款編輯圖片的app設(shè)計引導(dǎo)頁，你可能會做4-5也介紹性的幻燈片。一款有圖表和預(yù)算功能的金融類app可能需要更多的細(xì)節(jié)描述或系統(tǒng)提示。對于一個音樂類的app，你可能會采用一個幫手來簡要解釋如何使用控件去創(chuàng)建一個跟蹤軌跡。
有些設(shè)計師采用了繁雜的方法，把兩種后更多種方式結(jié)合使用。例如，你可能把一個包含線索和幫助菜單的介紹性的視頻進(jìn)行了詳細(xì)地說明。以谷歌inbox這款應(yīng)用的視頻為例。
讓我們一起來探索6個吸引用戶的策略。
1.引發(fā)積極情緒
一旦人們開始使用一款app，他們很容易忘記這個入門培訓(xùn)，然后迷失在頁面設(shè)計中。為了把他們引導(dǎo)到正確的方向，你可能要gamify你的app。比如，你可以提供一些與成就相關(guān)的小技巧，或者在用戶完成一些任務(wù)時表揚他們。成就引發(fā)積極情緒。如果你的產(chǎn)品能讓人們有成就感，那么就會一直用。
在用戶界面設(shè)計基礎(chǔ)的第五章，Jane Portman說過：
“任何用戶引導(dǎo)都是心理學(xué)：早期的成就感。成就會讓用戶回來。”
看MailChimp是如何通過表揚用戶完成任務(wù)來引發(fā)他們的積極情緒：
MailChimp (查看大圖)
MailChimp使用了它獨特的方式和顧客溝通。“擊掌”是很有趣的，令人興奮的。MailChimp只是需要告訴用戶他們的活動很快就會發(fā)出去，但是MailChimp給信息添加了情感。擴充情緒在設(shè)計中是很有力的技巧。
當(dāng)滿足以下標(biāo)準(zhǔn)時，引導(dǎo)頁能觸發(fā)情感：
l 導(dǎo)航是有意義的，很容易被理解；
l 設(shè)計從視覺上對目標(biāo)用戶是有吸引力的；
l 幻燈片的播放方式很有趣，能讓用戶想繼續(xù)往下翻；
l 整個的體驗是印象深刻的，有個性的，能表達(dá)品牌和客戶的個性。
我們在Yalantis用這些標(biāo)準(zhǔn)來設(shè)計我們的引導(dǎo)過程。下面的概念說明了我們?nèi)绾卫们楦行枨?/strong>去吸引一個假定的時尚app的目標(biāo)受眾。當(dāng)時的想法是幫助年輕女性選擇時尚的服裝。但我們并沒有嚴(yán)格重點講解假定產(chǎn)品的功能。我們創(chuàng)建了引導(dǎo)頁，作為一個情感上有吸引力的設(shè)計示例。
（此處是視頻示例，請點擊原文查看）
我們用了Adobe After Effects（你可能很容易實現(xiàn)這個想法，用任何的原型工具，結(jié)合插圖）。我們挑選出自然色彩為原型，引導(dǎo)頁是與一個人的日常生活中的經(jīng)歷聯(lián)系的。
2.展示用戶能做什么
當(dāng)構(gòu)想引導(dǎo)頁的體驗時，從客戶的角度考慮。展示客戶如何能從產(chǎn)品中獲利是一種展示這個產(chǎn)品有多好的方式。
寫下3個簡短的句子，簡要地見識這個app能提供的價值。谷歌的inbox就是一個很好的范例：
谷歌的Inbox (查看大圖)
inbox使用動詞和圖標(biāo)在每個屏幕上來描述價值。動詞促使人們采取行動，好過言論的任何其他部分。
在我們自己的例子中，如下圖所示，我們演示了用戶與視頻編輯app交互的全過程，從用戶按下記錄鍵的時刻到編輯視頻，使用濾鏡和在社交媒體上分享視頻。我們強調(diào)了這個app所有功能能帶來的好處。盡管視頻功能聽起來可能有些復(fù)雜，我們?yōu)橐龑?dǎo)頁選擇了簡單的文字描述，這樣用戶能很清晰地理解他們將怎么從app中獲得好處。
（此處是視頻示例，請點擊原文查看）
3.提高對競爭優(yōu)勢的關(guān)注
如果你的產(chǎn)品不得不和很多類似的解決方案競爭，明確強調(diào)其競爭優(yōu)勢。用3-4張幻燈片告訴人們是什么使得你的應(yīng)用程序和別人的不同。簡明扼要地解釋為什么人們需要你的app。
“全面”“一周兩次”“有限定的”“提醒”—以下4張幻燈片解釋了雅虎News Digest這個app的價值，比說一堆話管用。
雅虎的News Digest (查看大圖)
我喜歡News Digest引導(dǎo)頁的顏色。不僅僅信息突出了雅虎app和市場同類app有多么大的不同，也是因為顏色和用戶界面很配。
4.內(nèi)容示例解析
如果用戶能看到內(nèi)容樣本，他們將能更好地理解如何和app進(jìn)行交互。
內(nèi)容樣本會在產(chǎn)品和文檔編輯的app中主要使用。你總是能把內(nèi)容樣本和提示性的幻燈片結(jié)合起來。
這是Dropbox在它的Paper app中使用了內(nèi)容樣本引導(dǎo)用戶：
Dropbox 的Paper (查看大圖)
把文件夾里的想法組合起來可能聽起來很復(fù)雜，但是Dropbox使用了引導(dǎo)頁去展示這個功能是多么簡單。界面簡潔明快，能幫助用戶快速的獲得想法。
用內(nèi)容樣本做引導(dǎo)的情況也同樣出現(xiàn)在Mac的Readdle應(yīng)用上。
Readdle 的documents (查看大圖)
Readdle展示給用戶哪些文件他們能夠管理，這些文件從哪里來。內(nèi)容樣本強調(diào)了app價值構(gòu)成的獨特性：一個包含你所有文件夾的地方。
5.使第一印象產(chǎn)生持久的影響
首先，引導(dǎo)頁的設(shè)計應(yīng)該讓用戶第一次使用app的時候就采取行動。
初始的“白板”設(shè)計得當(dāng)可以推動用戶采取其第一個操作。呼喚采取行動，比如一個創(chuàng)建新文件的插圖提示，就可以讓用戶馬上創(chuàng)建文件。使用白板設(shè)想未來將會發(fā)生什么。
有效的白板會教育用戶，讓用戶高興，也會提示到用戶。想想接下來的3個app，哪一個完全填充了空白屏幕：
Three apps that fill up the empty screen (查看大圖)
在第一個截圖中，我們看到了一個安裝信息類app的要求，對它能提供的價值做了一行描述。第二個截圖說服用戶導(dǎo)入一張銀行卡，簡化他們的費用跟蹤。第一個截圖推薦用戶增加對他們個人簡介中的職位，讓個人主頁更有吸引力。最后一張是一個有趣的設(shè)計，邀請用戶“找特別棒的廣告”。
6.實施漸進(jìn)式學(xué)習(xí)系統(tǒng)
這是最復(fù)雜的策略，適合大型技術(shù)先進(jìn)的高門檻項目。漸進(jìn)式學(xué)習(xí)是一個混合系統(tǒng)，包括在互動各個階段不顯眼的教程、技巧和動力。
用這種方法，用戶在沒有任何視頻或知道的情況下，學(xué)習(xí)如何使用該產(chǎn)品。他們能輕松地找到專業(yè)工作所需的隱藏功能。漸進(jìn)式學(xué)習(xí)通常包括分配制度。
元素
一旦你挑選出適合自己的策略，思考下怎么設(shè)計。引導(dǎo)頁的設(shè)計有4個關(guān)鍵因素。
1.按鈕和導(dǎo)航
如果你呈現(xiàn)了一張幻燈片，顯示箭頭等符號，預(yù)示著用戶應(yīng)該滑動到下一個界面。
我迄今看到的一個最好的引導(dǎo)頁的設(shè)計是Dropbox的旋轉(zhuǎn)木馬app的設(shè)計，這款app如今已下線。當(dāng)用戶第一次進(jìn)入這個app，他們被邀請“開始”。在點擊“開始”，他們可能會向下滾動才能看到描述應(yīng)用程序主要功能的幻燈片。指向標(biāo)推動用戶滑動到下一頁。在引導(dǎo)頁的最后，用戶能注冊去使用這個app。
Dropbox的旋轉(zhuǎn)木馬app (查看大圖)
當(dāng)旋轉(zhuǎn)木馬發(fā)布的時候，是相當(dāng)成功的，大部分是因為它很明智的界面設(shè)計和有吸引力的引導(dǎo)體驗。不幸地是，該項目被停掉了。這主要是由于在Dropbox的生態(tài)系統(tǒng)薄弱的產(chǎn)品定位，并且有來自Google圖片，蘋果的iCloud和Facebook的Moments的激烈競爭。Dropbox把旋轉(zhuǎn)木馬的核心功能移植到了它的主app上。
在虛擬的旅游app的引導(dǎo)頁示例中，我們使用了可操作的導(dǎo)航。每一次點擊帶領(lǐng)用戶到另一個階段。我們也通過提示運用了垂直滾屏來達(dá)到一種直觀的用戶體驗。我們使用了蘋果的Motion去做這個原型。
（此處是視頻示例，請點擊原文查看）
2.提示
提示是在一定順序下出現(xiàn)的一系列的溝通元素。提示是連接各種組件的橋梁，簡要描述了用戶如何與這些組件進(jìn)行交互。
使用提示能快速的引導(dǎo)用戶瀏覽界面，幫助他們在app里進(jìn)行第一步的操作。一旦app更新了，你也能使用提示展示新功能。
提示能以多種形式呈現(xiàn)：
-強調(diào)積極的元素
-作為文本提示
-彈窗里的提示
-填充頁面的空白區(qū)域
考慮你要把提示展示給什么類型的用戶看。有經(jīng)驗的用戶將會被這些提示激怒，所以讓他們跳過。
還有，有些用戶不想被引導(dǎo)，無論這個提示有多么吸引人。你需要尊重他們的意愿，讓他們可以跳過。
3.文字
引導(dǎo)頁上的問題需要遵循特定原則：
簡潔和清晰
讓每個幻燈片頁面都是一個單獨的句子，用簡潔清晰的語言描述app的關(guān)鍵價值。
可讀性
文字應(yīng)該能抓住視線，在背景上能很容易識別。
整體性
文字字體和呈現(xiàn)應(yīng)該符合整體設(shè)計語言，能反映出產(chǎn)品的情緒。
聽聽你的用戶，嘗試辨別出他們喜歡什么，想要聽到什么?？紤]什么對他們可能很難理解，因此，需要更全面的解釋。
注意：如果你有計劃把你的app推廣到阿拉伯國家或東南亞，讓界面能在水平或垂直方向翻轉(zhuǎn)。語言上從右至左閱讀的，比如中國、日本和韓國，不應(yīng)該被冷落。看看我的文章“阿拉伯、日本和中國在用戶界面和用戶體驗設(shè)計中的排版”
4.圖形化
不要在界面上過度使用文字。使用插畫、圖片會讓用戶留下視覺印象。只有文字，很難達(dá)到預(yù)期目標(biāo)。視覺上兩個最重要的評判標(biāo)準(zhǔn)就是簡單性和通用性。你的圖片、圖標(biāo)和符號在不同的國家和地區(qū)都應(yīng)該能被平等地接受。
在圖形設(shè)計中你可能用到的最主要的形式是插畫、照片、適配、gif和截圖。
既然我們已經(jīng)知道了我們能用在引導(dǎo)頁上的方法和元素，接下來唯一要做的就是做實際的設(shè)計。
設(shè)計引導(dǎo)頁的原型工具
我們在Yalantis上用以下工具：
Principle
Pixate
Flinto
InVision
Atomic
framer.js
Form (RelativeWave做的)
所有這些工具都能讓你做出在團隊中分享的交互原型。
我最喜歡的是Principle。我能用它在幾分鐘內(nèi)做一個常用的動畫的交互原型。它很容易被操作。不像許多其他的移動UI原型工具，Principle被設(shè)計得很方便。它的簡潔性能提高你的呈現(xiàn)效果，讓你的設(shè)計過程更加靈活通用。
RelativeWave公司的framer.js和Form是為那些認(rèn)為設(shè)計師應(yīng)該知道如何編碼的人設(shè)計的。 這些工具能讓開發(fā)人員更簡單地實現(xiàn)你做的原型效果。
最容易創(chuàng)造原型的工具就是InVision，但是它對動畫同樣有限制。
我們也使用以下視頻編輯工具：
Adobe After Effects
Apple Motion
這些也能讓你創(chuàng)建自定義動畫，探索界面元素之間如何轉(zhuǎn)換。
如何讓引導(dǎo)頁起作用
引導(dǎo)頁的設(shè)計不是用來解釋界面中的單個細(xì)節(jié)，讓用戶不流失。一個典型的移動app是有許多不同的功能、組件和交互的。你不需要在引導(dǎo)過程中都提到它們。
指出app主要的目的和好處就夠了。以下是對引導(dǎo)流程設(shè)計整個過程的一個簡單總結(jié)：
1、列出產(chǎn)品的幾個核心特性
2、識別出產(chǎn)品的價值構(gòu)成
3、寫下你的競爭優(yōu)勢，以及產(chǎn)品的市場定位
4、用案例描述具體的使用場景
5、選擇能包含app價值的最合適的引導(dǎo)方案
6、設(shè)計圖形元素和導(dǎo)航流
7、在你的引導(dǎo)設(shè)計中創(chuàng)建一個交互原型
8、測試原型
9、迭代提升體驗
常見的誤區(qū)
在設(shè)計引導(dǎo)體驗時，設(shè)計師有時會犯錯。這里就是一些普遍的錯誤做法：
-不要解釋頁面具體的細(xì)節(jié)。會讓用戶覺得自己很笨。
-不要讓引導(dǎo)太長或不清晰。那樣只會出發(fā)消極情緒和誤解。
-不要抄襲同類app。引導(dǎo)的設(shè)計應(yīng)該是獨一無二的，對你的產(chǎn)品和你特定的用戶而言。
-不要為了引導(dǎo)而引導(dǎo)。引導(dǎo)是整個和用戶交流系統(tǒng)里的一個組件，不要因為別人都這么做，而僅僅把它當(dāng)做一個特性來設(shè)計。引導(dǎo)頁應(yīng)該補充和加強產(chǎn)品的使用體驗。
記住即使是最好的引導(dǎo)體驗也不能修復(fù)整個產(chǎn)品的用戶體驗問題。
設(shè)計引導(dǎo)可能需要一些時間，但是最終，用戶的體驗才是最重要的。在設(shè)計一個引導(dǎo)體驗的時候記住以下幾點：
-通過分析和用戶測試，衡量你的引導(dǎo)設(shè)計的有效性。手上有相關(guān)數(shù)據(jù)，你就更能找到成功的秘訣。
-從他人的錯誤中學(xué)習(xí)，我們很幸運有那么多資源。
-研究好的引導(dǎo)頁設(shè)計的案例。在UX Archive, User Flow Patterns和Pttrns上獲得靈感。
如Help Scout公司的Samuel Hulick所言，引導(dǎo)頁不是一個特性，它的設(shè)計是一個漫長的過程，不會隨著注冊按鈕而結(jié)束。
結(jié)論
盡管有很多人已經(jīng)說過引導(dǎo)頁的重要性，很多公司仍然不重視。這也是可以理解的，畢竟設(shè)計引導(dǎo)頁也要花很多時間和資源。
但是讓我們看看數(shù)據(jù)告訴了我們什么：
-根據(jù) Gomez對線上購物行為的一條研究，88%的線上用戶在經(jīng)歷了一個差的體驗后很少會回訪。
-94%的設(shè)計是與第一印象相關(guān)的。
-好的引導(dǎo)能提高60%的轉(zhuǎn)化率。
