進(jìn)階方法！可能是最全面的組件設(shè)計完全手冊

后臺系統(tǒng)中，存在大量的組件，合理的應(yīng)用是做出良好產(chǎn)品的基本功。

本文梳理了常見的「選擇」和「輸入」，也算是自己長時間產(chǎn)品設(shè)計過程中的梳理、認(rèn)知和總結(jié)，自然有不全之處，希望對大家有所幫助。

上篇：選擇

允許用戶從選項(xiàng)中進(jìn)行選擇操作，用于選擇對象或數(shù)據(jù)，偶有直接觸發(fā)行為。

常見類型

• 單選按鈕
• 復(fù)選框
• 圖標(biāo)切換
• 切換開關(guān)
• 穿梭框/列表構(gòu)造器
• 下拉菜單

一、Radio 單選按鈕

允許用戶從一組相互排斥的選項(xiàng)中選擇一個。通常，將一個選項(xiàng)定義為默認(rèn)選擇。

1. 外觀形式

常規(guī)：

分段控件（選項(xiàng)卡）：

若在單個選項(xiàng)下，存在多組互斥選項(xiàng)，且互斥選項(xiàng)組之間存在一定關(guān)系，可以考慮混用分段控件和常規(guī)按鈕一起使用，因分段控件在視覺上占用更大的面積，且給人在層級上更加置前。

2. 最佳做法

單選按鈕總是以多個（>1）出現(xiàn)，且每個選項(xiàng)都默認(rèn)直觀可見，并在一定情況下需要更多的展示空間。 當(dāng)只有一個選項(xiàng)或僅僅有兩個相互排斥的選項(xiàng)，請考慮單個復(fù)選框或切換開關(guān)等其他非互斥的選擇控件；若當(dāng)前選項(xiàng)過多時，且在有限的屏幕空間下，請考慮使用下拉菜單或列表框。

由于互斥原因，所有選項(xiàng)間避免重疊。例如：0-20和20-40。

以某種邏輯關(guān)系或順序（如按時間順序排列、重要順序等）對選項(xiàng)進(jìn)行上下或左右排列。

使一個單選選項(xiàng)為默認(rèn)值，該選項(xiàng)最好是大多數(shù)人會選擇的或者你希望用戶選擇的。但在極少數(shù)情況下，預(yù)選可能會導(dǎo)致不正確假設(shè)。例如，涉及性別、政治、宗教信仰等，這些情況下可以不提供默認(rèn)選項(xiàng)。

標(biāo)簽文本應(yīng)該簡明扼要，并提供上下文，以便用戶能夠快速理解并做出選擇。

為了可讀性，請將單選按鈕標(biāo)簽文本保留為單行。

不要在選項(xiàng)末尾使用符合。例如，逗號、分號或句號。

將單選按鈕圖標(biāo)和文本包含在一起，共為點(diǎn)擊區(qū)域，以便用戶操作。

將多個單選按鈕并排放置時，請通過明顯的間距使其容易區(qū)分。一般做法，文本與自身按鈕的距離假設(shè)為X，那么該文本與下一個按鈕的距離為≥2X。

在用戶與單選按鈕交互時，請?zhí)峁┝己靡曈X反饋，且按鈕本身狀態(tài)提供良好的能供性（默認(rèn)、懸停、選中和禁用）。

二、Checkbox 復(fù)選框

允許用戶從非互斥的選項(xiàng)中，選擇任意數(shù)量的選項(xiàng)（零個、一個或多個）。單個使用時，復(fù)選框提供了兩個互斥（二元）的操作選項(xiàng)。

1. 外觀形式

常規(guī)：

全選操作（未全選狀態(tài)）：

2. 最佳做法

復(fù)選框用于表示狀態(tài)的標(biāo)記，不會直接導(dǎo)致命令的觸發(fā)，需要最終和命令按鈕（如提交、確定等）操作配合，若是直接觸發(fā)請改用切換開關(guān)（切換開關(guān)并非絕對情況下都是直接觸發(fā)命令操作）；若復(fù)選選項(xiàng)過多時，且有限的屏幕空間下，請考慮使用復(fù)選列表框。

如果只有一個復(fù)選框，您可以根據(jù)表單格式選擇使用標(biāo)簽、文本或組合；如果有多個復(fù)選框，標(biāo)簽將描述整個復(fù)選框，而文本則是表述各自的選項(xiàng)。

標(biāo)簽文本應(yīng)該簡明扼要，并提供上下文，以便用戶能夠快速理解并做出選擇。

標(biāo)簽文本使用正面肯定的措辭，以便用戶清楚的知道打開復(fù)選框?qū)l(fā)生什么。避免使用否定的表達(dá)，例如 「同意條款」 而不是 「不同意條款」 或是 「打開通知」 而不是 「關(guān)閉通知」 等等。

為了可讀性，請將復(fù)選框標(biāo)簽文本保留為單行。

不要在選項(xiàng)末尾使用符合（例如逗號、分號或句號）。

將復(fù)選框按鈕圖標(biāo)和文本包含在一起，共為點(diǎn)擊區(qū)域，以便用戶操作。注意：由于觸摸/點(diǎn)擊區(qū)域不包含標(biāo)簽，因此單擊此標(biāo)簽將不會切換復(fù)選框狀態(tài)。

將多個復(fù)選框并排放置時，請通過明顯的間距使其容易區(qū)分。一般做法，文本與自身按鈕的距離假設(shè)為X，那么該文本與下一個按鈕的距離為≥2X。

在用戶與復(fù)選框交互時，請?zhí)峁┝己靡曈X反饋，且按鈕本身狀態(tài)提供良好的能供性（默認(rèn)、懸停、選中、禁用和未全選狀態(tài)）。

3. 討論：僅有兩個互斥的選項(xiàng)（二元）是選擇單選按鈕還是復(fù)選框？

具體是要看場景和習(xí)慣用法。

復(fù)選框和單選按鈕之間的主要差別是：單選按鈕給人更加直接的示意，例如開啟關(guān)閉，而復(fù)選

只表達(dá)一面信息，因此它的反面信息并不是非常直觀，甚至對于某些用戶而言，并不清楚勾選和不勾選所表達(dá)的含義。

習(xí)慣用法是遵循互聯(lián)網(wǎng)產(chǎn)品中的一些默認(rèn)處理方式，例如，注冊中的同意條款就是使用復(fù)選框。

三、Icon button 圖標(biāo)按鈕

圖標(biāo)按鈕可以說是結(jié)合了單選按鈕、復(fù)選框及命令控件的變形形式，性質(zhì)上存在互斥（單選）和非互斥（多選）。

1. 外觀形式

文檔編輯（Word及富文本編輯器）可以說是圖標(biāo)按鈕使用的最佳案例，不僅滿足多種操作的需求，且節(jié)省空間。

排列方式也是圖標(biāo)按鈕的常見用法。

2. 最佳做法

• 在用戶與圖標(biāo)按鈕交互時，請?zhí)峁┝己靡曈X反饋，且按鈕本身狀態(tài)提供良好的能供性（默認(rèn)、懸停、選中和禁用）。
• 請確保圖標(biāo)的含義明確，并配合 tips 提示給予幫助。

四、 Switch 切換開關(guān)

用于打開或關(guān)閉二元操作的切換選項(xiàng)。

1. 外觀形式

常規(guī)：

帶文本或圖標(biāo)：

2. 最佳做法

• 左/灰為關(guān)，右/彩為開。
• 切換開關(guān)可包括文本或圖標(biāo)，例如「開/on」和「關(guān)/off」標(biāo)簽，但不建議標(biāo)簽過長，如果標(biāo)簽太長請考慮使用其他互斥的選擇控件。
• 切換狀態(tài)中請使用微動畫進(jìn)行過渡，而不是生硬的呈現(xiàn)。
• 在用戶與切換開關(guān)交互時，請?zhí)峁┝己靡曈X反饋，且切換開關(guān)本身狀態(tài)提供良好的能供性（關(guān)閉、開啟、禁用）。

3. 討論：切換開關(guān)在用戶更改后立即觸發(fā)命令執(zhí)行？

此說法并非絕對。

在 B端產(chǎn)品及某些重要情況下，觸發(fā)開關(guān)操作依然需要用戶再次確定才會真正觸發(fā)執(zhí)行。

五、Transfer 穿梭框/列表構(gòu)造器

在同一頁面上顯示 「源」 列表和 「目的」 列表，通過使用按鈕或拖拽，直觀的在兩欄之間移動元素，完成選擇行為。

1. 外觀形式

常規(guī)：

帶搜索，在操作者對選項(xiàng)比較熟知情況下（例如，公司員工），搜索可以快速查找到想要的選項(xiàng)。

2. 最佳做法

行為上穿梭框是一種復(fù)雜、較難認(rèn)知的一種控件模式，且占用大量的屏幕空間，源選項(xiàng)較少的情況下復(fù)選列表框則是一種更為簡單的替代方案。但是如果源列表選項(xiàng)過多，又想讓被選中的選項(xiàng)更容易被看到，穿梭框則是不錯的選擇。

對于大量的可選項(xiàng)，從易用性角度考慮，可以按照選項(xiàng)常用程度、重要性、字母等進(jìn)行排列或提供搜索（實(shí)時搜索），從而便于用戶進(jìn)行快速選擇。

列表提供全選和多選操作，以便用戶能夠在列表間移動大量選項(xiàng)。

實(shí)時顯示當(dāng)前被選中列表/ 「源」 列表的數(shù)量比及 「目的」 列表的數(shù)量。

若列表框內(nèi)容大于視窗高度，列表框的高度為：N列表+?列表。

六、Dropdowns 下拉（彈出）菜單

觸發(fā)操作（點(diǎn)擊或移入觸點(diǎn)），會出現(xiàn)一個非模態(tài)彈框。允許用戶從集合中進(jìn)行選擇或執(zhí)行相應(yīng)的命令。下拉菜單將多種集合進(jìn)行了封裝，只有在用戶需要的時候才顯示出來（按需顯示），具有節(jié)省頁面空間及簡化當(dāng)前頁面等優(yōu)點(diǎn)。

1. 外觀形式

下拉菜單。依次為常規(guī)、分類、帶搜索、多選

執(zhí)行命令，例如系統(tǒng)導(dǎo)航菜單、表格操作等

級聯(lián)

樹形（單選、多選）

操作（刪除、添加等）

上下文菜單。例如，常見的右鍵操作及文本選擇命令（如剪切、復(fù)制和粘貼等）

下拉選擇器。多適用于顏色、日歷（日月年）、日期、時間等內(nèi)容

2. 最佳做法

在較小的空間下，對多個選項(xiàng)進(jìn)行選擇或內(nèi)容較為次要且不需要一直顯示，下拉菜單是不錯的選擇。若選項(xiàng)較少，請考慮使用單選框（當(dāng)進(jìn)行單項(xiàng)選擇時）或復(fù)選框（當(dāng)進(jìn)行多項(xiàng)選擇時）。

下拉菜單選項(xiàng)按照某種邏輯順序排序。例如，按照重要程度或被選擇程度（可能性）進(jìn)行排列。

對于大多數(shù)操作，當(dāng)單擊菜單或以外區(qū)域，菜單應(yīng)該收起關(guān)閉；如果點(diǎn)擊的菜單項(xiàng)是多選操作，則菜單應(yīng)保持打開狀態(tài)。

禁用菜單項(xiàng)，而不是隱藏，以提高功能的可發(fā)現(xiàn)性。

與搜索匹配的關(guān)鍵字給予高亮顯示。

下拉菜單文本保持簡潔扼要，文本內(nèi)容限制為單行。

請根據(jù)具體情況，定義列表項(xiàng)的最小和最大寬度，以適應(yīng)其內(nèi)容。超出最大寬度從末尾截斷，并添加省略號，鼠標(biāo)懸停顯示全部文本內(nèi)容。

如果沒有預(yù)先選擇，請使用占位符（灰色文本）進(jìn)行操作提示。例如：請選擇。如果需要指出所有項(xiàng)目都適用，例如，作為列表過濾器，請將「全部」 作為選項(xiàng)，并將其放置在列表的開頭。

若下拉列表內(nèi)容大于視窗高度，下拉列表的高度為：N列表+?列表。

若需要兼容IE8，下拉框除了陰影效果（IE8沒有陰影），還要做1-2px的線框描邊。

上下文菜單的選項(xiàng)根據(jù)當(dāng)前對象或情景進(jìn)行配置。

下拉選擇器多適用于顏色、日歷、日期、時間等內(nèi)容，若不可輸入請將整個區(qū)域作為觸發(fā)區(qū)域。顏色下拉控件應(yīng)該有允許用戶輸入的地方，這樣用戶就可以更加方便直觀的輸入品牌色或其他需求；對于自定義設(shè)置，可提供一部分色卡，這樣對于不知如何下手、不知如何搭配顏色的人而言，提供了簡單的選擇。

3. 關(guān)于下拉搜索？

下拉搜索有兩種情況，下拉單選和下拉多選的情況。

在單選情況下，我們將搜索放在了原有的框體內(nèi)，流程如下：用戶輸入關(guān)鍵字>實(shí)時匹配檢索出選項(xiàng)>用戶點(diǎn)擊選項(xiàng)>完成操作。

但在多選的情況下，由于是多選操作，我們將搜索框放在下拉菜單內(nèi)，這樣就不影響原有框體承載選項(xiàng)的問題。

但是該模式極大的復(fù)雜了控件及用戶的交互行為。同樣我們還需要考慮在該檢索的關(guān)鍵字下，會產(chǎn)生用戶想要的多個結(jié)果嗎？

例如添加公司人員，通過關(guān)鍵字的檢索，基本是鎖定單一人員，所以通過關(guān)鍵字來檢索進(jìn)行多選的概率較低，自然可采用如下方案：

下篇：輸入

允許用戶在應(yīng)用中輸入信息。

常見類型

• 輸入框
• 步進(jìn)器/微調(diào)器
• 滑塊

一、Input 輸入框

允許用戶輸入和編輯文本的區(qū)域。

1. 外觀形式

單行文本框，用于輸入少量的文本。

多行文本，用于輸入長字符串，多行文本區(qū)域顯示。

富文本，允許使用附加的格式、內(nèi)聯(lián)圖像/鏈接等文本輸入。

2. 最佳做法

容錯格式，允許用戶輸入多種格式，并智能的處理從而滿足程序的數(shù)據(jù)要求。例如電話輸入，允許用戶輸入空格和 —，系統(tǒng)后臺自動清理數(shù)據(jù)以滿足格式要求，而不是報錯提示。

對于簡短、固定的單行輸入可采用結(jié)構(gòu)化格式，通過潛在的限制使輸入的字符數(shù)量、類型不易出錯，并使用戶能夠直觀的看到輸入格式。例如銀行卡號、身份證、時間等信息。

掩碼，對于重要的私人信息或數(shù)據(jù)應(yīng)該給予掩碼保護(hù)。例如密碼、電話及身份證等信息，也分為全部掩碼及部分掩碼。對于密碼輸入可提供「查看」操作，以便用戶確認(rèn)。

對于搜索操作的文本框，可提供清空快捷操作，從而方便用戶快速更換關(guān)鍵詞。

標(biāo)簽起到了向用戶指示所要輸入的內(nèi)容的作用。輸入框的標(biāo)簽，應(yīng)使用名詞或簡潔的名詞短語，放置在輸入框的左邊或上邊。

占位符不可替代標(biāo)簽，占位符會在用戶輸入字符后消失。占位符的功能是通過一個簡短的提示來幫助用戶輸入數(shù)據(jù)。提示可以是示例值或?qū)︻A(yù)期格式的簡要描述。占位符的顏色使用較淺的色值，以避免給人默認(rèn)值的誤導(dǎo)。

幫助文字用于為填寫提供更多的上下文背景或指導(dǎo)。常見的形式有：默認(rèn)顯示，鍵入顯示，懸?；螯c(diǎn)擊顯示。

必填，指示用戶必選填寫的內(nèi)容。在標(biāo)簽?zāi)┪诧@示一個紅色的「*」星號，或者使用文本表達(dá)，如果整個表單都是必填則無需標(biāo)識。

若輸入?yún)^(qū)域設(shè)置了字符或字?jǐn)?shù)限制，應(yīng)給予一定的提示說明，當(dāng)用戶輸入不規(guī)范的字符或超出字?jǐn)?shù)限制時應(yīng)給予清除。例如記數(shù)器，在用戶輸入每個字符時動態(tài)更新。

輸入驗(yàn)證分為主動驗(yàn)證和被動驗(yàn)證兩種：

• 主動驗(yàn)證在用戶輸入的過程中就進(jìn)行了驗(yàn)證。例如只接受數(shù)字的輸入框，在輸入字符或特殊符號時會被主動清除，且給予提示說明，告知用戶信息的輸入要求或規(guī)則。
• 被動驗(yàn)證在鍵出（失去焦點(diǎn)）時或命令操作（例如提交）后才進(jìn)行驗(yàn)證操作。

對于錯誤提示最好的方式是放在控件旁邊進(jìn)行提示，這樣用戶可快速進(jìn)行定位更正。關(guān)于錯誤提示文本，應(yīng)該給予用戶解決問題的方法和指導(dǎo)而不是僅僅告訴用戶發(fā)生了錯誤（例如密碼錯誤，而是提示請輸入6位以上字符），且文本在正確詳細(xì)的情況下保持簡短易讀，且避免機(jī)器用語。下圖是常見錯誤提示位置：

用戶與輸入框交互時，請?zhí)峁┝己玫囊曈X反饋，且輸入框本身狀態(tài)提供良好的能供性（常規(guī)有：默認(rèn)、懸停、鍵入和禁用；驗(yàn)證狀態(tài)有：提醒、報錯和成功）。

對于多行文本可根據(jù)需求提供改變區(qū)域的操作，以顯示更多內(nèi)容。分為手動和自動兩種，具體選擇需要根據(jù)空間布局，內(nèi)容要求進(jìn)行決擇，手動給予用戶更大的自由度，自動則在根據(jù)內(nèi)容實(shí)際所需。

• 拖拽控件：只改變高度和高度寬度均可調(diào)整兩種。在外觀和功能上是均有區(qū)別，請正確使用請勿混用，以提供符合預(yù)期及認(rèn)知的模式，且設(shè)定最大范圍。
• 輸入框自動增長（根據(jù)輸入內(nèi)容進(jìn)行高度變化），只可改變輸入框高度，請設(shè)定最大高度。

對于輸入框請設(shè)置合理的內(nèi)邊距。貼合邊框的文本會導(dǎo)致視覺讀取困難，且給人簡陋之感。

二、Stepper 步進(jìn)器/微調(diào)器

以微小的浮動改變數(shù)值，步進(jìn)器包括一個輸入?yún)^(qū)域、增加和減少按鈕。

1. 外觀形式

2. 最佳做法

步進(jìn)器用于需要微調(diào)數(shù)字值的情況，且輸入值有大小范圍的限制及字符限制需求。

步進(jìn)器默認(rèn)始終包含一個值，默認(rèn)值為一般用戶普遍設(shè)置的、你希望用戶選擇最佳值或較為安全的數(shù)值（例如最小值）。

允許通過點(diǎn)擊增加/減少按鈕，鍵入數(shù)字，使用鍵盤快捷鍵（上/下，頁面上/下）改變數(shù)值。

為步進(jìn)器設(shè)置最大和最小值。達(dá)到最大/最小值時，增加/減少按鈕和上/下鍵盤將被禁用。

用戶與步進(jìn)器交互時，請?zhí)峁┝己玫囊曈X反饋。增加/減少按給予默認(rèn)、懸停、選中和禁用狀態(tài)，輸入?yún)^(qū)域給予默認(rèn)、鍵入和報錯狀態(tài)。

請設(shè)置輸入?yún)^(qū)域的字符限制。一般為0-9和-，+字符，若不允許負(fù)值，那就只可輸入0-9。當(dāng)輸入不規(guī)范的字符時清除或顯示最小值，輸入的值超過最大值則顯示為最大值，并顯示工具提示說明輸入范圍。

問題：當(dāng)用戶輸入不合格的值，再未鍵出的情況下滑出步進(jìn)器的視圖區(qū)域點(diǎn)擊保存，如何更好的提示報錯？

滑到錯誤提示區(qū)域并提示錯誤信息。

三、Slider 滑塊

從一個范圍值中進(jìn)行滑動選擇的控件。通常由一條水平線（水平或垂直）、可移動手柄和標(biāo)簽（有滑塊標(biāo)簽、范圍標(biāo)簽、值標(biāo)簽）組成。

1. 外觀形式

單滑塊，選擇單一的值

雙滑塊，用于選擇值的范圍

分段式，不允許選擇任意值，默認(rèn)貼靠分段的值

垂直和水平，根據(jù)值的特點(diǎn)及頁面情況更加合適的布局

圖標(biāo)數(shù)值文本

帶有輸入框，可輸入文本字段，輸入數(shù)據(jù)與滑塊同步

2. 最佳做法

當(dāng)用戶設(shè)置連續(xù)值（如音量或亮度）或一系列離散值（如屏幕分辨率設(shè)置）時，可使用滑塊。

滑塊是一種有界的選擇或輸入控件，其范圍和選擇數(shù)值的位置均得到了可視化的呈現(xiàn)。根據(jù)具體的使用情景我們將滑塊細(xì)分為：單滑塊（單值）、雙滑塊（可選擇范圍）、分段式滑塊（非范圍內(nèi)的任意值）和帶輸入框滑塊（和輸入控件保持同步），以及相應(yīng)的水平或垂直方向。對于書寫及閱讀習(xí)慣從左向右的人群而言，值的范圍一般為左小右大，上大下小。

如果你不允許滑塊選取任意值，請使用分段的步驟點(diǎn)。

如果滑塊可編輯，當(dāng)鼠標(biāo)懸停在手柄上時，手柄高亮顯示，并出現(xiàn)手型光標(biāo)。

允許用戶使用拖拽和點(diǎn)擊改變手柄的位置。

在某些情況下，滑塊直接充當(dāng)為命令控件，在用戶選擇時或選擇后，操作結(jié)果即時生效。 例如音量控件。

當(dāng)滑塊上沒有其實(shí)時顯示滑塊值的地方時，請使用值標(biāo)簽顯示滑塊的當(dāng)前值。

希望對各位有所幫助，遇到問題時可以翻來看看。

歡迎關(guān)注作者的微信公眾號：「int-PD」

圖片素材作者：Berin Catic

「三篇好文幫你打造優(yōu)秀的后臺設(shè)計」

• 《可能是最詳細(xì)的表格設(shè)計完全手冊！》
• 《實(shí)戰(zhàn)經(jīng)驗(yàn)！如何做好網(wǎng)頁后臺的表單和表格設(shè)計？》
• 《如何打造具有安全感的后臺產(chǎn)品體驗(yàn)？來看阿里設(shè)計師的總結(jié)！》