一、研究背景

在互聯(lián)網(wǎng) UI 設(shè)計(jì)領(lǐng)域，日期選擇器已然形成了一種普遍的設(shè)計(jì)模式，通常借鑒傳統(tǒng)實(shí)體日歷的形式來(lái)降低用戶(hù)學(xué)習(xí)成本。早期的日期范圍的選擇分散于兩個(gè)獨(dú)立的選擇器之中。

隨著用戶(hù)需求的演進(jìn)及選擇效率的考量，部分服務(wù)平臺(tái)例如攜程采用了一種雙日歷并列的界面設(shè)計(jì)，此舉讓用戶(hù)能在同一界面同時(shí)選擇起始和結(jié)束日期。鑒于攜程酒店預(yù)訂的最長(zhǎng)時(shí)限為 31 晚，這一并列雙日歷的設(shè)計(jì)顯示出其直觀和高效的優(yōu)點(diǎn)，從而被廣泛認(rèn)可并采用，越來(lái)越多的日期范圍選擇趨同于這種方式。

在這一傳統(tǒng)布局的基礎(chǔ)上，一些大型科技公司如螞蟻金服和字節(jié)跳動(dòng)，進(jìn)一步在前端組件中集成了周、季、月、年的選擇功能，以及相關(guān)的范圍選擇交互。

季度選擇，在此組件中擴(kuò)展設(shè)計(jì)成了這樣：

盡管我對(duì)這些公司的綜合設(shè)計(jì)能力和前端技術(shù)表示贊賞，我也不禁產(chǎn)生疑問(wèn)：這樣的設(shè)計(jì)是否真的是最優(yōu)解？在使用細(xì)節(jié)上似乎依然存在不便與不一致的問(wèn)題。是否存在更合適的設(shè)計(jì)方案？這樣的疑惑一直藏在心中，多年從業(yè)未曾有機(jī)會(huì)深入研究或嘗試改進(jìn)。面對(duì)已足夠強(qiáng)大且美觀的開(kāi)源組件，前端的直接復(fù)用無(wú)疑節(jié)省了大量的工作，直至某一天……

二、當(dāng)前問(wèn)題

在日常的產(chǎn)研和項(xiàng)目交付過(guò)程中，我們選擇了某一家的開(kāi)源日期選擇控件直接應(yīng)用。然而，有一天，一位客戶(hù)反饋了一個(gè)使用問(wèn)題：

在單個(gè)日期選擇操作中，用戶(hù)點(diǎn)擊 2024 年 4 月 16 日，日歷面板即刻收起并將日期自動(dòng)填充到輸入框中，從而順利完成了日期選擇。

相對(duì)的，在日期范圍選擇操作中，用戶(hù)點(diǎn)擊 2024 年 4 月 16 日卻遇到了問(wèn)題。與單日期選擇操作相仿，日歷面板未有任何反應(yīng)，這使用戶(hù)誤以為未成功選中日期，于是用戶(hù)在同一日期上再次進(jìn)行了點(diǎn)擊。這次，日歷面板收起，日期被填充，最終只選擇了 2024 年 4 月 16 日這一天，明顯不符合用戶(hù)原本的選擇意圖，用戶(hù)必須重新操作一遍，但是困惑還是存在，尤其當(dāng)選擇的開(kāi)始和結(jié)束日期間隔較大時(shí)，這種困惑更為顯著。

針對(duì)此問(wèn)題，客戶(hù)期望采用兩個(gè)獨(dú)立的日期選擇框來(lái)改善交互體驗(yàn)，以清晰分開(kāi)開(kāi)始日期和結(jié)束日期，從而避免混淆與誤操作。

三、設(shè)計(jì)分析

當(dāng)客戶(hù)把問(wèn)題反饋給我們時(shí)，我初時(shí)也感到有些驚訝，思索著問(wèn)題究竟出在哪里。為了更好地理解問(wèn)題，我嘗試著將自己置于一個(gè)政務(wù)工作者的位置，想象自己作為一個(gè)對(duì)計(jì)算機(jī)操作持謹(jǐn)慎態(tài)度的中年用戶(hù)，我的日常單個(gè)日期選擇習(xí)慣如下：

1. 點(diǎn)擊選擇框、彈出日歷面板；
2. 使用鼠標(biāo)選擇所需日期，隨后面板關(guān)閉，選中的日期出現(xiàn)在選擇框中。

然而，在嘗試選擇一個(gè)日期范圍時(shí)，我的操作流程變得不同：

1. 依照習(xí)慣點(diǎn)擊選擇框，日歷面板彈出；
2. 出現(xiàn)兩個(gè)日歷面板稍微讓我感到吃驚，但還是繼續(xù)操作，選擇了開(kāi)始日期“16”。然而日歷面板并沒(méi)有關(guān)閉，我是否操作有誤？為確認(rèn)操作，我再次點(diǎn)擊“16”，這次日歷面板關(guān)閉了；
3. 結(jié)果，日期被回填到選擇框中，僅選中了一天；
4. 再次嘗試打開(kāi)選擇框，重新操作，但光標(biāo)的變化讓我感到困惑，這怎么點(diǎn)啊……

的確，AntDesign 的設(shè)計(jì)團(tuán)隊(duì)在處理這一交互問(wèn)題時(shí)已經(jīng)做出了考慮，嘗試通過(guò)在選擇框內(nèi)加入高亮聚焦條的動(dòng)效，隨用戶(hù)操作從開(kāi)始日期到結(jié)束日期移動(dòng)，并配合面板上方的箭頭同步移動(dòng)來(lái)指引用戶(hù)操作。同時(shí)，面板上還實(shí)現(xiàn)了選擇開(kāi)始日期后將之前的日期置灰禁用的反饋機(jī)制。

然而，盡管設(shè)計(jì)上做出了這些努力，卻依然難以打破用戶(hù)對(duì)單日選擇操作的習(xí)慣性思維。特別是，操作反饋細(xì)節(jié)通常在選擇框位置，而用戶(hù)的注意力在操作時(shí)多集中在日歷面板上，因而可能會(huì)忽略選擇框附近的精妙設(shè)計(jì)。

通過(guò)分析，我們認(rèn)識(shí)到問(wèn)題的核心在于：

1. 日期范圍選擇與單日期選擇之間的交互差異過(guò)大；
2. 在用戶(hù)進(jìn)行開(kāi)始日期選擇時(shí)，提供的交互反饋過(guò)于微弱，缺乏足夠明確的操作指引。

四、創(chuàng)新方案

在尋找解決方案的過(guò)程中，我們的團(tuán)隊(duì)深入調(diào)研了現(xiàn)存的日期選擇控件，希望找到一個(gè)更適合的解決方案。雖然大多數(shù)選擇器在設(shè)計(jì)和功能上并無(wú)太大差異，華為 DevUI 新版的日期選擇器卻引起了我們的注意。

DevUI 的這款創(chuàng)新日期選擇器打破了傳統(tǒng)的雙日歷面板設(shè)計(jì)，采用了縱向的日歷布局，允許用戶(hù)通過(guò)鼠標(biāo)滾輪快速切換月份和年份。其全新的設(shè)計(jì)理念和流暢的交互體驗(yàn)為我們提供了全新的視角。

在細(xì)看 DevUI 日期選擇器的范圍選擇功能時(shí)，我們注意到它會(huì)在選中開(kāi)始日期后使其微微閃爍，以此提示用戶(hù)；然而，這種方式依然缺乏更具體的指引，用戶(hù)仍然需要通過(guò)鼠標(biāo)的移動(dòng)來(lái)進(jìn)行探索。這表明，即使是 DevUI，也未能完全解決日期范圍選擇的根本問(wèn)題。

但是，站在巨人的肩膀上總能讓我們看得更遠(yuǎn)。從 AntDesign 日期選擇器中的橫向高亮聚焦條動(dòng)效得到啟發(fā)，我們意識(shí)到如果能將這種動(dòng)效應(yīng)用在用戶(hù)視線(xiàn)的焦點(diǎn)上，不就能很好的提示用戶(hù)，指導(dǎo)用戶(hù)選擇范圍了嗎？

具體而言，當(dāng)用戶(hù)選定起始日期，而光標(biāo)未移動(dòng)時(shí)，在日歷面板上自動(dòng)移動(dòng)聚焦區(qū)域，便可以直觀地暗示用戶(hù)應(yīng)如何選擇日期范圍。DevUI 的縱向日歷面板設(shè)計(jì)可以很好地適用這種移動(dòng)動(dòng)效，通過(guò)面板的滾動(dòng)而不移動(dòng)鼠標(biāo)，用戶(hù)便能立刻接收到范圍選擇的指引。

這一方案通過(guò)團(tuán)隊(duì)內(nèi)的多輪 demo 測(cè)試并獲得了廣泛認(rèn)可，證明了它有效地解決了日期范圍選擇的核心問(wèn)題。

五、設(shè)計(jì)細(xì)節(jié)

為了實(shí)現(xiàn)自然流暢的動(dòng)效，我們深入探討了像素級(jí)的設(shè)計(jì)細(xì)節(jié)，重點(diǎn)優(yōu)化如下：

1. 設(shè)定日歷面板中每個(gè)月份均以六行顯示，確保月份滾動(dòng)的連續(xù)性和一致性步頻；
2. 模仿傳統(tǒng)日歷的月份提示采用水印效果，以減少月份之間的視覺(jué)間隔，增強(qiáng)整體的連貫性；
3. 設(shè)定日歷面板為固定的九行空間，其中當(dāng)前月份占用六行，下個(gè)月份占用一行，前一個(gè)月份占用兩行，從而在滾動(dòng)中始終保持日期提示的可見(jiàn)性；
4. 當(dāng)用戶(hù)選定起始日期后，自動(dòng)滾動(dòng)日歷面板，將選中行調(diào)至頂部，提供清晰的范圍選擇指引，即使鼠標(biāo)未移動(dòng)；
5. 保持了單日期選擇與日期范圍選擇外觀上的一致性，通過(guò)不同的選中日期樣式進(jìn)行區(qū)分。

在此基礎(chǔ)上，我們繼續(xù)研究了日期加時(shí)刻的范圍選擇，認(rèn)為有必要一同優(yōu)化：

DevUI 與 AntUI 的設(shè)計(jì)是回到單個(gè)面板選擇日期+時(shí)刻，點(diǎn)擊“確定”后再去選擇結(jié)束日期+時(shí)刻，再點(diǎn)“確定”，共用一個(gè)面板顯示了開(kāi)始日期和結(jié)束日期，但是時(shí)刻卻只顯示了一個(gè)（開(kāi)始時(shí)刻或結(jié)束時(shí)刻）。

這種處理方式與無(wú)時(shí)刻的日期范圍選擇交互不一致，且不符合大多數(shù)實(shí)際應(yīng)用場(chǎng)景。一般情況下，用戶(hù)希望開(kāi)始和結(jié)束日期的時(shí)刻一致，如有差異才需單獨(dú)調(diào)整。

因此這個(gè)設(shè)計(jì)應(yīng)該延續(xù)日期范圍選擇，用戶(hù)在快速選定日期范圍后，根據(jù)需要設(shè)置時(shí)刻范圍，并同步展示整個(gè)日期范圍與時(shí)刻的起止點(diǎn)，這樣更符合真實(shí)使用情境。

此外，我們也對(duì)周、月、季度選擇進(jìn)行了優(yōu)化，統(tǒng)一了設(shè)計(jì)邏輯和風(fēng)格，并摒棄了年份選擇的非直觀的 Z 字排列方式，改為更符合邏輯的縱向排布，使用戶(hù)體驗(yàn)更為直觀和一致。

結(jié)語(yǔ)

我們以日期范圍選擇作為突破口，全面研究和分析了整個(gè)日期選擇控件的設(shè)計(jì)。立足于 AntDesign、ArcoDesign、DevUI 三大優(yōu)秀框架，進(jìn)行了創(chuàng)新與改進(jìn)，完成了整套日期選擇控件的細(xì)化設(shè)計(jì)，了卻內(nèi)心多年的疑惑。在這一過(guò)程中，我們與團(tuán)隊(duì)的前端工程師進(jìn)行了深度溝通和合作，計(jì)劃經(jīng)過(guò)充分驗(yàn)證后，將源碼開(kāi)源給行業(yè)選用，敬請(qǐng)期待。

番外篇：

關(guān)于攜程的案例，其 Web 端和移動(dòng)端的交互差異引發(fā)了我們的深思。攜程的 Web 端延續(xù)了傳統(tǒng)的橫向日期選擇設(shè)計(jì)，而移動(dòng)端因應(yīng)屏幕尺寸限制，采用了縱向布局。這種布局改變?cè)谔峁┝艘粋€(gè)重要的啟示：為何不將移動(dòng)端的直觀縱向設(shè)計(jì)理念應(yīng)用于 Web 端，從而實(shí)現(xiàn)多端設(shè)計(jì)的統(tǒng)一和優(yōu)化用戶(hù)體驗(yàn)？如果能將這種設(shè)計(jì)思路反哺到 Web 端，不僅能夠?qū)崿F(xiàn)功能上的一致性，還有利于提升整體的用戶(hù)體驗(yàn)，使之更加流暢和直觀。這樣的跨端一致性設(shè)計(jì)，無(wú)疑會(huì)為用戶(hù)帶來(lái)更加舒適和便捷的操作感受，是值得我們進(jìn)一步考慮并實(shí)施的方向。

碧野青風(fēng)