2020-5-22 資深UI設計者
（Onboarding 是指用戶第一次使用產(chǎn)品時認識、熟悉產(chǎn)品的過程）
往期回顧：
對設計系統(tǒng)有所認識的話應該會知道原子設計（Atomic Design）的重要性，我們也能將同樣的概念應用在 onboarding 上，其構(gòu)成從宏觀到微觀分成體驗流程、控件形式與界面元素三個層級。
體驗流程是一個有時序性的旅程，可以由數(shù)個不同的載具表現(xiàn)組合而成；控件則是承載信息而存在的平面，可以放上不同的元素；而界面元素是無法再行分割的對象。
我在每個階段都舉了幾個常見的例子，搭配市面上產(chǎn)品的應用方法。
一個產(chǎn)品通常不會只有一種用戶——使用健身 app 可能是為了減肥，也可能是為了增重；使用協(xié)作產(chǎn)品可能是為了記錄工作成果，也可能是為了管理團隊。如果能夠在 onboarding 階段了解用戶的主要意圖、在適量的搜集信息后將用戶分流（記得上篇的避免過度吸收法則嗎？），就能夠打造更切身的體驗。
除了用戶分流之外，還有一些概括性的分流如下：
真正新的使用者 vs. 回流使用者
某些使用者只是因為一些外部因素（手機掉了、手滑刪掉 app、忘記密碼）而重新登錄/下載產(chǎn)品，他們已經(jīng)接觸過產(chǎn)品的核心價值了，并不需要再次學習，這就是為什么跳過（skip）功能很重要。
邀請人 vs. 受邀人
如果邀請人已經(jīng)設定好群組，受邀人應該自動被加入，某些信息也該自動填入，而非讓用戶再填一次，從而導致出錯。
新手 vs. 老手
與專業(yè)領域高度相關的產(chǎn)品（例如 Adobe 系列、CAD 系列等）還可以將用戶區(qū)分為已經(jīng)很熟悉作業(yè)流程的老手與初學者等級的新手。老手最重視的是定制化以符合他們習慣的作業(yè)流程、作業(yè)效率高不高，并且跟其他競品做比較。新手則不然，初次使用產(chǎn)品時的他們也是初次進入這個領域，如果能幫助他們更加了解這個領域的大致流程的話會很加分。
△ Photoshop 的豐富資源指引（Rich Tooltips）對于新手來說是一大神助
特別點出幾個重點 features，簡單地告知用戶最重要的功能為何、組件在哪里，用戶在登錄產(chǎn)品之后只要知道這幾個主要動作就可以打遍天下無敵手。
△ Slack 指出 channel 和對話框如何使用
當產(chǎn)品較為復雜，難以指出特定 feature 時，也常以影片或圖片來展現(xiàn)產(chǎn)品價值——也就是畫一張大餅給用戶，讓他們想象未來的生活在用了這個產(chǎn)品后會有多便利，或是讓自我感覺提升。
相對于展示，實際演練更著重用戶要親自執(zhí)行。許多研究都證實從做中學習的成效，就算只是訓練肌肉記憶（muscle memory），也能讓用戶對界面的物理空間更有概念，像是「噢對剛才有做過，我記得按鍵在右上角」。
我們也可以設計一套 demo 版的試用，像是將 scenario 抓一個出來讓用戶試跑，跑過一個假想的故事情節(jié)后印象會更為深刻。
在初次展示后將用戶引導的數(shù)據(jù)回收再利用，變成每當用戶有問題時都隨時可用的資源庫。
1. 導覽 Guided Tour
可能是影片，也可能是滑動式 slideshow，但總之是向用戶介紹產(chǎn)品的主要功能或是傳達產(chǎn)品價值，通常是為了展示的體驗流程所設置。
2. 指引 Tooltip / Coachmark
用極小的空間指向目標物，既可以集中用戶注意力，又不會遮蓋住大部分的使用空間，用戶可以一邊進行正規(guī)作業(yè)，一邊通過指引了解不懂的內(nèi)容。
△ Dropbox Paper 用詼諧的語氣鼓勵你開始打字
有一陣子很多產(chǎn)品會將所有指引放在同一張圖上，但其實使用不當很容易造成信息過載、注意力分散、之后會很難全數(shù)記住的情況，我的建議是一次一個比較好。
3. 秀給我看 Show Me
通常只會出現(xiàn)在教程中，強迫用戶一定要親自去按到按鍵或執(zhí)行關鍵動作，切實練習用戶的肌肉記憶。
1. 空白狀態(tài)的行動呼吁 Empty State CTA
擅用空白狀態(tài)是 onboarding 重要的一環(huán)，畢竟許多產(chǎn)品在用戶動作之前可能都沒有太多料，這時候就要運用行動呼吁。
例如 Tumblr 在指導使用者選擇有興趣的領域之后就指出如何 po 內(nèi)容，因為其用戶生成平臺（UGC，User-generated content）的本質(zhì)就是要鼓勵用戶多交流、多產(chǎn)出，平臺才有價值。
2. 進度列 Progress Bar
提供進度可視化，讓用戶有掌控時間的感覺，而不是不知道自己還要再走幾個步驟而感到不耐煩。
Basecamp 將進度列擺在上端，讓使用者知道已經(jīng)快做完這些設置了
3. 待辦事項 Checklist
人類天生喜歡將事情「全部做完」，欲罷不能：科技如何讓我們上癮？可以協(xié)助我們「引誘」用戶更愿意完成 onboarding 程序。
Bluma Zeigarnik 讓受試者完成某些任務，但在他們完成另一些任務前打斷他們，強迫他們開始進行其他的任務。這些受試者會非常不情愿地停下手上正在做的事，有些人會強烈抗議，有些人甚至會生氣，這顯示出 Zeigarnik 的打斷為他們帶來多么大的壓力。到實驗的最后，受試者清楚記得那些未完成的任務。如果是打斷后一陣子又讓他們完成的話，就沒有這種效應。（摘自 欲罷不能）
4. 跳過 Skip
每次有 onboarding 都會選擇跳過的人舉手！
我喜歡把這稱為不喜歡看桌游規(guī)則的人們，所以在使用中遇到困難時給予提示，對他們來說才是最實用而且最愉悅的，而不是在使用前的紙上談兵。
△ Tumblr 在使用者第一次發(fā)文時才提示如何裝飾文字
設計 onboarding 時并不是只能選擇一種方法，我們可以靈活運用各種元素。將 onboarding 視為一個旅程，而不是單一元素的無限重復。我看過大部分最棒的例子都是綜合使用上述多種元素，以下以新興生產(chǎn)力工具 Coda 為例，來看看集上述大成的 onboarding 作品。
在第一次進入產(chǎn)品使用引導時，可以自行選擇偏好的學習方式——影片或是交互式教學。
Coda 并沒有強制用戶立刻進入 onboarding 模式，而是在呈現(xiàn)主畫面之余，讓我們看到右側(cè)的待辦事項，令人產(chǎn)生「想將之完成」的欲望。
點入后，先有個 setup 內(nèi)容，任務情境是為了項目經(jīng)理所設計，但隨著使用教程的進行，用戶也能夠聯(lián)想到自己生活中的其他任務，例如安排家庭旅游、寫系列文案、追蹤買家信息等。
正式進入學習階段后，進度條就出現(xiàn)了。
單純根據(jù)文字敘述，用戶仍然可能混淆，這時候 Show Me 功能可以減少不必要的誤解。
同上，當用專有名詞（此處的 section ）介紹某個界面元素時，將其他無關緊要的區(qū)域遮蓋住，聚焦在重點區(qū)域，用戶更容易將專有名詞跟界面鏈接在一起。否則單說 section 誰知道是哪一個 section？
結(jié)束時記得給辛苦學習的用戶一些獎勵，并且貼心附上下一步，當然還是要留給使用者最終決定權。
完成一項后，Coda 會幫用戶將完成的項目劃除，于是得到立即的回饋。
完成所有步驟之后，原先是教程列的右側(cè)區(qū)域轉(zhuǎn)變成資源列，每當使用上遇到困難時就可以尋求各種協(xié)助。
Onboarding 并不是只會出現(xiàn)一次，推出多年的產(chǎn)品也仍會時常進行。
onboarding 的程序，例如推出新 feature 或有重新設計（redesign）的時候，目的仍然是讓用戶快速熟悉產(chǎn)品，所以這是身為產(chǎn)品設計師不可忽視的一環(huán)。
另外，除了 UI/UX 設計之外，文案寫作也極其重要——如何跟用戶訴說一個吸引人的故事、描繪出他們想象中的自己，也是成功 onboarding 必要元素。
文章來源：優(yōu)設 作者：