网页设计中栅格的应用

2022-02-18 点击量：

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

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

●    网格是什么

●    术语

●    三分法则

●    12列栅格

●    重点突出

●    局限性

●    脑图

什么是栅格？

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

BBC

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

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

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

术语

单元列

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

水槽 

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

栏

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

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

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

区域

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

三分法则 

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

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