整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續看一下表單的其它控件：單選框、復選框、下拉框。
在我們表單頁面中，經常會有選擇性別或者選擇愛好這類的內容，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。
使用語法：
單選框：<input type="radio" value="值" name="名稱" checked="checked"/>
復選框：<input type="checkbox" value="值" name="名稱" checked="checked"/>
詳細講解：
1、type: 當 type="radio" 時，控件為單選框；當 type="checkbox" 時，控件為復選框
2、value：提交數據到服務器的值（后臺程序使用）
3、name：為控件命名，這里要注意同一組的單選按鈕，name 取值一定要一致（具體可見下邊的參考練習）。
4、checked：當設置 checked="checked"（也可以直接簡寫成checked） 時，該選項被默認選中
使用練習：
我們創建一個表單，表單里邊包含姓別（男、女）選擇的單選框，默認選中男以及愛好（唱歌、打游戲、繪畫、旅游）選擇的多選框，默認選中唱歌。具體的代碼如下圖所示：
在網頁中的顯示效果就如下圖所示：
下拉框也是我們常用的一個表單控件，多用于選擇城市地區等。
使用語法：
<select>
<option value="向服務器提交的內容" selected="selected">網頁顯示的內容</option>
</select>
詳細講解：
1、option：option為select下拉子元素，可以有一個或多個，寫法類似ul和li，其中的value內容為提交數據到服務器的值（后臺程序使用）
2、selected：當設置 selected="selected"（也可以直接簡寫成selected） 時，該選項被默認選中
使用練習：
我們創建一個表單，表單里邊包含一個城市的下拉框，下拉框中有北京、上海、天津這三個城市，其中默認選中天津。具體的代碼如下圖所示：
在網頁中的顯示效果就如下圖所示：
好了，本篇文章就先給大家介紹這幾個表單控件的語法以及使用，下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習演示，記得平時要多加練習才是王道。
每日金句：做人要像竹子一樣每前進一步，都要做一次小結。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
多選框（checkbox）用于可多選的情況，單選框（radio）則只能選擇一個。在普通的HTML中，checkbox、radio在和<label>等標簽配合時會出現對齊的問題，Bootstrap很好地解決了這個問題，代碼如下：
單選框和多多選框效果圖
實現代碼
上面的代碼中我們將input標簽都包含在了label中，強制其在一行，但是很多情況下我們不建議這么做。一般一個<label>中包含一個元素，如果遇到多個<label>標簽則會垂直顯示內容。Bootstrap中提供了幾個樣式類，如class="checkbox-inline"、class="radio-inline"，可以使checkbox和radio顯示在一行，代碼如下：
期文章主要研究單選和多選控件的設計細節，雖然是很常見的控件設計，但是也是有非常多需要注意的地方。能提煉總結常見事物的一般規律，這本身就是一件值得大家都去做的一件事。
無論是從個性化內容還是用戶體驗上來講，控件元素都會在我們的產品設計中扮演重要角色。為特定的內容選擇正確的控件可能要比你想象的要難，控件的高度，寬度，樣式設計和選項數量都是至關重要的因素。
為了幫助分解問題，這里給大家列了一個決策樹。
一個分段tab通常會由2-6個單選項，它最適合用于圖標、數字或短詞的導航形式，并被設計成一個水平的容器，容納等距離的單選內容。
圖標、短詞、價格
優點：將所有選項都擺在一行，對垂直空間的利用率能達到最佳，設計樣式也可以做到非常直觀，漂亮。
缺點：它不大適合用在長詞，短語或價格上，如果你確實希望將這些內容放在選項中，就必須嘗試精簡文本。水平空間非常有限，即使是只有少量的選項，有時候你仍然需要決定如何截斷文本。
（譯者注：為什么對于底部導航欄的分欄數是2-6個最合適，根據iOS規范中說的，太多的選項卡增加了應用的復雜性，使得信息定位變得困難。選項太少也可能會帶來一個問題是界面間的信息流斷開，不便于快速觸達。
請見iOS規范https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/ 。另外，還有說法是按鈕的大小能決定點擊時的舒適度，數量也會影響用戶的記憶和學習成本。請見知乎https://www.zhihu.com/question/31103224 ）
最初的單選按鈕被用于列表中超過6個選項時，被設計成垂直方向，圓形輪廓，并擺在列表項的開頭。后來iOS通過在列表末尾加上一個對勾選中，而創造一個新的經典案例。現在最新的一些設計中，選中被設計成在列表選項外加一個描邊框形式，用以節省水平空間。
Android & Web vs iOS vs 描邊框模式
優點：列表單選為內容提供了更多的空間。它們易于閱讀，可以容納多文字，文本可以換行，還可以增加圖片。
缺點：他們往往很占用空間，不適合用在垂直高度受限的頁面中。
一個有趣的事實是，單選按鈕是受舊收音機上的按鍵設計的啟發而設計出來的，一個按鈕被按下，就會彈出其他按鈕。
標簽選擇通常用于要從3-6個選項中進行多次選擇的情況，它們最適合用一到兩個簡短的單詞或數字。它們設計的形式一般是類似于一個小按鈕，通過背景色來區分“開”和“關”。
盡管谷歌設計規范（譯者注：大家可以看看谷歌官方的規范，對于標簽設計列舉了大量實用原則 https://material.io/design/components/chips.html#filter-chips）建議最好在選中的標簽前加上一個勾選標記，但我覺得有顏色作為區分已經夠了，這樣還能節省水平空間。
短詞標簽vs帶省略號的多詞標簽vs折行標簽
優點：節省空間，標簽堆砌在一起的具體樣式是由文本長度決定的。它們給人的印象是輕量的，有趣的。
缺點：這種形式與tab選項形式有一樣的弊端，都不能很好的處理長詞。不建議對文本進行折行或者調整大小，因為會不便于用戶閱讀，使用兩行以上的標簽會使得每個標簽非常難以快速掃描。
列表中的復選框一般應用于6個以上選項進行多選的情況，設計樣式通常是在列表開頭處設計一個正方形描邊框。
列表中的復選框
優缺點：與單選框有一樣的優勢和弊端。
我們很容易陷入到特定組件的設計中，所以我發現最好是從整體上開始思考。然后做出最佳決定，決定使用哪種選擇設計最有利于一致性、差異性和層次感。
選項背景是tab控件和標簽控件之間最大的區別。一個連續的背景幫助用戶理解他們必須要選擇一個，而一個分離的背景表明他們可以選擇多個。
統一的風格和不統一的風格
Tab控件和標簽控件的設計應該在視覺上彼此相似，并且做到與文本框和按鈕不同，以不同的視覺樣式幫助達到不同的交互層次結構。
不同的樣式風格和相同的樣式風格
有這么多單選按鈕形式可以選擇，我發現最好是將單選和復選放在一起才便于比較。iOS端的列表單選勾和描邊高亮都是很漂亮的設計，但是與多選框放一起，就會顯得不夠統一。
（譯者注：最左側的單選復選樣式和位置相對比較一致，中間的上下都有對勾會讓人產生疑惑，而最右側的方框高亮和左側復選框設計差異太大。）
Android & Web vs iOS vs Alternate Pattern
最后說一點，但并非是最不重要的，就是圖片的位置。選擇控件一般位于列表項的開頭位置，但是，當列表項中有圖片時，就有人開始糾結應該是放前面好還是放后面好。
這里，我選擇將控件保留在開頭位置，因為控件是必須存在的，而圖片是可選或者可添加的。（譯者注：如果在一個設計規范中，選項控件都在左側，那也應該盡量讓其他控件也保持在左側來保證一致性。）
Image in the End vs Start Position
還有一種很好用的選擇控件是滾筒（https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/）。當有許多短詞并且垂直控件有限時，就可以使用它。建議只在其中放置文本，它的使用要求比較高，在Android和iOS中都很復雜。
原文：https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4
作者：Linzi Berry
譯者：彩云Sky，公眾號：彩云譯設計
本文由 @彩云Sky 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
