一、研究背景

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

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

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

季度選擇，在此組件中擴展設計成了這樣：

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

二、當前問題

在日常的產(chǎn)研和項目交付過程中，我們選擇了某一家的開源日期選擇控件直接應用。然而，有一天，一位客戶反饋了一個使用問題：

在單個日期選擇操作中，用戶點擊 2024 年 4 月 16 日，日歷面板即刻收起并將日期自動填充到輸入框中，從而順利完成了日期選擇。

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

針對此問題，客戶期望采用兩個獨立的日期選擇框來改善交互體驗，以清晰分開開始日期和結束日期，從而避免混淆與誤操作。

三、設計分析

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

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

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

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

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

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

通過分析，我們認識到問題的核心在于：

1. 日期范圍選擇與單日期選擇之間的交互差異過大；
2. 在用戶進行開始日期選擇時，提供的交互反饋過于微弱，缺乏足夠明確的操作指引。

四、創(chuàng)新方案

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

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

在細看 DevUI 日期選擇器的范圍選擇功能時，我們注意到它會在選中開始日期后使其微微閃爍，以此提示用戶；然而，這種方式依然缺乏更具體的指引，用戶仍然需要通過鼠標的移動來進行探索。這表明，即使是 DevUI，也未能完全解決日期范圍選擇的根本問題。

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

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

這一方案通過團隊內的多輪 demo 測試并獲得了廣泛認可，證明了它有效地解決了日期范圍選擇的核心問題。

五、設計細節(jié)

為了實現(xiàn)自然流暢的動效，我們深入探討了像素級的設計細節(jié)，重點優(yōu)化如下：

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

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

DevUI 與 AntUI 的設計是回到單個面板選擇日期+時刻，點擊“確定”后再去選擇結束日期+時刻，再點“確定”，共用一個面板顯示了開始日期和結束日期，但是時刻卻只顯示了一個（開始時刻或結束時刻）。

這種處理方式與無時刻的日期范圍選擇交互不一致，且不符合大多數(shù)實際應用場景。一般情況下，用戶希望開始和結束日期的時刻一致，如有差異才需單獨調整。

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

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

結語

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

番外篇：

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

碧野青風