UI大牛教你怎么設(shè)計日歷

日期選擇器的設(shè)計很容易被我們忽視，因?yàn)槲覀儩撘庾R都覺得日期選擇器很簡單。其實(shí)的確也很簡單：一個輸入框，一個日歷圖標(biāo)，用戶點(diǎn)擊日歷圖標(biāo)就會彈出一個日歷浮層來供用戶選擇具體日期。這是每一個日期選擇器的基本樣式，看起來的確很簡單。但是事實(shí)真的是這樣的嗎？

在設(shè)計日期選擇器之前，設(shè)計師要問自己一下幾個問題：

1. 你的日期選擇器是選擇一個特定的日期（7月18日）還是一個時間段（7月18日——7月29日）？
2.  用戶是否可以手動輸入日期或者用戶只可以選擇系統(tǒng)自定義的日期？
3.  我們是否需要給用戶提供默認(rèn)值？
4.  我們給用戶添加“上一個，當(dāng)前和下一個”跳轉(zhuǎn)按鈕是否合適？
5.  如何給用戶展示不可用日期？
6.  當(dāng)用戶需要選擇日期的時候，日期選擇器是否唯一合適的控件。
7.  如果你無法回答以上的問題，我相信這篇文章對你還是有用的。

錄入模式

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

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

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

表單是一種新型的日期錄入模式，效率高，但是對于年齡大的用戶來說使用起來可能會比較困難。

默認(rèn)值

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

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

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

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

錄入時間

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

時間錄入模式和日期錄入差不多，這里主要來說時間錄入的時機(jī)。

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

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

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

日期段錄入

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

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

了解產(chǎn)品

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

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

還有我們見到一些日期選擇器將周末凸顯出來，我們有沒有思考其背后的原因？

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

其他的日期錄入方式

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

總結(jié)

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

相關(guān)文章--《產(chǎn)品經(jīng)理們，別假裝會做用戶訪談了，你只不過是聊天而已》