如今，網(wǎng)格幾乎是所有網(wǎng)頁設(shè)計(jì)的基礎(chǔ)。這些看不見的線條營造出空間上的節(jié)奏感和視覺上的流暢感，是讓網(wǎng)頁更加和諧的基礎(chǔ)。

　　然而，網(wǎng)格的目的是幫助你創(chuàng)建一個(gè)好的設(shè)計(jì)。當(dāng)你開始適應(yīng)網(wǎng)格的存在，不要被它束縛。你不必100%受限于網(wǎng)格。偶爾打破格子設(shè)計(jì)可能會(huì)讓你的設(shè)計(jì)更引人注目。不過破格保持網(wǎng)頁協(xié)調(diào)是有技巧的。不是任何“變態(tài)”的設(shè)計(jì)都是好的。今天，我們來談?wù)勥@個(gè)。

　　理解網(wǎng)格系統(tǒng)

　　要想打破網(wǎng)格，首先要對(duì)網(wǎng)格系統(tǒng)有深入的了解。無論你使用什么樣的網(wǎng)格，它都是你網(wǎng)頁設(shè)計(jì)過程中的“基礎(chǔ)設(shè)施”。它幫助您確定如何放置元素，確保不同的控件堆疊在頁面上，而不會(huì)顯得突兀和不協(xié)調(diào)，并有助于保持頁面的組織。

　　事實(shí)上，不同領(lǐng)域的設(shè)計(jì)師一直在使用網(wǎng)格?？磮?bào)紙和書。在網(wǎng)頁設(shè)計(jì)師開始使用網(wǎng)格之前，他們已經(jīng)把這個(gè)系統(tǒng)玩得很完美了。

　　網(wǎng)格可以做很多事情：

　　保持內(nèi)容有條理。網(wǎng)格體系下，元素從左到右、從上到下排列清晰，布局一致。讓設(shè)計(jì)更有效率，因?yàn)橐?guī)則的網(wǎng)格讓各種UI元素的排列更有規(guī)律。讓網(wǎng)頁的不同頁面看起來一致，讓元素之間的間距相同，讓整個(gè)設(shè)計(jì)保持整潔

　　既然網(wǎng)格有那么多優(yōu)勢(shì)，為什么還要破網(wǎng)格？

　　不難理解，網(wǎng)格營造出一致協(xié)調(diào)的觀感，打破網(wǎng)格的元素自然變得更加耀眼，這無疑是一個(gè)重點(diǎn)。有很多注意事項(xiàng)要讓這個(gè)元素打破格子，與其他元素形成匹配。

　　區(qū)分層

　　將不同的元素放在不同的層上，可以保證一些元素在網(wǎng)格之外，而另一些元素是一致的。

　　由于材料設(shè)計(jì)的流行，許多網(wǎng)頁已經(jīng)開始使用圖層來管理網(wǎng)頁中的不同元素。不同的元素在不同的層中以不同的規(guī)則運(yùn)動(dòng)，相互重疊和區(qū)分，運(yùn)行效率更高。

　　Cmmnty讓線條和文字與圖片重疊，借助錯(cuò)位排版營造出不平衡的效果。你會(huì)在整個(gè)設(shè)計(jì)中看到網(wǎng)格的痕跡，此時(shí)的視覺不平衡相當(dāng)顯眼。

　　有目的地使用空白

　　強(qiáng)調(diào)一個(gè)元素，留白永遠(yuǎn)是最有用的手段。只有在合適的地方創(chuàng)造出留白，它所圍繞的元素才能脫穎而出。

　　我們經(jīng)常認(rèn)為單排或單排布局在移動(dòng)布局上是合理的，但多排布局也是可行的，重要的是營造一個(gè)更整體的視覺設(shè)計(jì)。例如，在SAS中，當(dāng)設(shè)計(jì)人員使用空格來打破傳統(tǒng)布局時(shí)，文本會(huì)在不同的塊之間左對(duì)齊，并添加中間的圖標(biāo)。這種設(shè)計(jì)讓這些破格元素更加顯眼，吸引用戶的注意力。留白的使用為這些元素創(chuàng)造了被注意的機(jī)會(huì)。

　　將元素放入容器中

　　當(dāng)元素以某種形式包含在其他容器中時(shí)，即使網(wǎng)格系統(tǒng)被破壞，也往往給人一種整體感。就像上面的網(wǎng)頁一樣，打破網(wǎng)格的文本被放在一個(gè)彩色的背景中，這就是它的作用。

　　這種放置在容器中的元素，即使不遵循網(wǎng)格標(biāo)準(zhǔn)，也往往給人一種關(guān)聯(lián)的感覺。

　　被包含在一個(gè)容器中也打破了網(wǎng)格系統(tǒng)的設(shè)計(jì)，這是一個(gè)有趣的手段。很多容器設(shè)計(jì)成完全對(duì)稱，但元素卻不是，從某種意義上打破了原本單調(diào)的設(shè)計(jì)。

　　調(diào)整特定元素

　　打破格子的最好辦法就是用細(xì)節(jié)來達(dá)到這個(gè)目的。但這并不意味著處處添加細(xì)節(jié)，這和留白是一樣的。如果網(wǎng)站充斥著突破格子的細(xì)節(jié)，網(wǎng)站就會(huì)徹底陷入混亂。因此，選擇特定的元素進(jìn)行調(diào)整更有效。

　　裝飾元素是非常好的選擇。例如，為需要強(qiáng)調(diào)的元素添加醒目的顏色，調(diào)整其位置，或微調(diào)其位置，使其突破網(wǎng)格系統(tǒng)。

　　Nod之地使用一個(gè)長平行四邊形來“打破網(wǎng)格”。首先，這個(gè)形狀不尋常。醒目的紅色和半重疊的位置使其在整個(gè)設(shè)計(jì)中脫穎而出。

　　讓它動(dòng)起來

　　借助動(dòng)態(tài)效果將元素從網(wǎng)格系統(tǒng)中分離出來也是一種很好的方法。和前一個(gè)一樣，單個(gè)元素移動(dòng)時(shí)，效果會(huì)非常明顯，甚至?xí)屨麄€(gè)網(wǎng)格系統(tǒng)顯得不那么明顯。

　　當(dāng)然，Trippeo網(wǎng)站采用的方法更激進(jìn)：保持中間計(jì)費(fèi)的圖形位置不變，而背景的所有元素都隨之移動(dòng)。整個(gè)網(wǎng)頁融合了視頻背景、網(wǎng)格系統(tǒng)、視差滾動(dòng)等各種技術(shù)，絕對(duì)是奇思妙想和技術(shù)的高度融合。

　　制造打破格子的假象

　　有時(shí)候，打破格子并不要求你真的“打破”它。借助網(wǎng)格系統(tǒng)中有趣的形狀和不對(duì)稱的搭配，可以創(chuàng)造出“破碎”的效果。

　　不破網(wǎng)的好處是你仍然可以充分利用網(wǎng)格系統(tǒng)的優(yōu)勢(shì)，同時(shí)做一些與眾不同的事情。最好的方法是借助奇數(shù)行和奇數(shù)列進(jìn)行設(shè)計(jì)，添加不完整或不足的元素，造成錯(cuò)誤、遺漏、間隙和不對(duì)稱。就像上面的網(wǎng)站Marche  Notre  Dame，雖然看起來不對(duì)稱，但內(nèi)容還是遵循網(wǎng)格布局。

　　標(biāo)簽

　　破格設(shè)計(jì)不易實(shí)現(xiàn)，因?yàn)榭刂撇缓猛鶗?huì)讓整個(gè)設(shè)計(jì)陷入混亂。如何在不破壞整個(gè)項(xiàng)目的情況下加入異想天開？多練沒有錯(cuò)。