那些總是叫不出名字的 UI Components【Inputs 篇】
前情提要 💡
設計師在設計的時候可能常常遇到圖層命名的困擾，總不可能用圖層一、圖層二、圖層三，然後按鈕一、二、三這樣的模式幫畫面上的所有東西取名字吧 。然而，很多元件沒有相應的中文名稱，所以在使用中文的情況下，有很多元件很難被清楚描述。
這篇文章要介紹的是跟輸入和選擇有關的 UI 元件，包括按鈕、輸入框和其他選擇用的元件等等，這些英文單字雖然簡單，但是學會這些簡單的英文名稱絕對可以幫助設計師和工程師們達到更有效率的溝通，就讓我們開始吧！
Button
只要是按鈕都可以叫做 Button，而 Button 上顯示的圖標叫做 Icon，文字叫做 Label，背景則是 Background（書寫或是溝通的時候很常簡稱 BG）。如果要更精確地描述 Button，常見的有下面幾種。
Button Group
顧名思義就是把按鈕組一起變成一組一組的按鈕，像下圖的 Medium settings 裡的設計，Daily/Weekly/Off 和 All/Network/Off 兩組就都是標準的 Button Group；而 On/Off 其實也是 Button Group，雖然它的功能很像 Switch，但是 Medium 在這邊使用 Button Group 達成 Switch 功能的設計讓畫面的一致性提高，整個畫面的感覺看起來更簡約俐落。
Split Button
嚴格來說，Split Button 可以被歸類成是 Button Group 的一種，但 Split Button 和 Button Group 不一樣的地方在於 Split Button 被切成兩半，其中一半包含預設的功能，而另外一半可以達到另外一些功能。
舉例來說，下圖是 Google Slides 的編輯畫面。當我們要放映投影片的時候，我們可以點選靠近右上角的 Present 按鈕，然後就可以直接進到全螢幕放映，就是下圖選單裡的 Presenter view 選項；但如果我們點選 Present 按鈕旁邊向下的箭頭，會像下圖一樣打開一個選單，這個選單裡除了 Presenter view 還有另外兩個選項。
第二個例子來自 Google Docs，當我們要在投影片中插入 Number List 時，我們可以點選下圖的數字按鈕，即可使用那六個選項中的左上角那個預設樣式；而當我們點選旁邊的向下按鈕時，即可打開選單選擇其他樣式。
Dropdown Button
Dropdown Button 就是我們常常說的下拉式按鈕或選單，但它跟剛剛說的 Split Button 有什麼差別呢？讓我們再繼續看看 Google Docs 上的 Align 按鈕，它旁邊雖然也有一個向下的箭頭，但他在按鈕的設計上並沒有被切成兩塊，點選整個按鈕後也不會在文件發生什麼改變，只會跳出一個選單，這種按鈕就不能稱作 Split Button，它叫做 Dropdown Button。
Dropdown Button 比 Split Button 來得簡單，它就是實現兩層按鈕，但是第一層按鈕的功能僅是為了打開第二層的按鈕的選單而已，它的優點是可以幫助我們分類按鈕的功能，大大地減少畫面上的按鈕佈局；而嚴格說起來，Split Button 像是有功能的兩層按鈕，兩層都可以實現各自的功能。
Dropdown Button 也很常被使用，像是 GitHub 的首頁就利用幾個 Dropdown Button 將不同種類的功能分別集中到 Why GitHub、Explore 和 Pricing 裡，對使用者而言可以更方便地在不同索引下找到他們需要的東西。
以下這些也是使用 Dropdown Button 的例子。
Floating Action Button
Floating Action Button 指的是無論畫面滑動到哪裡都會浮在畫面上面的按鈕。像是下圖的左下角和右下角的 Icon button 就是 Floating Action Button。
Switch
Switch 就跟他的中文意思一樣就是常常看到的開關，而開關是打開的我們可以說 Switch On，關起來則是 Switch Off。至於怎樣是開怎樣是關呢，下圖顯示是藍色的 Switch 就是開的，灰色的則是關的，非常容易分辨吧。
雖然現在的網頁、APP 設計中對於 UI/UX 的要求提高了，設計師也會開始使用 Button Group、Radio Button 或 Checkbox 來取代 Switch，但在說明元件的功能時，我們也可以直接稱呼這樣的設計叫做 Switch。
Radio
Radio 在 UI 的世界裡是單選框的意思，因為也是按鈕的設計，所以也常常叫 Radio Button。它的外觀是圓形的按鈕，限制使用者僅能在整個 Button Group 中選擇其中一個選項，一旦選了某一個後就不能取消，只能改選其他的 Radio Button，跟 Switch 一樣有強迫使用者選擇其中一項的功能。
像下圖的例子是 macOS 裡的 Dock 設定，Dock 是 Mac 的導航列，而導航列只會出現在一個地方，不能同時在兩個或以上的地方出現，所以 Position on screen 的選項使用的是 Radio Button，使用者只能選三個之中的其中一個選項。
像下圖的 Time options 也是，因為不能同時有兩種時間狀態顯示，所以使用者只能在 Digital 和 Analog 中選一種。
Checkbox
Checkbox 是複選框的意思，它的外觀是正方形按鈕，可以讓使用者在整個 Button Group 中選擇多個選項，這意味著每個 Checkbox 都可以獨立切換開關。
聽起來很像 Switch 的功能對吧？但是在設計上 Checkbox 會比 Switch要來得節省空間又更直覺。
另外必須一提的是，在 Material-UI 的網頁上有提到下述的建議：
If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.（來源：https://material-ui.com/components/checkboxes/ ）
他們認為在只有一個選項需要選擇的時候，使用 Switch 比 Checkbox 來得理想。但我自己的看法是，如果在 macOS 的 System Preferences 中的 Language & Region 選單裡，Time format 的選項若使用 Switch 並不會比較適合。
Slider
Slider 就是滑桿，可以讓使用者在被限制的範圍內調整大小，常用在調整螢幕亮度、裝置音量等可以連續變化的設定。
下圖中的兩個 Slider 中，上面的沒有間隔設置，使用者可以隨意滑動滑桿，讓滑桿在任意值的位置，稱為 Continuous Slider；下面的那個有設定間格的滑桿叫做 Discrete Slider，通常只有在設定的值上可以停下來，也就是限制使用這選定特定的值。
Text Field
Text Field 指的是可以填入文字數字的框框，常常在填入帳號密碼的地方見到，大家一定不陌生。
如果工程師要寫驗證的程式，通常會叫那個檔案 Validate 檔，validate 是驗證的意思，而設計的部分也可以直接稱呼那些跳出來的提醒 Validation。
Date/Time Pickers
最後一個部分要介紹的是 Date Picker 和 Time Picker，我也曾經聽過 Date Chooser 和 Time Chooser 的說法，但感覺 Picker 還是比較常被使用，不過 Chooser 在溝通上也不會造成障礙。
Date Picker 就是像下圖一樣會跳出一個月曆，讓使用者可以點選日曆上的日期來選擇時間，而 Time Picker 也是一樣的概念。
這樣的設計有幾個好處：
- 資料傳輸的時候可以避免驗證的問題：如果輸入的資料形式有千百種，像是 YYYY-MM-DD、YYYYMMDD、YYYY/MM/DD、MM/DD/YYYY 或是 DD/MM/YYYY 等等，工程師寫驗證的程式時會非常麻煩，如果有 Date Picker 的設計就可以避免這個問題。
- 重複確認使用者的認知：大部分的時候我們可能只會記得我們要的時間是星期幾，像是「下週六」或是「清明節連假」，而 Date Picker 會顯示出一個月曆，我們可以重複日期和星期，降低選錯日期的機率。
後記 📷
寫這篇文章的過程中我發現一件很可怕的事情，雖然這篇文章提到的元件都是很常看到的元件，但真的要找例子的時候真的找了很久還找不到 😩，尤其是一直找不到很清楚的例子來解釋 Split Button 和 Dropdown Button，而且其實我也是在寫這篇文章的時候才真正弄清楚 Split Button 和 Dropdown Button的差別。
還有 Switch 不知道適不適合放進去 Button 系列裡，後來想了很久，覺得讓它接續在 Button 後面介紹就好 😅
希望我以後跟同事形容 UI 元件的時候不要說出「那個可以拖曳的」、「那個按鈕旁邊的箭頭」或是「按一下就可以跳出日曆啊」諸如此類的外行話。如果有寫錯的地方或更好的建議也歡迎提供 feedback （this.yingchencheng@gmail.com），謝謝大家 ❤
Part2 在這 👇
那些總是叫不出名字的 UI Components 【Navigation 篇】
