最近又将《写给大家看的设计书》这本书翻阅了一遍,又有了一些新的体会,感觉非常棒。真的非常佩服和感谢作者能够将关于设计的东西通过如此简明的理论给表达出来,让普通的人可以明白和感受设计的奥妙窍门。
我平时主要是作 WEB 开发方面的工作,在网上看到许多优秀的网页设计排版,感觉非常舒服。我之前一直在思考为什么我就不能设计出来这样类型的网页,只能从形式上去模仿,没有找到设计的精髓,感觉没有头绪。自从看到了《写给大家看的设计书》这本书后,我一口气把它读完了,感觉非常满足。它指点了我,让我从迷惘中走出来。
再次将书中的一些段落摘抄下来感受一下:
优秀的设计就这么容易
1 学习 4 大基本原则,它们比你想象得要简单。
2 认识到自己没有使用这些原则。形诸文字 –– 陈述问题。
3 应用基本原则。结果将使你大吃一惊。
书中提到的 4 大基本原则是对比,重复,对齐,亲密性。分别在每一章节中讲述了其中的运用方法,并有实例配套。
四大基本原则详解
一、亲密性(Proximity)
彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。
核心要点:
- 物理上的接近意味着存在关联。读者自然而然会把位置靠近的元素理解为一组。
- 不要把空白统统挤到角落里去,留白应当是有意图的,用于分隔不同的信息组。
- 扫描页面时,眼睛停留的次数应该是多少?如果页面上的项超过 3 ~ 5 个,就要看看哪些孤立的元素可以归入同一个逻辑组。
常见错误: 将每个元素都单独放置,四处分隔,让读者自己去寻找其间的关系。
自查方法: 眯起眼睛看页面,数一数视线停顿了多少次。如果超过 3 ~ 5 个停顿点,就说明有些元素应该靠得更近一些。
实际应用: 名片上,姓名、职位、联系方式分成三组紧挨放置,比把所有信息散落各处要清晰得多。网页上,导航菜单项紧挨在一起,和页面正文拉开距离,读者立刻就能区分不同的功能区。
二、对齐(Alignment)
任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在视觉联系。
核心要点:
- 居中对齐是初学者最常见的选择,但也最乏味、最缺乏设计感。尝试使用左对齐或右对齐,会产生一条“硬边界”,让页面更有力度。
- 即使元素在物理上是分离的,也可以通过对齐让它们在视觉上连成一条线。
- 找到一条明确的线,并坚持用它来对齐所有元素。不要在同一个页面上混合多种对齐方式(如部分居中对齐、部分左对齐),除非有明确的意图。
常见错误: 标题居中,正文左对齐,图片随意放置——整个页面没有统一的视觉骨架。
自查方法: 找一张纸,沿着每个元素的边缘画线。看看这些线是否指向同一个位置。如果每个元素都有自己的对齐线,就该统一了。
实际应用: 网页中,导航栏、标题、正文都沿同一个左边界对齐,会形成一条强烈的视觉引导线。即使元素之间有留白,读者也能感到它们同属一个整体。
三、重复(Repetition)
让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小、图片等等。
核心要点:
- 重复是一种将设计中独立的部分连接起来的有效方式。它能增加条理性和统一性。
- 不要把重复做得太弱——要么彻底不做,要做就足够明显。比如标题用一种独特的颜色,那么所有标题都用这种颜色。
- 重复不意味着千篇一律。可以在保持一致性的前提下,对重复元素做微小的变化。
常见错误: 每个页面都从头设计,标题样式、列表符号、边距各自不同,让人感觉是多个碎片的拼凑,而非一个整体。
自查方法: 翻阅多页文档,看看同一个视觉元素(如粗体、颜色、图标)是否反复出现。如果不是,需要有意识地引入重复。
实际应用: 网站中所有页面使用相同的导航栏样式、相同的标题字体和颜色、相同的按钮形状。读者进入任何一个子页面,都能立刻识别出这是同一个网站。PPT 中每一页的标题位置、字体、颜色完全一致,观众不会因为翻页而产生迷失感。
四、对比(Contrast)
如果两个元素不完全相同,就应当让它们截然不同。对比是页面吸引眼球的最有效方式。
核心要点:
- 对比一定要强烈。深棕色和黑色的对比,读者可能看不出差别;但黑色和白色的对比,没人会忽视。
- 对比可以通过字体(细体 vs 粗体)、颜色(冷色 vs 暖色)、大小(大 vs 小)、形状(圆 vs 方)、线宽(细线 vs 粗线)、间距(紧密 vs 疏松)等来实现。
- 不要畏首畏尾——“a little bit is not enough”。小对比看起来像失误,大对比才是有意的设计。
常见错误: 12pt 和 14pt 的字号区别,读者根本注意不到,反而显得不整齐。要么用同一字号,要么就让标题至少是正文的 2 倍大小。
自查方法: 找出页面上最重要的信息,能不能让它在 2 秒内抓住读者的目光?如果不能,就说明对比还不够强。
实际应用: 新闻标题用特大号粗体,摘要用标准号正体,这是对比。卡片设计中,选中的卡片放大并加上阴影,未选中的缩小变淡,读者瞬间就能分辨。网页中,重要按钮用醒目的颜色,次要按钮用灰色边框,主次一目了然。
四原则的关系
这四个原则不是孤立的,而是相互协同的:
- 亲密性告诉你哪些元素应该在一起;
- 对齐告诉你这些元素应该放在哪里;
- 重复告诉你它们看起来应该一致;
- 对比告诉你它们的差异应该有多明显。
颜色运用
书中关于颜色的部分同样精彩,简洁而实用。
色轮基础: 三原色(红、黄、蓝)均匀分布在色轮上,两两混合得到间色(橙、绿、紫),再混合得到第三色。理解色轮是配色决策的前提。
色彩关系:
- 互补色:色轮上完全对立的两种颜色(如红和绿)。最佳用法是一种作为主色,另一种作为强调色。
- 三色组:色轮上等距的三种颜色(如红、黄、蓝)。可以形成丰富的配色,但需要一种占主导。
- 分裂互补色:选择一种颜色,然后用它互补色两侧的两种颜色来代替互补色本身。比直接用互补色更柔和。
- 类似色:色轮上相邻的 2 ~ 3 种颜色(如蓝绿、蓝、蓝紫)。组合协调宁静,适合营造统一的氛围。
色调、暗色、亮色:
- 纯色(hue)是基础色。
- 向纯色中加入黑色得到暗色(shade)。
- 向纯色中加入白色得到亮色(tint)。
- 同一色相的不同色调、暗色、亮色搭配,基本不会出错,是稳妥的配色起点。
暖色与冷色:
- 暖色(红、橙、黄)有前进感,吸引注意力。
- 冷色(蓝、绿、紫)有后退感,适合做背景。
- 用少量暖色点缀大面积的冷色,是经典的强调手法。
CMYK vs RGB:
- CMYK(青、品红、黄、黑)是印刷色彩模式,用于纸张输出。
- RGB(红、绿、蓝)是屏幕色彩模式,用于网页和显示器。
- 在屏幕上做设计时确保使用 RGB,不要混入 CMYK 的颜色配置文件。
字体设计
字体的艺术也是书中浓墨重彩的一章。作者将字体分为六大类,理解了它们,就能做出有意识的字体选择。
六大字体类别:
- 旧式体(Oldstyle):衬线有倾斜的笔触过渡,粗细变化缓和。适合大段正文,阅读舒适。代表:Times New Roman、Garamond。
- 现代体(Modern):衬线水平,粗细过渡剧烈(极细的细线和极粗的粗线),外观时尚但大段阅读时会“晃眼”。代表:Bodoni、Didot。
- 粗衬线体(Slab Serif):衬线粗重,粗细过渡很小或没有。醒目有力,常用于标题。代表:Clarendon、Rockwell。
- 无衬线体(Sans Serif):没有衬线,笔画粗细均匀。干净现代,屏幕阅读非常舒服。代表:Helvetica、Arial、Verdana。
- 手写体(Script):模仿手写效果。切忌全大写使用,切忌大段使用——仅适合做强调或装饰。
- 装饰体(Decorative):有趣、独特。有强烈的情感和个性,但不宜多用,一处亮点足矣。代表:各种花哨的展示字体。
字体关系三原则:
- 协调(Concord):只用一种字体(或同一家族的不同变体)。安全稳妥,但可能缺乏张力。
- 冲突(Conflict):使用了两种相似的字体(如两种 Oldstyle 或两种 Sans Serif)。这是最常见的错误——看起来像是不小心选错了字体,而不是有意为之。
- 对比(Contrast):结合两种截然不同的字体(如粗犷的现代体搭配柔和的无衬线体)。这才是正确的混搭方式——差异足够大,读者能明显感知到是有意的设计选择。
实用建议:
- 大多数设计用 2 ~ 3 种字体就足够了。一种做标题,一种做正文,最多再加一种做装饰性强调。
- 避免在同一设计中使用两种同类的字体,这会产生“冲突感”而非“对比感”。
- 善用同一字体家族的不同粗细和样式(粗体、斜体、窄体)来制造变化,既安全又灵活。
设计过程的实战策略
作者在书中给出了一个可操作的流程,适用于每一次设计任务:
- 从中心点开始:确定你希望读者最先看到什么。
- 将信息分组(亲密性):把逻辑上相关的元素聚在一起,形成视觉上的信息块。
- 建立明确的对齐:选择一条强有力的对齐线,贯穿整个设计。
- 创建重复:找出可以重复使用的视觉元素——项目符号、字体、颜色、间距。
- 制造对比:在最重要的信息上,使用尽可能强烈的对比,让页面有视觉焦点。
最重要的是:不要害怕留白。留白不是浪费空间,而是给设计“呼吸”的余地。拥挤的页面让人焦躁,有留白的页面让人舒适。
最后我想知道的是,在生活中有没有和这本书中类似的看似常人不易掌握,但是经过高人点拨和总结,然后一下子豁然明朗的技能呢?