展现形式

Accordion 折叠面板适合收纳哪些独立补充信息，为什么购买条件和价格不应被折叠，以及展开状态、键盘操作和无 JavaScript 退化要求。

说明「新品」「售罄」「-20%」「Best seller」这类 Badge 徽章标签的规则来源、时间窗与口径，与信任标志和促销内容的边界，以及颜色、对比度、屏幕阅读器读出和数量控制。

判断何时用 Banner 承载全站通知、活动或状态信息，以及怎样控制层级、篇幅、关闭行为和移动端退化。

说明 Before / After 前后对比滑块如何展示护肤、修图、装修、清洁等效果差异，这是高风险展现：需同条件拍摄、不修图并披露典型结果；依据 APG Slider、WCAG 2.5.7 与 2.1.1 讨论键盘与触摸操作、文字描述和并排替代形式，真实性与合规部分标注需要合规确认。

说明 Callout 提示块如何在正文中承载提示、注意、警告与小技巧，区分它与 Banner、Toast、Modal 的边界，依据 MDN note、status、alert 角色与 WCAG 1.4.1、1.4.3、1.4.11 讨论语义选择与级别表达，并强调关键购买条件不得只靠 Callout 呈现。

Cards 卡片模式何时适合组织可独立理解的摘要、媒体和行动，如何避免整卡点击造成嵌套交互、重复信息，以及把普通有框容器当作 Card。

Carousel 轮播在什么条件下适用、会带来哪些内容发现成本，以及控制按钮、键盘操作、自动播放暂停和零项或单项时的退化要求。

Comparison 比较模式如何在共同维度下揭示选项差异与取舍，说明数值口径和未知值处理，以及比较表格在小屏和辅助技术中的要求。

说明 Countdown Timer 倒计时作为高风险展现的使用条件：必须与折扣和预售的真实截止规则共用同一时间源，禁止循环重置的假倒计时，并覆盖时区、到期状态、读屏播报、减少动态与合规确认。

说明 Drawer 侧滑抽屉与 Modal 的边界，何时用它承载购物车、筛选、移动导航或快速查看，以及模态与非模态抽屉的焦点、Escape、背景 inert、小屏全屏和无 JavaScript 退化要求。

说明 Empty State 空状态如何区分从未有过、被条件排除与加载失败三类原因，给出下一步行动，不伪装成有内容，对应各模块的状态与退化，并明确空状态与加载、错误状态的边界及状态通知要求。

Grid 网格布局何时帮助扫描和比较同类项目，何时造成拥挤、伪等权与移动端重排问题，并说明 DOM 顺序、空状态和大量项目时的处理。

Hero 页面开场应承担哪些信息职责，如何权衡视觉优势、首屏成本和移动端约束，避免把大图与大标题误当成有效开场。

说明 Hotspot 图片热点如何在 Shop the look 与场景图上标注可点击的商品或说明，区分 Media Gallery 与 Overlay，并覆盖文字等价、键盘与触摸目标、裁切漂移和每个热点的可售状态。

Inline Form 适合邮件订阅等少字段短任务；本文说明字段与标签要求、验证反馈、失败恢复，以及何时应改用独立页面流程。

说明 List 如何表达集合、步骤和优先次序，何时选有序或无序列表，以及如何避免过长、重复字段和层级不清。

判断 Marquee 连续滚动何时只是可漏看的环境信号、何时妨碍阅读，并说明暂停控制、减少动态效果和静态退化要求。

分析 Masonry 瀑布流对不等高图片等内容的浏览价值，以及视觉与焦点顺序错位、布局移动、难以比较和窄屏退化风险。

说明 Media Gallery 如何组织同一对象的图片与视频，并处理缩略图、替代文本、比例、键盘操作、延迟加载和单媒体退化。

说明 Modal 模态对话框何时值得中断页面、如何管理焦点与关闭，以及长内容、嵌套弹窗和不可逆操作带来的风险。

说明主导航、下拉菜单、Mega Menu、移动端抽屉菜单与面包屑的适用边界，依据 W3C APG 与 WAI 教程核对 role=menu 的取舍、hover 与键盘触发、层级深度和面包屑结构。

分析 Overlay 文字叠放在图片或视频上的适用边界、对比度、裁切与文本增长风险，并说明何时应改为 Split 或独立文字区。

比较分页、Load more 按钮与无限滚动三种长集合翻页方式，说明焦点与位置保持、返回按钮恢复、页脚可达、可抓取链接、nav 地标与 aria-current 等要求，并转述 Google 与 W3C 官方页面所写。

电商展现模式选择地图：从空间布局、阅读交互和运动节奏三个维度比较 Grid、Tabs、Carousel、Marquee 等模式的用途与首要风险。

说明 Tooltip、Popover 与 Disclosure 的区别，何时用轻量浮层承载尺码提示、信息气泡或下拉说明，以及悬停、聚焦、触摸触发和 WCAG 1.4.13 对内容的要求，并强调不得承载关键购买条件。

说明 Progress Bar 进度条如何表达任务或目标的完成程度，区分确定与不确定进度、progress 与 meter 的语义，并覆盖免运费门槛、评分分布、多步骤流程与上传加载四类场景的真实性与无障碍要求。

说明 Rating Stars 星级评分在只读展示与可选择输入两种用法下的区别，覆盖文字等价、半星与取整口径、原生 radio 输入的控件语义、零评价与少量评价的退化，以及星级不得承载没有来源的分数。

说明元素滚动进入视口时淡入、视差与粘性叙事的适用边界，依据 WCAG 2.3.3、Technique C39、MDN 与 web.dev 核对 prefers-reduced-motion、内容默认可见、首屏不延迟、CLS 与动画性能要求，并区分 Marquee 与 Carousel。

说明 Single Column 单列正文如何支持教程、政策等长文的连续理解，以及怎样控制行长、标题层级、文本放大和目录导航。

说明 Skeleton Loader 骨架屏如何在内容到达前用与最终布局相近的灰色占位保持版面稳定，依据 web.dev 的 CLS 优化建议、MDN aria-busy 与 prefers-reduced-motion 讨论布局位移、可访问性、闪烁动画，并强调加载失败必须切换到错误或空状态、慢接口要有超时处理。

说明 Split 图文并置布局如何让媒体与说明互相支撑，以及左右交替、DOM 与视觉顺序、移动端堆叠和图片裁切的风险。

说明 Stepper 如何把结账、尺码测量向导、选品向导与订阅设置拆成有顺序的步骤并指示当前位置，依据 W3C WAI 多页表单教程与 MDN aria-current 讨论有序列表语义、返回与保存进度，以及 WCAG 3.3.1、3.3.3、3.3.4、3.3.7 的错误处理要求，区分它与 Progress Bar、Tabs。

说明 Sticky Bar 吸顶导航、粘性加购栏、悬浮聊天入口与回到顶部按钮的适用边界，依据 MDN 与 WCAG 2.4.11 讨论 sticky 与 fixed 差异、遮挡内容与焦点、软键盘、安全区、视口占用及与 Banner 和客服入口的关系。

说明 Swatch 色板与选项选择器如何以色块、缩略图、文字按钮或下拉呈现变体选项，作为一组单选的语义与键盘操作，不可用与缺货选项的表达，选择后价格媒体库存的同步，以及选项很多时的退化与命中区域要求。

说明 Table 如何用行列两个维度呈现规格、尺码和配送费率等数据，区分 Comparison 与 List，并给出语义表头、小屏滚动或转卡片、单位与未知值的处理要求。

分析 Tabs 适合哪些同层互斥内容，以及自动与手动激活、方向键焦点、移动端溢出、深链接和无 JavaScript 退化要求。

判断 Timeline 时间线何时帮助理解事件与阶段变化，以及如何避免虚构节点、夸大日期精度、双侧跳读和只靠连线表达关系。

说明 Toast 如何承载加购成功、已复制、保存失败等瞬时反馈及页内状态提示，依据 APG Alert、ARIA live regions 与 WCAG 2.2.1、4.1.3 讨论 role 选择、停留时间、错误就近保留与多条排队。