超全面總結！如何利用柵格系統做響應式設計？
@UX-BOY ：本文主要與大家分享如何利用柵格系統完成後臺頁面響應式設計，介紹響應式設計的思路與方法。
一、什麼是響應式？
按照本人自己的理解，響應式就是通過合理的設計方案配合規範的技術實現策略，使同一個 Web頁面在各個終端（裝置）不同解析度螢幕上都能有最佳的使用者體驗。
這裡說是使用者體驗而不是視覺效果是因為使用者體驗包含了效能、互動、效率等多方面內容，也就是說，對於一個線上的響應式頁面，我們不僅要關注視覺上看到的，也要關注我們操作、使用時的感受，這些綜合因素最終影響著使用者使用後臺系統時的效率與體驗。而這裡我提到的「合理的設計方案」就是本篇文章跟大家分享的重點：如何利用柵格系統完成後臺頁面的響應式設計。對於互動與效能方面內容，本篇文章不做介紹，因為兩者涉及到我不太瞭解的技術相關知識。我提出這個觀點主要希望大家在執行設計時，能有更全域性的考慮，多跟互動與開發溝通，協力打造更好的使用者體驗。
二、響應式響應的是什麼？
響應就是系統對於外部變化的反饋跟適應，響應式就是系統做出這種反饋所依據的方案與策略。對於一個 Web頁面，外部的變化是指媒介（Media）與視窗（Viewport）的變化，媒介指 Web頁面執行在哪些裝置的螢幕上（手機、平板、PC、Mac等），視窗指瀏覽器用來顯示網頁內容的視窗，也就是瀏覽器去掉標籤欄、位址列、工具欄之後顯示內容的視窗大小。所以對於一個 Web頁面而言，響應式響應的就是媒介與視窗的變化，響應的結果在視覺上表現為頁面在不同媒介、不同視窗下會有不同的佈局結構、版式設計以及不同數量資訊的展示。
三、響應式的目的是什麼？
後臺系統做響應式設計的目的：提高螢幕利用率，最大化操作效率。
提高螢幕利用率最簡單的理解就是在大螢幕上顯示更多內容，在小螢幕上通過資料篩選展示關鍵資訊。一直以來大家普遍認為移動端碎片化嚴重，但實際上桌面端裝置的解析度也是有著不太均勻的分佈，而隨著新裝置的更新，更多高解析度螢幕不斷加入，這種碎片化的趨勢會更加明顯，因而要想利用好每一塊螢幕，讓不同解析度的使用者都有好的體驗，顯然傳統固定的佈局是做不到了。
後臺系統的應用特性，決定了響應式在後臺設計中具有很高的實用價值。後臺系統有兩大主要功能：檢視與操作。檢視主要是各種資料，是系統自動生成的內容；操作是需人工干預、人工決策的任務，檢視的資料為操作提供了依據，而操作支撐了公司或部門業務的正常執行。所以後臺系統設計最基礎的目標之一是如何通過良好的資料展示幫助使用者提高操作、決策效率，而充足的展示空間顯然是實現這一目標的基礎，響應式設計通過為每個解析度設定合理的版式佈局，使資料在每塊螢幕上都儘可能展示的最佳。優化後的資料展示，幫助使用者更高效獲取資訊，從而提高了使用者使用後臺系統的效率與體驗。
四、為何要利用柵格系統來進行響應式設計
響應式可以響應的前提有兩點：頁面佈局具有規律性；元素寬高可用百分比代替固定數值，而這兩點正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式的設計是順理成章的，也比較高效快捷，所以響應式與柵格化天生一對好搭檔。
柵格系統頁面佈局具有規律性、元素寬高可用百分比表示：
五、利用柵格系統完成後臺頁面響應式設計的步驟
1. 確立設計稿基準尺寸
設計稿基準尺寸是指我們從哪一個解析度開始設計，也就是我們新建畫板時畫板的尺寸應該是多大。而這個尺寸確定的主要依據是我們後臺系統所面向的主要使用者的螢幕解析度；我們分兩大類情況來討論這個問題。
如果我們的系統是給公司內部員工使用，由於公司批量採購裝置的原因，公司內部員工的螢幕解析度往往會比較統一，這種情況下我們需要拿到這個資料，然後以它作為基準尺寸開始設計。因為雖然響應式設計的目標是讓頁面在每個解析度下都有最佳的體驗，但實際開發中畢竟存在損壞，設計還原很難100%，因而大多數情況下還是基於基準尺寸的設計與開發，在使用者端顯示效果最佳、體驗最好。
如果我們的系統是平臺級面向全網使用者，或者雖然是公司內部使用，但是並不能統計到內部員工螢幕解析度情況，就可以以1440*900作為基準尺寸開始設計。從統計資料來看，目前國內 PC端使用者螢幕解析度排名前三的分別是1920*1080、1366*768、1400*900；1440的尺寸實際上是處於中間位置，如果以它為基準設計，最終向上向下響應適配後，相對誤差最小，從而達成使用者體驗的最大公約數。
2. 確定頁面佈局結構
頁面的佈局結構，是頁面基本框架，後續的設計都是在這個大的框架下完成的，所以確定頁面基準設計尺寸後，需要跟互動設計師或產品經理配合，根據實際業務情況討論確定頁面佈局結構。一般來講，後臺系統有兩種最典型的頁面佈局結構：左右佈局與上下佈局。
△ 上下佈局
上下佈局的結構在傳統網頁中非常常見，而在後臺系統中並不常用。這種佈局的優點是符合使用者認知，遵循使用者從上而下瀏覽頁面獲取資訊的習慣；貫穿全屏的導航欄設計也使頁面顯得正式穩重，除卻導航欄之後相對較大的空間也為內容展示提供了比較充足的空間。缺點是頂部一級導航受頁面寬度限制，數量會比較侷限，同時導航層級較深時，互動效率也不夠理想。所以該佈局適合那些導航層級較少，內容展示充分的後臺系統設計。
△ 左右佈局
擁有側邊導航的左右佈局頁面結構，是在後臺系統中更常見的頁面佈局形式。側邊導航欄可以固定也可以收起，相對比較靈活，同時文字橫向排列的形式可以在豎向上展示更多內容，因此側邊導航比頂部導航能容納更多一級內容，而層疊式的內容展示也使得一、二、三級導航內容關聯更為順暢，可擴充套件性也得到加強；由於側邊欄可以常駐在頁面左側，所以對於右側內容的指示性也優於頂部導航，切換起來也更加方便。但同時，因為側邊欄的常駐，導致右側內容區域空間被擠掉部分，所以相對上下佈局的結構，左右佈局的結構，內容區域空間會比較小；一般為了與頁面其它區域做區分，導航部分會用更深的顏色、安排更多的圖示和文字，這也導致了在視覺上左右佈局的頁面不夠平衡，會有左邊重右邊輕的感覺。
3. 對內容區域建立柵格系統
根據不同的佈局型別，對頁面內容區域建立柵格系統。對於一個利用柵格系統做響應式設計的頁面來講，主要有三大數值需要規範：Column、Gutter、Margin；對於 Column、Gutter 我們在 ofollow,noindex" target="_blank">《超全面！柵格系統及其在後臺設計中的應用總結》 內容中已經有很詳細的介紹，不再贅述，而 Margin 是頁邊距，主要確定了內容區域距離頁面邊緣的距離，它分佈在內容區域的兩側，主要作用是通過留白把內容區域與周圍環境隔離出來，從而突出內容區域的顯示，此外還可通過 Margin值來調整內容區域顯示比例，使頁面在視覺上有更好的呈現效果。所以一個用於響應式的柵格系統事實上由 Columns、Gutters、Margins 三部分組成。
△ 上下佈局結構與其對應的柵格系統
△ 左右佈局結構與其對應的柵格系統
4. 根據實際業務內容確定盒子（Box）比例
△ 上下佈局結構的盒子
△ 左右佈局結構的盒子
5. 確定響應策略
響應策略就是當視窗（Viewport）發生變化時，內容區域的元素如何去響應，具體到我們當前的柵格系統，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的佈局如何調整。
為了方便直觀的向開發工程師與團隊裡的其它小夥伴溝通，我們可以把這個響應策略製作成如下的表格，並在頁面中標註說明相關元素的變化規律，供自己與開發參考。
由於帶左側導航的響應式規則相對複雜，所以我先以它為例跟大家交流下響應策略如何制定。
△ 左右佈局響應策略表
如圖，響應式是以視窗的最小寬度作為基本依據來制定每種寬度下 Columns、Gutters 與 Margins 的響應策略，也就是說 Viewport Min-width 是做出響應的觸發條件，視窗每達到一個最小寬度，就會觸發該寬度下預設的頁面佈局方式，而每種佈局都是在該寬度下的最佳佈局，也是因此，響應式才會在各種複雜解析度條件下都能給使用者比較好的體驗。
每個視窗寬度的最小值是觸發響應的關鍵值，因此我們給這些用於觸發的關鍵值起了個名字叫「Breakpoint」，每個 Breakpoint 觸發一種響應策略，而每個策略持續（保持）的寬度範圍就是圖中綠色矩形的範圍。以圖中第二行矩形為例，該矩形代表的響應策略是：欄目數是8、水槽寬度16（SM）、頁邊距32、側邊欄收起且僅展示圖示，當點選側邊欄展開圖示時側邊欄以 Push 的方式展開，該策略觸發的 Breakpoint 是768，保持範圍是577~768。也就是當視窗寬度縮放至768時，欄目數量由上一級的12變為8，水槽寬度由24變為16，側邊導航由完全展開狀態自動收起文字部分，僅保留圖示，然後保持這些關鍵數值不變，直到視窗寬度達到另一個Breakpoint。需要特殊說明的是，第一行矩形中0~576（Min&Fixed）這個範圍的視窗寬度是固定的，也就是在該套響應策略中，頁面最小響應到576的頁面寬度，當視窗到達這個寬度時，瀏覽器會限制視窗進一步縮小，因為當頁面寬度比它還小時已經無法有效展示資料了，所以進一步的縮放是毫無意義的。
左右佈局響應策略動態演示
考慮到 gif 被壓縮後顯示效果不理想，所以我做了一小段視訊來幫助大家更好的理解上述響應策略在實際頁面中如何發揮作用。視訊連結→ https://v.qq.com/txp/iframe/player.html?vid=w0711l8yewc
左右佈局響應策略標註
對於上下佈局的後臺系統我們根據內容區域（Container）寬度定義的不同方式，可以把它們分為兩類：
內容區域定寬的後臺系統（Fixed-width Container）
內容區域定寬是指內容區域在每一組視窗寬度區間內，都會設定一個最大值（Max-with），當內容區域寬度小於最大值時，區域內元素會響應視窗的變化；達到最大值後，內容區域不再響應視窗的變化，而是寬度保持該最大寬度值不變，此時我們通過增加頁面兩側的margin值來響應視窗的變化。Flex Margin 就是應對此情況的動態頁邊距。
上下佈局響應策略表（內容區域定寬（ Fixed-width Container ））
內容區域寬度流式（fluid-width Container）
內容區域寬度流式（fluid-width Container）的後臺系統，它的內容區域（Container）距離頁面兩側的頁邊距 Margin 是定值，因此視窗有多大內容區域就展示多大。
六、問題
1. 後臺系統必須做成響應式麼？
並不是必須的，是否要做響應式主要是根據後臺產品面向的使用者來定的。如果是公司內部使用的系統，且員工配備的桌面裝置都是有統一的解析度，就可以不做響應式；如果是面向全網使用者的後臺產品（比如淘寶商家的後臺管理系統，阿里雲的控制檯）或公司（部門）內部的桌面裝置並沒有統一的解析度規格，那麼就需要做成響應式。當然了，更實際的環境中是否做響應式還有技術實現、時間、人員成本等各方面因素的考慮，有時為了儘快的讓業務運營起來，後臺系統會做的比較「簡陋」。
2. 為什麼柵格系統沒有適配到移動端的分享？
因為後臺管理系統的使用場景主要是工作時間在桌面裝置上使用，由於龐雜的資料內容在移動裝置上展示困難、操作不便，因而很少有公司會把後臺系統響應到移動端使用，所以我們今天說的後臺響應式僅針對桌面裝置螢幕。
3. 對於iMac4k、5K這類超高解析度的螢幕如何做響應式設計？
對於左右佈局的後臺系統，實際上它是全屏展示的，也就是螢幕有多大就展示多大，因而 iMac 的響應策略也是按照左右佈局響應策略表裡的策略來響應。
對於上下佈局，內容區域定寬的後臺系統，iMac 的響應策略使用上下佈局響應策略表裡的策略來響應即可；
對於內容區域寬度流式的後臺系統，iMac 的響應策略可以參考左右佈局的響應策略表來處理欄目、水槽的變化，頁邊距保持定值即可。
4. 在以8為原子單位的柵格中，Margin需要按8n的規律變化麼？
能以8n的規律變化是最好的，如果無法做到也可以使用其它數值。Margin 是頁邊距，主要作用是通過留白的方式將頁面內容區域與周圍環境隔離區分出來，從而突出內容；一般我們會優先考慮內容區域匹配8n的變化規律，安排完內容區域後剩餘的空間自然成為頁邊距（margin）。
5. 響應策略制定的時機是什麼？如何去制定？文中示例的策略表我可以借鑑套用麼？
響應策略表一般是在主要頁面設計完成，要交付開發實現的時候來跟開發一起商定。這塊需要注意兩點：
如果開始設計時就已確定頁面是要具備響應式的能力，那麼最好開始設計時就去跟開發溝通，看他們現有技術是如何來做響應式的，因為他們很有可能是在用 Bootstrap、Foundation 這類元件庫來做開發，而這些元件庫一般都有自己現成的響應規則，這種情況下我們需要了解開發他們的規則，讓自己的設計匹配已有的策略。當然了，如果他們的規則並不能很好滿足我們的業務需要，一般也是可以在這些元件的基礎上讓開發去修改調整的。
響應策略表只是對響應方式的結果的呈現，而這個策略的制定事實上是從設計開始執行時就要去考慮的，從我個人經驗來講，我一般會挑兩類頁面來做響應策略的研究與適配，一個是控制檯（Dashboard）頁面，另一個是表單（Form）頁面。優先規劃這兩個頁面的設計，考慮他們在各個 Viewport 下如何佈局如何展示如何縮放變化，並且跟開發溝通想法，聽取意見，制定初步的響應計劃，當這兩個頁面設計完成，就可以更大範圍的執行設計。
文中示例的策略表是基於我自己專案經驗總結而來，具有實際應用價值，可以借鑑。但我更想做的是通過那個表希望跟大家分享一種與開發交流、溝通的方法和技巧。實際工作中我們並非一定要做出那麼一個經過精心設計細緻考慮的表，我們可能會找張紙畫一畫給開發看就可以了，這塊的重點是如何把我們設計師的想法更視覺化更直觀準確的傳達給開發工程師。所以那張表是啟發而非標準。
△ 控制檯（Dashboard）頁面示例（素材圖片作者：Coderthemes）
△ 表單（Form）頁面示例
歡迎關注作者的微信公眾號：「UX設計詩」
