今天，网格几乎是几乎所有网页设计的基础。这些隐形线条在空间中营造出节奏感和视觉流畅感，是使网页更加和谐的基础。

但是，网格的目的是帮助您创建一个好的设计，当您开始适应网格的存在时，不要受其约束。您不必受到网格的100％约束，偶尔打破网格设计可能会使您的设计更加引人注目。但是，打破网格并保持网页的协调是很有技巧的。并不是任何“打破”的设计都是好的。今天，我们来谈谈这个。

　　了解栅格系统

要打破网格，首先必须深入了解网格系统。无论您使用哪种网格，它都是您网页设计过程中的“基础设施”。它可以帮助您确定元素的放置方式，并帮助您确保在页面上堆叠不同的控件。它看起来很尴尬和不协调，有助于保持页面的整洁。

事实上，不同领域的设计师一直在使用网格。看看报纸和书籍，在网页设计师开始使用网格之前，他们已经玩过系统了。

网格可以做很多事情：

·维护内容的组织。在网格系统下，元素从左到右，从上到下清晰排列，保持布局一致。

·使设计更有效，因为规则化网格规则了各种UI元素的布局。

·使页面的不同页面看起来一致

·保持元素和元素之间的间距相同，使整个设计保持整洁

由于网格有很多优点，我们为什么要打破网格？

不难理解，网格可以创建一致且协调的外观和感觉。打破网格的元素自然变得更加明显。这无疑是一个重点。要使这个元素打破网格并与其他元素形成匹配，还有很多事情要做。

　区分图层

在不同的层上放置不同的元素可确保某些元素超出网格，而其他元素则保持一致。

由于Material Design的普及，如今许多网页已经开始使用图层来管理网页的不同元素。不同的元素在不同的层中移动，具有不同的规则，彼此重叠并区分它们，并且更有效地操作。

Cmmnty此页面允许线条和文本与图像重叠，从而在错位的排版中产生不平衡效果。您将在整个设计中看到网格的痕迹，此时的视觉不平衡非常明显。

　有目的地使用留白

为了强调一个元素，消隐始终是最有用的手段。只有在正确的位置创建一个空白才能突出它周围的元素。

我们经常认为单行或单行的布局在移动终端的布局上是合理的，但是多行和列的布局实际上是可行的。创建更全面的视觉设计非常重要。

例如，SAS代购源码网站，当设计师使用空白区域来打破传统布局时，文本在不同的块上对齐，加上居中的图标。这种设计使得打破网格的这些元素更加明显，并引起用户的注意。空白的使用为这些元素创造了“关注”的机会。

　将元素置于容器中

当某个元素以某种形式包含在某个其他容器中时，即使网格系统被破坏，它通常也会产生统一感。就像上面的网页一样，打破网格的文本被放置在彩色背景中，这就是它的作用。

放置在容器中的这个元素通常会给出相互关系的感觉，即使它不符合网格的规格。

包含在容器中也会破坏网格系统的设计，这是一种非常有趣的方法。许多容器被设计成完全对称，但元件不是，这在某些方面打破了原始的单调设计。

　调整特定的元素

打破网格的最佳方法是在细节的帮助下完成这项工作。但这并不意味着在任何地方添加细节，就像空白一样。如果该代购源码网站充满了破碎的网格细节，那么该代购源码网站将完全混乱。因此，选择特定元素进行调整更为有效。

虚线元素是一个非常好的选择。例如，将粗体和醒目的颜色附加到需要强调的元素，调整其位置或微调其位置以使其突破网格系统。

Nod之地使用长平行四边形来“打破网格”。首先，这种形状并不常见。引人注目的红色和半重叠的位置使其从整个设计中脱颖而出。

　　让它动起来

将元素从运动中移出网格系统也是一个好主意。与前一个元素一样，当单个元素移动时，效果非常明显，甚至整个网格系统也不那么明显。

当然，Trippeo的方法更为激进：它保持中间计费图形位置不变，背景的所有元素随之移动，整个网页包含视频背景，网格系统和视差滚动等技术。它绝对是奇思妙想和技术的高度融合。

　　创造打破栅格的幻觉

有时，打破网格并不需要你真正“打破”它。您可以在网格系统中创建具有有趣形状和不对称搭配的“破碎”效果。

不打破网格的优势在于您仍然可以充分利用网格系统，同时仍然可以执行不同的操作。最好的方法是设计奇数行和列，加上不完整或不充分的元素填充，以创建错误，泄漏，缺乏不对称性。

就像上面的Marche Notre Dame代购源码网站一样，虽然它看起来不对称，但内容仍处于栅格化布局中。

　结语

打破网格的设计并不容易实现，因为糟糕的控制通常会使整个设计混乱。如何在不破坏整个项目的情况下添加奇思妙想？练习更多没有错。

« 将移动互联网转变为个人代购源码网站的三种常用方法 | Axure提示：将产品配置文件链接到Axure原型并显示内容 »