2020-1-29 鶴鶴
關于柵格系統文章不少，但鮮有專門針對柵格系統在后臺設計中相關應用的介紹。本文拋磚引玉，希望引起更多同行的交流與討論
柵格系統的目的
柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；柵格化提高了頁面布局的一致性跟復用性；避免了設計師與開發者在細節上的反復溝通確認，從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。
但實際應用中，由于對柵格系統理解的不充分，很多設計師在應用柵格系統的實踐中產生了各種問題，本來幫助設計的工具現在反而成了設計中需要解決的問題。結合我自己后臺設計的經驗，本篇文章跟大家聊聊柵格系統在后臺設計中如何應用。
建立柵格系統的方法與規則
1、第一步：確立柵格系統的原子單位（網格）
如圖，一個比較完整的柵格系統是由許多規格一致的小網格組成，這些網格輔助我們更規范的排版、布局。
后臺系統設計中，由于后臺頁面主要以Web形式呈現，而對于web，用戶已習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此，在不考慮內容優先級的情況下，Web可以實現豎直方向的“無限”加載，即豎直方向可以無限延伸，因此基于Web的后臺頁面，它的柵格系統在水平方向的柵格可以不體現出來，我們在執行設計時只要在豎直方向保持規律的變化就可以了。標準的柵格系統簡化為適用于Web后臺的設計如下圖所示
如上圖，對于后臺設計來講，柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，欄目（Column）是接納網頁內容的容器，水槽（Gutter）用來調節相鄰兩個欄目間距，把控頁面留白；由于欄目跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的第一步需要先定義好柵格的原子單位“網格”的大小。根據本人的設計實踐以及其它已有規范經驗，目前后臺柵格系統網格大小定義為8是最普適易用的。具體原因有以下幾點：
（1）目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被8整除，使用8作為最小原子足夠普適.
我們選取4、6、8、10、12為柵格的候選原子單位，然后用目前主流屏幕分辨率與其相除，判斷各個分辨率在豎直（Y）與水平 (X)方向能否被候選原子整除，統計結果如圖。
顯然，對于目前市場桌面設備屏幕而言，4是整除率最高的一個原子，接下來依次是8、10、6、12。但4作為基本原子實在過于小了，太小的步進單位將導致我們決策成本的增加，因為我們將元素間間距增加4px或者減小4px視覺感受到的差異并不明顯，這種情況下我們為了找到那個“合適、滿意”的間距，就需要反復調試，這就造成了時間上的浪費，尤其對于沒有經驗的新人，這點會更為突出。但這種調整并不合適，原因是后臺管理系統設計重點在于面向用戶使用的效率與邏輯，其次才是視覺呈現，使用柵格系統的目的之一也是想減少設計師在“細節”上的糾結，希望設計師站在更全局的角度看待設計，合理安排時間，因此我們舍棄4。在剩下的6、8、10、12四個單位中，8的整除率最高（80%），以8像素作為一個步進單位的變化，我們視覺上也是能感受到較為明顯的差異，因此選取整除率最高的8做為柵格系統的原子單位。
（2）以8為單位符合“偶數原則”。偶數原則可以在頁面縮放中的避免類似于0.5、0.75、1.25等次像素的出現，從而使頁面各類元素在大多數場景下都能有比較精致的細節表現
雖然對于后臺設計而言，通常設計師是直接在目標尺寸下進行設計，并在此基礎上標注、切圖給開發實現，并不存在像移動端那樣需要對各種尺寸、各種像素密度的設備進行適配的情況，但對于Web頁面來講，仍存在向上向下適配的可能，因而從頁面的兼容性、可擴展性及可維護性層面來講，我們設計師還是有必要考慮的更加長遠，遵循“偶數原則”可以上避免各種潛在的問題。
（3）開發工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基于8的原子單位來設計，因此如果設計師也使用以8為基本單位的柵格系統，開發與設計師相互對接就會更加方便，開發實現頁面時也能更高品質的去還原我們設計師的稿件
2、第二步：建立基于原子單位的柵格系統
經過第一步討論，我們現已確定后臺設計的原子單位為8，而我們也知道柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度。
通常，在一套后臺設計系統中，水槽寬度會是幾個比較固定的數值（因為后臺系統的頁面相對于其它類型的Web頁面，表現的更加整齊、規律，所以留白的方式比較固定，加之后臺往往有大量的數據、內容需要呈現，所以要盡可能提高頁面利用率，可以留白的空間也比較有限）；而欄目寬度更加靈活，它可以根據頁面水平方向尺寸的改變而增大或減小以響應頁面的變化（遵循8n的變化規律，此處變化規律在下期文章《柵格化與響應式》里會詳細介紹）。
當我們做后臺設計的時候首先需要確定在什么樣的分辨率下做設計，也就是首先需要確定設計稿的尺寸，當設計稿尺寸確定后，便可建立基于該尺寸的柵格系統。假設頁面內容區域寬度為W，欄目個數為A，水槽個數為B，欄目（Column）寬度為C，水槽（Gutter）寬度為G，則W=A*C+B*G。柵格系統建立初期，由于我們并不確定之后會有什么樣的內容呈現我們的頁面上，所以為了讓柵格更加靈活、普適，我們先假定單個欄目與水槽的寬度是相同的，即C=8n（n=1、2、3、4...）=G，然后以此將頁面內容區域等分，形成初步的柵格，之后再按實際內容需要，按比例調整兩者寬度或者按比例對兩者進行組合，形成承載業務內容的盒子。目前有兩種比較主流的等分方式：12等分與24等分。
12等分的柵格系統在流行的前端開發開源工具庫Bootstrap與Foundation中廣泛使用，適用于業務信息分組較少，單個盒子內信息體積較大的中后臺頁面設計；
24等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對12柵格系統，24柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。
柵格系統的應用
1、頁面布局與版式設計
（1）、了解承載業務內容的盒子模型（Box Model）
建立好柵格系統后，就可以根據自己的實際業務，在柵格系統上安排內容了。頁面上最終承載內容的其實是一個個“盒子（Box）”,這個盒子的高度由盒子要容納的內容與頁面版式設計決定，按8n規律變化；寬度則由欄目與水槽按比例組合得到。
在柵格系統上容納業務內容的容器我們把它稱之為盒子（Box），柵格系統上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。如圖所示，當我們瀏覽任何一個網頁時，右鍵>檢查元素（審查元素），然后在style菜單下就可以看到這個盒子結構了。其中Padding就是主體內容（Element）距離盒子外側的距離，我把它稱之為內邊距，（Element可以是一個按鈕，一段文本、一張圖片或者一個表格等；）而Margin就是相鄰兩個盒子間的距離，對應在后臺柵格系統中其實就是水槽的大小。了解完柵格系統的盒子模型之后，下一步我們需要根據具體業務內容來確定盒子的寬度，也就是如何利用柵格系統做實際內容的布局與版式設計
（2）、根據業務內容分配頁面比例，確定盒子寬度
以24柵格系統為例，一個24柵格系統可以根據業務需要被2等分、3等分、4等分、6等分、8等分、12等分，還可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不對稱分割，具體采用哪種比例的組合需要我們根據自己業務需求來定，我們此處所說的比例實際上就是盒子的寬度。
上圖展示了盒子在24柵格系統上的分布情況，圖中只列舉了部分比例，實際業務中，同一個頁面上使用一到兩組比例值的組合來布局是比較合適的（如下圖），組合形式過多頁面就會顯得瑣碎、雜亂，不利于閱讀和使用。因為盒子的高度根據內容來定，故下圖中沒有體現高度這一維度的變化規律。
當我們完成上圖規劃后，需要做的便是根據實際內容往每個盒子里安排內容，做視覺與交互的落地了。
2、元素對齊與間距設定
柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局，而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與布局，然后再填充內容、調整細節。
柵格系統輔助對齊的作用類似于各種設計軟件中的參考線，它能讓我們更直觀的安排、調整內容的位置及對齊方式，可以使內容變得規律、有序，方便用戶瀏覽閱讀，幫助用戶提高獲取信息的效率。
柵格系統對于元素間間距設定的幫助是直觀的，當我們定義了柵格原子單位為8時，這意味頁面上各元素間距的變化也應遵循8n的規律，一致的變化規律讓頁面富有節奏感跟韻律感，在提高頁面一致性的同時也減少了設計決策成本。我們知道，柵格系統中水槽與欄目的變化也遵循8n的變化規律，此處n為大于0的正整數，即n=1、2、3...；但是用于規范元素間距的8n，n可以是0.5、1.5這類包含二分之一8的情況，原因是實際工作中，我們面臨的情況是復雜的，這樣處理可以讓間距的設定適應一些特殊的場景，從而使其更靈活普適。
注意事項
1、水槽寬度的設定
確定好內容模塊比例后，我們會發現由于之前等分的緣故，此時水槽較寬，我們需要調整水槽寬度到一個合適的值。
水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設計決策成本，我們會事先設定好一系列水槽寬度，并定義好每個寬度對應的使用場景，然后設計中根據每個場景使用對應數值就可以了。我定義了一組水槽的值是8、16、 24、32 、40，為了區分它們的使用場景我們依次為其命名為XS、SM、MD、LG、XL。根據實踐經驗，正常情況下，兩個盒子間距（水槽）的值為24（MD）時，視覺上是最為舒適。
柵格化工具推薦（插件請在附件中下載）
Ps柵格系統工具
1、PS自帶柵格系統設定：新建參考線版面（重點推薦）
Ps有個功能叫做“新建參考線版面”，打開這個面板后，在預設這里可以看到Ps已經預設了8列、12列、16列、24列的柵格系統，選擇對應列數就可以看到頁面上參考線的變化。預設中“裝訂線”的寬度即柵格系統中水槽的寬度。默認均為20px,我們可以根據之前討論的8的倍數原則，將其手動更改為24；
如果預設的柵格系統無法滿足我們工作需要，我們也可以自定義柵格系統，并能將柵格參數保存為預設，這樣就可以重復利用自定義的柵格系統了；柵格系統還可以選擇將其應用在當前畫板或者所有畫板，十分方便易用。由于是Ps自帶的參考線，所以它可以通過快捷鍵靈活的控制顯示或隱藏
2、利用Ps標注工具Assistor Ps 進行柵格系統的建立
Assistor Ps在之前主要是一款頁面標注工具，但是隨著藍湖等自動標注工具的流行，這個小軟件基本沒人用了，但我發現它設置參考線的功能還是很強大的，可以媲美大名鼎鼎的guideguid（這款插件目前對Ps cc 2017及以上版本貌似已經不支持，軟件本身安裝也挺麻煩），所以就介紹給大家。（安裝包在文末下載，Win&Mac，解壓后跟常規裝軟件一樣，正常安裝就行）。但是這個插件由于很多數值都要自己算，實際上沒有Ps自帶的新建參考線面板的功能好用。算是一個工具的補充吧
Sketch柵格系統工具
1、Sketch自帶柵格系統設定：Layout Settings
Sketch端利用sketch自帶的柵格工具Layout Settings即可完成柵格系統的設置，由于sketch的柵格工具是自帶的，與Ps類似，它也可以通過快捷鍵快速顯示或隱藏，點擊左下角“Make Default”還可以將自定義的柵格系統設置為默認的柵格系統，方便以后重復調用，但sketch貌似只能儲存一組柵格系統的數值，而Ps可以儲存多組。
2、Sketch柵格系統插件：BootstrapGrid-maste
BootstrapGrid是一個專門用于建立柵格系統的插件（插件在文末附件中下載），插件可以對柵格系統的基本數據做個性化的設定，可以對多個形狀同時建立柵格系統，還可以通過快捷鍵快速調用。具體用法：先選中要建立柵格的畫板或者畫板里的形狀（可以多選），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）
柵格系統參數設計
單個形狀（畫板）建立柵格系統動圖演示
多個形狀（畫板）建立柵格系統動圖演示
跨平臺的web端柵格工具 http://grid.guide/
GridGuide 最大優點是可以針對一種柵格系統生成4組不同水槽寬度的柵格化方案，能比較直觀的比較不同水槽寬度下各個柵格系統的視覺感受。使用方法：在右上角設置好頁面寬度以及欄目數量，頁面內就會自動生成可以下載為png圖片的柵格。
QAQ(常見問題解答）
（1）當柵格系統中奇數不可避免的出現時，如何處理?
理想狀態下，我們應該調整內容區域的大小，使其盡可能成為可以被8整除的尺寸，但實際應用中，有時會出現無法整除的情況。基于對盒子模型的理解，此時我們保持padding、margin的值不變，改變盒子的大小去適應奇數的頁面（元素）即可,因為一致性跟效率才是柵格化要達成的首要目的，偶爾有一些不“完美”的尺寸是完全允許的，因為用戶在實際使用頁面時，并不能看到我們使用的柵格系統，也很難注意到那幾像素的變化，他們能感受到的是頁面整體呈現出來的節奏與韻律感，以及持續、一致的視覺語言帶給他們的嚴謹、可靠的心里感受。
（2）柵格系統必須以8作為原子單位？使用其它數值是否可以
首先需要指出的是使用其它數值當然也可以，柵格系統只是手段，提升設計效率、減少溝通成本、提高頁面一致性才是最終目的，所以如果你所在團隊有其它柵格化習慣，且一直以來效果良好，那么繼續使用它也是沒問題的。但是對于設計新人來講，如果能理解前人的經驗，并能較好的運用，對于他們來講，是會少一些彎路，更好的完成設計工作。
（3）柵格系統建立初期是否必須使欄目寬度與水槽寬相等，并等分內容區域？
建立柵格系統時并不是必須使欄目寬度與水槽寬相等，并等分內容區域。本篇文章介紹柵格系統時采用這種處理方式是為了讓大家更好的理解柵格系統建立的原理與過程，事實上，欄目的寬度在實際應用中往往大于水槽寬度，我們通常會先計劃好水槽的寬度、內容區域總寬度與欄目的數量，這時候欄目的寬度通過計算可得到，對于響應式頁面，欄目的寬度可以是百分比而不是具體的數值（關于響應式的內容下期文章跟大家分享）。
轉自UI中國-BYMD
