Skip to content

设计原则

费茨定律(Fitts's Law)

到达目标的时间取决于目标的距离大小

$$ T = a + b \cdot \log_2\left(\frac{D}{W} + 1\right) $$

  • T — 完成动作所需时间
  • D — 手指/光标到目标的距离
  • W — 目标的宽度(大小)

设计启示

  • 重要的按钮要足够大(移动端最小触控区域 44×44pt)
  • 常用操作放在容易到达的位置(拇指热区)
  • 屏幕边缘和角落是"无限大"的目标区域,适合放置高频操作

希克定律(Hick's Law)

做出决策所需的时间随选项数量的增加而增加。

$$ T = b \cdot \log_2(n + 1) $$

设计启示

  • 减少同时呈现的选项数量
  • 将复杂选择分解为多个简单步骤(渐进式披露)
  • 突出推荐选项,降低决策负担
  • 分类和分组帮助用户快速定位

格式塔原则(Gestalt Principles)

人类视觉系统会自动将元素组织为有意义的整体。

接近性(Proximity)

彼此靠近的元素会被感知为一组。

  • 相关内容间距小,不相关内容间距大
  • 用间距而非分割线来表达分组

相似性(Similarity)

外观相似的元素会被感知为一组。

  • 同类型元素使用一致的颜色、形状、大小
  • 差异化处理需要区分的元素

连续性(Continuity)

眼睛倾向于沿着平滑的路径追踪元素。

  • 对齐的元素感觉更有关联
  • 引导线可以引导视线流向

闭合性(Closure)

大脑会自动补全不完整的形状。

  • 可以用暗示性的图形代替完整描绘
  • 减少视觉噪音,让界面更简洁

共同命运(Common Fate)

朝同一方向运动的元素被感知为一组。

  • 滑动手势中一起移动的元素暗示它们属于同一组
  • 动画中相同运动模式的元素表达关联关系

雅各布定律(Jakob's Law)

用户大部分时间花在其他网站上。用户希望你的网站和他们已知的网站运作方式相同。

设计启示

  • 遵循平台设计规范和行业惯例
  • 创新应建立在用户已有心智模型之上
  • 导航、表单、按钮等基础组件保持常规模式

米勒定律(Miller's Law)

普通人的短时记忆容量为 7 ± 2 个信息块。

设计启示

  • 导航菜单项控制在 5~9 个
  • 长内容分块呈现(分步表单、分页列表)
  • 使用分组和层级减少认知负荷

奥卡姆剃刀(Occam's Razor)

如无必要,勿增实体。在多个假设中,选择假设最少的那个。

设计启示

  • 去掉不增加价值的元素
  • 每个页面只有一个核心目标
  • 简洁不等于简陋 — 用最少的元素传达最多的信息

帕累托原则(Pareto Principle)

80% 的效果来自 20% 的原因。

设计启示

  • 找到用户最常用的 20% 功能,让它们最易触达
  • 将资源集中在影响最大的设计改进上
  • 不要试图让所有功能同等重要

峰终定律(Peak-End Rule)

人们对一段体验的评价主要取决于高峰时刻结束时刻的感受,而非整体平均水平。

设计启示

  • 在关键节点创造愉悦感(完成任务时的庆祝动画)
  • 确保流程结束时的体验是积极的(感谢页面、确认反馈)
  • 即使中间有小瑕疵,峰值和结尾好就能留下好印象