本文主要講解表單中的treeselect樹選擇、datepicker日期選擇器和timepicker時間選擇器。

根據(jù)組件的用途，可以分為六大類：Feedback 反饋、form 表單、basic 基礎、data 數(shù)據(jù) 、navigation 導航、other 其他。

表單在網(wǎng)頁中主要負責信息數(shù)據(jù)采集功能，用戶需要填寫輸入信息數(shù)據(jù)并且提交到后端數(shù)據(jù)庫，以此完成信息的采集，則這種組件就是表單組件。

本文主要講解表單中的treeselect樹選擇、datepicker日期選擇器和timepicker時間選擇器。

treeselect樹選擇

定義：

具有層級關系的選擇器。

使用場景：

1. 需要使用選擇器，同時可以提供層級結構的枚舉項時。
2. 彈出一個下拉選項給用戶選擇操作。
3. 具有單選和多選的功能。

例如用戶搜索關鍵詞時，需要對搜索結果進行二次篩選，常見的使用樹選擇有城市、組織架構等。

基礎樣式：

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

對于選項中層級結構是否展開收起，則根據(jù)父子層級架構來看待，例如省市比較多，默認展開的話，查找起來會變得很困難，收起的話則可以快速找到省，再次點擊可快速找到市。

含有搜索樣式：

選擇框支持搜索，在用戶輸入字符串過程中，枚舉項動態(tài)匹配，且匹配的子集展開。當搜索無結果時出現(xiàn)搜索無結果提示，點擊無交互效果。

含有搜索樣式（可選擇空選項）：

用戶如果選擇空值，則提交數(shù)據(jù)為城市為空。

含有搜索樣式（可清空已選項）：

如果用戶已選擇，可提供用戶清空已選擇的機會。用戶如果已選擇選項，則鼠標hover，出現(xiàn)叉號，點擊叉號，清空選擇框。

含有搜索樣式（多選）：

用戶在輸入字符串時，選項中出現(xiàn)匹配選項，點擊復選框，輸入框出現(xiàn)選項tag同時清空輸入框。選擇框支持搜索，在用戶輸入字符串過程中，枚舉項動態(tài)匹配，且匹配的子集展開。點擊選擇器和選擇浮層以外其他區(qū)域，則浮層收起，樹選擇器為完成態(tài)。

datepicker日期選擇器

定義：

選擇日期的組件。

使用場景：

1. 當用戶需要填寫年月日/年月時
2. 點擊選擇框，出現(xiàn)日期選擇浮層

例如在boss直聘填寫工作經(jīng)理的表單中，需要填寫在職時間，這里使用的就是datepicker日期選擇器。

基礎樣式：

非時間段日期選擇器。點擊選擇框，出現(xiàn)日期選擇浮層，默認停留在用戶當天日期。用戶未選擇時，清空按鈕默認置灰，已選清空按鈕恢復正常狀態(tài)。

年月樣式：

只能選擇年月，用戶激活輸入框，出現(xiàn)年月選擇浮層。默認停留在用戶當月，清空按鈕默認置灰。用戶點擊選擇時，浮層收起，選擇框出現(xiàn)已選擇當年月。

時間段樣式：

時間段日期組件在結束時會多一個選項為至今。用戶選擇至今，則結束時間一直持續(xù)到未來。

timepicker時間選擇器

定義：

用于用戶具體選擇時間點時。

使用場景：

1. 當用戶需要選擇具體時/分
2. 點擊選擇框，出現(xiàn)時間選擇浮層。

例如微信公眾后臺定時群發(fā)時，可選擇具體時間發(fā)送，點擊出現(xiàn)下拉選項。

基礎樣式：

點擊選擇框，出現(xiàn)時間選擇浮層，用戶可以用戶鼠標上下滾動滑輪選擇具體的時間點。

分鐘刻度樣式：

有的場景，不需要具體的分鐘，具體的分鐘在選擇起來因為選項太多而變得麻煩，用戶更多的使用場景是按照刻度來設置。點擊選擇框，出現(xiàn)時間選擇浮層，用戶可以用戶鼠標上下滾動滑輪選擇大概的的時間點。

日期和時間組合樣式：

有的表單，既要提交日期也要提交時間，這種情況可以用兩個表單設計，datepiecker和timepicker兩者組合，也可以在一個表單上完成，如下所示，用戶在選擇了日期后，出現(xiàn)時間選擇浮層。

相關閱讀

如何構建Web端設計規(guī)范

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

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

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

#專欄作家#

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

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

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