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

一、介紹

實現(xiàn)優(yōu)秀網(wǎng)頁布局的最佳方式是運用網(wǎng)格系統(tǒng)。網(wǎng)格是設(shè)計的骨架，通過它我們可以做出有指導的設(shè)計決策，并為我們的用戶創(chuàng)造更好的體驗。

1. 網(wǎng)格的歷史

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

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

在西方，金屬活字印刷技術(shù)首先出現(xiàn)在約 1450 年，1455 年左右古騰堡圣經(jīng)的出版是出版業(yè)的第一個重要里程碑。金屬字體文本可以更好地利用網(wǎng)格。

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

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

在 1950 年代，在瑞士終于形成一個全新的平面設(shè)計風格。這種設(shè)計風格力求通過簡單的網(wǎng)絡(luò)結(jié)構(gòu)和近乎標準化的排版來實現(xiàn)設(shè)計上的統(tǒng)一。直到如今，這種風格仍繼續(xù)影響著許多網(wǎng)頁和平面設(shè)計師。

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

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

2. 頁面布局

頁面布局指的是在網(wǎng)頁上的所有視覺元素的排列。通過頁面元素的有序排列，建立元素之間的關(guān)系，就能更好地引導用戶體驗。作為網(wǎng)頁設(shè)計的關(guān)鍵部分，布局決定了頁面里的什么元素最受關(guān)注，并決定了網(wǎng)頁整體的視覺平衡。總之，一個優(yōu)秀的網(wǎng)頁布局可以直接引導用戶的注意力到正確的方向。首先吸引他們到最重要的元素，然后根據(jù)重要性的排序閱讀剩余部分。

3. 網(wǎng)格的作用和概念

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

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

Column 是跨越內(nèi)容區(qū)域的垂直部分。網(wǎng)頁設(shè)計中有的列（column）更多，網(wǎng)格就更靈活。列的寬度由設(shè)計師自己決定。傳統(tǒng)的做法是在電腦端頁面中使用 12 列，Pad 端使用 8 列，手機端使用 4 列。列的寬度一般在 60px～80px。列寬是影響實際內(nèi)容區(qū)域?qū)挾鹊年P(guān)鍵因素。

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

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

上面介紹了 3 個概念之后，我們可以使用基數(shù)為 8pt 的網(wǎng)格系統(tǒng)來風格頁面。8pt 網(wǎng)格系統(tǒng)使用 8 作為基礎(chǔ)單位來調(diào)整網(wǎng)頁元素的大小和間距。這意味著，網(wǎng)頁上的高度或?qū)挾取⒕嗷蛘邇?nèi)邊距，都是 8 的倍數(shù)。

4. 網(wǎng)格基數(shù) 8 介紹

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

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

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

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

5. 為什么使用基數(shù) 8

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

6. 如何設(shè)置文本

基于網(wǎng)格基數(shù) 8pt 的排版系統(tǒng)，字號可以設(shè)計得不一樣，但是它們的行高應該遵循 8 的倍數(shù)。

舉例：

小行高=8px

中行高=16px

大行高=24px

超大行高=32px

......

二、頁面布局類型

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

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

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

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

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

最后，這有一個圖例用來展示如何在網(wǎng)頁設(shè)計中使用網(wǎng)格系統(tǒng)進行頁面布局。

figma 上的設(shè)置數(shù)值如下：

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

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

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

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

作者：TCC翻譯情報局