?？赵O(shè)計(jì) | 網(wǎng)格設(shè)計(jì)改善版面設(shè)計(jì)的15個(gè)理由

時(shí)間：2023-09-14 06:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-14 06:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

?？赵O(shè)計(jì) | 網(wǎng)格設(shè)計(jì)改善版面設(shè)計(jì)的15個(gè)理由：關(guān)鍵詞：圖形設(shè)計(jì)，創(chuàng)意設(shè)計(jì)，文字排版，版面設(shè)計(jì)，網(wǎng)格設(shè)計(jì)，版式設(shè)計(jì)，排版設(shè)計(jì)，編輯設(shè)計(jì)，海空設(shè)計(jì) ，平面設(shè)計(jì)，設(shè)計(jì)公司




在圖形設(shè)計(jì)師的“工具箱”里，網(wǎng)格被認(rèn)為是基本的要素之一。

為什么這么說(shuō)呢？版面上的一些網(wǎng)格線對(duì)設(shè)計(jì)項(xiàng)目有那么重要嗎？每個(gè)設(shè)計(jì)師都有自己的理由來(lái)解釋網(wǎng)格的重要性，簡(jiǎn)單地說(shuō)，它們可以幫助你把本來(lái)是一種很難、耗時(shí)和麻煩的圖文信息設(shè)計(jì)問題，通過網(wǎng)格構(gòu)造，使你的設(shè)計(jì)實(shí)現(xiàn)有序、整齊、易于導(dǎo)航等功能。

所以，如果你要對(duì)基于網(wǎng)格設(shè)計(jì)的世界進(jìn)行了深入的研究，讓我們來(lái)討論一下為什么簡(jiǎn)單地將網(wǎng)格添加到你的設(shè)計(jì)中，可以顯著改善你的設(shè)計(jì)的15個(gè)理由。

01. 網(wǎng)格使內(nèi)容有條理

網(wǎng)格的主要用途之一是保持設(shè)計(jì)元素對(duì)齊和排序，并且使頁(yè)面設(shè)計(jì)干凈整潔。

這是因?yàn)榫W(wǎng)格有利于實(shí)現(xiàn)對(duì)齊，實(shí)際上這也是它們?cè)谠O(shè)計(jì)中起得最重要的作用。通過建立一個(gè)網(wǎng)格系統(tǒng)，你可以為自己創(chuàng)建一個(gè)結(jié)構(gòu)來(lái)對(duì)齊元素，由此你可以為自己創(chuàng)建一個(gè)整潔、整齊和有組織的版面布局。

例如，看一下這種基于網(wǎng)格的布局，如何整齊排列每個(gè)元素以形成干凈的版面。




在使用網(wǎng)格時(shí)，找到一個(gè)想象可以把元素對(duì)齊的網(wǎng)格，它們可以是文字、圖像、圖形或任何其他元素。先從你想要達(dá)到的目標(biāo)開始，然后建立網(wǎng)格。

02.它會(huì)使你提高工作效率

在一個(gè)我們總是希望更快更好地完成任務(wù)的世界里，“提高效率”這個(gè)詞會(huì)jingc

網(wǎng)格可以大大加快和改進(jìn)你的設(shè)計(jì)時(shí)間，因?yàn)樗鼈兛梢宰鳛橐粋€(gè)向?qū)?，在哪里放置是最好位置以及比例元素。網(wǎng)格應(yīng)該幫助引導(dǎo)你找到一個(gè)自然的解決方案，而不是隨機(jī)地定位元素，直到你找到一個(gè)好看的構(gòu)圖。

“網(wǎng)格通過幫助設(shè)計(jì)師決定內(nèi)容應(yīng)該放置在哪里，從而加快設(shè)計(jì)進(jìn)程?！?br>
把網(wǎng)格想象成房子的基礎(chǔ)，它是你首先要考慮設(shè)計(jì)的問題之一，然后你在這個(gè)基礎(chǔ)上來(lái)創(chuàng)建版面。

03.網(wǎng)格更利于文字的排版

如果沒有其他的元素，網(wǎng)格和文字是兩個(gè)非常愉快地相隨而來(lái)的設(shè)計(jì)元素。一個(gè)強(qiáng)大的網(wǎng)格，可以實(shí)現(xiàn)使文字多的布局看起來(lái)更整潔、更有組織，并有助于增強(qiáng)正文的可讀性。

網(wǎng)格有助于提高文字的易讀性，這是通過所謂的“基線網(wǎng)格”實(shí)現(xiàn)的，它們都是狹窄的橫行線，在設(shè)計(jì)中每一行都在設(shè)計(jì)上，有點(diǎn)像筆記本上的橫線條。這些網(wǎng)格線有利于調(diào)整文本的位置，使它們處在同一水平線上。

否則，雖然很多人可能沒有特別注意到文字是否對(duì)齊，但他們會(huì)下意識(shí)地注意到，設(shè)計(jì)看起來(lái)很凌亂。




下面是一個(gè)基線網(wǎng)格的例子。注意每行是如何完美對(duì)齊的，由此創(chuàng)建一個(gè)干凈整潔的排版效果。

04.有利于與其他設(shè)計(jì)師愉快地合作

你和其他設(shè)計(jì)師合作過嗎？如果是這樣的話，網(wǎng)格的使用可能解決你們溝通不暢導(dǎo)致的壓力和挫折感。

正如前面提到的，網(wǎng)格在許多方面幫助你為設(shè)計(jì)提供一個(gè)底層結(jié)構(gòu)，并提供了一個(gè)向?qū)?，以確定應(yīng)該放置哪些元素。因此，如果設(shè)計(jì)中設(shè)置了一個(gè)堅(jiān)固的網(wǎng)格，并且有一個(gè)新的設(shè)計(jì)人員加入，他們將(希望)能夠看到你是如何設(shè)置的，以及你打算如何定位元素。

舉個(gè)例子，如果你設(shè)計(jì)一個(gè)像下面這樣的設(shè)計(jì)作品，需要另一個(gè)設(shè)計(jì)師把文檔上加進(jìn)去放置在第三列。

由于有了網(wǎng)格系統(tǒng)，不能正確地排列和對(duì)齊的幾率就很小了。此外，關(guān)于諸如“列應(yīng)該有多寬”之類的信息，從上一列的文本中，我應(yīng)該把它放在哪里？因?yàn)樗械拇鸢付家呀?jīng)被網(wǎng)格確定了。

所以，在與其他設(shè)計(jì)師合作時(shí)，要建立一個(gè)適合最終產(chǎn)品、自我解釋的網(wǎng)格系統(tǒng)。

05.平衡設(shè)計(jì)將變得更加容易

網(wǎng)格的美妙之處在于它們是一致的，當(dāng)你將設(shè)計(jì)分成一定數(shù)量的列時(shí)，你將從一個(gè)對(duì)稱的布局開始，很容易就判斷設(shè)計(jì)的哪個(gè)方面是壓倒性的。

請(qǐng)查看下面的網(wǎng)站設(shè)計(jì)，以及如何通過使用銳利對(duì)稱的網(wǎng)格和均勻大小的信息、圖像來(lái)避免不平衡的布局。

同樣地，這個(gè)設(shè)計(jì)使用三列網(wǎng)格和集中的圖形來(lái)保持設(shè)計(jì)的對(duì)稱性和完美平衡。盡管這個(gè)設(shè)計(jì)相當(dāng)強(qiáng)大，而且很容易被認(rèn)為是壓倒性的，但整齊排列和完美平衡的網(wǎng)格使它保持版面干凈清爽，而不是雜亂無(wú)序。

06.提高多頁(yè)布局的內(nèi)聚性

網(wǎng)格適合多頁(yè)布局。通過為版面布局建立一個(gè)強(qiáng)大的網(wǎng)格，這個(gè)網(wǎng)格將從一個(gè)頁(yè)面移到另一個(gè)頁(yè)面、使你在整體版面布局中更容易保持內(nèi)聚性。

想想一個(gè)像滾石公司這樣的網(wǎng)站，它有很多不同的頁(yè)面，每個(gè)頁(yè)面都有不同的結(jié)構(gòu)和內(nèi)容組成。如何使每一個(gè)頁(yè)面都能以最好的方式展示，同時(shí)始終保持一個(gè)連貫一致的布局?

看看下面的圖片，將滾石樂隊(duì)的音樂頁(yè)面與首頁(yè)進(jìn)行比較。通過在網(wǎng)站設(shè)計(jì)中使用一個(gè)四欄的網(wǎng)格結(jié)構(gòu)，每個(gè)頁(yè)面看起來(lái)都很有凝聚力、干凈以及視覺統(tǒng)一性。

在多頁(yè)布局中，網(wǎng)格的常見用途是手冊(cè)設(shè)計(jì)，例如樣式指南手冊(cè)。由于這些手冊(cè)是起到指導(dǎo)教育目的，所以應(yīng)該線性設(shè)計(jì)，這意味著使用一個(gè)網(wǎng)格系統(tǒng)！以下是一本指南手冊(cè)，注意到它在網(wǎng)格上的一致使用。

07.網(wǎng)格將增強(qiáng)視覺層次

基于網(wǎng)格設(shè)計(jì)的一個(gè)常見假設(shè)是，使用網(wǎng)格意味著將設(shè)計(jì)的每個(gè)元素劃分成大小相等的塊，幾乎完全覆蓋在版面上。

我們都知道層次結(jié)構(gòu)對(duì)于設(shè)計(jì)的重要性，而網(wǎng)格可以幫助你加快層次結(jié)構(gòu)的進(jìn)程，并使它變得更容易。

首先，讓我們看看下面的網(wǎng)站設(shè)計(jì)。網(wǎng)站設(shè)計(jì)中使用了一個(gè)強(qiáng)大的四列網(wǎng)格，通過將更重要的圖像橫跨多個(gè)列或行來(lái)創(chuàng)建層次結(jié)構(gòu)。請(qǐng)注意左上角引導(dǎo)故事的圖片占了兩列和兩排，使其成為網(wǎng)站設(shè)計(jì)中最引人注目的部分。其他重要的故事也在多個(gè)欄目上展開，也引起了人們的關(guān)注。

通過使用網(wǎng)格為設(shè)計(jì)提供基礎(chǔ)，你可以通過將其擴(kuò)展到多個(gè)列來(lái)吸引對(duì)某些元素的關(guān)注。下面這個(gè)例子通過使用比例和網(wǎng)格對(duì)齊，將注意力吸引到23號(hào)和30號(hào)這樣的點(diǎn)上。

08.遠(yuǎn)離混亂的版面布局

網(wǎng)格是擺脫可怕的、混亂的設(shè)計(jì)效果的一個(gè)奇妙的工具，通過使用邊距來(lái)做到這一點(diǎn)。

按照非?；镜亩x，邊距是設(shè)計(jì)周圍的空間。一般來(lái)說(shuō)，邊距越小，設(shè)計(jì)看起來(lái)越局促、越雜亂；邊距越大，設(shè)計(jì)就越干凈整潔。

看看下面的圖表，邊緣用深灰色標(biāo)記。

因此，通過使用網(wǎng)格，你通常也會(huì)使用邊距，這將有助于保持設(shè)計(jì)更加開放和干凈。

使用網(wǎng)格的另一種方式有助于避免混亂，可以通過使用網(wǎng)格和列之間的空格實(shí)現(xiàn)，因?yàn)檫@些都是可調(diào)的，為保持網(wǎng)格的功能性，網(wǎng)格要注意應(yīng)保持一致的大小。

讓我們來(lái)看看采用這兩種網(wǎng)格功能的設(shè)計(jì)，以獲得有效的結(jié)果。

09.向更討喜的設(shè)計(jì)靠近

許多設(shè)計(jì)師（以及藝術(shù)家、攝影師等）使用網(wǎng)格作為他們作品的基礎(chǔ)的主要原因之一是，網(wǎng)格被認(rèn)為有助于引導(dǎo)你走向一個(gè)更令人滿意的設(shè)計(jì)。請(qǐng)讓我解釋一下：

有幾種方法可以讓設(shè)計(jì)更討人喜歡，最常見（也是最容易）使用的方法之一就是“三分法則”。你可能在攝影上聽說(shuō)過這個(gè)理論，它的基礎(chǔ)是，通過將設(shè)計(jì)劃分為一系列水平、垂直的線條，那些線條相交的地方（在下面用圓圈標(biāo)記），被認(rèn)為是焦點(diǎn)，在焦點(diǎn)上設(shè)置設(shè)計(jì)元素。







正如前面提到的，這一理論在photography中也被大量使用，以至于許多攝影師會(huì)故意將照片框起來(lái)，使焦點(diǎn)人物等物體放在這些點(diǎn)上。

10.你可以打破網(wǎng)格以獲得額外的影響

堅(jiān)信你新做好的網(wǎng)格是一個(gè)干凈的、有組織的、美觀的設(shè)計(jì)，但是故意打破這個(gè)網(wǎng)格，將給這個(gè)干凈的網(wǎng)格布局一個(gè)獨(dú)特的、引人注目的效果。

下圖是簡(jiǎn)單的、整齊的三列網(wǎng)格設(shè)計(jì)，但是黃色粗體字以對(duì)角線的方式，打破了這種整潔的網(wǎng)格版面。這種對(duì)既定網(wǎng)格的漠視，創(chuàng)造了一個(gè)令人難忘的、有效的設(shè)計(jì)，而真正的設(shè)計(jì)就是“以不同的方式思考”。

通過打破網(wǎng)格，你也可以把注意力集中到某些元素上?？纯催@個(gè)網(wǎng)站設(shè)計(jì)，只有少數(shù)元素例外，大多數(shù)元素與網(wǎng)格保持一致。通過將設(shè)計(jì)的一些部分從網(wǎng)格中突出出來(lái)，打破設(shè)計(jì)中強(qiáng)烈的垂直線條，眼睛就會(huì)被這些元素所吸引。

11.網(wǎng)格具有高度靈活性

擔(dān)心網(wǎng)格不適合你的設(shè)計(jì)？不必多慮，因?yàn)樗械木W(wǎng)格都具有高度功能性、高度靈活性，可以適應(yīng)你不斷變化的設(shè)計(jì)。

在創(chuàng)建網(wǎng)格時(shí)，你可以選擇盡可能多的列，這就是網(wǎng)格的靈活性?？聪旅娴膱D，它演示了一列網(wǎng)格與兩、三列網(wǎng)格的不同之處。

當(dāng)然，根據(jù)設(shè)計(jì)的需要，網(wǎng)格通?？梢赃_(dá)到13列。例如下圖，使用一個(gè)完整的頁(yè)面圖像和非常簡(jiǎn)單的文本，使一個(gè)列的網(wǎng)格系統(tǒng)也非常完美。

下面的版面布局，在每一頁(yè)上使用十三列，因?yàn)槲恼乱话惚容^長(zhǎng)，而且有一些圖片需要在不同的點(diǎn)上插入。

在設(shè)計(jì)時(shí)要記住，列的數(shù)量完全取決于你，但是列越多，設(shè)計(jì)就越靈活；列越少，越不靈活。

12.網(wǎng)格可以幫助你實(shí)現(xiàn)對(duì)角線效果

如果你想把網(wǎng)格以一個(gè)不同的角度（從字面意義上看）應(yīng)用于設(shè)計(jì)，就像水平方向或垂直軸上的網(wǎng)格一樣，可以采用對(duì)角線的方式有效地發(fā)揮網(wǎng)格作用。

看看下面海報(bào)設(shè)計(jì)，通過將文字和圖形沿著對(duì)角線網(wǎng)格布局，創(chuàng)造出一種現(xiàn)代、時(shí)尚的外觀。

對(duì)角網(wǎng)格也能使很多圖像布局產(chǎn)生奇效。看看下面設(shè)計(jì)，它如何使用對(duì)角線構(gòu)造的框架來(lái)放置圖像。

值得注意的是，這個(gè)設(shè)計(jì)顯然使用了水平/垂直網(wǎng)格以及對(duì)角線網(wǎng)格，以使版面保持完美的對(duì)齊和整潔有序。

13.應(yīng)用于標(biāo)志和插圖設(shè)計(jì)中

盡管網(wǎng)格在雜志和編輯布局中是最常見，但并不是網(wǎng)格可以應(yīng)用的唯一媒介。事實(shí)上，它們可以用于任何媒介。

許多著名的標(biāo)志都是在網(wǎng)格系統(tǒng)上構(gòu)建的，比如下面的標(biāo)識(shí)。正如你所看到的，通過使用網(wǎng)格來(lái)構(gòu)建標(biāo)志，每個(gè)字母都保持一致、清潔和獨(dú)立，從而創(chuàng)建出標(biāo)志性徽標(biāo)。

網(wǎng)格也可以在整個(gè)插圖中使用，看看這個(gè)令人驚嘆的文學(xué)都市的插圖，它是用一個(gè)對(duì)角網(wǎng)格來(lái)創(chuàng)建的版面，每個(gè)角度是多么的干凈和尖銳。




所以，無(wú)論你應(yīng)用到哪里，網(wǎng)格都是非常方便的。雖然它們不一定適合每個(gè)樣式和每個(gè)設(shè)計(jì)，但它們對(duì)很多人來(lái)說(shuō)肯定是有用的，所以考慮你在下一個(gè)項(xiàng)目中應(yīng)用網(wǎng)格設(shè)計(jì)方式。

14.網(wǎng)格有利于創(chuàng)建空白空間

你是否正在鉆研那些空間顏色太重的設(shè)計(jì)？網(wǎng)格也可以幫助你。

當(dāng)你將設(shè)計(jì)分成所需數(shù)量的列時(shí)，請(qǐng)放置必要的元素，但保留一些行和列為空白空間。

看看這個(gè)版面布局，網(wǎng)格不填充的區(qū)域形成了大量的空白空間，一個(gè)時(shí)尚、開放和復(fù)雜的設(shè)計(jì)，一個(gè)功能最小的布局，幾乎沒有混亂或不必要的元素的設(shè)計(jì)。

下面海報(bào)設(shè)計(jì)中也有類似的功能性。通過僅將文字和圖像與中心列對(duì)齊，并將外部列留出大面積空白空間，設(shè)計(jì)師創(chuàng)建了一個(gè)精美均衡、集中且視覺效果好的海報(bào)設(shè)計(jì)。

15.創(chuàng)建更易讀版面

網(wǎng)格可以創(chuàng)建更易讀版面。你看，對(duì)于文本的線條長(zhǎng)度來(lái)說(shuō)，眼睛是非常挑剔的。如果線條太長(zhǎng)，閱讀就會(huì)變得越來(lái)越難；如果線條太短，版面看起來(lái)零碎。一般來(lái)說(shuō)，文本最好的長(zhǎng)度是每行最少六個(gè)字，每行約50-65個(gè)字符（包括空格）的粗略平均值。

通過在文本繁重的布局上使用網(wǎng)格，甚至創(chuàng)建文本列變得更容易和更快速。而且通過專欄列，你對(duì)文本的長(zhǎng)度更易把控。

這就是為什么報(bào)紙嚴(yán)重依賴網(wǎng)格布局的原因之一，它幫助編輯們構(gòu)建更快、更容易的文字專欄，使其內(nèi)容更易于理解和閱讀。

無(wú)論你是否善用還是不善用網(wǎng)格，毫無(wú)疑問，它們真的可以如此多地幫助你，開始應(yīng)用網(wǎng)格時(shí)間可以追溯到13世紀(jì)，這一點(diǎn)就不為怪了。

網(wǎng)格有很多用途，從對(duì)齊和平衡設(shè)計(jì)，到酷酷的對(duì)角線排版效果。它們實(shí)際上不僅僅是頁(yè)面上的一些線條，而是以一種可幫助你實(shí)現(xiàn)預(yù)期的最終結(jié)果的方式來(lái)構(gòu)建、指導(dǎo)和塑造你的設(shè)計(jì)。




本文由?？赵O(shè)計(jì)翻譯整理，如需商業(yè)轉(zhuǎn)載請(qǐng)說(shuō)明出處（海空設(shè)計(jì)）或者聯(lián)系作者（微信ID:haikongsheji，或者搜手機(jī)號(hào)：13020068305）