看题图进来的人，往往都想打人。
这是一篇笔记，旨在凝练书中观点，没有个人好恶倾向。（前半部分是这样，后半部分还没写）
为什么起名 笔记 Plus 呢？有三个原因
- 重绘了图片例子，更加现代化，还换成了中文。
- 不仅重绘了图片例子，还给出了 CSS 代码。
- 将介绍字体的部分，换成了中文字体，辅以我的看法。
这本书，很薄儿；大概，一上午就能读完。而且深入浅出（非设计相关专业也能读），还很实用（前端必备书籍）。
开门见山，这本书介绍了设计的四大原则：对比、重复、对齐、紧密性（亲密性）。
紧密性
虽然中文译版称之为“亲密性”，不过我觉得“紧密性”更加确切一些。
一句话概括：在内容上相关联的项目，在空间上也应该彼此靠近，形成视觉单元。
单元化
（原书的例子是个名片，这里现代化了一些）
❌ 眼神无处安放，到底要先看哪里？从右上角粗体字吗？还是右下脚的红色字？孤立元素太多。
✅是不是舒服了许多，阅读顺序从左到右，从上到下。
内容相关性强的结合成了一个单元，空间上排布的也更加紧密。
Tips:
在网页中，使用
flex 布局可以轻松实现上面的布局效果。.container { display: flex; /* 开启先进布局 */ flex-flow: column nowrap; /* 切换成纵向排版 */ justify-content: space-around; /* 纵向元素之间均衡留白 */ aligin-items: center; /* 所有元素横向居中 */ }
留白
将不同视觉单元分割开来，让不该有紧密性的元素（内容是并无太大关联的元素）彼此独立。不仅会使页面更有条理，看上去也更美观。
左图中，几乎所有元素都是等间距的，从视觉上无法区分出哪些是一组，不同属一组的元素之间不要建立关系（挨的太近）。
中间这幅图，增加了留白，区分了不同文章卡片，卡片中，区分了元信息、标题、简介三部分。
再举个例子，比如说词云。（当然词云出现在该出现的位置是没问题的）
对齐
任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。
比较常见的对齐模式有：
- 随意安放
- 居中对齐
- 左对齐
- 右对齐
比如我们在做 Slides 的时候，
先来看一些正确示范👇
居中对齐👆 左对齐👇
为了更加生动形象，下面这个例子集合了许多错误的示范。
- 绝对不要在左对齐的正文或缩进的文本上方将标题居中。如果文本没有明确的左边界和右边界，就无法区分标题是否确实居中，看起来它只是悬挂着而已。
- 要避免在页面上混合使用多种文本对齐方式。
- 避免居中对齐，因为比较乏味。🤔：并不赞同，我觉得居中也挺好看的，但层次分明的左对齐更加舒适。
什么时候使用右对齐
现代汉语的书写阅读习惯是，从左到右，自上而下。右对齐一定程度上会影响阅读的流畅性，因此并不太推荐广泛的使用右对齐。
这里使用了书中的一个例子 👆
如何操作：找一条明确的( 不可见的 ) 线 ，并用它来对齐。
重复
重复的目的就是统一，并增强视觉效果。不要低估页面视觉效果的威力，如果一个作品看起来很有趣，它往往也更易于阅读。
通过重复引导视线
再来观察下之前出现的广告，有没有发现哪里变得不一样了？
之前的小广告，读到信息的末尾时，你的视线是不是会四处漫游？
末尾字体加粗的小广告，读到信息的末尾时，现在你的视线会向哪里移？它会在粗体元素之间来回跳吗？可能会，这正是重复的主旨，它能把整个作品联系在一起，提供统一性。
增强视觉效果
重复最大的好处是使各项看起来同属一组，虽然元素看起来都不完全相同。由此可以看出，一旦建立一组关键的重复项。你就可以变换这些项并仍可保持一致的外观。
这个例子它又出现了。这些子标题的重复，达成了增强视觉效果的目的，就算不仔细看内容，用眼一扫，就知道里面的主要内容是新旧对比。
对比
如果对比，就要大胆。
对比在设计中是很常见的，标题与正文就是一种对比，子标题在颜色上区别于正文也是一种对比。
但千万不要保守，因为看起来就像是个失误。
- 在半粗体（semibold）和粗体（bold）之间也不存在强烈的对比。如果你想利用粗细来形成对比，就不要保守。如果对比不强烈，看上去只会像是一个失误。
- 12点和14点大小的字体无法形成明显的对比，大多数情况下，它们只会产生冲突。同样地，65点与72点的字体也相差无几，不能形成对比。如果想在字体大小方面让两个元素产生对比，就放手去做。要力求明显，不要让人觉得这是一个失误。
中文字体
- 衬线字体与非衬线字体
出版物（印刷物）和屏幕上字体的显示有比较大的区别，屏幕上往往使用非衬线的字体，报纸等出版物上往往更青睐衬线字体，这其中有什么缘由？
- 字体的重量 ( weight )
决定字体粗细的不只有加粗和不加粗两种。
- 重视版权问题：别拿来一个字体就用，哪些字体是开源免费好看的？
Emmm,
到这里已经写了 1649 个字了，配了 18 张图了，肝不动了，下期再说 8⃣️
最后
与其说是设计，不如说是排版。
其实我觉得，排版只是手段，传递有价值的内容才是目的。
所以赶快跟 X百套 PPT 模板说拜拜吧，更何况还都很丑。
简简单单，做起来方便，看起来也方便。
参考资料：
- 《写给大家看的设计书》 , [美] Robin Williams.