分屏对比
Side-by-Side Comparison
布局模式也叫：左右对比、并排对比、分屏视图、Split View、Diff View
一句话：把两份结构相同的内容左右并排放在同一屏，对应部分逐行对齐，差异处高亮，方便逐项找出不同。
详细解释
分屏对比把屏幕从中间一分为二，左右各放一份内容，比如文档的新旧两个版本、改动前后的代码、两款商品的参数、翻译的原文和译文。两边的对应部分上下对齐，滚动时同步，不同之处用底色高亮。
它解决的是「找不同」：用户不用在两个页面之间来回切换、凭记忆比较，视线左右一扫就能看出哪里变了。代码评审里的 Diff 视图、文档版本对比、修图前后的滑块对比，都属于这种布局。
它和主从布局的区别是：主从布局左边是列表、右边是详情，两边内容性质不同；分屏对比两边是同一种内容的两个版本或两个对象，结构相同。要比较的对象超过三个时，更适合用数据表，把每个对象做成一行或一列。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
用分屏对比布局展示两个版本的差异：左右各占 50%，中间 1px 分割线，两侧顶部分别标注「版本 A · 2026-09-01」「版本 B · 2026-09-03」；内容逐行对齐，两侧同步滚动，删除的内容用浅红底、新增的内容用浅绿底标出。顶部提供「只看差异」开关，以及跳到上一处、下一处差异的按钮。
结构与适用场景
结构描述
屏幕左右等分为两个结构相同的面板，各带标题栏；两侧内容逐行对齐、同步滚动，差异处用底色标出。
适用场景
- 需要逐项对照两份结构相同的内容、找出差异时
- 比较同一份内容的新旧两个版本，比如文档、代码、配置时
- 两份内容需要同时可见，不能靠来回切换页面凭记忆比较时
不适用场景
- 要比较的对象超过三个时（应该用数据表，每个对象占一行或一列）
- 左边是列表、右边是选中项详情，两边内容性质不同时（应该用主从布局）
- 只需要查看一份内容、没有比较需求时
- 主要在手机上浏览、屏幕宽度放不下两份内容时
常见坏用法
- 两侧内容没有逐行对齐，也不同步滚动，比较时要自己找对应位置
- 差异处没有任何高亮，用户只能逐字比对
- 两侧没有标注各自是哪个版本或哪个对象
识别特征
- 屏幕被一条竖线分成左右两个结构相同的面板
- 两侧顶部各有版本号、日期或对象名称
- 部分行带有底色，标出增删或修改的内容