分屏布局Split-screen
你可能会说
首页左右各一半，左边放品牌介绍，右边直接登录，手机上改成上下。
分屏布局是一种把首屏分成两个权重接近的区域、各自承载一个并列任务或入口的页面结构登录页常用左半屏讲品牌、右半屏放表单，入口页也会让个人版和企业版各占一半。成立的条件是两边任务真的并列；手机上左右分屏不可读，要改成上下排列，并由你先决定哪块在前。
也常被叫作分屏Split ScreenSplit-screen Layout
你可以这样告诉 AI Agent
把登录页做成分屏：左半屏品牌介绍带一个「了解服务」入口，右半屏登录表单，两边任务并列、视觉权重接近。手机端改成上下排列，表单在前。改完后用桌面和手机各检查一次：两边是否都像一个独立任务，手机上输入框和按钮是否可用。
容易混淆？这样区分
分屏布局Split-screen≠左侧栏布局 Sidebar
左侧栏布局 Sidebar 的侧栏是导航，权重明显小于主工作区；分屏布局 Split-screen 两边权重接近，各自完成一个独立任务。
分屏布局Split-screen≠左图右文
左图右文的图片只为右侧内容服务；分屏布局 Split-screen 两侧各自承载任务或入口，拿掉任何一边都会少完成一件事。
什么时候用
- 登录 / 注册页：一侧品牌传达，一侧完成表单
- 两类用户入口：个人版 / 企业版、买家 / 卖家各占一半个人版企业版
- 产品双路径：在线试用与预约演示并列呈现在线试用预约演示
- 两个方案或版本需要同屏对照，权重接近
什么时候不用
- 一边只是装饰图、另一边才是唯一任务：那是左图右文，不是分屏
- 两边权重悬殊：主内容配窄导航应使用 左侧栏布局 Sidebar
- 手机端保留左右分屏：文字和按钮被压窄，应改成上下排列
- 两块都塞满内容：首屏变成两个拥挤的页面，焦点互相争抢
组成结构 · Anatomy
区域 A动作区域 B动作
约占一半宽度，独立承载一个任务或入口
与 A 权重接近；拿掉任何一边都少完成一件事
每边有自己的标题和动作，这是与左图右文的分界
常见变体 · Variants
等宽分屏Even Split
两个任务权重相同，例如两类用户入口
轻偏分屏Slightly Offset
一边内容更重，但另一边仍是独立任务
上下堆叠Stacked
手机端默认形态，任务区在前
典型使用场景
品牌登录页
个人 / 企业入口
个人版
自由职业者与小型项目
免费开始 · 随时升级
创建个人空间
企业版
权限、审计与专属支持
按席位计费
预约演示
双方案对比
试用与演示入口
延伸阅读 · 权威出处
快速练习