笔记 Plus|《写给大家看的设计书》

笔记 Plus|《写给大家看的设计书》

看题图进来的人,往往都想打人。

Plus/Untitled.png


这是一篇笔记,旨在凝练书中观点,没有个人好恶倾向。(前半部分是这样,后半部分还没写)

为什么起名 笔记 Plus 呢?有三个原因

  • 重绘了图片例子,更加现代化,还换成了中文。
  • 不仅重绘了图片例子,还给出了 CSS 代码。
  • 将介绍字体的部分,换成了中文字体,辅以我的看法。

这本书,很薄儿;大概,一上午就能读完。而且深入浅出(非设计相关专业也能读),还很实用(前端必备书籍)。

开门见山,这本书介绍了设计的四大原则:对比、重复、对齐、紧密性(亲密性)。

紧密性

虽然中文译版称之为“亲密性”,不过我觉得“紧密性”更加确切一些。

一句话概括:在内容上相关联的项目,在空间上也应该彼此靠近,形成视觉单元。

单元化

(原书的例子是个名片,这里现代化了一些)

Plus/Untitled%201.png

❌ 眼神无处安放,到底要先看哪里?从右上角粗体字吗?还是右下脚的红色字?孤立元素太多。

Plus/Untitled%202.png

✅是不是舒服了许多,阅读顺序从左到右,从上到下。

Plus/Untitled%203.png

内容相关性强的结合成了一个单元,空间上排布的也更加紧密。

Tips:

在网页中,使用 flex 布局可以轻松实现上面的布局效果。

.container {
    display: flex; /* 开启先进布局 */
    flex-flow: column nowrap; /* 切换成纵向排版 */
    justify-content: space-around; /* 纵向元素之间均衡留白 */
    aligin-items: center; /* 所有元素横向居中 */
}

留白

将不同视觉单元分割开来,让不该有紧密性的元素(内容是并无太大关联的元素)彼此独立。不仅会使页面更有条理,看上去也更美观。

Plus/Untitled%204.png

左图中,几乎所有元素都是等间距的,从视觉上无法区分出哪些是一组,不同属一组的元素之间不要建立关系(挨的太近)。

中间这幅图,增加了留白,区分了不同文章卡片,卡片中,区分了元信息、标题、简介三部分。

再举个例子,比如说词云。(当然词云出现在该出现的位置是没问题的)

对齐

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。

比较常见的对齐模式有:

  • 随意安放
  • 居中对齐
  • 左对齐
  • 右对齐

比如我们在做 Slides 的时候,

先来看一些正确示范👇

Plus/Untitled%205.png

居中对齐👆 左对齐👇

Plus/Untitled%206.png

为了更加生动形象,下面这个例子集合了许多错误的示范。

Plus/Untitled%207.png

  • 绝对不要在左对齐的正文或缩进的文本上方将标题居中。如果文本没有明确的左边界和右边界,就无法区分标题是否确实居中,看起来它只是悬挂着而已。
  • 避免在页面上混合使用多种文本对齐方式。
  • 避免居中对齐,因为比较乏味。🤔:并不赞同,我觉得居中也挺好看的,但层次分明的左对齐更加舒适。

什么时候使用右对齐

现代汉语的书写阅读习惯是,从左到右,自上而下。右对齐一定程度上会影响阅读的流畅性,因此并不太推荐广泛的使用右对齐。

Plus/Untitled%208.png

这里使用了书中的一个例子 👆

如何操作:找一条明确的( 不可见的 ) 线 ,并用它来对齐。

重复

重复的目的就是统一,并增强视觉效果。不要低估页面视觉效果的威力,如果一个作品看起来很有趣,它往往也更易于阅读。

通过重复引导视线

再来观察下之前出现的广告,有没有发现哪里变得不一样了?

Plus/Untitled%209.png

之前的小广告,读到信息的末尾时,你的视线是不是会四处漫游?

末尾字体加粗的小广告,读到信息的末尾时,现在你的视线会向哪里移?它会在粗体元素之间来回跳吗?可能会,这正是重复的主旨,它能把整个作品联系在一起,提供统一性。

Plus/Untitled%2010.png

增强视觉效果

重复最大的好处是使各项看起来同属一组,虽然元素看起来都不完全相同。由此可以看出,一旦建立一组关键的重复项。你就可以变换这些项并仍可保持一致的外观。

这个例子它又出现了。这些子标题的重复,达成了增强视觉效果的目的,就算不仔细看内容,用眼一扫,就知道里面的主要内容是新旧对比。

Plus/Untitled%2011.png

对比

如果对比,就要大胆。

对比在设计中是很常见的,标题与正文就是一种对比,子标题在颜色上区别于正文也是一种对比。

但千万不要保守,因为看起来就像是个失误。

  • 在半粗体(semibold)和粗体(bold)之间也不存在强烈的对比。如果你想利用粗细来形成对比,就不要保守。如果对比不强烈,看上去只会像是一个失误。
  • 12点和14点大小的字体无法形成明显的对比,大多数情况下,它们只会产生冲突。同样地,65点与72点的字体也相差无几,不能形成对比。如果想在字体大小方面让两个元素产生对比,就放手去做。要力求明显,不要让人觉得这是一个失误。

中文字体

  • 衬线字体与非衬线字体

    出版物(印刷物)和屏幕上字体的显示有比较大的区别,屏幕上往往使用非衬线的字体,报纸等出版物上往往更青睐衬线字体,这其中有什么缘由?

    Plus/Untitled%2012.png

  • 字体的重量 ( weight )

    决定字体粗细的不只有加粗和不加粗两种。

  • 重视版权问题:别拿来一个字体就用,哪些字体是开源免费好看的?

Emmm,

Plus/Untitled%2013.png

到这里已经写了 1649 个字了,配了 18 张图了,肝不动了,下期再说 8⃣️

最后

与其说是设计,不如说是排版。

其实我觉得,排版只是手段,传递有价值的内容才是目的。

所以赶快跟 X百套 PPT 模板说拜拜吧,更何况还都很丑。

简简单单,做起来方便,看起来也方便。

参考资料:

  • 《写给大家看的设计书》 , [美] Robin Williams.

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×