今天，網格幾乎是幾乎所有網頁設計的基礎。這些看不見的線條營造出一種節奏感和空間視覺流暢感，它們是使網頁更加和諧的基礎。

但是，網格的目的是幫助您創建一個好的設計，當您開始適應網格的存在時，不要束縛它。您不必受到網格的100％約束，偶爾打破網格設計可能會使您的設計更加引人注目。但是，打破網格并保持網頁的協調是很棘手的。并非所有“有缺陷”的設計都是好的。今天，我們來談談這個。

了解柵格系統

要打破網格，您需要深入了解網格系統。無論您使用哪種網格，它都是您網頁設計過程中的“基礎設施”。它可以幫助您確定元素的放置方式，幫助您確保在頁面上堆疊不同的控件而不顯示。不協調和不協調以幫助維護頁面的組織。

事實上，不同領域的設計師一直在使用網格。看看報紙和書籍，在網頁設計師開始使用網格之前，他們已經玩過系統了。

網格可以做很多事情：

·維護內容的組織。在網格系統下，元素從左到右，從上到下清晰排列，保持布局一致。

使設計更有效，因為規則化網格規則了各種UI元素的布局。

·使頁面的不同頁面看起來一致

·保持元素和元素之間的間距相同，保持整個設計整潔

由于電網有很多優點，我們為什么要打破電網呢？

不難理解，網格創造了一致和協調的外觀和感覺，并且打破網格元素自然變得更加“眩光”，這無疑是一個重點。要使這個元素打破網格并與其他元素形成匹配，還有很多事情要做。

區分圖層

在不同的層上放置不同的元素可確保某些元素超出網格，其他元素保持一致。

由于Material Design的普及，如今許多網頁已經開始使用圖層來管理網頁的不同元素。不同的元素在不同的層中移動，具有不同的規則，彼此重疊并區分它們，并且更有效地操作。

在Cmmnty網頁中，線條和文本與圖像重疊，產生不平衡的效果，錯位的排版。您將在整個設計中看到網格的痕跡，此時的視覺不平衡非常明顯。

有目的地使用留白

為了強調元素，消隱始終是一個有用的工具。只有在正確的位置創建一個空白才能突出它周圍的元素。

我們經常認為單行或單行的布局在移動布局上更合理，但多行和列的布局實際上是可行的。創建更全面的視覺設計非常重要。

例如，SAS是網站。當設計師使用空白區域來打破傳統布局時，文本會在不同的塊上左對齊，加上居中的圖標。這種設計使打破網格的這些元素更加引人注目并引起用戶的注意。空白的使用為這些元素提供了“關注”的機會。

　將元素置于容器中

當某個元素以某種形式包含在某個其他容器中時，即使網格系統被破壞，它通常也會產生統一感。就像上面的網頁一樣，打破網格的文本被放置在彩色背景中，這就是它的作用。

放置在容器中的這個元素通常會產生相互關系的感覺，即使它不符合網格的規格。

容納在容器中也會破壞網格系統的設計，這是一種非常有趣的方法。許多容器被設計成完全對稱，但元件不是，這在某些方面打破了原始的單調設計。

調整特定的元素

打破網格眾所周知的方法的方法是使用細節來實現這一目標。但這并不意味著在任何地方添加細節，就像空白一樣。如果網站充滿了破碎的網格細節，那么網站將完全混亂。因此，選擇特定元素進行調整更為有效。

虛線元素是一個非常好的選擇。例如，將粗體和醒目的顏色附加到需要強調的元素，調整其位置或微調其位置以使其突破網格系統。

Nod的土地網站使用長平行四邊形來“打破網格”。這種形狀首先不常見。引人注目的紅色和半重疊的位置使其從整個設計中脫穎而出。

讓它動起來

將元素從運動中移出網格系統也是一個好主意。與前一個元素一樣，當單個元素移動時，效果非常明顯，甚至整個網格系統也不那么明顯。

當然，Trippeo的網站方法更為激進：它保持中間計費圖形位置不變，并且背景的所有元素隨之移動。整個網頁包含各種技術，如視頻背景，網格系統和視差滾動。它絕對是奇思妙想和技術的高度融合。

創造打破柵格的幻覺

有時，打破網格并不需要你真正“打破”它。您可以在網格系統中創建具有有趣形狀和不對稱搭配的“破碎”效果。

不打破網格的優勢在于您仍然可以充分利用網格系統，同時仍然可以執行不同的操作。眾所周知的方法是設計奇數行和列，加上不完整或不充分的元素填充，以產生錯誤，泄漏，缺乏不對稱性。

結論

打破網格的設計并不容易實現，因為糟糕的控制通常會使整個設計混亂。如何在不破壞整個項目的情況下添加奇思妙想？練習更多總是沒有錯。