【UI 常見元件整理】Input 輸入

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

Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。

raw-image
誰適合看這篇文章?
✔ 對於產品經理、產品企劃、產品開發、PM 有興趣
✔ 對於 UI 元件、UIUX、介面元件、輸入元件有興趣

一、文字輸入 Text

文字輸入框應該是最多人知道的 UI,此區想額外紀錄的是不同狀態。

raw-image

有些輸入框輸入文字後,會跳出該欄位的推薦字詞(aka 預測查詢字串),例如 104 人力銀行,輸入「產品」後會顯示的推薦詞:

raw-image

有些則是會影響其他欄位的選項,例如 518 人力銀行,輸入「產品經理」後,在職務類別會跳出類別標籤(Label)

raw-image

二、按鈕 Button

UI 元件在分辨單選和複選按鈕通常會用 Radio Buttons(單選)、Checkbox(複選)這兩個詞,如下示意:

raw-image

另外也有看到滿多網站是直接將文字和按鈕合併,也就是沒有 radio、checkbox 的那個小圖示,直接以標籤(Label)的方式呈現,優點是節省空間、點擊範圍更大,缺點則是第一眼較難判別是要讓使用者單選還是複選。

raw-image

三、互動元件 Modal

Modal 是蓋板選單,當打開時就只能先完成此行為,選單外通常會用黑底色塊處理,讓使用者無法同時進行選單外的操作,若要的話只能關閉選單。

雖然在《Feedback 回饋篇》也有介紹到,但在 Input 我發現也有一些欄位滿常用到的,像是「職務類別選單、科系選單、學校選單、國家選單、地區選單、產業選單」等,如下示意。

raw-image

四、下拉式選單 Dropdown List

下拉式選單也是很常見的資料輸入方式,比較常看到用在「時間、生日、薪資格式、學歷、條件」等,如下示意。

raw-image

五、滑桿 Slider

滑桿原本在電腦內的「音量、螢幕亮度」裝置調整,或是照片編輯的「飽和度、明亮度」才會看到的 UI,但在「能力等級」偶爾還是會看到,雖然目前比較多都已經改成下拉式選單了。

raw-image

六、選擇器 Picker

Picker 幾乎都是用在「生日、日期」,以 UI 元件名稱的話,最常聽到都是「Date picker」。

raw-image

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

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

  1. 【UI 常見元件整理】Navigation 導覽
  2. 【UI 常見元件整理】Feedback 回饋
留言
avatar-img
留言分享你的想法!
avatar-img
2024/07/10
感謝你熱心地分享經驗,請教一下若輸入資訊是需要多選的話,甚麼…
張家惟 Evan Chang-avatar-img
發文者
2024/07/23
我目前想到的:1. 輸入資訊較多的話:有些介面會是 5 個選項以內用 checkbox,超過 5 個選項就變成下拉選單2. 查看資料範圍: (1) 偏向個資的訂單查詢、報名系統,通常會是精準搜尋 (2)若是商品查詢則可能會是模糊搜尋但也要看產品有沒有 UX Guideline~
avatar-img
張家惟 Evan Chang的沙龍
107會員
182內容數
《思維的創意想像》是工作之餘發起的 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
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
這篇文章將會介紹 Unity Input System,這是一個適用於不同平台切換的官方系統,用於玩家按鍵輸入與不同控制器的操作。
Thumbnail
這篇文章將會介紹 Unity Input System,這是一個適用於不同平台切換的官方系統,用於玩家按鍵輸入與不同控制器的操作。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
Thumbnail
這篇文章將會介紹官方設置好的偵測玩家輸入,在撰寫遊戲程式的時候肯定需要偵測玩家輸入,其實並不需要自行撰寫程式來監控玩家操作,而是直接調閱官方的資料庫即可。
Thumbnail
這篇文章將會介紹官方設置好的偵測玩家輸入,在撰寫遊戲程式的時候肯定需要偵測玩家輸入,其實並不需要自行撰寫程式來監控玩家操作,而是直接調閱官方的資料庫即可。
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
UX文案是設計師們操作情境很好的工具,可以減少用戶認知負擔,讓介面簡單易懂。但我看過許多後台介面的Placeholder文案似乎是亂寫的? 為什麼想寫這個題目? 比起光鮮亮麗的前台介面流程,一般營運管理介面(俗稱後台)經常淪為配角,常被認為是「有空再來談怎麼優化」,而所謂的後台優化常常意味著追加功能
Thumbnail
UX文案是設計師們操作情境很好的工具,可以減少用戶認知負擔,讓介面簡單易懂。但我看過許多後台介面的Placeholder文案似乎是亂寫的? 為什麼想寫這個題目? 比起光鮮亮麗的前台介面流程,一般營運管理介面(俗稱後台)經常淪為配角,常被認為是「有空再來談怎麼優化」,而所謂的後台優化常常意味著追加功能
Thumbnail
將選項跟輸入項目都顯示在訊息窗口中。
Thumbnail
將選項跟輸入項目都顯示在訊息窗口中。
Thumbnail
  鑒於很多人可能因為語言問題所以比較難找到相關資料,依序會推出不同插件的懶人包大集合,也方便大家查閱有沒有自己想要的效果。   本次的懶人包主題是「遊戲選單」,由於選單類別眾多,並且作者允許翻譯的不少,因此分成多篇來介紹。
Thumbnail
  鑒於很多人可能因為語言問題所以比較難找到相關資料,依序會推出不同插件的懶人包大集合,也方便大家查閱有沒有自己想要的效果。   本次的懶人包主題是「遊戲選單」,由於選單類別眾多,並且作者允許翻譯的不少,因此分成多篇來介紹。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News