展现形式 · 概念
Split：图文并置的双区布局
说明 Split 图文并置布局如何让媒体与说明互相支撑，以及左右交替、DOM 与视觉顺序、移动端堆叠和图片裁切的风险。
Split 把两个相互依赖的区域并置，电商页面中最常见的是媒体与文字说明。它的价值来自两侧共同解释一个主题，而不是把任意两块内容强行排成左右栏。
适合与不适合
适合图片能补充场景、步骤、尺度或细节，文字又能解释图片无法独立表达的信息。不适合两侧毫无关系、文本很长、媒体只是装饰，或页面必须同时比较三个以上对象的场景。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 媒体与解释距离近，容易建立对应关系 | 两侧内容量失衡会产生大片空白 |
| 可形成清楚的叙事节奏 | 连续左右交替可能让阅读路径跳动 |
| 桌面端能充分利用横向空间 | 手机端必须重新决定上下顺序 |
| 适合突出单一主题或步骤 | 固定比例容易裁掉有意义的图像区域 |
内容与布局要求
两侧必须回答同一个问题。先决定语义阅读顺序，再决定视觉左右位置；不要通过 CSS 排序让视觉与 DOM 相反。文字区域通常保持一个标题、一段核心说明和少量行动，长篇内容应进入连续正文。
响应式与无障碍
窄屏时通常堆叠为单列，媒体与文字的先后由理解关系决定，而不是一律图片在前。信息型图片提供与上下文相符的文本替代，装饰图片使用空替代文本。裁切时确保关键主体和文字不丢失，文本放大后不能溢出或覆盖媒体。
状态与退化
媒体缺失时退化为普通正文；文字缺失时仅在图片能独立完成任务且有适当说明时保留。连续多个 Split 应允许合并为列表、时间线或媒体图库，避免为了交替造型拆碎一段连续叙事。
发布前检查
- 两侧是否共同解释同一件事？
- DOM 顺序在无 CSS 时是否仍可理解？
- 小屏堆叠顺序是否经过内容判断？
- 图片裁切、加载失败和超长文本时怎样退化？
- 多个 Split 连续出现是否比普通正文更易读？