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

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

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

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í)候，日期選擇器是否唯一合適的控件。
7.  如果你無法回答以上的問題，我相信這篇文章對(duì)你還是有用的。

錄入模式

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

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

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

表單是一種新型的日期錄入模式，效率高，但是對(duì)于年齡大的用戶來說使用起來可能會(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)用到國內(nèi)的一些購票網(wǎng)站中，例如今年國慶／中秋放假為10月1日到8日。所以在9月份，我們假設(shè)用戶打開一款購票軟件都是為了購票回家。那么我們就可以默認(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ì)局限于一種，這樣無疑更加的人性化。

錄入時(shí)間

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

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

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

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

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

日期段錄入

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

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

了解產(chǎn)品

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

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

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

Skyscannet是一個(gè)類似于去哪兒的應(yīng)用，這里的日歷將周六和周日和其他日子隔離開來，這個(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é)，希望大家看完能有所收獲。

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