展现形式 · 概念
电商展现模式：选择地图与阅读入口
电商展现模式选择地图：从空间布局、阅读交互和运动节奏三个维度比较 Grid、Tabs、Carousel、Marquee 等模式的用途与首要风险。
展现模式回答“怎样呈现”，不决定“要说什么”，也不属于某个平台。Carousel 是一种序列浏览模式；Swiper 是可能采用的实现工具之一。知识库记录 Carousel 的适用条件和交互要求，平台或版本正文再说明某个实现是否使用 Swiper、自定义元素或其他技术。
展现形式的三个维度
| 维度 | 常见选择 | 决定什么 |
|---|---|---|
| 空间布局 | 单列、Grid、List、Split、Overlay、Masonry | 内容在页面中如何占位和比较 |
| 阅读交互 | 静态展示、Accordion、Tabs、Carousel、Modal | 内容如何展开、切换和聚焦 |
| 运动节奏 | 无运动、自动轮播、Marquee、滚动触发 | 内容如何进入注意范围 |
一个模块可能同时使用多个维度，例如“媒体卡片 Carousel”使用卡片布局、序列切换和可选的自动播放。记录时应拆开，避免把所有行为都塞进一个模糊的组件名。
展现模式索引
| 类别 | 展现模式 | 主要用途 | 首要风险 |
|---|---|---|---|
| 页面开场 | Banner | 短时效通知、活动或状态 | 常驻后被忽略、挤压首屏 |
| 页面开场 | Sticky Bar | 让少量关键控件或信息随滚动保持可达 | 遮挡内容与焦点、占用视口 |
| 页面开场 | Hero | 建立单一主张与主要行动 | 大面积媒体没有信息价值 |
| 连续阅读 | Single Column | 按一个阅读轴解释完整内容 | 文字墙和长文定位困难 |
| 空间布局 | Grid | 并列浏览同类项目 | 小屏拥挤、伪造等权关系 |
| 空间布局 | List | 连续扫描集合或步骤 | 过长、重复字段和层级不清 |
| 空间布局 | Cards | 独立摘要与详情入口 | 容器滥用、嵌套交互 |
| 空间布局 | Split | 并置互相支撑的媒体与文字 | 视觉与阅读顺序不一致 |
| 空间布局 | Overlay | 把短文字或控件叠放在媒体上 | 对比度、裁切和文本增长 |
| 空间布局 | Masonry | 浏览不等高的视觉项目 | 视觉、DOM 与焦点顺序错位 |
| 空间布局 | Table | 以行列维度呈现可核对的数据 | 小屏横向溢出、语义结构缺失 |
| 空间布局 | Badge | 在商品或项目上附加简短状态标签 | 标签无依据、只靠颜色区分 |
| 空间布局 | Swatch | 在有限选项中选择变体的颜色、尺码或材质 | 不可用状态只靠颜色、选项过多 |
| 空间布局 | Hotspot | 在图片上标注可点击的具体对象 | 位置漂移、缺少文字等价 |
| 内容显隐 | Accordion | 按需展开独立补充信息 | 隐藏必须看见的条件 |
| 内容切换 | Tabs | 切换少量同层互斥视图 | 难发现、难比较和小屏溢出 |
| 内容切换 | Navigation Menu | 组织站点层级、下拉与面包屑 | 误用菜单语义、悬停才能展开 |
| 内容切换 | Pagination | 在长结果中分页或按需加载 | 位置丢失、链接不可抓取 |
| 流程中断 | Modal | 完成必须先处理的短任务 | 焦点错误和不必要的打断 |
| 流程中断 | Drawer | 从边缘滑入承载购物车、筛选等侧向任务 | 与 Modal 焦点规则混淆、小屏遮挡 |
| 流程中断 | Popover | 就近显示补充说明或轻量选项 | 触摸无悬停、承载关键条件 |
| 流程中断 | Toast | 瞬时反馈操作结果 | 消失过快、错误信息无法找回 |
| 序列浏览 | Carousel | 在有限空间浏览离散项目 | 隐藏内容和自动播放干扰 |
| 连续运动 | Marquee | 形成可漏读的环境信号 | 难阅读、难操作和运动干扰 |
| 连续运动 | Scroll Reveal | 元素随滚动进入时的渐显与视差 | 内容依赖动画才可见、忽略减少动态设置 |
| 连续运动 | Countdown Timer | 呈现真实截止时间的剩余时长 | 循环重置的假紧迫感、每秒朗读 |
| 媒体浏览 | Media Gallery | 查看同一对象的多个视角 | 媒体过重和缩略图难区分 |
| 顺序叙事 | Timeline | 解释事件或阶段的变化 | 虚构节点和双侧跳读 |
| 选项判断 | Comparison | 在共同维度下比较对象 | 维度偏差和移动端关系丢失 |
| 当前行动 | Inline Form | 在当前语境完成一个短任务 | 字段膨胀和反馈不可感知 |
| 状态反馈 | Progress Bar | 表达确定或不确定的进度与门槛距离 | 冒充进度、与真实规则不同源 |
| 状态反馈 | Rating Stars | 以星级图形呈现评分并配文字等价 | 图形取整误导、无来源分数 |
| 状态反馈 | Empty State | 在无内容时说明原因并给出下一步 | 把失败伪装成空、没有出路 |
| 状态反馈 | Callout | 在正文中强调提示、注意与警告 | 靠颜色区分级别、把关键条件藏进提示块 |
| 状态反馈 | Skeleton Loader | 内容加载前占位并预留空间 | 永远停在骨架、遮盖慢接口 |
| 流程步骤 | Stepper | 呈现多步骤流程与当前位置 | 该单页却拆多步、步骤无法回看 |
| 媒体浏览 | Before / After | 以滑块比较前后效果 | 效果不真实、只能拖动操作 |
当前共 37 种展现模式。每篇正文维护该模式自己的适用与禁用条件、优缺点、内容要求、响应式、无障碍、零项到多项状态和无 JavaScript 退化。列数、圆角、阴影、左右位置等视觉变体留在所属模式内，不单独建立知识对象。
Carousel 与 Marquee 不是同一种东西
Carousel 让用户在离散项目之间移动，通常需要明确的上一项、下一项、当前位置和焦点行为。Marquee 强调连续运动，适合短小、重复、即使漏看一项也不影响理解的内容。
媒体 Logo 可以使用 Marquee 形成背景式信任信号；带标题、引言和链接的媒体报道需要可停留阅读，更适合 Grid、List 或由用户控制的 Carousel。不能因为内容数量多就默认采用自动轮播。两者的完整边界分别见 Carousel 与 Marquee。
选择模式时检查
- 内容是需要逐项读完，还是只需形成整体印象？
- 项目之间需要比较，还是依次叙述？
- 隐藏后是否会错过关键购买条件？
- 内容数量不足或只有一项时怎样退化？
- 键盘、触摸、减少动态效果和无 JavaScript 状态是否仍可使用？
- 商家或编辑能否在所用平台的编辑界面中理解并维护这种组合？
选定模式后，进入内容与展现形式怎样组成模块。布局宽度与响应式验证另见店面布局。
按顺序理解容易被混用的模式及其无障碍要求，见学习路线展现形式的选择与无障碍。