一、 核心设计心理学（灵魂）

设计原则决定了产品是否“好用”且“符合直觉”。

  • 尼尔森十大启发式原则 (Nielsen’s Heuristics)：

  • 核心：状态可见性、系统与现实匹配、用户控制权、防错原则、一致性。

  • 希克定律 (Hick’s Law)：

  • 内容：面临的选择越多，决策时间越长。

  • 应用：简化导航，减少非必要选项。

  • 菲茨定律 (Fitts’s Law)：

  • 内容：目标越大、距离越近，操作越容易。

  • 应用：关键操作按钮（如“确认”）要足够大且易于触达。

  • 格式塔原理 (Gestalt Principles)：

  • 内容：大脑倾向于将接近、相似的元素视为一组。

二、 布局物理标准（骨架）

这是保证界面“工整”和“可适配”的硬性数学规则。

1. 8px 原则 (Vertical Rhythm)

  • 规则：所有间距 (Margin/Padding)、组件高度、图标大小均应为 8 的倍数（如 8, 16, 24, 32, 48）。
  • 原因：
  1. 适配性：绝大多数屏幕分辨率都能整除 8。
  2. 节奏感：建立统一的垂直律动，消除视觉混乱。
  3. 开发友好：程序员可直接使用步长变量进行代码编写。

2. 栅格系统 (Grid System)

  • 横向控制：利用“列”来定义内容的水平分布。
  • 核心参数：
  • Columns (列)：移动端通常 4 列，桌面端通常 12 列。
  • Gutter (槽间距)：列之间的空隙，推荐 16px 或 24px。
  • Margin (边距)：内容距离屏幕边缘的距离。

三、 文字排版规范

文字块在 UI 中被视为“容器”，其垂直空间直接影响页面律动。

  • 字阶表：建立固定的字号梯度（如 12, 14, 16, 20, 24, 32）。
  • 行高 (Line Height) 计算：
  • 推荐方案：字号的 1.5 倍，并根据 8px 原则进行微调。
  • 实例：字号 16px 行高 24px。
  • 优势：24px 刚好等于 3 个 8px 单位，使文字在垂直方向上能完美对齐栅格，视觉更平衡。

四、 开发视角 (Implementation)

设计师应以程序员能实现的方式去思考：

  1. 变量化 (Design Tokens)：
  • 不要直接给 #3B82F6，要给 primary-blue。
  • 不要直接给 16px，要给 spacing-m (2 * 8px)。
  1. 盒子模型 (Box Model)：
  • 理解 Padding（内边距）和 Margin（外边距）的区别。
  • 统一使用 border-box 避免尺寸溢出。
  1. 响应式逻辑：
  • 使用 Flexbox（一维布局）和 CSS Grid（二维栅格）来实现设计稿中的比例关系。