網格系統(tǒng)已在印刷出版物中使用了很長時間。就比如閱讀報紙，了解新聞如何以網格和文本塊的形式呈現(xiàn)。這很簡單，同時也很難系統(tǒng)。

但是，網格在印刷品中與在數字媒體中一樣重要。沒有什么比設計不一致更令人沮喪的了。它看起來不僅不專業(yè)，而且還使導航和閱讀變得更加困難。這就是網格有用的地方。

不可否認，良好設計的秘訣在于視覺元素如何根據它們的位置進行組織和排列。您可以使用布局網格來實現(xiàn)這一點。

與顏色一樣，排版也是UI/UX 設計的重要組成部分。布局網格也是其中的重要組成部分。如果沒有網格，您的文本和圖像將會無處安放，造成混亂。

因此，為了讓您更容易理解，我們整理了這份關于網格的指南。它會告訴你：

A. 什么是網格？

B. 布局網格的類型

C. 交互設計中的布局網格

什么是網格系統(tǒng)？

網格系統(tǒng)，說的在簡單的話，就是彼此交叉的垂直和水平線的組合。然后使用這些交點來安排網站或應用程序上的內容。網格系統(tǒng)允許設計人員以易于理解和更易于管理的方式排列內容。

網格充當元素之間的無形粘合劑。即使它們在物理上分開，它也會將它們保持在原位。

布局網格有哪些類型？

有四種類型的網格：

a. 手稿網格

b. 列網格

c. 模塊化網格

d. 基線網格

讓我們探索其中的每一個，以了解您可以在哪里使用它們。

手稿網格

手稿網格，也稱為單列網格，是網格結構的最基本版本。它是一個大的矩形區(qū)域，占據頁面或格式內的大部分空間。

這些網格對于顯示連續(xù)的文本塊很有用，或者您可以使用圖像來填充塊。它們通常用于印刷出版物，例如書籍。

列網格

列網格，顧名思義，將元素組織成列。根據配置，列網格可能只有兩列或最多六列。

有兩種類型的柱形網格，對稱和非對稱。

列網格中的圖像可以放置在一列或跨兩列。

雜志、研究或學術論文、在線報紙較多使用列網格。

模塊化網格

模塊化網格既有列又有行。它們具有相同大小的模塊。當您想要對復雜布局進行更多控制時，這些類型的網格非常有用。

報紙使用模塊化網格和列網格來更好地控制布局。使用模塊化網格，無限變化是可能的。

基線網格

文本所在的行稱為基線。基線網格可以應用于任何布局網格，為您的文本提供節(jié)奏。

網格確保每行文本（基線）的底部與垂直間距對齊。

基線網格可見于橫線筆記本中。他們保持文本的節(jié)奏。

交互設計中的布局網格及其好處

交互式設計沒有固定的大小。這背后的原因是人們使用不同屏幕尺寸的設備，例如智能手機、智能手表、平板電腦和臺式機。

因此，當人們從一臺設備移動到另一臺設備時，需要重新組織元素以適應不斷變化的屏幕尺寸。要完成這些更改，布局網格是最佳選擇。

網格系統(tǒng)以多種方式提高設計質量，包括：

它有助于創(chuàng)建清晰度和一致性

一致性至關重要，尤其是對于數字媒體。它可以幫助用戶理解在哪里尋找一條信息。網格為一致性奠定了基礎，從而間接提高了清晰度。

使設計具有響應性

響應式設計已成為當今的必需品。如果您的網站沒有響應并且對桌面和移動設備不友好，您的用戶就會遠離。因此，設計師使用網格來創(chuàng)建跨多個屏幕尺寸的設計一致性。

使設計更易于修改

數字媒體在不斷發(fā)展。數字媒體的主要優(yōu)勢之一是只要創(chuàng)建，就可以重復使用。網格設計也是如此。您可以重新排列這些網格以創(chuàng)建新版本的設計。

常見問題

哪種網格系統(tǒng)最好？

網格的應用取決于格式。例如，手稿網格適用于書籍，但不適用于報紙或雜志。

關鍵要點

自 13 世紀首次使用網格以來，網格一直在幫助各種藝術家。網格就像一個骨架，將元素固定在一起。它們可以幫助您在設計中找到完美的平衡。

現(xiàn)在您已經很好地了解了布局網格、它們的類型和它們的優(yōu)點，您可以在設計中使用它們。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷  作者：對啊設計君

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。

藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務