廈門(mén)網站(zhàn)建設：現如今，栅格已經幾乎是所有(yǒu)網頁設計(jì)的基礎。這些(xiē)隐形的線條創造出空(kōng)間(jiān)的節奏感和(hé)視(shì)覺的流暢感，他們是讓網頁變得(de)更加和(hé)諧的基礎。

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

了解栅格系統

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

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

栅格能做(zuò)的事情有(yǒu)很(hěn)多(duō)：

·保持內(nèi)容的組織度。在栅格系統下，元素從左到右，從上(shàng)到下都清晰明(míng)了地排布起來(lái)，讓布局保持一緻性。

·使得(de)設計(jì)更有(yǒu)效率，因為(wèi)規則化的栅格讓各種UI元素的排布都規則化。

·讓網頁不同的頁面看起來(lái)都保持一緻性

·讓元素和(hé)元素之間(jiān)的間(jiān)距都一樣，讓整個(gè)設計(jì)保持整潔

既然栅格有(yǒu)這麽多(duō)的優勢，那(nà)麽為(wèi)何還(hái)要打破栅格呢？

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

區(qū)分圖層

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

由于Material Design 的流行(xíng)，現如今許多(duō)網頁已經開(kāi)始使用圖層來(lái)管理(lǐ)網頁中不同的元素。不同的元素在不同的圖層中，以不同的規則運動，相互交疊又互相區(qū)分，更為(wèi)高(gāo)效地運作(zuò)。

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

有(yǒu)目的地使用留白

想要強調一個(gè)元素，留白總是最有(yǒu)用的手段。隻有(yǒu)在正确的地方創造留白，才能讓其環繞下的元素顯得(de)突出。

我們常常會(huì)認為(wèi)，在移動端布局上(shàng)，單列或者單行(xíng)的布局是比較合理(lǐ)，但(dàn)是多(duō)行(xíng)列的布局其實也是可(kě)行(xíng)的，重要的是創造出整體(tǐ)性更強的視(shì)覺設計(jì)。

比如SAS這個(gè)網站(zhàn)，當設計(jì)師(shī)使用留白來(lái)打破傳統的布局之時(shí)，讓文字左對齊橫跨不同的區(qū)塊，加上(shàng)居中的圖标。這樣的設計(jì)令這些(xiē)打破栅格的元素更加醒目，引起用戶的注意力。留白的使用，為(wèi)這些(xiē)元素創造了“被注意”的機會(huì)。

将元素置于容器(qì)中

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

這種被置于一個(gè)容器(qì)中的元素，即使并沒有(yǒu)遵循栅格的規範，也常常會(huì)給人(rén)一種相互關聯的感受。

這種被包含在容器(qì)中還(hái)打破了栅格系統的設計(jì)，是一種頗為(wèi)有(yǒu)趣的手段。許多(duō)容器(qì)都被設計(jì)成完全對稱的樣式，但(dàn)是其中的元素則不然，這從某種意義上(shàng)打破了原本單調的設計(jì)。

調整特定的元素

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

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

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

讓它動起來(lái)

借助動效，讓元素從栅格系統中脫離出來(lái)，也是個(gè)不錯的方法。和(hé)上(shàng)一個(gè)相同，當單個(gè)元素運動起來(lái)的時(shí)候，效果會(huì)非常明(míng)顯，甚至能夠讓整體(tǐ)的栅格系統顯得(de)不是那(nà)麽明(míng)顯。

當然，Trippeo 這個(gè)網站(zhàn)所采用的方法更加激進：它讓中間(jiān)計(jì)費的圖形位置不變，而背景的所有(yǒu)元素都随之移動，整個(gè)網頁融入了視(shì)頻背景、栅格系統和(hé)視(shì)差滾動等多(duō)種技(jì)術(shù)，絕對是奇思妙想和(hé)技(jì)術(shù)的高(gāo)度融合。

創造打破栅格的幻覺

有(yǒu)的時(shí)候，打破栅格并不需要你(nǐ)真的“打破”它。你(nǐ)可(kě)以在栅格系統內(nèi)借助有(yǒu)趣的形狀和(hé)非對稱的搭配，營造出“被打破”的效果。

不打破栅格的好處在于，你(nǐ)依然充分利用栅格系統的優勢，同時(shí)還(hái)能做(zuò)一些(xiē)不一樣的東西。最好的方式是借助奇數(shù)的行(xíng)列來(lái)設計(jì)，加上(shàng)不完全或者不充分的元素填充，營造出錯、漏、缺、不對稱的效果。

就像上(shàng)面的Marche Notre Dame 這個(gè)網站(zhàn)，雖然看起來(lái)不對稱，但(dàn)是其中的內(nèi)容依然是沿襲着栅格化的布局。

結語

打破栅格的設計(jì)并不容易實現，因為(wèi)控制(zhì)不好常常會(huì)讓整個(gè)設計(jì)陷入混亂。如何在加入奇思妙想的同時(shí)還(hái)不會(huì)破壞整個(gè)項目？多(duō)練習總是沒有(yǒu)錯的。(廈門(mén)網站(zhàn)建設文章來(lái)自百度新聞)