全面的組件設計完全手冊

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

標題名稱：全面的組件設計完全手冊
當前鏈接：http://www.muchs.cn/news13/188013.html

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

廣告

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