現如今，栅格已經幾乎是所有網頁設計的基礎。這些隐形的線條創造出空間的節奏感和視覺的流暢感，他們是讓網頁變得更加和諧的基礎。

但是，栅格存在的目的是幫你創造好的設計，當你開(kāi)始逐漸适應栅格的存在，千萬不要被它束縛住。你并沒有必要100%地受限于栅格，偶爾打破栅格的設計可能會讓你的設計更加抓人眼球。不過，想要打破栅格又(yòu)保持網頁的協調，是有技巧的，并非任何“破格”的設計都是好的。今天，我(wǒ)們來聊聊這個。

了解栅格系統

想要打破栅格，那麽你首先得深入理解栅格系統。無論你使用的是哪種樣式的栅格，它都是你的網頁設計過程中(zhōng)的“基礎設施”，它幫你确定元素要怎麽放(fàng)置，幫你确保不同的控件在頁面上堆疊而不會顯得突兀不協調，有助于保持頁面的組織性。

其實不同領域的設計師一(yī)直都在使用栅格。看看報紙(zhǐ)和圖書(shū)吧，在網頁設計師開(kāi)始使用栅格之前，他們已經将這套系統玩的爐火(huǒ)純青了。

栅格能做的事情有很多：

·保持内容的組織度。在栅格系統下(xià)，元素從左到右，從上到下(xià)都清晰明了地排布起來，讓布局保持一(yī)緻性。

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

·讓網頁不同的頁面看起來都保持一(yī)緻性

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

既然栅格有這麽多的優勢，那麽爲何還要打破栅格呢？

這不難理解，栅格營造出一(yī)緻和協調的觀感，打破栅格的元素 自然就顯得更加“刺眼”了，這無疑是一(yī)種強調了。想要讓這個元素打破栅格，又(yòu)能與其他元素形成搭配，有許多講究。

區分(fēn)圖層

将不同的元素置于不同的圖層，這樣可以确保部分(fēn)元素超出于栅格，而其他的元素保持一(yī)緻。

由于Material Design 的流行，現如今許多網頁已經開(kāi)始使用圖層來管理網頁中(zhōng)不同的元素。不同的元素在不同的圖層中(zhōng)，以不同的規則運動，相互交疊又(yòu)互相區分(fēn)，更爲高效地運作。

Cmmnty 這個網頁中(zhōng)，讓線條和文本同圖片産生(shēng)了交疊，借助錯位的排版營造出一(yī)種失衡的效果。你會在整個設計中(zhōng)看到栅格的痕迹，而這個時候的視覺失衡的部分(fēn)，就顯得相當顯眼了。

有目的地使用留白(bái)

想要強調一(yī)個元素，留白(bái)總是最有用的手段。隻有在正确的地方創造留白(bái)，才能讓其環繞下(xià)的元素顯得突出。

我(wǒ)們常常會認爲，在移動端布局上，單列或者單行的布局是比較合理，但是多行列的布局其實也是可行的，重要的是創造出整體(tǐ)性更強的視覺設計。

比如SAS這個網站，當設計師使用留白(bái)來打破傳統的布局之時，讓文字左對齊橫跨不同的區塊，加上居中(zhōng)的圖标。這樣的設計令這些打破栅格的元素更加醒目，引起用戶的注意力。留白(bái)的使用，爲這些元素創造了“被注意”的機會。

将元素置于容器中(zhōng)

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

這種被置于一(yī)個容器中(zhōng)的元素，即使并沒有遵循栅格的規範，也常常會給人一(yī)種相互關聯的感受。

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

調整特定的元素

想要打破栅格最好的方法，就是借助細節來實現這一(yī)目的。但這并不意味着到處都要加細節，和留白(bái)的道理是一(yī)樣，如果網站到處都是突破栅格的細節，那麽網站會徹底陷入混亂的。所以，選取特定的元素來進行調整會更有效。

點綴性的元素是非常不錯的選擇。比如爲某個需要強調的元素附上一(yī)個大(dà)膽而醒目的色彩，調整一(yī)下(xià)它的位置，或者微調一(yī)下(xià)它的位置，讓它突破栅格系統。

The Land Of Nod 這個網站就使用較長的平行四邊形來“打破栅格”，首先這個形狀并不常見，醒目的紅色和它半疊加的位置，都讓它從整個設計中(zhōng)脫穎而出。

讓它動起來

借助動效，讓元素從栅格系統中(zhōng)脫離(lí)出來，也是個不錯的方法。和上一(yī)個相同，當單個元素運動起來的時候，效果會非常明顯，甚至能夠讓整體(tǐ)的栅格系統顯得不是那麽明顯。

當然，Trippeo 這個網站所采用的方法更加激進：它讓中(zhōng)間計費(fèi)的圖形位置不變，而背景的所有元素都随之移動，整個網頁融入了視頻(pín)背景、栅格系統和視差滾動等多種技術，絕對是奇思妙想和技術的高度融合。

創造打破栅格的幻覺

有的時候，打破栅格并不需要你真的“打破”它。你可以在栅格系統内借助有趣的形狀和非對稱的搭配，營造出“被打破”的效果。

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

就像上面的Marche Notre Dame 這個網站，雖然看起來不對稱，但是其中(zhōng)的内容依然是沿襲着栅格化的布局。

結語

打破栅格的設計并不容易實現，因爲控制不好常常會讓整個設計陷入混亂。如何在加入奇思妙想的同時還不會破壞整個項目？多練習總是沒有錯的。