【UI 常見元件整理】Feedback 回饋
閱讀時間約 4 分鐘
「Feedback 回饋」是最直接面向使用者的一種元件分類，最常被拿來討論「這個功能友不友善」，這篇會整理常見的回饋元件，包含：模態（警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress）、非模態（互動元件 Modal、對話 Dialog）。
模態和非模態，差異在於「是否會暫停使用者操作」。 模態：視窗彈出後，使用者需要點擊完才能進行下一步；非模態，使用者不須點擊或動作，也可以進行其他步驟。
下方會針對 6 個常見 Feedback 元件進行整理與分享。
一、警示 Alert
「警示 Alert」是 UI Feedback 最常見的元件之一，除了彈出視窗的警示之外，直接在輸入框的外圍顯示紅框，也是一種方式，如下圖。
以 104、1111 的登入頁，輸入完要點擊「登入」按鈕，才會跳出警示，但 Yourator、518 的頁面，則是會在你輸入的當下，直接顯示該帳號是否正確。
以我自己的使用體驗，會比較偏好 Yourator 這種「立即性的回饋」，輸入後就能得到即時的系統回饋。因為多按一下就會造成使用者停頓，雖然有些使用者習慣這種操作（點擊按鈕才知道資料有沒有正確），但如何讓各個輸入框都能更迅速、更即時的出現提醒，會讓使用流程更順暢。
二、工具提示 Tooltip
「工具提示 Tooltip」是當滑鼠移到圖示上方，會自動彈出的提示文字。
目前比較多看到的位置是「使用者後台」，用途像是：按鈕提示、功能提示、數字的來源說明等，這些說明文字若都要完整打在介面上，會導致頁面文字繁多，或是導致介面密密麻麻不好閱讀。
有些 Tip 需要滑鼠點擊才會跳出，但對使用者來說需要多一個點擊的動作，因此我偏好設計成 Hover（滑鼠移到 Icon 上方）就跳出提示，是目前操作上最順利的設計方式。但要讓使用者知道那個 icon 有額外資訊的話，針對 icon 本身也要另外設計，目前比較主流通常是用 ⓘ 的圓圈方式設計。
三、通知 Notification、吐司 Toast
「通知 Notification」、「吐司 Toast」會放在一起是因為兩者比較接近，都是使用者執行了一個動作，而跳出的視窗。會有「吐司」這個名稱是因為該視窗跳出的方式很像吐司從吐司機跳出的樣子，但近期看到滿多文章都是用「通知」來介紹這個樣式。
常用的地方像是：登入／登出、儲存成功／取消儲存等。
目前通知的位置就差異較大，有在左上角、螢幕正上方、螢幕正中間、按鈕旁邊，多數的通知視窗都比較小，都是一行文字＋一個 icon 的組合。但也有通知視窗較大，因為視窗內的文字較多，通常這類型的通知都會在角落（左上、左下、右上、右下等）。
四、流程 Progress
「流程 Progress」又可以稱為「進度條」，樣式則有圓形 Circle、線型 Line、文字 Text、箱型 Box 等。
至於哪個網站要選擇哪一種，目前看起來仍跟整體視覺規範有關，像是網站在哪些地方需要呈現、以及用哪一種款式比較不會干擾到使用者。
目前看到多數網站都是轉圈圈的 Circle Progress 為主，少數則是用 Line Progress。
五、互動元件 Modal
「互動元件 Modal」若非重要設定，通常會很少使用，因為 Modal 會使得主視窗看得到，但無法使用，對於使用者的操作是單向的。
根據 Google 的定義，使用 Modal 畫面的目的是：「讓使用者進行特定工作、決定或知曉的重要資訊」。
目前除了 104、1111 的篩選器較為複雜會用到 Modal 之外，Yourator、CakeResume 都是用「彈出視窗 Popcomfirm」的下拉式選單。以我自己的使用習慣，找職缺時，最常用到的是地點、職務、性質、薪資這四種，因此是否需要 Modal 這種視窗，確實有討論的空間。
六、對話 Dialog
「對話 Dialog」跟 Modal 有一點接近，都是一個彈出視窗，需要使用者點選後才能進行下一步。
通常用在需要使用者同意的事，像是變更資料、刪除提示、取得攝影機權限、訂閱電子報與否等。
Dialog 以各大求職平台來看都是大同小異，主要還是設計風格的不同，但功能幾乎是一樣的，這部分優化幅度不大。
以上是 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😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
Windows Clarity 是一種網站分析產品，讓網站設計師、開發人員可藉由它，更容易觀察用戶在網站的操作行為，協助更快速的優化網站，加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用，強化分析能力與優化網站效益。
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎，只是當時沒有像現在這樣重視使用者對產品的使用體驗感受，不過我們還是可以透過回顧歷史，看看UI/UX是怎樣往前發展至現在的模樣，甚至近期有一些新技術已經在某些族群中默默地發展著！
加入商業思維學院3個月，就能把學到的東西運用在工作中。而6個月後參加產品經理學習營，還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎，因此想和大家分享！
推薦給這些朋友：
持續在設計領域努力，最近卻有點茫然
對產品有熱情，卻找不到機會實
過去買線上課的糟糕經驗，導致現在購課都很猶豫
市面上有許多 UI 設計的職缺，但要如何應徵上一份工作則是需要經驗與學問，最關鍵的部分就是面試，面試是一場現場與未來可能工作夥伴的交流，很多工作的面試流程僅有一場，可以說是一次定勝負，如何讓你的面試比其他設計師更有競爭力，就是這一篇要探討的主題，這次將以這些章節帶入面試應該要注意的項目
市場上有許多 UI 的設計職缺，在設計這一個行業裡面，學歷或是工作履歷能幫你增加打開履歷的機會，但真的進入面試的關鍵就在作品集。要怎麼準備作品集？要怎麼去應徵這些職缺？要怎麼樣才能提高進入面試的機率？有時候作品集佔了至關重要的地位，今天這一章將介紹如何準備 UI 專用的設計作品集，並提供一些建議，
最近收到了一封學生的信，詢問在職場中UI Designer是什麼？想在公司建立一套基本的流程，這張圖片應該許多人都看過，裡頭有很多專業的名詞，以及像金字一樣往上堆疊的順序，在討論工作流程前，我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。
Us
我們部門有一個美工團隊，以前稱為媒體設計（MD）
後來改名為UI團隊
某日，來了一位UI專家（空降的主管）。他說
他專研UI與使用者心理學…..八拉八拉
軟體的操作畫面並不是這麼簡單，必須經過研究、觀察使用者，不斷修正才行…八拉八拉
根據我的觀察，他的團隊仍是美工團隊
所以先用部門同仁測試
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
Windows Clarity 是一種網站分析產品，讓網站設計師、開發人員可藉由它，更容易觀察用戶在網站的操作行為，協助更快速的優化網站，加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用，強化分析能力與優化網站效益。
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎，只是當時沒有像現在這樣重視使用者對產品的使用體驗感受，不過我們還是可以透過回顧歷史，看看UI/UX是怎樣往前發展至現在的模樣，甚至近期有一些新技術已經在某些族群中默默地發展著！
加入商業思維學院3個月，就能把學到的東西運用在工作中。而6個月後參加產品經理學習營，還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎，因此想和大家分享！
推薦給這些朋友：
持續在設計領域努力，最近卻有點茫然
對產品有熱情，卻找不到機會實
過去買線上課的糟糕經驗，導致現在購課都很猶豫
市面上有許多 UI 設計的職缺，但要如何應徵上一份工作則是需要經驗與學問，最關鍵的部分就是面試，面試是一場現場與未來可能工作夥伴的交流，很多工作的面試流程僅有一場，可以說是一次定勝負，如何讓你的面試比其他設計師更有競爭力，就是這一篇要探討的主題，這次將以這些章節帶入面試應該要注意的項目
市場上有許多 UI 的設計職缺，在設計這一個行業裡面，學歷或是工作履歷能幫你增加打開履歷的機會，但真的進入面試的關鍵就在作品集。要怎麼準備作品集？要怎麼去應徵這些職缺？要怎麼樣才能提高進入面試的機率？有時候作品集佔了至關重要的地位，今天這一章將介紹如何準備 UI 專用的設計作品集，並提供一些建議，
最近收到了一封學生的信，詢問在職場中UI Designer是什麼？想在公司建立一套基本的流程，這張圖片應該許多人都看過，裡頭有很多專業的名詞，以及像金字一樣往上堆疊的順序，在討論工作流程前，我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。
Us
我們部門有一個美工團隊，以前稱為媒體設計（MD）
後來改名為UI團隊
某日，來了一位UI專家（空降的主管）。他說
他專研UI與使用者心理學…..八拉八拉
軟體的操作畫面並不是這麼簡單，必須經過研究、觀察使用者，不斷修正才行…八拉八拉
根據我的觀察，他的團隊仍是美工團隊
所以先用部門同仁測試