盒子
目录
文章目录
  1. 第一部分 设计原则
    1. 约书亚树
    2. 亲密性 (Proximity)
    3. 对齐(Contrast)
    4. 重复 (Repetition)
    5. 对比 (Alignment)
    6. 复习
    7. 颜色运用
    8. 更多提示和技巧
  2. 第二部分 字体设计
    1. 字体
    2. 字体类别
    3. 字体对比
  3. 其他

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

文章取自我的 Github repos: Learning-HTML-CSS, 作者:@paddingme
原文链接:https://github.com/paddingme/Learning-HTML-CSS/issues/40

第一部分 设计原则

约书亚树

一旦你能够说出什么东西的名字,就会很容易注意到它。你就会掌握它,拥有它,使它在你的控制中。

优秀的设计就这么简单:

  1. 学习 4 大基本原则。
  2. 认识到自己没有运用这些原则。
  3. 应用基本原则。

4 大基本原则:

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

亲密性 (Proximity)

亲密性原则是指: 将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看做凝聚为一体的一个组,将不再是彼此无关的片段。物理位置的接近就意味存在着关联。亲密性的根本目的是实现组织性

要有意识地注意你是怎样阅读的,你的视线怎样移动: 从哪里开始;沿着怎样的路径;到哪里结束;读完之后,接下来看哪里?整个过程应当是一个合理的过程,有确定的开始,而且要有确定的结束。

  • 如何实现

    微微眯起眼睛,统计你的眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过 3~5 个(当然这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。

  • 要避免的问题

    • 不要仅仅因为有空白就把元素放在角落或者中央;
    • 避免一个页面上有太多鼓励的元素;
    • 不要在元素之间留出同样大小的空白,除非各组同属于一个子集。
    • 标题、子标题、图标标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕有一点含糊都要尽量避免)。在有很近亲密性的元素之间建立关系。
    • 不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。

对齐(Contrast)

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

居中对其会创建一种更正式、更稳重的外观。这种外观显得更为中规中矩,但通常也很乏味。大多数看起来精巧的设计都没有采用居中对齐。

页面上只使用一种文本对齐,所有文本都左对齐,或右对齐,或者全部居中。

有时,你可能喜欢在同一个页面上同时使用右对齐或者左对齐文本,不过一定要确保让这些文本以某种方式对齐!

找到一条明确的对齐线,并坚持以它为基准。

如果设计中的对齐很明确,那么可以有意识地打破对齐,而且一定要表现出这是有意的,技巧就在于,打破常规对齐时不要怯弱,一定要干脆一些。要么全部采用一种方式,要么全部不采用这种方式。千万不要保守。在打破规则之前必须清楚规则是什么

对齐的根本目的设计使页面统一且有条理

重复 (Repetition)

重复原则:设计的某些方面需要在整个作品中重复。读者能看到的任何方面都可以作为重复元素。

新手要把重复的概念更进一步,把无意的重复变为有意,利用重复将一系列出版物从视觉上系为一体。

重复不知识自然的一致,这是一种统一设计各个部分的有意识的行为。

设计中视觉原速度额重复可以将作品中的各部分连在一起,从而统一并增强整个作品,否则这些部分知识彼此孤立的单元。重复不仅对只有一页的作品很有用,对于多页文档的设计更显重要(一致性)。

重复的目的就是统一,并增强视觉效果。

如何做呢,需要把现有的一致性更向前推进一步。

要避免太多地重复一个元素,重复太多会让人讨厌。要注意对比的价值。

对比 (Alignment)

要想实现有效的对比,对比就必须强烈,千万不要畏畏缩缩。

如果两个项不完全相同,就应当使之不同,而且应当是截然不同。

对比的根本目的一是增强页面的效果,另一个有助于信息的组织。不要犹豫,如果你想形成对比,就加大力度。不要将一种粗线与一种更粗的线进行对比。不要讲棕色文本与黑色标题建立对比。要避免使用两种或多种类似的字体。如果各个项不完全一样,干脆让它截然相反!

复习

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

  • 不要害怕在设计(或生活)留有空白,这能让你的眼睛(以及心灵)稍作休息。
  • 不要害怕设计是不对称的,使用非居中的格式,不居中往往能使效果更强烈。尽管不建议使用居中,不过有意这么做也无不可。
  • 不要害怕把单词设置得非常大或者非常小,不用担心说话声太大或者太小,在合适的场合这些都是可以的。
  • 只要最后的结果能支持或者强调你的设计或观点,不要害怕让图片太大或者太小。

提高视觉敏感度

颜色运用

更多提示和技巧

第二部分 字体设计

字体

字体类别

字体对比

其他