現(xiàn)如今，柵格已經(jīng)幾乎是所有網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)。這些隱形的線(xiàn)條創(chuàng)造出空間的節(jié)奏感和視覺(jué)的流暢感，他們是讓網(wǎng)頁(yè)變得更加和諧的基礎(chǔ)。但是，柵格存在的目的是幫你創(chuàng)造好的設(shè)計(jì)，當(dāng)你開(kāi)始逐漸適應(yīng)柵格的存在，千萬(wàn)不要被它束縛住。你并沒(méi)有必要100%地受限于柵格，偶爾打破柵格的設(shè)計(jì)可能會(huì)讓你的設(shè)計(jì)更加抓人眼球。不過(guò)，想要打破柵格又保持網(wǎng)頁(yè)的協(xié)調(diào)，是有技巧的，并非任何“破格”的設(shè)計(jì)都是好的。

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

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

一、區(qū)分圖層

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

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

二、有目的地使用留白

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

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

三、將元素置于容器中

當(dāng)元素以某種形式被包含到其他的容器當(dāng)中的時(shí)候，即使柵格系統(tǒng)因此被破壞，也往往能給人一種整體感。這種被包含在容器中還打破了柵格系統(tǒng)的設(shè)計(jì)，是一種頗為有趣的手段。許多容器都被設(shè)計(jì)成完全對(duì)稱(chēng)的樣式，但是其中的元素則不然，這從某種意義上打破了原本單調(diào)的設(shè)計(jì)。

四、調(diào)整特定的元素

想要打破柵格最好的方法，就是借助細(xì)節(jié)來(lái)實(shí)現(xiàn)這一目的。但這并不意味著到處都要加細(xì)節(jié)，和留白的道理是一樣，如果網(wǎng)站到處都是突破柵格的細(xì)節(jié)，那么網(wǎng)站會(huì)徹底陷入混亂的。所以，選取特定的元素來(lái)進(jìn)行調(diào)整會(huì)更有效。點(diǎn)綴性的元素是非常不錯(cuò)的選擇。比如為某個(gè)需要強(qiáng)調(diào)的元素附上一個(gè)大膽而醒目的色彩，調(diào)整一下它的位置，或者微調(diào)一下它的位置，讓它突破柵格系統(tǒng)。

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

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

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

有的時(shí)候，打破柵格并不需要你真的“打破”它。你可以在柵格系統(tǒng)內(nèi)借助有趣的形狀和非對(duì)稱(chēng)的搭配，營(yíng)造出“被打破”的效果。不打破柵格的好處在于，你依然充分利用柵格系統(tǒng)的優(yōu)勢(shì)，同時(shí)還能做一些不一樣的東西。最好的方式是借助奇數(shù)的行列來(lái)設(shè)計(jì)，加上不完全或者不充分的元素填充，營(yíng)造出錯(cuò)、漏、缺、不對(duì)稱(chēng)的效果。

無(wú)錫網(wǎng)頁(yè)設(shè)計(jì)就找無(wú)錫海之睿（www.zfmj.com.cn)