日历与日期选择系统
目的
日历与日期选择系统提供了一套方法论，用于设计允许用户选择单个日期、日期范围或特定时间段的界面。选择日期是一项高摩擦任务，涉及复杂的心智模型（例如“下周二”、“本月的最后一个周末”）。本系统确保日期选择器在视觉上清晰、易于通过键盘和触摸导航，并能即时提供有效性和可用性反馈。
用例
- 预订与预约： 选择酒店入住/退房日期或航班出发日期。
- 日程安排： 为会议、预约或配送选择时间段。
- 分析与报告： 定义自定义日期范围（起始日期到结束日期）用于数据筛选。
- 出生日期录入： 为年龄验证或资料设置捕获出生日期。
- 活动规划： 在项目管理工具中管理截止日期或里程碑。
何时不使用
- 简单日期： 如果只需一个众所周知的日期（如“今天”或“昨天”），请使用简单的按钮或链接。
- 易记日期： 对于用户熟记的日期（如生日或信用卡到期日），使用标准文本输入框，类型为
type="number"或type="tel"，而不是日历网格，因为直接输入比在网格中导航更快。 - 相对时间： 如果用户只需选择“最近7天”或“本月”，使用下拉菜单或按钮组即可，无需完整的日历。
输入
- 选择模式： 单个日期、日期范围或时间段。
- 约束条件： 最小/最大日期、禁用日期（例如过去的日期、已订满的时间段）。
- 上下文： 是独立的页面元素还是弹出框/模态框触发器？
- 本地化： 地区日期格式（MM/DD/YYYY 与 DD/MM/YYYY）以及一周的第一天（周日与周一）。
输出
- 网格结构说明： 月份标题、星期标签和日期单元格的视觉定义。
- 状态矩阵： 今天、已选择、范围起始、范围结束、在范围内、悬停和禁用状态的视觉处理。
- 输入连接说明： 日历如何与文本输入字段关联（触发器图标、格式化和手动输入支持）。
- 可访问性计划： 键盘快捷键（方向键、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. 规划响应式适配
- 移动端视图： 在小屏幕上，单月视图通常最佳。对于范围选择，考虑垂直堆叠两个月或使用全屏覆盖层。
- 触摸目标： 确保每个日期单元格至少为 44x44 像素，或提供足够的填充以防止意外点击。
决策规则
- “先输入”规则： 始终允许用户在输入字段中手动输入日期。不要强迫用户使用日历。
- 月份限制： 如果选择遥远的过去或将来的日期（例如 5 年以上），请提供年份/月份下拉选择器，而不是强迫用户多次点击“下个月”。
- 即时反馈： 如果用户选择了无效日期（例如选择周日作为仅限工作日配送的日期），应立即显示上下文相关的错误消息，而不是等到表单提交。
- 一周起始日： 默认使用用户所在地区设置（通常美国为周日，英国/EU为周一）。
约束条件
- 可访问性： 所有日期状态必须满足 WCAG AA 对比度要求（4.5:1）。选定日期必须能够通过颜色以外的特征区分（例如实心背景与无背景）。
- 响应式： 日历绝不能溢出视口。弹出式选择器应使用“翻转”逻辑，在输入框下方没有空间时保持可见。
- 本地化： 支持不同的日期格式以及月份和日期名称的翻译。
常见失败模式
- “无限点击”： 迫使用户点击 12 个月才能找到日期，而不是提供年份选择器。
- 隐藏输入： 阻止用户输入日期，这会让高级用户和行动障碍用户感到沮丧。
- 小目标： 设计只有 20 像素单元格的网格，在移动设备上无法使用。
- 缺乏“今天”上下文： 未能高亮显示当前日期，使用户更难定位。
- 混乱的范围： 未清晰区分范围的“起始”和“结束”，或未能显示“在范围内”的跨度。
验证标准
- 用户仅使用键盘即可浏览日历并选择日期。
- 支持在输入字段中手动输入文本并进行验证。
- 今天的日期在视觉上与众不同，但不与选择项冲突。
- 范围选择具有清晰的“起始”、“结束”和“跨度”视觉处理。
- 日期单元格的触摸目标符合 44x44 像素建议（或最少 24x24 像素并带间距）。
- 所有状态（悬停、选定、禁用）的对比度比满足 WCAG AA 标准。
- 日历在移动设备上调整布局（或切换为全屏）。