网页设计，如何打破网格限制并保持协调？

现在，网格已经成为所有网页设计的基础。这些不可见的线条创造出一种空间节奏感和视觉流畅感，它们是使页面更和谐的基础。
但是，网格的目的是帮助您创建一个好的设计，当您开始逐渐适应网格的存在时，不要受其约束。您不必100％限于网格，偶尔打破网格设计可能会使您的设计更加引人注目。但是，要打破网格并保持页面协调，有技能，没有任何“特殊”设计是好的。今天我们来谈谈这个。
了解电网系统



要打破网格，那么你首先要了解网格系统。无论您使用网格是什么样的风格，您的网页设计过程都会“基础设施”，它可以帮助您确定要放置的元素，以帮助您确保页面堆栈上的不同控件不显示不可控制，有助于维护页面的组织。
实际上，不同领域的设计师一直在使用电网。在网页设计师开始使用栅格之前，先看报纸和书籍，他们已经播放了这个系统完善。
栅格可以做很多事情：
·保持内容的组织。在网格系统中，元素从左到右，从上到下都清晰清晰地布置，使布局保持一致。
使设计更有效率，因为规则网格排列各种UI元素是规则的。
使不同页面的页面似乎一致
让元素和元素之间的间距相同，使整个设计保持清洁
由于电网具有如此多的优势，那么为什么要打破电网呢？
不难理解，网格创建一个一致和协调的网格元素的观点，打破自然更加“耀眼”，这无疑是一个压力。想要让这个元素打破网格，还要与其他元素形成很大的压力。



将不同的元素放在不同的层中，这样可以确保某些元素不在网格中，而其他元素保持一致。
由于材料设计的普及，许多网页现在已经开始使用图层来管理网页中的不同元素。不同层次的不同元素，具有不同的运动规则，相互重叠和差异化，操作更有效率。Cmmnty这个页面，所以线条和文字与图片产生重叠，用错误的布局来创造一种不平衡的效果。您将看到整个网格轨迹的设计，而这次视觉不平衡的一部分，这是相当显眼的。
有目的的使用空白




想强调一个元素，空白永远是更有用的手段。只有在正确的地方创建空白，才能使其周围的元素突出。
我们经常认为，在移动方面的布局中，单排或单排的布局更为合理，但排列布局实际上是可行的，创建更完整的视觉设计很重要。
如SAS这样的网站，当设计师用空白打破传统布局的时候，让文字留在不同的块，加上图标的中心。这种设计使这些元素更加引人注目，引起用户的关注。使用空白，为这些元素创造了“注意”的机会。
将元素放在容器中




当元素以其他容器中的某种形式被包含时，即使光栅系统被破坏，它也常常给出整体感。就像上面的页面一样，打破栅格文本放在背景颜色，就是这样做。
这是放在一个容器的元素，即使不遵循电网规格，但也经常给人一种相互关联的感觉。
这也包含在容器中，也破坏了网格系统的设计，这是一个相当有趣的手段。许多容器被设计为完全对称的，但元素不是，这在某种程度上打破了原来的单调设计。
调整具体要素



打破栅格的更好方法是用细节来做。但这并不意味着所有的细节都应该被添加到任何地方，空白的原因是一样的，如果网站无处不在打破网格的细节，那么网站会完全混乱。因此，选择具体元素进行调整更为有效。
虚线的元素是一个非常好的选择。例如，为了强调附加到粗体和引人注目的颜色的元素，调整其位置或微调其位置，让它破坏网格系统。
点点土地使用较长的平行四边形“打破网格”，首先形状不常见，引人注目的红色及其半层叠的位置，让它从整体上看设计脱颖而出
让它向上移动




随着行动，使网格系统的元素出来，也是一个好办法。同样，当一个元素向上移动时，效果将会非常明显，甚至可以使整体网格系统不那么明显。
当然，Trippeo的做法更加激进：它使得中间的计费图形位置不变，背景的所有元素都在移动，整个页面进入视频背景，网格系统和视差滚动等技术，大概是一个奇思妙想技术的高度整合。
创造打破网格的错觉



有时候，打破栅格不需要你真的“打破”它。您可以在具有有趣形状和不对称搭配的光栅系统中创建“破碎”效果。
不破坏网格的优点在于，您仍然在利用光栅系统，同时仍然在做不同的事情。更好的方法是使用奇数行进行设计，加上不完整或不充分的元素填充造成错误，泄漏，缺乏不对称效应。
像上面这样Marche Notre Dame这个网站，虽然看起来不对称，但内容依然是网格的布局。
结论
打破网格设计并不容易实现，因为控制往往使整个设计变得混乱。 同时如何加入异想天开不会破坏整个项目？ 实践总是错误的。