18665606093
如今，網格幾乎是所有網頁設計的基礎。這些看不見的線條營造出空間上的節奏感和視覺上的流暢感，是讓網頁更加和諧的基礎。
然而，網格的目的是幫助你創建一個好的設計。當你開始適應網格的存在，不要被它束縛。你不必100%受限于網格。偶爾打破格子設計可能會讓你的設計更引人注目。不過破格保持網頁協調是有技巧的。不是任何“變態”的設計都是好的。今天，我們來談談這個。
理解網格系統
要想打破網格，首先要對網格系統有深入的了解。無論你使用什么樣的網格，它都是你網頁設計過程中的“基礎設施”。它幫助您確定如何放置元素，確保不同的控件堆疊在頁面上，而不會顯得突兀和不協調，并有助于保持頁面的組織。
事實上，不同領域的設計師一直在使用網格?？磮蠹埡蜁?。在網頁設計師開始使用網格之前，他們已經把這個系統玩得很完美了。
網格可以做很多事情：
保持內容有條理。網格體系下，元素從左到右、從上到下排列清晰，布局一致。讓設計更有效率，因為規則的網格讓各種UI元素的排列更有規律。讓網頁的不同頁面看起來一致，讓元素之間的間距相同，讓整個設計保持整潔
既然網格有那么多優勢，為什么還要破網格？
不難理解，網格營造出一致協調的觀感，打破網格的元素自然變得更加耀眼，這無疑是一個重點。有很多注意事項要讓這個元素打破格子，與其他元素形成匹配。
區分層
將不同的元素放在不同的層上，可以保證一些元素在網格之外，而另一些元素是一致的。
由于材料設計的流行，許多網頁已經開始使用圖層來管理網頁中的不同元素。不同的元素在不同的層中以不同的規則運動，相互重疊和區分，運行效率更高。
Cmmnty讓線條和文字與圖片重疊，借助錯位排版營造出不平衡的效果。你會在整個設計中看到網格的痕跡，此時的視覺不平衡相當顯眼。
有目的地使用空白
強調一個元素，留白永遠是最有用的手段。只有在合適的地方創造出留白，它所圍繞的元素才能脫穎而出。
我們經常認為單排或單排布局在移動布局上是合理的，但多排布局也是可行的，重要的是營造一個更整體的視覺設計。例如，在SAS中，當設計人員使用空格來打破傳統布局時，文本會在不同的塊之間左對齊，并添加中間的圖標。這種設計讓這些破格元素更加顯眼，吸引用戶的注意力。留白的使用為這些元素創造了被注意的機會。
將元素放入容器中
當元素以某種形式包含在其他容器中時，即使網格系統被破壞，也往往給人一種整體感。就像上面的網頁一樣，打破網格的文本被放在一個彩色的背景中，這就是它的作用。
這種放置在容器中的元素，即使不遵循網格標準，也往往給人一種關聯的感覺。
被包含在一個容器中也打破了網格系統的設計，這是一個有趣的手段。很多容器設計成完全對稱，但元素卻不是，從某種意義上打破了原本單調的設計。
調整特定元素
打破格子的最好辦法就是用細節來達到這個目的。但這并不意味著處處添加細節，這和留白是一樣的。如果網站充斥著突破格子的細節，網站就會徹底陷入混亂。因此，選擇特定的元素進行調整更有效。
裝飾元素是非常好的選擇。例如，為需要強調的元素添加醒目的顏色，調整其位置，或微調其位置，使其突破網格系統。
Nod之地使用一個長平行四邊形來“打破網格”。首先，這個形狀不尋常。醒目的紅色和半重疊的位置使其在整個設計中脫穎而出。
讓它動起來
借助動態效果將元素從網格系統中分離出來也是一種很好的方法。和前一個一樣，單個元素移動時，效果會非常明顯，甚至會讓整個網格系統顯得不那么明顯。
當然，Trippeo網站采用的方法更激進：保持中間計費的圖形位置不變，而背景的所有元素都隨之移動。整個網頁融合了視頻背景、網格系統、視差滾動等各種技術，絕對是奇思妙想和技術的高度融合。
制造打破格子的假象
有時候，打破格子并不要求你真的“打破”它。借助網格系統中有趣的形狀和不對稱的搭配，可以創造出“破碎”的效果。
不破網的好處是你仍然可以充分利用網格系統的優勢，同時做一些與眾不同的事情。最好的方法是借助奇數行和奇數列進行設計，添加不完整或不足的元素，造成錯誤、遺漏、間隙和不對稱。就像上面的網站Marche Notre Dame，雖然看起來不對稱，但內容還是遵循網格布局。
標簽
破格設計不易實現，因為控制不好往往會讓整個設計陷入混亂。如何在不破壞整個項目的情況下加入異想天開？多練沒有錯。
添加企業微信
18665606093
