2023-07-08|閱讀時間 ‧ 約 4 分鐘

【UI 常見元件整理】產品功能引導

產品新功能上線時，往往會需要在畫面附近加上引導，但引導要怎麼加？這篇整理 5 個常見引導位置，包含全站彈窗、新手引導、區塊引導、欄位引導、欄位說明。

此 UI 元件系列，源自於近期職涯都有接觸到「平台」這個產品，

因此想整理一系列的 UI 元件範例，以作為未來工作上的資料庫。

一、產品引導的目的

新規畫的功能陸續上線後，重點要有使用者去使用，因此引導的重點在於：

使用後還需要追蹤效益，因此可能會需要蒐集「使用者操作後，帶來的具體效益」，以電商的指標為例，像是消費金額增加、或瀏覽時間變長，而反指標（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 元件，有興趣的朋友可以觀看：

分享至

成為作者繼續創作的動力吧！

從 Google News 追蹤更多 vocus 的最新精選內容

成為會員後即可發表留言