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

往期回顧：

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

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

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

體驗(yàn)流程

1. 分流 Branching

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

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

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

某些使用者只是因?yàn)橐恍┩獠恳蛩兀ㄊ謾C(jī)掉了、手滑刪掉 app、忘記密碼）而重新登錄/下載產(chǎn)品，他們已經(jīng)接觸過(guò)產(chǎn)品的核心價(jià)值了，并不需要再次學(xué)習(xí)，這就是為什么跳過(guò)（skip）功能很重要。

邀請(qǐng)人 vs. 受邀人

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

新手 vs. 老手

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

△ Photoshop 的豐富資源指引（Rich Tooltips）對(duì)于新手來(lái)說(shuō)是一大神助

2. 展示 Showcase

特別點(diǎn)出幾個(gè)重點(diǎn) features，簡(jiǎn)單地告知用戶最重要的功能為何、組件在哪里，用戶在登錄產(chǎn)品之后只要知道這幾個(gè)主要?jiǎng)幼骶涂梢源虮樘煜聼o(wú)敵手。

△ Slack 指出 channel 和對(duì)話框如何使用

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

3. 實(shí)際演練 Do to Learn

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

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

4. 演化成資源庫(kù) Resource

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

載具形式

1. 導(dǎo)覽 Guided Tour

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

2. 指引 Tooltip / Coachmark

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

△ Dropbox Paper 用詼諧的語(yǔ)氣鼓勵(lì)你開(kāi)始打字

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

3. 秀給我看 Show Me

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

界面元素

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

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

例如 Tumblr 在指導(dǎo)使用者選擇有興趣的領(lǐng)域之后就指出如何 po 內(nèi)容，因?yàn)槠溆脩羯善脚_(tái)（UGC，User-generated content）的本質(zhì)就是要鼓勵(lì)用戶多交流、多產(chǎn)出，平臺(tái)才有價(jià)值。

2. 進(jìn)度列 Progress Bar

提供進(jìn)度可視化，讓用戶有掌控時(shí)間的感覺(jué)，而不是不知道自己還要再走幾個(gè)步驟而感到不耐煩。

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

3. 待辦事項(xiàng) Checklist

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

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

4. 跳過(guò) Skip

每次有 onboarding 都會(huì)選擇跳過(guò)的人舉手！

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

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

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

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

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

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

正式進(jìn)入學(xué)習(xí)階段后，進(jìn)度條就出現(xiàn)了。

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

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

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

完成一項(xiàng)后，Coda 會(huì)幫用戶將完成的項(xiàng)目劃除，于是得到立即的回饋。

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

題外話與小結(jié)

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

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

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

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