新手必看！網格系統基礎知識和常用布局科普

大家好，這里是 TCC 翻譯情報局，我是李澤慧。作者在此篇文章中向我們介紹了網格的發展歷史，并科普了在當代網頁設計中常用的網格（柵格系統）以及頁面布局類型。一起來學習如何高效使用網格系統吧。

一、介紹

實現優秀網頁布局的最佳方式是運用網格系統。網格是設計的骨架，通過它我們可以做出有指導的設計決策，并為我們的用戶創造更好的體驗。

1. 網格的歷史

當提及網格的使用，我們可以追溯到很久之前。古埃及人在雕刻和繪畫中描繪人物時遵守著將人的拳頭定為尺度的規則 —— 站立的人物從地面到頭頂有 18 個拳頭那么高。

活字印刷首先約于公元 1040 年左右在中國發展，中國的瓷器用作了活字印刷的字符。

在西方，金屬活字印刷技術首先出現在約 1450 年，1455 年左右古騰堡圣經的出版是出版業的第一個重要里程碑。金屬字體文本可以更好地利用網格。

在 1917 年，網格在 Theo van Doesburg 和 Piet Mondrian 引領的荷蘭風格主義（新塑性主義）運動中最為明顯。他們將畫布限制為垂直相交的垂直線和水平線以及原色。

1919 年，德國的包豪斯學派成立，他們簡潔實用的設計理念也采用了網格的概念。就像著名的包豪斯國際象棋一樣，它的棋子都是簡單的幾何形狀，例如正方形和長方形，可以緊密地組合在一起，以實現緊密的存儲。

在 1950 年代，在瑞士終于形成一個全新的平面設計風格。這種設計風格力求通過簡單的網絡結構和近乎標準化的排版來實現設計上的統一。直到如今，這種風格仍繼續影響著許多網頁和平面設計師。

隨著第二次世界大戰的結束，一種新的消費主義出現了。伴隨著高速經濟發展，廣告業逐漸繁榮。Paul Rand 作為美國第一位使用了瑞士平面設計風格的商業藝術家，以他的企業 logo 設計和商業廣告設計而聞名。網格在這全新的廣告形式中發揮了重要作用。

今天我們將講一講網頁設計中的網格系統。它聽起來很簡單，但是實際上包含了一大串復雜的概念。網頁設計中的第一步是如何布局。哪里是標題、導航和按鈕？這些元素之間要多少間距？這些都離不開頁面布局。作為網頁設計的基礎，頁面布局可以極大地影響用戶閱讀的流暢度和直觀性。在我們講頁面布局之前，我們需要先科普一些概念。

2. 頁面布局

頁面布局指的是在網頁上的所有視覺元素的排列。通過頁面元素的有序排列，建立元素之間的關系，就能更好地引導用戶體驗。作為網頁設計的關鍵部分，布局決定了頁面里的什么元素最受關注，并決定了網頁整體的視覺平衡?？傊粋€優秀的網頁布局可以直接引導用戶的注意力到正確的方向。首先吸引他們到最重要的元素，然后根據重要性的排序閱讀剩余部分。

3. 網格的作用和概念

實現優秀網頁布局的最佳方式是運用柵格系統。網格是設計的骨架，幫助我們有序地對齊和組織網頁內容。通用正確地使用網格，我們不會隨意地在頁面中放置元素，相反，我們會很清楚知道將這些元素放在合理的位置，使得有助于提高設計效率和設計質量。無論是為電腦端還是手機端設計，使用網格可以引導我們做出設計決策、并為用戶創造更好的體驗。

網格由列（column）、槽（gutter）、安全邊距（margin）組成。它們在一起形成了屏幕的寬度尺寸。

Column 是跨越內容區域的垂直部分。網頁設計中有的列（column）更多，網格就更靈活。列的寬度由設計師自己決定。傳統的做法是在電腦端頁面中使用 12 列，Pad 端使用 8 列，手機端使用 4 列。列的寬度一般在 60px～80px。列寬是影響實際內容區域寬度的關鍵因素。

槽（gutter）是列（column）之間的間隙。槽的作用是垂直地劃分每個模塊的內容。更寬的槽更適用于大屏設備。更寬的槽可以用來增加頁面的間距，讓頁面信息可以被展示得更加舒展。

安全邊距（margin）是內容和屏幕左右之間的間隔。更寬的安全邊距更適合較大的屏幕，因為他們可以圍繞內容區域給出更多的白色區域。

上面介紹了 3 個概念之后，我們可以使用基數為 8pt 的網格系統來風格頁面。8pt 網格系統使用 8 作為基礎單位來調整網頁元素的大小和間距。這意味著，網頁上的高度或寬度、距或者內邊距，都是 8 的倍數。

4. 網格基數 8 介紹

你有沒有好奇過為什么我們在設計手機界面時選擇了非常小的繪制畫板，但是我們的顯示設備卻非常大？

舉個例子，我們使用 375 × 812 大小的畫板來設計 iPhone X 的界面，但是 iPhone X 屏幕實際尺寸大小 1125×2436 —— 即我們設計尺寸的三倍。

因為設計尺寸最后是以兩倍或三倍像素渲染導出。比如，iPhone X 會以三倍尺寸呈現，iphone 8 或 iphone XR 會以二倍尺寸呈現。因此，我們可以使用最小尺寸的一倍來設計，去適應不同設備不同的尺寸。因此，1pt 可以分別被轉化為@1x (一倍圖)、 @2x (兩倍圖)和@3x (三倍圖)的 1px、4PX 或 9px。

所以我們設計一個 16pt 大小的圖標時，我們導出的二倍或三倍尺寸就是 32px、48px。

5. 為什么使用基數 8

使用偶數來調整元素尺寸或者元素間距，能很好地適用于所有屏幕尺寸。舉個例子，在 1.5 倍尺寸下，如果你使用奇數來定義元素尺寸和間距，很容易會多半個像素。如果一倍圖下的 5px 以 1.5 倍的尺寸導出，很容易會多半個像素。選擇 8 作為基數的原因是大多數屏幕尺寸可以被 8 整除，所以很容易兼容適配。此外，基數 2 或基數 4 不在電腦端使用，因為顆粒度太小，不方便設計師操作。另外一個使用基數 8 的優點是避免我們在設計中太過糾結。

6. 如何設置文本

基于網格基數 8pt 的排版系統，字號可以設計得不一樣，但是它們的行高應該遵循 8 的倍數。

舉例：

小行高=8px

中行高=16px

大行高=24px

超大行高=32px

......

二、頁面布局類型

在介紹上述的概念之后，讓我們進一步了解頁面的布局。頁面布局可以大致分為這幾類：固定布局（靜態布局）、流式布局（百分比布局）、自適應布局和響應式布局。

固定布局，就如其名，當瀏覽器拉伸時，整個頁面的寬度是固定不變的。這種頁面相對死板、單一，但是非常方便設計師設計和開發。

流式布局，頁面大小會隨著瀏覽器大小變化，但是變化的邏輯是模塊的百分比變化。流式布局不管瀏覽器的寬度如何，頁面寬度會完全填充滿整個屏幕。其次，流式布局不像響應式布局那樣需要多樣化的變化。它在非常大或者非常小的頁面上會有一些缺陷。例如，如果頁面非常寬，內容可能會被拉伸得很長，一個簡單的段落文本會在一行中橫跨整個屏幕。相反地，在小屏幕上多列布局會讓文字看起來特別擁擠。

自適應布局可以看成固定布局的升級版。例如，當頁面內容寬度是 960px，無論瀏覽器寬度如何伸展，頁面內容仍保持在 960px。如果瀏覽器寬度減少到一個臨界值，例如小于 960px，那么頁面內容將會變成第二個寬度，假設為 640px，等等。這個臨界值叫做斷點。

響應式布局結合了流式布局和自適應布局。響應式布局隨著瀏覽器寬度的增加減少，會像流式布局那樣變化。同時，如果瀏覽器寬度超過了某個臨界值（斷點），整個頁面的布局也會變化。通常，響應式布局設計是用來兼容不同類型的設備，例如網頁、平板和手機，從而帶給用戶更好的瀏覽體驗。

最后，這有一個圖例用來展示如何在網頁設計中使用網格系統進行頁面布局。

figma 上的設置數值如下：

我們可以設置列的數量，設置列的寬度和槽的寬度來決定頁面的實際寬度。

在網頁設計中使用網格系統的淺層價值是讓頁面布局遵循一定規律、且讓頁面看上去更加統一。更深層次的價值是設計自適應的頁面布局，并讓頁面在不同寬度下適應不同的設備。

在這里我也做了 4 種不同尺寸的網頁端網格系統供你參考。你也可以根據你的實際情況建立你自己的網格系統。

但要記住，在實際的項目中，盡可能靈活地使用網格，不要拘泥于 8pt 單位，但要盡量保持在一個均勻的范圍里。

歡迎關注作者微信公眾號：「TCC翻譯情報局」