最近在做一個標準版中臺（就是展示配置+部分運營數據展示），做的有些吃力，剛好看到了一篇后臺系統的組件整理（https://mp.weixin.qq.com/s/tY42iiEih-F1CWat9vQlnw），趕緊做好筆記以備不時之需。
常見類型：
·單選按鈕
·復選框
·圖標切換
·切換開關
·穿梭框/列表構造器
·下拉菜單
一、單選按鈕
允許用戶從一組相互排斥的選項中選擇一個。通常，將一個選項定義為默認選擇。
外觀
常規：
分段控件：
在單個選項下，存在多組互斥選項，且互斥選項組之間存在一定關系，可以考慮混用分段控件和常規按鈕，由于分段控件在視覺上占用更大的面積，故給人在層級上更加置前。
最佳用法
·只有一個選項或僅僅有兩個相互排斥的選項，考慮單個復選框或切換開關等其他非互斥的選擇控件；若當前選項過多時，且在有限的屏幕空間下，考慮使用下拉菜單或列表框。
·默認選項最好是大多數人會選擇的/你希望用戶選擇的。但在極少數情況下，默認選項可能會不正確。例如，涉及性別、政治、宗教信仰等，這些情況下可以不提供默認選項。
·在用戶與單選按鈕交互時，請提供良好視覺反饋，且按鈕本身狀態提供良好的能供性（默認、懸停、選中和禁用）。
二、復選框
允許用戶從非互斥的選項中，選擇任意數量的選項（零個、一個或多個）
單個使用時，復選框提供了兩個互斥（二元）的操作選項。
外觀
常規：
全選操作（未全選狀態）：
最佳用法
·復選框用于表示狀態的標記，不會直接導致命令的觸發，需要最終和命令按鈕（如提交、確定等）操作配合，若是直接觸發請改用切換開關（切換開關并非絕對情況下都是直接觸發命令操作）；若復選選項過多時，且有限的屏幕空間下，請考慮使用復選列表框。
·如果只有一個復選框，可以根據表單格式選擇使用標簽、文本或組合；如果有多個復選框，標簽將描述整個復選框，而文本則是表述各自的選項。
·標簽文本使用正面肯定的措辭，以便用戶清楚的知道打開復選框將會發生什么。避免使用否定的表達，例如 「同意條款」 而不是 「不同意條款」 或是 「打開通知」 而不是 「關閉通知」 等等。
·在用戶與復選框交互時，請提供良好視覺反饋，且按鈕本身狀態提供良好的能供性（默認、懸停、選中、禁用和未全選狀態）。
討論：僅有兩個互斥的選項（二元）是選擇單選按鈕還是復選框？
具體是要看場景和習慣用法。
復選框和單選按鈕之間的主要差別是：
單選按鈕給人更加直接的示意，例如開啟關閉，而復選只表達一面信息，因此它的反面信息并不是非常直觀，甚至對于某些用戶而言，并不清楚勾選和不勾選所表達的含義。
習慣用法是遵循互聯網產品中的一些默認處理方式，例如，注冊中的同意條款就是使用復選框。
三、Icon button 圖標按鈕
圖標按鈕可以說是結合了單選按鈕、復選框及命令控件的變形形式，性質上存在互斥（單選）和非互斥（多選）。
外觀
文檔編輯（Word及富文本編輯器）可以說是圖標按鈕使用的最佳案例，不僅滿足多種操作的需求，且節省空間。
排列方式也是圖標按鈕的常見用法。
四、 Switch 切換開關
用于打開或關閉二元操作的切換選項。
外觀
常規：
帶文本或圖標：
最佳用法
·左/灰為關，右/彩為開。
·切換開關可包括文本或圖標，例如「開/on」和「關/off」標簽，但不建議標簽過長，如果標簽太長請考慮使用其他互斥的選擇控件。
·切換狀態中使用微動畫進行過渡，而不是生硬的呈現。
·在用戶與切換開關交互時，請提供良好視覺反饋，且切換開關本身狀態提供良好的能供性（關閉、開啟、禁用）。
討論：切換開關在用戶更改后立即觸發命令執行？
此說法并非絕對。
在 B端產品及某些重要情況下，觸發開關操作依然需要用戶再次確定才會真正觸發執行。
五、Transfer 穿梭框/列表構造器
在同一頁面上顯示 「源」 列表和 「目的」 列表，通過使用按鈕或拖拽，直觀的在兩欄之間移動元素，完成選擇行為。
外觀
常規：
帶搜索，在操作者對選項比較熟知情況下（例如，公司員工），搜索可以快速查找到想要的選項。
最佳用法
·行為上穿梭框是一種復雜、較難認知的一種控件模式，且占用大量的屏幕空間，源選項較少的情況下復選列表框則是一種更為簡單的替代方案。但是如果源列表選項過多，又想讓被選中的選項更容易被看到，穿梭框則是不錯的選擇。
·對于大量的可選項，從易用性角度考慮，可以按照選項常用程度、重要性、字母等進行排列或提供搜索（實時搜索），從而便于用戶進行快速選擇。
·列表提供全選和多選操作，以便用戶能夠在列表間移動大量選項。
·實時顯示當前被選中列表/ 「源」 列表的數量比及 「目的」 列表的數量。
·若列表框內容大于視窗高度，列表框的高度為：N列表+?列表。
六、Dropdowns 下拉（彈出）菜單
觸發操作（點擊或移入觸點），會出現一個非模態彈框。允許用戶從集合中進行選擇或執行相應的命令。下拉菜單將多種集合進行了封裝，只有在用戶需要的時候才顯示出來（按需顯示），具有節省頁面空間及簡化當前頁面等優點。
外觀
常規：
分類：
帶搜索：
多選：
執行命令，例如系統導航菜單、表格操作等：
級聯：
樹形（單選、多選）：
操作（刪除、添加等）：
上下文菜單，例如，常見的右鍵操作及文本選擇命令（如剪切、復制和粘貼等）：
下拉選擇器。多適用于顏色、日歷（日月年）、日期、時間等內容：
最佳用法
·在較小的空間下，對多個選項進行選擇或內容較為次要且不需要一直顯示時，下拉菜單是不錯的選擇。若選項較少，考慮使用單選框（當進行單項選擇時）或復選框（當進行多項選擇時）。
·下拉菜單選項按照某種邏輯順序排序。例如，按照重要程度或被選擇程度（可能性）進行排列。
·對于大多數操作，當單擊菜單或以外區域，菜單應該收起關閉；如果點擊的菜單項是多選操作，則菜單應保持打開狀態。
·禁用菜單項，而不是隱藏，以提高功能的可發現性。
·下拉菜單文本保持簡潔扼要，文本內容限制為單行。
·請根據具體情況，定義列表項的最小和最大寬度，以適應其內容。超出最大寬度從末尾截斷，并添加省略號，鼠標懸停顯示全部文本內容。
·如果沒有預先選擇，使用占位符（灰色文本）進行操作提示。例如：請選擇。如果需要指出所有項目都適用，例如，作為列表過濾器，請將「全部」 作為選項，并將其放置在列表的開頭。
·若下拉列表內容大于視窗高度，下拉列表的高度為：N列表+?列表。
·若需要兼容IE8，下拉框除了陰影效果（IE8沒有陰影），還要做1-2px的線框描邊。
·下拉選擇器多適用于顏色、日歷、日期、時間等內容，若不可輸入請將整個區域作為觸發區域。顏色下拉控件應該有允許用戶輸入的地方，這樣用戶就可以更加方便直觀的輸入品牌色或其他需求；對于自定義設置，可提供一部分色卡，這樣對于不知如何下手、不知如何搭配顏色的人而言，提供了簡單的選擇。
關于下拉搜索
下拉搜索有兩種情況，下拉單選和下拉多選的情況。
·在單選情況下，我們將搜索放在了原有的框體內，流程如下：用戶輸入關鍵字>實時匹配檢索出選項>用戶點擊選項>完成操作。
·在多選的情況下，由于是多選操作，我們將搜索框放在下拉菜單內，這樣就不影響原有框體承載選項的問題。
但是該模式極大的復雜了控件及用戶的交互行為。同樣我們還需要考慮在該檢索的關鍵字下，會產生用戶想要的多個結果嗎？
例如添加公司人員，通過關鍵字的檢索，基本是鎖定單一人員，所以通過關鍵字來檢索進行多選的概率較低，自然可采用如下方案：
