基於網格設計方法將改善版面設計的15個理由

在圖形設計師的「工具箱」里，網格被認為是基本的基本要素之一。

這是為什麼呢?為什麼在你的版面上有一些網格線對設計項目如此重要?每個設計師都有自己的理由來解釋為什麼網格對他們來說很重要，但是簡單地說，它們可以幫助你把本來是一種很難、耗時和麻煩的圖文信息設計問題，通過網格構造，使你的設計實現有序、整齊、易於導航等功能。

所以，如果你要對基於網格設計的世界進行了深入的研究，讓我們來討論一下為什麼簡單地將網格添加到你的設計中，可以顯著改善你的設計的15個理由。

01.網格使你的內容有條理

網格的主要用途之一是保持設計元素對齊和排序，並且使你的頁面設計乾淨整潔。

這是因為網格有利於實現對齊，這實際上是它們在設計中起得最重要的作用。通過建立一個網格系統，你可以為自己創建一個結構來對齊元素，由此你可以為自己創建一個整潔，整齊和有組織的版面布局。

例如，看一下這種基於網格的布局，以及如何整齊排列每個元素以形成乾淨的最終效果。

在使用網格時，找到一個想像可以把元素對齊的網格，是你的文字、圖像、圖形或任何其他元素。先從你想要達到的目標開始，然後建立你的網格。

02.它會使你的工作更快

在一個我們總是希望更快更好地完成任務的世界裡，「提高效率」這個詞對很多人來說都像是音樂，所以這一點聽起來應該像一首交響樂。

網格可以大大加快和改進你的設計時間，因為它們可以作為一個嚮導，在哪裡放置是最好位置以及比例元素。網格應該幫助引導你找到一個自然的解決方案，而不是隨機地定位元素，直到你找到一個好看的構圖。

「網格通過幫助設計師決定內容應該放置在哪裡，從而加快了設計過程。」

把你的網格想像成房子的基礎，它是你首先要考慮設計的問題之一，然後你用這個基礎上來創建版面。

03.你的文字會感謝你的

如果沒有其他的東西，網格和文字是兩個非常愉快地相隨而來的設計元素。一個強大的網格，可以實現使文字多的布局看起來更整潔、更有組織，並有助於增強正文副本的可讀性。

網格有助於提高文字的易讀性，這是通過所謂的「基線網格」實現的，它們都是狹窄的橫行線，在設計中你的每一行都在你的設計上，有點像筆記本上的規定線條。這些網格線幫助你做的是調整文本的位置，使它們處在同一水平線上。

否則雖然很多人可能沒有特別注意到你的文字是否對齊，但他們會下意識地注意到，你的設計看起來更凌亂。

下面是一個基線網格的例子。注意每行是如何完美對齊的，由此創建一個乾淨整潔的排字效果。

04.與其他設計師合作將更容易

你曾經和其他設計師合作過嗎?如果是這樣的話，網格可能是緩解溝通不暢的部分壓力和挫折的答案。

正如前面提到的，網格在許多方面幫助你為你的設計提供一個底層結構，並提供了一個嚮導，以確定應該放置哪些元素。因此，如果你的設計中設置了一個堅固的網格，並且有一個新的設計人員加入，他們將(希望)能夠看到你是如何設置的，以及你打算如何定位元素。

舉個例子，如果你設計一個像下面這樣的設計作品，需要另一個設計師把文檔上加進去，然後放置第三段。

由於有了網格系統，它們不能夠正確地排列和對齊的幾率就更小了。此外，關於諸如「列應該有多寬」之類的信息，從上一列的文本中，我應該把它放在哪裡?因為所有的答案都已經被網格回答了。

在與其他設計師合作時，建立一個自我解釋的網格系統，適合你的最終產品。

05.平衡你的設計將變得更加容易

網格的美妙之處在於它們是一致的，當你將設計分成一定數量的列時，你將從一個對稱的布局開始。從這裡開始，判斷你的設計的哪個方面在壓倒另一方面應該容易得多。

請查看下面的網站設計，以及如何通過使用銳利對稱的網格和均勻大小的信息和圖像來避免不平衡的布局。

同樣，這個設計使用三列網格和集中的圖形來保持設計的對稱性和完美平衡。即使設計是相當強大的，可以很容易地被認為是壓倒性的，因為整齊排列和完美平衡的網格，使其設計保持冷靜，而不是混亂。

06.提高多頁布局的內聚性

網格是多頁布局的可取之處。通過為你的版面布局建立一個強大的網格，這個網格將從一個頁面轉移到另一個頁面、使你在整體版面布局中更容易保持內聚性。

想想一個像滾石這樣的網站，它有很多不同的頁面，每個頁面都有不同的結構和內容組成。如何使每一個頁面都能以最好的方式展示，同時始終保持一個連貫一致的布局?

看看下面的圖片，將滾石樂隊的音樂頁面與他們的首頁進行比較。通過在網站設計中使用一個四欄的網格結構，每個頁面看起來都很有凝聚力、乾淨和熟悉。

在多頁布局中，網格的常見用途是手冊設計，例如樣本設計指南。由於這些是用於教育目的的手冊，它們應該是線性設計的，所以這意味著使用一個網格系統!以下是博斯普魯斯海峽風格指南，並注意到它在網格上的一致使用。

07.網格將增強你的視覺層次

基於網格設計的一個常見假設是，使用網格意味著將設計的每個元素劃分成大小相等的塊，幾乎完全覆蓋。

我們都知道層次結構對於設計的重要性(如果你不這樣做的話，一定要按下面列出的理由來解釋為什麼每個設計都應該至少有三個層次的層次)，而網格可以幫助你加快層次結構的進程，並使它變得更容易。

首先，讓我們看看web設計。網站設計中使用了一個強大的四列網格，通過將更重要的圖像橫跨多個列或行來傳達層次結構。請注意引導故事「萬聖節天空包括死彗星飛越」跨越兩列和兩排，使其成為網站設計中最引人注目的部分。其他重要的故事也在多個欄目上展開，也引起了人們的關注。

通過使用網格為你的設計提供基礎，你可以通過將其擴展到多個列來吸引對某些元素的關注。下面這個例子通過使用規模和網格對齊，將注意力吸引到23和30這樣的點上。

08.告別混亂的版面布局

網格是擺脫可怕的、混亂的效果設計的一個奇妙的工具，特別這不是你想要的效果，通過使用邊距來做到這一點。

按照非常基本的定義，邊距是設計周圍的空間。一般來說，你的邊距越小，你的設計看起來更緊張和更雜亂，你的邊距越大，你的設計就越乾淨整潔。

看看下面的圖表，邊緣用深灰色標記。

因此，通過使用網格，你通常也會使用邊距，這將有助於保持你的設計更加開放和乾淨。

使用網格的另一種方式有助於避免混亂，是通過鼓勵使用網格和列之間的空格。因為這些都是可調的，但應保持一致的大小，以保持網格的功能。

讓我們來看看採用這兩種網格功能的設計，以獲得有效的結果。

09.向更討人喜歡的設計靠近

許多設計師(以及藝術家、攝影師等)使用網格作為他們作品的基礎的主要原因之一是，它被認為有助於引導你走向一個更令人滿意的設計。讓我解釋一下：

有幾種方法可以讓你的設計更討人喜歡，最常見(也是最容易)使用的方法之一就是「三分法則」。你可能聽說過這個規則與攝影,但這個理論的基礎是, 通過將你的設計劃分為一系列甚至是水平和垂直的線條，無論那些線條相交（在下面用圓圈標記），都被認為是焦點，在焦點上設置你的設計元素。

正如前面提到的，這一理論在potography中也被大量使用，以至於許多攝影師會故意將照片框起來，使焦點人物等物體放在這些點上。

10.你可以打破網格以獲得額外的影響

堅信你新做好的網格是一個乾淨的、有組織的、美觀的設計，但是偶爾和故意打破這個網格，將給這個乾淨的網格布局的設計一個獨特的、引人注目的效果。

用簡單的、整齊的三列網格來檢查這個擴展設計，但是在整個擴展和關閉頁面的時候，以對角線的方式，打破了這種整潔的線性。這種對既定網格的漠視，創造了一個令人難忘的、有效的設計，而真正的設計就是「以不同的方式思考」。

通過打破網格，你也可以把注意力集中到某些元素上。看看這個網站設計，它把東西整齊地對齊到網格和少數例外，通過將設計的一些部分從網格中突出出來，打破設計的垂直線條，眼睛就會被這些元素所吸引。

11.網格非常靈活

擔心網格不適合你的設計?不要害怕，因為所有的網格都是高度功能性和靈活的東西，可以適應你不斷變化的設計。

在創建網格時，你可以選擇儘可能多的列，這就是網格的靈活性。看下面的圖，它演示了一個列網格與兩個或三個列網格的不同之處。

當然，根據設計者和設計的需要，網格通常可以達到13列。例如，下面的擴展使用一個完整的頁面圖像和非常簡單的文本，使一個列網格系統使用完美。

鑒於「設計外科」的這種布局設計，即在每一頁上使用十三列，因為文章一般都比較長，而且有一些圖片需要在不同的點上插入。

在設計時要記住，列的數量完全取決於你，但是越多，你的設計就越靈活，而且越少，它就越簡單和越不靈活。

12.網格可以幫助你實現對角線效果

如果你想從一個不同的角度(從字面意義上看)來接近你的設計，網格也會覆蓋在那裡。網格可以像在水平方向或垂直軸上一樣有效地在對角線上發揮作用。

看看這個海報設計，通過將文字和圖形沿著對角線網格布局，創造出一種適當的現代和時尚的效果。

對角網格也能使很多圖像布局產生奇效。看看這個設計，以及它如何使用對角線構造的框架來鑲嵌圖像。

值得注意的是，這個設計顯然使用了水平/垂直網格和對角線網格，以使版面保持完美的對齊和整潔有序。

13.它們可以在任何地方使用

儘管網格在雜誌和編輯布局中是最常見的例子，但並不是網格可以應用的唯一媒介。事實上，它們可以用於任何設計的媒介。

許多著名的徽標都是在網格系統上構建的，比如下面的標識。正如你所看到的，通過使用網格來構建徽標，每個字母都保持一致、清潔和獨立，從而產生標誌性徽標。

網格也可以在整個插圖中使用，看看這個令人驚嘆的文學都市的插圖，並注意到每個角度是多麼的乾淨和尖銳，這就說明了這個插圖是用一個對角網格的表面來創建的。

所以，無論你的介質是什麼，網格都是非常方便的。雖然它們不一定適合每個樣式和每個設計，但它們對很多人來說肯定是有用的，所以考慮你在下一個項目中應用網格設計。

14.網格可以鼓勵白色空間

你是否正在鑽研那些空間顏色太重的設計？網格也可以幫助你。

當你將設計分成所需數量的列時，請放置必要的元素，但保留一些行和列為空，留下空白處填充。

看看這個布局，網格根本不填充的區域使用了大量的空白，這導致了一個時尚、開放和複雜的設計，以及一個功能最小的布局，幾乎沒有混亂或不必要的元素。

這個海報設計中也有類似的功能。通過僅將文字和圖像與中心列對齊，並將外部列留空，設計師創建了一個精美均衡，集中且視覺效果好的海報設計。

15.你的觀眾會感謝你

網格可以通過鼓勵更容易閱讀版面來幫助你。你看，對於文本的線條長度來說，眼睛是非常挑剔的。如果線條太長，就會變得越來越難，如果線條太短，它們看起來太破碎了，讓我們沉浸其中。一般來說，文本的金線長度是每行最少六個字，每行約50-65個字元（包括空格）的粗略平均值。

通過在文本繁重的布局上使用網格，甚至創建文本的列變得更容易和更快速。而且通過專欄，把握住文本長度。

這就是為什麼報紙嚴重依賴網格布局的原因之一，它幫助編輯們構建更快、更容易的文欄位，使其內容更加易讀。

無論你是否善用還是不善用網格，毫無疑問，它們真的可以如此多的幫助你設計，網格的使用可以追溯到13世紀並不奇怪。

網格有很多用途，從幫助對齊和平衡你的設計，到幫助你實現對角線排版出酷酷的效果。它們實際上不僅僅是頁面上的一些線條，而是以一種可幫助你實現預期的最終結果的方式來構造、指導和塑造你的設計。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！