好的设计究竟好在哪里
我们每天都会看到很多各种形式的作品(广告、APP界面、幻灯片……),当这些作品呈现在我们眼前的时候,通常我们比较容易就能分辨出来哪些是好的设计,哪些是不好的设计,但我们却不一定能准确说出隐藏在背后的逻辑,《写给大家看的设计书》这本书就给我们揭示了好的设计究竟好在哪里。
四大设计原则
设计的目的是为了向用户更好地表达信息,并且将信息以更好地视觉效果呈现出来,书中介绍的四大原则(亲密性、对比、对齐、重复)就是为以上目的服务的,好的设计往往也就是因为很好的满足四大原则。
Robin亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。
Robin对齐原则是指:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。
Robin重复原则指出:设计的某些方面需要在整个作品中重复。
Robin对比原则指出:页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。
信息表达层面,好的设计会通过视觉来体现信息之间的相关性、重要性和一致性,以更好地引导用户的阅读;视觉效果层面,好的设计需要整齐有序、能吸引眼球并且具备整体性。
1. 相关性是指哪些元素更加相关,哪些元素没那么相关,可以通过控制元素间的距离来管理(亲密性原则)
2. 重要性是指对用户来说哪些信息更重要,可以通过制造视觉上的对比来管理(对比原则)
3. 一致性是指哪些信息在整体上是属于同一级别/类别等,可以通过为一致的信息设计相同(相似)的视觉元素来管理(重复原则)
4. 不同的元素之间可能距离远近不同,可以通过为不同的元素制造某种对齐来实现即便如此它们也是整齐有序的(对齐原则)
5. 通过制造视觉上的强烈对比可以迅速抓住用户的眼球(对比原则)
6. 在多页面的作品中,通过重复视觉元素来告诉用户他们是一体的(重复原则)
四大原则实践
作者在书中为我们介绍了很多易于掌握的使用技巧,即使没有任何设计功底也不妨碍我们实践它们。
亲密性
同一个页面上通常会摆放很多元素,亲密性原则倡导通过物理距离来管理同一个页面上不同元素之间的关联性,相关性高的元素应该紧挨在一起,相关性低的元素之间应该保持一定的距离。
亲密性原则解决的问题是如何将我们需要呈现的信息更有条理(突出相关性)的展现在用户面前。
亲密性原则实现方法
如果多个项相互之间有很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。
微微眯起眼睛,统计眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过3~5个(当然,这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。
亲密性原则要避免的问题
避免一个页面上有太多孤立的元素。
不要在元素之间留出同样大小的空白,除非各组同属于一个子集。
标题、子标题、图表标题、图片能否归入其相关材料?在这个问题上一定要非常清楚(哪怕只有一点含糊都要尽量避免)。
在有很近亲密性的元素之间建立关系。不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。不要仅仅因为有空白就把元素放在角落或中央。
对齐
页面上的不同元素之间会因为关联性不同而会有不同的物理距离,对齐原则倡导的是将这些不同元素建立视觉上的某种联系,而不是被随意的摆放,建立这种联系的方式就是为元素寻找某种对齐。
对齐性原则解决的问题是如何将要呈现的信息有秩序的展现在用户面前。
对齐原则实现方法
1. 不建议初学者轻易使用居中对齐
如果文本为左对齐或右对齐,让文本联系在一起的那条看不见的线会更明确,因为现在有一条“硬”的竖边。这就使左对齐和右对齐的文本看起来外观更清晰、效果更分明。
居中对齐会创建一种更正式、更稳重的外观,这种外观显得更为中规中矩,但通常也很乏味。请注意你喜欢的那些设计。我敢保证,大多数看来精巧的设计都没有采用居中对齐。我知道,作为一个初学者,要完全摒弃居中对齐会很难,但你必须从一开始就强制自己避开它。
在得到更多培训之前,一定要坚持一个原则:只使用一种对齐方式。页面上只使用一种文本对齐,所有文本都左对齐,或右对齐,或者全部居中。
明显而有意为之的居中对齐效果最好。当对齐经过精心策划而又明确时,你就可以对其他元素充分发挥创造力,作品看起来仍然显得匠心独具,而这些元素也不会像是莫名其妙地散落在页面上一样。
2. 尽量只使用一种对齐方式
在得到更多培训之前,一定要坚持一个原则:只使用一种对齐方式。页面上只使用一种文本对齐,所有文本都左对齐,或右对齐,或者全部居中。
如果不同文本块使用了不同的对齐方式,一定要确保这些文本块之间以某种方式对齐。
3. 页面上每一个项都应该与其他项存在某种对齐
在页面上放其他项时,一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放,则按其基线对齐。如果有多个单独的文本块,则对齐其左边界或右边界。如果有图片元素,将其边界与页面的其他边界对齐。
4. 标题和正文对齐的雷区
绝对不要在左对齐的正文或缩进的文本上方将标题居中。如果文本没有明确的左边界和右边界,就无法区分标题是否确实居中,看起来它只是悬挂着而已。
应当找一条明确的对齐线,并用它来对齐。如果有一张照片或图片(有明确的直边),可以沿着照片的这个直边与文本的平边对齐,如下图所示。
重复
重复原则倡导通过通过视觉元素的重复来更好的组织信息(通常针对单页作品)和增强作品的整体性(主要是对多页作品)。
重复的实现方法
1. 从标题和子标题入手
要创建重复元素,可以从标题和子标题入手,这是一个很好的起点,因为这些元素很可能在某个方面是一致的。
2. 其他
可以专门做一个图片设计,并且将某些一致元素(如标题)作为这个图片设计的一部分。
重复性元素并不必须是图形或者剪贴画。可以是空白、线、字体、对齐,或者任何你有意重复的东西。
看看有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表?可不可以使用另外一种字体或逆序数字,然后对出版物中的每一个编号列表都重复同样的处理?最初,可以只是找出现有的重复,然后将其加强。熟悉了这种思想之后,再开始创建新的重复元素,来增强设计的效果并提高信息的清晰度。
要避免太多地重复一个元素,重复太多会让人讨厌。
对比
页面上的不同元素会存在关联性和差异性,对比原则倡导通过视觉元素的对比来表现这种差异性
对比原则要解决的问题是如何更好的吸引用户的眼球以及如何更好的为用户展现不同信息的重要程度。
对齐原则的实现方法
1. 大胆对比
如果两个元素虽然不同,但是区别不大,这时候就不是对比了,而是冲突。不应该用12磅大小的字体与14磅大小的字体进行对比。
不要害怕让一些项很小,这样不仅可以与更大的项形成对比,还能留出更多的空白!一旦读者把握住重点,只要他们感兴趣,自然会去读这些较小的文字。如果他们不感兴趣,不论你把这些文字设置得多大他们也不会去读。
2. 常用的对比方式
要增加有意思的对比,最容易的方法就是实现字体对比(这也是本书第二部分的重点)。不过不要忘记,还可以利用线、颜色、元素之间的间隔、材质等形成对比。
小结
作者总结了好设计遵循的四大基本原则,它们可以帮助我们更好地提升自己的设计水平,比如制作简历、PPT,甚至是写一篇文章(本文贴的图基本都没做好对齐……);它们也可以帮我们更客观的去评价我们见到的作品,而不只是简单的说出自己的主管感受。
另外,作者在介绍理论的同时给出了很多具体的例子帮助读者更好地理解四大原则,非常值得一读。
颜色和字体
颜色和字体是设计作品中最常使用的元素之一,作者同样深入浅出的介绍了如何为作品选择合适的颜色组合和字体组合,颜色和字体的读书笔记: