【UI 常見元件整理】產品功能引導
產品新功能上線時，往往會需要在畫面附近加上引導，但引導要怎麼加？這篇整理 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 元件，有興趣的朋友可以觀看：
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
90會員
161內容數
《思維的創意想像》是工作之餘發起的 Side Project，因為近期快速吸收各種資訊跟商業知識（Input），但一直沒有地方輸出（Output），因此想透過這系列記錄學到的內容，包含商業知識、產業洞見，或是職場分享等等，目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
你可能也想看
Google News 追蹤
對 SaaS 公司來說，用戶引導(onboarding) 是很重要的一個環節，是使用者第一次使用產品/服務時認識熟悉的過程，是建構良好顧客關係的基礎，也是創造長期互動，提升客戶留存率(customer retention rates)非常重要的一環。
1.設計系統不用從頭開始
在設計產品時，有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師，負責各種產品或視覺設計工作時才逐漸領悟到的一點。
當時，我在購買UI Kits這件事情上猶豫不決，擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
本文提供完成訂閱後的相關事項及安裝指引，包括填寫問卷、遠端開通Trading View帳號、指標安裝步驟等。另外也提供影片教學和紙本教學，以及解決安裝問題的方法。
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
在創建客戶旅程地圖的過程中，必須先定義目標受眾的輪廓，再創建包含行銷漏斗5個階段的客戶旅程地圖。每個階段都需釐清客戶的行為、想法和感受，並且企業應該對客戶可能遇到的痛點和機會點有所準備。最後，企業在實際執行自訂的行動方案後，可再依照自身需求選擇衡量各階段成效的指標。
在當今這個以用戶為中心的網頁設計及App設計時代，分析用戶流程已成為提升產品用戶體驗的不可或缺的工具。一個流暢、直觀的用戶流程可以顯著提高用戶滿意度並提升任務完成率。以下是一個簡單的四步驟框架，幫助設計師和產品經理分析並改進用戶流程。
界面導航在用戶體驗(UX)設計中扮演著至關重要的角色。一個直觀且高效的導航系統可以幫助用戶無縫地在應用程式或網站中找到所需資訊，同時提升整體的使用滿意度。以下我們將深入探讎不同類型的UI導航方式及其各自的特點和最佳應用情境。
對 SaaS 公司來說，用戶引導(onboarding) 是很重要的一個環節，是使用者第一次使用產品/服務時認識熟悉的過程，是建構良好顧客關係的基礎，也是創造長期互動，提升客戶留存率(customer retention rates)非常重要的一環。
1.設計系統不用從頭開始
在設計產品時，有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師，負責各種產品或視覺設計工作時才逐漸領悟到的一點。
當時，我在購買UI Kits這件事情上猶豫不決，擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
本文提供完成訂閱後的相關事項及安裝指引，包括填寫問卷、遠端開通Trading View帳號、指標安裝步驟等。另外也提供影片教學和紙本教學，以及解決安裝問題的方法。
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
在創建客戶旅程地圖的過程中，必須先定義目標受眾的輪廓，再創建包含行銷漏斗5個階段的客戶旅程地圖。每個階段都需釐清客戶的行為、想法和感受，並且企業應該對客戶可能遇到的痛點和機會點有所準備。最後，企業在實際執行自訂的行動方案後，可再依照自身需求選擇衡量各階段成效的指標。
在當今這個以用戶為中心的網頁設計及App設計時代，分析用戶流程已成為提升產品用戶體驗的不可或缺的工具。一個流暢、直觀的用戶流程可以顯著提高用戶滿意度並提升任務完成率。以下是一個簡單的四步驟框架，幫助設計師和產品經理分析並改進用戶流程。
界面導航在用戶體驗(UX)設計中扮演著至關重要的角色。一個直觀且高效的導航系統可以幫助用戶無縫地在應用程式或網站中找到所需資訊，同時提升整體的使用滿意度。以下我們將深入探讎不同類型的UI導航方式及其各自的特點和最佳應用情境。