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

一、介紹

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

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

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

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

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

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

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

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

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

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

2. 頁面布局

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

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

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

網(wǎng)格由列（column）、槽（gutter）、安全邊距（margin）組成。它們?cè)谝黄鹦纬闪似聊坏膶挾瘸叽纭?/p>

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

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

安全邊距（margin）是內(nèi)容和屏幕左右之間的間隔。更寬的安全邊距更適合較大的屏幕，因?yàn)樗麄兛梢試@內(nèi)容區(qū)域給出更多的白色區(qū)域。

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

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

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

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

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

所以我們?cè)O(shè)計(jì)一個(gè) 16pt 大小的圖標(biāo)時(shí)，我們導(dǎo)出的二倍或三倍尺寸就是 32px、48px。

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

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

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

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

舉例：

小行高=8px

中行高=16px

大行高=24px

超大行高=32px

......

二、頁面布局類型

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

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

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

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

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

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

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

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

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

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

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

作者：TCC翻譯情報(bào)局