由 Toutour 團隊經深度網路研究彙整：32 個 onboarding pattern、10 個有數據背書的反模式。標籤同時告訴你每個 pattern 屬於哪個包。
🌐 English ⭐ Toutour 免費版（MIT） ⚡ 取得 Toutour Pro
⚠ 互動需要 JavaScript。若你正在聊天預覽面板看到這行字，代表 script 被擋掉了——請下載本檔，用瀏覽器直接開啟，所有示範就會動起來。
能做成活的都做成活的——每張卡的虛線框可以直接玩。標籤代表 Toutour 對每個 pattern 的立場：
Tour 結束記憶就衰退；清單跨 session 持續存在，把「還沒做完的設定」變成看得見的進度。每項可以掛 mini-tour 當載荷。
Next-Next-Next 的被動導覽「完成了但沒學會」。闖關步驟鎖住 Next，直到使用者真的做了那個動作。
一支 tour 服務所有人＝對大多數人是錯的。歡迎卡加 1 題，不同角色走不同導覽，GA4 漏斗也跟著分眾。
做完一步卻一片安靜，使用者不確定「有成功嗎」。確認、定位、慶祝是三件不同的事，最後一件才配動畫。
上線後的新功能沒人發現，但使用者不會再看一次 tour。脈動小點是不打擾的邀請——點了才展開說明。
已內建：常駐光點＋單點指引，全頁上限 2 個。
註冊時看的說明，用到時早忘了。幫助要在需要的當下出現——第一次進到某面板，才提議該面板的 mini-tour，一次為限。
已內建：首訪規則引擎＋停滯觸發，每 session 有提議上限。
新帳號滿是空白畫面，tour 指著一張空表格＝指著虛無。空狀態本身就是導覽面：說明＋第一步 CTA。
已內建：通用版與商店版皆有；內容曾存在即永久退役。
一次全講＝什麼都沒被吸收。這不是 widget，是鋪陳政策：主導覽 ≤5 步，溢出的自動降級成 mini-tour 或清單項。Toutour 的兩層結構本身就是這個 pattern。
把小提示做成擋路 modal，使用者學會的是「看到就關」。優先級決定容器：必看→modal、元素說明→tooltip、公告→slideout。
冷不防跳瀏覽器權限框，被拒絕後幾乎不可逆。先用自己的 UI 說明好處，按了「啟用」才呼叫真 API；「暫時不要」保留下次再問的權利。
先填個人資料、先邀請隊友＝把使用者剛到達時最高的動力浪費在零價值雜務。第 1 步就該做出「第一個成果」，雜務丟給清單。
設定時每逼問一個決定都是摩擦，而多數人照單全收預設值——沒設好的預設值就默默定義了產品體驗。這在客戶的表單裡，不在 overlay 裡。
⚠ #freq 沒有預設值（friction）
⚠ #tz 預設 UTC，建議帶入瀏覽器時區Tour 一換頁就死、不能分享。URL 可定址（客服直接給連結跳到第 3 步）＋中斷後自動續跑。
免費版引擎內建 startAt 與 resume()；Pro 另加跨主／子導覽的名稱路由、歡迎卡抑制、闖關步驟快轉。
app.example.com/?tt_tour=setup&tt_step=3
Tour 完成率是虛榮指標。activation（第一次真價值）與 time-to-value 才預測留存。客戶宣告一個 aha 事件，事件流帶上經過時間。
已內建：事件圖＋GA4 activation 事件，並帶 time-to-value。
大發現：整個設計獎文化幾乎不用 spotlight tour。引導織進頁面本身——這些是「環境式」導覽。
100vh 滿版 hero 底下沒有任何延續暗示，讀起來像「整頁就這樣」——假底效應殺死探索。修法：露出半張卡＋一個會消失的箭頭。vibe-coded 網站的頭號通病。
載入等待反正逃不掉，把它變成第一個品牌敘事拍——名字、一句話定位、進度計數。與 skeleton 不同：skeleton 預告版面，preloader 敘事傳遞訊息。
游標靠近互動區時自己變成指令（drag／hold／view 藥丸）。tooltip 說一次就消失；游標標籤每次靠近都重新教。
用文字描述動作是最糟的教法。遊戲業答案：示範動作本身——按住時環形進度填滿、拖曳把手朝方向晃動。
音訊主導的體驗開始前，先給一個明確選擇：開聲音／不開。瀏覽器本來就擋自動播放——把技術限制變成定向時刻。
每個進場動畫都要兩個逃生口：看得見的略過鍵＋reduced-motion 自動靜態版（前庭障礙、ADHD、省電模式）。這不是功能，是所有產出的合格線。
prefers-reduced-motion 之下——去系統設定切換看看，箭頭與脈動會全部停下。玩家困惑三秒就關遊戲，而且沒有業務會打電話挽回——所以遊戲業把「不用教學的教學」磨了四十年。
經典平台遊戲第一關：平地、一個慢慢靠近的威脅、跳是唯一需要的動作——版面本身讓正確的行為變成自然的行為。網頁版翻譯：首屏只放一個主要動作。
比闖關步驟更進一步：完成判定改用真實 app 事件。「新增第一個商品」在 product_created 事件出現時完成——昨天做的、在另一個分頁做的、比 tour 更早做的，都算。順序無關，tour 也不再因使用者脫稿而壞掉。
遊戲用光線和色彩把視線拉向正確的路——不用箭頭。網頁版：不開 modal、不出 tooltip，只讓那一個目標脈動、其餘輕微降飽和。多數引導時刻只需要指一個東西。
觸發條件不是「頁面載入」，是猶豫。相關畫面開著、該做的步驟沒做、滑鼠鍵盤停了 N 秒——才出一條提示。精準時機的幫助像聰明，開頁就跳的幫助像廣告。
商店的 aha moment 是「匿名訪客完成購買」，SaaS 式導覽在這裡水土不服——這些 pattern 把導覽藏進購物流程本身。
3–7 題的分支問卷，答案直接映射到過濾後的商品集。對商店而言這就是 tour——邊回答邊學會目錄的決策維度。分眾問卷的商業化版本。
服飾第一摩擦是尺寸不確定→退貨。PDP 上兩三個輸入，查表輸出一個建議尺寸。不用 ML，尺寸表就夠。
「什麼房間？預算多少？」問句化的 faceted filter——跟 E1 共用 80% 骨架，但無狀態：輸出過濾 URL，不存 profile。
最好的 onboarding 是拆掉一道牆。帳號建立延後到訂單完成頁——對已付錢的人只多要一個密碼欄位。Baymard：強制先註冊是自找的棄車主因（各波調查約 24–35%）。
autocomplete 建議範圍（「跑鞋——在男鞋／在女鞋」），使用者邊打字邊學會目錄分類。tour 只能指一次搜尋框；autocomplete 每次查詢都在教。
搜不到東西的頁面是最常見的死巷。救援版：查詢字保留可改、給熱賣與鄰近分類、順手記錄這個查詢給店主。
首購折扣彈窗有效（廠商基準 ~2.4% vs ~1.7%），但變數決定它是導覽還是襲擊：延遲 6–10 秒或 exit-intent、一次性真實代碼、頻率上限、拒絕鍵不羞辱人。
中國電商把獲客、啟用、轉介熔成一個環（新人價、現金紅包、拉人解鎖），是地表最激進的 onboarding。唯一可移植的乾淨概念：新客專屬且講明白的具體好處——其餘需要後端經濟學＋防詐，且快速滑向操縱。
免費版在分析階段就會對這十種形態提出警告（含以下數字）；Pro 進一步拒絕生成有害形態，並直接給出有護欄的替代元件（誠實優惠、零結果救援等）。多數工具在生成更多 overlay——會拒絕生成有害物的工具很少。
獨立同儕審查（peer-reviewed）
· Andersen, E., O'Rourke, E., Liu, Y.-E., et al. (2012). The Impact of Tutorials on Games of Varying Complexity. CHI 2012. doi:10.1145/2207676.2207687 — 45,000+ 玩家、8 種教學設計的 A/B 實驗：教學僅對最複雜的產品有效（遊玩時間最多 +29%），簡單介面無顯著效果。獨立業界研究（independent-industry）
· Kendrick, A. (2020). Mobile Tutorials: Wasted Effort or Efficiency Boost? Nielsen Norman Group. nngroup.com/articles/mobile-tutorials — n=70 組間實驗、4 個 iPhone app：看完卡片教學組 SEQ 4.92 vs 跳過組 5.49（p=0.047）；成功率與時間無顯著差異。第一方／廠商自報（vendor-reported——看方向，勿當精確值）
· Morell, D. (2015). Google+: A case study on App Download Interstitials. Google Webmaster Central Blog. developers.google.com/search/blog — 插頁僅 9% 點擊安裝、69% 直接離開；改用小橫幅後行動網站日活 +17%、安裝僅 −2%。屬「不利自家原做法」的自我揭露，偏誤相對低。分級說明：peer-reviewed 為最高信任；independent-industry 無販售導覽工具的利益衝突；vendor-reported 樣本來自廠商客戶群，有選擇偏誤，引用時已標註。Pattern 名稱屬業界通用語彙；本頁所有敘述為原創整理。
© Toutour · telaaurealab.com — 免費版 MIT 開源（引擎＋scroll 提示＋反模式警告）；Toutour Pro 含所有標「Pro」卡片的成品程式碼與 Playwright 驗證。