写给非设计专业的人看的一本设计书，我给满分 🌕🌕🌕🌕🌕

本书立意

本书假设你没有足够的时间或者兴趣来专门学习设计和排版技术，但是又很想知道如何才能让页面看上去更好一些。

本书指出了 4 大基本概念，几乎每一个精良的设计中都用到了这 4 个概念。这些概念非常明确也很具体。如果你不知道哪里出了问题，又怎么能进行修正呢？一旦认识了这些概念，就会注意到你的页面中是否已经应用了这些概念。只有找出问题所在，方能得出解决方案。

四大原则

• 亲密性（Proximity）
  • 彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。
• 对比（Contrast）
  • 对比的基本思想是，要避免页面上的元素太过相似 。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同 ，那就干脆让它们截然不同 。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。
• 重复（Repetition）
  • 让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。
• 对齐（Alignment）
  • 任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

亲密性

• 亲密性的根本目的是实现组织性。 利用亲密性原则， 只需简单地将相关的元素分在一组建立更近的亲密性， 就能自动实现条理性和组织性。 如果信息很有条理， 将更容易阅读， 也更容易被记住。
• 在一个页面上，物理位置的接近就意味着存在关联。
• 如果多个项相互之间有很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。就像实际生活中一样，亲密性（即紧密性）意味着存在关联 。
• 一般情况下，如果页面上的项超过 3 ～ 5 个， 就要看看哪些孤立的元素可以归在一组建立更近的亲密性， 使之成为一个视觉单元。
• 要避免的问题
  • 避免一个页面上有太多孤立的元素。
  • 不要在元素之间留出同样大小的空白， 除非各组同属于一个子集。
  • 标题、 子标题、 图表标题、 图片能否归入其相关材料？ 在这个问题上一定要非常清楚（哪怕只有一点含糊都要尽量避免）。 在有很近亲密性的元素之间建立关系。
  • 不同属一组的元素之间不要建立关系！ 如果元素彼此无关， 要把它们分开。
  • 不要仅仅因为有空白就把元素放在角落或中央。

分组时候，组外元素距离要大于组内元素距离

对齐

• 对齐的目的是使页面统一且有条理。
• 对齐原则是指： 任何元素都不能在页面上随意安放。 每一项都应当与页面上的 某个内容存在某种视觉联系。
• 应当找一条明确的对齐线， 并用它来对齐。 如果有一张照片或图片（有 明确的直边）， 可以沿着照片的这个直边与文本的平边对齐。
• 居中对齐时，对齐线很软，不明显；使用左右对齐，对齐线更清晰，效果更分明。所以在使用居中对齐时，注意页面上不要有很明显的线条装饰，这样的话线条会更吸引眼球，使得居中效果大大降低。
• 要避免的问题
  • 要避免在页面上混合使用多种文本对齐方式（ 也就是说， 不要将某些文本居中， 而另外一些文本右对齐）。
  • 另外， 要着力避免居中对齐， 除非你有意识地想要创建一种比较正式、 稳重（ 通常也更乏味） 的表示。 并不是完全杜绝使用居中对齐， 有时可以有意地选择这种对齐方式， 但是不要把它作为默认选择。

居中对齐时，对齐线很软，不明显；使用左右对齐，对齐线更清晰，效果更分明

第一张图片虽然将元素进行了分组，并设置了对齐，但是整体的对齐线很不明确

重复

• 重复的目的是凸显“一致性”，并增强视觉效果。
• 设计的某些方面需要在整个作品中重复。 重复元素可能是一种粗字体、 一条粗线、 某个项目符号、 颜色、 设计要素、 某种格式、 空间关系等。 读者能看到的任何方面都可以作为重复元素。
• 要避免的问题
  • 要避免太多地重复一个元素， 重复太多会让人讨厌。 要注意对比的价值（ 请看下一章以及有关字体对比的章节）。

对比

• 对比是为了突出“层次感”，是为了吸引眼球、制造焦点、指引读者。
• 一个重要规则： 要想实现有效的对比， 对比就必须强烈。
• 两个元素有区别但区别不大的时候不叫对比，叫冲突。
• 要避免的问题
  • 不要犹豫。 如果你想形成对比， 就加大力度。 不要将一种粗线与一种更粗的线进行对比。 不要将棕色文本与黑色标题建立对比。 要避免使用两种或多种类似的字体。如果各个项不完全一样， 干脆让它们截然不同！

标题加大加粗

只保留一种对齐方式；更明显的标题；增加段落间距；重点处使用粗体

颜色运用

颜色运用这一章可太干货了（可能是我没见识😆），非常的实用，运用之后效果立竿见影！

先明确几个名词：

• 色相：
  • 色相是色彩的首要特征，它是指不同颜色之间的本质区别，由光的波长决定，比如红黄蓝是三种不同的色相。
• 色彩明度（亮度）：
  • 指色彩的明亮程度，是色彩的基本属性之一，取决于物体反射光的量，反射光量越多，明度越高；反射光量越少，明度越低。
  • 在无彩色系中，白色明度最高，黑色明度最低，灰色的明度介于两者之间。
  • 在有彩色系中，黄色通常被认为是明度较高的颜色，而紫色相对明度较低。
• 色彩纯度（饱和度）：
  • 是指色彩的鲜艳程度。纯度最高的颜色是未经混合的原色，如纯红色、纯黄色、纯蓝色等。
  • 当颜色中混入了其他颜色或灰色时，纯度就会降低。例如，在红色中逐渐加入白色，红色会逐渐变浅，变成粉红色，其纯度也随之降低；如果在红色中加入黑色，红色会变暗，纯度同样降低；若加入灰色，红色会变得浑浊，纯度也降低。
• 色调：
  • 色调是指一幅作品或一个设计整体的色彩倾向，它是基于色相、明度和纯度综合形成的一种色彩感觉。
  • 书中说到的“色调”我个人认为更应该叫“色相”。

色轮

本小节讲的是不同色相之间的关系和使用。

三原色：红黄蓝。可以通过混合这三种颜色来得到其他颜色，但是没有办法通过混合其他颜色来得到纯黄、 纯红或纯蓝色。

互补：色轮上相对（即完全对立） 的颜色为互补色。 由于它们如此对立， 所以最佳搭配是一种作为主色， 另一种用于强调。↓

三色组：彼此等距的三种颜色通常会形成一个让人愉悦的三色组。 ↓

分裂互补三色组：另一种形式的三色组称为分裂互补三色组。 从色轮的一边选择一种颜色， 再在色轮上找出它对面的互补色， 不过并不直接使用这个互补色， 而是使用该互补色两侧的颜色。 这样得到的组合会有一种更为细致的颜色边界。

类似色：类似色组合由色轮上彼此相邻的颜色组成。 不论组合两种颜色还是三种颜色， 它们 都有相同的基础色， 这就形成了一个协调的组合。 用不同的亮色和暗色组合一组类 似色（亮色和暗色将在下一页解释）， 效果相当醒目！

暗色和亮色（色彩明度）

向不同色相里增加黑色或白色，可以实现不同的色彩明度。增加黑色构成暗色，增加白色构成亮色；

单色组合：由一种色调及其相应的多种亮色和暗色组成。

暗色和亮色的组合：某些纯色的组合可能会有刻板印象，比如红绿组合容易联想到圣诞节，红黄蓝组合容易联想到儿童。此时改用暗色和亮色的组合会更容易打破刻板印象。

暖色与冷色：

• 冷暖色一起使用时，不要太过均衡。
• 由于冷色是后退型的， 所以使用更多的冷色才能产生效果或形成有效的对比，适合做背景色。
• 暖色是趋近型的，更容易产生效果，所以要少用。

项目中的颜色如何确定？

• 项目有季节性吗？可以使用类似色来暗示季节： 火热的红色和黄色表示夏季， 冰冷的蓝色表示冬季， 不同色度的橙色和棕色代表秋天， 明亮的绿色象征春天。
• 公司有没有官方颜色？可以使用互补色或单色组合。
• 项目是否包含图像？可以从图像中吸取主题色。

读后感

这本书对于做前端开发的我来说真是帮了大忙了！

我现在呆的公司体量小，做项目时没有专门的 UI 岗，基本上全靠前端自己的审美和觉悟来写页面。虽然大部分项目写的是业务代码，使用了 element plus，在一定程度上保证了ui的一致性，但也仅限于公共组件。页面整体上的协调性，包括文字、组件如何布局、颜色的使用等等，还是需要有一定的设计原则来约束和参考。这本书的作用就体现在这儿了，书中提到的这几个原则，不仅易学易用，且实用性强，虽然可能不会让这个页面在设计层面有多么的出彩，但是绝对不会出错！这就够了！

而且还有一个很重要的点，一般人都会认为审美这个东西很主观，所以你写出来页面之后，许多人都会按照自己的审美来挑一些毛病，这个时候当你如果遵循了上面这些设计原则，你就能有理有据、引经据典地去反驳他们。不仅你自己会很爽，还显得你很专业，完美😄