2022-3-7 周周
說到網(wǎng)格的應用，我們可以追溯到很遠。古埃及人在他們的雕刻和繪畫中描繪的人物遵循了一個規(guī)則，將比例標準定為人的拳頭，一個站立的人物從地面到頭頂測量為 18 個拳頭。
公元 1040 年，首次在中國出現(xiàn)活字印刷，主要采用的是泥活字。在西方，金屬活字印刷術在 1450 年左右出現(xiàn)，而古騰堡圣經(jīng)在 1455 年左右的發(fā)行將是出版界的第一個重大里程碑。金屬類型的文字更加充分利用了網(wǎng)格。
到了 1917 年，網(wǎng)格在荷蘭風格派運動中最為明顯，由藝術家 Theo van Doesburg 和 Piet Mondrian 領導。他們將畫布限制在相交的垂直和水平線條和原色上。
1919 年，德國的包豪斯學校成立，他們主張的簡潔實用的設計理念同樣用到了網(wǎng)格的概念。像著名的包豪斯國際象棋，它的棋子都是正方形和長方形等簡單的幾何形體，可以緊密地組合在一起，以便緊湊地存放。
1950 年代，一種嶄新的平面設計風格終于在瑞士形成。這種風格的設計，力圖通過簡單的網(wǎng)絡結構和近乎標準化的排版方式，達到設計上的統(tǒng)一性。這種風格一直到現(xiàn)在影響了很多網(wǎng)頁和平面設計師。
隨著第二次世界大戰(zhàn)的結束，一種新的消費主義出現(xiàn)了。經(jīng)濟快速發(fā)展，廣告業(yè)的繁榮逐漸興起。保羅·蘭德作為美國第一個應用瑞士平面設計風格商業(yè)藝術家，他以企業(yè)品牌標志設計及商業(yè)廣告設計而聞名，網(wǎng)格在這種新的廣告形式中發(fā)揮了重要作用。
今天我們要聊的是關于網(wǎng)頁設計的網(wǎng)格系統(tǒng)。說起來很簡單，但其實里面包含了很多復雜的概念。網(wǎng)頁設計的第一步就是如何進行布局。標題、導航、按鈕放在哪？每個元素之間的間距是多少？這些都離不開頁面布局。作為網(wǎng)頁設計的基礎，頁面布局可以極大地影響用戶閱讀的流暢度和直觀度。在聊頁面布局前，我們需要先普及一些概念。
頁面布局是網(wǎng)頁上所有視覺元素的排列。通過頁面元素的有序排列，可以建立元素間的關系，從而更好地引導用戶體驗。作為網(wǎng)頁設計的關鍵組成部分，布局決定了頁面哪些元素最受關注，以及頁面的視覺整體平衡。總之，一個好的頁面布局可以將用戶的注意力引向正確的方向。先將他們吸引到最重要的元素上，然后按照重要性順序閱讀余下部分。
要實現(xiàn)良好的頁面布局，最好的辦法就是應用網(wǎng)格系統(tǒng)。網(wǎng)格是設計的骨架，可以幫助我們對齊，有序組織頁面內(nèi)容。通過正確使用網(wǎng)格，我們不會隨意地把元素放到頁面里，而是明確地知道將這些元素放到哪些合理的位置上，有助于提高設計效率和設計質(zhì)量。無論是 PC 端還是移動端設計，通過網(wǎng)格都將對我們做出有指導性的設計決策并為用戶創(chuàng)造更好的體驗。
網(wǎng)格由幾個部分組成，分別是 Column (列)、Gutter (槽)和 Margin (邊距)。它們在一起構成了屏幕的水平寬度。
接下來通過幾個圖例來詳細解釋下。
列(Column)是跨越內(nèi)容區(qū)域的垂直部分。在網(wǎng)頁設計中列越多，網(wǎng)格就越靈活。列的寬度由設計師自己來決定，傳統(tǒng)做法是在 PC 端網(wǎng)頁上使用 12 個，Pad 端使用 8 個，移動端使用 4 個。列寬一般定義為 60~80px。列寬是影響實際內(nèi)容寬度的關鍵因素。
槽(Gutter)是列與列之間的間隙。槽的作用是將每個模塊的內(nèi)容進行縱向分割。較寬的槽更適合較大的屏幕設備，可以通過更寬的槽去拉開頁面的間距，使頁面信息展示的更加舒展。
邊距(Margin)是內(nèi)容與屏幕左右邊緣之間的空間。更寬的邊距更適合更大的屏幕，因為它們會在內(nèi)容的周邊創(chuàng)建更多的空白。
介紹了以上 3 個概念，我們可以利用 8pt 網(wǎng)格系統(tǒng)來對頁面進行分割。8pt 網(wǎng)格系統(tǒng)，使用 8 的增量來調(diào)整頁面元素的大小和間距。也就是說，頁面中的高度或?qū)挾取⑦吘嗷蛱畛涠际?8 的倍數(shù)。
有沒有想過我們在做移動端界面設計的時候為什么選用特別小的畫板，但我們的顯示設備卻非常大？
比如，我們用 375×812 的尺寸來進行設計 iphone X，但其實 iphone X 的實際尺寸是 1125×2436，是我們設計尺寸的 3 倍。
因為設計尺寸會以 2 倍或 3 倍的像素進行渲染，比如 iphoneX 就是以 3 倍尺寸進行渲染，iphone8 或 iphoneXR 會以兩倍尺寸進行渲染。所以我們在進行設計的時候可以采用 1 倍最小尺寸進行設計，以適配到不同設備的不同尺寸。因此，1pt 可以分別轉換為 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。
所以我們設計一個 16pt 的圖標，導出@2x 或者@3x 的尺寸應該是 32px、48px
使用偶數(shù)來調(diào)整元素大小或元素間的間距可以很好的適配到各種尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇數(shù)來定義元素尺寸或間距，就很容易出現(xiàn)半個像素的情況。5px 在 1 倍尺寸中導出為 1.5 倍尺寸就容易出現(xiàn)半格像素的情況。之所以選擇 8，也是因為大部分的屏幕尺寸是可以被 8 整除的，這樣就很容易適配。此外在 PC 端沒有使用 2 或 4，是因為其顆粒度太小，不便于設計師進行操作；用 8 的倍數(shù)來設計還有一個好處就是避免我們在設計中過于糾結。
基于 8pt 網(wǎng)格的排版系統(tǒng)。字體的大小可以設計成不同的尺寸，但它們的行高要盡量是 8 的倍數(shù)。
在網(wǎng)頁端設計時，很少會遇到幾倍尺寸的輸出，所以通常情況下都以像素為單位，這樣的話就是 8px 的倍增。我們就可以把間距或者元素定義成以 8 的倍增不同尺寸。
例如：
small = 8px
medium = 16px
large = 24px
x-large = 32px
……
普及了上述概念后，我們一起進一步了解下頁面的布局，頁面布局大體分為幾類：固定布局、流動布局、自適應布局、響應式布局。
固定布局，顧名思義就是頁面的整體寬度是固定的，不會隨著瀏覽器的拉伸變化而變化。這種頁面相對死板單一，但對于設計師來講相對容易設計，也易于開發(fā)。
流動布局，它會隨著瀏覽器窗口的大小而變化，但是它變化的邏輯是以模塊的百分比來定義的。無論瀏覽器的寬度是多少，流動布局都會填滿頁面的寬度。其次流動布局不需要像響應式布局那么多樣性的變化。它在極大或極小的頁面寬度上會存在一些缺點。比如頁面很寬，內(nèi)容可能會被拉伸得太長，單個文字段落可能會在單行上貫穿頁面。相反，小屏幕上的多列布局也可能對內(nèi)容來說過于擁擠。
自適應布局可以理解為是固定布局的一個升級版，舉個例子，當頁面內(nèi)容為 960px，此時頁面無論再往多寬拉伸，頁面內(nèi)容始終顯示 960 寬度。如果縮小寬度到一個臨界值時，比如 960px 以內(nèi)，頁面就會縮小到它的第二個寬度，假設是 640，以此類推。這個臨界值我們稱之為斷點。
響應式布局結合了流動布局和自適應布局。隨著瀏覽器寬度的增加或減少，響應式布局將像流動布局一樣進行變化。同時，如果瀏覽器寬度超出了某個臨界點，也就是斷點，那么頁面布局也會發(fā)生改變。通常，響應式布局是為了能夠兼容網(wǎng)頁端、平板端和移動端等不同設備進行設計的，這樣會給用戶帶來更好的瀏覽體驗。
最后用圖例展示下如何利用網(wǎng)格系統(tǒng)在網(wǎng)頁設計上進行頁面布局。
在 figma 上的設置如圖：
我們可以設置好列數(shù)，定義好列寬和槽寬來決定頁面的實際寬度。
在網(wǎng)頁設計上使用網(wǎng)格系統(tǒng)淺層價值是為了讓頁面布局有章可循，使頁面看起來更加統(tǒng)一，深層價值其實是為了做自適應布局，讓頁面在不同寬度下適配到不同的設備上。
這里我也創(chuàng)建了 4 種不同尺寸的網(wǎng)頁端網(wǎng)格系統(tǒng)，供大家參考，大家也可以根據(jù)自己的實際情況去建立自己的網(wǎng)格。
切記，在實際項目中，盡可能靈活的使用網(wǎng)格，不必拘泥于 8pt 的單位，但盡量保持在偶數(shù)范圍。
文章來源：優(yōu)設網(wǎng)：曲sir
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務