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

更新於 發佈於 閱讀時間約 2 分鐘
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
誰適合看這篇文章?
✔ 對於產品經理、產品企劃、產品開發、PM 有興趣
✔ 對於 UI 元件、UIUX、介面元件、輸入元件有興趣

一、文字輸入 Text

文字輸入框應該是最多人知道的 UI,此區想額外紀錄的是不同狀態。
有些輸入框輸入文字後,會跳出該欄位的推薦字詞(aka 預測查詢字串),例如 104 人力銀行,輸入「產品」後會顯示的推薦詞:
有些則是會影響其他欄位的選項,例如 518 人力銀行,輸入「產品經理」後,在職務類別會跳出類別標籤(Label)

二、按鈕 Button

UI 元件在分辨單選和複選按鈕通常會用 Radio Buttons(單選)、Checkbox(複選)這兩個詞,如下示意:
另外也有看到滿多網站是直接將文字和按鈕合併,也就是沒有 radio、checkbox 的那個小圖示,直接以標籤(Label)的方式呈現,優點是節省空間、點擊範圍更大,缺點則是第一眼較難判別是要讓使用者單選還是複選。

三、互動元件 Modal

Modal 是蓋板選單,當打開時就只能先完成此行為,選單外通常會用黑底色塊處理,讓使用者無法同時進行選單外的操作,若要的話只能關閉選單。
雖然在《Feedback 回饋篇》也有介紹到,但在 Input 我發現也有一些欄位滿常用到的,像是「職務類別選單、科系選單、學校選單、國家選單、地區選單、產業選單」等,如下示意。

四、下拉式選單 Dropdown List

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

五、滑桿 Slider

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

六、選擇器 Picker

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

以上是 UI 元件系列的第三篇,由於我目前正在熟悉 UI 這個領域,因此有滿多 UI 解釋、操作說明都是先參考不同 UI 前輩的文章,再進行轉譯,若有任何用詞不精確的地方,都歡迎讀者給予回饋。
未來也會持續記錄不同場景、不同產品、不同產業的 UI 元件,有興趣的朋友可以觀看:
  1. 【UI 常見元件整理】Navigation 導覽
  2. 【UI 常見元件整理】Feedback 回饋
為什麼會看到廣告
《思維的創意想像》是工作之餘發起的 Side Project,因為近期快速吸收各種資訊跟商業知識(Input),但一直沒有地方輸出(Output),因此想透過這系列記錄學到的內容,包含商業知識、產業洞見,或是職場分享等等,目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言
avatar-img
留言分享你的想法!
avatar-img
2024/07/10
感謝你熱心地分享經驗,請教一下若輸入資訊是需要多選的話,甚麼…
張家惟 Evan Chang-avatar-img
發文者
2024/07/23
我目前想到的:1. 輸入資訊較多的話:有些介面會是 5 個選項以內用 checkbox,超過 5 個選項就變成下拉選單2. 查看資料範圍: (1) 偏向個資的訂單查詢、報名系統,通常會是精準搜尋 (2)若是商品查詢則可能會是模糊搜尋但也要看產品有沒有 UX Guideline~
如何準備產品企劃(Product Planner)的面試?面試常見問題是什麼?面試前要怎麼準備?作品集都放哪些內容?或是如何轉職成為產品企劃?這篇將會分享我從客戶成功轉職到產品企劃的職涯經歷。
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
上一篇《產品開發的黃金圈理論 Why-How-What》提到產品開發的黃金圈,接下來我想列舉我在產品規劃時,曾犯下的幾個失誤,也作為未來的警惕,(1) 確認好需求才進規劃、(2) 確認好解方要有框架、(3) 確認好框架才進開發。
上一篇提到在從彙整產品需求,到決定產品開發順序的流程,接著我將繼續以一個產品專員的角色,來記錄產品開發的關鍵決策點,這篇會包含 (1) Why 為什麼我們要做這個產品、(2) How 我們要透過什麼方式傳達價值、(3) What 我們要透過什麼功能達到目標。
上一篇《訂定產品策略的難點,拆解團隊分歧點|EP2》提到在決定產品方向時,常遇到的內部爭執點,接著我將會以一個產品專員的角色,來記錄收到產品需求時,決定開發與否的思考環節,這篇會包含 (1) 產品需求彙整、(2) 產品願景梳理、(3) 產品開發排序。
如何準備產品企劃(Product Planner)的面試?面試常見問題是什麼?面試前要怎麼準備?作品集都放哪些內容?或是如何轉職成為產品企劃?這篇將會分享我從客戶成功轉職到產品企劃的職涯經歷。
「Feedback 回饋」是最直接面向使用者的一種元件分類,最常被拿來討論「這個功能友不友善」,這篇會整理常見的回饋元件,包含:模態(警示 Alert、工具提示 Tooltip、通知 Notification、流程 Progress)、非模態(互動元件 Modal、對話 Dialog)。
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
上一篇《產品開發的黃金圈理論 Why-How-What》提到產品開發的黃金圈,接下來我想列舉我在產品規劃時,曾犯下的幾個失誤,也作為未來的警惕,(1) 確認好需求才進規劃、(2) 確認好解方要有框架、(3) 確認好框架才進開發。
上一篇提到在從彙整產品需求,到決定產品開發順序的流程,接著我將繼續以一個產品專員的角色,來記錄產品開發的關鍵決策點,這篇會包含 (1) Why 為什麼我們要做這個產品、(2) How 我們要透過什麼方式傳達價值、(3) What 我們要透過什麼功能達到目標。
上一篇《訂定產品策略的難點,拆解團隊分歧點|EP2》提到在決定產品方向時,常遇到的內部爭執點,接著我將會以一個產品專員的角色,來記錄收到產品需求時,決定開發與否的思考環節,這篇會包含 (1) 產品需求彙整、(2) 產品願景梳理、(3) 產品開發排序。
你可能也想看
Google News 追蹤
Thumbnail
靈感用盡、鍵盤不再響,盯著喜歡、分享、留言的數字,心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品,要為創作者打氣! 🚨「創作者打氣包」 最懂創作者的vocus,為創作者打造 ✨ 打氣包,包什麼?!四件道具挺創作者 一、【打氣復活卷】 專屬你的打氣小語,成功登記免費
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
這篇整理了許多初學 UI/UX 設計的學員們,最常詢問的 8 個快問快答。
這次要來分享在學習過程中,可以提醒自己慢慢培養、累積的小習慣,讓學習過程更有效率。
Thumbnail
這次針對幾個剛接觸 Figma 的學員,在練習掌握設計工具的過程,也可以一邊培養的好習慣,不論是對於自己或是之後在工作上都很受用哦。
Thumbnail
本篇教學將教你如何在自訂情況下隱藏遊戲中的快速菜單。透過簡單的程式碼修改,您可以輕鬆隱藏或顯示快速菜單,以達到最佳的遊戲體驗。不論是想要隱藏菜單或是自動隱藏,這篇文章將提供清楚的步驟幫助您完成設定。如果有任何疑問,隨時歡迎詢問!
Thumbnail
在這篇文章中,我們將探討如何製作章節轉場動畫,讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟,適合初學者進行學習和操作。我們提供了必要的資源和範例,讓您能輕鬆上手。期待透過這篇教學,能讓您在創作中達到更高的境界!
※ 介面是什麼: 介面:人跟電腦互相溝通的管道。 使用者與電腦互相溝通的方式稱為使用者的介面。 ※ 使用者的介面類型: 文字使用者介面:CUI。使用純鍵盤來下指令溝通,對象是伺服器(SERVER)。 圖型使用者介面:GUI。使用圖像去做點擊或拖拉的方式。 ※ 命令列(Command li
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
<iostream> ​在之前的文章有提到過,<iostream> 是專門處理程式的輸入 (input) 以及輸出 (output) 的函式庫。輸入輸出的對象是以電腦作為主角: 輸入指的是「把資料給電腦」,輸出指的是「從電腦那邊取得資料」。 在這個系列的文章中,程式輸入指的都是從鍵盤輸入資料給電
Thumbnail
網友提出的一個問題,如影片。 當輸入關鍵字+數量,例:起司+10 下拉式選單自動產生有關起司的產品的清單供選擇並且帶出規格、數量、金額與小計 《為什麼要做這個功能呢?》 當資料很多的時候,如果每筆資料都是用篩選的方式來找出想要的產品,可能會耗掉非常多的時間。 所以如果可以藉由關鍵字,
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
靈感用盡、鍵盤不再響,盯著喜歡、分享、留言的數字,心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品,要為創作者打氣! 🚨「創作者打氣包」 最懂創作者的vocus,為創作者打造 ✨ 打氣包,包什麼?!四件道具挺創作者 一、【打氣復活卷】 專屬你的打氣小語,成功登記免費
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
這篇整理了許多初學 UI/UX 設計的學員們,最常詢問的 8 個快問快答。
這次要來分享在學習過程中,可以提醒自己慢慢培養、累積的小習慣,讓學習過程更有效率。
Thumbnail
這次針對幾個剛接觸 Figma 的學員,在練習掌握設計工具的過程,也可以一邊培養的好習慣,不論是對於自己或是之後在工作上都很受用哦。
Thumbnail
本篇教學將教你如何在自訂情況下隱藏遊戲中的快速菜單。透過簡單的程式碼修改,您可以輕鬆隱藏或顯示快速菜單,以達到最佳的遊戲體驗。不論是想要隱藏菜單或是自動隱藏,這篇文章將提供清楚的步驟幫助您完成設定。如果有任何疑問,隨時歡迎詢問!
Thumbnail
在這篇文章中,我們將探討如何製作章節轉場動畫,讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟,適合初學者進行學習和操作。我們提供了必要的資源和範例,讓您能輕鬆上手。期待透過這篇教學,能讓您在創作中達到更高的境界!
※ 介面是什麼: 介面:人跟電腦互相溝通的管道。 使用者與電腦互相溝通的方式稱為使用者的介面。 ※ 使用者的介面類型: 文字使用者介面:CUI。使用純鍵盤來下指令溝通,對象是伺服器(SERVER)。 圖型使用者介面:GUI。使用圖像去做點擊或拖拉的方式。 ※ 命令列(Command li
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
<iostream> ​在之前的文章有提到過,<iostream> 是專門處理程式的輸入 (input) 以及輸出 (output) 的函式庫。輸入輸出的對象是以電腦作為主角: 輸入指的是「把資料給電腦」,輸出指的是「從電腦那邊取得資料」。 在這個系列的文章中,程式輸入指的都是從鍵盤輸入資料給電
Thumbnail
網友提出的一個問題,如影片。 當輸入關鍵字+數量,例:起司+10 下拉式選單自動產生有關起司的產品的清單供選擇並且帶出規格、數量、金額與小計 《為什麼要做這個功能呢?》 當資料很多的時候,如果每筆資料都是用篩選的方式來找出想要的產品,可能會耗掉非常多的時間。 所以如果可以藉由關鍵字,
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co