（Onboarding 是指用戶第一次使用產(chǎn)品時認識、熟悉產(chǎn)品的過程）

往期回顧：

對設(shè)計系統(tǒng)有所認識的話應(yīng)該會知道原子設(shè)計（Atomic Design）的重要性，我們也能將同樣的概念應(yīng)用在 onboarding 上，其構(gòu)成從宏觀到微觀分成體驗流程、控件形式與界面元素三個層級。

體驗流程是一個有時序性的旅程，可以由數(shù)個不同的載具表現(xiàn)組合而成；控件則是承載信息而存在的平面，可以放上不同的元素；而界面元素是無法再行分割的對象。

我在每個階段都舉了幾個常見的例子，搭配市面上產(chǎn)品的應(yīng)用方法。

體驗流程

1. 分流 Branching

一個產(chǎn)品通常不會只有一種用戶——使用健身 app 可能是為了減肥，也可能是為了增重；使用協(xié)作產(chǎn)品可能是為了記錄工作成果，也可能是為了管理團隊。如果能夠在 onboarding 階段了解用戶的主要意圖、在適量的搜集信息后將用戶分流（記得上篇的避免過度吸收法則嗎？），就能夠打造更切身的體驗。

除了用戶分流之外，還有一些概括性的分流如下：

真正新的使用者 vs. 回流使用者

某些使用者只是因為一些外部因素（手機掉了、手滑刪掉 app、忘記密碼）而重新登錄/下載產(chǎn)品，他們已經(jīng)接觸過產(chǎn)品的核心價值了，并不需要再次學習，這就是為什么跳過（skip）功能很重要。

邀請人 vs. 受邀人

如果邀請人已經(jīng)設(shè)定好群組，受邀人應(yīng)該自動被加入，某些信息也該自動填入，而非讓用戶再填一次，從而導(dǎo)致出錯。

新手 vs. 老手

與專業(yè)領(lǐng)域高度相關(guān)的產(chǎn)品（例如 Adobe 系列、CAD 系列等）還可以將用戶區(qū)分為已經(jīng)很熟悉作業(yè)流程的老手與初學者等級的新手。老手最重視的是定制化以符合他們習慣的作業(yè)流程、作業(yè)效率高不高，并且跟其他競品做比較。新手則不然，初次使用產(chǎn)品時的他們也是初次進入這個領(lǐng)域，如果能幫助他們更加了解這個領(lǐng)域的大致流程的話會很加分。

△ Photoshop 的豐富資源指引（Rich Tooltips）對于新手來說是一大神助

2. 展示 Showcase

特別點出幾個重點 features，簡單地告知用戶最重要的功能為何、組件在哪里，用戶在登錄產(chǎn)品之后只要知道這幾個主要動作就可以打遍天下無敵手。

△ Slack 指出 channel 和對話框如何使用

當產(chǎn)品較為復(fù)雜，難以指出特定 feature 時，也常以影片或圖片來展現(xiàn)產(chǎn)品價值——也就是畫一張大餅給用戶，讓他們想象未來的生活在用了這個產(chǎn)品后會有多便利，或是讓自我感覺提升。

3. 實際演練 Do to Learn

相對于展示，實際演練更著重用戶要親自執(zhí)行。許多研究都證實從做中學習的成效，就算只是訓(xùn)練肌肉記憶（muscle memory），也能讓用戶對界面的物理空間更有概念，像是「噢對剛才有做過，我記得按鍵在右上角」。

我們也可以設(shè)計一套 demo 版的試用，像是將 scenario 抓一個出來讓用戶試跑，跑過一個假想的故事情節(jié)后印象會更為深刻。

4. 演化成資源庫 Resource

在初次展示后將用戶引導(dǎo)的數(shù)據(jù)回收再利用，變成每當用戶有問題時都隨時可用的資源庫。

載具形式

1. 導(dǎo)覽 Guided Tour

可能是影片，也可能是滑動式 slideshow，但總之是向用戶介紹產(chǎn)品的主要功能或是傳達產(chǎn)品價值，通常是為了展示的體驗流程所設(shè)置。

2. 指引 Tooltip / Coachmark

用極小的空間指向目標物，既可以集中用戶注意力，又不會遮蓋住大部分的使用空間，用戶可以一邊進行正規(guī)作業(yè)，一邊通過指引了解不懂的內(nèi)容。

△ Dropbox Paper 用詼諧的語氣鼓勵你開始打字

有一陣子很多產(chǎn)品會將所有指引放在同一張圖上，但其實使用不當很容易造成信息過載、注意力分散、之后會很難全數(shù)記住的情況，我的建議是一次一個比較好。

3. 秀給我看 Show Me

通常只會出現(xiàn)在教程中，強迫用戶一定要親自去按到按鍵或執(zhí)行關(guān)鍵動作，切實練習用戶的肌肉記憶。

界面元素

1. 空白狀態(tài)的行動呼吁 Empty State CTA

擅用空白狀態(tài)是 onboarding 重要的一環(huán)，畢竟許多產(chǎn)品在用戶動作之前可能都沒有太多料，這時候就要運用行動呼吁。

例如 Tumblr 在指導(dǎo)使用者選擇有興趣的領(lǐng)域之后就指出如何 po 內(nèi)容，因為其用戶生成平臺（UGC，User-generated content）的本質(zhì)就是要鼓勵用戶多交流、多產(chǎn)出，平臺才有價值。

2. 進度列 Progress Bar

提供進度可視化，讓用戶有掌控時間的感覺，而不是不知道自己還要再走幾個步驟而感到不耐煩。

Basecamp 將進度列擺在上端，讓使用者知道已經(jīng)快做完這些設(shè)置了

3. 待辦事項 Checklist

人類天生喜歡將事情「全部做完」，欲罷不能：科技如何讓我們上癮？可以協(xié)助我們「引誘」用戶更愿意完成 onboarding 程序。

Bluma Zeigarnik 讓受試者完成某些任務(wù)，但在他們完成另一些任務(wù)前打斷他們，強迫他們開始進行其他的任務(wù)。這些受試者會非常不情愿地停下手上正在做的事，有些人會強烈抗議，有些人甚至會生氣，這顯示出 Zeigarnik 的打斷為他們帶來多么大的壓力。到實驗的最后，受試者清楚記得那些未完成的任務(wù)。如果是打斷后一陣子又讓他們完成的話，就沒有這種效應(yīng)。（摘自 欲罷不能）

4. 跳過 Skip

每次有 onboarding 都會選擇跳過的人舉手！

我喜歡把這稱為不喜歡看桌游規(guī)則的人們，所以在使用中遇到困難時給予提示，對他們來說才是最實用而且最愉悅的，而不是在使用前的紙上談兵。

△ Tumblr 在使用者第一次發(fā)文時才提示如何裝飾文字

設(shè)計 onboarding 時并不是只能選擇一種方法，我們可以靈活運用各種元素。將 onboarding 視為一個旅程，而不是單一元素的無限重復(fù)。我看過大部分最棒的例子都是綜合使用上述多種元素，以下以新興生產(chǎn)力工具 Coda 為例，來看看集上述大成的 onboarding 作品。

在第一次進入產(chǎn)品使用引導(dǎo)時，可以自行選擇偏好的學習方式——影片或是交互式教學。

Coda 并沒有強制用戶立刻進入 onboarding 模式，而是在呈現(xiàn)主畫面之余，讓我們看到右側(cè)的待辦事項，令人產(chǎn)生「想將之完成」的欲望。

點入后，先有個 setup 內(nèi)容，任務(wù)情境是為了項目經(jīng)理所設(shè)計，但隨著使用教程的進行，用戶也能夠聯(lián)想到自己生活中的其他任務(wù)，例如安排家庭旅游、寫系列文案、追蹤買家信息等。

正式進入學習階段后，進度條就出現(xiàn)了。

單純根據(jù)文字敘述，用戶仍然可能混淆，這時候 Show Me 功能可以減少不必要的誤解。

同上，當用專有名詞（此處的 section ）介紹某個界面元素時，將其他無關(guān)緊要的區(qū)域遮蓋住，聚焦在重點區(qū)域，用戶更容易將專有名詞跟界面鏈接在一起。否則單說 section 誰知道是哪一個 section？

結(jié)束時記得給辛苦學習的用戶一些獎勵，并且貼心附上下一步，當然還是要留給使用者最終決定權(quán)。

完成一項后，Coda 會幫用戶將完成的項目劃除，于是得到立即的回饋。

完成所有步驟之后，原先是教程列的右側(cè)區(qū)域轉(zhuǎn)變成資源列，每當使用上遇到困難時就可以尋求各種協(xié)助。

題外話與小結(jié)

Onboarding 并不是只會出現(xiàn)一次，推出多年的產(chǎn)品也仍會時常進行。

onboarding 的程序，例如推出新 feature 或有重新設(shè)計（redesign）的時候，目的仍然是讓用戶快速熟悉產(chǎn)品，所以這是身為產(chǎn)品設(shè)計師不可忽視的一環(huán)。

另外，除了 UI/UX 設(shè)計之外，文案寫作也極其重要——如何跟用戶訴說一個吸引人的故事、描繪出他們想象中的自己，也是成功 onboarding 必要元素。

文章來源：優(yōu)設(shè)    作者：