在网页设计中，如何突破网格的局限并保持协调？

今天，网格几乎是几乎所有网页设计的基础。这些看不见的线条营造出一种节奏感和空间视觉流畅感，它们是使网页更加和谐的基础。

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

了解栅格系统

要打破网格，您需要深入了解网格系统。无论您使用哪种网格，它都是您网页设计过程中的“基础设施”。它可以帮助您确定元素的放置方式，帮助您确保在页面上堆叠不同的控件而不显示。不协调和不协调以帮助维护页面的组织。

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

网格可以做很多事情：

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

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

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

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

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

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

区分图层

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

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

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

有目的地使用留白

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

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

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

　将元素置于容器中

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

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

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

调整特定的元素

打破网格众所周知的方法的方法是使用细节来实现这一目标。但这并不意味着在任何地方添加细节，就像空白一样。如果网站充满了破碎的网格细节，那么网站将完全混乱。因此，选择特定元素进行调整更为有效。

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

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

让它动起来

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

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

创造打破栅格的幻觉

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

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

结论

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