分屏布局
Split-screen
初级通用分屏布局（Split-screen）是把同一页面划成两个并列区域，让两类内容同时可见的页面布局。它解决来回切换才能对照或协作的问题，比如左边写提示词，右边看 AI 生成结果。
你可能会说：「我想左边写内容，右边实时看结果，不用在两个页面之间来回切。」
动手看看AI 文案工作台
左边改提示词，右边看生成结果，不用来回切换。拖动比例滑块，相当于移动两区之间的分隔线；下方会显示两侧实际宽度。
要点分屏布局要先想清楚什么？
- 1
两侧各承担什么任务
先说清每一侧放什么，以及用户为什么要同时看见它们。比如做 AI 写作工具，左边编辑草稿，右边展示改写结果；如果右边只是偶尔出现的设置项，分屏就未必合适。
- 2
宽度如何随内容变化
分屏不等于左右各占一半。代码编辑区可能需要更宽，预览区则保留够看的宽度。你可以告诉 AI Agent 哪侧优先，以及用户能不能拖动分界线调整比例。
- 3
窄屏时怎样继续使用
手机上并排显示可能让两侧都难以阅读，所以要提前决定窄屏方案。可以改为上下排列，也可以用标签页切换编辑和预览；关键是原本要完成的任务仍然做得下去。
容易混淆的地方
分屏布局说的是两块主要内容同时并列呈现，不等于左侧栏布局：侧栏通常承担导航或筛选，旁边才是主要工作区。它也不等于差异对比：差异对比关注两份内容哪里变了，可以用分屏展示，也可以用一列内容标出改动。
什么时候用
适合用
- 做 Markdown 编辑器时，左边输入正文、右边看渲染预览，用户需要边改边核对效果。
- 做后台数据映射工具时，左边查看来源字段、右边配置目标字段，两边需要反复对照。
- 做 AI 图片工具时，左边调整生成参数、右边查看当前结果，减少反复打开面板的操作。
不适合用
- 页面只展示一篇供连续阅读的文章时，用居中窄栏布局更合适，分屏会挤占阅读宽度。
- 用户只需从多个功能模块中选一个进入时，用导航菜单或卡片入口即可，没必要同时摆出两个工作区。
- 手机上的两份长内容无法同时读清、也无需实时对照时，用标签页切换比强行并排更方便。
练一练选一个答案，看看解释
你在做一个 AI 邮件改写工具：用户需要边修改原邮件，边核对改写稿。桌面端空间充足，手机端较窄。哪种方案最符合分屏布局的用途？
让 AI 帮你做复制给 AI Agent 直接用
请把这个 AI 邮件改写页面做成分屏布局：桌面端左侧编辑原文，右侧显示改写稿，生成后不跳页；两侧宽度可调整。窄屏时改用标签页切换，并保留用户已输入的内容。