timepicker時間選擇器
視頻及原型文件下載:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定義:
用于用戶具體選擇時間點時。
交互原則:
1明也、應該有一個合適的默認值塞赂,并不是所有的控件默認值都是今天或當前時間的。
2鸯两、控制可選/錄入的字段范圍,為了減少用戶出錯,保證產(chǎn)品數(shù)據(jù)的正常顯示缘厢,日期/時間控件應當要控制可選的范圍保礼。
3沛励、清晰明確的提交或確定按鈕责语,我見過很多非常糟糕的日期控件,在你選擇或切換選項后目派,還需要點擊輸入框或者空白處坤候,才能填入/顯示已選擇的項目。
4企蹭、減少點擊次數(shù)
5白筹、標識出特定日期,用戶并非總是“記憶”在選擇器中顯示或標注例如當天谅摄、已選默認值徒河、周末、節(jié)假日等特殊的日期送漠,可以幫助用戶更好顽照、更快地做出選擇。
6闽寡、特殊的操作按鈕代兵,對于一些通過填入日期或時間來篩選數(shù)據(jù)的選擇器,有必要在選擇器中加上如“清空”的按鈕下隧,允許用戶快速清除已選項奢人,回到數(shù)據(jù)的初始狀態(tài)。
交互說明:
1淆院、【默認文案】:默認的提示文案內(nèi)容何乎,例如:開始時間;
2土辩、【默認的日期】:為了方便用戶支救,減少用戶輸入可以使用默認的時間,默認的時間盡量與當前業(yè)務需要有關(guān)拷淘,例如:默認顯示當前時間后30分鐘的時間各墨;
3、【時間樣式】:需要注明需要的日期控件的樣式和刻度启涯,例如:小時贬堵、分鐘、秒结洼、毫秒
使用場景:
1黎做、當用戶需要選擇具體時/分
2、點擊選擇框松忍,出現(xiàn)時間選擇浮層蒸殿。
例如微信公眾后臺定時群發(fā)時,可選擇具體時間發(fā)送,點擊出現(xiàn)下拉選項宏所。