今天，網(wǎng)格幾乎是幾乎所有網(wǎng)頁設(shè)計(jì)的基礎(chǔ)。這些隱形線條在空間中營(yíng)造出節(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ì)可能會(huì)使您的設(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)，有助于保持頁面的整潔。

事實(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此頁面允許線條和文本與圖像重疊，從而在錯(cuò)位的排版中產(chǎn)生不平衡效果。您將在整個(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í)，文本在不同的塊上對(duì)齊，加上居中的圖標(biāo)。這種設(shè)計(jì)使得打破網(wǎng)格的這些元素更加明顯，并引起用戶的注意?？瞻椎氖褂脼檫@些元素創(chuàng)造了“關(guān)注”的機(jī)會(huì)。

　將元素置于容器中

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

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

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

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

打破網(wǎng)格的最佳方法是在細(xì)節(jié)的幫助下完成這項(xiàng)工作。但這并不意味著在任何地方添加細(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之地使用長(zhǎ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的方法更為激進(jìn)：它保持中間計(jì)費(fèi)圖形位置不變，背景的所有元素隨之移動(dòng)，整個(gè)網(wǎng)頁包含視頻背景，網(wǎng)格系統(tǒng)和視差滾動(dòng)等技術(shù)。它絕對(duì)是奇思妙想和技術(shù)的高度融合。

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

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

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

就像上面的Marche Notre Dame網(wǎng)站一樣，雖然它看起來不對(duì)稱，但內(nèi)容仍處于柵格化布局中。

　結(jié)語

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

« 這10個(gè)隱藏的技巧使您的魅族手機(jī)更方便，更易于使用 | 營(yíng)銷手機(jī)謳姆微信營(yíng)銷系統(tǒng)配備品牌黑技術(shù) »