現如今，柵格已經(jīng)幾乎是所有網(wǎng)頁(yè)設計的基礎。這些隱形的線(xiàn)條創(chuàng )造出空間的節奏感和視覺(jué)的流暢感，是讓網(wǎng)頁(yè)變得更加和諧的基礎。

但是，柵格存在的目的是幫你創(chuàng )造好的設計，當你開(kāi)始逐漸適應柵格的存在，千萬(wàn)不要被它束縛住。你并沒(méi)有必要100%地受限于柵格，偶爾打破柵格的設計可能會(huì )讓你的設計更加抓人眼球。不過(guò)，想要打破柵格又保持網(wǎng)頁(yè)的協(xié)調，是有技巧的，并非任何“破格”的設計都是好的。

了解柵格系統

想要打破柵格，那么你首先得深入理解柵格系統。無(wú)論你使用的是哪種樣式的柵格，它都是你的網(wǎng)頁(yè)設計過(guò)程中的“基礎設施”，它幫你確定元素要怎么放置，幫你確保不同的控件在頁(yè)面上堆疊而不會(huì )顯得突兀不協(xié)調，有助于保持頁(yè)面的組織性。

其實(shí)不同領(lǐng)域的設計師一直都在使用柵格?？纯磮蠹埡蛨D書(shū)吧，在網(wǎng)頁(yè)設計師開(kāi)始使用柵格之前，他們已經(jīng)將這套系統玩的爐火純青了。

柵格能做的事情有很多：

·保持內容的組織度。在柵格系統下，元素從左到右，從上到下都清晰明了地排布起來(lái)，讓布局保持一致性。

·使得設計更有效率，因為規則化的柵格讓各種UI元素的排布都規則化。

·讓網(wǎng)頁(yè)不同的頁(yè)面看起來(lái)都保持一致性

·讓元素和元素之間的間距都一樣，讓整個(gè)設計保持整潔

既然柵格有這么多的優(yōu)勢，那么為何還要打破柵格呢?

這不難理解，柵格營(yíng)造出一致和協(xié)調的觀(guān)感，打破柵格的元素 自然就顯得更加“刺眼”了，這無(wú)疑是一種強調了。想要讓這個(gè)元素打破柵格，又能與其他元素形成搭配，有許多講究。

區分圖層

將不同的元素置于不同的圖層，這樣可以確保部分元素超出于柵格，而其他的元素保持一致。

由于Material Design 的流行，現如今許多網(wǎng)頁(yè)已經(jīng)開(kāi)始使用圖層來(lái)管理網(wǎng)頁(yè)中不同的元素。不同的元素在不同的圖層中，以不同的規則運動(dòng)，相互交疊又互相區分，更為高效地運作。

Cmmnty 這個(gè)網(wǎng)頁(yè)中，讓線(xiàn)條和文本同圖片產(chǎn)生了交疊，借助錯位的排版營(yíng)造出一種失衡的效果。你會(huì )在整個(gè)設計中看到柵格的痕跡，而這個(gè)時(shí)候的視覺(jué)失衡的部分，就顯得相當顯眼了。

有目的地使用留白

想要強調一個(gè)元素，留白總是最有用的手段。只有在正確的地方創(chuàng )造留白，才能讓其環(huán)繞下的元素顯得突出。

我們常常會(huì )認為，在移動(dòng)端布局上，單列或者單行的布局是比較合理，但是多行列的布局其實(shí)也是可行的，重要的是創(chuàng )造出整體性更強的視覺(jué)設計。

比如SAS這個(gè)網(wǎng)站，當設計師使用留白來(lái)打破傳統的布局之時(shí)，讓文字左對齊橫跨不同的區塊，加上居中的圖標。這樣的設計令這些打破柵格的元素更加醒目，引起用戶(hù)的注意力。留白的使用，為這些元素創(chuàng )造了“被注意”的機會(huì )。

將元素置于容器中

當元素以某種形式被包含到其他的容器當中的時(shí)候，即使柵格系統因此被破壞，也往往能給人一種整體感。就像上面的網(wǎng)頁(yè)，打破柵格的文本被置于彩色的背景當中，就是這樣做的。

這種被置于一個(gè)容器中的元素，即使并沒(méi)有遵循柵格的規范，也常常會(huì )給人一種相互關(guān)聯(lián)的感受。

這種被包含在容器中還打破了柵格系統的設計，是一種頗為有趣的手段。許多容器都被設計成完全對稱(chēng)的樣式，但是其中的元素則不然，這從某種意義上打破了原本單調的設計。

調整特定的元素

想要打破柵格最好的方法，就是借助細節來(lái)實(shí)現這一目的。但這并不意味著(zhù)到處都要加細節，和留白的道理是一樣，如果網(wǎng)站到處都是突破柵格的細節，那么網(wǎng)站會(huì )徹底陷入混亂的。所以，選取特定的元素來(lái)進(jìn)行調整會(huì )更有效。

點(diǎn)綴性的元素是非常不錯的選擇。比如為某個(gè)需要強調的元素附上一個(gè)大膽而醒目的色彩，調整一下它的位置，或者微調一下它的位置，讓它突破柵格系統。

The Land Of Nod 這個(gè)網(wǎng)站就使用較長(cháng)的平行四邊形來(lái)“打破柵格”，首先這個(gè)形狀并不常見(jiàn)，醒目的紅色和它半疊加的位置，都讓它從整個(gè)設計中脫穎而出。

讓它動(dòng)起來(lái)

借助動(dòng)效，讓元素從柵格系統中脫離出來(lái)，也是個(gè)不錯的方法。和上一個(gè)相同，當單個(gè)元素運動(dòng)起來(lái)的時(shí)候，效果會(huì )非常明顯，甚至能夠讓整體的柵格系統顯得不是那么明顯。

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

創(chuàng )造打破柵格的幻覺(jué)

有的時(shí)候，打破柵格并不需要你真的“打破”它。你可以在柵格系統內借助有趣的形狀和非對稱(chēng)的搭配，營(yíng)造出“被打破”的效果。

不打破柵格的好處在于，你依然充分利用柵格系統的優(yōu)勢，同時(shí)還能做一些不一樣的東西。最好的方式是借助奇數的行列來(lái)設計，加上不完全或者不充分的元素填充，營(yíng)造出錯、漏、缺、不對稱(chēng)的效果。

就像上面的Marche Notre Dame 這個(gè)網(wǎng)站，雖然看起來(lái)不對稱(chēng)，但是其中的內容依然是沿襲著(zhù)柵格化的布局。

結語(yǔ)

打破柵格的設計并不容易實(shí)現，因為控制不好常常會(huì )讓整個(gè)設計陷入混亂。如何在加入奇思妙想的同時(shí)還不會(huì )破壞整個(gè)項目?多練習總是沒(méi)有錯的。