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