【Smashing專欄】如何為移動設備用戶建立愉快的引導體驗

當發布一款APP時，你需要花費大量的時間和資源來吸引用戶。你可以利用各種方式引誘人們進入你的APP，可以是廣告，推薦程序，公關和內容營銷。但是，往往人們最終下載了APP后，他們反而覺得自己被遺棄了。你必須清楚地展示給用戶他們為何需要你的APP。

研究表明，90%的APP只會被用戶使用一次，并且最終會被刪除。人們經常因為糟糕的界面設計或負面的整體體驗而刪除APP。APP沒有解決用戶的問題，而是將他們困在大量的屏幕、菜單和按鈕中。

在Fundamental UI Design的第五章中， Jane Portman說道：用戶一旦登錄進APP，他們往往被孤立。他們逐漸被功能和頁面淹沒，而不是朝目標游去。

為了讓用戶給你的APP第二次機會，你需要將以下4件事傳達給用戶：

1.為什么他們需要你的APP，

2.你的APP能為他們做什么，

3.它最重要的功能是什么，

4.如何使用這些功能。

對APP用途的最佳傳達方式是讓用戶經歷一次引人入勝的onboarding experience（引導體驗）。

什么是onboarding？

“onboarding”這個術語來自于人力資源領域，含義是幫助員工適應新的工作環境。根據 UserOnboard，在軟件開發中，onboarding就是幫助用戶適應并完全接納一個產品。

Onboarding（下文會翻譯為“引導設計”）遵循80/20原則，只有當你能夠快速告訴用戶如何使用APP中20%的功能時（且這20%占據了用戶80%的使用時間），它才有效。但是你需要解釋為什么這些功能對于用戶來說非常有用。

引導設計是通過展示一系列簡短的信息告訴用戶如何通過APP解決他們的問題，或者向用戶展示APP主要的理念或殺手級功能。引導設計有以下幾種形式：

?引導頁或視頻介紹,

?對界面元素標注各種提示，

?界面預覽與介紹

?內容示例,

?以上幾種形式的綜合解決方案。

所有這些解決方案都能有效地與用戶溝通。你可以選擇一個最適用于你的目標用戶且適合展示你的產品功能的方法。

下面的視頻展示了一個旅行APP的引導頁。

Space app onboarding 演示 （圖：Sasha Gorosh）

我喜歡這種實現方式，因為它很有趣。“在飛行過程中，你將處于低溫睡眠狀態……”（視頻中的文案）完美的捕捉了這款APP的用戶體驗的縮影。我也喜歡它簡潔的設計。它只有3頁——“建立賬戶”，“選擇星球”和“出發”——卻完美地傳達了這款APP的用途。

Beats Music 使用入門向導來吸引用戶，并個性化他們的音樂聆聽體驗。

這種類型的引導設計，根據不同用戶的音樂品味，給他們創造出獨一無二的體驗。第6幅圖上的“Just for you(全心為你)”是一種很好的表達方式，告訴用戶他們可以分享自己的喜好并從中獲益。更重要的是，人們喜歡討論他們自己和他們喜歡的事物。對于一款需要滿足各種品味用戶的APP來說，引導設計可能是最好的營銷策略。

IFTTT在互聯網服務界享有盛名，用在結合各種互聯網服務并自動執行小型任務（內容來源于百度：其宗旨是“Put the internet to work for you”：ifttt旨在幫助人們利用各網站的開放API，將Facebook、Twitter等各個網站或應用銜接，完成任務，使“每個人都可以成為整個互聯網不用編程的程序員”。ifttt通過流程將各種信息串聯起來，然后再集中把你要的信息呈現給你。解決了信息的冗雜，收取或關注重要信息的問題 ）[

Terrick補充 :括號里內容太長，影響讀者對正文閱讀的連貫性，而且解釋之后對讀者對理解也沒有幫助，所以可以不要]。它使用提示來解釋產品獨特的功能：

Coach marks by IFTTT (View large version)

IFTTT 的引導展示了配方[

配方聽起來像藥材或食譜里的詞，軟件里“菜單樣式”比較常用吧。

Terrick補充: 例子里是組成一個任務的各個組件不能叫做配方]的樣式，并解釋了界面上的每個元素。他們使用了特定術語，如“觸發操作”和“動作反饋”來幫助用戶清楚地明白界面中“如果… 那么…”的邏輯。

策略

現在我們差不多知道了不同類型的引導設計，讓我們來思考如何設計一個盡可能令人愉快的引導體驗。

如果你在為一款用于編輯照片的APP做引導設計，你可以放4到5張引導頁。如果是一款有圖表和預算功能的財經類APP，可能需要一個詳細的使用流程或者引導提示。如果是一款音樂編輯軟件，你需要增加一個幫助功能來簡要說明如何使用控件創建一個音軌。

有時設計師會使用綜合的方法，結合兩種或多種方式。例如，你可以將包含線索的介紹視頻和包含詳細說明的幫助菜單結合起來。建議你參考一下谷歌Inbox應用的視頻。

讓我們一起來探討以下6種可以吸引用戶的策略。

觸發積極情緒

當人們真的開始用一款APP后，往往會忘記入門引導，然后就會迷失在UI界面里。你可以試著游戲化這款APP來引導用戶。例如，對用戶的一些操作進行表揚，或者在用戶完成了一項指定任務后對他們進行稱贊。成就感可以激發積極情緒。如果用戶在使用一個產品時經常可以產生由成功帶來的積極情緒，他們就會一直使用你的產品。

在Fundamental UI Design的第5章，Jane Portman 說:

任何用戶引導都是與心理學相關的[Psychology也有心理狀態的含義，這里應該不是某個學科的問題吧，心理學范圍太廣了，后面描述的也是用戶內心感受，心理狀態更精確些]：用戶在最初使用產品時出現的成功感和成就感會讓他們回歸到這個產品。

下面我們看一下 MailChimp 是如何在用戶完成任務后對他們進行表揚，并以此觸發用戶積極情緒的：

(擊掌！你的郵件已進入發送隊列，很快會發送出去)

MailChimp在與客戶溝通中使用了自己獨特的表達方式。“擊掌”這個行為有趣、時髦又令人振奮。其實MailChimp 僅需告知用戶他們的郵件很快會發送出去，但是他們還是給這條通知消息賦予了情感色彩。在設計中使用情感元素會有事半功倍的效果。

引導設計要引發情感共鳴，需達到以下幾個標準：

?導航含義明確且容易理解；

?能夠吸引目標用戶的視覺設計；

?每一個引導頁都能給用戶帶來超凡的美妙體驗，讓他們還想繼續滑動下一頁；

?整個引導體驗是難忘且走心的，折射出品牌和消費者的個性。

我們根據這些標準設計了產品Yalantis的APP引導體驗。下面通過假想一款時尚的APP來闡明我們如何使用情緒感染力吸引目標用戶。這是一款幫助年輕女性選擇時裝的軟件， 但是我們不能直白的介紹產品的功能。我們用這個引導體驗舉例如何對用戶進行情緒感染。

我們用Adobe的AE軟件（你可以使用任何原型工具和你自己的手繪輕松地表達這個想法）我們為原型選擇了自然色彩，將入門體驗與人們的日常生活聯系了起來。

告訴用戶他們可以用這個產品做什么

當建立引導體驗時，需要從用戶視角出發。告訴用戶如何從產品中獲益，這也是一種表達產品有多棒的方式。

寫下3個短句，簡明地表達APP可以提供的功能和產生的價值。例如谷歌的 Inbox 就是一個很好的例子：

Inbox使用動詞和圖標來描述每個界面的價值。相比其他表達方式，動詞更能促使人們采取行動。

在我自己的例子中（參考下面的視頻），演示了與視頻編輯APP的交互過程，從用戶按下錄制按鈕開始，到編輯視頻，以及使用濾鏡和分享給社交媒體的過程。我們強調了這款APP所有功能的好處。雖然視頻的功能聽起來有點復雜，但是我們在引導頁里用了簡單的詞匯，以便用戶能夠清楚地了解他們將如何從中受益。

強調競爭優勢

如果你的產品有很多競品，那就需要強調它的競爭優勢。

用3到4個引導頁告訴人們為什么你的產品與眾不同。簡明扼要地告訴人們為什么要選擇你的產品。

“全面”，“一天兩次”，“權威的”，“提醒”——通過4個引導頁介紹了雅虎的News Digest 的價值，而僅這4個頁面就勝過千言萬語。

News Digest by Yahoo (View large version)

我喜歡News Digest的引導設計的顏色。這些信息不僅強調了雅虎的APP與市場上類似APP的不同之處，而且使用了戶界面的配色。

通過內容示例進行解釋

如果用戶看到內容示例，他們會更好地理解如何使用這款APP。

內容示例主要用在效率類和內容編輯類APP上。你可以將內容示例與引導頁的提示信息結合。

下面展示了Dropbox的Paper 軟件如何使用內容示例來引導用戶：

Paper by Dropbox (View large version)

和別人合作一起創建／編輯文檔或文件夾聽起來很復雜，但是Dropbox利用引導設計來證明了它其實可以很簡單。它的用戶界面清晰且簡潔，幫助用戶快速理解他們的想法。

Mac上的文件APP Readdle中也可以看到帶有內容示例的引導設計。

Readdle顯示了哪些的文件可以管理以及這些文件的位置。內容示例強調了這個APP的獨特價值：在一個地方集中管理所有文件。

讓第一印象產生持久效果

首先，引導設計應該促使用戶在第一次進入APP時就用起來。

在初始化界面設計適當的“空白面板”可以觸發用戶的第一個動作。一個行為召喚按鈕，例如顯示一個空白文檔圖標，用戶可能就會嘗試點擊創建。在設計中可以使用留白來設定預期。

一個有效的空白面板是寓教于樂的。以下3個APP很好地填補了屏幕的空白：

第一張截圖是一個安裝消息APP的邀請，描述了這個APP的價值。第二張截圖邀請用戶上傳一張銀行卡，這樣可以幫助用戶更方便的記賬。第三張截圖建議用戶在個人主頁中添加帖子，以便讓自己更具吸引力。最后一張截圖的設計很有趣，邀請用戶“尋找精彩的廣告”。

實施循序漸進的學習系統

這是最復雜的一種策略，適用于高門檻的、大型和技術性復雜的項目。漸進式學習在所有階段的互動中綜合的運用了對用戶不產生任何干擾作用的學習指南、提示和激勵方法。

通過這種方式，用戶可以在沒有視頻和教程的情況下學習如何使用產品。他能夠輕松的找到專業性強的隱藏功能。漸進學習通常包含一個任務系統。

元素

一旦你選好了一個適合的策略，你要開始想如何設計。以下是引導設計需要考慮的四個關鍵元素。

按鈕和導航

如果你要呈現一個引導頁，可以在界面中使用箭頭或其他符號告訴用戶可以通過操作進入下一頁。

迄今為止我見過最好的引導設計是Dropbox出品的Carousel（現在已經下架了）。當用戶第一次打開APP，Carousel會邀請他們“開始”，當點擊“開始”后，用戶能夠一邊向下滾動頁面一邊了解APP的主要功能。并且會有指示符號引導用戶通過滾動頁面查看下一項概述。在引導體驗的最后一頁，用戶可以注冊繼續使用APP。

Carousel by Dropbox (View large version)

Carousel一經發布就很成功，很大程度上歸功于它巧妙的界面設計和極具吸引力的引導體驗。不幸的是，由于在Dropbox生態系統中薄弱的產品定位，以及Google Photos, Apple iCloud 和 Facebook Moments三個強力的競爭對手，這個項目被叫停了。Dropbox將Carousel的核心功能轉移到了DropboxAPP上。

在為一款虛擬現實的旅行APP做的引導體驗中，我們使用可操作的導航。每點擊一次都可以進入另一個場景。我們還通過提示引導用戶垂直滾動頁面，實現最直觀的用戶體驗。我們使用Apple Motion制作了這個原型。

提示信息

提示信息是一組在界面上以特定順序呈現的交流元素。提示信息用于解釋各種各樣的界面組件，簡要地描述用戶可以如何與這些組件交互。

使用提示信息可以引導用戶快速融入界面中，幫助他們邁出使用APP的第一步。你也可以使用提示信息向用戶展示APP更新后的新功能。

提示信息可以通過以下幾種方式呈現：

?強調激活的元素

?文本提示

?在彈窗中提示

?填補屏幕空白區域

思考一下你將向什么類型的用戶呈現提示信息。經驗豐富的用戶會因為一些很初級的提示而不耐煩，因此需要讓他們能夠選擇直接跳過這些提示。

此外，有些用戶就是不想看到引導頁，無論引導頁被設計的多么吸引人。你需要尊重他們的意愿，讓他們能夠跳過。

文本

引導設計的文本需要遵循一定指導原則：

?簡潔和清晰

確保每張引導頁只使用一個簡單句，通過清晰的語言描述該APP的關鍵價值。

?易讀性

文案應該吸睛，并且保證文字在背景色的對比下易于閱讀。

?結構

字體和文本的呈現應該與整體設計語言相匹配，并能反映出品牌[

好像還沒到brand級別？產品應該更合適吧]的調性。

傾聽你的用戶，嘗試解讀他們的喜好以及他們想要聽到什么。思考哪里對于他們來說難以理解，是否需要進行更深入的解釋。

注：如果你計劃在阿拉伯國家或東南亞拓展你的市場，你需要允許水平或垂直翻轉界面。有時候中文使用從右到左的閱讀順序，韓文和日文也會有這種情況。具體可見我們的文章“用戶界面和用戶體驗設計中的阿拉伯語、日語和漢語的文本布局”。

圖形

不要在界面上呈現過多文本。使用插畫。圖像比文本更容易在用戶的記憶中留下深刻的視覺印象。視覺的兩個重要標準是簡潔和通用。你的圖像、圖標和符號需要在不同國家和地區表達相同的含義。

在視覺設計中主要的內容類型有插畫、照片、視頻、GIF動圖和屏幕截圖。

現在我們知道在引導設計中可以用的策略和元素，接下來就是如何進行設計。

引導設計的原型工具

我們在制作Yalantis網站時使用了以下原型設計工具：

?Principle

?Pixate

?Flinto

?InVision

?Atomic

?Framer.js

?Form (來自 RelativeWave)

以上提到的工具都可以用來制作可交互的原型，并且可以分享給開發團隊。

我最喜歡的工具是Principle。短短幾分鐘我就可以用一些自定義的動畫創建一個可交互原型。不像其他復雜的UI原型工具，Principle很容易上手。它的簡潔性不僅能讓你的工作表現提升，還能讓你的設計流程更加靈活多樣。

Framer.js 和RelativeWave 的 Form用于會編程的設計師。這些工具使開發人員更容易實現你設計的原型。

制作原型最簡單的工具是InVision，但它在動畫制作上有一定局限性。

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

?Adobe After Effects

?Apple Motion

你可以使用這些工具創建流暢的自定義動畫，并嘗試各種界面元素的變化方式。

如何讓引導設計起作用

引導設計并不是為了防止用戶在使用過程中的迷失，進而去詳細解釋每個界面細節。一般的手機APP有很多不同的功能、組件和交互方式。你不需要在引導設計中介紹所有的細節。

單單指出APP的主要目的和優勢就足夠了。以下是對整個引導設計過程的小結：

1.列出一部分產品的核心功能。

2.明確產品的價值定位。

3.寫下產品的競爭優勢以及市場定位。

4.描述產品的一個特殊用例。

5.選擇最適合的引導設計策略來展現產品價值。

6.為產品設計圖像元素和導航頁。

7.為引導設計創建交互原型。

8.測試原型。

9.不斷迭代提升用戶體驗。

常見問題

設計師在進行引導體驗設計時可能會犯一些錯誤，以下是最常出現的問題：

?不要解釋明顯的界面細節，否則你會讓用戶覺得很愚蠢。

?引導設計不能太長，也不能含義模糊。否則會誤導用戶操作，并引發他們的消極情緒。

?不要模仿競品的設計，引導設計需要體現產品的獨特性，并適應你的特定用戶。

?不能為了設計而設計。引導設計不是一個其他人都在做所以我們也要做的功能，而是向用戶展示產品部分功能的窗口，引導設計的作用應該是補充和提升產品的用戶體驗。

與此同時你需要明白即使是最好的引導體驗也不能解決產品本身的體驗問題。

設計引導體驗可能需要一些額外的時間，但是最終的用戶體驗才是最重要的。進行引導設計時，請你牢記以下幾點：

?通過數據分析和用戶測試衡量引導設計的有效性。根據這些相關數據，你可以自己分析出成功的方法。

?從其他人的錯誤中汲取教訓。我們很幸運有很多前人的例子，點擊查看。

?學習優秀的引導設計作品。通過UX Archive, User Flow Patterns 和 Pttrns 這些網站可以拓展視野。

根據Help Scout公司的Samuel Hulick的經驗，引導體驗不是一個功能。對用戶的引導是個漫長的過程，不會因為用戶點了注冊按鈕就結束。

結論

盡管引導設計的重要性已經被重申了很多次，仍然有很多公司不重視它。這是可以理解的——畢竟，設計需要消耗時間和資源。

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

?根據Gomez 的網上購物行為研究，88%的線上消費者經歷了糟糕的用戶體驗后不會再次訪問這個網站。

?第一印象中的94%是跟設計相關的。

?好的引導設計可以使轉化率提高60%。

如果你有什么關于引導設計的想法，歡迎大家在評論區和我探討。

https://www.smashingmagazine.com/2016/06/complete-roadmap-building-delightful-onboarding-experience-mobile-app-users/

翻譯：夢夢羊

審校：Terrick

終審：Ying

Anton Kosolapov是APP研發公司Yalantis的一名UI/UX設計師。Anton喜歡研究設計在心理學和市場營銷方面的內容。他喜歡和家人呆在一起，喜歡看足球和打籃球。你可以在Dribbble上找到Anton的作品，或者在Twitter上關注他

本文轉載自異步社區。

網絡

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。