產(chǎn)品設(shè)計交互規(guī)范-datepicker日期選擇器(十一)

datepicker日期選擇器
視頻及原型文件下載: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è)務(wù)需要有關(guān),例如:默認顯示本周的開始和結(jié)束日期;
3、【日期樣式】:需要注明需要的日期控件的樣式,例如選擇日、月、年、年月日、日期時間段等。

使用場景:

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

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

基礎(chǔ)樣式:

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


年月樣式:

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


時間段樣式:

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


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 兼容性 1、自適應1280*768px及以上的分辨率 默認窗口設(shè)置下,不應出現(xiàn)水平滾動條,盡量避免出現(xiàn)垂直滾動條(...
    reloaded么閱讀 2,270評論 0 0
  • 1 UI設(shè)計基礎(chǔ) 1.1 為iOS而設(shè)計 1.1.1 iOS包含以下3條設(shè)計原則: 遵從,UI應該有助于人們理解內(nèi)...
    Willry閱讀 3,785評論 1 48
  • #相約星期二# 晚上時光 靜靜的讀上幾頁 一位睿智老人 在人生結(jié)束之際依舊智慧樂觀 敬仰 勇敢愛與被愛 讓時間縫隙...
    schizophreniabb閱讀 120評論 0 0
  • 關(guān)注了惠心公眾號的家人們 都不約而同地關(guān)注了這個簡書 你所經(jīng)歷的一切全是你心識投射出來的...
    羅澤天閱讀 10,809評論 7 13
  • 其實我今天要看的也不是五遁忍術(shù),是想懷舊另一部關(guān)于五行忍術(shù)的片子,題材背景是三國時期,只是想不起名字來。本...
    zzfznp閱讀 1,996評論 0 0

友情鏈接更多精彩內(nèi)容