<写给大家看的设计书>阅读笔记 一 [CRAP原则]
前言
作者菌最近迷上了设计，在这里给大家带来一些自己学习过程中的心得体会，以读书笔记的方式，结合部分文章内容摘选翻译及自己的理解，整合成一个小系列发布在这里。
第一篇的内容来自于Robin Williams的<写给大家看的设计书>(The Non-Designer's Design Book)，也欢迎大家参与讨论，多多留言啦～
四大基本设计原则 (CRAP原则)
对比(Contrast)
“If two items are not exactly the same, then make them different. Really different.”
通过对比，区分页面上的元素，形成视觉差异。如果这些元素在类型、颜色、线宽、形状、空间等方面存在不同，则让它们间的差异更加明显。划重点，这里有一个规则必须注意，为了让对比设计更好地发挥其应有效果，对比必须强烈哦！
image.png
注意观察两幅图的不同之处，你更喜欢哪一幅呢？
image.png
用心感受你的双眼，当它们扫过下面这篇文档时，你能感受到它们是如何被粗体字和茶色字吸引，并诱导你阅读相应部分的吗？
image.png
如果能将用户的视线从远方拉到这一小片区域来，许多人将在惯性驱使下进行更多的阅读，这种理念可不仅仅适用于海报设计哦，在产品界面设计和布局中也有广泛的应用，个中缘由主要包括两点：
- 对比能够在页面上为用户创建视觉焦点，引起阅读兴趣 —— 如果页面能成功引起用户的阅读兴趣，就有更大概率获得点击量
- 对比能够改善页面的组织结构 —— 在产品设计中，应确保用户能立刻理解信息是如何被组织起来的，并能够轻松发现项目与项目之间的逻辑流模型
所以，对比元素永远不要用于迷惑读者，或是创建一个不应成为焦点的焦点。
重复(Repetition)
“Repeat some aspect of the design throughout the entire piece.”
视觉元素通过重复出现，形成组织并加强了整体性，可重复的内容包括颜色、形状、材质、空间关系、线宽、字体、尺寸、图形概念等等。
在我们以往的实践中，一定有这样的经历：
- 将标题设置为同样的尺寸和字重
- 为页面增加边距
- 在整个项目中使用相同风格的Bullet Point
这些都可被认为是应用了重复原则的例子，也即人为创造的统一性。
下图展示了重复原则是如何应用在文本布局中的：
- 页码位置固定于左下角
- 每页顶部使用双倍线宽
- 标题、正文各自采用统一的样式，子标题间边距相等
- 每页底部使用单倍线宽
image.png
想必大家一定都很熟悉巴普洛夫定律吧？
心理学上经常会有一个实验，是巴甫洛夫的小狗实验，每次摇铃铛的时候，就给小狗香喷喷的大肉吃，如是十几次之后，再听到铃铛响，即使没有给小狗大肉吃，实际结果证实小狗的口腔里仍会分泌唾液。
重复原则的本质，正是通过为读者在潜意识中创造“规律”为反射提供条件，这些规律一旦被人脑识别，就将自动联系到具体的内容及概念上，当我们下次遇到同样“规律”时，便有迹可循。
延伸一下，重复设计不仅限于同样的物体，也可以是相互间存在显性联系的物体。
mint-green-Riley-Blake-colorful-teapot-tea-cup-fabric-204561-3.JPG
但我们也要注意避免过度使用重复设计。
想象一下，你面前有一个穿着可爱的黑色晚礼服以及一顶别致小黑帽的美女，她可能为自己搭配了红色高跟、涂了红唇、以及别上一朵精致的红色胸花，很美对不对？然而如果她把帽子换成了红色、戴上红耳环、红围脖、红色手袋，再披上一件红色外套，是不是画面一下子就诡异起来了？在这一点上，过度重复导致的缺乏对比度反过来影响了整体观感，让遵循重复原则变得得不偿失。
对齐(Alignment)
“Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.”
这也是对齐原则在设计中的核心思想。对齐，意味着我们不应随意放置任何元素，而应确保我们作出的每一个设计、元素摆放的每一个位置，都存在与页面上的另外至少一个元素间的联系，从而营造一种干净、成熟而新鲜的观感。当物体在页面上相互对齐时，便会给人在视觉上带来一种强烈的凝聚感，尽管那些对齐的物体看上去在空间上相互分隔，在你的眼睛与脑海中，一条隐形线却悄然将它们联系在了一起。
image.png
值得注意的一点是，尽管我们经常在各种各样的场合使用对齐，设计新手却往往容易犯下一个严重的错误，即过度使用居中对齐。
image.png
这是一份典型的报告封皮，不是吗？这种标准格式往往给以人一种晦涩的，几乎是外行的观感，从而影响读者的第一印象。再看下图，是不是好了很多呢？尽管作者的名字在空间上与标题距离更远，整体的左对齐却加强了边界那条“看不见的线”的存在感，令两个文本块自然地连接到了一起。
image.png
此外，就是注意布局的整体关系，下面两图虽然都同时采用了多种布局方式，右图却显得更加整齐，因为其采用了左上角左对齐，右下角右对齐的形式，“看不见的线”再次将两块文本联系起来。
burns.jpg
邻接(Proximity)
“Group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits.”
邻接原则，即要求相似的元素应在在视觉分组上更加接近彼此，当一些物体相互邻接时，它们将形成一个充满凝聚力的视觉单元整体，而非多个毫无关联的分割碎片，从而给读者展示一种清晰的结构。
abstract-colorful-logo-design_1017-1083.jpg
观察下面两张菜单，你发现了什么？
lets-get-visual-basic-graphic-design-training-for-nonprofits-38-638.png
可以想象，作为客人，第一张菜单绝对会令你失去阅读的欲望，大段的文字堆积成了臃肿的字块，全体字母大写占据了大量空间，让人无处着眼。这种布局严重影响了不同类型的内容之间的辨识度，使信息传递出现障碍。
与之相比，在第二张菜单中，我们通过缩进创造了两个泾渭分明的空间，即"Starters"和"Entrees"，在保留菜名首字母大写的前提下，缩小介绍的字号，并以另一种字体呈现，从而营造内容上层层递进的展开效果。
在进行分组时，有一个行之有效的小技巧: 稍稍眯起你的眼睛，通过计算你眼睛停留的次数，仔细数一数页面上的视觉元素，如果其中的元素多于三到五次(取决于内容篇幅)，则看看其中哪些元素可以被归纳到更邻近的分组中去。
