《写给你们看的设计书》读书笔记

1、设计原则

4大基本原则

1. 亲密性（Proximity）
   含义：将相关的项组织在一块儿，成为一个视觉单元，而不是孤立的元素
   做用：使信息更有组织性和条理性，减小混乱，使结构更加清晰，更容易阅读。
   实现：
   • 要注意视线的移动，从哪里开始，沿着怎么样的路径，在哪里结束。
   • 分析哪些信息在逻辑上存在关联，哪些信息须要强调，经过分组来突出这些信息
   • 利用元素的紧密程度反映元素之间的关系
   • 若是页面上的元素超过3~5个，就要考虑哪些谷粒多元素能够创建更近的亲密性，使之成为一个视觉单元
     避免：
   • 避免一个页面有太多的孤立元素
   • 不要在元素之间留出一样大小的空白
   • 不要由于有空白就把元素放在角落或中央
2. 对齐（Alignment）
   含义：任何元素都不能随意摆放，每一个元素都应当与页面另外一个元素有某种视觉联系，
   做用：创建一种清晰、精巧并且清爽的外观，使页面统一而有条理，给人一种平静、安全的感受。
   实现：
   • 找一条明确的对齐线，并坚持以它为基准。
   • 若是文本行水平摆放，则按其基线对齐；若是有多个单独的文本块，则对齐其左边界或右边界；图片元素与页面的其余的边界对齐
   • 只要是有意为之，能够大胆干脆的打破对齐，前提是打破规则以前必须清楚规则是什么
     避免：
   • 避免同时使用多种对齐方式。
   • 减小居中对齐（正式、稳重，但过于常规，偏于乏味）
3. 重复（Repetition）
   含义：设计中的视觉要素要在整个做品中重复出现（颜色、形状、材质、空间关系、空白、字体、线宽、大小和图片等）
   做用：增长条理性，增强统一性，加强视觉效果。重复是一种深思熟虑的设计决策，能够为做品带来一种专业性和权威性。
   实现：
   • 若是那个元素引发了你的兴趣，就能够拿它用做重复元素。
   • 使用重复原则时候，能够将一个元素从如今的设计中抽取出来，并根据这个元素建立一个新设计
   • 能够添加一些纯粹为创建重复而设计的元素（编号列表、字体、线条等）
     -
     避免：
   • 重复的项并不必定彻底相同，只是存在明确关联的对象
   • 避免太多的重复一个元素，要注意对比的价值
4. 对比（Contrast）
   含义：页面上的不一样元素之间要有对比效果（字体、颜色、间隔、大小、材质等），在设计原则中，对比效果最为显著。
   做用：加强页面的效果，有助于信息的组织
   实现：
   • 将关键短语设为粗体
   • 要实现有效的对比，两个元素必然大相径庭
   • 对比必定要强烈
     避免：
   • 对比元素不能让读者混淆，也不能错误地强调重点
   • 不要犹豫，加大力度，元素之间对比要大相径庭

颜色运用

1. 色轮的运用
   • 三原色： 红 黄 蓝（没法建立的颜色，色轮的基础）
   • 三间色：将色轮上相邻的颜色灯亮混合获得的颜色。（红 橙 黄 绿 蓝 紫）
   • 第三色：将色轮剩下的空白两边的颜色继续等量混合获得的颜色
   • 互补色：色轮上相对的原色（使用时一种做为主色，另外一种用于强调）
   • 三色组：彼此等距的三种颜色会造成一个让人愉悦的三色组。
     1. 基色三色组：红黄蓝，儿童产品多采用这组颜色组合
     2. 间色三色组：绿橙紫，让人感受愉悦的色彩组合
     3. 全部的三色组的颜色都有基础色使其相互链接，因此看上去很是协
   • 分列式互补三色组：从色轮一边选择一个颜色，而后找出对面互补色两侧的颜色获得的组合。这样的组合会有一种更加细致的颜色边界。
   • 相似色：色轮上拥有相同基础色而彼此相邻的颜色，协调而醒目。
2. 暗色和亮色
   • 色调：色轮上的12中纯色
   • 暗色：向色调中添加黑色
   • 亮色：向色调中添加白色
   • 单色：由一种色调及其相应的多种亮色和暗色组成
   • 暗色和亮色的组合：互补色能够采用对应色调的亮色和暗色，这样能够极大地丰富选择，而且能够放心这些色彩的协调性（红黄蓝没法摆脱幼稚ID感受，红色和绿色会让人更多地联想到圣诞节）
3. 暖色和冷色
   • 暖色：黄色或黄色，趋进型的颜色，少许的颜色变能够产生强烈的效果
   • 冷色：蓝色，后退型的颜色，适合作背景色
   • 暖色和冷色组合，少用暖色，多用冷色，才能产生有效而明显的对比。
4. CMYK
   • Cyan（蓝绿色、青色）、Magenta（洋红色）、Yellow、Key
   • 全部的印刷品都是使用CMYK 模型印刷的
5. RGB
   • Red、Green、Blue
   • 计算机显示器、手机、电视上显示的是 RGB 颜色
   • 组成 RGB 的有色光束不是从任何物理物理反射出来的，而是直接从显示器传入人眼的光。

提示和技巧

1. 去掉一切非必要的信息，如“电话”、“邮箱”、“网址”之类的词
2. 图像通常不须要边框
3. 建立一个中心点，在页面放一个很大、有趣并且明显的东西
4. 使用有对比的子标题
5. 字母不要全大写
6. 多段落文本第一段不用缩进，后面的段落缩进1em，段落之间要么有额外的空间，要么有缩进，但不要二者都有。
7. 不要使用 Helvetica/Arial
8. 不要在文本的最后一行留下一个单词，甚至是一个单词的一部分（使用链接符号）
9. 跟随在有样式的文字后的标点应该是一样的样式（如：加粗文字后的冒号也应该加粗）
10. 括号中的标点：
    • 若是括号中的文字是整个句子的一部分，那么标点就应该在括号以外（就像这里的例子同样）。
    • 若是括号内的文字是一个完整单独的句子，标点应该出如今括号内。（这就是一个标点出如今括号内的例子。）
      12.

2、字体设计

字体的基本规则

标点后面一个空格、引号、撇号、链接号、特殊符号、重音符号、大写字母、下划线、字距调整、寡妇和孤儿

字体（与人生）

1. 协调：页面上全部的元素采用一样性质的字体。（平和正式）
2. 冲突：页面上设置了多个相似的字体，不彻底相同但也不彻底不一样。
3. 对比：建立协调和制造冲突都至关容易，不过不受欢迎，产生对比则很是有趣。
   • 对比的方式：大小、粗细、结构、形状、方向、颜色

字体类别

1. Oldstyle（旧式体）：基于手写体建立的，有衬线（小写字母的衬线有固定倾斜的角度）、过渡（从粗到细的变化）和强调线（在曲线笔划最细的部分画的对角线）。
2. Modern（现代体）：再也不遵循手中拿笔的笔迹，衬线水平，再也不倾斜，结构严格，笔划中又剧烈的粗细过渡和对比。效果醒目而震撼，可是在显示大量文本时，会显得“眩目”。
3. Slab serif（粗衬线体）：将字体加粗，字体的粗细过渡很小甚至没有。能够提供很好的阅读性，适用于显示大量文本，外观间接直接，常在儿童图书中使用。
4. Sans serif（无衬线体）：sans 在法语中含义是“没有”。笔划末端没有衬线，字体的粗细几乎是单一的。
5. Script（手写体）：让人印象深入，可是要少用。
6. Decorative（花体）：其余的奇怪字体，会传达鲜明的情绪，使用要有限制。

字体对比

1. 为了有效使用大小对比，以为不要保守，大小相差很少的字体只会形成冲突。
2. 字体大小对比不是让字体变得很大，而是要求有对比。即便是在一张很大的空白页中放一行很小的字体，也是一种明显的对比。
3. 尽可能不要所有用大写，大写文本比小写宽度大不少，并且可读性下降。
4. 衬线体和无衬线体的对比（大小、结构），不要试图结合两种类似的无衬线体。
5. 布局中方向上的对比：水平方向使用扩展字体，垂直方向使用高字体。
6. 字体颜色的对比：暖色、冷色、不一样程度的黑色。

3、其余

设计的过程

1. 从中心点开始。肯定但愿读者最早看到什么。
2. 将信息分组。经过组之间的靠近与否（亲密性）来显示这些关系。
3. 在组织文本和图片时，要创建并维护明确的对对齐。
4. 建立重复，或者找出能够重复的项。
5. 创建对比，吸引读者的视线。