【UI 常見元件整理】產品功能引導
閱讀時間約 3 分鐘
產品新功能上線時，往往會需要在畫面附近加上引導，但引導要怎麼加？這篇整理 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 元件，有興趣的朋友可以觀看：
為什麼會看到廣告
89會員
156內容數
《思維的創意想像》是工作之餘發起的 Side Project，因為近期快速吸收各種資訊跟商業知識（Input），但一直沒有地方輸出（Output），因此想透過這系列記錄學到的內容，包含商業知識、產業洞見，或是職場分享等等，目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
市場上有許多 UI 的設計職缺，在設計這一個行業裡面，學歷或是工作履歷能幫你增加打開履歷的機會，但真的進入面試的關鍵就在作品集。要怎麼準備作品集？要怎麼去應徵這些職缺？要怎麼樣才能提高進入面試的機率？有時候作品集佔了至關重要的地位，今天這一章將介紹如何準備 UI 專用的設計作品集，並提供一些建議，
最近收到了一封學生的信，詢問在職場中UI Designer是什麼？想在公司建立一套基本的流程，這張圖片應該許多人都看過，裡頭有很多專業的名詞，以及像金字一樣往上堆疊的順序，在討論工作流程前，我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。
Us
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中，最常被問的問題了。
其實我並不鼓勵大家購買大量課程、書籍來淹沒自己，因為資訊量很大，而且每位老師的經歷、教法有不同，有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。
而此時的你並不知道，到底應該投資哪一種類型項目，最能「
從2020年七月開始，陸陸續續有身邊的朋友，開始詢問我的職業跟技能樹是什麼？當時我並沒有想太多，就分享了一些我自己執行的專案以及接案內容，不過在聊聊的過程中，發現有許多思維跟細節，是和一般設計師有所不同，而這正是大家所疑惑的點。
一個UI設計師所應謹記的極簡心法
這次介紹的書比較特別，與往日的書籍介紹比起來，這本書並不是專門針對UI設計所撰寫的書籍，但是書裡所介紹的「極簡」設計觀念，我覺得是非常適合當作UI設計師在從事UI設計時，因為能有效提升使用體驗，而必須銘記在心的基本心法(?)
《人本×互動設計》有溫度的思考，讓設計滿足使用需求
發布第一篇《【UI閱讀筆記】UI設計大進擊！》文章時，因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了！並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書！)，就這樣，這篇文章就誕生啦🎉。
多元裝置時代的網站UI/UX設計法則
這是一本「從零開始」教你怎麼從網頁設計認識UI設計的書籍，第一章開始便從UI設計的構造關係開始談起，之後每個小節逐一介紹網頁每一個區塊的功能與可能被使用者所操作的形式。
自學UI設計這條路上，「實體書」一直在自學中擔任至關重要的腳色。儘管書中的資訊更新遠遠不及網路上的更新速度，但比起較為片段的網路文章，統整好各式訊息與知識架構的書籍，總是能讓初出茅廬的初學者能稍微有點頭緒。
有鑒於 UIUX 詢問度近幾年日趨高漲，研究使用者心理變得越來越夯，讓很多視覺出道的工作者也想了解並參與其中，但做 UI 設計到底該注意什麼呢？到底要怎麼做才不會被工程師罵到臭頭呢？
這是設計師與工程師
今天，設計師畫了一個上傳照片的功能：
設計師如果只提供這張圖會代表什麼呢？
就會變成這樣，
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
市場上有許多 UI 的設計職缺，在設計這一個行業裡面，學歷或是工作履歷能幫你增加打開履歷的機會，但真的進入面試的關鍵就在作品集。要怎麼準備作品集？要怎麼去應徵這些職缺？要怎麼樣才能提高進入面試的機率？有時候作品集佔了至關重要的地位，今天這一章將介紹如何準備 UI 專用的設計作品集，並提供一些建議，
最近收到了一封學生的信，詢問在職場中UI Designer是什麼？想在公司建立一套基本的流程，這張圖片應該許多人都看過，裡頭有很多專業的名詞，以及像金字一樣往上堆疊的順序，在討論工作流程前，我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。
Us
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中，最常被問的問題了。
其實我並不鼓勵大家購買大量課程、書籍來淹沒自己，因為資訊量很大，而且每位老師的經歷、教法有不同，有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。
而此時的你並不知道，到底應該投資哪一種類型項目，最能「
從2020年七月開始，陸陸續續有身邊的朋友，開始詢問我的職業跟技能樹是什麼？當時我並沒有想太多，就分享了一些我自己執行的專案以及接案內容，不過在聊聊的過程中，發現有許多思維跟細節，是和一般設計師有所不同，而這正是大家所疑惑的點。
一個UI設計師所應謹記的極簡心法
這次介紹的書比較特別，與往日的書籍介紹比起來，這本書並不是專門針對UI設計所撰寫的書籍，但是書裡所介紹的「極簡」設計觀念，我覺得是非常適合當作UI設計師在從事UI設計時，因為能有效提升使用體驗，而必須銘記在心的基本心法(?)
《人本×互動設計》有溫度的思考，讓設計滿足使用需求
發布第一篇《【UI閱讀筆記】UI設計大進擊！》文章時，因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了！並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書！)，就這樣，這篇文章就誕生啦🎉。
多元裝置時代的網站UI/UX設計法則
這是一本「從零開始」教你怎麼從網頁設計認識UI設計的書籍，第一章開始便從UI設計的構造關係開始談起，之後每個小節逐一介紹網頁每一個區塊的功能與可能被使用者所操作的形式。
自學UI設計這條路上，「實體書」一直在自學中擔任至關重要的腳色。儘管書中的資訊更新遠遠不及網路上的更新速度，但比起較為片段的網路文章，統整好各式訊息與知識架構的書籍，總是能讓初出茅廬的初學者能稍微有點頭緒。
有鑒於 UIUX 詢問度近幾年日趨高漲，研究使用者心理變得越來越夯，讓很多視覺出道的工作者也想了解並參與其中，但做 UI 設計到底該注意什麼呢？到底要怎麼做才不會被工程師罵到臭頭呢？
這是設計師與工程師
今天，設計師畫了一個上傳照片的功能：
設計師如果只提供這張圖會代表什麼呢？
就會變成這樣，