ycsy0905

《写给大家看的设计书》

小和:

主要内容:版式设计


阅读时长:5小时


适合读者:学生、视觉设计师、交互设计师


我的评价:学习版式设计的入门书,通俗易懂,实用性极强!


下载地址:《写给大家看的设计书》PDF


 


 
我的收获: 


1、版式设计的四大基本原则:对比、重复、对齐、亲密性 


对比:要避免页面上的元素太多相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。


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


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


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


 




2、亲密性小结 


将相关的项组织在一起;物理位置的接近就意味着存在着关联;把相关的元素分在一组,使它们建立更近的亲密性;设计技能需要逐步提高,要先从简单的表达开始。


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


根本目的:亲密性的根本目的是实现组织性。尽管其他原则也能达到这个目的,不过利用亲密性原则,只需简单地将相关的元素分在一组建立更近的亲密性,就能自动地实现条理性和组织性。如果信息很有条理,将更容易阅读,也更容易被记住。此外还有一个很好的“副产品”,利用亲密性原则,还可以使空白(这是设计者们最喜欢的)更美观(也更有条理)。


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



要避免的问题:



  • 不要仅仅因为有空白就把元素放在角落或中央。


  • 避免一个页面上有太多孤立的元素。


  • 不要在元素之间留出同样大小的空白,除非各组同属于一个子集


  • 标题、子标题、图表标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要尽量避免)。在有很近亲密性的元素之间建立关系。


  • 不同属一组的元素之间不要建立关系!如果元素彼此无关,要把他们分开




 




3、对齐小结 


找一条明确的对齐线,并坚持以它为基准;关于打破规则本身也有一条Robin规则:在打破规则之前必须清楚规则是什么。


在设计中,统一性是一个重要的概念。要让页面上的所有元素看上去统一、有联系而且彼此相关,需要在各个单独的元素之间存在某种视觉纽带。尽管这些孤立元素在页面上的物理位置可能并不靠近,但是通过适当放置,可以让他们看上去是有联系而且相关的,并且与其他信息统一。可以看看你喜欢的那些设计。一个精美的设计不论最初看上去多么杂乱无章,总能找出其中的对齐方式。


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


如何实现:要特别注意元素放在哪里。应当总能在页面上找出与之对齐的元素,尽管这两个对象的物理位置可能相距很远。


要避免的问题:要避免在页面上混合使用多种文本对齐方式(也就是说,不要将某些文本居中,而另外一些文本右对齐)。另外,要着力避免居中对齐,除非你有意识地想要创建一种比较正式、稳重(通常也更乏味)的表示。并不是完全杜绝使用居中对齐,有时可以有意地选择这种对齐方式,但是不要把它作为默认选择。


 




4、重复小结 


设计的某些方面需要在整个作品中重复。设计中视觉元素的重复可以将作品中的各部分连在一起,从而统一并增强整个作品,否则这些部分知识彼此孤立的单元。重复不仅对只有一页的作品很有用,对于多页文档的设计更显重要(对此我们通常称之为保持一致)。


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


如何实现:重复可以认为是保持一致性,而且我相信你早已经这样做过。现在,需要把现有的一致性更向前推进一步。可不可以专门做一个图片设计,并且将某些一致元素(如标题)作为这个图片设计的一部分?在每个页面底部或每个标题下面使用一条粗细为1点的线吗?或者是不是使用一条更粗的线(4点),使重复元素显得更明显,更生动?


再看看有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表?可不可以使用另外一种字体或逆序数字,然后对出版物中的每一个编号列表都重复同样的处理?最初,可以只是找出现有的重复,然后将其加强。熟悉了这种思想之后,再开始创建新的重复元素,来增强设计的效果并提高信息的清晰度。


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


要避免的问题:要避免太多地重复一个元素,重复太多会让人讨厌。要注意对比的价值。例如:如果这位女士想穿黑色礼服,配红帽子、红耳环、红口红、红色手提包、红鞋和一件红上衣,重复就太滥了,现在的对比不再有统一的效果,感觉上也让人不太舒服,太多的重复将混淆重点。


 




5、对比小结 


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


在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上放两个不完全相同的元素(比如有两种不同字体,或者有两种不同线宽),它们就不能类似。要实现有效的对比,这两个元素必须截然不同。


对比就像需要修补一处漆记时配漆一样,不能大概地配色,颜色要么配得完全相同,要么就得把整面墙都重漆一遍。我的祖父总是说,“只有在掷蹄铁和手榴弹游戏中"几乎击中"才算赢。”(在其他方面,仅仅“几乎达到”是不算数的。)


根本目的:对比的根本目的有两方面,这两个方面相辅相成,无法分开。一个目的是增强页面的效果,如果一个页面看起来很有意思,往往更有可读性。另一个目的是有助于信息的组织。读者应当能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程。对比元素不能让读者混淆,也不能错误地强调重点(即本不该是重点的元素)。


如何实现:可以通过字体选择、线宽、颜色、形状、大小、空间等等来增加对比。增加对比很容易,途径有很多,这可能是增加视觉效果最有意思也最让人满意的方法了。重要的是:对比一定要强烈。


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


 




6、复习 


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



  • 不要害怕在设计(或生活)中留有空白,这能让你的研究(以及心灵)稍作休息。


  • 不要害怕设计是不对称的,使用非居中的格式,不居中往往能使效果更强烈。尽管不建议使用居中,不过有意这么做也无不可。


  • 不要害怕把单词设置得非常大或非常小,不用担心说话声太大或者太小。在合适的场合这都是可以的。


  • 只要最后的结果能支持或强调你的设计或观点,不要害怕让图片太大或太小。



 




7、过程 


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


从中心点开始。确定希望读者最先看什么。除非你已经决定要建立一个非常协调的设计,否则就应该创建一个有强烈对比的中心点。


将信息分组。按逻辑进行分组,确定这些组之间的关系。通过组之间的靠近与否(亲密性)来显示这些关系。


在页面上组织文本和图片时,要建立并维护明确的对齐。如果能看到一个明显的边界,如照片边界或垂直线条,可以通过其他文本或对象的对齐来加强这个边界。


创建重复,或者找出可以重复的项。为建立重复,可以使用粗字体、线、装饰符合或者某种空间布局。看看哪些元素已经自然地重复,再看看是否适合加大重复力度。


除非你已经决定创建一种协调的设计,否则一定要建立强烈的对比,这样会吸引读者的视线。要记住,对比要黑色分明。如果页面上的所有一切都又大又粗,很华丽,那么根本不存在任何对比!不论通过更大更粗来建立对比,还是通过更小更细形成对比,关键是要有所不同,这样才能引人注目。


 




8、“睁开眼睛” 


提高视觉敏锐度)是成为视觉领域高手的关键。让你的眼睛充分去发现吧。


 


 


我来补充: 


1、我曾根据这本书的思想,写了关于移动端的板式设计:《写给大家看的设计书》——版式篇



评论

热度(313)

  1. MIMO和王公子小和 转载了此文字
  2. 茶茶小和 转载了此文字
  3. 伪装ぺ呐坚强小和 转载了此文字
  4. nabi-honey_shop小和 转载了此文字
  5. lli.ice小和 转载了此文字
  6. ycsy0905小和 转载了此文字
  7. 猫来猫往小和 转载了此文字
  8. ★∷无£霞☆小和 转载了此文字