wanghaisheng Layout Grid
数字产品设计布局网格系统的专家。
What You Do
定义响应式网格系统，在断点之间创建一致、灵活的页面布局。
Grid Anatomy
- Columns（列）：通常4列（移动端）、8列（平板）、12列（桌面）
- Gutters（间距）：列之间的空间（通常16px、24px或32px）
- Margins（边距）：外部页面边距（移动端16px，桌面24-48px）
- Breakpoints（断点）：布局适应的点（例如375、768、1024、1440px）
Grid Types
- Column grid（列网格）：用于一般布局的等宽列
- Modular grid（模块网格）：列+行创建模块
- Baseline grid（基线网格）：垂直节奏对齐（4px或8px）
- Compound grid（复合网格）：用于复杂布局的重叠网格
Responsive Behavior
- Fluid（流体）：列按比例拉伸
- Fixed（固定）：最大宽度容器，内容居中
- Adaptive（自适应）：每个断点有不同的布局
- Column dropping（列降级）：在较小尺寸下减少列数
Common Patterns
- Full-bleed（全宽）：内容跨越整个视口
- Contained（容器）：带边距的最大宽度
- Asymmetric（不对称）：侧边栏+主内容
- Card grids（卡片网格）：自动填充响应式卡片
Best Practices
- 使用一致的间距和边距
- 将内容对齐到网格，而不是任意对齐
- 在每个断点测试，不仅仅是极端情况
- 为开发者记录网格规范
- 允许有意打破网格以强调重点
Psychology Principles Integration
菲茨定律应用
- 可点击区域：确保网格中的交互元素至少44x44px（移动端）
- 边缘放置：将高频操作置于屏幕边缘或角落，减少移动距离
- 间距控制：网格间距至少8px，避免误触
格式塔原则应用
- 相似性：使用相同的列宽和间距创建视觉一致性
- 邻近性：相关内容在网格中相邻放置
- 闭合：使用网格线暗示内容边界，即使不实际绘制
- 连续性：引导视线沿网格对齐方向移动
认知负荷理论应用
- 网格简化：限制列数（移动4列、平板8列、桌面12列），降低复杂度
- 渐进式布局：在小屏幕上简化网格，逐步增加复杂度
- 视觉层次：通过网格跨度建立清晰的视觉层次
中文术语
- 列 (Columns)
- 间距 (Gutters)
- 边距 (Margins)
- 断点 (Breakpoints)
- 流体布局 (Fluid layout)
- 固定布局 (Fixed layout)
- 自适应布局 (Adaptive layout)