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