如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

日期選擇器的設(shè)計(jì)很容易被我們忽視，因?yàn)槲覀儩撘庾R(shí)都覺(jué)得日期選擇器很簡(jiǎn)單。其實(shí)的確也很簡(jiǎn)單：一個(gè)輸入框，一個(gè)日歷圖標(biāo)，用戶(hù)點(diǎn)擊日歷圖標(biāo)就會(huì)彈出一個(gè)日歷浮層來(lái)供用戶(hù)選擇具體日期。這是每一個(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 用戶(hù)是否可以手動(dòng)輸入日期或者用戶(hù)只可以選擇系統(tǒng)自定義的日期？

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

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

5 如何給用戶(hù)展示不可用日期？

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

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

錄入模式

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

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

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

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

默認(rèn)值

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

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

當(dāng)然默認(rèn)值還可以給用戶(hù)提供一個(gè)日期錄入規(guī)范，例如你想輸入2019年3月1日，正確的格式應(yīng)該是03-01-19，但是有的用戶(hù)可能會(huì)輸入01-03-19。默認(rèn)值可以很好的避免這類(lèi)情況的出現(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ù)。這里的日期選擇器很有代表性，用戶(hù)在左邊選好日期，然后選擇時(shí)間段，最后選擇醫(yī)生。日期－時(shí)間－醫(yī)生，這個(gè)流程看起來(lái)很正常，但是仔細(xì)想想就會(huì)發(fā)現(xiàn)問(wèn)題。

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

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

日期段錄入

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

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

了解產(chǎn)品

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

如果你的產(chǎn)品是類(lèi)似去哪兒，攜程之類(lèi)的，那么年份是不需要加的。因?yàn)橛脩?hù)不可能把幾年后的火車(chē)票都給買(mǎi)了，那樣不現(xiàn)實(shí)而且政策也不允許。

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

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

其他的日期錄入方式

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

總結(jié)

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

藍(lán)藍(lán)設(shè)計(jì)( m.izc.net.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)