產品新功能上線時，往往會需要在畫面附近加上產品引導，但引導要怎麼加？這篇整理 5 個常見引導位置，包含全站彈窗、新手引導、區塊引導、欄位引導、欄位說明。
此 UI 元件系列，源自於近期職涯都有接觸到「平台」這個產品，
因此想整理一系列的 UI 元件範例，以作為未來工作上的資料庫。一、 產品引導的目的
新規畫的功能陸續上線後，重點要有使用者去使用，因此引導的重點在於：
- 讓使用者知道有新功能上線、位置在哪邊（Where）
- 讓使用者知道功能怎麼操作、操作後會得到什麼（Why-How-What）
使用後還需要追蹤效益，因此可能會需要蒐集「使用者操作後，帶來的具體效益」，以電商的指標為例，像是消費金額增加、或瀏覽時間變長，而反指標（Counter Metric）則會關注客訴率、App 負評數、App 卸載數等，確認功能上線是否會導致負面問題。
二、產品引導常見位置
以位置來區分，可以分成下面 5 種：
1. 全站彈窗：通常用於大功能，以下圖的 Yourator 畫面，近期推出的「AI 履歷翻譯功能」，在求職平台市場就是比較新穎的功能，為了增加使用數，就會在使用者每日進到首頁就跳出此彈窗。
2. 新手引導：通常用於網站介面改版，以 104 人力銀行為例，點擊右側的「功能導覽」按鈕，才會跳出下圖的新手引導路徑，讓使用者可以依循 3 個步驟了解新版區塊位置。
3. 區塊引導：通常用於特定區塊，以下圖 Yourator 為例，履歷列表正上方就常駐一張「AI 履歷小助理」的引導版位，希望讓使用者優先體驗該功能；另外這種區塊說明通常會附超連結到另一個詳細介紹頁，讓有需要的使用者可以詳細閱讀。
4. 欄位引導：通常用於特定欄位或按鈕，以下圖 CakeResume 為例，會在左側欄位的新功能旁邊放一個「全新」或「NEW」的標示，吸引使用者點擊。
5. 欄位說明：通常用於有法條或複雜規範的功能，以下圖 104 身分類別為例，一般使用者可能不一定了解每個身分的意思，但為了不頻繁打擾多數使用者，將提示做成 Tooltip 的方式，讓有需要的使用者自行觸發。
三、其他功能入口位置
上面比較偏向文字較多的說明引導，若是單純功能入口，有些網站會用其他顯示方式，像是：
1. Header 按鈕：有些網站的新功能，會在 Header 多一個按鈕入口，點擊就可以跳轉到對應頁面。
2. 右下角浮動廣告：有些則是在右下角放置一個廣告入口，一樣點擊跳轉到對應頁面。
以上是 UI 元件系列的第四篇，由於我目前正在熟悉 UI 這個領域，因此有滿多 UI 解釋、操作說明都是先參考不同 UI 前輩的文章，再進行轉譯，若有任何用詞不精確的地方，都歡迎讀者給予回饋。
未來也會持續記錄不同場景、不同產品、不同產業的 UI 元件。
