設(shè)計(jì)元素似乎無處不在，它們以許多不同的方式出現(xiàn)并做出各種反應(yīng)——上下移動，左右移動，甚至以對角線移動?，F(xiàn)在還有人使用網(wǎng)格嗎？

所有這些設(shè)計(jì)方案都讓我們重新思考網(wǎng)格及其在現(xiàn)代網(wǎng)站設(shè)計(jì)中的應(yīng)用。網(wǎng)格真的“死”了嗎？但是為什么這么多項(xiàng)目看起來像從網(wǎng)格中設(shè)計(jì)出來的？過去幾年有什么根本性的變化嗎？

這是一個(gè)相當(dāng)復(fù)雜的話題（也沒有一個(gè)非常明確的答案）。

網(wǎng)格在網(wǎng)站設(shè)計(jì)中的歷史（History of Grids in Website Design）

網(wǎng)格是一個(gè)古老的概念，可以追溯到圖形設(shè)計(jì)中。使用垂直和水平對齊來促進(jìn)組織，對于確保可讀性和設(shè)計(jì)層次非常重要。

當(dāng)我們開始制作網(wǎng)站時(shí)，在印刷設(shè)計(jì)中經(jīng)常使用的網(wǎng)格系統(tǒng)被應(yīng)用到互聯(lián)網(wǎng)上，你會在大多數(shù)圖形和視覺布局中發(fā)現(xiàn)一些關(guān)鍵類型的網(wǎng)格:

· 列網(wǎng)格：將頁面進(jìn)行對齊的垂直劃分。在網(wǎng)站設(shè)計(jì)中最常見的網(wǎng)格是12列網(wǎng)格。12列網(wǎng)格很受歡迎，因?yàn)樗梢砸远喾N方式進(jìn)行細(xì)分以獲得最大的靈活性，分為12、6、4、3、2或1列部分，這些部分都是均勻間隔的。

· 模塊化網(wǎng)格：垂直和水平列的組合，構(gòu)成元素的模塊。它們通常用于對網(wǎng)頁上的卡片元素進(jìn)行排序。

· 磚塊網(wǎng)格：類似于模塊化網(wǎng)格，但擴(kuò)展到允許不同形狀或大小的元素，例如兩列或兩行大小的卡片仍然適合網(wǎng)格。

· 基線網(wǎng)格：將文本列對齊的水平線，就像你在帶有線的紙上寫字一樣。

· 手稿/閱讀網(wǎng)格：決定文本位置的一列。這個(gè)網(wǎng)格的左右邊距通常相等，但并不總是如此。可以把它想象成博客上的一個(gè)文本欄，只是去掉了側(cè)邊欄。

· 像素網(wǎng)格：微小的正方形網(wǎng)格，每個(gè)網(wǎng)格為一個(gè)像素，這在圖標(biāo)設(shè)計(jì)中很常用。

· 分層網(wǎng)格：不規(guī)則的網(wǎng)格，創(chuàng)建元素的層次結(jié)構(gòu)，但可能只有設(shè)計(jì)師知道。這種類型的網(wǎng)格可能是我們正在尋找的標(biāo)準(zhǔn)答案。

網(wǎng)格已經(jīng)消亡了嗎？（Are Grids Dead?）

我們相信網(wǎng)格并沒有消亡。并且，我們傳統(tǒng)的完美數(shù)學(xué)概念可能是對網(wǎng)絡(luò)有“增效”作用。

響應(yīng)性以及如此多的網(wǎng)頁設(shè)計(jì)和縱橫比使得網(wǎng)格必須根據(jù)設(shè)備大小、視窗和其中的內(nèi)容來收縮、折疊和擴(kuò)展，這太復(fù)雜了。

即使在視覺上沒有明顯的網(wǎng)格的地方，也可能有。你可以這樣想:

· 開發(fā)人員必須開發(fā)一個(gè)網(wǎng)格來確定設(shè)計(jì)如何以及在哪里從桌面轉(zhuǎn)向移動設(shè)備，反之亦然。

· 網(wǎng)格系統(tǒng)看起來幾乎無法辨認(rèn)，但其功能和目的一直在發(fā)揮作用。

· 設(shè)計(jì)師在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)經(jīng)常使用網(wǎng)格系統(tǒng)，只是你看起來可能并不存在。

誠然，有些類型的網(wǎng)格在網(wǎng)站設(shè)計(jì)中使用得很少。例如，基線網(wǎng)格只對多列文本元素很重要，而多列文本元素正變得越來越不常見。像素網(wǎng)格對于網(wǎng)頁設(shè)計(jì)師來說太小了。

模塊化和磚塊網(wǎng)格則幾乎無處不在（特別是如果你有一個(gè)帶有博客、圖片庫或任何類型的分組設(shè)計(jì)元素的網(wǎng)站）。

最后，分層網(wǎng)格已經(jīng)成為網(wǎng)站設(shè)計(jì)的主要元素。有時(shí)候你需要看整個(gè)頁面，而不是一次只看一個(gè)視覺區(qū)域。Visme博客是這樣描述它的：“層次網(wǎng)格設(shè)計(jì)的目的是按照重要性來組織元素。它仍然被稱為網(wǎng)格，因?yàn)槟K仍然設(shè)置在網(wǎng)格內(nèi)。分層網(wǎng)格可以自由設(shè)置，也可以以模塊化網(wǎng)格為指導(dǎo)”。

為什么如此多的網(wǎng)站看起來沒有網(wǎng)格？（Why Do So Many Websites Appear to Not Have Grids?）

你可能認(rèn)為網(wǎng)格已經(jīng)消亡的原因是你已經(jīng)越來越少在網(wǎng)站設(shè)計(jì)中看到他們。但在大多數(shù)情況下，網(wǎng)站設(shè)計(jì)使用網(wǎng)格——即使它是靈活的——以一種重復(fù)的方式用于整個(gè)網(wǎng)站。

通常情況下，這可能包括一個(gè)看起來只有一列的Banner，接著是一個(gè)有兩列的屏幕，然后是一個(gè)有三列的屏幕，然后是另一個(gè)只有一列的區(qū)域。當(dāng)你想到它們時(shí)，所有這些組合可能會令人眼花繚亂，但它們都是同一個(gè)網(wǎng)格的一部分——通常是12列！

從層次的角度來看，設(shè)計(jì)師正在創(chuàng)建內(nèi)容的塊、行和列，這些內(nèi)容在所有屏幕尺寸上都是按重要性順序排列的。多列元素在小屏幕上分解成單列，這都是網(wǎng)格的一部分。

你通常可以用網(wǎng)格來區(qū)分一個(gè)網(wǎng)站，因?yàn)槟慊蚨嗷蛏倌芨杏X到它們。即使沒有視覺或可感知的網(wǎng)格，物品也具有一定的層次結(jié)構(gòu)和排列方式。

還有一點(diǎn)：即使你嘗試著在沒有網(wǎng)格的情況下進(jìn)行設(shè)計(jì)，也有一些網(wǎng)格是天生存在的，不管你喜不喜歡（比如三分法，甚至是12列）。我們的眼睛經(jīng)過訓(xùn)練，可以發(fā)現(xiàn)這些分組和相似之處，從而創(chuàng)建視覺組織。

這一切意味著什么？即使你沒有計(jì)劃或看到它，網(wǎng)格的一些感知總是存在的?；趲讉€(gè)世紀(jì)的設(shè)計(jì)理論，與它一起工作可以創(chuàng)造視覺和諧。

總結(jié)

UX Planet對網(wǎng)格系統(tǒng)的看法是這樣的（我們完全同意）：

“……創(chuàng)造性約束是非常有價(jià)值的。約束不是限制我們的創(chuàng)造力，而是給我們一個(gè)起點(diǎn)，讓我們可以自由地去探索可能的解決方案。創(chuàng)造性約束的價(jià)值就是為什么最好的設(shè)計(jì)師總是堅(jiān)持從定義項(xiàng)目需求的強(qiáng)有力的設(shè)計(jì)概要開始工作。......網(wǎng)格系統(tǒng)為布局和視覺組織提供了約束，這同時(shí)減少了設(shè)計(jì)師可用的選擇項(xiàng)，但也開辟了大量受約束的可能性。即使是一個(gè)簡單的模塊化網(wǎng)格也可以容納數(shù)千個(gè)布局選項(xiàng)”。

綜上，你應(yīng)該已經(jīng)知道答案了——網(wǎng)格無疑沒有消失。

----圖文來自：design shack 

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)