起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識實(shí)戰(zhàn)案例｜三步設(shè)計(jì)完美的日期選擇器
什么樣的日期選擇器是好的，而哪些又是不好用的？本文作者將結(jié)合自身經(jīng)驗(yàn)，與你聊聊，enjoy~
這幾年，我在不同的項(xiàng)目里做過很多“日期選擇器”，不過我仍然還在努力做出最完美的那一個。今天我們就一起來研究研究什么樣的日期選擇器是好的，而哪些又是不好用的。日期選擇器的設(shè)計(jì)看起來很簡單，其實(shí)對很多用戶來說“選擇日期”是一種痛苦的體驗(yàn)。我們在網(wǎng)上隨處可見設(shè)計(jì)糟糕的日期選擇器。
我認(rèn)為要想設(shè)計(jì)出體驗(yàn)良好的日期選擇器，開始做的時候就要慎重?；c(diǎn)時間問問題、尋找答案、構(gòu)建用戶故事、查找相關(guān)資料。
常見的日期輸入形式
1. 文本輸入
最簡單的設(shè)計(jì)形式就是讓用戶自己輸入日期，只要有適當(dāng)?shù)臋z測方式，這個設(shè)計(jì)還是不錯的。這種方法常常和日歷日期選擇器一起使用。
2. 下拉列表
采用下拉菜單的方式來選擇日期、月份、年份，這種方式在網(wǎng)頁上使用的比較多。不過呢，除了年月日，當(dāng)用戶還需要輸入時間的時候，這種設(shè)計(jì)就讓人很煩了。
3. 日歷
當(dāng)需要選擇的日期是一個范圍的時候，日歷的形式是最常用的。在網(wǎng)上隨處可見這種設(shè)計(jì)形式，在移動端也是很常用的。
4. 時間軸
如果需要選擇的日期范圍是在一段限定的時間內(nèi)，這種設(shè)計(jì)還是不錯的。如果時間較長的話，那么這種方式就不太準(zhǔn)確了，同時呢，不適用移動端。
5. 移動設(shè)備上的滾動日期選擇器
如果用戶選擇的日期不是特別遠(yuǎn)的話，這種設(shè)計(jì)還是挺好用的。
以上介紹的這五種日期選擇器不管是單獨(dú)使用還是融合在一起，只要得當(dāng)，都能創(chuàng)造好的用戶體驗(yàn)。重點(diǎn)是，在做具體的項(xiàng)目的時候，我們該如何選擇呢？
案例解析
我們通過真實(shí)的案例分析一下，因?yàn)榫唧w的使用場景才是我們做設(shè)計(jì)決策的依據(jù)，我們來為以下場景選擇最適合的日期選擇器。
案例：設(shè)備性能分析
用戶：技術(shù)經(jīng)理
用戶主要目標(biāo)：分析設(shè)備的性能，檢測設(shè)備隨著時間的推移性能下降的情況。
用戶問答
我們已經(jīng)知道了用戶的目標(biāo)，日期選擇器就是用來實(shí)現(xiàn)目標(biāo)的工具之一。不過在我們做決定之前還是有很多問題需要去問用戶。
（1）日期選擇器是用來做什么的？
“看性能數(shù)據(jù)，我希望可以方便地看到每個特定時間段的報告。”
（2）你是需要選擇日期還是日期范圍？
“日期范圍，比如6小時內(nèi)或者一周內(nèi)這樣的。”
（3）有比較常用的日期范圍嗎？
“嗯，我經(jīng)常需要6小時段的數(shù)據(jù)，有時候也會用一個月內(nèi)的數(shù)據(jù)?！?/p>
（4）只需要選擇日期嗎？還是具體的時間也要選擇的？
“日期肯定是要的，時間也需要，不然我怎么選6小時內(nèi)的數(shù)據(jù)？”
（5）您這個日期選擇器是在網(wǎng)頁上用還是在手機(jī)上用？
“我們是在網(wǎng)頁上使用的，應(yīng)該是平板電腦。但是管理層希望以后也能有手機(jī)版，我還不確定行不行呢?！?/p>
（6）關(guān)于日期選擇器，目前您使用的產(chǎn)品有讓您覺得體驗(yàn)不好的地方嗎？
“我必須點(diǎn)擊數(shù)據(jù)表中的頁面，才能查看過去的報告。這挺麻煩的，不過我也習(xí)慣了。”
（7）你需要選擇很久以前的日期嗎？
“我有時候需要查看去年的數(shù)據(jù)，看看性能的變化”
畫草圖
通過用戶訪談，我們已經(jīng)獲取了基本的信息，現(xiàn)在可以開始構(gòu)建日期選擇器了。
1. 日歷表
這可以說是最常見的選擇日期范圍的模式了，而且移動端也能用。日歷的具體內(nèi)容應(yīng)該滿足世界某些地區(qū)用戶的需求。在我們的案例中，用戶需要的是星期制。
2. 文本輸入領(lǐng)域
有了輸入功能，當(dāng)用戶需要選擇很久之前的一個日期的時候，他們就可以直接輸入，再不用上上下下翻半天了。有一點(diǎn)需要注意的是，不同的國家表達(dá)日期的格式是不一樣的。在我們的案例中，dd/mm/yyyy對用戶來說是最熟悉的一種日期形式了。
3. 時間選擇器
這可是完全不同的部分了，但是在第一次的版本中，我們先用帶有箭頭的文本輸入小時和分鐘。
4. 預(yù)設(shè)
對于常用的時間段，我們在下拉列表中先預(yù)設(shè)好。為了提供最好的體驗(yàn)，應(yīng)該對預(yù)先設(shè)定的時間段進(jìn)行仔細(xì)的篩選。
下一步就是把這些部分都合在一起，在這一步很多細(xì)節(jié)都需要修改，最后呈現(xiàn)出來的額初步結(jié)果如下圖：
做設(shè)計(jì)
完成了上述步驟后，我們就可以開始設(shè)計(jì)出來了。我快速的做了一個版本，讓大家看看大概是什么樣子的。
這是第一版電子稿，后續(xù)經(jīng)過測試我肯定還會做很多修改，直到用戶覺得好用為止。
原文作者：Kateryna Romanenchuk
原文地址：https://uxdesign.cc/date-picker-design-5c5ef8f35286
翻譯：熊小熊（微信公眾號：集創(chuàng)堂）
本文由 @熊小熊 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來源于網(wǎng)絡(luò)
在