设计的四大原则——《写给大家看的设计书》【美】Robin Williams著

这是一篇关于设计的四大原则——《写给大家看的设计书》【美】Robin Williams著的思维导图，主要内容亲密性(Proximity)、对齐(Alignment)、重复(Repetition)、对比(Contrast)等。

设计的四大基本原则

• 亲密性（Proximity）
  • 微妙且重要
  • 原则
    • 将相关的项组织在一起
  • 做法
    • 物理位置靠近
      • 表现
        • 凝为一体
          • 多项
            • 存在亲密性
            • 非孤立元素
            • 成视觉单元
          • 空白
            • 表达非亲密关系
      • 表明
        • 存在关联（实际生活亦如此）
      • 修改工作
        • 1. 文本
          • 大小
          • 粗细
        • 2. 图片
          • 大小
          • 位置
  • 目的
    • 1. 直接
      • 组织信息，减少混乱，为读者提供清晰的结构
    • 2. 根本
      • 实现条理性和组织性
        • 信息
          • 更容易阅读
          • 更易被记住
    • 3. 副产品
      • 空白更美观、更有条理
    • 确保：读者获得正确的信息
      • 1. 视觉上
      • 2. 理解上
      • 更有条理
  • 小结
    • 1. 过程合理
      • 视线移动
        • 1. 开始
        • 2. 路径
        • 3. 结束
        • 4. 下一步看哪里
        • 确定
          • 开始
          • 结束
    • 2. 实现步骤
      • 1. 统计元素
        • 眼睛在页面上停顿的次数
      • 2. 归拢元素
        • 哪些孤立元素可以组建亲密性，成为视觉单元
    • 3. 操作误区
      • 1. 避免一个页面太多孤立元素
      • 2. 避免元素之间空白小打相同，除非同属一个子集
      • 3. 标题、子标题、图标标题、图片能否归入其相关材料，需要明确，避免一丝含糊
      • 4. 避免不同属一组的元素之间建立关系，如果元素彼此无关，要分开
      • 5. 避免因为有空白就把元素放在角落、中央
• 对齐（Alignment）
  • 要求
    • 任何东西都不能在页面上随意安放
  • 做法
    • 每个元素都应与页面上的另一个元素有某种视觉联系
      • 误区
        • 居中对齐
          • 正式
          • 稳重
          • 中规中矩
          • 乏味
          • 摒弃
        • 两端对齐
          • 行足够长可用
          • 以免出现难看的空隙
      • 思路
        • 左对齐
        • 右对齐
        • 基于亲密性原则
  • 目的
    • 1. 直接
      • 建立一种外观
        • 清晰
        • 精巧
        • 清爽
    • 2. 根本
      • 使页面统一且有条理
        • 精美的
        • 正式的
        • 严肃的
        • 有趣的
        • 结合字体
  • 注意
    • 一个页面只有一种对齐方式
    • 每一项都与其他项对齐
    • 创造对齐
      • 水平
      • 垂直
      • 基准
        • 画一条明确的“对齐线”
  • 打破
    • 无奈之举
    • 有意为之
      • 在明显的对齐上去打破
        • 以免看起来像失误
      • 效果更强烈
      • 影响更重要
    • 打破规则之前必须清楚规则是什么
  • 小结
    • 1. 如何实现
      • 注意元素放在哪里
        • 1. 总能在页面上找到与之对齐的元素
        • 2. 尽管两个对象的物理位置可能很远
    • 2. 操作误区
      • 1. 避免混合多种对齐方式
      • 2. 避免居中对齐
        • 1. 并不完全杜绝
        • 2. 可有意识的选择
        • 3. 不要默认选择
• 重复（Repetition）
  • 作用
    • 1. 一致性
      • 组织信息，帮助读者浏览各个页面
      • 将页面中单独的部分统一起来
    • 2. 连续性
      • 将页面整个“捆”在一起
    • 不仅对单页作用，对多页文档更显重要
    • 3. 专业性
    • 4. 权威性
    • 使读者感到有人在负责
      • 重复是一种经过深思熟虑的设计决策
  • 做法
    • 让视觉要素在整个作品中重复出现
      • 1. 粗字体
      • 2. 粗线条
      • 3. 项目符号
      • 4. 颜色
      • 5. 设计要素
      • 6. 格式
      • 7. 空间关系
      • 把无意的重复变成有意
        • 确保有意为之，而非乱七八糟
          • 对象
            • 1. 引起兴趣的元素
              • 剪贴画
              • 图片
              • 字体
            • 2. 一个元素的不同形式
              • 大小
              • 颜色
              • 角度
            • 3. 存在明确亲密关系的对象
            • 4. 任何想有意重复的对象
  • 目的
    • 1. 直接
      • 增加条理性，加强统一性
    • 2. 根本
      • 统一，增强视觉效果
  • 小结
    • 1. 将现有一致性向前推进一步
      • 1. 初级
        • 找出现有的重复元素
        • 加强重复
      • 2. 升级
        • 创建新的重复元素
        • 纯粹为建立重复而设计的元素
        • 作用
          • 增强设计的效果
          • 提高信息清晰度
    • 2. 操作误区
      • 1. 避免一个元素太多
        • 让人讨厌
      • 2. 避免重复太多元素
        • 混淆重点
• 对比（Contrast）
  • 作用
    • 吸引眼球
      • 快速抓住要点
      • 产生强烈印象
    • 组织信息
      • 清晰层级
      • 制造焦点
      • 指引读者
      • 至关重要
        • 一眼看到文档
        • 立即理解文档
  • 基本思想：避免页面上的元素太过相似
  • 做法
    • 如果元素不相同，就让他们截然不同
      • 对比必须强烈
        • 方式
          • 字体
            • 大小
            • 粗细
            • 风格
          • 颜色
            • 冷暖
          • 材质
            • 粗糙
            • 光亮
            • 平滑
          • 组合
            • 水平：很扁很长一行
            • 垂直：很细很高一列
  • 目的：让页面引人注目
    • 增强效果
      • 可读性
      • 趣味性
    • 组织信息
      • 信息组织方式
      • 一个项目到另一个项目的逻辑流程
    • 禁忌
      • 对比元素不能让读者混淆
      • 不能错误强调重点
  • 小结
    • 1. 如何实现
      • 字体
      • 线宽
      • 颜色
      • 形状
      • 大小
      • 空间
      • 增加视觉效果
        • 最有意思
        • 最让人满意
    • 2. 操作误区
      • 1. 不要犹豫，要加大力度，形成强烈对比
      • 2. 不要将一种粗线与一种更粗的线对比
      • 3. 不要将棕色文本与黑色标题对比
      • 4. 不要使用两种或多种类似的字体
• 不要畏畏缩缩
  • 有关设计，也有关生活
  • 1. 不要害怕留白，让眼睛和心灵休息
  • 2. 不要害怕不对称，非居中格式，效果更强烈，除非有意为之
  • 3. 不要害怕元素（或说话声音）非常大或小
    • 只要在合适的场合
    • 只要能支撑设计或强调观点
• 《写给大家看的设计书》 【美】Robin Williams著