2020-4-6 濤濤
今天，90％ 的媒體互動都是基于屏幕的，通過手機，平板，筆記本電腦，電視和智能手表來與外界產生聯系。多屏設計已成為商業設計中不可或缺的一部分，響應式設計正迅速成為常態。作為 UI 設計師，我們希望為我們的產品在不同尺寸下都能為用戶提供良好的用戶體驗，柵格系統可以幫助我們做到這一點。
即使是我們只針對一個尺寸進行設計，我們也經常面臨設計布局方面的問題。合理運用柵格系統可以幫助我們控制布局結構并實現一致和有組織的設計。柵格系統就像無形的膠水一樣凝聚一個設計，即使元素看上去是彼此分離，但通過網格將它們連接在一起，實現良好的層次結構，位置關系和一致性。
設計師和開發者之間的協作過程中，柵格系統在前端開發中是被應用的很廣泛一套體系，許多優秀的設計都使用了柵格系統，使用柵格系統可以加速開發并保證視覺還原。柵格系統雖然是傳統設計方法中的一部分，但它仍舊能幫助我們去設計這個多終端的世界。看到這里，你可能非常想知道柵格系統在頁面中是如何運作的，那么今天我們一起來學習并且實踐我們的格柵系統。
「The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.」
「柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。但是必須學習如何使用網格。這是一門需要實踐的藝術?！?
——Josef Müller-Brockmann《平面設計中的網格系統》作者
柵格系統可以讓你依靠秩序與邏輯去完成設計。
早在 20 世紀初，德國、荷蘭、瑞士等國的平面設計師們發現通過維持視覺秩序，從而使版面能更加清晰有效地傳遞信息，二戰后這種理念在瑞士得到了良好的發展，直到 20 世紀 40 年代后期，第一次出現了使用網格進行輔助設計的印刷作品。由瑞士設計師大師 Josef Müller-Brockmann（約瑟夫·米勒-布羅克曼）所著的《平面設計中的網格系統》一書，自 1961 年出版以來暢銷至今，對設計界有著深遠的影響。史稱 Swiss Typography Movement （瑞士新浪潮平面設計運動），后來成為全球風靡的 International Typographic Style （國際主義設計風格)）。
△ 約瑟夫·米勒一布羅克曼 (Josef Muller-brockmann, 1914-1996)
瑞士的一位平面設計師和教師。1958 年任《新平面設計》（New Graphic Design）主編 1966 年被任命為 IBM 的歐洲設計顧問。布羅克曼因他的極簡主義設計與簡潔的排版、圖形和色彩而聞名，他的設計對 21 世紀的眾多平面設計師都產生了重大影響。
1. 減少決策成本提高設計理解力
柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；UI 設計也是需要理性的、客觀的、具有數學邏輯美感的。熟練運用網格系統能夠讓你的設計更有秩序和節奏感，頁面信息的展現更加清晰，提高閱讀效率，從而提供給用戶舒適的使用體驗。加快認知速度。這意味著用戶在使用產品完成特定的任務時，例如發送消息，預訂酒店房間或乘車。用戶能夠連貫地理解并找到下一條信息或下一步要采取的步驟。
2. 響應化
因為人們使用不同類型的設備與產品進行互動，從智能手表的小屏幕到超寬屏電視，交互是流暢的，并且沒有固定的尺寸。使用產品時，人們通常會在多個設備之間切換，以完成該產品的單個任務。所以響應式設計不應該是一種品，而是一種必需品。這意味著設計師不能再為單個設備的屏幕構建。多設備環境迫使設計人員根據動態網格系統進行思考，而不是固定寬度。使用網格可以跨不同屏幕尺寸的多個設備創建連貫的體驗。
3. 加速團隊協作設計
當多位設計師共同設計產品時，一個統一標準就變得尤為重要。如果沒有一個統一的框架去約束的話，我們的產品的頁面和組件的標準可能各式各樣，這樣的話整個產品的頁面都會比較混亂。因此，網格系統有助于將界面設計工作分開，因為多位設計師可以在統一的布局下進行不同部分工作，并且無縫集成并保持連貫。
4. 加速開發并保證視覺還原
大多數設計項目的實施，涉及到設計者和開發者之間的協作。柵格化提高了頁面布局的一致性和復用性；避免了設計師與開發者在細節上的反復溝通確認，從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。
1. 列和槽（Columns and Gutters）
列（Columns） 和槽（Gutters）。列（Column）是內容的容器，水槽（Gutter）用來調節相鄰兩個列的間距，把控頁面留白；列和列間距加上頁面邊距（Margin）加起來屏幕的水平寬度。列和列間距的內容區域（Content width）由 N個列和（N-1）個水槽組成。通常情況下，web 端采用 12 列，平板采用 8 列，手機采用 4 列。當然，你可以根據項目特點來設計你的網格系統，列和水槽的寬度我們可以利用 8 點網格系統來定義，下面會講到。列的數量越多，頁面就會被分割得越「碎」，在頁面設計時就會越難把控，適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的頁面設計，列間距寬度數值對頁面的影響，與外邊距大體類似，即間距越大頁面越輕松簡單，反之亦然。用戶已經習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此豎直方向可以無限延伸，所以柵格系統在豎直方向的柵格可以不體現出來，我們在執行設計時只要在水平方向保持規律的變化就可以了。
2. 頁面邊距（Side Margins）
頁面邊距就是內容區域（Content field）以外的空間，比較推薦的設計就是頁面邊距可以隨著屏幕尺寸的增大而增大。頁面邊距在移動設備上通常是 12Px到 40Px 之間，在平板設備和桌面設備頁面邊距變化就相當多了。在響應式設計中，你選擇了一個頁面邊距之后，縮小頁面寬度時頁面還是會有你設置的最小頁面邊距，直到到達下一個響應點（breakpoint）。當你增大頁面寬度時，頁面就有更多的頁面邊距，直到頁面寬度到達下一個響應點（breakpoint）。
3. 模塊（Field Elements）
模塊就是你的設計區塊，可以是一段文字，一張圖片，或是其他更加豐富的元素。背景元素并不能算作是設計模塊，所以并不需要遵循柵格系統。模塊的定義是很靈活的，它可以是個小的單位或是元素，也可以是一個元素豐富的區塊。
以 12 柵格系統為例，一個 12 柵格系統可以根據業務需要被 2 等分、3 等分、4 等分、6 等分、12 等分，還可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不對稱分割，具體采用哪種比例的組合需要我們根據自己業務需求來定。
4. 8 點網格（8pt spatial system）
柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局，而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與布局，然后再填充內容、調整細節。
由于列跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的重要一步就是需要先定義好柵格的原子單位「網格」的大小。目前最普適易用的就是 8 點網格。我們也可以利用 8 點網格法來制定產品中的間距，建立 8 點為一個單位的網格，使用 8 的倍數來定義模塊的間距與元素的尺寸。8 點網格有如下幾點優勢：
如果設計上沒有立即可識別的間距系統時，這種設計可能會讓用戶感覺廉價、不一致，而且通常不值得信任。如果設計上遵循一個 8pt 網格系統時，節奏變得可預測和視覺上的愉悅。對于用戶來說，這種體驗是經過修飾和可預測的，這增加了用戶對品牌的信任和喜愛。
無論有多少個設計師在協同合作，現在都有一個一致的間距規范，決策成本將大大降低。設計師可以輕松地從另一個設計師停止的地方開始設計，或者輕松地并行構建。我們定義下規范可以及時和開發同學溝通，因此可以為工程師節省時間。
5. 基線網格（Baseline Grid）
基線網格由密集的水平行組成，這些行提供文本的對齊和間距準則，類似于您在直紋紙上書寫的方式。在下面的示例中，每 8px 行在紅色和白色之間交替。
△ 基線網格
提示：將所有行高設置為基本單位（8x 或 4px）的增量非常重要，這樣您的文本才能與基線網格完美對齊。
△ 字體行高
1. 什么是響應式？
設計師需要通過設計讓內容在不同的平臺上體驗最大化，確保讓用戶在任何一個屏幕上看到內容的時候，會覺得這些內容就是為這個平臺而設計的，而不是單純的縮放而來。這種無縫的體驗，才是跨屏幕設計的真正難點所在。想要制定一套針對不同設備和屏幕的設計方案，你需要一整套的策略。用戶體驗同時包含了性能、交互、效率等多方面內容，也就是說，對于一個線上的響應式頁面，我們不僅要關注視覺上看到的，也要關注我們操作、使用時的感受，這些綜合因素最終影響著用戶使用時的效率與體驗。
2. 響應式設計的核心步驟
確保核心的用戶體驗
雖然用戶體驗是無處不在的，但是對于特定產品，最核心的體驗是存在的。產品通常是用來解決用戶所面臨的特定問題的，它的這一特質讓產品變得有意義。關鍵的內容和關鍵的功能的組合，通常構成了產品的核心用戶體驗。如果你并沒有想明白這個問題，不妨問問自己：用戶需要完成哪些最常見/最重要的任務？找到問題的答案之后，你的產品就應當從各個方面、各個渠道，完整而全面地支撐這些功能，幫助用戶完成這些任務。舉個例子，Uber 的核心用戶體驗是隨時隨地叫車，無論設備的屏幕大小如何，你進行的設計全部都應該圍繞著這個需求和功能來進行。叫車是 Uber 的核心功能，即使使用 Apple Watch 這種極小的屏幕尺寸都應該順利地完成這個任務。
敲定你的產品所覆蓋的設備類型
現在的移動端設備屏幕尺寸各不相同，單獨為某一個設備設計內容無疑是不現實的。根據你的產品覆蓋人群、受眾分類、使用場景，綜合考慮你的內容會優先呈現在哪些設備和平臺上，然后有意識地篩選出常見的設備類型：手機，平板，桌面端，智能電視，智能手表……
不同的設備組合通常是基于不同的場景、需求和服務來構成的，用戶會針對不同的屏幕進行不同模式的交互，甚至處理的內容也會有差異。比如說，在手機上，用戶更加傾向于使用輕量級的任務，并且進行一定量的溝通和交流。在平板上，用戶行為更多集中在內容消費上，并且目前平板的使用量被認為在逐步降低。桌面端依然是用戶完成較為專業、復雜任務的首選平臺，足以應付復雜多樣的內容。了解各種設備類型和使用場景是用來構建用戶體驗的關鍵。
針對不同內容來匹配用戶體驗
并非所有的內容都符合不同設備的使用場景，比如智能手表就不適合展示大量的文本內容。你的產品所覆蓋的設備組當中，每種設備的使用場景不同，應該匹配的用戶體驗也不一樣。移動端用戶和桌面端用戶的需求就是不同的，場景差異也很大。以 Evernote 為例，它可以在多種不同類型的設備之間同步和切換，其桌面端版本就針對用戶的內容需求進行了優化：Evernote 的桌面端應用程序針對閱讀性的內容和多媒體進行了優化，而移動端的 Evernote 則強化了拍攝記錄、圖片和音頻記錄的功能：其次，不同的設備屏幕具備不同的輸入方式，設計師如果忽略輸入方式上的獨特性，也常常會出現許多問題，這里就不擴展開來了。
優先為最小的屏幕做設計
一直以來，設計師都習慣從最大的屏幕著手設計，最后考慮最小的屏幕上的顯示效果，這意味著絕大多數的設計都是從桌面端開始設計的，通常桌面端的內容和功能更全面。當桌面端的整體設計完成之后，再推進到其他設備端的設計。然而，在進行桌面端設計的時候，我們常常會遭遇「廚房水槽」困境：由于產品通常會牽涉到多個利益相關方，許多多余的功能會被加入進來。而實踐經驗表明，移動端優先的設計往往能夠更好的專注于核心功能，更適合作為產品設計的起點。當你優先設計最小屏幕所需要的界面的時候，這種局面會強制你從最關鍵最重要的地方開始設計。這也是之前設計圈和產品開發領域一直所強調的「移動端優先」的策略的由來。在此之后，再進行平板、桌面和電視端的設計，就是一個自然地做加法的過程了。在絕大多數的案例當中，最小屏幕通常是手機屏幕。
測試你的設計
產品的測試環境并不一定都得是在現實世界中尋找，但是在盡可能讓真實的用戶來做可用性測試，并且在產品發布之前解決所有的用戶體驗上的問題。
3. 為何要利用柵格系統來進行響應式設計?
響應式可以響應的前提有兩點：1、頁面布局具有規律性、2、元素寬高可用百分比代替固定數值，而這兩點正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式的設計是順理成章的，也比較快捷，所以響應式與柵格化天生一對好搭檔。
第1步：確定列的數量
第一階段先不要限制自己的列數。首先，創建一個低保真或高保真的原型。設計一些基本元素和用戶流程。在此之后，就開始設計最優的列數和大小。如果在項目開始設計之后不得不改變我們的柵格系統，不要有負擔，我們需要有一些試錯的空間。
我們在設計頁面時，用到最多的布局方式就是等分布局，即頁面內容區域被 N 等分，每一份的寬度則根據屏幕寬度自適應調整。那么就從這個角度出發，思考一下頁面的網格應該設置為多少列，才能的滿足各種等分布局的需要。與 web 類似，移動端最方便的網格之一是 12 列網格。這個網格將允許我們在一行中同時放置偶數和奇數個元素。
對于移動端來說，12 列網格的缺點是一個列的寬度太小，你可能很少創建一個列寬度的元素。如果你選擇 2、4 或 8 列網格，請記住在一行中放置奇數個元素可能會出現的問題。
Pro-Tip：
界面設計通常包含數百個不同的頁面，因此，一個網格可能不適合所有的頁面。如果需要，創建額外的柵格系統，但不要忘記設計的一致性。網格系統的一致性：相同的布局邊距、列之間相等或成比例的水槽，以及更改列本身的寬度時其他模塊也需要保持相同的比例。
第2步：定義水槽和邊距
首先，讓我們先翻閱目標屏幕的設計 Guideline，以找出通常頁面邊距（Side Margins）。目前，Android 和 iOs 的最小推薦布局邊距為 16pt。web 端則依照屏幕尺寸不同而不同。這意味著，如果你希望遵循系統指南，則頁面邊距不應小于 16pt。（但可以更大的）
在選擇 12 列網格時，列之間的水槽不應該太大，因為由于列的寬度小和它們之間的大寬度的水槽，列將在視覺上產生分裂的感覺。同時我建議你選擇與8pt 間距系統成比例的水槽大小。所以布局的水平和垂直節奏會相互重疊。水槽與頁面邊距成比例。那么網格更加一致，也將允許我們輕松地在其中放置特殊元素，如輪播（carousel）。
第3步：定義 8pt間距系統
了幫助不同設計能力的設計者們在界面布局上的一致性和韻律感，統一設計到開發的布局語言，減少還原損耗。在大量的實踐中，我們提取了一組可以用于 UI 布局空間決策的數組，他們都保持了 8 倍數的原則、具備動態的韻律感。經過驗證，可以在一定程度上幫助我們更快更好地實現布局空間上的設計決策。定義網格系統方法很多，如運用 8 點網格系統、斐波那契數列、某最小原子單位的增量、從底層系統參數化定義間距等，我們以最小原子單位的增量為例去定義網格系統。最小單元格的數值選擇需要從兩方面考慮：
在適用性方面，4、6、8、10 這四個數值都是基本可以滿足的，在靈活性方面，4px 表現最佳，但是頁面就會被分割的非常細碎，在設計時比較難于把控。因此我們需要根據 APP 的實際情況選擇合適的數值，4px 或 6px 單元格比較適合頁面內容信息較多，布局排版比較復雜的產品。而 8px 單元格對一般的設計場景都可以很好的滿足，比較適合大多數的 項目，因此是比較推薦使用的。
那么假設我們以 8 為基準的去延展系統間距，得到如下間距系統：
1、2、8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數或能被 8 整除
但是目前間距數量太多，過于細碎也會導致間距比較亂，所以我們繼續優化梳理（以 6 為基準，前面個數是后面個數的 2 倍遞增），得到以下間距系統：
1、2、8、16、24、32、48、64、80、96
第4步：sketch布局設置
利用 sketch 的布局設置功能，即可快速搭建出網格系統的參考布局，在平時做設計的過程中，可以經常使用 Ctrl+L 快捷鍵切換布局的顯示，提高設計效率。
我們來解釋一下這些設置分別是什么：
在傳統的柵格化系統設計中，列的寬度和水槽的寬度是保持不變的，只是列的「數量」發生變化。為什么要這么處理呢？這是為了讓設計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進行折行顯示在第二行上。不需要做任何的調整，因為已經知道它位于第四列上了。在手機上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。但是目前我有更多的響應策略，例如當視窗（Viewport）發生變化時，內容區域的元素如何去響應，具體到我們當前的柵格系統，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調整。
1. 固定柵格或是斷點系統（Fixed boxes or breakpoint system）
固定網格，列寬和水槽寬不會改變，只是改變列的數目，當窗口縮放時，排版布局不會發生任何改變，只有當達到一個臨界值（開發那邊設置好的固定的值），界面才會發生改變。在此之前界面排版都是不變的，就像一部分被切掉了。
如果開發那邊寫了一個固定柵格，當你從桌面縮小到平板電腦，就像是在桌面的瀏覽器寬度時，你不會看到任何變化，設計就像是被剪掉了一樣。但當達到平板屏幕尺寸臨界點時，設計布局馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續減小這個值，同樣的事情也會發生，在到達另一個臨界值之前，設計看起來都是不變的。下面是常見的斷點系統（Breakpoint System）
如圖，響應式是以視窗的最小寬度作為基本依據來制定每種寬度下 Columns、Gutters、與 Margins 的響應策略，也就是說 Viewport Min-width 是做出響應的觸發條件，視窗每達到一個最小寬度，就會觸發該寬度下預設的頁面布局方式，而每種布局都是在該寬度下的最佳布局，也是因此，響應式才會在各種復雜分辨率條件下都能給用戶比較好的體驗。
每個視窗寬度的最小值是觸發響應的關鍵值，因此我們給這些用于觸發的關鍵值起了個名字叫「Breakpoint」，每個 Breakpoint 觸發一種響應策略。
2. 流動柵格（Fluid Grid）
流動柵格系統是編輯內容，儀表板，圖像，視頻，數據可視化等理想的響應策略。當窗口縮小時，內容將動態地發生變化，文本會進行換行，元素也會變窄。然而，這些元素在內容寬度縮小到下一個臨界值之前，布局是不會變化的。在各種情況下，對用戶來說，擴展內容的大小比擴展可見內容的數量更有用。
所以我想說的是，斷點 BreakPoint 只是一個更改布局的參考點。這就是為什么列寬和水槽的數量不會改變的原因，因為我們想讓設計師在考慮布局時能夠更容易地創建一致性。內容寬度會隨著窗口的縮放而發生改變，例如圖片會縮小，文本會換行。水槽的寬度不一定是固定的，可以隨著頁面寬度變化。
在每個斷點處，列計數是固定的，列寬度是最小網格 8PT 的倍數。行高是列大小的倍數，遵循推薦的縱橫比。邊距和填充是小單位的固定倍數。在斷點之間，實際列寬是網格區域的百分比，而不是一個小的單位倍數。內容尺度流暢。
首先從所以屏幕大小中選擇一個基本尺寸，然后按照推薦的縱橫比以基本大小的倍數構建每個響應式尺寸。當每個塊使用相同基礎大小的倍數時，就會出現網格。遵循此方法可確保柵格系統一致性，甚至跨產品的一致性。
3. 混合柵格（Hybrid Boxes）
在實際項目中，使用流動網格和固定網格的組合也是常見的做法。網站通常是流動網格，因為它要去適應各種不同終端的大小。后臺系統設計、工具型的界面設計就比較經常使用網格和流動網格組合的形式。例如的后臺管理系統（dashboard）側邊欄是固定網格，右側內容是流動網格。混合柵格在每個維度上有不同的縮放規則，所以它們不使用統一的縮放比。當用戶需要調整瀏覽器的大小以使內容在一個維度上伸縮而在另一個維度上不伸縮時，便使用混合網格。
1. 靈活面板（Flexible panels）
靈活的面板允許折疊和擴展狀態。面板的展開狀態為固定寬度，用戶無法調節。當用戶將鼠標懸停在折疊的面板上時，面板就會展開。當靈活的面板擴展時，它們要么壓縮內容和網格，要么將內容推到瀏覽器邊緣之外。
2. 固定面板（Fixed panels）
固定面板保持靜態寬度，不能折疊，也存在于響應網格之外。
3. 懸浮面板（Floating panels）
此面板樣式漂浮在主要內容區域之上，不影響響應網格。浮動面板將任何 UI 元素隱藏在其下方，用戶必須將其移除。內聯菜單、下拉菜單和工具提示也是浮動的。
寫這篇文章的目的是想提供一些關于如何在響應式設計中使用柵格系統，我知道對于我自己來說，我花了很多時間理解網格是如何工作的。我在 YouYube 上看了很多視頻，也閱讀了大量的文章，但每個人都在關注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。
你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的，你將會開始閱讀這些設計系統。為了幫助理解，這里有一些設計系統概述了它們的網格使用：
在完全理解了網格的工作原理之后，你將成為了一名更好的設計師，因為你知道了你的設計將如何在臨界值之間進行轉換。你也可以落地你的設計，使它們能夠達到像素級完美。這樣的規范帶來了更一致，更簡潔的設計，當用戶從一個界面到另一個界面流轉時，這真的提升了產品的檔次。我建議在你的設計中去應用這些網格，并和開發同學一起，以實踐的方式將它們落地，這將會是一個非常不錯的進步。
文章來源：優設 作者：IvanZheng