【UI 常見元件整理】Feedback 回饋

更新於 發佈於 閱讀時間約 5 分鐘

「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。

raw-image

模態和非模態,差異在於「是否會暫停使用者操作」。 模態:視窗彈出後,使用者需要點擊完才能進行下一步;非模態,使用者不須點擊或動作,也可以進行其他步驟。

下方會針對 6 個常見 Feedback 元件進行整理與分享。

一、警示 Alert

「警示 Alert」是 UI Feedback 最常見的元件之一,除了彈出視窗的警示之外,直接在輸入框的外圍顯示紅框,也是一種方式,如下圖。

以 104、1111 的登入頁,輸入完要點擊「登入」按鈕,才會跳出警示,但 Yourator、518 的頁面,則是會在你輸入的當下,直接顯示該帳號是否正確。

以我自己的使用體驗,會比較偏好 Yourator 這種「立即性的回饋」,輸入後就能得到即時的系統回饋。因為多按一下就會造成使用者停頓,雖然有些使用者習慣這種操作(點擊按鈕才知道資料有沒有正確),但如何讓各個輸入框都能更迅速、更即時的出現提醒,會讓使用流程更順暢。
raw-image

二、工具提示 Tooltip

「工具提示 Tooltip」是當滑鼠移到圖示上方,會自動彈出的提示文字。

目前比較多看到的位置是「使用者後台」,用途像是:按鈕提示、功能提示、數字的來源說明等,這些說明文字若都要完整打在介面上,會導致頁面文字繁多,或是導致介面密密麻麻不好閱讀。

有些 Tip 需要滑鼠點擊才會跳出,但對使用者來說需要多一個點擊的動作,因此我偏好設計成 Hover(滑鼠移到 Icon 上方)就跳出提示,是目前操作上最順利的設計方式。但要讓使用者知道那個 icon 有額外資訊的話,針對 icon 本身也要另外設計,目前比較主流通常是用 ⓘ 的圓圈方式設計。
raw-image

三、通知 Notification、吐司 Toast

「通知 Notification」、「吐司 Toast」會放在一起是因為兩者比較接近,都是使用者執行了一個動作,而跳出的視窗。會有「吐司」這個名稱是因為該視窗跳出的方式很像吐司從吐司機跳出的樣子,但近期看到滿多文章都是用「通知」來介紹這個樣式。

常用的地方像是:登入/登出、儲存成功/取消儲存等。

目前通知的位置就差異較大,有在左上角、螢幕正上方、螢幕正中間、按鈕旁邊,多數的通知視窗都比較小,都是一行文字+一個 icon 的組合。但也有通知視窗較大,因為視窗內的文字較多,通常這類型的通知都會在角落(左上、左下、右上、右下等)。
raw-image

四、流程 Progress

「流程 Progress」又可以稱為「進度條」,樣式則有圓形 Circle、線型 Line、文字 Text、箱型 Box 等。

至於哪個網站要選擇哪一種,目前看起來仍跟整體視覺規範有關,像是網站在哪些地方需要呈現、以及用哪一種款式比較不會干擾到使用者。

目前看到多數網站都是轉圈圈的 Circle Progress 為主,少數則是用 Line Progress。
raw-image

五、互動元件 Modal

「互動元件 Modal」若非重要設定,通常會很少使用,因為 Modal 會使得主視窗看得到,但無法使用,對於使用者的操作是單向的。

根據 Google 的定義,使用 Modal 畫面的目的是:「讓使用者進行特定工作、決定或知曉的重要資訊」。

目前除了 104、1111 的篩選器較為複雜會用到 Modal 之外,Yourator、CakeResume 都是用「彈出視窗 Popcomfirm」的下拉式選單。以我自己的使用習慣,找職缺時,最常用到的是地點、職務、性質、薪資這四種,因此是否需要 Modal 這種視窗,確實有討論的空間。
raw-image
raw-image

六、對話 Dialog

「對話 Dialog」跟 Modal 有一點接近,都是一個彈出視窗,需要使用者點選後才能進行下一步。

通常用在需要使用者同意的事,像是變更資料、刪除提示、取得攝影機權限、訂閱電子報與否等。

Dialog 以各大求職平台來看都是大同小異,主要還是設計風格的不同,但功能幾乎是一樣的,這部分優化幅度不大。
raw-image

以上是 UI 元件系列的第二篇,由於我目前正在熟悉 UI 這個領域,因此有滿多 UI 解釋、操作說明都是先參考不同 UI 前輩的文章,再進行轉譯,若有任何用詞不精確的地方,都歡迎讀者給予回饋。

未來也會持續記錄不同場景、不同產品、不同產業的 UI 元件,有興趣的朋友可以觀看:

  1. 【UI 常見元件整理】Navigation 導覽
  2. 【UI 常見元件整理】Input 輸入


留言
avatar-img
留言分享你的想法!
avatar-img
張家惟 Evan Chang的沙龍
112會員
190內容數
《思維的創意想像》是工作之餘發起的 Side Project,因為近期快速吸收各種資訊跟商業知識(Input),但一直沒有地方輸出(Output),因此想透過這系列記錄學到的內容,包含商業知識、產業洞見,或是職場分享等等,目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
2025/04/20
從 ChatGPT、Claude、Gemini 各種模型的出現,「AI 是否會取代 PM / UX / RD」一直是軟體業在討論的話題,AI 已能撰寫 PRD 產品需求文件、分析用戶、設計原型 Prototype,甚至提供產品決策建議,甚至對於一些產品主管來說,只會執行的初級產品經理職缺可能會越來越
Thumbnail
2025/04/20
從 ChatGPT、Claude、Gemini 各種模型的出現,「AI 是否會取代 PM / UX / RD」一直是軟體業在討論的話題,AI 已能撰寫 PRD 產品需求文件、分析用戶、設計原型 Prototype,甚至提供產品決策建議,甚至對於一些產品主管來說,只會執行的初級產品經理職缺可能會越來越
Thumbnail
2025/04/17
在電商產業擔任產品經理,最常被問的就是「AI 可以在電商平台做哪些事」,像是個人化商品推薦、文案生成、加速上架、AI 客服等,市面上已陸續有 AI 功能逐漸釋出,但 AI 協助購物這段流程要怎麼進行,這篇想記錄初步想法。
Thumbnail
2025/04/17
在電商產業擔任產品經理,最常被問的就是「AI 可以在電商平台做哪些事」,像是個人化商品推薦、文案生成、加速上架、AI 客服等,市面上已陸續有 AI 功能逐漸釋出,但 AI 協助購物這段流程要怎麼進行,這篇想記錄初步想法。
Thumbnail
2025/04/12
Retrospective 是敏捷流程中的回顧環節,對產品經理來說是一個可以回顧過往、反思的時刻,這篇會記錄 Retro 的重點,以及產品經理可以如何運用 Retro,讓產品團隊提升開發效率。
Thumbnail
2025/04/12
Retrospective 是敏捷流程中的回顧環節,對產品經理來說是一個可以回顧過往、反思的時刻,這篇會記錄 Retro 的重點,以及產品經理可以如何運用 Retro,讓產品團隊提升開發效率。
Thumbnail
看更多
你可能也想看
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
Thumbnail
今天想分享一下我最近的UI設計練習,這次的練習主題是原型動態效果,雖然自己目前對動效很熟練了,但有一些效果實際上很少被使用,所以借此機會來試試看,也能維持自己的熟練度。
Thumbnail
今天想分享一下我最近的UI設計練習,這次的練習主題是原型動態效果,雖然自己目前對動效很熟練了,但有一些效果實際上很少被使用,所以借此機會來試試看,也能維持自己的熟練度。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
在這裡跟大家推薦方便的插件功能,會附上來源跟作者,並且在此篇說明該插件的介紹跟如何使用。
Thumbnail
在這裡跟大家推薦方便的插件功能,會附上來源跟作者,並且在此篇說明該插件的介紹跟如何使用。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News