最近在做一個(gè)標(biāo)準(zhǔn)版中臺(tái)（就是展示配置+部分運(yùn)營(yíng)數(shù)據(jù)展示）皆串，做的有些吃力，剛好看到了一篇后臺(tái)系統(tǒng)的組件整理（https://mp.weixin.qq.com/s/tY42iiEih-F1CWat9vQlnw）杭朱，趕緊做好筆記以備不時(shí)之需。
常見(jiàn)類型：
·單選按鈕
·復(fù)選框
·圖標(biāo)切換
·切換開(kāi)關(guān)
·穿梭框/列表構(gòu)造器
·下拉菜單
一、單選按鈕
允許用戶從一組相互排斥的選項(xiàng)中選擇一個(gè)谍椅。通常，將一個(gè)選項(xiàng)定義為默認(rèn)選擇钙姊。
外觀
常規(guī)：
分段控件：
在單個(gè)選項(xiàng)下毯辅，存在多組互斥選項(xiàng)，且互斥選項(xiàng)組之間存在一定關(guān)系煞额，可以考慮混用分段控件和常規(guī)按鈕思恐，由于分段控件在視覺(jué)上占用更大的面積，故給人在層級(jí)上更加置前膊毁。
最佳用法
·只有一個(gè)選項(xiàng)或僅僅有兩個(gè)相互排斥的選項(xiàng)胀莹，考慮單個(gè)復(fù)選框或切換開(kāi)關(guān)等其他非互斥的選擇控件；若當(dāng)前選項(xiàng)過(guò)多時(shí)婚温，且在有限的屏幕空間下描焰，考慮使用下拉菜單或列表框。
·默認(rèn)選項(xiàng)最好是大多數(shù)人會(huì)選擇的/你希望用戶選擇的栅螟。但在極少數(shù)情況下荆秦，默認(rèn)選項(xiàng)可能會(huì)不正確。例如力图，涉及性別步绸、政治、宗教信仰等吃媒，這些情況下可以不提供默認(rèn)選項(xiàng)瓤介。
·在用戶與單選按鈕交互時(shí)吕喘，請(qǐng)?zhí)峁┝己靡曈X(jué)反饋，且按鈕本身狀態(tài)提供良好的能供性（默認(rèn)刑桑、懸停氯质、選中和禁用）。
二祠斧、復(fù)選框
允許用戶從非互斥的選項(xiàng)中闻察，選擇任意數(shù)量的選項(xiàng)（零個(gè)、一個(gè)或多個(gè)）
單個(gè)使用時(shí)梁肿，復(fù)選框提供了兩個(gè)互斥（二元）的操作選項(xiàng)蜓陌。
外觀
常規(guī)：
全選操作（未全選狀態(tài)）：
最佳用法
·復(fù)選框用于表示狀態(tài)的標(biāo)記，不會(huì)直接導(dǎo)致命令的觸發(fā)吩蔑，需要最終和命令按鈕（如提交钮热、確定等）操作配合，若是直接觸發(fā)請(qǐng)改用切換開(kāi)關(guān)（切換開(kāi)關(guān)并非絕對(duì)情況下都是直接觸發(fā)命令操作）烛芬；若復(fù)選選項(xiàng)過(guò)多時(shí)隧期，且有限的屏幕空間下，請(qǐng)考慮使用復(fù)選列表框赘娄。
·如果只有一個(gè)復(fù)選框仆潮，可以根據(jù)表單格式選擇使用標(biāo)簽、文本或組合遣臼；如果有多個(gè)復(fù)選框性置，標(biāo)簽將描述整個(gè)復(fù)選框，而文本則是表述各自的選項(xiàng)揍堰。
·標(biāo)簽文本使用正面肯定的措辭鹏浅，以便用戶清楚的知道打開(kāi)復(fù)選框?qū)?huì)發(fā)生什么。避免使用否定的表達(dá)屏歹，例如 「同意條款」 而不是 「不同意條款」 或是 「打開(kāi)通知」 而不是 「關(guān)閉通知」 等等隐砸。
·在用戶與復(fù)選框交互時(shí)，請(qǐng)?zhí)峁┝己靡曈X(jué)反饋蝙眶，且按鈕本身狀態(tài)提供良好的能供性（默認(rèn)季希、懸停、選中幽纷、禁用和未全選狀態(tài)）式塌。
討論：僅有兩個(gè)互斥的選項(xiàng)（二元）是選擇單選按鈕還是復(fù)選框？
具體是要看場(chǎng)景和習(xí)慣用法友浸。
復(fù)選框和單選按鈕之間的主要差別是：
單選按鈕給人更加直接的示意峰尝，例如開(kāi)啟關(guān)閉，而復(fù)選只表達(dá)一面信息尾菇，因此它的反面信息并不是非常直觀境析，甚至對(duì)于某些用戶而言，并不清楚勾選和不勾選所表達(dá)的含義派诬。
習(xí)慣用法是遵循互聯(lián)網(wǎng)產(chǎn)品中的一些默認(rèn)處理方式劳淆，例如，注冊(cè)中的同意條款就是使用復(fù)選框默赂。
三沛鸵、Icon button 圖標(biāo)按鈕
圖標(biāo)按鈕可以說(shuō)是結(jié)合了單選按鈕、復(fù)選框及命令控件的變形形式缆八，性質(zhì)上存在互斥（單選）和非互斥（多選）曲掰。
外觀
文檔編輯（Word及富文本編輯器）可以說(shuō)是圖標(biāo)按鈕使用的最佳案例，不僅滿足多種操作的需求奈辰，且節(jié)省空間栏妖。
排列方式也是圖標(biāo)按鈕的常見(jiàn)用法。
四奖恰、 Switch 切換開(kāi)關(guān)
用于打開(kāi)或關(guān)閉二元操作的切換選項(xiàng)吊趾。
外觀
常規(guī)：
帶文本或圖標(biāo)：
最佳用法
·左/灰為關(guān)，右/彩為開(kāi)瑟啃。
·切換開(kāi)關(guān)可包括文本或圖標(biāo)论泛，例如「開(kāi)/on」和「關(guān)/off」標(biāo)簽，但不建議標(biāo)簽過(guò)長(zhǎng)蛹屿，如果標(biāo)簽太長(zhǎng)請(qǐng)考慮使用其他互斥的選擇控件屁奏。
·切換狀態(tài)中使用微動(dòng)畫進(jìn)行過(guò)渡，而不是生硬的呈現(xiàn)错负。
·在用戶與切換開(kāi)關(guān)交互時(shí)坟瓢，請(qǐng)?zhí)峁┝己靡曈X(jué)反饋，且切換開(kāi)關(guān)本身狀態(tài)提供良好的能供性（關(guān)閉湿颅、開(kāi)啟载绿、禁用）。
討論：切換開(kāi)關(guān)在用戶更改后立即觸發(fā)命令執(zhí)行油航？
此說(shuō)法并非絕對(duì)崭庸。
在 B端產(chǎn)品及某些重要情況下，觸發(fā)開(kāi)關(guān)操作依然需要用戶再次確定才會(huì)真正觸發(fā)執(zhí)行谊囚。
五怕享、Transfer 穿梭框/列表構(gòu)造器
在同一頁(yè)面上顯示 「源」 列表和 「目的」 列表，通過(guò)使用按鈕或拖拽镰踏，直觀的在兩欄之間移動(dòng)元素函筋，完成選擇行為。
外觀
常規(guī)：
帶搜索奠伪，在操作者對(duì)選項(xiàng)比較熟知情況下（例如跌帐，公司員工）首懈，搜索可以快速查找到想要的選項(xiàng)。
最佳用法
·行為上穿梭框是一種復(fù)雜谨敛、較難認(rèn)知的一種控件模式究履，且占用大量的屏幕空間，源選項(xiàng)較少的情況下復(fù)選列表框則是一種更為簡(jiǎn)單的替代方案脸狸。但是如果源列表選項(xiàng)過(guò)多最仑，又想讓被選中的選項(xiàng)更容易被看到，穿梭框則是不錯(cuò)的選擇炊甲。
·對(duì)于大量的可選項(xiàng)泥彤，從易用性角度考慮，可以按照選項(xiàng)常用程度卿啡、重要性吟吝、字母等進(jìn)行排列或提供搜索（實(shí)時(shí)搜索），從而便于用戶進(jìn)行快速選擇牵囤。
·列表提供全選和多選操作爸黄，以便用戶能夠在列表間移動(dòng)大量選項(xiàng)。
·實(shí)時(shí)顯示當(dāng)前被選中列表/ 「源」 列表的數(shù)量比及 「目的」 列表的數(shù)量揭鳞。
·若列表框內(nèi)容大于視窗高度炕贵，列表框的高度為：N列表+?列表。
六野崇、Dropdowns 下拉（彈出）菜單
觸發(fā)操作（點(diǎn)擊或移入觸點(diǎn)）称开，會(huì)出現(xiàn)一個(gè)非模態(tài)彈框。允許用戶從集合中進(jìn)行選擇或執(zhí)行相應(yīng)的命令乓梨。下拉菜單將多種集合進(jìn)行了封裝鳖轰，只有在用戶需要的時(shí)候才顯示出來(lái)（按需顯示），具有節(jié)省頁(yè)面空間及簡(jiǎn)化當(dāng)前頁(yè)面等優(yōu)點(diǎn)扶镀。
外觀
常規(guī)：
分類：
帶搜索：
多選：
執(zhí)行命令蕴侣，例如系統(tǒng)導(dǎo)航菜單、表格操作等：
級(jí)聯(lián)：
樹形（單選臭觉、多選）：
操作（刪除昆雀、添加等）：
上下文菜單，例如蝠筑，常見(jiàn)的右鍵操作及文本選擇命令（如剪切狞膘、復(fù)制和粘貼等）：
下拉選擇器。多適用于顏色什乙、日歷（日月年）挽封、日期、時(shí)間等內(nèi)容：
最佳用法
·在較小的空間下臣镣，對(duì)多個(gè)選項(xiàng)進(jìn)行選擇或內(nèi)容較為次要且不需要一直顯示時(shí)辅愿，下拉菜單是不錯(cuò)的選擇智亮。若選項(xiàng)較少，考慮使用單選框（當(dāng)進(jìn)行單項(xiàng)選擇時(shí)）或復(fù)選框（當(dāng)進(jìn)行多項(xiàng)選擇時(shí)）点待。
·下拉菜單選項(xiàng)按照某種邏輯順序排序鸽素。例如，按照重要程度或被選擇程度（可能性）進(jìn)行排列亦鳞。
·對(duì)于大多數(shù)操作，當(dāng)單擊菜單或以外區(qū)域棒坏，菜單應(yīng)該收起關(guān)閉燕差；如果點(diǎn)擊的菜單項(xiàng)是多選操作，則菜單應(yīng)保持打開(kāi)狀態(tài)坝冕。
·禁用菜單項(xiàng)徒探，而不是隱藏，以提高功能的可發(fā)現(xiàn)性喂窟。
·下拉菜單文本保持簡(jiǎn)潔扼要测暗，文本內(nèi)容限制為單行。
·請(qǐng)根據(jù)具體情況磨澡，定義列表項(xiàng)的最小和最大寬度碗啄，以適應(yīng)其內(nèi)容。超出最大寬度從末尾截?cái)辔壬悖⑻砑邮÷蕴?hào)稚字，鼠標(biāo)懸停顯示全部文本內(nèi)容。
·如果沒(méi)有預(yù)先選擇厦酬，使用占位符（灰色文本）進(jìn)行操作提示胆描。例如：請(qǐng)選擇。如果需要指出所有項(xiàng)目都適用仗阅，例如昌讲，作為列表過(guò)濾器，請(qǐng)將「全部」 作為選項(xiàng)减噪，并將其放置在列表的開(kāi)頭短绸。
·若下拉列表內(nèi)容大于視窗高度，下拉列表的高度為：N列表+?列表旋廷。
·若需要兼容IE8鸠按，下拉框除了陰影效果（IE8沒(méi)有陰影），還要做1-2px的線框描邊饶碘。
·下拉選擇器多適用于顏色目尖、日歷、日期扎运、時(shí)間等內(nèi)容瑟曲，若不可輸入請(qǐng)將整個(gè)區(qū)域作為觸發(fā)區(qū)域饮戳。顏色下拉控件應(yīng)該有允許用戶輸入的地方，這樣用戶就可以更加方便直觀的輸入品牌色或其他需求洞拨；對(duì)于自定義設(shè)置扯罐，可提供一部分色卡，這樣對(duì)于不知如何下手烦衣、不知如何搭配顏色的人而言歹河，提供了簡(jiǎn)單的選擇。
關(guān)于下拉搜索
下拉搜索有兩種情況花吟，下拉單選和下拉多選的情況秸歧。
·在單選情況下，我們將搜索放在了原有的框體內(nèi)衅澈，流程如下：用戶輸入關(guān)鍵字>實(shí)時(shí)匹配檢索出選項(xiàng)>用戶點(diǎn)擊選項(xiàng)>完成操作键菱。
·在多選的情況下，由于是多選操作今布，我們將搜索框放在下拉菜單內(nèi)经备，這樣就不影響原有框體承載選項(xiàng)的問(wèn)題。
但是該模式極大的復(fù)雜了控件及用戶的交互行為部默。同樣我們還需要考慮在該檢索的關(guān)鍵字下侵蒙，會(huì)產(chǎn)生用戶想要的多個(gè)結(jié)果嗎？
例如添加公司人員傅蹂，通過(guò)關(guān)鍵字的檢索蘑志，基本是鎖定單一人員，所以通過(guò)關(guān)鍵字來(lái)檢索進(jìn)行多選的概率較低贬派，自然可采用如下方案：
