日曆與日期選擇系統
目的
日曆與日期選擇系統提供了一套方法論，用於設計讓使用者能選取單一日期、日期範圍或特定時段的介面。選取日期屬於高度摩擦的任務，牽涉複雜的心智模型（例如「下一個星期二」、「該月最後一個週末」）。此系統確保日期選擇器在視覺上清晰、易於透過鍵盤與觸控操作，並能針對有效性與可預約性提供即時反饋。
使用案例
- 預訂與預約： 選取飯店入住/退房日期或航班出發日期。
- 排程： 選擇會議、預約或送貨的時段。
- 分析與報告： 定義資料篩選的客製化日期範圍（開始日期到結束日期）。
- 生日輸入： 為年齡驗證或個人資料設定而擷取出生日期。
- 活動規劃： 在專案管理工具中管理截止日期或里程碑。
何時不應使用
- 簡單日期： 若只需一個眾所皆知的日期（如「今天」或「昨天」），請改用簡單的按鈕或連結。
- 記憶性日期： 對於使用者已牢記的日期（如生日或信用卡有效期限），請使用標準的文字輸入框搭配
type="number"或type="tel"，而非日曆網格，因為打字比在網格中導覽更快。 - 相對時間： 若使用者只需選取「過去 7 天」或「本月」，請改用下拉式選單或按鈕群組，而非完整的日曆。
輸入
- 選擇模式： 單一日期、日期範圍或時段。
- 限制條件： 最小/最大日期、禁用日期（例如過去的日期、已額滿的時段）。
- 上下文： 它是獨立的頁面元素，還是觸發彈出視窗/模態框的按鈕？
- 在地化： 地區日期格式（MM/DD/YYYY 與 DD/MM/YYYY）及每週起始日（星期日 vs 星期一）。
輸出
- 網格結構規格： 月份標題、週間標籤及日期儲存格的視覺定義。
- 狀態矩陣： 「今天」、「已選取」、「範圍起點」、「範圍終點」、「範圍內」、「懸停」及「禁用」狀態的視覺處理方式。
- 輸入連接規格： 日曆如何與文字輸入欄位關聯（觸發圖示、格式及手動輸入支援）。
- 無障礙計畫： 鍵盤快捷鍵（方向鍵、Enter、Escape）及用於狀態更新的 ARIA 即時區域。
工作流程
1. 選取輸入模式
選擇使用者輸入日期的方式：
- 直接輸入： 遮罩文字輸入框。最適合快速輸入已知日期。
- 選取器觸發： 一個帶有日曆圖示的輸入框，點擊後會開啟覆蓋層。適用於大多數使用案例的標準做法。
- 內嵌/持續顯示： 日曆始終在頁面上可見。最適合排程密集的任務。
2. 設計日曆網格
為月份檢視建立一致的空間節奏：
- 標題： 月與年，並附有「上一個」和「下一個」導覽按鈕。
- 週間列： 使用單字母或簡短標籤（S, M, T...）以便快速定位。
- 7 欄網格： 確保每個日期儲存格有足夠空間顯示日期與可能的狀態指示（例如用圓點表示事件）。
3. 定義範圍邏輯（如適用）
選取範圍時，介面必須追蹤三種狀態：
- 起點選取： 點擊的第一個日期。
- 「區間」： 起點與當前懸停位置之間的視覺連結。
- 終點選取： 點擊的第二個日期，完成範圍選取。
- 視覺反饋： 對「範圍內」的日期使用柔和的背景填充，並對「起點」與「終點」使用獨特形狀或更高對比度。
4. 為無障礙設計
- 鍵盤導覽： 使用者必須能使用方向鍵在日期間移動，使用 PageUp/PageDown 切換月份，並使用 Enter 選取。
- 焦點管理： 當選取器開啟時，焦點應移至目前選取的日期或「今天」。
- ARIA 角色： 日曆使用
role="grid"，週間使用role="columnheader"，日期使用role="gridcell"。使用aria-selected="true"表示啟用中的選取。
5. 規劃響應式調整
- 行動裝置檢視： 在小螢幕上，單月檢視通常最佳。對於範圍選取，可考慮垂直堆疊兩個月份，或使用全螢幕覆蓋層。
- 觸控目標： 確保每個日期儲存格至少為 44x44px，或提供足夠內距以防止誤觸。
決策規則
- 「先輸入」規則： 始終允許使用者手動在輸入欄位中輸入日期。不要強迫他們使用日曆。
- 月份限制： 若選取日期位於遙遠的過去或未來（例如 5 年以上），請提供年/月下拉式選取器，而非強迫使用者點擊「下一個」數十次。
- 即時反饋： 若使用者選取了無效日期（例如選取星期日但只能平日送貨），應立即顯示上下文相關的錯誤訊息，而非等到表單提交。
- 每週起始日： 預設使用使用者的地區設定（美國通常為星期日，英國/歐盟通常為星期一）。
限制條件
- 無障礙： 所有日期狀態必須符合 WCAG AA 對比度（4.5:1）。已選取的日期不能僅靠顏色區分（例如使用實心背景 vs. 無背景）。
- 響應式： 日曆絕不能超出視窗範圍。彈出式選取器應使用「翻轉」邏輯，以免輸入框下方空間不足時無法顯示。
- 在地化： 支援不同的日期格式以及月份與星期名稱的翻譯。
常見錯誤模式
- 「無限點擊器」： 讓使用者點擊 12 個月才能找到日期，而非提供年份選取器。
- 隱藏輸入框： 禁止使用者輸入日期，這會讓進階使用者與行動障礙使用者感到挫折。
- 小目標： 設計 20px 的儲存格網格，在行動裝置上幾乎無法使用。
- 缺少「今天」上下文： 未能突顯當前日期，使使用者更難定位。
- 混淆的範圍： 未清楚區分範圍的「起點」與「終點」，或未能顯示「範圍內」區間。
驗證標準
- 使用者能僅使用鍵盤導覽日曆並選取日期。
- 支援在輸入欄位中手動輸入文字並進行驗證。
- 今天的日期在視覺上獨特，但不會與選取狀態競爭。
- 範圍選取具有清晰的「起點」、「終點」與「區間」視覺處理。
- 日期儲存格的觸控目標符合 44x44px 建議（或至少 24x24px 並有間距）。
- 所有狀態（懸停、已選取、禁用）的對比度符合 WCAG AA。
- 日曆在行動裝置上會調整版面（或切換為全螢幕）。