网格设计版式设计_Web设计中网格的全面介绍

网格设计版式设计

如果您从未涉嫌在设计中使用网格，那么本文将为您撰写。 在其中，您将学习基本的术语，理论，并通过真实的网站示例了解如何在野外使用网格。

主题

在本指南中，我们将介绍很多内容，包括：

• 网格？
• 术语
• 三分法则
• 12个单元格
• 重点
• 局限性
• 心智图

网格？

网格可以创建基本结构，也可以为您的设计提供骨架。 它们由可放置设计元素的“不可见”线条组成。 这样做可以将它们在整个“系统”中联系在一起，并合理地支持您的创作。

网格可帮助您轻松实现有效的对齐和一致性。 “随风而动”并依靠自己的直觉无法很好地扩展。 如果执行得当，您的设计将显得周到，有条理，整洁且结构合理。

像许多设计一样，良好的对齐方式几乎不会引起用户的注意。 少即是多。 太聪明了，您可能会分散用户对搜索特定内容并快速进行消化的主要目标的注意力。 那应该是您的重点-不要炫耀您的设计技巧有多精妙。 更糟的是重新发明轮子以证明观点。 缺乏对齐非常明显，并且会产生草率的印象。 这很可能导致使用您设计的用户缺乏信任-除非出于任何创造性原因，您都故意缺乏对齐。

术语

单元

单元是每个网格的基本构建块。 多个单元构成整个网格。 在BBC的以下示例中，您正在查看一个12个单位的网格。 紫色条纹各自代表一个单位。

排水沟

下图上的黄色细条纹表示将各个单元分开的装订线。 装订线是微空白的一种形式，可为网格提供一定的呼吸空间。

柱

现在，它变得更加有趣。 多个单元和装订线一起形成了列，这些列实际上是从战略上将内容放置在其中的容器。 最初似乎并非如此，但是在这样的约束下工作可以解放。 约束条件可以使决定内容放置位置变得更加容易和快捷。

在下面的示例中，您可以看到三个不同的列在起作用。 每列的大小适合于特定形式的内容或用于强调。

如您所见，您有很多选择来混合不同形式的内容和设计元素。 您还可以观察到，这些柱子共同形成一个坚固的结构，通过对齐获得了一致性和有序性。 设置几行和一些约束不是很坏的代价，不是吗？

领域

内容列构成字段，这些字段是页面的水平划分。 争取在您的页面上等高的字段并不是一个坏主意。 实际上，这并不总是容易实现的。 如果您的田地最终具有相同的高度，并且适合您的设计，那么，如果不是，请继续前进并油炸更大的鱼。

三分法则

“ 三分法则 ”使用一个迷你网格，表示当您将内容放置在将内容分成三等分的某些行上时，结果将更为人眼所见。 例如，这是摄影中经常使用的方法。 尽管这可能是一个很好的起点，并且常常使您处于正确的位置，但我建议您先加一点盐。

当人们谈论可以帮助您放置设计元素的“魔术交叉点”时，我敦促您喘口气，考虑一下可能产生的绒毛。 喝凉爽的助剂很容易，特别是因为不难遵循这一“规则”，但是从数学或生物学上看，这在任何方面都没有什么特别之处，而且绝对不是神奇的。

并且不要忘记，我们并非所有人都以相同的方式从视觉上感知世界。 我们都不同。 当我们观察世界时，我们并不是坚持某种数学精确观点的机器。 以Reddit为例。 看起来他们在乎神奇的交叉点吗？

是的，当三分法则适合或至少与图像，设计或其他东西“对齐”时，它是一个很好的准则，但也不要太当真。 只要有道理就打破规则。 做正确的事，并按照自己在设计工作中学到的准则和技巧进行操作。 设计中“没有什么是真的，一切都被允许” —引用上下文来引用尼采。 从哲学上讲，这可以说是无话可说—是正确的，但是在设计中，这代表了在没有“魔法”限制的情况下探索您的创造力的坚定准则。

发疯，打破规则，找点乐子，如果幸运的话，找到新的领域！

神的比例？

当我们处于设计的魔幻世界中时，让我对相关的内容稍加评论：人们长期以来一直认为，使用黄金比例的“神圣”比例会给人的眼睛带来特殊，神圣和令人愉悦的感觉。 已经有实验以充分的理由质疑这些“前现代”的假设。

我猜这些问题的最终裁决仍然存在，而且可能会持续很长时间，但是没有什么可以阻止我们保持开放的态度来质疑这些传承的假设。 我们确实应该超越魔术思维。 一段时间以来，我觉得“中庸之道”对我们人类来说可能是超级讨人喜欢的，因为在自然界中，我们被它很好地包围了。 但话又说回来，令人信服的证据将是很好的。 也许，也许不是，但这不是我想理所当然并要继续发展的东西。

十二单元格

回到更务实的水域。 我想讨论一个非常通用的网格，并让您开始做一些具体的事情，以使第一个好的系统能够构建您的布局。 十二个单位的网格是您的朋友。

为什么十二个单位那么方便？ 对于初学者来说，因为它们很好地分为三，四和六列，所以足够灵活，可以轻松地处理各种内容。 最重要的是，您可以使它们对称或不对称-这给您提供了很多选择，使其安全运行或创建一些超出简单对称性的动态布局。

让我们看一下利用该网格必须提供的灵活性的几种布局。

四列网格

四列网格的主要优点是它的简单性，平衡性以及非常可靠的特性。 这里的每一列跨越三个单位。 反面是它非常对称，看起来有点无聊。

通常，您需要一个主要部分来强调内容，然后需要一个侧栏来解决次要问题。 在下面的第一个示例中，您可以看到第一列用于品牌宣传，中间两列用于主要内容，而最后一列用于需要较少突出显示的内容。

三列网格

使用此网格，每列跨越四个单位。 因为它是一个不对称的网格，所以这种变化要复杂得多，您需要更加聪明地寻找设计中的平衡点。 像这样的不对称布局通常被认为更加活跃和熟练。 当然可以而且应该受到质疑！

六列网格

在此示例中，每列跨越两个单元，这使事情比三列网格更具挑战性。 它将三列网格的每一列拆分为另外两列。 六列网格为您提供更多选择和机会，以微调较小的细节。 如果您在内容丰富的网站上工作并且需要存放大量信息，则六列网格可能是进行实验的明智起点。 由于它可能是高级网格，因此我不建议您在第一次牛仔竞技比赛时就开始使用。

组合方式

您还可以在设计中合并网格，这就是十二单元网格系统非常方便的原因。 它使您可以轻松地将三，四和六列的块整齐地组合在一起。

重点

平衡而简单的布局通常比过于复杂的布局更舒适。 不利的一面是，您必须注意不要一直玩得太安全，否则可能会觉得无聊。 为了强调，您可以脱离网格或通过大小突出显示某些设计元素（例如，通过合并多列）。 这可以引起视觉兴趣，并在主要设计元素内建立更好的层次结构。

突破网格以强调重点可以通过突出显示重要部分来极大地改善您的设计，或者看起来非常愚蠢。 Wallpaper在突破四个栏目方面做得非常出色，并且非常强调他们希望您观看的视频。

但是您需要小心，过多地破坏网格的节奏会导致布局看起来破损或过分强调了太多的零件，因此不再突出。

局限性

经常出现的问题是何时在设计中使用网格？ 总是！ 选择网格始终是一个不错的决定，因为它们有助于平衡，层次结构，对齐和一致性。

然后总是有一个争论，认为网格会限制您的工作。 但是，这是一件好事 ，因为网格实际上可以方便你的创造力和引导以建设性的方式你的决定。 这样的限制可以成为您工作的良好起点。 因此，当您拥有常量（例如客户提供给您的广告的大小）时，便有一个起点来围绕它进行设计。 网格的大小可以并且应该注意这些限制。

在《华尔街日报》的以下示例中，您可以看到以绿色标记的广告尺寸导致了设计决策，即考虑到该尺寸来构建网格的一部分。

心智图

如果成功，则网格将帮助您构建网站及其各个页面的思维模型。 这也意味着页面的结构不应完全不同—适应每页承受能力的共同点应该是计划的一部分。

让我们再来看一些Etsy如何成功解决此问题的示例。 仅这次，让我们集中讨论其网格如何满足其不同的内容需求以及如何将它们逐页地混合在一起。 我认为，他们在保持某种一致性方面做出了出色的工作，这种一致性创造了统一的印象，将页面整齐地绑在一起。 因此，它们引导用户浏览内容，并且用户知道期望什么。 他们的思维导图是健全的，没有任何会在结构上破坏用户体验的惊喜。

他们为页面创造了一个很好的节奏，并且网格看起来很优雅，因为他们玩起来很简单。

最后的想法

总体而言，系统地调整内容是摆脱整个主题的关键。 将各种形式的内容捆绑在一起没有什么比一致的网格线更有效的了。 创建一个长轴，用户可以跟随该长轴进行定向并引导其眼睛和动作（如视觉锚点）。 这通常会建立更牢固的关系，将您的工作绑定在一起并产生凝聚力。 把事情简单化！ 您的设计将更易于维护和构建。

翻译自: https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521

网格设计版式设计