后臺設計經驗總結:柵格系統及其在后臺設計中的應用

2 評論 21693 瀏覽 120 收藏 25 分鐘

關于柵格系統的文章不少,但鮮有專門針對柵格系統在后臺設計中相關應用的文章。本文希望拋磚引玉,能引起更多同行的交流與討論。

文章大綱:

一、柵格系統的目的

柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考,它讓頁面設計變得有規律,從而減少了設計決策成本。柵格化提高了頁面布局的一致性跟復用性,避免了設計師與開發者在細節上的反復溝通確認,從而提升了整個設計開發流程的效率,并能幫助開發者實現較為理想的設計還原。

但實際應用中,由于對柵格系統理解的不充分,很多設計師在應用柵格系統的實踐中產生了各種問題,本來幫助設計的工具現在反而成了設計中需要解決的問題。結合我自己后臺設計的經驗,本篇文章跟大家聊聊柵格系統在后臺設計中如何應用。

二、建立柵格系統的方法與規則

1. 確立柵格系統的原子單位(網格)

如圖,一個比較完整的柵格系統是由許多規格一致的小網格組成,這些網格輔助我們更規范的排版、布局。

后臺系統設計中,由于后臺頁面主要以 Web 形式呈現,而對于 web,用戶已習慣通過鼠標滾輪或滾動條(scrollbar)來縱向瀏覽頁面內容。因此,在不考慮內容優先級的情況下,Web 可以實現豎直方向的「無限」加載,即豎直方向可以無限延伸。

因此基于 Web 的后臺頁面,它的柵格系統在水平方向的柵格可以不體現出來,我們在執行設計時只要在豎直方向保持規律的變化就可以了。

標準的柵格系統簡化為適用于 Web 后臺的設計,如下圖所示:

如上圖,對于后臺設計來講,柵格系統是由欄目(Column)跟水槽(Gutter)交替分布形成的,欄目(Column)是接納網頁內容的容器,水槽(Gutter)用來調節相鄰兩個欄目間距,把控頁面留白。由于欄目跟水槽的寬度是以網格作為基本單位來增加或者減小,所以柵格化的第一步需要先定義好柵格的原子單位「網格」的大小。

根據本人的設計實踐以及其它已有規范經驗,目前后臺柵格系統網格大小定義為8是最普適易用的。

具體原因有以下幾點:

(1)可以被8整除

目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被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)前端開源組件庫基于8的原子單位來設計

開發工程師使用的前端開源組件庫,比如: Metronic、Antdesign 等也是基于8的原子單位來設計,因此如果設計師也使用以8為基本單位的柵格系統,開發與設計師相互對接就會更加方便,開發實現頁面時也能更高品質的去還原我們設計師的稿件。

2. 建立基于原子單位的柵格系統

經過第一步討論,我們現已確定后臺設計的原子單位為8,而我們也知道柵格系統是由欄目(Column)跟水槽(Gutter)交替分布形成的,所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度。

通常,在一套后臺設計系統中,水槽寬度會是幾個比較固定的數值(因為后臺系統的頁面相對于其它類型的Web頁面,表現的更加整齊、規律,所以留白的方式比較固定,加之后臺往往有大量的數據、內容需要呈現,所以要盡可能提高頁面利用率,可以留白的空間也比較有限),而欄目寬度更加靈活,它可以根據頁面水平方向尺寸的改變而增大或減小以響應頁面的變化。

當我們做后臺設計的時候首先需要確定在什么樣的分辨率下做設計,也就是首先需要確定設計稿的尺寸,當設計稿尺寸確定后,便可建立基于該尺寸的柵格系統。假設頁面內容區域寬度為 W,欄目個數為 A,水槽個數為 B,欄目(Column)寬度為 C,水槽(Gutter)寬度為 G,則 W=A*C+B*G。

柵格系統建立初期,由于我們并不確定之后會有什么樣的內容呈現我們的頁面上,所以為了讓柵格更加靈活、普適,我們先假定單個欄目與水槽的寬度是相同的,即C=8n(n=1、2、3、4…)=G,然后以此將頁面內容區域等分,形成初步的柵格,之后再按實際內容需要,按比例調整兩者寬度或者按比例對兩者進行組合,形成承載業務內容的盒子。

目前有兩種比較主流的等分方式:12等分與24等分。

(1)12等分

12等分的柵格系統在流行的前端開發開源工具庫 Bootstrap 與 Foundation 中廣泛使用,適用于業務信息分組較少,單個盒子內信息體積較大的中后臺頁面設計。

(2)24等分

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的情況,原因是實際工作中,我們面臨的情況是復雜的,這樣處理可以讓間距的設定適應一些特殊的場景,從而使其更靈活普適。

四、注意事項

水槽寬度的設定

確定好內容模塊比例后,我們會發現由于之前等分的緣故,此時水槽較寬,我們需要調整水槽寬度到一個合適的值。

水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設計決策成本,我們會事先設定好一系列水槽寬度,并定義好每個寬度對應的使用場景,然后根據每個場景使用對應數值就可以了。

我定義了一組水槽的值是8、16、 24、32 、40,為了區分它們的使用場景我們依次為其命名為 XS、SM、MD、LG、XL。根據實踐經驗,正常情況下,兩個盒子間距(水槽)的值為24(MD)時,視覺上是最為舒適。

五、柵格化工具推薦

1. Ps柵格系統工具

(1)PS自帶柵格系統設定:新建參考線版面(重點推薦)

Ps 有個功能叫做「新建參考線版面」,打開這個面板后,在預設這里可以看到 Ps 已經預設了8列、12列、16列、24列的柵格系統,選擇對應列數就可以看到頁面上參考線的變化。預設中「裝訂線」的寬度即柵格系統中水槽的寬度。默認均為20px,我們可以根據之前討論的8的倍數原則,將其手動更改為24。

如果預設的柵格系統無法滿足我們工作需要,我們也可以自定義柵格系統,并能將柵格參數保存為預設,這樣就可以重復利用自定義的柵格系統了。柵格系統還可以選擇將其應用在當前畫板或者所有畫板,十分方便易用。由于是 Ps 自帶的參考線,所以它可以通過快捷鍵靈活的控制顯示或隱藏。

(2)利用Ps標注工具Assistor Ps進行柵格系統的建立

Assistor Ps 在之前主要是一款頁面標注工具,但是隨著藍湖等自動標注工具的流行,這個小軟件基本沒人用了。但我發現它設置參考線的功能還是很強大的,可以媲美大名鼎鼎的 guideguid,所以就介紹給大家。(安裝包在文末下載,Win&Mac,解壓后跟常規裝軟件一樣,正常安裝就行)

但是這個插件由于很多數值都要自己算,實際上沒有 Ps 自帶的新建參考線面板的功能好用,算是一個工具的補充吧。

2. 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)

柵格系統參數設計:

單個形狀(畫板)建立柵格系統動圖演示:

多個形狀(畫板)建立柵格系統動圖演示:

(3)跨平臺的web端柵格工具

GridGuide 最大優點是可以針對一種柵格系統生成4組不同水槽寬度的柵格化方案,能比較直觀的比較不同水槽寬度下各個柵格系統的視覺感受。

使用方法:在右上角設置好頁面寬度以及欄目數量,頁面內就會自動生成可以下載為 png 圖片的柵格。

七、常見問題解答

(1)當柵格系統中奇數不可避免的出現時,如何處理?

理想狀態下,我們應該調整內容區域的大小,使其盡可能成為可以被8整除的尺寸,但實際應用中,有時會出現無法整除的情況?;趯凶幽P偷睦斫?,此時我們保持 padding、margin 的值不變,改變盒子的大小去適應奇數的頁面(元素)即可。

因為一致性跟效率才是柵格化要達成的首要目的,偶爾有一些不「完美」的尺寸是完全允許的,因為用戶在實際使用頁面時,并不能看到我們使用的柵格系統,也很難注意到那幾像素的變化,他們能感受到的是頁面整體呈現出來的節奏與韻律感,以及持續、一致的視覺語言帶給他們的嚴謹、可靠的心理感受。

(2)柵格系統必須以8作為原子單位?使用其它數值是否可以

首先需要指出的是使用其它數值當然也可以,柵格系統只是手段,提升設計效率、減少溝通成本、提高頁面一致性才是最終目的,所以如果你所在團隊有其它柵格化習慣,且一直以來效果良好,那么繼續使用它也是沒問題的。

但是對于設計新人,如果能理解前人的經驗,并能較好的運用,對于他們來講,是會少一些彎路,更好的完成設計工作。

(3)柵格系統建立初期是否必須使欄目寬度與水槽寬相等,并等分內容區域?

建立柵格系統時并不是必須使欄目寬度與水槽寬相等,并等分內容區域。

本篇文章介紹柵格系統時采用這種處理方式,是為了讓大家更好的理解柵格系統建立的原理與過程。事實上,欄目的寬度在實際應用中往往大于水槽寬度,我們通常會先計劃好水槽的寬度、內容區域總寬度與欄目的數量,這時候欄目的寬度通過計算可得到,對于響應式頁面,欄目的寬度可以是百分比而不是具體的數值。

插件下載:AssistorPs&BootstrapGrid

 

作者:UXBoy,公眾號:UX設計詩(ID:uxpoet)

圖片素材作者:Avian Rizky

來源:公眾號:UX設計詩

本文由 @UXBoy 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

作者:李禾子

來源公眾號:硅星人Pro(ID:Si-Planet),硅(Si)是創造未來的基礎,歡迎來到這個星球。

本文由人人都是產品經理合作媒體 @硅星人 授權發布,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我想咨詢下如果后臺系統,我們設計稿起步是1366的尺寸,左側菜單是160是固定的,也就是1366-160=1206。那么我試了下自動24柵格,水槽定的是16,那么柵格就被8除不了了還是單數,如果定柵格可以以8除的了,那水槽就不行了,請問要怎么做呢?那每個原子柵格以八為網格,一個柵格假如說是由四個原子柵格組成那就是32,水槽就兩個原子柵格組成就是16,依次這樣排下去,不要訂是不是一共24柵格呢,是否可行?跪求作者,感謝

    回復