toBeTheLight.github.io 荒原

阅读:《写给大家看的设计书》

2018-11-06
toBeTheLight

用户界面设计入门书。本书由于给出的是英文文字主导的设计示范,有些地方不能很好的理解作者想要表达的点。

第一部分 设计原则

第一章 引言

一旦你了解了什么东西,你就更容易注意到它,从而掌握它,拥有它。

四大基本原则

  • 亲密性 相关的项应当靠近,如果多个项之间存在很近的亲密性,它们就会成为一个视觉单元而非孤立项。有助于条理性。
  • 对齐 每个项都应当与页面上的另一个项有某种视觉联系,建立清晰、精巧而且清爽的外观。
  • 重复 让设计中的视觉要素(颜色、形状、材质等)在整个作品中重复出现,增加条理性和统一性。
  • 对比 如果项不同,就让它们截然不同。对比通常是引人注目的重要因素。

第二章 亲密性

亲密性即通过对留白的合理应用实现组织性

亲密性原则:将相关的项组织在一起。即,物理位置相近的项会看起来像一个整体,存在关联。

新手设计易犯的错误是,将项分散分布,不放过任何一个空间,然而设计中过多的内容会分散用户的关注点。应该使用亲密性原则解决这个问题。

亲密性实践:

  1. 把相关的项分在一组。
  2. 让附属项靠近关联的主体项,避免看起来是独立的个体。
  3. 使用空白隔离区分亲密性。
  4. 使用空白大小控制亲密关系的权重。
  5. 建立亲密性时,可能需要调整项的大小、位置来留出空白。
  6. 缩进也是留白的一种,相同缩进的分组可以表明是相似分组。

第三章 对齐

对齐的目的是使页面统一而且有条理

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

对齐原则会使被亲密性原则分开的项被一条看不到的线关联在一起。

对齐实践:

  1. 居中对齐由于没有明确的“线”,是一种强度较弱的对齐方式。而左对齐和右对齐看起来更直接清晰,有力度。
  2. 居中对齐的应用:
    • 居中对齐是一种正式稳重安全而乏味的对齐方式,新手应该避免使用它。
    • 使用居中对齐应该是一种带有目的的选择而不是默认选择。
    • 使用居中对齐时,应突出居中对齐的效果,能看出使用了居中对齐,如避免每行长度相似。
    • 使用居中对齐时可以使用小技巧,如使用居中对齐的文本块本身不在居中位置;使用不是那么正式稳重的字体。
  3. 在无法避免文字间出现难看的空隙时不要使用两端对齐。
  4. 避免多种文本对齐方式,注意是文本
  5. 找一条明确的对齐线,并坚持以它为基准(潜规则,第一段可以不缩进)。
  6. 可以使用多种对齐方式,但是要确保每一项都有与其他项的边界对齐的线。如使用右对齐的额外信息与使用左对齐的标题的最长右边界对齐。
  7. 让对齐线之间的留白形状更好看(被留白减弱的对齐线)是优化对齐的一种方式。
  8. 如同带有目的时使用居中对齐,我们也可以带有明确目的时打破对齐。打破对齐规则的项会被凸显。

第四章 重复

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

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

重复会带来一致性,利用重复将一系列项从视觉上系为一体。

重复实践:

  1. 可以利用重复的元素特征控制用户注意力,如用户注意到了粗体的标题就会注意到另一个同样粗体的项。
  2. 把已有的重复项取出,增强这种重复性,可以在视觉上增强其条理性和一致性。
  3. 在多页面中,重复的设计,可使用户在未注意到内容时就认识到页面间的关联性。
  4. 重复性设计不仅仅指单一作品,在连续作品中保持重复性,会使用户想起来你是谁。
  5. 在作品整体有非常好的一致性时,通过放入与众不同的项,可以控制用户的注意力。
  6. 重复性设计不仅仅指带有具体单位的设计,如相同画风的插图、图标也是重复性设计的一种。
  7. 使用重复原则时,可以找一个项提取它的特征,并用这些特征做新的设计。
  8. 重复性和多样性并不冲突,如果重复元素很明确,我们可以采用多种不同的方式来重复它,比如不同大小、颜色的波点装饰,比如使用相同字体字号却颜色不同的标题。
  9. 使用多样性重复时要确保有足够多的重复性设计来保证整体的一致性,避免混乱。
  10. 当某样设计特征被重复太多次时,设计感会降低,从而降低视觉效果,混淆重点。

第五章 对比

对比的目的是增强页面的效果,使其有趣,增强可读性,同时有助于信息的组织。

对比原则:页面上不同元素之间要有对比效果,达到吸引用户的对比效果。

不过两个项不完全相同,就应当使之截然不同。

对比实践:

  1. 对比产生的方式有很多种:字体大小;字体粗细;字体本身;粗线与细线;冷色和暖色;文理;水平元素(长扁)与垂直元素(窄高);间隔很宽的文本行和紧凑的文本行;图片大小。
  2. 在运用对比时,如果两个项虽然不同,但是区别不大,产生的就是冲突而不是对比。
  3. 使用对比突出重点,强化文档目的和组织。
  4. 当使用对比突出重点时(如标题),可吸引用户目光焦点,就算用户不打算阅读也会将视线停留在页面上一会儿,从而用户可能会发现自己感兴趣的东西。
  5. 不要害怕让一些项很小,小的项可以与更大的项形成对比,还能留出空白做更多的事(装饰等),一旦用户被对比突出的重点吸引,是不会介意这些较小的文字的。
  6. 找到页面上最有意思的东西或最重要的东西加以强调,并把最重要的东西放在一起,使用户不漏掉重点。

第六章 4大基本原则复习

一般性指导意见:不要畏畏缩缩。

还有几条具体的意见,正如前面强调过的一样:

  • 不要总想填满所有空间
  • 不要把对称设计作为默认选项
  • 不要害怕太夸张的对比,只要能支持或强调你的设计和观点。

实践:

  1. 按照四大基本原则进行方案的设计和修改。
  2. 去掉边框,形成开放空间。
  3. 去掉多余的东西。
  4. 圆角会使效果看起来很软弱。

第七章 颜色运用

基于色轮的颜色选取技巧。

色轮

  1. 先画一个环作为色轮。
  2. 三原色:黄、红、蓝是三原色,我们将它们涂在色轮的12点、4点、8点钟位置。
  3. 三间色:将色轮上相邻的颜色(三原色)等量混合就得到了三间色,同时涂在色轮上三原色之间。
  4. 第三色:重复第 3 步,得到的就是第三色,同时涂在三间色之间。
  5. 我们得到了一个由 12 种颜色构成的色轮。

颜色选择

  • 互补:色轮上相对的颜色为互补色,由于它们是完全对立的,我们可以用互补色中的一个作为主色,另一个用作强调。
  • 三色组:每间隔 120 度取一个颜色,我们就可以得到一个由三个颜色组成的三色组。这种颜色组合通常会让人感到愉悦。
  • 分裂互补三色组:先选取一个颜色,再使用它的互补色两边的颜色组成一个三色组,叫做分裂互补三色组。这样的组合会有一个更为细致的颜色边界。
  • 类似色:色轮上彼此相邻的颜色的组合。

暗色和亮色

  • 色轮上的纯色就是色调
  • 向色调增加黑色就构成暗色
  • 向色调增加白色就构成亮色

我们可以灵活的将颜色选择中的颜色调整为其暗色或亮色进行使用。

暖色和冷色

  • 暖色:通常是包含了红色和黄色的颜色
  • 冷色:包含蓝色的颜色
  • 冷色趋于做背景色,暖色会很容易被注意。
  • 如果组合使用冷暖色,一定要少用暖色,避免过于强烈的显示效果,同时保持暖色的视觉焦点控制功能。

第八章 更多提示和技巧

提炼的零碎几条建议:

  • 通常表述信息更适合垂直布局(前面提到过的垂直元素,窄而高的),特别是在狭小的范围内。
  • 在连续的产品设计中,需要选择一个最突出的主导元素,以强化连续产品之间的联系。
  • 在宣传类设计中(如活动页)
    • 使用大、有趣且明显的东西,让用户的视线停在这个中心点上。
    • 在上一点的基础上使用明显的标题使读者能在快速扫描中确定消息要点,继续读下去。

第二部分 字体设计

网页上基于字体的设计经常受限于字体资源限制不容易实现。

第九章 字体的基本规则

这一章的内容是以英文排版为前提的,建议并不完全适用于中文习惯。 摘取一些字体运用的基本规则。

  • 连接符:书中建议连接符(—— 和 ————)两侧是不需要空格的,然而个人喜欢在所有的英文、字母两侧添加空格,可以尝试书中建议。
  • 大写字母:为了强调而使用全大写不是最好的办法,会增加阅读难度,将一个单词变为一个一个的字母。出于外观设计目的的使用全大写是可以接受的,如为了让logo变成长方形(全大写会使单词的上下边界变得平齐)。
  • 下划线:文字不要使用下划线,你总会有别的办法。
  • 字距调节:合适的字距可以使内容更具连贯性,特别是在大字号时。
  • 寡妇和孤儿:使用字距调节、文本删减等手段,避免某行中只有过短的孤立文字,甚至孤立的文字在下一页上。
  • 标点附属于文字样式:即如果文字是加粗的,那么其后的标点也应加粗。
  • 缩进和空行都能表示这是新的一段,不需要重复使用(腾讯和网易的选择就不一样)。
  • 把文字放进方框:不要这么做,如果一定要这么做,需要在文字周围留有足够的空间。

第十章 字体(与人生)

然而网页中可以使用的字体类型有限。

字体的设计上应该遵守前面讲到的点,如:

  1. 使用一致的字体会产生协调关系。
  2. 使用有差异而差异不大的字体设计,会产生冲突而不是对比
  3. 字体设计的点可以重复其他项的设计要素。
  4. 不要太保守

第十一章 字体类别

在网页上,由于字体较小,无衬线字体(如微软雅黑)显示效果更清晰,所以使用更广泛。

  • 大多数衬线字体的笔画之间是有粗细变化的。
  • 无衬线字体则大多数笔画粗细一致且“圆滑”。

第十二章 字体对比

  • 大小对比:可以是一个巨大的标题,也可以是一行十分小的字,总之用于强调对比时不要保守。
    • 使用全大写时往往在相同空间内字体字号更小。
  • 粗细对比:由于网页中字体粗体的等级不够(如 font-weight 900 和 700 没有区别),不能形成强烈的对比。
    • 加粗不仅仅适用于强调文章结构(标题),可以用于某些关键短句,突出文章重点,避免大篇幅文章看起来灰蒙蒙的一片。
  • 字体对比:要避免把同一个类别中的两种文字放在同一个页面上。
  • 形状对比:即全大写对比非全大写,如前文所说,全大写的英文看起来是一个四四方方的块,而大小写混合(或全小写)的字母间则有高低变化,像波浪。
  • 斜体对比:对比方式柔和。

Content