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

其實(shí)不同領(lǐng)域的設(shè)計(jì)師一直都在使用柵格。看看報(bào)紙和圖書吧，在網(wǎng)頁設(shè)計(jì)師開始使用柵格之前，他們已經(jīng)將這套系統(tǒng)玩的爐火純青了。

柵格能做的事情有很多：

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

這不難理解，柵格營(yíng)造出一致和協(xié)調(diào)的觀感，打破柵格的元素 自然就顯得更加“刺眼”了，這無疑是一種強(qiáng)調(diào)了。想要讓這個(gè)元素打破柵格，又能與其他元素形成搭配，有許多講究。將不同的元素置于不同的圖層，這樣可以確保部分元素超出于柵格，而其他的元素保持一致。

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

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

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

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

另一個(gè)網(wǎng)站，當(dāng)設(shè)計(jì)師使用留白來打破傳統(tǒng)的布局之時(shí)，讓文字左對(duì)齊橫跨不同的區(qū)塊，加上居中的圖標(biāo)。這樣的設(shè)計(jì)令這些打破柵格的元素更加醒目，引起用戶的注意力。留白的使用，為這些元素創(chuàng)造了“被注意”的機(jī)會(huì)。