乐趣区

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

jiezi

一、设计原则

4 大基本原则

  1. 亲密性（Proximity）

含义：将相关的项组织在一起，成为一个视觉单元，而不是孤立的元素
作用：使信息更有组织性和条理性，减少混乱，使结构更加清晰，更容易阅读。
实现：

- 要注意视线的移动，从哪里开始，沿着怎么样的路径，在哪里结束。- 分析哪些信息在逻辑上存在关联，哪些信息需要强调，通过分组来突出这些信息
- 利用元素的紧密程度反映元素之间的关系
- 如果页面上的元素超过 3~5 个，就要考虑哪些谷粒多元素可以建立更近的亲密性，使之成为一个视觉单元

避免：

- 避免一个页面有太多的孤立元素
- 不要在元素之间留出同样大小的空白
- 不要因为有空白就把元素放在角落或中央
  1. 对齐（Alignment）

含义：任何元素都不能随意摆放，每个元素都应当与页面另一个元素有某种视觉联系，
作用：建立一种清晰、精巧而且清爽的外观，使页面统一而有条理，给人一种平静、安全的感觉。
实现：

- 找一条明确的对齐线，并坚持以它为基准。- 如果文本行水平摆放，则按其基线对齐；如果有多个单独的文本块，则对齐其左边界或右边界；图片元素与页面的其他的边界对齐
- 只要是有意为之，可以大胆干脆的打破对齐，前提是打破规则之前必须清楚规则是什么

避免：

- 避免同时使用多种对齐方式。- 减少居中对齐（正式、稳重，但过于常规，偏于乏味）
  1. 重复（Repetition）

含义：设计中的视觉要素要在整个作品中重复出现（颜色、形状、材质、空间关系、空白、字体、线宽、大小和图片等）
作用：增加条理性，加强统一性，增强视觉效果。重复是一种深思熟虑的设计决策，可以为作品带来一种专业性和权威性。
实现：

- 如果那个元素引起了你的兴趣，就可以拿它用作重复元素。- 使用重复原则时候，可以将一个元素从现在的设计中抽取出来，并根据这个元素创建一个新设计
- 可以添加一些纯粹为建立重复而设计的元素（编号列表、字体、线条等）-

避免：

- 重复的项并不一定完全相同，只是存在明确关联的对象
- 避免太多的重复一个元素，要注意对比的价值
  1. 对比（Contrast）

含义：页面上的不同元素之间要有对比效果（字体、颜色、间隔、大小、材质等），在设计原则中，对比效果最为显著。
作用：增强页面的效果，有助于信息的组织
实现：

- 将关键短语设为粗体
- 要实现有效的对比，两个元素必然截然不同
- 对比一定要强烈

避免：

- 对比元素不能让读者混淆，也不能错误地强调重点
- 不要犹豫，加大力度，元素之间对比要截然不同

颜色运用

  1. 色轮的运用

    • 三原色：红 黄 蓝（无法创建的颜色，色轮的基础）
    • 三间色：将色轮上相邻的颜色灯亮混合得到的颜色。（红 橙 黄 绿 蓝 紫）
    • 第三色：将色轮剩下的空白两边的颜色继续等量混合得到的颜色
    • 互补色：色轮上相对的原色（使用时一种作为主色，另一种用于强调）

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

      1. 基色三色组：红黄蓝，儿童产品多采用这组颜色组合
      2. 间色三色组：绿橙紫，让人感觉愉悦的色彩组合
      3. 所有的三色组的颜色都有基础色使其相互连接，所以看上去非常协
    • 分列式互补三色组：从色轮一边选择一个颜色，然后找出对面互补色两侧的颜色得到的组合。这样的组合会有一种更加细致的颜色边界。
    • 类似色：色轮上拥有相同基础色而彼此相邻的颜色，协调而醒目。

  2. 暗色和亮色

    • 色调：色轮上的 12 中纯色
    • 暗色：向色调中添加黑色
    • 亮色：向色调中添加白色
    • 单色：由一种色调及其相应的多种亮色和暗色组成
    • 暗色和亮色的组合：互补色可以采用对应色调的亮色和暗色，这样可以极大地丰富选择，并且可以放心这些色彩的协调性（红黄蓝无法摆脱幼稚 ID 感觉，红色和绿色会让人更多地联想到圣诞节）

  3. 暖色和冷色

    • 暖色：黄色或黄色，趋进型的颜色，少量的颜色变可以产生强烈的效果
    • 冷色：蓝色，后退型的颜色，适合做背景色
    • 暖色和冷色组合，少用暖色，多用冷色，才能产生有效而明显的对比。

  4. CMYK

    • Cyan（蓝绿色、青色）、Magenta（洋红色）、Yellow、Key
    • 所有的印刷品都是使用 CMYK 模型印刷的

  5. RGB

    • Red、Green、Blue
    • 计算机显示器、手机、电视上显示的是 RGB 颜色
    • 组成 RGB 的有色光束不是从任何物理物理反射出来的，而是直接从显示器传入人眼的光。

提示和技巧

  1. 去掉一切非必要的信息，如“电话”、“邮箱”、“网址”之类的词
  2. 图像一般不需要边框
  3. 创建一个中心点，在页面放一个很大、有趣而且明显的东西
  4. 使用有对比的子标题
  5. 字母不要全大写
  6. 多段落文本第一段不用缩进，后面的段落缩进 1em，段落之间要么有额外的空间，要么有缩进，但不要两者都有。
  7. 不要使用 Helvetica/Arial
  8. 不要在文本的最后一行留下一个单词，甚至是一个单词的一部分（使用连接符号）
  9. 跟随在有样式的文字后的标点应该是同样的样式（如：加粗文字后的冒号也应该加粗）

  10. 括号中的标点：

    • 如果括号中的文字是整个句子的一部分，那么标点就应该在括号之外（就像这里的例子一样）。
    • 如果括号内的文字是一个完整单独的句子，标点应该出现在括号内。（这就是一个标点出现在括号内的例子。）

二、字体设计

字体的基本规则

标点后面一个空格、引号、撇号、连接号、特殊符号、重音符号、大写字母、下划线、字距调整、寡妇和孤儿

字体（与人生）

  1. 协调：页面上所有的元素采用同样性质的字体。（平和正式）
  2. 冲突：页面上设置了多个类似的字体，不完全相同但也不完全不同。

  3. 对比：创建协调和制造冲突都相当容易，不过不受欢迎，产生对比则非常有趣。

    • 对比的方式：大小、粗细、结构、形状、方向、颜色

字体类别

  1. Oldstyle（旧式体）：基于手写体创建的，有衬线（小写字母的衬线有固定倾斜的角度）、过渡（从粗到细的变化）和强调线（在曲线笔划最细的部分画的对角线）。
  2. Modern（现代体）：不再遵循手中拿笔的笔迹，衬线水平，不再倾斜，结构严格，笔划中又剧烈的粗细过渡和对比。效果醒目而震撼，但是在显示大量文本时，会显得“眩目”。
  3. Slab serif（粗衬线体）：将字体加粗，字体的粗细过渡很小甚至没有。可以提供很好的阅读性，适用于显示大量文本，外观间接直接，常在儿童图书中使用。
  4. Sans serif（无衬线体）：sans 在法语中含义是“没有”。笔划末端没有衬线，字体的粗细几乎是单一的。
  5. Script（手写体）：让人印象深刻，但是要少用。
  6. Decorative（花体）：其他的奇怪字体，会传达鲜明的情绪，使用要有限制。

字体对比

  1. 为了有效使用大小对比，觉得不要保守，大小相差不多的字体只会造成冲突。
  2. 字体大小对比不是让字体变得很大，而是要求有对比。即使是在一张很大的空白页中放一行很小的字体，也是一种明显的对比。
  3. 尽量不要全部用大写，大写文本比小写宽度大很多，而且可读性降低。
  4. 衬线体和无衬线体的对比（大小、结构），不要试图结合两种相似的无衬线体。
  5. 布局中方向上的对比：水平方向使用扩展字体，垂直方向使用高字体。
  6. 字体颜色的对比：暖色、冷色、不同程度的黑色。

三、其他

设计的过程

  1. 从中心点开始。确定希望读者最先看到什么。
  2. 将信息分组。通过组之间的靠近与否（亲密性）来显示这些关系。
  3. 在组织文本和图片时，要建立并维护明确的对对齐。
  4. 创建重复，或者找出可以重复的项。
  5. 建立对比，吸引读者的视线。

本文由博客一文多发平台 OpenWrite 发布！

退出移动版