Another RayJune

写给大家看的设计书小记

爱美之心人皆有之,而识美之心更需要人皆有之。
《写给大家看的设计书》名副其实,推荐给每一个人看。
以下为看这本书所做的记录。

四大基本原则

对比(Contrast)

简介

对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们”截然不同

要让页面引人注目,对比通常是最重要的一个因素,正是它能让读者首先看到这个页面。

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

根本目的

对比的根本目的有两方面,这两个方面相辅相成,无法分开。

  • 一个目的是增强页面的效果,如果一个页面看起来很有意思,往往更具有可读性
  • 另一个目的是有助于信息的组织

我们应当能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程。对比元素不能让读者混淆,也不能错误地强调重点(即本不该是重点的元素)。

要避免的问题

不要犹豫。如果你想形成对比,就加大力度。不要将一种粗线与另一种更粗得线进行对比。不要将棕色文本与黑色标题建立对比。要避免使用两种或多种类似的字体。如果各项不完全一样,干脆让它们截然不同。

重复(Repetition)

简介

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,即能增加条理性,还可以加强统一性。

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

重复就像是强调你的衣着。如果一位女士穿着一件可爱的黑色晚礼服,带着一顶别致的帽子,她可能会用红色高跟鞋、红色口红和一朵红色小花来突出她的晚礼服。

根本目的

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

重复相当于把现有的一致性更向前腿进一步

要避免的问题

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

例如,如果这位女士想穿黑色晚礼服,配红帽子、红耳环、红口红、红色手提包、红鞋和一件红上衣,重复就太滥了,现在的对比不再有同统一的效果,感觉上也让人不太舒服,太多的重复将混淆重点。

对齐(Alignment)

简介

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

具体

对齐原则要求特别小心,再也不能像以前那样,只要页面上刚好有空间就把元素随意”扔”到那里。

如果页面上的一些项是对齐的,这会得到一个更内聚的单元。即使对齐的元素无力位置是彼此分离的,但在你眼里(以及在你的心里),它们之间也会有一条看不见的线把它们连在一起。尽管你可能通过分开放置某些元素来指示它们的关系(使用亲密性原则),但对其原则很””神奇
,它会告诉读者,即使这些项并不靠近,但它们属于同一组。

在得到更多培训之前,一定要坚持一个原则:页面上只使用一种文本对齐:所有文本都左对齐,或右对齐,或者全部居中。

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

根本目的

对齐的根本目的是使页面统一而且有条理。其效果类似于把客厅里四处零落的玩具捡起来,并把它们放在一个玩具箱中。
不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐(当然,要结合适当的字体)来达到目的。

要避免的问题

要避免在页面上混合使用多种文本对齐方式(也就是说,不要将某些文本居中,而另外一些文本右对齐)。

另外,要着力避免居中对齐,除非你有意识地想要创建一种比较正式、稳重(通常也更乏味)的表示。并不是完全杜绝使用居中对齐,有时可以有意地选择这种对齐方式,但是不要把它作为默认选择。

亲密性(Proimity)

简介

彼此相关的项应当靠近,归组在一起。如果多个项之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

根本目的

亲密性的根本目的是实现组织性

尽管其他原则也能达到这个目的,不过利用亲密性原理只需要简单地将相关的元素分在一组建立更近的亲密性,就能自动地实现条理性和组织性。

信息很有条理,将更容易阅读,也更容易被记住。此外还有一个很好的”副产品”,利用亲密性原则,还可以使空白(这是设计者们最喜欢的)更美观(也更有条理)。

要避免的问题

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

不要畏畏缩缩

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

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

更多提示与技巧

本书反复提到的4大基本原则(对比、重复、对齐和亲密性)也同样适用于Web设计。

不过,这其中重复对于网站的设计是最重要的因素之一。其他三个原则可以使页面看起来很不错、更合理,但重复更有意义,这会让访问者知道自己是否还在同一个网站中。要有一致的导航系统和图片风格,使访问者总能知道他们仍在同一个网站中。

网站应该让游客感觉友好而且轻松。在这方面Google是一个绝好的例子,不仅及其有用,而且简单明了。

字体

协调

如果选择只使用一种字体,页面上的所有元素都采用同样性质的字体,这种设计就是协调的。
大多数协调的设计往往都相当平静和正式。

冲突

如果在同一个界面上设置了连个或多个类似的字体,它们并非完全不同,但也不完全相同,这个设计就是冲突的。

如果把两种看上去非常相似但又不完全一样的字体放在一起,大多数情况下都会出现这样的问题。
问题就处在相似性上,因为相似性是互相冲突的。

协调是一个稳妥有用的概念,但冲突务必要避免

对比

这个世界上私有特性都依赖于比较才能呈现。如果没有比较,则根本没有存在的前提。

创建协调相当容易,制造冲突也很容易,不过不受欢迎。产生对比则非常有趣。

从上一部分对设计的介绍我们可以了解到,强烈的对比能吸引我们的视线。要在设计中增加对比,最有效、最简单而最让人满意的方法之一就是利用字体

颜色

要记住暖色(红色、橙色)是前进型的,几引起我们的主意。我们的眼镜很受暖色的吸引,所以只需要很少的一点红色就可以产生对比。

另一方面,冷色(蓝色、绿色)则是远离型的,总是在我们的视线中后退。即使更大的区域内都是冷色你也未必能注意到;实际上,**需要更多的冷色才能产生有效的对比。

如何开始

做一个设计或者重新设计时,先从哪里开始?

  • 从中心点开始。确定希望读者最先看什么。除非你已经决定要建立一个非常协调的设计,否则就应该创建一个有强烈对比的中心点。
  • 将信息分组。按逻辑进行分组,确定这些组之间的关系。通过组之间的靠近与否(亲密性)来显示这些关系。
    在页面上组织文本和图片时,要建立并维护明确的对齐。如果能看到一个明显的边界,如照片边界或者垂直线条,可以通过其他文本或对象的对齐来加强这个边界。
  • 创建重复,或者找出可以重复的项。为建立重复,可以使用粗字体、线、装饰符号或者某种空间布局。看看哪些元素已经自然地重复,再看看是否适合加大重复力度。
  • 强烈的对比,除非你已经决定创建一种协调的设计,否则一定要建立强烈的对比,这样会吸引读者的视线。要记住,对比要黑白分明。如果页面上的所有一切都又大又粗,很华丽,那么根本就不存在任何对比。无论是通过更大更粗来建立对比,还是通过更小梗系形成对比,关键是要有所不同,这样才能引人注目。

文章标题:写给大家看的设计书小记

文章作者:RayJune

时间地点:又玄图书馆

原始链接:http://www.rayjune.xyz/2017/03/09/everybody's-design-book-note/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。