Split Screen
双栏分屏
将屏幕水平切分为左右两半，一侧负责沉浸式品牌传达，另一侧承载核心交互。
Live Demo
真的可以点设计与工程合流
“AI 独立开发者的常备视觉词典。”
你刚才看到的这个：现代 SaaS 登录页：左边整整半屏是深色渐变与精美产品插画，滚动轮播用户好评；右边半屏是干净利落的白底账号密码输入框与第三方登录按钮。
它到底是什么
双栏分屏是兼顾「感性吸引」与「理性操作」的经典范式。它常用于登录注册、结账流程或两款核心产品的对决对比中：左半屏通常是高饱和度的品牌大图、动画或用户口碑（情绪侧），右半屏则是极简克制的输入表单或结账清单（任务侧），让用户在专注操作时始终感受到品牌安全感。
Anatomy · 它由什么组成
Brand Visual Pane品牌视觉半屏
情绪渲染、背景动效、用户证言
Interactive Pane交互表单半屏
任务输入、表单操作、主按钮
Central Divider中分分割线
平滑色彩交界或微妙描边
Mobile Collapse移动端折叠规则
小屏下单列折叠或隐藏背景侧
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 登录 / 注册 / 找回密码全屏页面 | 用 |
| 双重选择分支（例如：“我是个人开发者” vs “我是企业团队”） | 用 |
| 结账流程（左侧品牌与商品回顾，右侧支付方式填写） | 用 |
| 移动端原生应用主流程（屏宽太窄，强行 50/50 会两边都挤爆） | 不用 |
| 内容极多的大型数据报表（横向空间会被严重浪费） | 不用 |
在小屏幕或手机端依然坚持左右并排，导致两侧文字全部被挤压断行。
移动端未做优雅降级：正确的做法是手机端隐藏左侧装饰图，只保留右侧核心表单。
Similar Patterns
别搞混Split Screen当前
双栏分屏
将屏幕水平切分为左右两半，一侧负责沉浸式品牌传达，另一侧承载核心交互。
Sidebar App Shell
应用侧栏架构
左侧常驻导航侧栏、右侧主工作台独立滚动的现代桌面与 Web 应用骨架。
一句话区分：将屏幕水平切分为左右两半，一侧负责沉浸式品牌传达，另一侧承载核心交互。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
构建 50/50 分屏登录页：桌面端左侧半屏深蓝色背景，配产品插画和客户名言；右侧半屏居中显示干净的登录表单。移动端自动隐藏左侧视觉，右侧全屏展开。
不要只对 AI 说
Bad → Better不要这样对 AI 说
页面左边放大图右边放表单。
改成这样说
构建响应式双栏分屏登录页：min-h-screen lg:grid-cols-2，左侧情绪看板（大屏可见，深色品牌背景+引言），右侧极简表单（居中 max-w-md），移动端优雅降级单屏。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。