盤點幾個方法,設計出完美的日期時間選擇器

日期時間選擇器作為B端業務中常用的基礎組件之一，在設計它的時候，我們總會遇到形形色色的問題。筆者結合經驗為我們介紹了如何避免這些問題，來看看吧：

時間日期選擇器作為B端業務中常用的基礎組件之一，如何設計才能夠滿足業務的需求？需要注意哪些問題才能不被老闆、業務方甚至前端同學diss？什麼樣的場景下該用什麼樣的日期選擇器？

這篇文章對於時間日期選擇器進行了精細的拆解，結合作者自己的經驗總結了時間日期選擇器的使用方法，希望對你有所幫助。

一、定義

日期時間選擇控制項（選擇器）是幫助用戶選擇（輸入）日期和時間的控制項。

二、類型

• 按時間粒度分為：日期選擇器（年、月、日）、時間選擇器（時、分、秒）、日期時間選擇器（年月日時分秒）；
• 按時間跨度分為：時間點選擇、時間區間選擇。

三、用於

• 任務的時間設定，一般作用於未來即將發生的事情；如設定一個日程事件、提醒等；
• 數據篩選，一般作用於過去已發生事情；如查詢一周內的訂單量、過去一天的訪客量等。

四、使用

1. 日期時間選擇器是否為最佳方案？

日期時間選擇器相對於下拉菜單、單選/複選框、開關等常用組件的操作成本較高，使用時需要考慮日期時間選擇器是否為最佳方案，是否有別的組件或交互方式可以更高效的達到目標。如預先定義的日期選擇按鈕，可勾選的時間段等。

上圖中，攜程網購買火車票時對於出發時段和到達時段的篩選採用了複選框的形式，相比時間日期選擇器更加直觀和高效。

2. 明確需求，確定選擇器類型

明確所需要的日期時間選擇器用於選擇特定的時間點還是某一時間段，然後確定選擇器的時間粒度，即精確到月份、天、小時、分鐘還是秒。

3. 選擇/輸入框

① 輸入

支持輸入的選擇器既允許用戶通過點擊選擇日期，也可以在框內自行輸入日期。在某些場景下，直接輸入的效率會明顯高於點選。

使用條件：

• 日期變化較大，時間比較久遠的情況，如選擇出生日期、護照有效期等；
• 使用者有明確的目標，清晰地知道自己要選擇什麼時間。

注意事項：

支持多種格式輸入（寬容的）：

常見的日期格式有」2019-05-18″、」2019.05.18「、」2019/05/18「、」20190518「、」2019年05月18日「；常見的時間格式有」13：40：38「、」13點40分38秒「。

用戶無論輸入哪種格式，都會自動轉化為選擇器所規範的樣式，避免只支持單一格式的輸入。當產品對國外開放使用時，應當注意不同國家對日期的使用標準是不同的，如07/06/2019，在美國表示2019年7月6日，而在一些北歐國家則表示2019年6月7日。

提供一個日期格式，在用戶輸入前給出提示（規範的）。

當用戶開始輸入時，日，月和年之間的切換應該是流暢的，用戶除了鍵入數字不需要做其他事情。當用戶激活輸入欄位時，保留日期格式（在佔位符中），當用戶手動輸入日期時，保持顯示分隔符和佔位符。如果由於某種原因不能實現，可以使用浮動標籤繼續顯示格式。

支持自動糾錯（智能的）：對於用戶錯誤的輸入可幫助用戶自動修正，如用戶輸入2019-03-33時，會自動將日期轉化為2019-04-02等。

② 預設的快捷選項

為用戶提供預設的選項幫助用戶進行快捷選擇，如昨天、三天、一周、一個月等，在數據分析的場景中，用戶需要查看周期內的數據情況，快捷選擇顯得尤為方便。

使用條件：

• 用戶對於某些時間使用頻率很高；
• 有周期性查看數據的需要。

注意事項：

• 數量不宜過多，控制在7個以內；
• 文字表述要清楚；表示時間點的如「一周前」、「昨天」、「一個月前」等，表示時間段的如「最近一周」、「最近一個月」、「本月」（注意「最近一個月」與「本月」的區別）；
• 快捷選項避免使用英文縮寫，如「1d」、「3h」、「6min」等。

③ 默認值

在輸入框中為用戶預先填好默認值，減少用戶操作；像一些出行、旅遊類網站，臨近節假日時會默認為用戶選中節假日。如谷歌航班搜索機票時，會默認填充當前日期兩周以後的時間為起始日期，5天後返程（基於大量普通客戶的旅行行為習慣）。

使用條件：

• 對用戶的行為、目的有明確的預測；
• 想要達到某種目的，引導用戶點擊。

注意事項：

• 不要為用戶設置隨機值，增加修改成本，引起反感；
• 如果不能有效預測用戶的行為動機，不要設置默認值；
• 提供默認值一般需要收集用戶的行為，做大量的數據測試，從中發現用戶的偏好。

④ 清空/重置按鈕

在填寫表單的場景中，日期時間選擇框作為必填項時不需要提供日期清空按鈕；在作為篩選條件的場景中，需要為用戶提供清空/重置的操作，用戶可快捷清空所選日期，避免逐字刪除。

使用條件：

日期選擇作為一個篩選條件，而非必選項時需提供快捷清空的操作。

注意事項：

• 用戶在不激活選擇框時，hover顯示「清空」按鈕，點擊後內容清空，不激活下拉麵板；
• 用戶激活選擇框後，下拉麵板中提供「清空」的操作，點擊後下拉麵板收起，內容清空。

4. 下拉麵板

① 觸發

點擊選擇框觸發下拉麵板，而不是點擊框中的日期圖標觸發下拉麵板;對於支持輸入的選擇器，觸發下拉麵板時，光標在輸入框中閃爍，可點選日期也可直接輸入。

PS：選擇日期區間時使用了2個日期組件時，通常第一個組件日期選擇完成後，下拉麵板收起同時第二個組件下拉麵板彈出，保證選擇的連貫性，減少操作。

② 標示出當天日期、特殊日期

在日期選擇器中為用戶標示出當天的日期，以便用戶查看所選日期和當前日期之間的關係，幫助用戶更快的做出決策，必要時也可以標出周末、節假日等特殊日期。

藝龍網的日期控制項將休息日和工作日做了明顯區分，選擇時還為用戶計算出幾個晚上，大大減少了用戶判斷和記憶的成本，減少錯誤的發生。

當用戶選擇其他日期後，也需要根據場景判斷是否為用戶提供」今日「、」此刻「等操作。

③ 日曆第一列是「周一」還是「周日」

國際標準化組織的國際標準ISO 8601《數據存儲和交換形式·信息交換·日期和時間的表示方法》規定了日期和時間的表示方法，其中明確指出：每個日曆星期從星期一開始，星期日為第7天。我國採用的國家標準（中華人民共和國國家標準GB/T 7408-2005《數據元和交換格式·信息交換·日期和時間表示法》）和國際標準相同，也以周一為一周的第一天。

具體如下： 在星期日期的表達式中， ——星期中的日期用一位十進位數表示。任何一個日曆星期的星期一標識為該星期的第一天，以[1]標識，同一星期的後繼各日按遞增順序編號，一直排列到星期日（以[7]標識）。

國際標準和國家標準中明確指出「周一」為一周的第一天，但目前許多平臺（ios中日曆等）仍然沿用最初的習慣，將「周日」放在日曆的第一列，目前兩種形式使用都比較普遍。

使用標準：

1. 根據產品所提供的服務；

2. 根據產品所定位的受眾。對出行、住宿類平臺提供服務時，將「周一」放在第一列比較好，原因：

• 我國法定休息日為周六周日，將周六周日放在一起，方便用戶查看日期，不用換行瀏覽導致信息出現斷層；
• 將周六日放在一起選擇更快捷（pc端滑鼠移動距離和m端手指移動距離短）；
• 在視覺上區分開工作日和休息日，降低用戶視覺成本。

④ 年、月時間切換

對於跨度較小的時間選擇，只提供「上一月」、「下一月」的操作即可。常見如出行、租車等網站，用戶一般不會提前幾年制定計劃，而對於跨度大或沒有固定場景的選擇，就需要提供月份和年份的切換。

目前效率較高的交互形式：」< 」、「>」用於上一月、下一月的快捷切換，「《「、」》」用於上一年、下一年的快捷切換。點擊面板頂部的年份/月份，可進行跨度較大的年份和月份選擇，如下圖：

還有一種帶有Mini-stepper形式，在不展開下拉麵板時，可通過」< 」、「>」進行微調時間，「前一天」、「後一天」，這種樣式比較適用於微調的場景。

⑤ 日期區間

日期區間由起始日期和終止日期兩個時間點組成，常用的日期區間的交互主要有2種：

a. 起始日期和終止日期使用兩個組件分開展示，常見如出行、酒旅類網站，攜程、藝龍、馬蜂窩、飛豬等。

交互：激活起始日期的下拉麵板，選擇日期後下拉麵板收起，再點擊終止日期選擇框激活下拉麵板（有的終止日期下拉框在選擇完起始日期後會自動彈出，減少用戶一次點擊操作），下拉麵板中初始日期之前的時間不可選擇，避免用戶產生迷惑。

b. 起始日期和終止日期使用一個組件展示，常見如B端產品中對於內容進行日期篩選。

交互：選擇區間時，點擊不分先後，通過兩次點擊完成區間的設定，第一次點擊後區間隨用戶移動滑鼠而變化，再次點擊完成選擇並標示出區間，修改時需要重新點擊起始時間和終止時間。

那麼兩種交互形式在設計時如何選擇？

a. 根據用戶：

A類主要面向C端用戶，用戶水平參差不齊，起始日期和終止日期分開展示並且標明了哪個是起始日期哪個是終止日期，將用戶的認知成本降到了最低，每個操作只對應完成一件事。

B類主要面向B端用戶，此類用戶有一定的知識積累，更加注重使用的效率，相比較於A類降低了用戶的操作成本和視覺成本（認知成本>操作成本>視覺成本）。

b. 根據場景：

A類常用於對未來日期的選擇，用戶潛意識中會先選擇距離當前日期最近的時間點，因此在設計時會引導用戶優先選擇起始日期，再根據起始日期決定終止日期，用戶修改時只修改起始日期或終止日期的場景也比較常見。

B類常用於對已過去日期的選擇，此時不排除用戶會先選擇終止日期（因終止日期距離當前日期較近），根據終止日期倒推起始日期，因此點擊不分先後，不會強制用戶先點起始日期。

c. 根據目標：

A類主要以完成任務為主（任務型），清晰的分類和較低的認知成本主要是幫助用戶完成任務，提高網站的成交量訂單量；

B類主要以提高效率為主（效率型），提高使用者的效率即是為企業節約成本。

⑥ 時間點

時間點的選擇需要頻繁的與組件進行交互，常見的時間選擇有以下幾種：

注意事項：

• 用戶操作成本：輸入>拖動>點擊>滑動；
• 關於確定按鈕：下拉麵板和輸入框聯動變化時不需要確定、取消按鈕（此種較為常見）；下拉麵板變化時輸入框不聯動變化的需要確定按鈕。

⑦ 不可用日期、時間

注意事項：

• 對於不可用日期應支持用戶查看，但不支持選擇，通常情況下做置灰處理；
• 儘量避免不展示的方式，否則用戶會認為系統出現bug；
• 起始時間和終止時間為兩個組件時，選擇起始時間後，在終止時間的下拉麵板中，起始時間之前的日期不可選擇。

⑧ 關閉/收起

選擇日期點：

a. 精確到天：點擊對應日期（一次點擊）後直接收起下拉麵板；

b. 精確到時間：若下拉麵板與框內數據不聯動（此時需要確定、取消按鈕），點擊確定收起下拉麵板同時變更時間，點擊取消/空白區域不提交時間；若下拉麵板與框內數據聯動（此時不需要確定、取消按鈕），點擊空白區域收起下拉麵板同時變更時間。

選擇日期段：

a. 精確到天：點擊起始和終止時間（兩次點擊）後直接收起下拉麵板；

b. 精確到時間：若下拉麵板與框內數據不聯動（此時需要確定、取消按鈕），點擊確定收起下拉麵板同時變更時間，點擊取消/空白區域不提交時間；若下拉麵板與框內數據聯動（此時不需要確定、取消按鈕），點擊空白區域收起下拉麵板同時變更時間。

5. 下拉麵板和輸入框數據聯動

① 精確到天

• 選擇日期點時，激活下拉麵板後，點擊目標日期後面板收起，日期發生變更，不存在即時聯動的情況；
• 選擇日期時間段時，激活下拉麵板後，點擊起始和終止時間後，面板收起，日期發生變更，沒有聯動。

② 精確到時間

精確到時間時，需要多次交互，建議數據實時聯動，給用戶及時的反饋。

6. 按鍵操作

支持常見的鍵盤按鍵：Enter、Esc、上下左右。

① Enter

下拉麵板展開時，點Enter鍵可提交日期並收起下拉麵板，當輸入框支持輸入時同理。

② Esc

• 當下拉麵板與輸入框中數字聯動時（此時無確定、取消按鈕），點Esc鍵確定日期並收起下拉麵板。
• 當下拉麵板與輸入框中數字不聯動時（此時有確定按鈕），點Esc鍵取消日期更改並收起下拉麵板。

③ 上下左右按鍵

用於輸入框內光標位置的變化

• 左、右：向前、向後移動一位；
• 上、下：移至欄位首、尾。

④ 其他按鍵

當輸入框中鍵入了字母、其他特殊字符等，需要做自動去除，並轉化為正確的日期格式；如輸入」18w：11。23″ 提交後需自動轉化為「18:11:23」。

五、動效

上一篇文章《產品動效設計指南》中講到了動效設計的作用，在時間日期選擇器中合理運用動效可以引導用戶視線，幫助用戶高效完成任務。

1. 下拉麵板展開/收起

展開時面板由上向下拉伸（400ms），引導用戶視線，展開時先快後慢，收起時先慢後快。

2. 月份切換

月份切換時，日期區域水平滑動（450ms），舊日期退出時逐漸加快，新日期進入時逐漸變慢。

出場動效一般比入場動效更快，因為元素入場時用戶一般需要閱讀並處理新出現的信息，而元素出場時通常表明用戶在此元素上的任務已完成，不需要再關注了，快速出場能夠節省用戶更多時間。

3. 年份切換

選擇年份時，元素由日期變為年份，採用縮小動畫（450ms）聚焦用戶視線；由年份進入月份時，採用放大動畫，給用戶進入的感覺。（參考ios系統進入、退出app）

六、其他

1. 人性化

置身用戶的使用場景中，以用戶的視角去解決問題，注重人性化設計。記得2016年網易校招網上填寫信息選擇出生日期時，默認為用戶選擇的出生年份是1994年，這個貼心的設計大大提升了用戶的選擇效率。

2. 智能輸入

是否可以支持類似」昨天「、「7天內」、「一個月前」等智能形式的輸入，來提高時間選擇的效率，如：

3. 選擇日期後

• 用戶在選擇/輸入完成後，考慮下一步的交互是什麼，對頁面產生什麼影響。
• 頁面發生變化時，如刷新、重新載入、返回等，時間日期選擇器中的日期應當如何處理。

寫在最後

文章很長，也很枯燥，感謝你能夠讀到這裡，期望能對你有或多或少的幫助，如果你有什麼建議或疑問，歡迎與我交流。

 

作者：墨白，公眾號：UED_family

本文由 @墨白 原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議