设计,不止于美

最近拜读了《写给大家看的设计书》(精装版)~

这是一本大家都说好的书,能通过活动集赞得来,首先要感谢各位好友的给力,然后也不能浪费了。就品读了一番。

你也能懂“设计”

脱掉高大上的外衣,它就在你我身边

我是做网页相关工作的,但首先要跟没读过的读者说,这不是一本教你网页设计的书,所以,书名里的“大家”,不是对广大网页设计人员,而是对所有人。里面所提供的设计原则和技巧可以应用到生活中的很多方面。

文档,信件,名片,新闻简报,传单,宣传册,报刊,广告,简历,ppt等等,总有一款适合你。当你掌握了一些编排和设计技巧,就能使自己的作品看起来更专业,从而达到理想效果。

当我们提到“设计”这个词的时候,会有什么感觉,美观,整齐或者具有某种鲜明的风格和目的,甚至,你说不出它哪里好,就是觉得挺好。那么下面就跟着我概览一下吧。

四大基本原则

想要给人以设计感,达到更好的效果,必然要有相应的设计思想和方法论,也就是这里所说的原则,既然是设计原则,轻内容,重形式。

亲密性——让信息传达更清晰

在很多设计新手的眼中,更加热衷于对“画布”的填充,加一段话,加一幅图等等,对于页面中的留白有种本能的回避,似乎只有内容才能体现出水平。其实不然,如果页面当中充斥着太多内容,则可能造成杂乱无章。

亲密性原则,即将相关的项组织在一起,使它们的物理位置相互靠近,这样,相关项将被视为一个组,而不是毫无关联的两个东西。

当我们展示信息时,比如,一张传单,会有大标题,段落和段落标题,图片和图片信息描述,在下方可能会有地址、联系人、联系方式。诸如此类,如果它们被一窝蜂的堆积到一张纸上,如下图:

显然会很难区分和辨识,更别提让受众有深入阅读下去的兴趣,那么传单的制作就是失败的。

根据亲密性原则,我们向外界传达信息时,如果把关系相近的放在一起,不仅能使内容可读性更强,好的结构编排能帮助人理解,也能降低人眼的阅读负担,更愿意读下去。拿上例来说,把大标题单独一行放在顶部,段落和段落标题以列表形式由上到下的排列,每个段落的标题和段落紧靠,同时和其他段落保持一点距离,底部集中放置联系人的信息,则会显得结构很清晰和合理。如下:

对齐——文字也能有态度

如果你对页面中各元素的关系和相对位置不敏感,也不在意,它们就会显得没有任何规律,内容虽仍然可读,体验就大打折扣了。我们的眼睛喜欢看到有序的事物,会给人一种平静、安全的感觉,也有助于传达信息。对齐原则,即每一项都应当与页面上的某个内容存在某种视觉联系

对齐,就要有对齐的基准线,通常我们用来布局和排版的载体是矩形,所以,在方向上就有了“水平、竖直”,水平方向上,有“居左、居中、居右”,竖直方向上有“置顶、居中、置底”。

那么它们体现了什么态度呢,凌乱和整齐划一的区别大家应该都知道,首先是视觉感官,其次,以同一基准线对齐的元素,会不自觉的把它们归为同类或同组。

要怎样对齐?

“居中”是很多初学者的最爱,也是网页设计和制作者最熟悉的一种对齐方式,比较常见的是文本/图片相对于父容器居中和网页整个视区的居中。这种对齐看起来安全,感觉上也很舒服,居中对齐会创建一种更正式、更稳重的外观,显得更中规中矩,但通常也会有些乏味,所以,如果你的第一反应是居中,那么就需要改变一下自己的思维惯性,本书作者建议不要轻易尝试居中,真正适合使用居中对齐的场景还是比较少的,在生活当中应用的更多的是相对某一条“隐形”的基准线对齐。

对齐的目的,是使页面统一而且有条理,另外要控制自己的发挥欲望,避免页面上混合使用多种文本对齐。

重复——统一的艺术

设计的某些方面需要在整个作品中重复。重复的内容是什么没有严格限制,我们在日常生活中也经常看到这种重复,比如,路牌,马路中的线,一栋楼的每间房,是的,跳出平面设计,重复也是无处不在的,回到平面,我们使用的文章或者段落标题,列表图标,段落间距,这些都是重复。如下:

可以认为重复是一致性,但它不是自然的一致性,而是有意识的设计行为。你会不自觉的把看起来重复的一致的作为同一组,描述的是同一类信息。

对比——抓住眼睛,让重点脱颖而出

对比是为页面增加视觉效果的最有效途径,也是在不同元素之间建立一种有组织的层次结构最有效的方法,但要记住实现有效的对比,就必须强烈。

要不同,就截然不同

比如,如果站在你面前的是两个双胞胎,它们肯定是不一样的,但一眼看上去,你无法很快找出不同在哪里,再比如大家应该都玩过找茬游戏,两幅几乎完全相同的图,找出细微的不同点也是很难的。

上面是举了两个生活中的例子说明,用在平面设计上的话,对比不仅可以吸引眼球,还可以用来组织信息、清晰层级,指引读者并制造焦点。

怎样正确使用呢?

想知道怎样正确使用,就要知道怎样是不恰当的,比如,就网页设计来说,13px和14px的字,1px粗的线和2px粗的线,黑色和稍浅一点的黑色等等,这些对比都很不明显,非但没有达到对比的效果,而且会让人觉得你出现了失误!

比如这样:

你能看出来两幅图中重点和非重点有明显区别吗?最多是仔细看会觉得哪里不对,但这起不到对比的效果。

色彩的秘密

我们生活在一个五彩缤纷的世界,色原理论可以很深入、很复杂,当然,这里不会说得那么复杂,只会对色轮做一个简要的介绍。在实际的场景中,我们经常会问到的一个问题是,如何配色?这个时候色轮就会很有用。

色轮的基础是“黄、红、蓝”,称为三原色,因为它们是无法被创建的颜色。通过将三原色进行不断的混合、搭配,可以得到任何我们想要的颜色。如下:

在构造出了这么一个色轮之后,我们可以从下面几个方面去搭配:

  • 单色,不同色调,比如,暗、中、明

  • 类比色,相邻颜色称为类比色,可以制造一种低对比度的和谐美感

  • 补色,色轮上直线相对的两种颜色称为补色,能形成强烈对比,传达出活力、能量、兴奋等意义
  • 分裂补色,同时用补色及类比色的方法来确定颜色关系,兼具低对比度的美感和补色的力量感,既和谐又有重点

当然,还有其他种类的搭配方法,相关内容这里不做赘述,如感兴趣,大家可以查阅相关资料进一步学习。

多样的文本

这本书像其他的翻译过来的书籍一样,里面所举示例都是英文,故而,这里讨论的字体也是英文,虽然不是中文,但对英文字体的了解也是有一点帮助的,介绍了几种不同类型的字体,比如:衬线体、无衬线体、粗衬线体、手写体.如下图,你可以正确的将它们连线吗?

除了类别,字体的设计还有很多其他的表达方式,比如:引号、撇号、连接号、大写字母、下划线、字距等。字体本身可以有多种对比,大小、粗细、结构、形状、方向、颜色。作为网页方面来说,可以多了解一下text-X和font相关属性。

并肩战斗

上面介绍了诸多的原则、技巧和注意事项,它们各个身怀绝技,但如果只应用了其中的一种,仍然无法达到理想效果,要合理的将它们结合起来,才能让我们的设计看起来既美观,又清晰,主次分明。

总有特权

什么是特权?这个世界上,如果每种事物都遵循同一规则,中规中矩,就没有惊喜可言了。比如,要对齐都对齐,要一样大都一样大,横平竖直,就显得缺少创造性。特权,就是允许页面当中的少量元素脱离正常文档流,摆个特殊的pose,给整体制造一种别样的感觉。

但是,要明确的一点是,你在打破规则之前,首先是你要十分的清楚规则是什么,在规则处破规则,这样不会让人觉得你的不同很莫名其妙。

小结

关于写给大家的设计,就先讨论到这里吧,希望能对你有一点启发,能应用到实际当中给自己的作品增色,也对想要读这本书的朋友有一定的参考。以后会继续讨论关于设计的其他方面。下次见。