设计原则
费茨定律(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)
人们对一段体验的评价主要取决于高峰时刻和结束时刻的感受,而非整体平均水平。
设计启示
- 在关键节点创造愉悦感(完成任务时的庆祝动画)
- 确保流程结束时的体验是积极的(感谢页面、确认反馈)
- 即使中间有小瑕疵,峰值和结尾好就能留下好印象