全面的組件設(shè)計完全手冊

后臺系統(tǒng)中，存在大量的組件，合理的應(yīng)用是做出良好產(chǎn)品的基本功。 本文梳理了常見的「選擇」和「輸入」，也算是自己長時間產(chǎn)品設(shè)計過程中的梳理、認(rèn)知和總結(jié)，自然有不全之處，希望對大家有所幫助。 上篇：選擇 允許用戶從選項中進(jìn)行選擇操作，用于選擇對象或數(shù)據(jù)，偶有直接觸發(fā)行為。 常見類型 單選按鈕 復(fù)選框 圖標(biāo)切換 切換開關(guān) 穿梭框/列表構(gòu)造器 下拉菜單
一、Radio 單選按鈕 允許用戶從一組相互排斥的選項中選擇一個。通常，將一個選項定義為默認(rèn)選擇。
1. 外觀形式 常規(guī)： 分段控件（選項卡）： 若在單個選項下，存在多組互斥選項，且互斥選項組之間存在一定關(guān)系，可以考慮混用分段控件和常規(guī)按鈕一起使用，因分段控件在視覺上占用更大的面積，且給人在層級上更加置前。
2. 好做法 單選按鈕總是以多個（>1）出現(xiàn)，且每個選項都默認(rèn)直觀可見，并在一定情況下需要更多的展示空間。 當(dāng)只有一個選項或僅僅有兩個相互排斥的選項，請考慮單個復(fù)選框或切換開關(guān)等其他非互斥的選擇控件；若當(dāng)前選項過多時，且在有限的屏幕空間下，請考慮使用下拉菜單或列表框。 由于互斥原因，所有選項間避免重疊。例如：0-20和20-40。 以某種邏輯關(guān)系或順序（如按時間順序排列、重要順序等）對選項進(jìn)行上下或左右排列。 使一個單選選項為默認(rèn)值，該選項是大多數(shù)人會選擇的或者你希望用戶選擇的。但在極少數(shù)情況下，預(yù)選可能會導(dǎo)致不正確假設(shè)。例如，涉及性別、政治、宗教信仰等，這些情況下可以不提供默認(rèn)選項。 標(biāo)簽文本應(yīng)該簡明扼要，并提供上下文，以便用戶能夠快速理解并做出選擇。 為了可讀性，請將單選按鈕標(biāo)簽文本保留為單行。 不要在選項末尾使用符合。例如，逗號、分號或句號。 將單選按鈕圖標(biāo)和文本包含在一起，共為點擊區(qū)域，以便用戶操作。 將多個單選按鈕并排放置時，請通過明顯的間距使其容易區(qū)分。一般做法，文本與自身按鈕的距離假設(shè)為X，那么該文本與下一個按鈕的距離為≥2X。 在用戶與單選按鈕交互時，請?zhí)峁┝己靡曈X反饋，且按鈕本身狀態(tài)提供良好的能供性（默認(rèn)、懸停、選中和禁用）。
二、Checkbox 復(fù)選框 允許用戶從非互斥的選項中，選擇任意數(shù)量的選項（零個、一個或多個）。單個使用時，復(fù)選框提供了兩個互斥（二元）的操作選項。
1. 外觀形式 常規(guī)： 全選操作（未全選狀態(tài)）：
2. 好做法 復(fù)選框用于表示狀態(tài)的標(biāo)記，不會直接導(dǎo)致命令的觸發(fā)，需要最終和命令按鈕（如提交、確定等）操作配合，若是直接觸發(fā)請改用切換開關(guān)（切換開關(guān)并非絕對情況下都是直接觸發(fā)命令操作）；若復(fù)選選項過多時，且有限的屏幕空間下，請考慮使用復(fù)選列表框。 如果只有一個復(fù)選框，您可以根據(jù)表單格式選擇使用標(biāo)簽、文本或組合；如果有多個復(fù)選框，標(biāo)簽將描述整個復(fù)選框，而文本則是表述各自的選項。 標(biāo)簽文本應(yīng)該簡明扼要，并提供上下文，以便用戶能夠快速理解并做出選擇。 標(biāo)簽文本使用正面肯定的措辭，以便用戶清楚的知道打開復(fù)選框?qū)l(fā)生什么。避免使用否定的表達(dá)，例如 「同意條款」 而不是 「不同意條款」 或是 「打開通知」 而不是 「關(guān)閉通知」 等等。 為了可讀性，請將復(fù)選框標(biāo)簽文本保留為單行。 不要在選項末尾使用符合（例如逗號、分號或句號）。 將復(fù)選框按鈕圖標(biāo)和文本包含在一起，共為點擊區(qū)域，以便用戶操作。注意：由于觸摸/點擊區(qū)域不包含標(biāo)簽，因此單擊此標(biāo)簽將不會切換復(fù)選框狀態(tài)。 將多個復(fù)選框并排放置時，請通過明顯的間距使其容易區(qū)分。一般做法，文本與自身按鈕的距離假設(shè)為X，那么該文本與下一個按鈕的距離為≥2X。 在用戶與復(fù)選框交互時，請?zhí)峁┝己靡曈X反饋，且按鈕本身狀態(tài)提供良好的能供性（默認(rèn)、懸停、選中、禁用和未全選狀態(tài)）。
3. 討論：僅有兩個互斥的選項（二元）是選擇單選按鈕還是復(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)閉二元操作的切換選項。
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ī)： 帶搜索，在操作者對選項比較熟知情況下（例如，公司員工），搜索可以快速查找到想要的選項。
2. 好做法 行為上穿梭框是一種復(fù)雜、較難認(rèn)知的一種控件模式，且占用大量的屏幕空間，源選項較少的情況下復(fù)選列表框則是一種更為簡單的替代方案。但是如果源列表選項過多，又想讓被選中的選項更容易被看到，穿梭框則是不錯的選擇。 對于大量的可選項，從易用性角度考慮，可以按照選項常用程度、重要性、字母等進(jìn)行排列或提供搜索（實時搜索），從而便于用戶進(jìn)行快速選擇。 列表提供全選和多選操作，以便用戶能夠在列表間移動大量選項。 實時顯示當(dāng)前被選中列表/ 「源」 列表的數(shù)量比及 「目的」 列表的數(shù)量。 若列表框內(nèi)容大于視窗高度，列表框的高度為：N列表+?列表。
六、Dropdowns 下拉（彈出）菜單 觸發(fā)操作（點擊或移入觸點），會出現(xiàn)一個非模態(tài)彈框。允許用戶從集合中進(jìn)行選擇或執(zhí)行相應(yīng)的命令。下拉菜單將多種集合進(jìn)行了封裝，只有在用戶需要的時候才顯示出來（按需顯示），具有節(jié)省頁面空間及簡化當(dāng)前頁面等優(yōu)點。
1. 外觀形式 下拉菜單。依次為常規(guī)、分類、帶搜索、多選 執(zhí)行命令，例如系統(tǒng)導(dǎo)航菜單、表格操作等 級聯(lián) 樹形（單選、多選） 操作（刪除、添加等） 上下文菜單。例如，常見的右鍵操作及文本選擇命令（如剪切、復(fù)制和粘貼等） 下拉選擇器。多適用于顏色、日歷（日月年）、日期、時間等內(nèi)容
2. 好做法 在較小的空間下，對多個選項進(jìn)行選擇或內(nèi)容較為次要且不需要一直顯示，下拉菜單是不錯的選擇。若選項較少，請考慮使用單選框（當(dāng)進(jìn)行單項選擇時）或復(fù)選框（當(dāng)進(jìn)行多項選擇時）。 下拉菜單選項按照某種邏輯順序排序。例如，按照重要程度或被選擇程度（可能性）進(jìn)行排列。 對于大多數(shù)操作，當(dāng)單擊菜單或以外區(qū)域，菜單應(yīng)該收起關(guān)閉；如果點擊的菜單項是多選操作，則菜單應(yīng)保持打開狀態(tài)。 禁用菜單項，而不是隱藏，以提高功能的可發(fā)現(xiàn)性。 與搜索匹配的關(guān)鍵字給予高亮顯示。 下拉菜單文本保持簡潔扼要，文本內(nèi)容限制為單行。 請根據(jù)具體情況，定義列表項的最小和大寬度，以適應(yīng)其內(nèi)容。超出大寬度從末尾截斷，并添加省略號，鼠標(biāo)懸停顯示全部文本內(nèi)容。 如果沒有預(yù)先選擇，請使用占位符（灰色文本）進(jìn)行操作提示。例如：請選擇。如果需要指出所有項目都適用，例如，作為列表過濾器，請將「全部」 作為選項，并將其放置在列表的開頭。 若下拉列表內(nèi)容大于視窗高度，下拉列表的高度為：N列表+?列表。 若需要兼容IE8，下拉框除了陰影效果（IE8沒有陰影），還要做1-2px的線框描邊。 上下文菜單的選項根據(jù)當(dāng)前對象或情景進(jìn)行配置。 下拉選擇器多適用于顏色、日歷、日期、時間等內(nèi)容，若不可輸入請將整個區(qū)域作為觸發(fā)區(qū)域。顏色下拉控件應(yīng)該有允許用戶輸入的地方，這樣用戶就可以更加方便直觀的輸入品牌色或其他需求；對于自定義設(shè)置，可提供一部分色卡，這樣對于不知如何下手、不知如何搭配顏色的人而言，提供了簡單的選擇。
3. 關(guān)于下拉搜索？ 下拉搜索有兩種情況，下拉單選和下拉多選的情況。 在單選情況下，我們將搜索放在了原有的框體內(nèi)，流程如下：用戶輸入關(guān)鍵字>實時匹配檢索出選項>用戶點擊選項>完成操作。 但在多選的情況下，由于是多選操作，我們將搜索框放在下拉菜單內(nèi)，這樣就不影響原有框體承載選項的問題。 但是該模式極大的復(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擊顯示。 必填，指示用戶必選填寫的內(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)更新。 輸入驗證分為主動驗證和被動驗證兩種： 主動驗證在用戶輸入的過程中就進(jìn)行了驗證。例如只接受數(shù)字的輸入框，在輸入字符或特殊符號時會被主動清除，且給予提示說明，告知用戶信息的輸入要求或規(guī)則。 被動驗證在鍵出（失去焦點）時或命令操作（例如提交）后才進(jìn)行驗證操作。 對于錯誤提示的方式是放在控件旁邊進(jìn)行提示，這樣用戶可快速進(jìn)行定位更正。關(guān)于錯誤提示文本，應(yīng)該給予用戶解決問題的方法和指導(dǎo)而不是僅僅告訴用戶發(fā)生了錯誤（例如密碼錯誤，而是提示請輸入6位以上字符），且文本在正確詳細(xì)的情況下保持簡短易讀，且避免機(jī)器用語。下圖是常見錯誤提示位置： 用戶與輸入框交互時，請?zhí)峁┝己玫囊曈X反饋，且輸入框本身狀態(tài)提供良好的能供性（常規(guī)有：默認(rèn)、懸停、鍵入和禁用；驗證狀態(tài)有：提醒、報錯和成功）。 對于多行文本可根據(jù)需求提供改變區(qū)域的操作，以顯示更多內(nèi)容。分為手動和自動兩種，具體選擇需要根據(jù)空間布局，內(nèi)容要求進(jìn)行決擇，手動給予用戶更大的自由度，自動則在根據(jù)內(nèi)容實際所需。 拖拽控件：只改變高度和高度寬度均可調(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ù)值（例如最小值）。 允許通過點擊增加/減少按鈕，鍵入數(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ū)域點擊保存，如何更好的提示報錯？ 滑到錯誤提示區(qū)域并提示錯誤信息。
三、Slider 滑塊 從一個范圍值中進(jìn)行滑動選擇的控件。通常由一條水平線（水平或垂直）、可移動手柄和標(biāo)簽（有滑塊標(biāo)簽、范圍標(biāo)簽、值標(biāo)簽）組成。
1. 外觀形式 單滑塊，選擇單一的值 雙滑塊，用于選擇值的范圍 分段式，不允許選擇任意值，默認(rèn)貼靠分段的值 垂直和水平，根據(jù)值的特點及頁面情況更加合適的布局 圖標(biāo)數(shù)值文本 帶有輸入框，可輸入文本字段，輸入數(shù)據(jù)與滑塊同步
2. 好做法 當(dāng)用戶設(shè)置連續(xù)值（如音量或亮度）或一系列離散值（如屏幕分辨率設(shè)置）時，可使用滑塊。 滑塊是一種有界的選擇或輸入控件，其范圍和選擇數(shù)值的位置均得到了可視化的呈現(xiàn)。根據(jù)具體的使用情景我們將滑塊細(xì)分為：單滑塊（單值）、雙滑塊（可選擇范圍）、分段式滑塊（非范圍內(nèi)的任意值）和帶輸入框滑塊（和輸入控件保持同步），以及相應(yīng)的水平或垂直方向。對于書寫及閱讀習(xí)慣從左向右的人群而言，值的范圍一般為左小右大，上大下小。 如果你不允許滑塊選取任意值，請使用分段的步驟點。 如果滑塊可編輯，當(dāng)鼠標(biāo)懸停在手柄上時，手柄高亮顯示，并出現(xiàn)手型光標(biāo)。 允許用戶使用拖拽和點擊改變手柄的位置。 在某些情況下，滑塊直接充當(dāng)為命令控件，在用戶選擇時或選擇后，操作結(jié)果即時生效。 例如音量控件。 當(dāng)滑塊上沒有其實時顯示滑塊值的地方時，請使用值標(biāo)簽顯示滑塊的當(dāng)前值。 希望對各位有所幫助，遇到問題時可以翻來看看。

標(biāo)題名稱：全面的組件設(shè)計完全手冊
當(dāng)前鏈接：http://www.bm7419.com/news13/188013.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站制作、商城網(wǎng)站、App設(shè)計、網(wǎng)站內(nèi)鏈、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)