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

datepicker日期選擇器
視頻及原型文件下載:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定義:

選擇日期的組件有缆。

交互原則:

1怕篷、應該有一個合適的默認值致盟,并不是所有的控件默認值都是今天或當前時間的凌那。
2乏屯、控制可選/錄入的字段范圍让歼,為了減少用戶出錯是掰,保證產品數據的正常顯示,日期/時間控件應當要控制可選的范圍耍休。
3刃永、清晰明確的提交或確定按鈕,我見過很多非常糟糕的日期控件羹应,在你選擇或切換選項后揽碘,還需要點擊輸入框或者空白處,才能填入/顯示已選擇的項目园匹。
4雳刺、減少點擊次數
5、標識出特定日期裸违,用戶并非總是“記憶”在選擇器中顯示或標注例如當天掖桦、已選默認值、周末供汛、節(jié)假日等特殊的日期枪汪,可以幫助用戶更好、更快地做出選擇怔昨。
6雀久、特殊的操作按鈕,對于一些通過填入日期或時間來篩選數據的選擇器趁舀,有必要在選擇器中加上如“清空”的按鈕赖捌,允許用戶快速清除已選項,回到數據的初始狀態(tài)矮烹。


交互說明:

1越庇、【默認文案】:默認的提示文案內容,例如:開始日期奉狈;
2卤唉、【默認的日期】:為了方便用戶,減少用戶輸入可以使用默認的日期仁期,默認的日期盡量與當前業(yè)務需要有關桑驱,例如:默認顯示本周的開始和結束日期竭恬;
3、【日期樣式】:需要注明需要的日期控件的樣式熬的,例如選擇日萍聊、月、年悦析、年月日、日期時間段等此衅。

使用場景:

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

例如在boss直聘填寫工作經理的表單中骑歹,需要填寫在職時間,這里使用的就是datepicker日期選擇器墨微。

基礎樣式:

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


年月樣式:

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


時間段樣式:

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


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末光羞,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子怀大,更是在濱河造成了極大的恐慌纱兑,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件化借,死亡現(xiàn)場離奇詭異潜慎,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門铐炫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來垒手,“玉大人,你說我怎么就攤上這事倒信】票幔” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵鳖悠,是天一觀的道長榜掌。 經常有香客問我,道長乘综,這世上最難降的妖魔是什么憎账? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮卡辰,結果婚禮上胞皱,老公的妹妹穿的比我還像新娘。我一直安慰自己九妈,他們只是感情好反砌,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著允蚣,像睡著了一般于颖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嚷兔,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天森渐,我揣著相機與錄音,去河邊找鬼冒晰。 笑死同衣,一個胖子當著我的面吹牛,可吹牛的內容都是我干的壶运。 我是一名探鬼主播耐齐,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蒋情!你這毒婦竟也來了埠况?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤棵癣,失蹤者是張志新(化名)和其女友劉穎辕翰,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體狈谊,經...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡喜命,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年沟沙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片壁榕。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡矛紫,死狀恐怖,靈堂內的尸體忽然破棺而出牌里,到底是詐尸還是另有隱情颊咬,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布牡辽,位于F島的核電站贪染,受9級特大地震影響,放射性物質發(fā)生泄漏催享。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一哟绊、第九天 我趴在偏房一處隱蔽的房頂上張望因妙。 院中可真熱鬧,春花似錦票髓、人聲如沸攀涵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽以故。三九已至,卻和暖如春裆操,著一層夾襖步出監(jiān)牢的瞬間怒详,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工踪区, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留昆烁,地道東北人。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓缎岗,卻偏偏與公主長得像静尼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子传泊,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內容

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