本文主要講解的是級聯(lián)組件、數(shù)字輸入、單復(fù)選框和開關(guān)，一起來文中看看~

cascade級聯(lián)組件

定義：存在父子層級關(guān)系的選擇枚舉組件。

使用場景：

1. 用于含有層級關(guān)系的枚舉組件，例如：省市、組織架構(gòu)、不同導(dǎo)航層級等；
2. 點擊激活選擇框，出現(xiàn)級聯(lián)選擇浮層。

例如：boss直聘首頁搜索，前置公司所在城市，點擊城市出現(xiàn)城市選擇組件，鼠標(biāo)hover出現(xiàn)下級選項。

基礎(chǔ)樣式：只能選擇枚舉，不支持在選擇框中進行關(guān)鍵詞搜索，且為單選。用戶選擇選項后，浮層收起，表單為完成態(tài)。

存在下級菜單的選項會出現(xiàn)右箭頭，提示用戶含有下一級選項，鼠標(biāo)hover出現(xiàn)下一級選項。

清空樣式：用戶可以使用空選項填寫表單，防止用戶輸入數(shù)據(jù)后沒法取消所輸入的數(shù)據(jù)。

激活，出現(xiàn)第一級的級聯(lián)浮層，如果存在下一級則對應(yīng)選項出現(xiàn)右箭頭，hover出現(xiàn)下一級選項。含有清空選項的枚舉項，選擇清空則數(shù)據(jù)為空提交。

含有搜索樣式（可選擇空選項）：可通過搜索快速查詢到所需要到枚舉項。輸入關(guān)鍵詞，出現(xiàn)的下拉選擇以路徑的形式展示，匹配關(guān)鍵詞高亮。

inputnumber數(shù)字輸入

定義：僅允許輸入數(shù)值的組件，如果涉及到日期的話，且數(shù)值以年份日期的數(shù)據(jù)存儲，例如：今年是2018年，inputnumber工作年限為5年，則后端儲存為2013年，到了2019年數(shù)值變?yōu)?年。

使用場景：

1. 當(dāng)用戶需要輸入數(shù)值時；
2. 僅允許數(shù)字格式。

基礎(chǔ)樣式：只能輸入數(shù)值，當(dāng)輸入其他格式的時候，出現(xiàn)報錯提示，同時輸入框的輸入內(nèi)容清空。

變種樣式：含有人民幣，百分比的數(shù)值等，需要將人民幣、百分比的符號體現(xiàn)出來，這時候就要用到輸入點的樣式。

radio單選組件

定義：一組互斥的選項，僅單選。

使用場景：

1. 選項低于五個時，且為單選；
2. 和select的區(qū)別是選項全部展示出來。

例如：boss直聘填寫個人信息時，性別選擇男女時，就是一個radio單選組件。

基礎(chǔ)樣式：當(dāng)單選時，且選擇項比較少時，選擇項都展示出來，使用單選組件。

變種樣式：選項和控件合為一體，整體更直觀。

checkbox復(fù)選框

定義：對于同一組選項，可以選擇多項的組件。

使用場景：

1. 在一組可選項中進行多項選擇時；
2. 單獨使用可以表示兩種狀態(tài)之間的切換。

基礎(chǔ)樣式：多項選項需要選擇時使用。

單獨使用：單獨使用可以表示選中或非選中兩種狀態(tài)之間的切換。

switch開關(guān)

定義：用于開啟/關(guān)閉的選擇。

使用場景：

1. 需要表示開關(guān)狀態(tài)/兩種狀態(tài)之間的切換時；
2. 表示兩種相互對立的狀態(tài)間的切換。

基礎(chǔ)樣式：默認打開關(guān)閉根據(jù)業(yè)務(wù)需求決定，僅展示開關(guān)控件。

帶有文字樣式：默認打開關(guān)閉根據(jù)業(yè)務(wù)需求決定，開關(guān)控件上有文字提示該控件的狀態(tài)。

禁用樣式：不可操作，只可查看開關(guān)按鈕狀態(tài)。

相關(guān)閱讀

如何構(gòu)建Web端設(shè)計規(guī)范

設(shè)計規(guī)范 | Web端設(shè)計理念篇

設(shè)計規(guī)范 | Web端設(shè)計組件篇－反饋類

設(shè)計規(guī)范 | Web端設(shè)計組件篇－文本與選擇器

設(shè)計規(guī)范 | Web端設(shè)計組件篇－樹和日期時間選擇器

#專欄作家#

UX，微信公眾號：UEDC，人人都是產(chǎn)品經(jīng)理專欄作家。前華為ITUX交互組組長，現(xiàn)美團點評高級交互設(shè)計師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 unsplash ，基于 CC0 協(xié)議