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

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

2.展示用戶能做什么

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

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

谷歌的Inbox (查看大圖)

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

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

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

3.提高對競爭優(yōu)勢的關注

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

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

雅虎的News Digest (查看大圖)

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

4.內(nèi)容示例解析

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

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

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

Dropbox 的Paper  (查看大圖)

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

用內(nèi)容樣本做引導的情況也同樣出現(xiàn)在Mac的Readdle應用上。

Readdle 的documents (查看大圖)

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

5.使第一印象產(chǎn)生持久的影響

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

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

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

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

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

6.實施漸進式學習系統(tǒng)

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

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

元素

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

1.按鈕和導航

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

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

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

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

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

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

2.提示

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

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

提示能以多種形式呈現(xiàn)：

  -強調(diào)積極的元素

  -作為文本提示

  -彈窗里的提示

  -填充頁面的空白區(qū)域

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

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

3.文字

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

簡潔和清晰

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

可讀性

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

整體性

文字字體和呈現(xiàn)應該符合整體設計語言，能反映出產(chǎn)品的情緒。

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

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

4.圖形化

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

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

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

設計引導頁的原型工具

我們在Yalantis上用以下工具：

Principle

Pixate

Flinto

InVision

Atomic

framer.js

Form (RelativeWave做的)

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

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

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

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

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

Adobe After Effects

Apple Motion

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

如何讓引導頁起作用

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

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

1、列出產(chǎn)品的幾個核心特性

2、識別出產(chǎn)品的價值構成

3、寫下你的競爭優(yōu)勢，以及產(chǎn)品的市場定位

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

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

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

7、在你的引導設計中創(chuàng)建一個交互原型

8、測試原型

9、迭代提升體驗

常見的誤區(qū)

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

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

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

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

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

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

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

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

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

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

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

結論

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

但是讓我們看看數(shù)據(jù)告訴了我們什么：

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

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

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