Universal Principles of Design - William Lidwell
涵盖 125 个设计原则的百科全书，从可用性到美学，从心理学到工程学，为设计师提供全面的参考指南。本书以简明易懂的方式解释了各种设计原则，包括 80/20 法则、格式塔原理、希克定律等，是设计师的必备参考书。
关于作者
William Lidwell 是设计与人因工程领域的专家：
- 人因工程师：专注于人类行为与设计的交叉领域
- 技术作家：著有多本关于设计和心理学的书籍
- 教育者：致力于将复杂的设计原则普及化
Lidwell 以其将学术研究转化为实用设计指南的能力著称，让这本"设计原则百科全书"成为设计师、建筑师、工程师的必备参考书。
核心设计原则
1. 80/20 法则 (Pareto Principle)
定义：约 80% 的效果来自 20% 的原因
设计应用：
- 80% 的使用来自 20% 的功能
- 80% 的收益来自 20% 的客户
- 80% 的错误来自 20% 的问题
实践建议：
1. 识别关键的 20%
- 分析用户行为数据
- 找出最常用的功能
- 优先优化高价值区域
2. 资源分配
- 将 80% 的资源投入到 20% 的关键功能
- 精简或移除低价值功能
3. 持续评估
- 定期 review 功能使用情况
- 调整优先级
示例：
- Microsoft Office: 用户只使用约 20% 的功能
- 网站：用户主要访问 20% 的页面
- 电商：20% 的商品贡献 80% 的销售额
2. 希克定律 (Hick's Law)
定义：选择越多，决策时间越长
公式：RT = a + b × log₂(n)
- RT: 反应时间
- a: 非决策相关时间
- b: 每个选项的处理时间
- n: 选项数量
设计应用：
1. 简化选择
- 减少同时展示的选项
- 使用分组和层次
- 提供默认选项
2. 渐进式披露
- 先展示核心选项
- 按需展示更多
3. 智能推荐
- 基于用户历史推荐
- "猜你喜欢"
- 减少搜索成本
示例对比：
❌ 餐厅菜单 100 道菜
✅ 精选菜单 20 道 + 主厨推荐
❌ 表单 20 个字段一次展示
✅ 分步表单，每步 3-5 个字段
3. 格式塔原理 (Gestalt Principles)
人类视觉系统组织元素的方式：
1. 接近性 (Proximity)
- 相互靠近的元素被视为一组
- 应用：用间距分组
2. 相似性 (Similarity)
- 相似的元素被视为相关
- 应用：颜色、形状、大小表示类别
3. 连续性 (Continuity)
- 视线倾向于沿着平滑路径移动
- 应用：对齐、引导线
4. 闭合性 (Closure)
- 倾向于看到完整的形状
- 应用：简化图标设计
5. 共同命运 (Common Fate)
- 一起移动的元素被视为相关
- 应用：联动动画
6. 图形与背景 (Figure-Ground)
- 区分主体和背景
- 应用：清晰的视觉层次
设计检查：
□ 相关元素是否靠近？
□ 相似元素是否有相同样式？
□ 对齐是否清晰？
□ 视觉层次是否明显？
4. 米勒定律 (Miller's Law)
定义：短期记忆容量约为 7±2 个信息块
设计应用：
1. 信息分块
- 电话号码：138-0000-0000
- 信用卡：4242 4242 4242 4242
- 列表分组：5-9 个一组
2. 渐进式学习
- 先教核心概念
- 逐步引入复杂内容
3. 减少记忆负担
- 显示而非要求记忆
- 提供提示和默认值
- 保持导航可见
示例：
❌ 要求用户记住上一步的信息
✅ 显示进度和已填信息
❌ 一次性展示所有功能
✅ 新手引导 + 渐进式披露
5. 冯·雷斯托夫效应 (Von Restorff Effect)
定义：在相似元素中，突出的元素最容易被记住
设计应用：
1. 呼叫行动 (CTA)
- 使用对比色
- 增加视觉权重
- 周围留白
2. 重要信息
- 突出显示
- 使用颜色或图标
- 位置显眼
3. 适度使用
- 太多突出等于没有突出
- 一次只突出一个重点
示例：
✅ 定价页面：推荐方案高亮
✅ 表单：错误字段红色标记
✅ 导航：当前页面高亮
❌ 所有按钮都是强调色
❌ 整个页面都是重点
6. 序列位置效应 (Serial Position Effect)
定义：序列中开头和结尾的元素最容易记住
设计应用：
1. 列表设计
- 重要内容放开头或结尾
- 避免将关键信息放在中间
2. 导航设计
- 核心功能放两端
- 次要功能放中间
3. 演示设计
- 开场：抓住注意力
- 结尾：强调关键信息
示例：
导航栏布局：
[Logo] [核心功能 1] [核心功能 2] [次要] [登录/注册]
邮件营销：
- 开头：核心价值
- 中间：详细信息
- 结尾：CTA
7. Tesler 定律 (守恒定律)
定义：每个系统都有其固有的复杂性，无法减少，只能转移
设计启示：
1. 复杂性转移
- 从用户转移到系统
- 从界面转移到代码
- 从一次使用转移到学习过程
2. 何时简化
- 高频功能：简化操作
- 低频功能：可以接受学习成本
3. 何 时的保留
- 高级用户需要控制
- 提供简单模式和专家模式
示例：
✅ 自动保存：复杂性从用户转移到系统
✅ 快捷键：学习成本换取效率提升
✅ 可定制界面：用户选择复杂度
8. 费茨定律 (Fitts's Law)
定义：到达目标的时间取决于目标的距离和大小
公式：T = a + b × log₂(D/W + 1)
- T: 移动时间
- D: 到目标的距离
- W: 目标宽度
设计应用：
1. 按钮大小
- 常用按钮更大
- 重要按钮更显眼
2. 按钮位置
- 常用功能放在易达位置
- 减少鼠标移动距离
3. 边缘优势
- 屏幕边缘是"无限目标"
- 将常用功能放边缘
4. 触控设计
- 最小触控目标：44×44 pt (iOS) / 48×48 dp (Android)
- 按钮间距：至少 8dp
示例：
✅ 提交按钮靠近表单末尾
✅ 常用工具栏放在顶部或侧边
✅ 移动端底部导航易达
9. 奥卡姆剃刀 (Occam's Razor)
定义：在其他条件相同的情况下，最简单的解决方案通常是最好的
设计应用：
1. 功能精简
- 每个功能都有存在的理由
- 删除不必要的功能
2. 视觉简化
- 减少装饰元素
- 聚焦核心内容
3. 交互简化
- 减少步骤
- 减少点击
4. 文案简化
- 简洁明了
- 避免专业术语
检查问题：
- 这个元素有必要吗？
- 能更简单吗？
- 用户在意的功能是什么？
10. 信噪比 (Signal-to-Noise Ratio)
定义：有用信息与无关信息的比例
提高信噪比：
1. 增加信号
- 突出核心内容
- 强化关键信息
2. 减少噪音
- 删除装饰性元素
- 减少无关内容
- 简化视觉元素
3. 视觉降噪
- 统一颜色
- 简化图标
- 一致的字体系列
示例对比：
❌ 新闻网站：弹窗、自动播放、闪烁广告
✅ 新闻网站：清晰标题、正文、相关配图
经典摘录
好的设计是尽可能少的设计。
形式追随功能，但形式也影响功能。
人们不会阅读界面，他们会扫描界面。
一致性不是目标，而是手段。
最危险的错误不是错误的行动，而是错误的假设。
读书心得
《Universal Principles of Design》是一本设计原则的"字典"。它不是用来从头到尾阅读的，而是在需要时查阅参考。
书中对我影响最深的是希克定律和米勒定律。这两个来自心理学的原理，解释了为什么简化选择如此重要。在设计表单、导航、列表时，我会下意识地应用这些原则。
格式塔原理帮助我理解了视觉组织的规律。接近性、相似性、连续性这些概念，看似简单，但能解释很多设计决策背后的原因。
信噪比的概念在现代 Web 设计中尤为重要。过多的装饰、弹窗、广告不仅影响美观，更影响用户完成目标的能力。
对于前端开发者来说，这本书的价值在于：
- 理解设计决策：知道为什么设计师做出某些选择
- 独立判断：在没有设计师的情况下做出合理的设计决策
- 沟通基础：与设计师有共同的语言
建议将这本书放在案头，在遇到设计问题时查阅相关原则。