核心原则
- 理解目标
- 视觉层级
- 空间组织
- 响应式设计
布局设计 (arrange)
布局设计（arrange）
Section titled “布局设计（arrange）”arrange 是组织和安排界面元素的技能。它的核心是：让界面元素的排列服务于用户目标和视觉清晰度。
作为设计师/开发者，你可能遇到过：
- “这个页面看起来很乱”
- “不知道重点在哪里”
- “用户找不到想要的内容”
arrange 就是解决这些的。
为什么布局重要
Section titled “为什么布局重要”1. 引导用户注意力
Section titled “1. 引导用户注意力”好的布局：- 用户第一眼看到最重要的内容- 操作路径清晰- 任务完成效率高
差的布局：- 用户不知道看哪里- 找不到重点- 操作繁琐2. 降低认知负荷
Section titled “2. 降低认知负荷”好的布局：- 元素分组清晰- 关系明确- 容易理解
差的布局：- 信息过载- 关系混乱- 需要思考3. 提升美观度
Section titled “3. 提升美观度”好的布局：- 节奏感- 呼吸感- 专业感
差的布局：- 拥挤- 杂乱- 廉价感1. 理解目标
Section titled “1. 理解目标”在开始布局之前，必须明确：
用户目标：
- 用户要完成什么任务？
- 用户的核心需求是什么？
- 完成任务的关键步骤是什么？
业务目标：
- 想要用户做什么？
- 什么是最重要的转化点？
- 如何衡量成功？
2. 视觉层级
Section titled “2. 视觉层级”布局必须建立清晰的视觉层级：
第一层（最重要）：
- 核心内容
- 主要行动点
- 关键信息
第二层（辅助）：
- 次要信息
- 辅助功能
- 支持内容
第三层（底层）：
- 导航
- 版权
- 辅助链接
3. 空间组织
Section titled “3. 空间组织”分组原则：
- 相关的内容放在一起
- 无关的内容分开
- 用空白分隔不同组
对齐原则：
- 同类元素对齐
- 建立对齐网格
- 打破对齐要有目的
间距原则：
- 建立间距系统（4px, 8px, 16px, 24px, 32px）
- 一致的间距产生节奏感
- 间距应该反映关系密切程度
4. 响应式设计
Section titled “4. 响应式设计”移动优先：
- 先设计移动端布局
- 再扩展到桌面
断点设计：
- 断点应该基于内容
- 不是基于特定设备
- 考虑每个断点的合理性
流式布局：
- 使用弹性盒子
- 使用网格系统
- 避免固定宽度
1. 单栏布局
Section titled “1. 单栏布局”适用于：
- 移动端
- 内容阅读型页面
- 简单任务
┌─────────────────────┐│ Header │├─────────────────────┤│ ││ Content ││ │├─────────────────────┤│ Footer │└─────────────────────┘2. 双栏布局
Section titled “2. 双栏布局”适用于：
- 桌面端内容页
- 列表+详情
- 主内容+侧边栏
┌─────────────────────┬──────┐│ │ ││ Main │ Side ││ Content │ bar ││ │ │├─────────────────────┴──────┤│ Footer │└─────────────────────────────┘3. 栅格布局
Section titled “3. 栅格布局”适用于：
- 仪表盘
- 产品列表
- 复杂页面
┌──────┬──────┬──────┐│ 1 │ 2 │ 3 │├──────┼──────┼──────┤│ 4 │ 5 │ 6 │├──────┴──────┴──────┤│ 7 │└────────────────────┘案例 1：电商产品页布局
Section titled “案例 1：电商产品页布局”目标：让用户快速找到商品并完成购买
原始问题：
- 信息堆砌
- 不知道看哪里
- 购买按钮不明显
优化后布局：
┌─────────────────────────────────┐│ 顶部导航 │├───────────────┬─────────────────┤│ │ ││ 商品图片 │ 商品标题 ││ （大图） │ 价格 ││ │ ★★★★☆ ││ │ 购买按钮 ││ │ 规格选择 ││ │ │├───────────────┴─────────────────┤│ 商品详情 │ 相关推荐 ││ 参数 │ 看了又看 ││ 评价 │ │├───────────────┴─────────────────┤│ 页脚 │└─────────────────────────────────┘优化点：
- 图片优先：用户先看产品图
- 购买路径短：一个页面完成购买
- 信息分层：重要信息在左侧
- 相关内容在右侧
案例 2：仪表盘布局
Section titled “案例 2：仪表盘布局”目标：让用户快速了解关键指标
布局原则：
- 最重要的指标放在左上
- 使用卡片分隔不同指标
- 图表和数据配合使用
┌────────────────┬────────────────┐│ 今日收入 │ 订单数 ││ ¥12,345 │ 156 ││ ↑12% │ ↑5% │├────────────────┼────────────────┤│ 活跃用户 │ 转化率 ││ 8,234 │ 3.2% ││ ↑8% │ ↓1% │├────────────────┴────────────────┤│ 销售趋势图表 ││ │├─────────────────────────────────┤│ 热销商品 │ 用户分布 ││ 商品A 100 │ 北京 30% ││ 商品B 80 │ 上海 25% │└─────────────────────────────────┘案例 3：表单布局
Section titled “案例 3：表单布局”目标：让用户快速完成表单填写
布局原则：
- 标签在上方
- 相关字段分组
- 合理使用必填/选填
┌─────────────────────────────────┐│ 用户注册 │├─────────────────────────────────┤│ 基本信息 ││ ┌─────────────────────────────┐ ││ │ 用户名 * │ ││ └─────────────────────────────┘ ││ ┌─────────────────────────────┐ ││ │ 邮箱 * │ ││ └─────────────────────────────┘ ││ ┌─────────────────────────────┐ ││ │ 密码 * │ ││ └─────────────────────────────┘ │├─────────────────────────────────┤│ 详细信息（选填） ││ ┌─────────────────────────────┐ ││ │ 手机号 │ ││ └─────────────────────────────┘ │├─────────────────────────────────┤│ [注册] │└─────────────────────────────────┘布局检查清单
Section titled “布局检查清单”- 明确用户主要目标
- 明确业务目标
- 布局服务于目标
- 第一层级内容突出
- 第二层级辅助第一层级
- 第三层级不影响主要流程
- 相关元素分组
- 使用间距系统
- 建立对齐规则
- 移动端布局优先
- 断点合理
- 内容适配良好
- 间距一致
- 对齐一致
- 风格一致
布局模式
- 单栏布局
- 双栏布局
- 栅格布局
检查清单
- 目标明确？
- 层级清晰？
- 空间合理？
- 响应式适配？
- distill - 精简布局
- normalize - 规范化布局
- polish - 打磨细节
查看源文件: GitHub原始文件