8pt 网格系统设计指南

在 Apple 的 Human Interface Guidelines 中，间距是最基础也最重要的设计元素之一。8pt 网格系统（8pt Grid System）是 Apple 推荐的布局基础，它为多设备、多屏幕尺寸提供了统一、和谐的视觉节奏。

什么是 8pt 网格？

8pt 网格是指所有元素之间的间距、内边距、外边距都遵循 8 的倍数：8、16、24、32、40、48……这样的数值体系。其核心理念是：一致性来源于数学关系。

「好的设计不是偶然的，它是数学、逻辑与美学的结合。」—— Apple HIG

为什么是 8 而不是 10？

8 是一个高度灵活的数字：

• 它可以被 2、4、8 整除，提供丰富的中间值（4px、8px、16px）
• 它与 Retina 屏幕的像素对齐完美契合（@2x 下 16px = 32px 物理像素）
• iOS 的界面元素高度（导航栏 44pt、Tab 栏 49pt）都基于 8pt 体系

在 CSS 中的实现

我们使用 CSS 自定义属性来构建 8pt 网格体系：

:root {
  --space-1: 4px;   /* 半个单位 */
  --space-2: 8px;   /* 1 个单位 — 最小间距 */
  --space-3: 12px;  /* 1.5 个单位 */
  --space-4: 16px;  /* 2 个单位 — 常用内边距 */
  --space-5: 20px;
  --space-6: 24px;  /* 3 个单位 */
  --space-8: 32px;  /* 4 个单位 — 卡片间距 */
  --space-10: 40px;
  --space-12: 48px; /* 6 个单位 */
}

实践建议

• 坚持一套网格：不要混合 4pt、8pt 和自定义间距
• 内外一致：外部间距（margin）和内部间距（padding）使用同一体系
• 配合触控目标：最小触控区域 44×44pt = 5.5 个网格单位
• 关注垂直节奏：行高、段间距、组件间距保持一致的网格步调

8pt 网格不是限制创造力的框架，而是让团队协作更加高效的共同语言。当你习惯了用 8 的倍数思考，就会发现设计过程变得更可预测、更一致、也更 Apple。