推薦六個超實用的日期選擇器

日期選擇器的設計很容易被我們忽視,因為我們潛意識都覺得日期選擇器很簡單。
其實的確也很簡單:一個輸入框,一個日曆圖標,用戶點擊日曆圖標就會彈出一個日曆浮層來供用戶選擇具體日期。

這是每一個日期選擇器的基本樣式,看起來的確很簡單。但是事實真的是這樣的嗎?在設計日期選擇器之前,設計師要問一下自己幾個問題:

  • 你的日期選擇器是選擇一個特定的日期(7月18日)還是一個時間段(7月18日——7月29日)?
  • 用戶是否可以手動輸入日期或者用戶只可以選擇系統自定義的日期?
  • 我們是否需要給用戶提供默認值?
  • 我們給用戶添加「上一個,當前和下一個」跳轉按鈕是否合適?
  • 如何給用戶展示不可用日期?
  • 當用戶需要選擇日期的時候,日期選擇器是否是唯一合適的控制項?

如果你無法回答以上的問題,我相信這篇文章對你還是有幫助的。

錄入模式

目前日期選擇器的錄入模式有很多種。用戶可以手動輸入、下拉列表選擇、彈出日曆浮層選擇、滑塊和表單等。手動輸入是最原始的日期錄入模式,用戶對此很熟悉,學習成本為零。操作起來也比較簡單,屬於中規中矩的。使用下拉列表對於年和月的錄入比較簡單,但是對於具體日期來說,使用下拉列表對於用戶來說就比較難操作了,因為選擇項目太多了。

錄入模式的日期選擇器

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

日曆浮層目前受歡迎的選選擇器

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

滑快呈現方式的日期選擇單

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

默認值

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

一般常見的日期選擇單

用戶在使用谷歌航空時,谷歌航空基於大數據分析會給用戶提供默認值。例如,你7月3日搜索航班,會默認出行日為7月19日,返回日為7月23日。其實類似的手法我們也可以應用到國內的一些購票網站中,例如今年國慶/中秋放假為10月1日到8日。所以在9月份,我們假設用戶打開一款購票軟體都是為了購票回家。那麼我們就可以默認為10月1日為出發日,8日為返程日。這樣可以極大的節省用戶的輸入時間。

當然默認值還可以給用戶提供一個日期錄入規範,例如你想輸入2019年3月1日,正確的格式應該是03-01-19,但是有的用戶可能會輸入01-03-19。默認值可以很好的避免這類情況的出現。

人性化的日期選單

當然如果你的產品足夠的智能化,日期的錄入格式不會局限於一種,這樣無疑更加的人性化。

錄入時間

日期選擇器有的時候不只是要選擇日期還要選擇時間。例如你要請人吃飯,要去預定餐位,在這種情況下就需要錄入時間(段時間錄入模式和日期錄入差不多,這裡主要來說時間錄入的時機。

Topvet是一個獸醫網站,你可以在上面為你的寵物預約醫療服務。這裡的日期選擇器很有代表性,用戶在左邊選好日期,然後選擇時間段,最後選擇醫生。 日期-時間-醫生 ,這個流程看起來很正常,但是仔細想想就會發現問題。

預約型式的日期選擇單

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

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

手機預約看病的圖

日期段錄入

日期區間的圖

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

選擇器圖

此外手機端礙於屏幕尺寸問題,同時展開兩個日期選擇器也不太現實。

了解產品

設計師要對產品足夠的了解才可以設計出優秀的日期選擇器。例如,我們有沒有問過自己做的日期選擇器上是否需要給用戶切換年份的功能。
如果你的產品是類似去哪兒、攜程之類的,那麼年份是不需要加的。因為用戶不可能把幾年後的火車票都給買了,那樣不現實而且政策也不允許。
還有我們見到一些日期選擇器將周末凸顯出來,我們有沒有思考其背後的原因?

個人行程選擇器圖

Skyscannet是一個類似於去哪兒的應用,這裡的日曆將周六和周日和其他日子隔離開來,這個設計很有心,因為周末是大多數人選擇旅行的時間,所以應該突出表現,讓用戶更容易發現。

其他的日期錄入方式

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

其他的日期錄入方式的圖

以上就是我對時間選擇器設計做的一個小總結,希望大家看完能有所收穫。

本文地址:https://isux.tencent.com/to-b-website-design.html

推薦最好的案例:https://tenten.co/tw/works/everrich/


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化