问答社区更多 >

网页设计中栅格的应用

作者：anny2020.09.16来源：Web前端之家浏览：5934评论:0

关键词：ui

如果你曾经有过关于设计中网格的运用的疑问，这篇文章就是为你量身定做的。文章中，我们不仅会介绍基础的理论和术语，还会通过真实的网站例子分析帮助你快速学习到网格在实际运用中的技巧。

主题

文章中我们会介绍以下的主题：

● 网格是什么

● 术语

● 三分法则

● 12列栅格

● 重点突出

● 局限性

● 脑图

什么是栅格？

栅格组成了一个基本结构，这个结构可以被理解成设计的“骨架”。通过辅助线条来编排和放置设计中的各个设计元素。这样做可以使设计稿有体系地联系在一起，同时也保持设计的一致性与合理性。

栅格可帮助你轻松将界面上的元素对齐，有效实现一致性。设计中，有时候，仅靠感觉和大致方向来猜测布局的效果可能不会太理想。所以正确使用网格，会让设计显得有条理，结构合理，整洁并且思考周到。

一个整洁对齐的界面很多时候都不应该引起用户的注意。少即是多， less is more。界面设计中，尝试过于革新的手段反而会分散用户对特定内容的注意力，从而影响用户的理解。因此，不要炫耀设计技巧有多么精妙，确保用户注意力和内容的简明才应该是重点。

如果说还有什么比过度炫技效果更糟糕的一点，可能是使用完全不符合常规布局的基础规则。一个没有对齐的界面很容易给用户留下草率的印象，这样的印象可能会使用户难以对你的产品专业度建立起信任 —— 当然，除非不对齐是你为了创作尝试而专门做的决定。

术语

单元列

单元列是每个栅格的基本构建块。一个栅格由多个单元列构成。下面的BBC示例就是一个由12个列栅格。一个紫色矩形框代表一个单元列。

水槽

下图上的黄色细条矩形表示将各个单元列分开的装订线。水槽是制造微小空白空间的一种形式，为栅格提供一些的呼吸空间。

栏

有了之前的铺垫，我们就可以了解一些更有趣的内容了。多个单元列和装订线一起便形成了一栏，这些栏实际上是从策略的角度将内容材料放置在其中的容器。这些栏看起来似乎很禁锢，事实上在有调理的约束下设计会产生更多自由的空间。约束条件可以帮助你决策元素放置的位置，同时还能使这个过程容易并且快捷。

在下面的示例中，你会看到三种不同的栏在布局上起作用。每个栏的大小分别受着制约，或是为了适用不同形式的内容，或是形成强调作用来裁定。

就像例子中呈现的，布局中有很多方式来混合不同形式的内容和设计元素。通过排列这些栏，界面上可以形成坚固的结构。另一方面，良好的对齐又让设计产生了一致性和有序性。这些益处单是通过设置几个单元列和一些视觉约束就能轻松实现，是否让你觉得事半功倍呢？

区域

不同的内容栏排在一起就形成了一个区域。这些区域又将整个页面水平划分。让页面上所有的区域都等高是个挺好的保持整洁的办法，虽然在现实设计中并不是这么容易实现。所以，如果等高的区域既可行又契合你的设计要求，那自然是再好不过。但是要是不能实现的话，就将目光放在宏观一些的设计要求上吧。

三分法则

“三分法则”就是通过使用一个简易栅格，来确保在界面加入元素的时候会放置在某个三等分的行上。这样的布局会更看起来更使人愉快，比如在摄影当中，三分法则就是个十分常用的方法。但是，尽管这个方式可能是一个很好的设计起点，也通常能够帮你做出正确的选择，我还是建议你在具体情况下具体分析它是否是最合适的解决办法。

人们有时候高谈阔论三分法则中的“神奇交叉点”可以如此这般提升你的设计，但我更建议理性地对待这个说法。说三分法则是一个长青不败的设计“法则”是件容易的事情，尤其这一法则也非常容易去遵循。但是事实上，无论是从数学的角度还是人类对“美”的认知来讲，三分法则都没有什么特别之处，而且也绝对不是神奇的。

另一个重要的基础便是，并非所有人都以相同的视觉方式来感知世界。我们都不同。当我们看世界时，我们不是机器，也不会全都去硬生生重复数字比例精确而带来美感，以Reddit为例。他们看起来像是会去在意“神奇交叉点“吗？

我不否认当你的图片或设计在适合三分法则的情况下，它是一个很好的准则，或者至少可以是，但是我认为无需太重视这些法则。设计中，只要有道理就可以打破规则。相信自己的直觉，以自己在设计中学到的技巧和经验作为基准，做你觉得对的事情。用尼采的话来说，就是设计中的“没有什么是真的，一切都被允许” 。哲学上，这个立场是否正确可以被一直讨论下去 — 也应如此。但是在设计中，它代表着一种坚定探索你的创造力的准则，并且在探索中，没有任何“神奇交叉点”能限制你。

自由发挥，打破规则，找点乐子，如果你很幸运的话，说不定还会找到一套全新的网页设计准则！

黄金分割（神圣比例）？

趁着我们在讨论设计中“神奇”的事物，让我对另一个相关的话题也展开一下：长期以来，人们一直认为使用黄金比例（“神圣”比例）会给人眼带来一些特殊，令人愉悦的感觉。但目前为止，也有了不少的实验以充分的理由质疑这些现代化之前的假设。

这个问题的裁决还在进行中，而且看样子可能会持续很长时间，但是它不应该使我们放弃以开放的态度来质疑这些传承下来的假设。我们应该在思维上超越这些“神圣”的东西。或许因为黄金比例在自然界重复率很高，一段时间内认定它是美的标准是合理的。可是话说回来，在没有确凿的科学依据之前，就它本身依然很难形成决定性的标准。黄金比例也许是美的标准，也许不是，但是我不希望它仅仅因此而成为一种理所当然，甚至形成设计的基础。

十二列栅格

现在回到更具体范围来，我想通过一个非常通用的网格使用方法来帮助你形成你的第一个布局构建体系。十二列栅格是个很好的助手。

为什么十二列栅格那么方便？对于初学者来说，这个栅格可以同时被作为三，四和六列栅格使用，所以它足够灵活，处理各种不同的内容材料的时候游刃有余。最重要的是，使用中你可以将它以对称的形式和不对称的形式来使用 -- 这样的可能性为设计提供了很多选择，无论你选择使用传统的，安全的布局还是超出简单对称的动态布局。

让我们看一下使用了这个栅格的高灵活度的几种布局:

四列栅格

四列网格的主要优点是它很简单，它有很强的平衡界面能力以及可靠性。这个例子里面每个栅格跨越三个列。它的缺点是过于对称的特点有时候让它看起来有些无聊。

常见的设计的需求会有一个主要部分排版需要强调的内容，然后一个侧栏来放置次要内容。在下面的第一个示例中，你可以看到第一列用于品牌宣传，中间两列用于主要内容，而最后一列用于不太需要突出显示的内容。

三列栅格

这个栅格的每栏都包含了4列，由于它是一个不对称的网格，因此涉及的方面更多一些，所以使用中，需要用更加聪明的方式在设计中找到平衡点。像这样的不对称布局通常被认为更活跃，更熟练的技术运用。当然这个说法可以而且应该受到质疑！

六列栅格

文中的例子里，这个六列栅格每栏跨越两个单元列，这使它比三列栅格更有挑战性一些。

它将三列栅格中每一列另外拆分为两列。六列栅格给设计带来更多选择和机会，让你可以更方便地微调较小的细节。如果你需要设计一个内容非常丰富并且需要存放大量信息的网页，六列栅格是个明智的起点。但由于它是个更有难度的网格，我不建议在第一个项目就开始使用它。

组合

设计中，你还可以考虑合并使用不同的栅格。组合也是十二栏栅格作为一个界面辅助系统非常方便的原因。它能轻松地将三，四和六列的栅格整齐地组合在一起。

重点

平衡而简单的布局通常比过于复杂的布局更让人舒适。对立面是，设计中需要注意不要太过安全，否则设计可能会显得无聊。为了强调某些内容，可以尝试让它脱离栅格或通过大小来实现突显（例如，通过合并列）。这样可以有效地引起用户的兴趣并在主要设计元素中形成更好的层次结构。

通过让某些特定元素脱离栅格的方式来实现重点的突出，要么会让你的设计非常出彩，但是不够高明的使用则会让设计看起来很笨拙。 Wallpaper在突破四列栅格的表现方面做得非常出色，并且也很有力地强调出了他们希望用户观看的视频。

但是过多地破坏栅格的节奏会导致布局看起来残破，不完整，或过分强调了太多零碎的内容。因此在使用这个方式的时候需要小心，以免内容不明确，用户无法记住重点信息。

局限性

关于栅格经常出现的问题之一，便是在设计中，什么时候才应该使用栅格，答案是：所有时候！选择栅格永远都是个好决定，因为它们有助于保持设计平衡，层次结构，页面整齐和一致性。

总是有一个争论，认为栅格限制了设计。栅格虽然会形成限制，但是这种限制是一件好事，因为它实际上可以促进创造力的发生，还能用有建设性的方式指导设计决策。所以，这样的限制事实上是当你开始一个项目时很好的起点。当你有了外界设计限制时（例如客户提供给你的广告的大小尺寸）时，便同时有了一个栅格来围绕它进行设计。你对栅格的选择可以也应该要考虑到这些限制。

在下面《华尔街日报》的示例中，可以看到标记绿色的广告尺寸是设计师通过栅格的协助来做的设计决定。

脑图

使用栅格很成功的情况下，它应该也会帮助你构建网站和它包含的各个页面的思维模型。这同时也意味着同一个网站的各个页面的结构不应完全不同—— 调整每个页面使其有共同点来实现一致性应作为设计计划的一部分。

让我们再来看一些Etsy成功解决此问题的示例。但是这次，我们集中讨论栅格如何满足其对不同的内容需求，以及在需要的时候如何将它们逐页地混合在一起。我认为他们在保持某种一致性方面做得非常出色。这种一致性创造了统一的印象，还将页面整齐地绑在一起。这样一来，用户在浏览的时候，全程都有指引，并且也明白对不熟悉的页面应该有什么样期望。他们的思维导图是健全的，因此不会出现任何结构上的意外来破坏用户体验。