日期選擇器的設(shè)計(jì)很容易被我們忽視，因?yàn)槲覀儩撘庾R(shí)都覺(jué)得日期選擇器很簡(jiǎn)單案怯。其實(shí)的確也很簡(jiǎn)單：一個(gè)輸入框君旦，一個(gè)日歷圖標(biāo)，用戶點(diǎn)擊日歷圖標(biāo)就會(huì)彈出一個(gè)日歷浮層來(lái)供用戶選擇具體日期嘲碱。這是每一個(gè)日期選擇器的基本樣式金砍，看起來(lái)的確很簡(jiǎn)單。但是事實(shí)真的是這樣的嗎麦锯？在設(shè)計(jì)日期選擇器之前恕稠，設(shè)計(jì)師要問(wèn)自己一下幾個(gè)問(wèn)題：

1 你的日期選擇器是選擇一個(gè)特定的日期（7月18日）還是一個(gè)時(shí)間段（7月18日——7月29日）？

2 用戶是否可以手動(dòng)輸入日期或者用戶只可以選擇系統(tǒng)自定義的日期离咐？

3 我們是否需要給用戶提供默認(rèn)值谱俭？

4 我們給用戶添加“上一個(gè)奉件，當(dāng)前和下一個(gè)”跳轉(zhuǎn)按鈕是否合適宵蛀？

5 如何給用戶展示不可用日期？

6 當(dāng)用戶需要選擇日期的時(shí)候县貌，日期選擇器是否唯一合適的控件术陶。

如果你無(wú)法回答以上的問(wèn)題，我相信這篇文章對(duì)你還是有用的煤痕。

錄入模式

目前日期選擇器的錄入模式有很多種梧宫。用戶可以手動(dòng)輸入，下拉列表選擇摆碉，彈出日歷浮層選擇,滑塊和表單等塘匣。手動(dòng)輸入是最原始的日期錄入模式，用戶對(duì)此很熟悉巷帝，學(xué)習(xí)成本為零忌卤。操作起來(lái)也比較簡(jiǎn)單，屬于中規(guī)中矩的楞泼。使用下拉列表對(duì)于年和月的錄入比較簡(jiǎn)單驰徊，但是對(duì)于具體日期來(lái)說(shuō)，使用下拉列表對(duì)于用戶來(lái)說(shuō)就比較難操作了堕阔，因?yàn)檫x擇項(xiàng)目太多了棍厂。

日歷浮層是當(dāng)前很受歡迎的一種日期錄入模式，主要原因就是簡(jiǎn)單超陆，其外觀可以給用戶一種掛歷或日歷的隱喻牺弹。

滑塊也非常適合用于日期選擇，因?yàn)榛瑝K不僅可以選擇一個(gè)單個(gè)日期還可以選擇一個(gè)時(shí)間段。但是滑塊的一個(gè)缺點(diǎn)就是無(wú)法完成精確錄入例驹，可選擇范圍越大捐韩，滑塊的使用價(jià)值就會(huì)越低。使用滑塊來(lái)錄入星期幾鹃锈，月份都是比較適合荤胁，但是要來(lái)錄入具體日期就比較難了。用戶必須操作的十分小心和緩慢屎债。

表單是一種新型的日期錄入模式仅政，效率高，但是對(duì)于年齡大的用戶來(lái)說(shuō)使用起來(lái)可能會(huì)比較困難盆驹。

默認(rèn)值

日期輸入框里給用戶提供默認(rèn)值肯定比直接空白要更好圆丹，但是默認(rèn)值的內(nèi)容和展示形式還是需要我們仔細(xì)斟酌的。

用戶在使用谷歌航空時(shí)躯喇，谷歌航空基于大數(shù)據(jù)分析會(huì)給用戶提供默認(rèn)值辫封。例如，你7月3日搜索航班廉丽，會(huì)默認(rèn)出行日為7月19日倦微，返回日為7月23日。其實(shí)類似的手法我們也可以應(yīng)用到國(guó)內(nèi)的一些購(gòu)票網(wǎng)站中正压，例如今年國(guó)慶／中秋放假為10月1日到8日欣福。所以在9月份，我們假設(shè)用戶打開一款購(gòu)票軟件都是為了購(gòu)票回家焦履。那么我們就可以默認(rèn)為10月1日為出發(fā)日拓劝，8日為返程日。這樣可以極大的節(jié)省用戶的輸入時(shí)間嘉裤。

當(dāng)然默認(rèn)值還可以給用戶提供一個(gè)日期錄入規(guī)范郑临，例如你想輸入2019年3月1日，正確的格式應(yīng)該是03-01-19屑宠，但是有的用戶可能會(huì)輸入01-03-19厢洞。默認(rèn)值可以很好的避免這類情況的出現(xiàn)。

當(dāng)然如果你的產(chǎn)品足夠的智能化侨把，日期的錄入格式不會(huì)局限于一種犀变，這樣無(wú)疑更加的人性化。

錄入時(shí)間

日期選擇器有的時(shí)候不只要選擇日期還要選擇時(shí)間秋柄。例如你要請(qǐng)人吃飯获枝，要去預(yù)定餐位，在這種情況下就需要錄入時(shí)間（段）骇笔。

時(shí)間錄入模式和日期錄入差不多省店，這里主要來(lái)說(shuō)時(shí)間錄入的時(shí)機(jī)嚣崭。

Topvet是一個(gè)獸醫(yī)網(wǎng)站，你可以在上面為你的寵物預(yù)約醫(yī)療服務(wù)懦傍。這里的日期選擇器很有代表性雹舀，用戶在左邊選好日期，然后選擇時(shí)間段粗俱，最后選擇醫(yī)生说榆。日期－時(shí)間－醫(yī)生，這個(gè)流程看起來(lái)很正常寸认，但是仔細(xì)想想就會(huì)發(fā)現(xiàn)問(wèn)題签财。

例如，一個(gè)用戶平時(shí)比較忙偏塞，只有中午有時(shí)間帶寵物來(lái)看病唱蒸。這種情況下，日期－時(shí)間－醫(yī)生這種錄入順序就不太合適了灸叼，應(yīng)該讓用戶先選擇時(shí)間段神汹，然后反顯出可以預(yù)約的日期，再選擇醫(yī)生古今。

以上的這種屁魏，其實(shí)是日期和時(shí)間相互剝離的。在一些情況下沧卢，例如屏幕空間有限（手機(jī)）或者為了簡(jiǎn)化用戶操作步驟蚁堤，我們就需要將日期和時(shí)間整合在一起醉者。

日期段錄入

要錄入一個(gè)日期區(qū)間但狭，意味著用戶要錄入兩個(gè)日期。很多設(shè)計(jì)師就會(huì)下意識(shí)的使用兩個(gè)日期選擇器撬即，其實(shí)是完全沒(méi)有必要的立磁。首先一個(gè)日期選擇器完全可以完成日期段的錄入，而且多一個(gè)日期選擇器會(huì)增加用戶的點(diǎn)擊次數(shù)剥槐。

此外手機(jī)端礙于屏幕尺寸問(wèn)題唱歧，同時(shí)展開兩個(gè)日期選擇器也不太現(xiàn)實(shí)。

了解產(chǎn)品

設(shè)計(jì)師要對(duì)產(chǎn)品足夠的了解才可以設(shè)計(jì)出優(yōu)秀的日期選擇器粒竖。例如颅崩，我們有沒(méi)有問(wèn)過(guò)自己做的日期選擇器上是否需要給用戶切換年份的功能。

如果你的產(chǎn)品是類似去哪兒蕊苗，攜程之類的沿后，那么年份是不需要加的。因?yàn)橛脩舨豢赡馨褞啄旰蟮幕疖嚻倍冀o買了朽砰，那樣不現(xiàn)實(shí)而且政策也不允許尖滚。

還有我們見到一些日期選擇器將周末凸顯出來(lái)喉刘，我們有沒(méi)有思考其背后的原因？

Skyscannet是一個(gè)類似于去哪兒的應(yīng)用漆弄，這里的日歷將周六和周日和其他日子隔離開來(lái)睦裳，這個(gè)設(shè)計(jì)很有心，因?yàn)橹苣┦谴蠖鄶?shù)人選擇旅行的時(shí)間撼唾，所以應(yīng)該突出表現(xiàn)廉邑，讓用戶更容易發(fā)現(xiàn)。

其他的日期錄入方式

其實(shí)我們經(jīng)常會(huì)陷入一個(gè)誤區(qū)倒谷，例如給用戶一個(gè)錯(cuò)誤提示我們就會(huì)想到用彈出框鬓催，用戶要選擇日期，我們就會(huì)想到日期選擇器恨锚。其實(shí)用戶要錄入日期宇驾，并不一定非要使用日期選擇器。對(duì)話式交互也是一個(gè)很好的替代方式猴伶。

總結(jié)

以上就是我對(duì)時(shí)間選擇器設(shè)計(jì)做的一個(gè)小總結(jié)课舍，希望大家看完能有所收獲。