分屏式设计的比例选择核心是 “匹配内容权重 + 贴合视觉习惯”，不同比例对应不同的信息传递逻辑和场景需求。以下是分屏设计中最常用的6 类核心比例，包含比例特点、适用场景、设计要点，可直接套用：
一、 基础对称类比例（视觉平衡感强）
这类比例的分割线居中或接近居中，适合两边内容权重对等的场景，给人稳定、规整的视觉感受。
-
1:1 等分比例
- 特点：页面被完全均分（左右 / 上下），视觉上绝对平衡，强调两边内容的同等重要性。
- 适用场景：对比类内容（before/after、旧款 vs 新款、方案 A vs 方案 B）、功能并列展示（如 “产品优势 + 服务流程”）。
- 设计要点：
- 用色彩、明暗、风格差异区分两边内容，避免视觉混淆（例：左屏深色背景 + 白色文字，右屏浅色背景 + 深色文字）；
- 分割线尽量极简（1px 细直线），或用隐性分割（如图片边缘、渐变过渡），不抢内容风头。
- 示例：企业官网中 “国内业务 vs 海外业务” 的并列展示。
-
4:3/3:4 经典比例
- 特点：接近等分但略有主次，视觉比 1:1 更灵活，源自传统图文排版的经典比例。
- 适用场景：图文结合的分屏（如左图右文、上图下文），适合产品详情页、品牌故事页。
- 设计要点：
- 图片占比 4，文字占比 3（图片视觉吸引力更强，优先占据更大空间）；
- 文字区域留足留白，避免拥挤。
二、 主次分明类比例（突出核心信息）
这类比例的分割线偏离中心，通过面积差异强化主次关系，引导用户优先关注核心内容，是商业设计中最常用的类型。
-
2:3/3:2 黄金比例
- 特点：符合人眼的视觉舒适区（约 0.618 的黄金分割比），主次关系清晰但不生硬。
- 适用场景：核心内容 + 辅助内容的组合（如 “产品大图 + 功能卖点”“品牌 slogan + 行动按钮”）。
- 设计要点：
- 核心信息（如产品、主视觉）放在占比 3 的一侧，辅助信息（如文字说明、按钮）放在占比 2 的一侧；
- 两边内容要有强关联（例：左屏 3 展示产品外观，右屏 2 展示产品核心参数）。
-
1:2/2:1 强主次比例
- 特点：主次差异明显，占比 2 的一侧是绝对视觉焦点，适合需要快速传递核心卖点的场景。
- 适用场景：营销型页面（如 “促销海报 + 优惠信息”“品牌形象 + 立即购买按钮”）、极简风格官网首页。
- 设计要点：
- 占比 2 的一侧用高吸引力元素（如高清大图、动态视频、醒目 slogan）；
- 占比 1 的一侧内容要精简，只放关键信息（如 1 句卖点 + 1 个按钮），避免干扰主视觉。
三、 适配场景类比例（贴合设备 / 内容形态）
这类比例基于设备屏幕尺寸或内容载体设计，兼顾美观性与实用性，尤其适合移动端和多媒体内容。
-
16:9 宽屏比例
- 特点：符合主流显示器 / 手机横屏的比例，适合展示视频、全景图等宽幅内容。
- 适用场景：视频 + 文字的上下分屏（如顶部 16:9 视频，底部文字说明）、全屏式产品展示页。
- 设计要点：
- 上下分屏时，视频占比 16，文字占比 9；
- 移动端需自动适配为纵向排版，避免内容挤压。
-
不规则动态比例
- 特点：比例不固定，随用户交互（如滚动、点击）或屏幕尺寸变化而调整，极具创意感。
- 适用场景：创意类网站、沉浸式 H5、品牌官网的互动页面。
- 设计要点：
- 交互逻辑要简单（如滚动时分屏比例从 1:1 渐变到 2:3），避免过度动效影响加载速度；
- 确保所有比例下内容都能完整展示，无信息截断。
分屏比例选择的核心原则
- 内容决定比例：内容对等→选 1:1；内容有主次→选 2:3/1:2；内容是视频 / 宽图→选 16:9。
- 适配多端：PC 端的左右分屏，在移动端需自动切换为上下分屏，比例随之调整（如 PC 端 2:3→移动端 16:9）。
- 避免过度分割：单页面分屏不超过 2 层，否则会导致视觉混乱，用户无法聚焦。
