什么樣的日期選擇器是好的，而哪些又是不好用的？本文作者將結(jié)合自身經(jīng)驗(yàn)，與你聊聊，enjoy~

這幾年，我在不同的項(xiàng)目里做過(guò)很多“日期選擇器”，不過(guò)我仍然還在努力做出最完美的那一個(gè)。今天我們就一起來(lái)研究研究什么樣的日期選擇器是好的，而哪些又是不好用的。日期選擇器的設(shè)計(jì)看起來(lái)很簡(jiǎn)單，其實(shí)對(duì)很多用戶來(lái)說(shuō)“選擇日期”是一種痛苦的體驗(yàn)。我們?cè)诰W(wǎng)上隨處可見(jiàn)設(shè)計(jì)糟糕的日期選擇器。

我認(rèn)為要想設(shè)計(jì)出體驗(yàn)良好的日期選擇器，開(kāi)始做的時(shí)候就要慎重?；c(diǎn)時(shí)間問(wèn)問(wèn)題、尋找答案、構(gòu)建用戶故事、查找相關(guān)資料。

常見(jiàn)的日期輸入形式

1. 文本輸入

最簡(jiǎn)單的設(shè)計(jì)形式就是讓用戶自己輸入日期，只要有適當(dāng)?shù)臋z測(cè)方式，這個(gè)設(shè)計(jì)還是不錯(cuò)的。這種方法常常和日歷日期選擇器一起使用。

2. 下拉列表

采用下拉菜單的方式來(lái)選擇日期、月份、年份，這種方式在網(wǎng)頁(yè)上使用的比較多。不過(guò)呢，除了年月日，當(dāng)用戶還需要輸入時(shí)間的時(shí)候，這種設(shè)計(jì)就讓人很煩了。

3. 日歷

當(dāng)需要選擇的日期是一個(gè)范圍的時(shí)候，日歷的形式是最常用的。在網(wǎng)上隨處可見(jiàn)這種設(shè)計(jì)形式，在移動(dòng)端也是很常用的。

4. 時(shí)間軸

如果需要選擇的日期范圍是在一段限定的時(shí)間內(nèi)，這種設(shè)計(jì)還是不錯(cuò)的。如果時(shí)間較長(zhǎng)的話，那么這種方式就不太準(zhǔn)確了，同時(shí)呢，不適用移動(dòng)端。

5. 移動(dòng)設(shè)備上的滾動(dòng)日期選擇器

如果用戶選擇的日期不是特別遠(yuǎn)的話，這種設(shè)計(jì)還是挺好用的。

以上介紹的這五種日期選擇器不管是單獨(dú)使用還是融合在一起，只要得當(dāng)，都能創(chuàng)造好的用戶體驗(yàn)。重點(diǎn)是，在做具體的項(xiàng)目的時(shí)候，我們?cè)撊绾芜x擇呢？

案例解析

我們通過(guò)真實(shí)的案例分析一下，因?yàn)榫唧w的使用場(chǎng)景才是我們做設(shè)計(jì)決策的依據(jù)，我們來(lái)為以下場(chǎng)景選擇最適合的日期選擇器。

案例：設(shè)備性能分析

用戶：技術(shù)經(jīng)理

用戶主要目標(biāo)：分析設(shè)備的性能，檢測(cè)設(shè)備隨著時(shí)間的推移性能下降的情況。

用戶問(wèn)答

我們已經(jīng)知道了用戶的目標(biāo)，日期選擇器就是用來(lái)實(shí)現(xiàn)目標(biāo)的工具之一。不過(guò)在我們做決定之前還是有很多問(wèn)題需要去問(wèn)用戶。

（1）日期選擇器是用來(lái)做什么的？

“看性能數(shù)據(jù)，我希望可以方便地看到每個(gè)特定時(shí)間段的報(bào)告?！?/p>

（2）你是需要選擇日期還是日期范圍？

“日期范圍，比如6小時(shí)內(nèi)或者一周內(nèi)這樣的?！?/p>

（3）有比較常用的日期范圍嗎？

“嗯，我經(jīng)常需要6小時(shí)段的數(shù)據(jù)，有時(shí)候也會(huì)用一個(gè)月內(nèi)的數(shù)據(jù)?！?/p>

（4）只需要選擇日期嗎？還是具體的時(shí)間也要選擇的？

“日期肯定是要的，時(shí)間也需要，不然我怎么選6小時(shí)內(nèi)的數(shù)據(jù)？”

（5）您這個(gè)日期選擇器是在網(wǎng)頁(yè)上用還是在手機(jī)上用？

“我們是在網(wǎng)頁(yè)上使用的，應(yīng)該是平板電腦。但是管理層希望以后也能有手機(jī)版，我還不確定行不行呢?！?/p>

（6）關(guān)于日期選擇器，目前您使用的產(chǎn)品有讓您覺(jué)得體驗(yàn)不好的地方嗎？

“我必須點(diǎn)擊數(shù)據(jù)表中的頁(yè)面，才能查看過(guò)去的報(bào)告。這挺麻煩的，不過(guò)我也習(xí)慣了?！?/p>

（7）你需要選擇很久以前的日期嗎？

“我有時(shí)候需要查看去年的數(shù)據(jù)，看看性能的變化”

畫(huà)草圖

通過(guò)用戶訪談，我們已經(jīng)獲取了基本的信息，現(xiàn)在可以開(kāi)始構(gòu)建日期選擇器了。

1. 日歷表

這可以說(shuō)是最常見(jiàn)的選擇日期范圍的模式了，而且移動(dòng)端也能用。日歷的具體內(nèi)容應(yīng)該滿足世界某些地區(qū)用戶的需求。在我們的案例中，用戶需要的是星期制。

2. 文本輸入領(lǐng)域

有了輸入功能，當(dāng)用戶需要選擇很久之前的一個(gè)日期的時(shí)候，他們就可以直接輸入，再不用上上下下翻半天了。有一點(diǎn)需要注意的是，不同的國(guó)家表達(dá)日期的格式是不一樣的。在我們的案例中，dd/mm/yyyy對(duì)用戶來(lái)說(shuō)是最熟悉的一種日期形式了。

3. 時(shí)間選擇器

這可是完全不同的部分了，但是在第一次的版本中，我們先用帶有箭頭的文本輸入小時(shí)和分鐘。

4. 預(yù)設(shè)

對(duì)于常用的時(shí)間段，我們?cè)谙吕斜碇邢阮A(yù)設(shè)好。為了提供最好的體驗(yàn)，應(yīng)該對(duì)預(yù)先設(shè)定的時(shí)間段進(jìn)行仔細(xì)的篩選。

下一步就是把這些部分都合在一起，在這一步很多細(xì)節(jié)都需要修改，最后呈現(xiàn)出來(lái)的額初步結(jié)果如下圖：

做設(shè)計(jì)

完成了上述步驟后，我們就可以開(kāi)始設(shè)計(jì)出來(lái)了。我快速的做了一個(gè)版本，讓大家看看大概是什么樣子的。

這是第一版電子稿，后續(xù)經(jīng)過(guò)測(cè)試我肯定還會(huì)做很多修改，直到用戶覺(jué)得好用為止。

原文作者：Kateryna Romanenchuk

原文地址：https://uxdesign.cc/date-picker-design-5c5ef8f35286

翻譯：熊小熊（微信公眾號(hào)：集創(chuàng)堂）

本文由 @熊小熊 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)源于網(wǎng)絡(luò)