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

但是，網(wǎng)格的目的是幫助您創(chuàng)建一個(gè)好的設(shè)計(jì)，當(dāng)您開始適應(yīng)網(wǎng)格的存在時(shí)，不要束縛它。您不必受到網(wǎng)格的100％約束，偶爾打破網(wǎng)格設(shè)計(jì)可能會使您的設(shè)計(jì)更加引人注目。但是，打破網(wǎng)格并保持網(wǎng)頁的協(xié)調(diào)是很棘手的。并非所有“有缺陷”的設(shè)計(jì)都是好的。今天，我們來談?wù)勥@個(gè)。

了解柵格系統(tǒng)

要打破網(wǎng)格，您需要深入了解網(wǎng)格系統(tǒng)。無論您使用哪種網(wǎng)格，它都是您網(wǎng)頁設(shè)計(jì)過程中的“基礎(chǔ)設(shè)施”。它可以幫助您確定元素的放置方式，幫助您確保在頁面上堆疊不同的控件而不顯示。不協(xié)調(diào)和不協(xié)調(diào)以幫助維護(hù)頁面的組織。

事實(shí)上，不同領(lǐng)域的設(shè)計(jì)師一直在使用網(wǎng)格。看看報(bào)紙和書籍，在網(wǎng)頁設(shè)計(jì)師開始使用網(wǎng)格之前，他們已經(jīng)玩過系統(tǒng)了。

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

·維護(hù)內(nèi)容的組織。在網(wǎng)格系統(tǒng)下，元素從左到右，從上到下清晰排列，保持布局一致。

使設(shè)計(jì)更有效，因?yàn)橐?guī)則化網(wǎng)格規(guī)則了各種UI元素的布局。

·使頁面的不同頁面看起來一致

·保持元素和元素之間的間距相同，保持整個(gè)設(shè)計(jì)整潔

由于電網(wǎng)有很多優(yōu)點(diǎn)，我們?yōu)槭裁匆蚱齐娋W(wǎng)呢？

不難理解，網(wǎng)格創(chuàng)造了一致和協(xié)調(diào)的外觀和感覺，并且打破網(wǎng)格元素自然變得更加“眩光”，這無疑是一個(gè)重點(diǎn)。要使這個(gè)元素打破網(wǎng)格并與其他元素形成匹配，還有很多事情要做。

區(qū)分圖層

在不同的層上放置不同的元素可確保某些元素超出網(wǎng)格，其他元素保持一致。

由于Material Design的普及，如今許多網(wǎng)頁已經(jīng)開始使用圖層來管理網(wǎng)頁的不同元素。不同的元素在不同的層中移動(dòng)，具有不同的規(guī)則，彼此重疊并區(qū)分它們，并且更有效地操作。

在Cmmnty網(wǎng)頁中，線條和文本與圖像重疊，產(chǎn)生不平衡的效果，錯(cuò)位的排版。您將在整個(gè)設(shè)計(jì)中看到網(wǎng)格的痕跡，此時(shí)的視覺不平衡非常明顯。

有目的地使用留白

為了強(qiáng)調(diào)元素，消隱始終是一個(gè)有用的工具。只有在正確的位置創(chuàng)建一個(gè)空白才能突出它周圍的元素。

我們經(jīng)常認(rèn)為單行或單行的布局在移動(dòng)布局上更合理，但多行和列的布局實(shí)際上是可行的。創(chuàng)建更全面的視覺設(shè)計(jì)非常重要。

例如，SAS是網(wǎng)站。當(dāng)設(shè)計(jì)師使用空白區(qū)域來打破傳統(tǒng)布局時(shí)，文本會在不同的塊上左對齊，加上居中的圖標(biāo)。這種設(shè)計(jì)使打破網(wǎng)格的這些元素更加引人注目并引起用戶的注意?？瞻椎氖褂脼檫@些元素提供了“關(guān)注”的機(jī)會。

　將元素置于容器中

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

放置在容器中的這個(gè)元素通常會產(chǎn)生相互關(guān)系的感覺，即使它不符合網(wǎng)格的規(guī)格。

容納在容器中也會破壞網(wǎng)格系統(tǒng)的設(shè)計(jì)，這是一種非常有趣的方法。許多容器被設(shè)計(jì)成完全對稱，但元件不是，這在某些方面打破了原始的單調(diào)設(shè)計(jì)。

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

打破網(wǎng)格眾所周知的方法的方法是使用細(xì)節(jié)來實(shí)現(xiàn)這一目標(biāo)。但這并不意味著在任何地方添加細(xì)節(jié)，就像空白一樣。如果網(wǎng)站充滿了破碎的網(wǎng)格細(xì)節(jié)，那么網(wǎng)站將完全混亂。因此，選擇特定元素進(jìn)行調(diào)整更為有效。

虛線元素是一個(gè)非常好的選擇。例如，將粗體和醒目的顏色附加到需要強(qiáng)調(diào)的元素，調(diào)整其位置或微調(diào)其位置以使其突破網(wǎng)格系統(tǒng)。

Nod的土地網(wǎng)站使用長平行四邊形來“打破網(wǎng)格”。這種形狀首先不常見。引人注目的紅色和半重疊的位置使其從整個(gè)設(shè)計(jì)中脫穎而出。

讓它動(dòng)起來

將元素從運(yùn)動(dòng)中移出網(wǎng)格系統(tǒng)也是一個(gè)好主意。與前一個(gè)元素一樣，當(dāng)單個(gè)元素移動(dòng)時(shí)，效果非常明顯，甚至整個(gè)網(wǎng)格系統(tǒng)也不那么明顯。

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

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

有時(shí)，打破網(wǎng)格并不需要你真正“打破”它。您可以在網(wǎng)格系統(tǒng)中創(chuàng)建具有有趣形狀和不對稱搭配的“破碎”效果。

不打破網(wǎng)格的優(yōu)勢在于您仍然可以充分利用網(wǎng)格系統(tǒng)，同時(shí)仍然可以執(zhí)行不同的操作。眾所周知的方法是設(shè)計(jì)奇數(shù)行和列，加上不完整或不充分的元素填充，以產(chǎn)生錯(cuò)誤，泄漏，缺乏不對稱性。

結(jié)論

打破網(wǎng)格的設(shè)計(jì)并不容易實(shí)現(xiàn)，因?yàn)樵愀獾目刂仆ǔ拐麄€(gè)設(shè)計(jì)混亂。如何在不破壞整個(gè)項(xiàng)目的情況下添加奇思妙想？練習(xí)更多總是沒有錯(cuò)。