設(shè)計規(guī)范 | Web端設(shè)計組件篇-樹和日期時間選擇器
本文主要講解表單中的treeselect樹選擇、datepicker日期選擇器和timepicker時間選擇器。
根據(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時間選擇器。
treeselect樹選擇
定義:
具有層級關(guān)系的選擇器。
使用場景:
- 需要使用選擇器,同時可以提供層級結(jié)構(gòu)的枚舉項時。
- 彈出一個下拉選項給用戶選擇操作。
- 具有單選和多選的功能。
例如用戶搜索關(guān)鍵詞時,需要對搜索結(jié)果進行二次篩選,常見的使用樹選擇有城市、組織架構(gòu)等。
基礎(chǔ)樣式:
只能選擇枚舉,不支持在選擇框中進行關(guān)鍵詞搜索,且為單選。用戶選擇選項后,浮層收起,表單為完成態(tài)。
對于選項中層級結(jié)構(gòu)是否展開收起,則根據(jù)父子層級架構(gòu)來看待,例如省市比較多,默認(rèn)展開的話,查找起來會變得很困難,收起的話則可以快速找到省,再次點擊可快速找到市。
含有搜索樣式:
選擇框支持搜索,在用戶輸入字符串過程中,枚舉項動態(tài)匹配,且匹配的子集展開。當(dāng)搜索無結(jié)果時出現(xiàn)搜索無結(jié)果提示,點擊無交互效果。
含有搜索樣式(可選擇空選項):
用戶如果選擇空值,則提交數(shù)據(jù)為城市為空。
含有搜索樣式(可清空已選項):
如果用戶已選擇,可提供用戶清空已選擇的機會。用戶如果已選擇選項,則鼠標(biāo)hover,出現(xiàn)叉號,點擊叉號,清空選擇框。
含有搜索樣式(多選):
用戶在輸入字符串時,選項中出現(xiàn)匹配選項,點擊復(fù)選框,輸入框出現(xiàn)選項tag同時清空輸入框。選擇框支持搜索,在用戶輸入字符串過程中,枚舉項動態(tài)匹配,且匹配的子集展開。點擊選擇器和選擇浮層以外其他區(qū)域,則浮層收起,樹選擇器為完成態(tài)。
datepicker日期選擇器
定義:
選擇日期的組件。
使用場景:
- 當(dāng)用戶需要填寫年月日/年月時
- 點擊選擇框,出現(xiàn)日期選擇浮層
例如在boss直聘填寫工作經(jīng)理的表單中,需要填寫在職時間,這里使用的就是datepicker日期選擇器。
基礎(chǔ)樣式:
非時間段日期選擇器。點擊選擇框,出現(xiàn)日期選擇浮層,默認(rèn)停留在用戶當(dāng)天日期。用戶未選擇時,清空按鈕默認(rèn)置灰,已選清空按鈕恢復(fù)正常狀態(tài)。
年月樣式:
只能選擇年月,用戶激活輸入框,出現(xiàn)年月選擇浮層。默認(rèn)停留在用戶當(dāng)月,清空按鈕默認(rèn)置灰。用戶點擊選擇時,浮層收起,選擇框出現(xiàn)已選擇當(dāng)年月。
時間段樣式:
時間段日期組件在結(jié)束時會多一個選項為至今。用戶選擇至今,則結(jié)束時間一直持續(xù)到未來。
timepicker時間選擇器
定義:
用于用戶具體選擇時間點時。
使用場景:
- 當(dāng)用戶需要選擇具體時/分
- 點擊選擇框,出現(xiàn)時間選擇浮層。
例如微信公眾后臺定時群發(fā)時,可選擇具體時間發(fā)送,點擊出現(xiàn)下拉選項。
基礎(chǔ)樣式:
點擊選擇框,出現(xiàn)時間選擇浮層,用戶可以用戶鼠標(biāo)上下滾動滑輪選擇具體的時間點。
分鐘刻度樣式:
有的場景,不需要具體的分鐘,具體的分鐘在選擇起來因為選項太多而變得麻煩,用戶更多的使用場景是按照刻度來設(shè)置。點擊選擇框,出現(xiàn)時間選擇浮層,用戶可以用戶鼠標(biāo)上下滾動滑輪選擇大概的的時間點。
日期和時間組合樣式:
有的表單,既要提交日期也要提交時間,這種情況可以用兩個表單設(shè)計,datepiecker和timepicker兩者組合,也可以在一個表單上完成,如下所示,用戶在選擇了日期后,出現(xiàn)時間選擇浮層。
相關(guān)閱讀
設(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é)議
目前已經(jīng)按照你發(fā)布的內(nèi)容,自己做了原型,整理了反饋類的,表單做到日期選擇器。學(xué)到了很多,了解了很多,感謝大神~有你真好
寫的很棒 學(xué)習(xí)了