用途:Calendar View 是一种数据展示 UX 模式,用日历网格呈现基于时间的信息,便于人们一眼比较天、周或月,最适用于需要预订与排期的场景。
主要能力:帮助团队以可靠方式展示日期与事件;相对相邻模式,它在不隐藏状态、规则与恢复路径的前提下减少摩擦。适用场景包括预订与排期、团队可用性、活动与发布规划。
应避免的情况:用户只需一两个值而非完整布局时,应使用更简单的视图;任务为创建或编辑而非解读时避免此模式;移动端若其他表现形式更清晰,不要强行套用同一视图。
实现流程:先确认模式与问题及约束匹配,再复制示例;从 references/pattern.md 中的结构与示例入手,选择最小可行变体;先应用无障碍、性能和交互护栏,再做视觉润色;用测试指南验证键盘、屏幕阅读器、响应式与失败场景下的行为。
无障碍护栏:键盘方面,需保证仅用键盘即可完成日历视图操作,模式打开、更新或显示额外 UI 时保持焦点顺序合理,保留高缩放时仍可读的可见焦点状态。屏幕阅读器方面,优先使用语义元素,仅在语义不足时补充 ARIA;在正确位置以恰当礼貌程度播报错误、加载或完成等状态变化;必要时用 aria-describedby 或结构性标题连接标签、提示与状态文本。视觉无障碍方面,不要仅靠颜色传达严重程度、完成或选中状态。
性能护栏:在添加嵌套操作、图表或内联筛选等装饰前,先测量默认视图的渲染成本;布局可能一次渲染过多项目时,使用分页、窗口化或渐进披露;稳定高度与占位几何,避免加载和数据刷新状态造成大幅布局偏移。
常见错误:一是先选布局后定任务,团队常在确认用户需求前就选熟悉模式,应先从用户任务出发,将布局映射到比较、时序、层级或概览需求;二是忽略非理想状态,默认视图再精致,若加载、空和错误状态不一致仍显残缺,应预先设计数据生命周期,包括空、部分、过期和失败结果;三是发布仅桌面端的密度模型,大表格、密集仪表盘和重卡片在小屏上易崩塌,实施前应定义移动策略,如堆叠卡片、渐进披露或替代摘要。
相关模式:https://uxpatterns.dev/patterns/data-display/filter-panel、https://uxpatterns.dev/patterns/data-display/list-view、https://uxpatterns.dev/patterns/data-display/timeline。完整实现细节、示例与测试说明见 references/pattern.md,模式页面:https://uxpatterns.dev/patterns/data-display/calendar。资料未提供具体收费、价格、平台与安装命令信息。