由于工作原因，最近在重新学习前端，接触到了 Tailwind CSS🔗 Tailwind CSS 个库，这种模块化以及重新抽象的思路非常有启发。

对于前端开发者来说，工作内容大致可分为两个部分，一个是用户交互，一个是功能实现。

作为一个程序员，曾经的学习更多侧重在第二块，第一块，按照传统职能划分，是 UX 的工作，不过本着了解而不深入的原则，仍然需要了解网页设计中的一些基本原理，所以找到了《写给大家看的设计书》这本书。

豆瓣评分 8.6，不低。

这本书的独到之处有两个，一是本身就是面向没有设计经验的人写的，所以没有什么专业术语，而且讲述由浅入深，另外就是将所有的设计原则抽象成亲密性、对齐、重复和对比四个原则，提纲挈领，纲举目张，只要按照这四个原则，就能保证设计上不会出大的问题。

一、亲密性（Proximity）

亲密性原则是指：将相关的项组织在一起。

亲密性的概念，其实和 地理学第一定律🔗 地理学第一定律想要的表达的内容差不多，

所有事物都与其他事物相关，但是近处的事物比远处的事物更相关。

从这个原则出发，进一步我们需要考虑的，是如何组织信息？

将类似的信息组织在一起，将不同的信息之间用明显的间隔分割。

好处是，这种组织信息的方式对于用户来说更加容易理解。

表达者时常会产生一种错觉，以为信息挤满整个空间，使命就完成了。这里我假设一种叫做信息接受度的概念，指的是信息接受的比例：

在信息总量不变的前提下，尽可能提高信息接受度，信息传递就更有效。

亲密性的根本目的就是实现组织性。只需将相关的元素分在一组建立更近的亲密性，就能自动实现条理性和组织性。

如果信息有条理就会更容易理解和接受。

二、对齐（Alignment）

对齐原则是指：任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在视觉联系。

对齐一般有三种形式：左对齐、居中对齐和右对齐。

对于初学者来说，比较喜欢使用居中对齐，因为这种对齐方式“看上去很安全”。但这种方式通常比较乏味，因此尽可能不要选择居中对齐。

另外一个重要原则：只使用一种对齐方式。

找到一条明确的对齐线，并坚持以它为基准，当然，如果设计中的对齐很明确，适当有意识地打破也会带来意外收获。

不要保守，但也不应过于激进，基于原则，多做尝试。

要始终明确，对齐的根本目的是使页面统一而且有条理，便于读者快速找到有效信息。

三、重复（Repetition）

重复原则是指：设计的某些方面需要在整个作品中重复。

重复元素很多元，可以是粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式，或者空间关系等。

其实我们在生活中，已经在无意地使用重复原则了，比如标题设置相同大小和粗细，每个列表使用相同的项目符号等。

通常可以把重复理解为”一致性“。这会让读者产生一种意料之中的掌控感，在信息接受的过程中会更加轻松自在。

总而言之，重复可以将作品中的各个部分连在一起，统一并增强整个作品，使得各个部分看上去不会那么孤立。

其根本目的在于：统一，并增强视觉效果。

四、对比（Contrast）

对比原则：页面上的不同元素之间要有对比效果，从而达到吸引读者的效果。

要想实现有效的对比，效果就必须强烈，如果两个项完全不同，就应当使之不同，而且是截然不同。

除了吸引眼球外，对比还可以用来组织信息、清晰层级、在页面上指引读者。

这与第一条亲密性原则背道而驰。

让相似的越来越相似，不同的越来越不同。

对于关键信息，应当重点突出，让那些没有耐心的读者一眼便可获取到有效信息。

这是表达者的责任和义务。

对比的根本目的有两个：增强页面效果；有助于信息的组织。

五、复习

有关设计（同时也是有关生活）的更一般的指导原则是：不要畏畏缩缩

• 不要害怕在设计（或生活）中留空白，留点空间休息
• 不要害怕设计不对称，使用非居中的对齐往往能增强表达效果
• 不要害怕把单词设置得非常大或非常小
• 只要最后的结果能支持或强调你的设计或观点，不要害怕让图片太大或太小

生活中不缺少好的设计，缺的是视觉敏感度。

有意地从好的设计作品中“借取”观念，从简单的设计开始，不断调整，最终将别人的，内化为自己的。

六、总结

设计的价值，按照我的理解，远远不是好看这么简单，或者说，好看并不是设计所想要传达的最本质的东西。

设计的本质，在于信息的有效传递。

所谓的好看，看起来舒服，表面上描述的是一种感受，往深层次挖掘，其实是对于信息表达者所要表达内容的有效接受。

书里总结的，诸如亲密性、对齐、重复和对比四个原则，是对表达者的一种指引：如何合理地组织信息，如何清晰地呈现信息，以及将其更加有效地传达。

（完）

参考：

1. https://tailwindcss.com/🔗
2. https://book.douban.com/subject/26664522/🔗