更新於 2023/03/05發佈於 2023/03/04閱讀時間約 2 分鐘

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

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

誰適合看這篇文章？

✔ 對於產品經理、產品企劃、產品開發、PM 有興趣

✔ 對於 UI 元件、UIUX、介面元件、輸入元件有興趣

一、文字輸入 Text

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

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

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

UI 元件在分辨單選和複選按鈕通常會用 Radio Buttons（單選）、Checkbox（複選）這兩個詞，如下示意：

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

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

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

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

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

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

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

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

分享至

成為作者繼續創作的動力吧！