Table of contents
一本学习视觉设计基础知识的完整指南。
一百万美元的问题：好的设计的秘密是什么？
我们可以对这个问题进行哲学思考，但一般来说，好的设计的众所周知的 "秘密 "在于你组织你的视觉元素的方式，与你的画布的关系，以及相互之间的关系。 基本上，我们刚刚描述了布局设计。 当你想到它时，它是你所看到的一切。
以杂志的版面设计为例，他们的设计遵循经典的网格系统（我们马上要学习关于网格的所有知识）。 所有的东西通常都是左右对齐，底部对齐。 特别是列有明显的正方形对齐，使页面不仅在视觉上吸引人，而且容易阅读，具有权威性。 大标题吸引观众的目光注意力，而副标题则是作为大小的对比来创造信息的视觉层次。
Linda Gaom, Behance
所有这些品质使页面设计简洁、有条理、易阅读，它们与我们接下来要谈的提示相一致。 但首先，让我们更多地了解版面设计本身。
什么是版式设计？
版面设计涉及图形元素的安排，以吸引读者的注意力，并以视觉上吸引人的方式传达特定的信息。因此，我们在这里谈论的不是标志设计，而是印刷材料的设计，如报纸、杂志、海报，以及它们的数字对应物，还有网页、应用程序或UX/UI设计。
布局 "这个词给了我们很多提示。 它意味着页面上预先确定的元素的安排。
当一个版面设计是有效的，它看起来很好，而且它能引导浏览者理解设计所要传达的信息。 因此，理解版面设计是创造有吸引力的、有效的、用户友好的、令人愉悦的构图的关键。
如果一个版面不能很好地向观众传达它的信息，或者换句话说，它不能 "很好地阅读"，那么无论它看起来多么新潮，这个设计都是无效的。 在版面设计的领域里，内容取代了潮流和噱头。
布局设计的目的
快速传达信息
这是关键。 布局设计建立了图形资产之间的关系，以实现眼睛运动的流畅，从而达到最大的效果和影响。
为了创造平衡
使用版式设计的原则是在你的设计项目中创造平衡感和对称性的最直接的方法，而不会变得乏味。
创造凝聚力
版面设计可以帮助你把设计中的许多元素安排在一个容易消化的、有凝聚力的、有逻辑的方式中。
See_also: 如何制作你自己的个人标志创造美丽
平衡和结构自然会产生美感。 如果你的版面设计做得正确，它就会自动在视觉上吸引观众。 观众为了理解一个信息而需要付出的努力越少，你的设计就越有吸引力。
弗兰克-菲利宾为他的书《我曾经是个设计学生：那时-现在》所做的设计。 来源：DesignBoom
布局设计的要素
文本
这不仅包括文本主体或段落，还包括标题、副标题、页眉和页脚。 你对排版、颜色和尺寸的选择将对你的布局如何转化为你的受众达到不同的效果。
图片
最常见的图片类型是照片、插图或信息图。
形状
形状可以是几何的，非常有棱角，也可以是有机的，模仿自然界。 它们也可以是抽象的。 在过去的一年里，抽象形状非常流行，因为我们看到网页设计师将它们纳入复杂和蔓延的构成中。
形状可以取代图像，也可以用来在页面上添加图形元素，突出文字，或在其他视觉元素之间划出空间。
白色空间
任何版面设计都会有一定量的留白，这将使你的元素能够呼吸并独立出来。
版面设计的黄金原则
你会注意到，版面设计的原则遵循了很多设计的基本原则。 比如以某种方式使用颜色、排版、重复、对比、层次和平衡。
原则一：使用网格
网格帮助设计师将各种设计元素，如文本和图像，以一种看起来连贯和容易理解的方式定位。
它们提供了一种秩序感，它们使各种元素不至于相互喧宾夺主，最重要的是，网格也会纠正你的排列。 使你的工作感觉更干净、更专业。
来源：hgmlegal.com
网格的剖析
你可能认为它只是垂直线和水平线，但网格是由几个部分组成的。 事实上，有很多。 下面是你需要知道的基本网格中最重要的术语：
- 格式 因此，如果你为印刷品设计东西，格式就是页面，而如果你是一个网页设计师，格式就是网页或浏览器窗口。
- 边缘地带 是格式和设计之间有意的空隙。
- 流水线 流水线有助于提高设计的可读性，引导读者正确地跟随内容。
- 模块 是由任何网格的水平线和垂直流线形成的块状物。 如果你仔细想想，它们是任何网格的构建块。 你所有的垂直模块创造了你的列，而你所有的水平网格创造了你的行。
- 地区 对于你决定如何组织这些模块，没有任何规则。
来源：Radversity
网格的类型
布局网格最早是用来安排纸上的手写文字。
它们最早可以追溯到13世纪，当时法国艺术家Villard De将网格系统与黄金分割率合并在一起，制作出带有页边的印刷品版面。 直到今天，你还可以看到这种网格系统，大多数印刷书籍和杂志的版面都证明了这一点。 出版商、编辑和设计师喜欢使用标准网格，不仅因为它们看起来不错，而且因为读者已经习惯了希望某些设计元素能在一个特定的地方。
网格可以以两种方式设计：对称或不对称。 对称的网格 遵循一条中心线，其中垂直和水平区域彼此相等；并且列具有相同的宽度。
在一个 不对称的网格 顾名思义，边距和列数并不都是相同的。
基于这种分类，世界范围内使用的布局网格有五种主要类型，你可以信赖：
稿件格子 它们将页眉、页脚和页边分隔开来，并基本上在格式（或页面）内创建一个矩形，为你的文本提供边界。 它们是杂志、报纸和书籍的基础。 因此，这可能是你最熟悉的布局。
来源: UXplanet
See_also: 治愈你的检疫性无聊的创意技巧
来源：Radversity
柱状网格 是杂志出版业的另一个宠儿。 典型的杂志版面使用柱状网格，将文本分隔成易于阅读的部分。 但它们在网站上也非常流行。 你可以使用从两个到六个网格，更多是可能的，但并不常见。 柱状网格的一个非常重要的事情是，柱子之间的间距，或者说沟槽，是等距离的。其他。
例如，报纸使用的是对称的列式网格，而网页设计则倾向于使用非对称的列式网格。
来源：用户体验星球
来源：Radversity
模块化的网格 这种类型的网格是在你需要组织布局中的各种元素，而柱状网格根本不够用的时候需要的。
模块化网格有同等大小的模块，这使得以不同方式可视化你的空间区域变得非常容易。
来源：用户体验星球
来源：Radversity
基线网格 基线是你打字时文字所在的线，而领先是两条基线之间的间距。 想知道你的标题或副标题应该多大？
基线网格在这里可以帮助给你的文本带来流动的节奏。
来源：用户体验星球
资料来源：Fragaria
分层网格 与所有的同类产品相比，分层网格看起来不太像网格。 尽管如此，它们在按照重要性顺序组织设计元素时非常有用。 分层网格可以基于模块化网格，或者你甚至可以创建自己的网格。 网站经常使用这种网格，特别是数字杂志和报纸在过渡到变成柱状网格时往往更依赖分层网格而不是柱状网格。数字。
来源：UX Plane
原则二：使用负空间
我们常常认为空虚、沉默或缺乏色彩是一件坏事。 但我们没有考虑到它们是如何成为对比的坚实基础。
负空间也被称为留白，它是你的设计中没有任何实际元素的区域。 它是留空的区域。 它不只是围绕着你的资产，它还在它们之间建立了必要的联系。 正因为如此，负空间是一个正确的设计元素，对你的版面设计的有效性有巨大的影响。
好的与坏的负空间
负空间将有助于分隔你的设计中的各个区域，同时也使你的布局能够呼吸。 它有助于视觉层次和视觉平衡；它使用户的注意力集中在核心元素上；它减少了分心的程度；最后，它为你的设计增加了风格和优雅。
没有经验的设计师可能会倾向于尽可能多地填满他们的画布，通过缩放文字或放大标志或图像。 但给你的元素留出空间，可以让观众更快、更舒适地找到某些信息线索。
如果所有的东西都喊着要吸引你的观众的注意力，那就什么都听不到了。- 亚伦-沃尔特，"情感设计"。
确定负空间的一个简单方法是使用模块网格。 通过把它放在你的设计上面，你就可以很容易地想象出哪些模块可以保持空白，哪些应该被填上。
设计师：Brunswicker，来源：Codesignmag.com
原则3.选择一个单一的关注点
客户是否曾经要求你把标志做得更大？ 然后把标题做得更大？
你不能什么都强调，这有悖于好设计的初衷。 就像时间一样，焦点是相对的。 为了让一个元素脱颖而出，另一个元素必须作为背景。 一些元素需要主导其他元素，以便你的设计能够显示出视觉层次感。
设计中的焦点是具有最大视觉重量的一个元素。 它是首先吸引眼球的元素，比你的布局中的任何其他东西都更吸引人。一个焦点将向你的观众宣布他们在你的设计上的观看旅程从哪里开始。 所以它是你所讲故事的开始。
这通常可以通过使用一个大的图像或一个大的字体来源来实现。 注意下面的焦点是多么有效
设计者：Braulio Amado 为《彭博商业周刊》设计，来源：这很好。
但是，虽然一个焦点会把你的观众的注意力吸引过来，但下一个规则将有助于引导它。
原则四：考虑到接近和流动
接近的原则很简单。 确保将相互关联的元素放在一起。
靠近表示视觉资产被连接起来，成为一个视觉单元，帮助组织你的布局。因此，只有那些相互之间有关系的设计资产才会聚集在一起，并利用你的设计上的信息袋来引导你的受众到他们需要消费的相关内容。 这也被称为流动原则。
来源：Satori Graphics
一个具有良好流程的设计将引导观众的视线贯穿整个版面，从一个元素到另一个元素，轻松自如。 你的焦点将拉动视线并成为休息的地方，而其他元素则传递出方向。
了解这一点的一个简单方法是以我们的网站为例。 图形与文本明确分开，行动呼吁也是如此，因此浏览者的注意力从一个信息群导航到下一个。
原则五：使用对比度
确保你的设计有足够的对比。
对比有助于组织你的设计，并将建立一个亟需的层次结构，把重点放在重要的地方。不仅如此，良好的对比还能增加整个设计的视觉趣味。 让我们面对现实吧，一个所有东西都是相同大小、形状或颜色的布局会显得很无聊。 对比会使事情变得更有趣。
你首先想到的可能是颜色的对比，比如暖色对冷色，深色对浅色，蓝色对橙色。 但是，虽然颜色是对比的一个极其重要的原则，但也有字体、排列和大小的对比。 记住，对比也是相对的。 它只有在与其他元素并列时才有意义。
这里有一些以聪明和美丽的方式使用这一规则的布局例子。 注意到排版、色彩的对比，甚至元素之间的大小对比。
资料来源：IAG和解行动计划
原则六：重复、模式、节奏
当我们想到重复的时候，我们会想到相同的元素反复出现。
但在设计中则不同，它绝对没有那么无聊。 如果使用得当，重复实际上可以增强你的设计。
试着在整个布局中确定并重复使用一个主题，这样不同的区域就会感觉到有联系，是同一构图的一部分。 这将有助于你的设计有一个主题。 通过重复元素，你不仅可以按照受众的期望来交付，而且还可以改善用户体验。 一致性使用户感觉更舒服。
你可以通过重复形状或符号来做到这一点。 甚至是一个配色方案，一个字体，以及一般的相同风格。
要养成的一个好习惯是使用一个大系列的字体。 限制不同数量的图案、线条重量/风格和颜色，并在整个过程中重复。 此外，尽量保持图像和图形的风格相同。 例如，使用同一艺术家的插图。
来源：Thepentool.co
就是这样，这六条原则将帮助你组织你的设计，实现一个更干净、更专业、更平衡的布局。
但你的旅程并没有到此为止。 平面设计不是一门精确的科学，它不应该局限于技巧和原则。 正如在创作的所有领域一样，没有硬性的经验法则。 以微妙的方式突破这些技巧将为你的设计增加深度和多样性。
尽管如此，它们是一个很好的起点，我们鼓励你试一试。 并让我们知道它们的效果如何！
下载Vectornator以开始使用
把你的设计提高到新的水平。
下载文件
