上篇聊到 onboarding 相關的理論與心法，這篇來分享常見的 onboarding 界面組件。

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

往期回顧：

閱讀文章 >>

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

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

我在每個階段都舉了幾個常見的例子，搭配市面上產品的應用方法。

體驗流程

1. 分流 Branching

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

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

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

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

邀請人 vs. 受邀人

如果邀請人已經設定好群組，受邀人應該自動被加入，某些信息也該自動填入，而非讓用戶再填一次，從而導致出錯。

新手 vs. 老手

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

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

2. 展示 Showcase

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

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

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

3. 實際演練 Do to Learn

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

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

4. 演化成資源庫 Resource

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

載具形式

1. 導覽 Guided Tour

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

2. 指引 Tooltip / Coachmark

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

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

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

3. 秀給我看 Show Me

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

界面元素

1. 空白狀態的行動呼籲 Empty State CTA

擅用空白狀態是 onboarding 重要的一環，畢竟許多產品在用戶動作之前可能都沒有太多料，這時候就要運用行動呼籲。

閱讀文章 >>

例如 Tumblr 在指導使用者選擇有興趣的領域之後就指出如何 po 內容，因為其用戶生成平台（UGC，User-generated content）的本質就是要鼓勵用戶多交流、多產出，平台才有價值。

2. 進度列 Progress Bar

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

Basecamp 將進度列擺在上端，讓使用者知道已經快做完這些設置了

3. 待辦事項 Checklist

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

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

4. 跳過 Skip

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

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

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

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

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

Coda 並沒有強制用戶立刻進入 onboarding 模式，而是在呈現主畫面之餘，讓我們看到右側的待辦事項，令人產生「想將之完成」的慾望。

點入后，先有個 setup 內容，任務情境是為了項目經理所設計，但隨着使用教程的進行，用戶也能夠聯想到自己生活中的其他任務，例如安排家庭旅遊、寫系列文案、追蹤買家信息等。

正式進入學習階段后，進度條就出現了。

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

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

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

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

完成所有步驟之後，原先是教程列的右側區域轉變成資源列，每當使用上遇到困難時就可以尋求各種協助。

題外話與小結

Onboarding 並不是只會出現一次，推出多年的產品也仍會時常進行。

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

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

閱讀文章 >>

以上分享幾個我認為值得列入 onboarding 流程的元素，希望讓大家對於 onboarding 這個容易被忽略、但其實對於產品利潤有大功勞的環節更加熟悉。

參考數據

• APP UI結構：用戶引導&提示（乾貨大全！）
• User Onboarding Teardowns（各個 onboarding 旅程加上作者個人風趣的批註）
• First Time User Experiences（各個 onboarding 旅程加上作者彙整的結論）

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5平台_用戶初次打開軟件，如何給TA 留下好印象？（組件篇）