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

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

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

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

一、treeselect樹選擇

1. 定義

具有層級關(guān)系的選擇器。

2. 使用場景

• 需要使用選擇器，同時(shí)可以提供層級結(jié)構(gòu)的枚舉項(xiàng)時(shí)。
• 彈出一個(gè)下拉選項(xiàng)給用戶選擇操作。
• 具有單選和多選的功能。

例如用戶搜索關(guān)鍵詞時(shí)，需要對搜索結(jié)果進(jìn)行二次篩選，常見的使用樹選擇有城市、組織架構(gòu)等。

3. 基礎(chǔ)樣式

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

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

4. 含有搜索樣式

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

5. 含有搜索樣式（可選擇空選項(xiàng)）

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

6. 含有搜索樣式（可清空已選項(xiàng)）

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

7. 含有搜索樣式（多選）

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

二、datepicker日期選擇器

1. 定義

選擇日期的組件。

2. 使用場景

• 當(dāng)用戶需要填寫年月日/年月時(shí)。
• 點(diǎn)擊選擇框，出現(xiàn)日期選擇浮層。

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

3. 基礎(chǔ)樣式

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

4. 年月樣式

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

5. 時(shí)間段樣式

時(shí)間段日期組件在結(jié)束時(shí)會多一個(gè)選項(xiàng)為至今。用戶選擇至今，則結(jié)束時(shí)間一直持續(xù)到未來。

三、timepicker時(shí)間選擇器

1. 定義

用于用戶具體選擇時(shí)間點(diǎn)時(shí)。

2. 使用場景

• 當(dāng)用戶需要選擇具體時(shí)/分。
• 點(diǎn)擊選擇框，出現(xiàn)時(shí)間選擇浮層。

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

3. 基礎(chǔ)樣式

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

4. 分鐘刻度樣式

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

5. 日期和時(shí)間組合樣式

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

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

圖片素材作者：Irene Georgiou

「Web端設(shè)計(jì)總結(jié)」

• 《如何構(gòu)建Web端設(shè)計(jì)規(guī)范之設(shè)計(jì)理念篇》
• 《如何構(gòu)建 Web 端設(shè)計(jì)規(guī)范之文本與選擇器》
• 《如何構(gòu)建Web端設(shè)計(jì)規(guī)范之反饋類組件》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com