《写给大家看的设计书》读后感想

2023-03-28 pv

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

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

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

豆瓣评分 8.6,不低。

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

一、亲密性(Proximity)

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

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

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

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

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

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

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

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

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

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

二、对齐(Alignment)

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

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

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

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

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

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

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

三、重复(Repetition)

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

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

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

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

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

其根本目的在于:统一,并增强视觉效果

四、对比(Contrast)

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

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

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

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

让相似的越来越相似,不同的越来越不同

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

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

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

五、复习

有关设计(同时也是有关生活)的更一般的指导原则是:不要畏畏缩缩

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

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

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

六、总结

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

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

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

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

(完)

参考:

  1. https://tailwindcss.com/🔗
  2. https://book.douban.com/subject/26664522/🔗
在 GitHub 上编辑本页面

最后更新于: 2024-06-14T07:17:44+08:00