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