如何運用網格構建優秀的UI設計

＊本文由拓道UED原創翻譯，請尊重版權和譯者成果，轉摘請附上拓道UED鏈接。

所有類型的設計人員都不斷面臨設計結構方面的問題。運用網格系統是控制布局結構並實現一致和有組織的設計的最簡單方法之一。

網格就像無形的膠水一樣凝聚一個設計。即使元素看上去是彼此分離，但某些不可見的東西將它們連接在一起。

雖然網格和布局系統是傳統設計方法中的一部分，但它們仍然與我們生活的這個多屏世界相關。技術設備從根本上改變了我們搜索信息的方式以及我們日常的生活方式。今天，90％的媒體互動都是基於屏幕的，通過手機，平板電腦，筆記本電腦，電視和智能手錶來觀看。多屏幕行為正迅速成為常態，多屏設計已成為商業設計中不可或缺的一部分。作為設計師，我們希望為使用我們產品的人們提供令人愉快的體驗 - 網格可以幫助我們做到這一點。

網格通過將不同的設計元素結合在一起來幫助設計人員構建更好的產品，從而實現有效的層次結構，位置和一致性，而不費吹灰之力。如果執行得當，你的設計會顯得周到和有組織。

在這篇文章中，我彙集了很多關於網格的信息，例如：

• 什麼是網格？
• 網格的簡史
• 網格的基礎理論
• 四種不同的網格布局
• 網格布局在交互設計中的應用

什麼是網格？

在最基本的術語中，網格是由一系列線條（垂直或相交）組成的結構，它們將頁面分為若干列或模塊。 這種結構可幫助設計人員在頁面上安排內容。 雖然網格線本身不一定可見（儘管它們在某些設計中是可見的），但該結構可幫助您管理要在頁面上對齊的元素之間的比例。 這個網格將作為頁面布局的框架。 把它看作是一個組織圖形元素（例如，文本部分，圖像和其他功能或裝飾元素）的框架，設計師在這個框架下可以用一種便捷的方式掌握內容結構。

網格系統起源於印刷設計，但已應用於許多學科。 事實上，如果我們環顧四周，我們會看到我們每天使用的很多東西都是使用網格設計的：

網格的簡史

在我們深入了解布局網格的細節以及它們如何應用於數字產品之前，重要的是退後一步並觀察過去以了解基礎知識。 這些知識將幫助我們更好地設計數字化產品體驗。 要詳細了解網格的歷史背景，請務必查看Lucienne Roberts的文章「網格簡史」。

網格以及早期的書籍設計

網格與排版密切相關。 作為一個系統，網格首先用於在紙上編排手寫內容，然後應用於手稿布局。 自書籍設計初期，網格已幫助設計師安排頁面布局，以幫助用戶進行閱讀。

文藝復興時期以及設計的平衡

文藝復興時期的繪畫對網格系統的發展產生了重大影響。 藝術家們努力創造出一種完美的幾何形狀，從而形成了居中對稱的畫布布局，並體現了當時藝術家的作品特徵。

在13世紀，法國建築師Villard de Honnecourt創作了一個圖表，試圖實現「設計的平衡」。 該圖將網格系統與黃金比率合併，以便根據固定比率生成具有頁邊空白的頁面布局。 這項技術至今仍在使用，大多數印刷書籍和雜誌的設計人員使用Villard de Honnecourt的圖表來創造平衡的設計。

網格與印刷設計

從印刷開始（15世紀中葉）直到工業革命（18世紀後期），書籍是印刷的主要產物。 除極少數例外情況外，類型通常設置為每頁對齊一列，並對稱放置在開頁當中。

工業革命以及注意力的爭奪

工業革命標誌著大規模生產的開始。 印刷產品如報紙，海報，傳單和各種廣告的興起，使得對印刷設計人員需求量很大。 設計師必須解決兩個問題：將不同的消息傳達給不同的人群，並符合閱讀的自然行為，同時防止頁面內不同內容區塊對讀者注意力的干擾。

瑞士學院

我們今天所知道的網格與瑞士的版式有關。 在第一次世界大戰期間，保持中立的瑞士成為來自歐洲各地的創意人士的聚會場所。 由於印刷出版物必須使用三種官方語言 - 德語，法語和義大利語 - 設計者需要一個新的網格系統來滿足這一要求。 像Jan Tschichold和Herbert Bayer這樣的印刷設計師用模塊化方法解決了這個問題。 白色空間首次被用作布局設計中的動態組件，這導致了複雜網格系統的發展。

網格的基礎理論

無論您是在印刷工作還是在網頁和移動設計領域工作，您都需要了解網格理論的基礎知識。

網格的解析

無論簡單還是複雜，所有網格都有一些共同部分：

• 格式

格式是放置設計的區域。 在一本紙質書中，格式就是頁面。 在網路上，格式是瀏覽器窗口的大小。

• 邊距

邊距是格式邊緣與內容外邊緣之間的間隔距離。

• 列和列間距

在其最基本的形式中，網格由兩個主要組成部分組成：列和列間距。列是網格的構建塊。列之間的空間被稱為列間距。 在一起，列和列間距佔據了屏幕的水平寬度。

• 模塊

模塊是從列和行的交集（即列的水平等值）創建的單獨空間單元。

四種類型的布局網格

列，模塊，間距和邊距可以不同的方式組合形成不同類型的網格。 以下是四個標準布局網格：

• 手稿網格
• 多列網格
• 模塊化網格
• 基線網格

讓我們繼續逐個了解，你可能使用的每一網格樣式。

手稿網格

手稿網格（或單行網格，因為它經常被這樣稱呼）是最簡單的網格結構。 它本質上是一個很大的矩形區域，佔據了格式中的大部分空間。 手稿網格適用於連續的文本塊。 但是，它們不限於文本; 圖像可以用來填充塊。

鑒於名稱，人們自然會將手稿網格與列印頁面關聯起來。 手稿網格傳統上用於書本，並且是用於呈現連續文本塊的良好布局。

多列網格

顧名思義，多列網格有數行組成。 記住這個簡單的規則：你創建的列越多，網格變得越靈活。

列網格對於包含不連續信息的布局非常有用。 當您使用多列網格時，可以為不同類型的內容創建區域。 例如，您可以使用特定的列擺放插圖。

模塊化網格

多列網格將頁面垂直分割成若干列時，模塊化網格將頁面垂直和水平分割成模塊。 列和行以及它們之間的間隔創建了一個單元格或模塊矩陣。

當您需要更多控制複雜布局而不是列網格可以提供時，模塊化網格是很好的。 模塊化網格為頁面提供了靈活的格式，並允許您創建複雜的層次結構。 網格中的每個模塊可以包含一小塊信息，或者相鄰的模塊可以組合成塊。

基線網格

基線網格是引導設計中的垂直間距的底層結構。 它主要用於水平對齊和層次結構。 與您在設計中將列和模塊用作指南的方式類似，您可以使用基線網格在布局中建立一致性。 使用這種類型的網格類似於在規則紙上書寫 - 網格確保每行文本的底部（其基線）與垂直間距對齊。 這使得基線網格不僅是一個出色的印刷工具，而且當您在頁面上布置元素時非常有用，因為您可以快速檢查頁面上的某些內容是否缺少一行空格。

網格布局在交互設計中的應用

交互設計改變了我們對網格的思考方式。因為人們使用不同類型的設備與產品進行互動，從智能手錶的小屏幕到超寬屏電視，交互設計是流暢的，並且沒有固定的尺寸。使用產品時，人們通常會在多個設備之間切換，以完成該產品的單個任務。儘管受限於不同屏幕尺寸，設計師還是必須以最直觀和易於遵循的方式組織內容。實現這一點的一種方法是使用布局網格系統。對於互動式設計，布局網格更適合，因為它定義了設計的基礎結構以及每個組件如何響應不同的斷點。這種類型的網格更快，更容易設計多個屏幕和解析度。

數字產品設計中的網格系統在頁面上組織元素並連接空間。網格系統以幾種方式改進了設計的質量（功能方面和美觀度方面）以及設計過程的效率：

• 創造清晰度和一致性

網格是在設計中打造秩序的基礎。比例，節奏，白色空間和層次，這些設計特徵都會直接影響認知速度。網格在整個界面中創建和強化這些元素的連貫性。有效的網格引導眼睛，使屏幕上的對象更容易搜索到。這在數字產品中尤其重要，因為它們是功能性的，這意味著人們使用產品完成特定的任務，例如發送消息，預訂酒店房間或乘車。連貫性有助於觀眾理解在哪裡找到下一條信息或下一步要採取的步驟。

• 提高設計理解力

人腦在幾分之一秒內做出判斷。一個糟糕的設計會使產品看起來不可用和不足以值得信賴。網格通過提供一組規則來連接和加強設計的視覺層次結構，例如元素應該放置在布局中的位置。

• 響應化

響應式設計不再是一種奢侈品，而是一種必需品，因為人們在各種屏幕設備上體驗應用程序和網站。這意味著設計師不能再為單個設備的屏幕構建。多設備環境迫使設計人員根據動態網格系統進行思考，而不是固定寬度。使用網格可以跨不同屏幕尺寸的多個設備創建連貫的體驗。

• 加速設計過程

網格使設計人員能夠管理UI元素之間的比例，例如間距和邊距。這有助於從一開始就創建像素完美的設計，並避免由於不正確調整而導致的返工。

• 使設計更容易修改和重複使用

不像印刷生產，數字產品永遠需要迭代 - 它們不斷變化和發展。網格提供了一個堅實的基礎，因為當所有東西都符合網格時，以前的解決方案可以很容易地重用來創建新版本的設計。網格是可以用來產生完全不同外觀的骨架。

• 促進協作

通過為設計元素的放置位置提供計劃，設計師可以更輕鬆地協作設計。網格系統有助於將界面設計工作分開，因為多位設計人員可以在布局的不同部分工作，因為他們知道他們的工作將無縫集成並保持連貫。

網格是風格指導手冊的基礎部分

大多數設計項目的實施，涉及到設計者和開發者之間的協作。對於UI設計師來說，沒有什麼比提交像素完美的設計模型，然而發現它在開發過程中變得完全不同更糟心的。

網格是一個通過允許開發人員在他們的代碼中預先設置與列大小相對應的類目來加速設計者到開發者工作流的框架。 這可以防止實施不一致並節省構建網站的時間成本。

布局網格的最佳實踐

雖然布局網格在為設計師實現設計的一致性，有組織的界面設計並管理元素之間的關係和比例等方面起到很大幫助，但在使用網格進行設計時，仍然需要記住一些事項。

選擇你真正需要的網格

「有多少列？」是設計師在開始使用網格時要問的第一個問題。

雖然12列網格是許多設計師共同的選擇，但它不是一個通用的解決方案。 選擇一個網格時，請選擇一個您的設計真正需要的網格樣式。 如果您的布局只需要8列，那麼就沒有必要使用12列網格。

許多流行的框架使用12個等寬列的網格系統。 12號是在相當小的數字中最容易整除的數字; 可能有12,6,4,3,2或1個均勻間隔的列。 這為設計人員提供了布局方面的巨大靈活性。

你如何知道你的設計需要多少列？ 在決定列數之前，勾畫出您可能的布局（在紙上畫個草圖也行）。 這意味著你需要知道屏幕上會顯示什麼內容。 內容將定義網格，而不是相反。 隨著草圖的掌握，您可以更好地了解所需的列數。

考慮你的約束條件

在設計網格時，考慮設計上的限制。 例如，大多數用戶可能正在使用特定類型的設備（如手機）。 這意味著所有的設計決策（包括網格）都需要考慮這個約束條件。 學習使用約束設計是一項技巧，可以幫助您專註於對用戶真正重要的內容。

框出重要內容

通過給用戶增加更多的視覺重量，引導用戶關注重要的元素。 提示：跨越多列的項目在視覺上比僅填充一列的項目更重要。

敢於突破柵格的束縛

柵格（不是柵格之間的間距）是擺放每個內容塊起始和結束的地方。 這條規則簡單易懂。 儘管如此，設計師通常會突破內容在網格中擺放的限制以增加視覺特點或強調某些元素。 通過讓這些內容的擺放位置突破網格的特定規則，這些內容會格外顯眼，因為觀看者會很快看到這些突出的內容並被吸引。

如果你決定打破柵格，你要明確自己的目的。 將內容從固定的擺放規則中釋放出來可能會破壞視覺層次結構並損害用戶體驗。

注意水平和垂直間隔

布置網格需要注意水平和垂直節奏，這同樣重要。 考慮下面的例子之間的區別。 在第一個例子中，網格與列寬和水平間距一致，但是不同的垂直間距產生視覺雜訊。 在第二個例子中，水平間距（即內容塊之間的空間）和垂直間距（列間）是一致的，這使得整體結構更簡潔並且內容在視覺上更易於接受。

使用基線網格來調整元素

如前所述，基線網格可用於水平對齊和層次結構。 將UI設計元素（文本，圖像和內容容器）與基線對齊意味著您需要將其高度設置為基線值的倍數。 例如，如果選擇8個像素作為基準值並希望對齊文本，則需要將字體的行高設置為基準值的倍數，這意味著行高可以是8,16,24， 32等。請注意，字體大小不必是基線的倍數，只能是行高。

為移動端優化網路系統

移動端的網格空間有限，使得多列布局不太可能。 移動端的內容通常僅限於一列或兩列。 在為移動端進行設計時，請考慮使用平鋪布局網格，其中列和行高度相同。 這將在整個設計中呈現方形瓷磚。

在移動設備上，用戶的屏幕空間有限，只能在滾動前查看少量內容。 因此，在設計網格布局時，應使圖像足夠大以便可識別，但又足夠小以允許一次看到更多內容。

測試

你的網格不是一成不變的。 像設計的任何部分一樣，根據這些測試的結果，應該測試并迭代網格。

總結

到目前為止，您應該對網格系統有一個很好的理解，它們是什麼以及它們如何應用於您的設計過程。 理解如何使用網格，需要在不斷的練習中總結經驗。

引用Josef Muller-Brockmann的話說：「網格系統是一種援助，而不是保證。 它允許一些可能的用途，每個設計師都可以尋找適合他個人風格的解決方案。 但是必須學習如何使用網格; 這是一門需要練習的藝術。「