【UI 常見元件整理】Input 輸入
更新於 2023/03/05閱讀時間約 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 元件，有興趣的朋友可以觀看：
為什麼會看到廣告
90會員
160內容數
《思維的創意想像》是工作之餘發起的 Side Project，因為近期快速吸收各種資訊跟商業知識（Input），但一直沒有地方輸出（Output），因此想透過這系列記錄學到的內容，包含商業知識、產業洞見，或是職場分享等等，目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
Windows Clarity 是一種網站分析產品，讓網站設計師、開發人員可藉由它，更容易觀察用戶在網站的操作行為，協助更快速的優化網站，加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用，強化分析能力與優化網站效益。
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎，只是當時沒有像現在這樣重視使用者對產品的使用體驗感受，不過我們還是可以透過回顧歷史，看看UI/UX是怎樣往前發展至現在的模樣，甚至近期有一些新技術已經在某些族群中默默地發展著！
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
市場上有許多 UI 的設計職缺，在設計這一個行業裡面，學歷或是工作履歷能幫你增加打開履歷的機會，但真的進入面試的關鍵就在作品集。要怎麼準備作品集？要怎麼去應徵這些職缺？要怎麼樣才能提高進入面試的機率？有時候作品集佔了至關重要的地位，今天這一章將介紹如何準備 UI 專用的設計作品集，並提供一些建議，
最近收到了一封學生的信，詢問在職場中UI Designer是什麼？想在公司建立一套基本的流程，這張圖片應該許多人都看過，裡頭有很多專業的名詞，以及像金字一樣往上堆疊的順序，在討論工作流程前，我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。
Us
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中，最常被問的問題了。
其實我並不鼓勵大家購買大量課程、書籍來淹沒自己，因為資訊量很大，而且每位老師的經歷、教法有不同，有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。
而此時的你並不知道，到底應該投資哪一種類型項目，最能「
從2020年七月開始，陸陸續續有身邊的朋友，開始詢問我的職業跟技能樹是什麼？當時我並沒有想太多，就分享了一些我自己執行的專案以及接案內容，不過在聊聊的過程中，發現有許多思維跟細節，是和一般設計師有所不同，而這正是大家所疑惑的點。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
Windows Clarity 是一種網站分析產品，讓網站設計師、開發人員可藉由它，更容易觀察用戶在網站的操作行為，協助更快速的優化網站，加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用，強化分析能力與優化網站效益。
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎，只是當時沒有像現在這樣重視使用者對產品的使用體驗感受，不過我們還是可以透過回顧歷史，看看UI/UX是怎樣往前發展至現在的模樣，甚至近期有一些新技術已經在某些族群中默默地發展著！
Figma是一款專門製作UI介面的設計師專用軟體，目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯，推薦你一個可以有系統的學習Figma的線上課程，Simon老師的 【 產品設計實戰：用Figma打造絕佳UI/UX 】 。
市場上有許多 UI 的設計職缺，在設計這一個行業裡面，學歷或是工作履歷能幫你增加打開履歷的機會，但真的進入面試的關鍵就在作品集。要怎麼準備作品集？要怎麼去應徵這些職缺？要怎麼樣才能提高進入面試的機率？有時候作品集佔了至關重要的地位，今天這一章將介紹如何準備 UI 專用的設計作品集，並提供一些建議，
最近收到了一封學生的信，詢問在職場中UI Designer是什麼？想在公司建立一套基本的流程，這張圖片應該許多人都看過，裡頭有很多專業的名詞，以及像金字一樣往上堆疊的順序，在討論工作流程前，我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。
Us
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中，最常被問的問題了。
其實我並不鼓勵大家購買大量課程、書籍來淹沒自己，因為資訊量很大，而且每位老師的經歷、教法有不同，有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。
而此時的你並不知道，到底應該投資哪一種類型項目，最能「
從2020年七月開始，陸陸續續有身邊的朋友，開始詢問我的職業跟技能樹是什麼？當時我並沒有想太多，就分享了一些我自己執行的專案以及接案內容，不過在聊聊的過程中，發現有許多思維跟細節，是和一般設計師有所不同，而這正是大家所疑惑的點。