在使用各種 APP 的過(guò)程中，我們經(jīng)常會(huì)遇到選擇日期的場(chǎng)景，比如記賬的時(shí)候、安排行程的時(shí)候、購(gòu)買(mǎi)車(chē)票以及預(yù)訂酒店的時(shí)候。有時(shí)我們需要選擇一個(gè)日期，有時(shí)則需要選擇兩個(gè)日期或一段日期，那么在不同的使用場(chǎng)景中我們應(yīng)該使用什么樣的日期選擇器呢？這篇文章就和大家分享一下日期選擇器的常見(jiàn)樣式和使用場(chǎng)景。

選擇一個(gè)日期

有一種場(chǎng)景是單純地選擇一個(gè)日期夠了，還有一種場(chǎng)景是除了選擇日期外還需要添加任務(wù)行程，這就用到了兩種不同的方式。

1.底部日歷彈窗

通過(guò)點(diǎn)擊頁(yè)面中的選擇日期按鈕，頁(yè)面底部彈出日歷，選擇完后自動(dòng)確認(rèn)。這種方法多使用在只需要選擇日期的場(chǎng)景。

優(yōu)點(diǎn)是：省去多余的操作，用戶(hù)使用方便。

缺點(diǎn)是：功能單一，除了選擇日期外不能進(jìn)行其他操作。如下圖：

以隨手記賬為例，它的產(chǎn)品目標(biāo)是讓用戶(hù)記錄某天的花銷(xiāo)情況，側(cè)重點(diǎn)是讓用戶(hù)選擇花銷(xiāo)的具體內(nèi)容和數(shù)量，時(shí)間是次要的，所以它使用了底部日歷彈窗的方式。

2.頂部下拉日歷

默認(rèn)狀態(tài)下，頂部顯示一行日歷，下拉顯示完整日歷，可以添加其他功能。這種方式多用在除了選擇日期外還需要進(jìn)行其他操作的場(chǎng)景。

優(yōu)點(diǎn)是：頁(yè)面面積大，可添加其他內(nèi)容。

缺點(diǎn)是：操作相對(duì)復(fù)雜，用戶(hù)操作成本較高。如下圖：

以滴答清單為例，它的產(chǎn)品目標(biāo)是讓用戶(hù)安排某天要做的任務(wù)行程，用戶(hù)首先要確定日期，然后再去添加當(dāng)天的任務(wù)，所以它使用了這種方式。

選擇兩個(gè)日期

有一種場(chǎng)景是單純地選擇一個(gè)日期夠了，還有一種場(chǎng)景是除了選擇日期外還需要添加任務(wù)行程，這就用到了兩種不同的方式。

1.兩個(gè)頁(yè)面間跳轉(zhuǎn)

首先選擇完去程時(shí)間后，再跳轉(zhuǎn)到第二個(gè)頁(yè)面選擇返程時(shí)間。常使用在需要選擇一到兩個(gè)日期的場(chǎng)景下。

優(yōu)點(diǎn)是：比較靈活，既可以選擇單個(gè)日期，也可以選擇兩個(gè)日期；在日歷中添加價(jià)格，讓用戶(hù)很輕易地做出對(duì)比。

缺點(diǎn)是：兩個(gè)頁(yè)面來(lái)回跳轉(zhuǎn)增加了操作成本。如下圖：

以馬蜂窩購(gòu)買(mǎi)機(jī)票的功能為例，它的產(chǎn)品目標(biāo)是讓用戶(hù)購(gòu)買(mǎi)單程和往返機(jī)票。如果只是購(gòu)買(mǎi)單程票的話(huà)，我們選擇完去程日期后直接點(diǎn)搜索就可以了；但是如果要買(mǎi)往返票，我們除了要選擇去程日期，還要跳轉(zhuǎn)到另一個(gè)頁(yè)面選擇返程日期。這樣做既滿(mǎn)足了購(gòu)買(mǎi)單程票用戶(hù)的需求，又滿(mǎn)足了購(gòu)買(mǎi)往返票用戶(hù)的需求。

這里需要注意的是：在用戶(hù)選擇返程日期的時(shí)候，去程日期要在頁(yè)面中顯示出來(lái)，給用戶(hù)一個(gè)反饋，讓用戶(hù)確認(rèn)自己之前的選擇內(nèi)容無(wú)誤，再進(jìn)行下一步操作。

2.兩個(gè) Tab 間跳轉(zhuǎn)

這種方法是通過(guò)一個(gè)頁(yè)面中用兩個(gè) Tab 跳轉(zhuǎn)來(lái)實(shí)現(xiàn)，常用在需要選擇兩個(gè)日期的場(chǎng)景中。

優(yōu)點(diǎn)是：操作簡(jiǎn)單，省去來(lái)回切換頁(yè)面的步驟。

缺點(diǎn)是：比較死板，沒(méi)有上一種方式靈活，只能選擇兩個(gè)日期，如下圖：

以攜程旅行購(gòu)買(mǎi)火車(chē)票功能為例，它首先讓用戶(hù)選擇“單程”還是“往返”，然后跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，點(diǎn)擊單程就只能選擇去程的票，點(diǎn)擊往返，則可以同時(shí)選擇去程和返程的票。

選擇一段日期

在預(yù)定酒店的時(shí)候我們需要選擇“入住”到“離開(kāi)”的這一段日期，常用同一個(gè)頁(yè)面點(diǎn)擊兩次完成操作的方式。

同一個(gè)頁(yè)面點(diǎn)擊兩次完成操作

通過(guò)點(diǎn)擊兩下，分別選擇兩個(gè)日期，之間的日期全部包含在內(nèi)。

優(yōu)點(diǎn)是：這種方法操作簡(jiǎn)潔方便，給用戶(hù)的反饋直觀明了。

缺點(diǎn)是：如果沒(méi)有確定按鈕，用戶(hù)誤觸后必須重新選擇。如圖：

上圖中，馬蜂窩、驢媽媽、攜程旅行的預(yù)訂酒店頁(yè)面，都使用這種方式，第一次點(diǎn)擊選擇入住日期，第二次點(diǎn)擊選擇離店日期。驢媽媽和攜程旅行沒(méi)有確定按鈕，如果用戶(hù)選擇錯(cuò)了就必須重新選擇。

PS：這種方式也可以用在選擇兩個(gè)日期的場(chǎng)景下，去掉中間的日期就可以了。

總結(jié)

今天主要講的一件事是日期選擇器的常見(jiàn)樣式及使用場(chǎng)景，我總結(jié)了以下3點(diǎn)：

1.當(dāng)產(chǎn)品目標(biāo)是只需要選擇一個(gè)日期沒(méi)有其他功能需求時(shí)，直接使用較為簡(jiǎn)潔的彈窗方式即可；如果還有其他需求場(chǎng)景，可選擇頂部下拉日期的方式。

2.當(dāng)產(chǎn)品目標(biāo)是只需要選擇兩個(gè)日期時(shí)，可以使用兩個(gè) Tab 跳轉(zhuǎn)的方式；如果既需要選擇一個(gè)日期，又需要選擇兩個(gè)日期，則可以使用兩個(gè)頁(yè)面間跳轉(zhuǎn)的方式。

3.當(dāng)產(chǎn)品目標(biāo)是選擇一段日期時(shí)，可以使用同一個(gè)頁(yè)面點(diǎn)擊兩次完成操作的方式，這種方式操作簡(jiǎn)單，反饋直觀明了。

作者：青山

公眾號(hào)：海鹽社