网格几乎是所有网站设计的基础。这些隐形的线可以帮助你在页面上创造节奏空间和视觉流，使得网站建设工作中的每个设计项目都带有组织感和和谐感。
不过，你不必总是在设计中一直坚持使用100%的纯网格形式，有没有想过，你甚至可以在保证设计页面不显杂乱的情况下，在适当的时机不时打破网格的界限。当你打破上面所说的这种界限，如何才能使你的网站设计仍能保持友好的用户体验，使用户乐意留在你的“地盘”中呢？
1.先了解网格系统
地址：https://windowwonderland.withgoogle.com/explore/macys/
在你确定打破网格之前，你需要明白为什么它存在。无论使用什么类型的网格系统，网格都是网页设计过程的基本组成部分。它可以帮助你确定在什么放置元素，元素如何在不同的屏幕尺寸上变化或堆叠，并且通常有助于保持你整个网页设计的组织性。
网格是一个隐形的基础，可以帮助你设计富有组织和干净的网页，以便更容易让用户通过这条隐形的线有目的性的浏览整体的内容信息。
从过去到现在，设计师几乎一直在使用着网格。你可以试着回去看看那些旧的报纸和书籍——文本排版成列使用的就是网格的原理。甚至在那些古老的旧碑上书写的旧作也包括这种和谐的结构。
网格可以做到以下几点：
· 保持内容组织性和流畅性。用户习惯于水平和垂直排列的元素，并按照从左到右（和背面），从上到下的方式阅读；
· 使设计工作更有效率，因为你只需注意元素的摆放位置以及它们之间的空间距离；
· 使得网站设计的页面看起来保持一致性；
· 在元素之间创建合适的空间，使设计整体保持整洁；
· 平衡缺乏挑战性。你所要做的几乎就只是跟随网格将元素落入到位就性了。
既然网格可以如此便捷，那么为什么你还会想到要打破它呢？
通过打破网格的界限，可以对特定元素进行额外的强调。当页面的一些规则性元素被破坏时可以增强项目所要表达的主要意义，这是特殊设计规则之一。当网格被打破时，重要的是你需要遵循其他的“规则”来完善你的设计。
2.创建图层
地址：https://cmmnty.co/
分层元素允许你通过移动来打破网格的边界，同时保持设计的统一性。因为元素接触和交叉在同一平面上，所以它们感觉仍像是同一单元的一部分。
这种技术最近变得非常受欢迎，这要归功于Material Design的影响以及越来越多的设计师在屏幕上使用元素。不过，这也可能是棘手的，因为你要保证以某种方式重叠的不同元素之间必须保持可区分，以便它们能够各自有效地工作。
Cmmnty用宽线条和文本做到这一点，它使用了排版和留白空间创建了一种偏移平衡。你几乎可以在设计中看到多个小网格，例如左侧文本元素的导航和对齐，但他们之间却没有一致的模式。这种网格的破坏是完美的平衡，同时也做到了容易让用户理解。
3.要有目的性的设计白色空间
地址：https://www.sas.org.uk/messageinabottle/
我们脱离网格路径的一个原因是，我们需要在合适的位置创建更多的白色空间以便强调。这可能是突出文本元素或品牌或一个主要的视觉图像。
经常被误认为是脱离网格的一件事是奇数对齐。虽然无缝对齐也是使用网格系统的一个组成部分（水平或垂直）元素可以在移动远离网格时对齐。
当打破网格以添加空白空间时，请考虑保持其他元素对齐。这将帮助创建一个吸引眼球的元素集群，如来自Surfers Against Sewage的文本和触发按钮，他们之间具有足够的空间，元素在感觉上也比其他元素更重要。上面的例子能产生独特的视觉焦点，因为空间有助于吸引用户让他们毫不迟疑的找到重点并点击它。
4.把元素放在容器里面
地址：http://byassociationonly.com/
当元素以某种方式包含在同一个容器中时，即使网格被破坏，它们也会感觉仍在一起。这可以通过使用彩色背景、将元素放在框中或将文本分层在照片或视频上，诸如上述示例。
关于将元素放在同一个容器中的好处在于，它为用户提供了一个提示，其中的内容以某种方式相关。也即元素链接。
通过容器样式摆脱网格结果常常看起来像玩扑克牌一样，这是一种视觉上有趣的方式来打破网格。许多容器式设计彻底打破了完美对称的设计。摆脱网格能够为网页设计添加闪光点以及打破单调。
6.考虑某些具体元素
地址：http://www.landofnod.com/
打破网格的最好方法是使用一个简单的细节来打破它的边界。如果整个网站设计缺乏网格系统，最终的结果可能是你需要收拾一堆残局。（这正是我们试图避免的。）
从背景或重点元素开始，以在一开始就能引起足够的注意。好看的修饰或有趣的形状是一个好的开始。考虑添加一些比较厚重的颜色以突出显示元素。
The Land of Nod恰到好处地用粗斜线来显示用户在整个网站所做出的不菲的销售数据。这些线有时包含在图像中，有时交叉白色空间组成图像。确保偶尔的栅格破裂是不寻常的，足以引起注意，但匹配网页设计的其余部分来看，也能感觉到他们是在说明同一个信息，他们是关联的。
7.让它保持移动的状态
地址：http://v1.trippeo.com/
使用运动和移动来使元素离开网格，即便只是移动它一点，也能让用户感觉到极大的不同。在与一些简单的动画或视频协同工作的时候，你可以使用看起来更少的网格状元素开突出重点。
这个概念非常适用于单个元素的焦点设计。
在上面的案例中，Trippeo的重点在于旅行费用他们使用图形化的方式来表现。它并不改变整个网站设计的位置。但周围的其他元素时刻在围绕着它移动，从主屏幕上的视频到有关应用程序的信息通过视差滚动来营造移动感。这个元素将页面上的其余元素平衡在同一个水平面上，使得打破网格的设计与现代的奇思妙想和天赋相结合。
8.创建一种打破网格的幻觉
地址：http://marchenotredame.com/
你可以在视觉上实现打破网格，而在实际的设计上你并没有。
使用小的垂直网格创建有趣的形状和对齐的组合，同时保持在网格上（即使它看起来不像）。
不打破网格来创建这种类型的设计的好处在于，你即保留了基于网格设计的所有好处的同时，通过一些改变又使得他们看起来并不是100%的网格。最好的表现方式通常是在网格的奇数倍上（三，五，七等）使形状按不完全相同的排列形式表现和排列，但从整体上还是是感觉相似的。
上面的案例Marche Notre Dame，使用这个概念从其位置展示图像并使其看起来做到了打破网格的限制，网格图案被垂直和水平地使用以创建具有恰当的白色空间的拼贴画效果。这是一个很好的方法，突破以往单纯罗列照片的形式，他的应用似乎无处不在。
总结
打破网格并不总是很容易做到。很多时候，它可能最终可能导致网站设计变得相当混乱。
最保险的做法是在开始以前，先应用于一个页面或一组元素，以防止设计失控。当考虑响应式和如何处理在较小屏幕上可能不适合的元素时，这也是有帮助的，因为你不会有其他更多的可能来处理。
打破网格——当你已经做得相当不错的时候，会是一个有趣和有吸引力的设计方法。
----图文来自：design shack
----由深圳网站建设公司-Clh翻译编辑整理，为您提供更多有关深圳网站建设、网站设计、网页设计及其他互联网应用服务