四種類型的布局網(wǎng)格

列、模塊、間隔和邊界可以以不同的方式組合以形成不同類型的網(wǎng)格。以下是四個(gè)標(biāo)準(zhǔn)布局網(wǎng)格： 手稿網(wǎng)格、 列網(wǎng)格、 模塊化網(wǎng)格、基線網(wǎng)格。

手稿網(wǎng)格 (Manuscript Grid)

手稿網(wǎng)格 （或通常稱為單列網(wǎng)格）是最簡單的網(wǎng)格結(jié)構(gòu)。它實(shí)際上是一個(gè)大的矩形區(qū)域，占據(jù)了格式內(nèi)的大部分空間。手稿網(wǎng)格適用于連續(xù)的文本塊。但是它們不僅限于文字；圖像可用于填充塊。 有了這個(gè)名字，人們自然會將手稿網(wǎng)格與印刷頁面相關(guān)聯(lián)。手稿網(wǎng)格傳統(tǒng)上用于書籍中，是呈現(xiàn)連續(xù)文本塊的良好布局。

多列網(wǎng)格

顧名思義，多列網(wǎng)格有幾列。請記住以下簡單規(guī)則：創(chuàng)建的列越多，網(wǎng)格就越靈活。 列網(wǎng)格對于包含不連續(xù)信息的布局很有用。當(dāng)您使用多列網(wǎng)格時(shí)，可以為不同類型的內(nèi)容創(chuàng)建區(qū)域，例如可以將特定的列僅用于說明。

模塊化網(wǎng)格

雖然多列網(wǎng)格將頁面垂直地分為多列，但模塊化網(wǎng)格將頁面垂直和水平地分為模塊。列和行以及它們之間的間隔創(chuàng)建了單元或模塊的矩陣。

當(dāng)您需要對復(fù)雜布局進(jìn)行更多控制而不是列網(wǎng)格可以提供的功能時(shí)，模塊化網(wǎng)格將非常有用。模塊化網(wǎng)格為頁面提供了靈活的格式，并允許您創(chuàng)建復(fù)雜的層次結(jié)構(gòu)。網(wǎng)格中的每個(gè)模塊可以包含一小部分信息，或者可以將相鄰的模塊組合起來以形成塊。

基線網(wǎng)格

基線網(wǎng)格是指導(dǎo)設(shè)計(jì)中垂直間距的基礎(chǔ)結(jié)構(gòu)。它主要用于水平對齊和層次結(jié)構(gòu)。類似于在設(shè)計(jì)中使用列和模塊作為指導(dǎo)的方式，可以使用基線網(wǎng)格在布局中建立一致性。使用這種類型的網(wǎng)格類似于在紙上書寫-網(wǎng)格可確保每行文本的底部（其基線）與垂直間距對齊。這使基線網(wǎng)格不僅是一種出色的印刷工具，而且在您將頁面上的元素進(jìn)行布局時(shí)也非常有用，因?yàn)槟梢钥焖贆z查頁面上的某些內(nèi)容是否缺少一行空格。

UI設(shè)計(jì)中的布局網(wǎng)格

UI設(shè)計(jì)改變了我們對網(wǎng)格的思考方式。UI設(shè)計(jì)是不穩(wěn)定的，并且沒有固定的尺寸，因?yàn)槿藗兪褂脧闹悄苁直淼男∑聊坏匠瑢掚娨暺聊坏炔煌愋偷脑O(shè)備與產(chǎn)品進(jìn)行交互。使用產(chǎn)品時(shí)，人們經(jīng)常在多個(gè)設(shè)備之間移動以完成該產(chǎn)品的單個(gè)任務(wù)。盡管屏幕很大，設(shè)計(jì)人員仍必須以最直觀和易于遵循的方式組織內(nèi)容。實(shí)現(xiàn)此目的的一種方法是使用布局網(wǎng)格系統(tǒng)。對于UI設(shè)計(jì)而言，布局網(wǎng)格更可取，因?yàn)樗x了設(shè)計(jì)的基礎(chǔ)結(jié)構(gòu)以及每個(gè)組件如何響應(yīng)不同的斷點(diǎn)。這種類型的網(wǎng)格更快，更容易為多個(gè)屏幕和分辨率設(shè)計(jì)。

產(chǎn)品設(shè)計(jì)中的網(wǎng)格系統(tǒng)組織頁面上的元素并連接空間。網(wǎng)格系統(tǒng)通過幾種方式提高了設(shè)計(jì)的質(zhì)量（在功能上和美學(xué)上）和設(shè)計(jì)過程的效率：

創(chuàng)建清晰度和一致性

網(wǎng)格是設(shè)計(jì)中秩序的基礎(chǔ)。比例、節(jié)奏、空白和層次結(jié)構(gòu)都是直接影響認(rèn)知速度的設(shè)計(jì)特征。網(wǎng)格在整個(gè)界面中創(chuàng)建并建立這些元素的一致性。有效的網(wǎng)格可以引導(dǎo)視覺，使掃描屏幕上的對象變得更加輕松愉快。這在數(shù)字產(chǎn)品中尤其重要，因?yàn)樗鼈兙哂泄δ苄裕@意味著人們可以使用這些產(chǎn)品來完成特定的任務(wù)，例如發(fā)送消息，預(yù)訂酒店房間或乘車兜風(fēng)。一致性有助于用戶了解在哪里可以找到下一條信息或下一步應(yīng)該采取的步驟。

提高設(shè)計(jì)理解力

人腦在不到一秒鐘的時(shí)間內(nèi)做出判斷。如果設(shè)計(jì)不當(dāng)，將使產(chǎn)品顯得不那么實(shí)用和可信賴。網(wǎng)格通過提供一組規(guī)則（例如元素應(yīng)放在布局中的位置）來連接并加強(qiáng)設(shè)計(jì)的視覺層次。

響應(yīng)式

響應(yīng)式設(shè)計(jì)不再是一種奢侈，而是必不可少的，因?yàn)槿藗兛梢栽诰哂卸喾N屏幕的設(shè)備上體驗(yàn)應(yīng)用程序和網(wǎng)站。這意味著設(shè)計(jì)人員無法再為單個(gè)設(shè)備的屏幕構(gòu)建屏幕。多設(shè)備環(huán)境迫使設(shè)計(jì)人員考慮動態(tài)網(wǎng)格系統(tǒng)，而不是固定寬度。使用網(wǎng)格可在具有不同屏幕尺寸的多個(gè)設(shè)備上創(chuàng)建一致的體驗(yàn)。

加快設(shè)計(jì)過程

網(wǎng)格使設(shè)計(jì)人員能夠管理UI元素之間的比例，例如間距和邊距。這有助于從一開始就創(chuàng)建像素完美的設(shè)計(jì)，避免由于不正確的調(diào)整而導(dǎo)致的及時(shí)返工。

使設(shè)計(jì)更易于修改和重復(fù)使用

與印刷產(chǎn)品不同，數(shù)字產(chǎn)品永遠(yuǎn)都不會完工，而是不斷變化和發(fā)展。網(wǎng)格提供了堅(jiān)實(shí)的基礎(chǔ)，因?yàn)楫?dāng)一切都符合網(wǎng)格時(shí)，可以輕松地重用以前的解決方案來創(chuàng)建新版本的設(shè)計(jì)。

促進(jìn)合作

網(wǎng)格通過提供元素放置位置的計(jì)劃，使設(shè)計(jì)師更容易進(jìn)行設(shè)計(jì)協(xié)作。網(wǎng)格系統(tǒng)有助于使界面設(shè)計(jì)的工作拆解，因?yàn)槎鄠€(gè)設(shè)計(jì)師可以在布局的不同部分上工作，因?yàn)樗麄冎浪麄兊墓ぷ鲗⒈粺o縫集成和保持一致。

布局網(wǎng)格的最佳做法

雖然布局網(wǎng)格可以幫助設(shè)計(jì)師在設(shè)計(jì)中獲得一致，有條理的外觀，并管理元素之間的關(guān)系和比例，但是在使用網(wǎng)格進(jìn)行設(shè)計(jì)時(shí)，需要牢記許多注意事項(xiàng)。

許多流行的框架使用12個(gè)等寬列的網(wǎng)格系統(tǒng)。在相當(dāng)小的數(shù)字中，數(shù)字12最容易被整除?？赡軙?2、6、4、3、2或1列均勻間隔的列。這為設(shè)計(jì)人員提供了極大的布局靈活性。

盡管12列網(wǎng)格是許多設(shè)計(jì)人員的首選，但它并不是一種千篇一律的解決方案。選擇網(wǎng)格時(shí)，請選擇一個(gè)具有您設(shè)計(jì)所需的列數(shù)的網(wǎng)格。如果您的布局僅需要8列，則沒有必要使用12列網(wǎng)格

您如何知道要使用多少列？在確定列數(shù)之前，請勾勒出可能的布局（可以使用紙質(zhì)草圖）。這意味著您需要知道屏幕上將顯示哪些內(nèi)容。內(nèi)容將定義網(wǎng)格，而不是相反。有了草圖，您將更好地了解所需的列數(shù)。

考慮限制

設(shè)計(jì)網(wǎng)格時(shí)，請考慮設(shè)計(jì)上的限制。例如，您的大多數(shù)用戶可能正在使用特定類型的設(shè)備（例如電話）。這意味著所有設(shè)計(jì)決策（包括網(wǎng)格）都需要考慮此約束。學(xué)會在約束條件下進(jìn)行設(shè)計(jì)是一項(xiàng)技能，可幫助您專注于對用戶真正重要的事情。

強(qiáng)調(diào)重要對象

通過增加重要的視覺效果，將用戶的注意力吸引到重要元素上。提示：跨多列的項(xiàng)目在視覺上比僅填充一列的項(xiàng)目更重要。

不要害怕跨出網(wǎng)格

網(wǎng)格列是每個(gè)內(nèi)容塊應(yīng)在其開始和結(jié)束的位置，此規(guī)則簡單易。但，設(shè)計(jì)人員經(jīng)常故意打破網(wǎng)格列以增加視覺趣味或強(qiáng)調(diào)某些元素。通過將元素打破網(wǎng)格，您將突出顯示它們，因?yàn)椴榭凑邔⒑芸炜吹竭@些突破并被其吸引。

注意水平和垂直間距

布置網(wǎng)格需要注意水平和垂直節(jié)奏，這同樣重要?？紤]以下示例之間的區(qū)別。在第一個(gè)示例中，網(wǎng)格與列寬和水平間距一致，但是變化的垂直間距會產(chǎn)生視覺噪聲。在第二個(gè)示例中，水平間距（即內(nèi)容塊之間的空間）和垂直間距（列之間）都是一致的，這使整個(gè)結(jié)構(gòu)更整潔，內(nèi)容在視覺上也更易于使用。

使用基線網(wǎng)格來對齊元素

如前所述，基線網(wǎng)格可用于水平對齊和層次結(jié)構(gòu)。將UI設(shè)計(jì)元素（文本、圖像和內(nèi)容容器）與基線對齊意味著您需要將其高度設(shè)置為基線值的倍數(shù)。例如，如果您選擇8像素作為基線值并想要對齊文本，則需要使字體的行高為基線值的倍數(shù)，這意味著行高可以為8、16、24， 32，等等。請注意，字體大小不必是基線的倍數(shù)，而只需是行高。

總結(jié)

到目前為止，您應(yīng)該對網(wǎng)格系統(tǒng)是什么以及如何將其應(yīng)用于您的設(shè)計(jì)過程有很好的了解，了解網(wǎng)格的使用將來自實(shí)踐經(jīng)驗(yàn)。 用Josef Muller-Brockmann的話說：“網(wǎng)格系統(tǒng)是輔助，而不是保證，它允許多種可能的用途，并且每個(gè)設(shè)計(jì)師都可以尋找適合其個(gè)人風(fēng)格的解決方案。但是必須學(xué)習(xí)如何使用網(wǎng)格。這是一門需要實(shí)踐的藝術(shù)?！?/p>