日期時(shí)間選擇器作為B端業(yè)務(wù)中常用的基礎(chǔ)組件之一，在設(shè)計(jì)它的時(shí)候，我們總會(huì)遇到形形色色的問(wèn)題。筆者結(jié)合經(jīng)驗(yàn)為我們介紹了如何避免這些問(wèn)題，來(lái)看看吧：

時(shí)間日期選擇器作為B端業(yè)務(wù)中常用的基礎(chǔ)組件之一，如何設(shè)計(jì)才能夠滿足業(yè)務(wù)的需求？需要注意哪些問(wèn)題才能不被老板、業(yè)務(wù)方甚至前端同學(xué)diss？什么樣的場(chǎng)景下該用什么樣的日期選擇器？

這篇文章對(duì)于時(shí)間日期選擇器進(jìn)行了精細(xì)的拆解，結(jié)合作者自己的經(jīng)驗(yàn)總結(jié)了時(shí)間日期選擇器的使用方法，希望對(duì)你有所幫助。

一、定義

日期時(shí)間選擇控件（選擇器）是幫助用戶選擇（輸入）日期和時(shí)間的控件。

二、類型

• 按時(shí)間粒度分為：日期選擇器（年、月、日）、時(shí)間選擇器（時(shí)、分、秒）、日期時(shí)間選擇器（年月日時(shí)分秒）；
• 按時(shí)間跨度分為：時(shí)間點(diǎn)選擇、時(shí)間區(qū)間選擇。

三、用于

• 任務(wù)的時(shí)間設(shè)定，一般作用于未來(lái)即將發(fā)生的事情；如設(shè)定一個(gè)日程事件、提醒等；
• 數(shù)據(jù)篩選，一般作用于過(guò)去已發(fā)生事情；如查詢一周內(nèi)的訂單量、過(guò)去一天的訪客量等。

四、使用

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

日期時(shí)間選擇器相對(duì)于下拉菜單、單選/復(fù)選框、開(kāi)關(guān)等常用組件的操作成本較高，使用時(shí)需要考慮日期時(shí)間選擇器是否為最佳方案，是否有別的組件或交互方式可以更高效的達(dá)到目標(biāo)。如預(yù)先定義的日期選擇按鈕，可勾選的時(shí)間段等。

上圖中，攜程網(wǎng)購(gòu)買火車票時(shí)對(duì)于出發(fā)時(shí)段和到達(dá)時(shí)段的篩選采用了復(fù)選框的形式，相比時(shí)間日期選擇器更加直觀和高效。

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

明確所需要的日期時(shí)間選擇器用于選擇特定的時(shí)間點(diǎn)還是某一時(shí)間段，然后確定選擇器的時(shí)間粒度，即精確到月份、天、小時(shí)、分鐘還是秒。

3. 選擇/輸入框

① 輸入

支持輸入的選擇器既允許用戶通過(guò)點(diǎn)擊選擇日期，也可以在框內(nèi)自行輸入日期。在某些場(chǎng)景下，直接輸入的效率會(huì)明顯高于點(diǎn)選。

使用條件：

• 日期變化較大，時(shí)間比較久遠(yuǎn)的情況，如選擇出生日期、護(hù)照有效期等；
• 使用者有明確的目標(biāo)，清晰地知道自己要選擇什么時(shí)間。

注意事項(xiàng)：

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

常見(jiàn)的日期格式有”2019-05-18″、”2019.05.18“、”2019/05/18“、”20190518“、”2019年05月18日“；常見(jiàn)的時(shí)間格式有”13：40：38“、”13點(diǎn)40分38秒“。

用戶無(wú)論輸入哪種格式，都會(huì)自動(dòng)轉(zhuǎn)化為選擇器所規(guī)范的樣式，避免只支持單一格式的輸入。當(dāng)產(chǎn)品對(duì)國(guó)外開(kāi)放使用時(shí)，應(yīng)當(dāng)注意不同國(guó)家對(duì)日期的使用標(biāo)準(zhǔn)是不同的，如07/06/2019，在美國(guó)表示2019年7月6日，而在一些北歐國(guó)家則表示2019年6月7日。

提供一個(gè)日期格式，在用戶輸入前給出提示（規(guī)范的）。

當(dāng)用戶開(kāi)始輸入時(shí)，日，月和年之間的切換應(yīng)該是流暢的，用戶除了鍵入數(shù)字不需要做其他事情。當(dāng)用戶激活輸入字段時(shí)，保留日期格式（在占位符中），當(dāng)用戶手動(dòng)輸入日期時(shí)，保持顯示分隔符和占位符。如果由于某種原因不能實(shí)現(xiàn)，可以使用浮動(dòng)標(biāo)簽繼續(xù)顯示格式。

支持自動(dòng)糾錯(cuò)（智能的）：對(duì)于用戶錯(cuò)誤的輸入可幫助用戶自動(dòng)修正，如用戶輸入2019-03-33時(shí)，會(huì)自動(dòng)將日期轉(zhuǎn)化為2019-04-02等。

② 預(yù)設(shè)的快捷選項(xiàng)

為用戶提供預(yù)設(shè)的選項(xiàng)幫助用戶進(jìn)行快捷選擇，如昨天、三天、一周、一個(gè)月等，在數(shù)據(jù)分析的場(chǎng)景中，用戶需要查看周期內(nèi)的數(shù)據(jù)情況，快捷選擇顯得尤為方便。

使用條件：

• 用戶對(duì)于某些時(shí)間使用頻率很高；
• 有周期性查看數(shù)據(jù)的需要。

注意事項(xiàng)：

• 數(shù)量不宜過(guò)多，控制在7個(gè)以內(nèi)；
• 文字表述要清楚；表示時(shí)間點(diǎn)的如“一周前”、“昨天”、“一個(gè)月前”等，表示時(shí)間段的如“最近一周”、“最近一個(gè)月”、“本月”（注意“最近一個(gè)月”與“本月”的區(qū)別）；
• 快捷選項(xiàng)避免使用英文縮寫，如“1d”、“3h”、“6min”等。

③ 默認(rèn)值

在輸入框中為用戶預(yù)先填好默認(rèn)值，減少用戶操作；像一些出行、旅游類網(wǎng)站，臨近節(jié)假日時(shí)會(huì)默認(rèn)為用戶選中節(jié)假日。如谷歌航班搜索機(jī)票時(shí)，會(huì)默認(rèn)填充當(dāng)前日期兩周以后的時(shí)間為起始日期，5天后返程（基于大量普通客戶的旅行行為習(xí)慣）。

使用條件：

• 對(duì)用戶的行為、目的有明確的預(yù)測(cè)；
• 想要達(dá)到某種目的，引導(dǎo)用戶點(diǎn)擊。

注意事項(xiàng)：

• 不要為用戶設(shè)置隨機(jī)值，增加修改成本，引起反感；
• 如果不能有效預(yù)測(cè)用戶的行為動(dòng)機(jī)，不要設(shè)置默認(rèn)值；
• 提供默認(rèn)值一般需要收集用戶的行為，做大量的數(shù)據(jù)測(cè)試，從中發(fā)現(xiàn)用戶的偏好。

④ 清空/重置按鈕

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

使用條件：

日期選擇作為一個(gè)篩選條件，而非必選項(xiàng)時(shí)需提供快捷清空的操作。

注意事項(xiàng)：

• 用戶在不激活選擇框時(shí)，hover顯示“清空”按鈕，點(diǎn)擊后內(nèi)容清空，不激活下拉面板；
• 用戶激活選擇框后，下拉面板中提供“清空”的操作，點(diǎn)擊后下拉面板收起，內(nèi)容清空。

4. 下拉面板

① 觸發(fā)

點(diǎn)擊選擇框觸發(fā)下拉面板，而不是點(diǎn)擊框中的日期圖標(biāo)觸發(fā)下拉面板;對(duì)于支持輸入的選擇器，觸發(fā)下拉面板時(shí)，光標(biāo)在輸入框中閃爍，可點(diǎn)選日期也可直接輸入。

PS：選擇日期區(qū)間時(shí)使用了2個(gè)日期組件時(shí)，通常第一個(gè)組件日期選擇完成后，下拉面板收起同時(shí)第二個(gè)組件下拉面板彈出，保證選擇的連貫性，減少操作。

② 標(biāo)示出當(dāng)天日期、特殊日期

在日期選擇器中為用戶標(biāo)示出當(dāng)天的日期，以便用戶查看所選日期和當(dāng)前日期之間的關(guān)系，幫助用戶更快的做出決策，必要時(shí)也可以標(biāo)出周末、節(jié)假日等特殊日期。

藝龍網(wǎng)的日期控件將休息日和工作日做了明顯區(qū)分，選擇時(shí)還為用戶計(jì)算出幾個(gè)晚上，大大減少了用戶判斷和記憶的成本，減少錯(cuò)誤的發(fā)生。

當(dāng)用戶選擇其他日期后，也需要根據(jù)場(chǎng)景判斷是否為用戶提供”今日“、”此刻“等操作。

③ 日歷第一列是“周一”還是“周日”

國(guó)際標(biāo)準(zhǔn)化組織的國(guó)際標(biāo)準(zhǔn)ISO 8601《數(shù)據(jù)存儲(chǔ)和交換形式·信息交換·日期和時(shí)間的表示方法》規(guī)定了日期和時(shí)間的表示方法，其中明確指出：每個(gè)日歷星期從星期一開(kāi)始，星期日為第7天。我國(guó)采用的國(guó)家標(biāo)準(zhǔn)（中華人民共和國(guó)國(guó)家標(biāo)準(zhǔn)GB/T 7408-2005《數(shù)據(jù)元和交換格式·信息交換·日期和時(shí)間表示法》）和國(guó)際標(biāo)準(zhǔn)相同，也以周一為一周的第一天。

具體如下： 在星期日期的表達(dá)式中， ——星期中的日期用一位十進(jìn)制數(shù)表示。任何一個(gè)日歷星期的星期一標(biāo)識(shí)為該星期的第一天，以[1]標(biāo)識(shí)，同一星期的后繼各日按遞增順序編號(hào)，一直排列到星期日（以[7]標(biāo)識(shí)）。

國(guó)際標(biāo)準(zhǔn)和國(guó)家標(biāo)準(zhǔn)中明確指出“周一”為一周的第一天，但目前許多平臺(tái)（ios中日歷等）仍然沿用最初的習(xí)慣，將“周日”放在日歷的第一列，目前兩種形式使用都比較普遍。

使用標(biāo)準(zhǔn)：

1. 根據(jù)產(chǎn)品所提供的服務(wù)；

2. 根據(jù)產(chǎn)品所定位的受眾。對(duì)出行、住宿類平臺(tái)提供服務(wù)時(shí)，將“周一”放在第一列比較好，原因：

• 我國(guó)法定休息日為周六周日，將周六周日放在一起，方便用戶查看日期，不用換行瀏覽導(dǎo)致信息出現(xiàn)斷層；
• 將周六日放在一起選擇更快捷（pc端鼠標(biāo)移動(dòng)距離和m端手指移動(dòng)距離短）；
• 在視覺(jué)上區(qū)分開(kāi)工作日和休息日，降低用戶視覺(jué)成本。

④ 年、月時(shí)間切換

對(duì)于跨度較小的時(shí)間選擇，只提供“上一月”、“下一月”的操作即可。常見(jiàn)如出行、租車等網(wǎng)站，用戶一般不會(huì)提前幾年制定計(jì)劃，而對(duì)于跨度大或沒(méi)有固定場(chǎng)景的選擇，就需要提供月份和年份的切換。

目前效率較高的交互形式：”< ”、“>”用于上一月、下一月的快捷切換，“《“、”》”用于上一年、下一年的快捷切換。點(diǎn)擊面板頂部的年份/月份，可進(jìn)行跨度較大的年份和月份選擇，如下圖：

還有一種帶有Mini-stepper形式，在不展開(kāi)下拉面板時(shí)，可通過(guò)”< ”、“>”進(jìn)行微調(diào)時(shí)間，“前一天”、“后一天”，這種樣式比較適用于微調(diào)的場(chǎng)景。

⑤ 日期區(qū)間

日期區(qū)間由起始日期和終止日期兩個(gè)時(shí)間點(diǎn)組成，常用的日期區(qū)間的交互主要有2種：

a. 起始日期和終止日期使用兩個(gè)組件分開(kāi)展示，常見(jiàn)如出行、酒旅類網(wǎng)站，攜程、藝龍、馬蜂窩、飛豬等。

交互：激活起始日期的下拉面板，選擇日期后下拉面板收起，再點(diǎn)擊終止日期選擇框激活下拉面板（有的終止日期下拉框在選擇完起始日期后會(huì)自動(dòng)彈出，減少用戶一次點(diǎn)擊操作），下拉面板中初始日期之前的時(shí)間不可選擇，避免用戶產(chǎn)生迷惑。

b. 起始日期和終止日期使用一個(gè)組件展示，常見(jiàn)如B端產(chǎn)品中對(duì)于內(nèi)容進(jìn)行日期篩選。

交互：選擇區(qū)間時(shí)，點(diǎn)擊不分先后，通過(guò)兩次點(diǎn)擊完成區(qū)間的設(shè)定，第一次點(diǎn)擊后區(qū)間隨用戶移動(dòng)鼠標(biāo)而變化，再次點(diǎn)擊完成選擇并標(biāo)示出區(qū)間，修改時(shí)需要重新點(diǎn)擊起始時(shí)間和終止時(shí)間。

那么兩種交互形式在設(shè)計(jì)時(shí)如何選擇？

a. 根據(jù)用戶：

A類主要面向C端用戶，用戶水平參差不齊，起始日期和終止日期分開(kāi)展示并且標(biāo)明了哪個(gè)是起始日期哪個(gè)是終止日期，將用戶的認(rèn)知成本降到了最低，每個(gè)操作只對(duì)應(yīng)完成一件事。

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

b. 根據(jù)場(chǎng)景：

A類常用于對(duì)未來(lái)日期的選擇，用戶潛意識(shí)中會(huì)先選擇距離當(dāng)前日期最近的時(shí)間點(diǎn)，因此在設(shè)計(jì)時(shí)會(huì)引導(dǎo)用戶優(yōu)先選擇起始日期，再根據(jù)起始日期決定終止日期，用戶修改時(shí)只修改起始日期或終止日期的場(chǎng)景也比較常見(jiàn)。

B類常用于對(duì)已過(guò)去日期的選擇，此時(shí)不排除用戶會(huì)先選擇終止日期（因終止日期距離當(dāng)前日期較近），根據(jù)終止日期倒推起始日期，因此點(diǎn)擊不分先后，不會(huì)強(qiáng)制用戶先點(diǎn)起始日期。

c. 根據(jù)目標(biāo)：

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

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

⑥ 時(shí)間點(diǎn)

時(shí)間點(diǎn)的選擇需要頻繁的與組件進(jìn)行交互，常見(jiàn)的時(shí)間選擇有以下幾種：

注意事項(xiàng)：

• 用戶操作成本：輸入>拖動(dòng)>點(diǎn)擊>滑動(dòng)；
• 關(guān)于確定按鈕：下拉面板和輸入框聯(lián)動(dòng)變化時(shí)不需要確定、取消按鈕（此種較為常見(jiàn)）；下拉面板變化時(shí)輸入框不聯(lián)動(dòng)變化的需要確定按鈕。

⑦ 不可用日期、時(shí)間

注意事項(xiàng)：

• 對(duì)于不可用日期應(yīng)支持用戶查看，但不支持選擇，通常情況下做置灰處理；
• 盡量避免不展示的方式，否則用戶會(huì)認(rèn)為系統(tǒng)出現(xiàn)bug；
• 起始時(shí)間和終止時(shí)間為兩個(gè)組件時(shí)，選擇起始時(shí)間后，在終止時(shí)間的下拉面板中，起始時(shí)間之前的日期不可選擇。

⑧ 關(guān)閉/收起

選擇日期點(diǎn)：

a. 精確到天：點(diǎn)擊對(duì)應(yīng)日期（一次點(diǎn)擊）后直接收起下拉面板；

b. 精確到時(shí)間：若下拉面板與框內(nèi)數(shù)據(jù)不聯(lián)動(dòng)（此時(shí)需要確定、取消按鈕），點(diǎn)擊確定收起下拉面板同時(shí)變更時(shí)間，點(diǎn)擊取消/空白區(qū)域不提交時(shí)間；若下拉面板與框內(nèi)數(shù)據(jù)聯(lián)動(dòng)（此時(shí)不需要確定、取消按鈕），點(diǎn)擊空白區(qū)域收起下拉面板同時(shí)變更時(shí)間。

選擇日期段：

a. 精確到天：點(diǎn)擊起始和終止時(shí)間（兩次點(diǎn)擊）后直接收起下拉面板；

b. 精確到時(shí)間：若下拉面板與框內(nèi)數(shù)據(jù)不聯(lián)動(dòng)（此時(shí)需要確定、取消按鈕），點(diǎn)擊確定收起下拉面板同時(shí)變更時(shí)間，點(diǎn)擊取消/空白區(qū)域不提交時(shí)間；若下拉面板與框內(nèi)數(shù)據(jù)聯(lián)動(dòng)（此時(shí)不需要確定、取消按鈕），點(diǎn)擊空白區(qū)域收起下拉面板同時(shí)變更時(shí)間。

5. 下拉面板和輸入框數(shù)據(jù)聯(lián)動(dòng)

① 精確到天

• 選擇日期點(diǎn)時(shí)，激活下拉面板后，點(diǎn)擊目標(biāo)日期后面板收起，日期發(fā)生變更，不存在即時(shí)聯(lián)動(dòng)的情況；
• 選擇日期時(shí)間段時(shí)，激活下拉面板后，點(diǎn)擊起始和終止時(shí)間后，面板收起，日期發(fā)生變更，沒(méi)有聯(lián)動(dòng)。

② 精確到時(shí)間

精確到時(shí)間時(shí)，需要多次交互，建議數(shù)據(jù)實(shí)時(shí)聯(lián)動(dòng)，給用戶及時(shí)的反饋。

6. 按鍵操作

支持常見(jiàn)的鍵盤按鍵：Enter、Esc、上下左右。

① Enter

下拉面板展開(kāi)時(shí)，點(diǎn)Enter鍵可提交日期并收起下拉面板，當(dāng)輸入框支持輸入時(shí)同理。

② Esc

• 當(dāng)下拉面板與輸入框中數(shù)字聯(lián)動(dòng)時(shí)（此時(shí)無(wú)確定、取消按鈕），點(diǎn)Esc鍵確定日期并收起下拉面板。
• 當(dāng)下拉面板與輸入框中數(shù)字不聯(lián)動(dòng)時(shí)（此時(shí)有確定按鈕），點(diǎn)Esc鍵取消日期更改并收起下拉面板。

③ 上下左右按鍵

用于輸入框內(nèi)光標(biāo)位置的變化

• 左、右：向前、向后移動(dòng)一位；
• 上、下：移至字段首、尾。

④ 其他按鍵

當(dāng)輸入框中鍵入了字母、其他特殊字符等，需要做自動(dòng)去除，并轉(zhuǎn)化為正確的日期格式；如輸入”18w：11。23″ 提交后需自動(dòng)轉(zhuǎn)化為“18:11:23”。

五、動(dòng)效

上一篇文章《產(chǎn)品動(dòng)效設(shè)計(jì)指南》中講到了動(dòng)效設(shè)計(jì)的作用，在時(shí)間日期選擇器中合理運(yùn)用動(dòng)效可以引導(dǎo)用戶視線，幫助用戶高效完成任務(wù)。

1. 下拉面板展開(kāi)/收起

展開(kāi)時(shí)面板由上向下拉伸（400ms），引導(dǎo)用戶視線，展開(kāi)時(shí)先快后慢，收起時(shí)先慢后快。

2. 月份切換

月份切換時(shí)，日期區(qū)域水平滑動(dòng)（450ms），舊日期退出時(shí)逐漸加快，新日期進(jìn)入時(shí)逐漸變慢。

出場(chǎng)動(dòng)效一般比入場(chǎng)動(dòng)效更快，因?yàn)樵厝雸?chǎng)時(shí)用戶一般需要閱讀并處理新出現(xiàn)的信息，而元素出場(chǎng)時(shí)通常表明用戶在此元素上的任務(wù)已完成，不需要再關(guān)注了，快速出場(chǎng)能夠節(jié)省用戶更多時(shí)間。

3. 年份切換

選擇年份時(shí)，元素由日期變?yōu)槟攴荩捎每s小動(dòng)畫（450ms）聚焦用戶視線；由年份進(jìn)入月份時(shí)，采用放大動(dòng)畫，給用戶進(jìn)入的感覺(jué)。（參考ios系統(tǒng)進(jìn)入、退出app）

六、其他

1. 人性化

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

2. 智能輸入

是否可以支持類似”昨天“、“7天內(nèi)”、“一個(gè)月前”等智能形式的輸入，來(lái)提高時(shí)間選擇的效率，如：

3. 選擇日期后

• 用戶在選擇/輸入完成后，考慮下一步的交互是什么，對(duì)頁(yè)面產(chǎn)生什么影響。
• 頁(yè)面發(fā)生變化時(shí)，如刷新、重新載入、返回等，時(shí)間日期選擇器中的日期應(yīng)當(dāng)如何處理。

寫在最后

文章很長(zhǎng)，也很枯燥，感謝你能夠讀到這里，期望能對(duì)你有或多或少的幫助，如果你有什么建議或疑問(wèn)，歡迎與我交流。

作者：墨白，公眾號(hào)：UED_family

本文由 @墨白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議