【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 元件，有興趣的朋友可以觀看：
為什麼會看到廣告
91會員
163內容數
《思維的創意想像》是工作之餘發起的 Side Project，因為近期快速吸收各種資訊跟商業知識（Input），但一直沒有地方輸出（Output），因此想透過這系列記錄學到的內容，包含商業知識、產業洞見，或是職場分享等等，目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 介面是什麼：
介面：人跟電腦互相溝通的管道。
使用者與電腦互相溝通的方式稱為使用者的介面。
※ 使用者的介面類型：
文字使用者介面：CUI。使用純鍵盤來下指令溝通，對象是伺服器(SERVER)。
圖型使用者介面：GUI。使用圖像去做點擊或拖拉的方式。
※ 命令列(Command li
在設計表單的時候有幾種不同的元件，可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像，在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現，真的有人將這兩個元件做了一些詳細的說明，所以決定整
<iostream>
在之前的文章有提到過，<iostream> 是專門處理程式的輸入 (input) 以及輸出 (output) 的函式庫。輸入輸出的對象是以電腦作為主角: 輸入指的是「把資料給電腦」，輸出指的是「從電腦那邊取得資料」。
在這個系列的文章中，程式輸入指的都是從鍵盤輸入資料給電
網友提出的一個問題，如影片。
當輸入關鍵字+數量，例:起司+10
下拉式選單自動產生有關起司的產品的清單供選擇並且帶出規格、數量、金額與小計
《為什麼要做這個功能呢?》
當資料很多的時候，如果每筆資料都是用篩選的方式來找出想要的產品，可能會耗掉非常多的時間。
所以如果可以藉由關鍵字，
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
題目敘述
題目會給定兩個輸入。
第一個輸入是關鍵字清單products，第二個是使用者輸入的字串searchWord。
要求我們實現關鍵字搜尋建議系統，使用者每輸入一個字元就推薦一次。
推薦時，優先返回字典序(Lecial order)最接近的關鍵字，最多不要超過三個關鍵字。
題目的原文
題目敘述
題目會給我們一組定義好的界面和需求，要求我們設計一個資料結構，可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。
RandomizedSet() 類別建構子
bool insert(int val) 插入元素的function界面
bool remove(int val
在C#的視窗應用程式中，右鍵選單（Context Menu）是一個方便的使用者介面元素。當中的項目可以包含各種功能，而有時我們可能需要在使用者點擊右鍵選單中的某個項目時，取得該項目的值。以下是一個簡單的教學，教你如何在C#中實現這個功能。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 介面是什麼：
介面：人跟電腦互相溝通的管道。
使用者與電腦互相溝通的方式稱為使用者的介面。
※ 使用者的介面類型：
文字使用者介面：CUI。使用純鍵盤來下指令溝通，對象是伺服器(SERVER)。
圖型使用者介面：GUI。使用圖像去做點擊或拖拉的方式。
※ 命令列(Command li
在設計表單的時候有幾種不同的元件，可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像，在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現，真的有人將這兩個元件做了一些詳細的說明，所以決定整
<iostream>
在之前的文章有提到過，<iostream> 是專門處理程式的輸入 (input) 以及輸出 (output) 的函式庫。輸入輸出的對象是以電腦作為主角: 輸入指的是「把資料給電腦」，輸出指的是「從電腦那邊取得資料」。
在這個系列的文章中，程式輸入指的都是從鍵盤輸入資料給電
網友提出的一個問題，如影片。
當輸入關鍵字+數量，例:起司+10
下拉式選單自動產生有關起司的產品的清單供選擇並且帶出規格、數量、金額與小計
《為什麼要做這個功能呢?》
當資料很多的時候，如果每筆資料都是用篩選的方式來找出想要的產品，可能會耗掉非常多的時間。
所以如果可以藉由關鍵字，
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
題目敘述
題目會給定兩個輸入。
第一個輸入是關鍵字清單products，第二個是使用者輸入的字串searchWord。
要求我們實現關鍵字搜尋建議系統，使用者每輸入一個字元就推薦一次。
推薦時，優先返回字典序(Lecial order)最接近的關鍵字，最多不要超過三個關鍵字。
題目的原文
題目敘述
題目會給我們一組定義好的界面和需求，要求我們設計一個資料結構，可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。
RandomizedSet() 類別建構子
bool insert(int val) 插入元素的function界面
bool remove(int val
在C#的視窗應用程式中，右鍵選單（Context Menu）是一個方便的使用者介面元素。當中的項目可以包含各種功能，而有時我們可能需要在使用者點擊右鍵選單中的某個項目時，取得該項目的值。以下是一個簡單的教學，教你如何在C#中實現這個功能。