日期選擇器這類(lèi)常用的交互控件，往往很容易被我們忽略。而正是這些常用元素的設(shè)計(jì)，才能體現(xiàn)產(chǎn)品的專(zhuān)注和用心程度。

日期選擇控件（選擇器）是讓用戶(hù)在應(yīng)用中選擇（填入）日期或時(shí)間的一類(lèi)控件，尤其是在B端產(chǎn)品中非常常見(jiàn)。這個(gè)控件看似簡(jiǎn)單，但它的易用性也容易被忽略。碰到需要這個(gè)功能時(shí)，很多開(kāi)發(fā)者（當(dāng)然也包括設(shè)計(jì)師）立即會(huì)說(shuō)，“網(wǎng)上有那么多酷炫的選擇器，而且都是開(kāi)源的，我們找一個(gè)合適的就行了，我們沒(méi)有必要為這個(gè)浪費(fèi)時(shí)間……”但是，一切并沒(méi)有那么簡(jiǎn)單。大多開(kāi)源的選擇器，要么丑陋不堪（大多源自好幾年前的xp時(shí)代設(shè)計(jì)風(fēng)格），要么異常難用（很多都是來(lái)源于后臺(tái)公工具類(lèi)應(yīng)用，通用但遠(yuǎn)遠(yuǎn)不夠好用）；當(dāng)然，還有一些選擇器看似很酷且富有個(gè)性，但往往與我們產(chǎn)品的規(guī)范格格不入。

我并不是強(qiáng)調(diào)每次我們都要重新“造輪子”，只是想說(shuō)，日期選擇器的設(shè)計(jì)，同樣要考慮很多的易用性問(wèn)題。無(wú)論是選擇已有開(kāi)源控件或是在其基礎(chǔ)上改進(jìn)，亦或是完全重新設(shè)計(jì)一個(gè)酷炫的個(gè)性化樣式，在易用性上有一些原則和建議，可以幫助我們創(chuàng)造更好的產(chǎn)品使用體驗(yàn)。

?1、默認(rèn)選中項(xiàng)：應(yīng)該有一個(gè)合適的默認(rèn)值

并不是所有的控件默認(rèn)值都是今天或當(dāng)前時(shí)間的。應(yīng)該根據(jù)字段的類(lèi)型來(lái)確定一個(gè)合理的默認(rèn)時(shí)間，這樣可以方便用戶(hù)快速錄入，或者減少點(diǎn)擊次數(shù)。比如，一個(gè)toB的協(xié)同工具的待辦事項(xiàng)功能，而根據(jù)我們的場(chǎng)景，創(chuàng)建這些事項(xiàng)通常是要求在工作日最后一天完成，那么，我們可以讓默認(rèn)值為當(dāng)前周的周五；而一個(gè)錄入用戶(hù)生日的控件，默認(rèn)字段需要根據(jù)用戶(hù)群大概年齡，來(lái)給一個(gè)合理的中間值，比如你的產(chǎn)品核心用戶(hù)群為20-30歲的，那么默認(rèn)時(shí)間最好設(shè)為1990-01-01……想象一下，如果這里的默認(rèn)時(shí)間是當(dāng)前日期（很多糟糕的設(shè)計(jì)都是這樣做的），那么幾乎所有的用戶(hù)都要點(diǎn)擊很多次才能找到自己要選的選項(xiàng)。這個(gè)原則雖然簡(jiǎn)單，但是很容易被忽略。

2、控制可選/錄入的字段范圍

為了減少用戶(hù)出錯(cuò)，保證產(chǎn)品數(shù)據(jù)的正常顯示，日期/時(shí)間控件應(yīng)當(dāng)要控制可選的范圍。常見(jiàn)的有兩種控制方法，一是在選擇時(shí)將不可選的日期置灰；二是選擇后進(jìn)行校驗(yàn)，若不符合要求，則不能錄入并告知用戶(hù)（一般是toast提示）。第一種方法是將校驗(yàn)放在了用戶(hù)選擇之前，能夠杜絕用戶(hù)輸入錯(cuò)誤的數(shù)據(jù)，且無(wú)需考慮出錯(cuò)的交互設(shè)計(jì)；第二種同樣能達(dá)到限制輸入的目的，但需額外的校驗(yàn)和設(shè)計(jì)（toast提示或彈窗），但我認(rèn)為這種提示是必要的，因?yàn)楦嬖V用戶(hù)為什么有的選項(xiàng)不能選，可以減少用戶(hù)的疑惑。

3、清晰明確的提交或確定按鈕

我見(jiàn)過(guò)很多非常糟糕的日期控件，在你選擇或切換選項(xiàng)后，還需要點(diǎn)擊輸入框或者空白處，才能填入/顯示已選擇的項(xiàng)目。特別是那種選擇日期和設(shè)置時(shí)間結(jié)合的控件，如果沒(méi)有比較明確的提交和確定按鈕，用戶(hù)會(huì)非常緊張和不知所措：“我已經(jīng)選擇完了，要怎樣提交呢？”當(dāng)然你會(huì)說(shuō)，點(diǎn)擊選擇器以外的空白區(qū)就可以退出（實(shí)際上很多都是這樣做的），但這并不能給用戶(hù)直觀的暗示，而且需要一定的認(rèn)知成本。對(duì)于那種只需要點(diǎn)選日期的情況，在點(diǎn)擊時(shí)就自動(dòng)寫(xiě)入已選項(xiàng)并自動(dòng)關(guān)閉控件，是一種比較合理的做法。

最好有個(gè)明顯的“確定”按鈕

沒(méi)有明確的“確定”按鈕，用戶(hù)會(huì)感到困惑

4、減少點(diǎn)擊次數(shù)

要錄入一個(gè)日期區(qū)間，意味著用戶(hù)要錄入兩個(gè)日期。很多設(shè)計(jì)師就會(huì)下意識(shí)的使用兩個(gè)日期選擇器，其實(shí)是完全沒(méi)有必要的。首先一個(gè)日期選擇器完全可以完成日期段的錄入，而且多一個(gè)日期選擇器會(huì)增加用戶(hù)的點(diǎn)擊次數(shù)。

將兩個(gè)控價(jià)合并，是一種比較明智的選擇

當(dāng)然，如果你使用了統(tǒng)一的控件，又不想去設(shè)計(jì)新的控件，還有一種替代的方案：當(dāng)在第一個(gè)控件中選擇日期后，自動(dòng)聚焦到第二個(gè)輸入框，并彈出選擇器。這樣同樣可以減少點(diǎn)擊次數(shù)；但如果用戶(hù)如果只是想修改其中某個(gè)時(shí)間，那么自動(dòng)彈出另一個(gè)會(huì)讓用戶(hù)感到困惑和多余。

5、標(biāo)識(shí)出特定日期

用戶(hù)并非總是“記憶”在選擇器中顯示或標(biāo)注例如當(dāng)天、已選默認(rèn)值、周末、節(jié)假日等特殊的日期，可以幫助用戶(hù)更好、更快地做出選擇。例如，在選擇購(gòu)買(mǎi)火車(chē)票日期時(shí)，標(biāo)識(shí)出春節(jié)的七天，可以幫助很多用戶(hù)快速選擇出發(fā)和回城的日期，畢竟不是所有人都能很快反應(yīng)過(guò)來(lái)，除夕是幾月幾號(hào)，初七又是幾號(hào)？這樣可以減少用戶(hù)的記憶和判斷成本，幫助用戶(hù)快速做出選擇，同時(shí)可以避免用戶(hù)犯錯(cuò)。

6、特殊的操作按鈕

對(duì)于一些通過(guò)填入日期或時(shí)間來(lái)篩選數(shù)據(jù)的選擇器，有必要在選擇器中加上如“清空”的按鈕，允許用戶(hù)快速清除已選項(xiàng)，回到數(shù)據(jù)的初始狀態(tài)。一些錄入型的選擇器，也會(huì)加上類(lèi)似“清除”的按鈕，方便用戶(hù)快速清除已填入的選項(xiàng)，或重新選擇。還有一些選擇器，會(huì)加上“今日”、“當(dāng)月”、“本季度”等快速選擇按鈕，這對(duì)于某些特定的夜晚場(chǎng)景，可以有效幫助用戶(hù)快速選擇常用的選項(xiàng)，提高操作效率。

寫(xiě)在最后

日期選擇器這類(lèi)常用的交互控件，往往很容易被我們忽略。而正是這些常用元素的設(shè)計(jì)，才能體現(xiàn)產(chǎn)品的專(zhuān)注和用心程度。于細(xì)微處的恰當(dāng)設(shè)計(jì)，往往能給用戶(hù)帶來(lái)可用性和情感上的愉悅，我想這就是設(shè)計(jì)的重要目標(biāo)之一吧。

日常設(shè)計(jì)小結(jié)，歡迎拍磚指正。

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

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