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

一、柵格系統的目的

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

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

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

1. 確立柵格系統的原子單位（網格）

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

后臺系統設計中，由于后臺頁面主要以 web 形式呈現，而對于 web，用戶已習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此，在不考慮內容優先級的情況下，web 可以實現豎直方向的「無限」加載，即豎直方向可以無限延伸，因此基于 web 的后臺頁面，它的柵格系統在水平方向的柵格可以不體現出來，我們在執行設計時只要在豎直方向保持規律的變化就可以了。標準的柵格系統簡化為適用于 web 后臺的設計如下圖所示。

如上圖，對于后臺設計來講，柵格系統是由欄目（column）跟水槽（gutter）交替分布形成的，欄目（column）是接納網頁內容的容器，水槽（gutter）用來調節相鄰兩個欄目間距，把控頁面留白；由于欄目跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的第一步需要先定義好柵格的原子單位「網格」的大小。根據本人的設計實踐以及其它已有規范經驗，目前后臺柵格系統網格大小定義為 8 是最普適易用的。具體原因有以下幾點：

可以被 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 做為柵格系統的原子單位。

符合「偶數原則」

以 8 為單位符合「偶數原則」。偶數原則可以在頁面縮放中大程度的避免類似于0.5、0.75、1. 25 等次像素的出現，從而使頁面各類元素在大多數場景下都能有比較精致的細節表現。

雖然對于后臺設計而言，通常設計師是直接在目標尺寸下進行設計，并在此基礎上標注、切圖給開發實現，并不存在像移動端那樣需要對各種尺寸、各種像素密度的設備進行適配的情況，但對于 web 頁面來講，仍存在向上向下適配的可能，因而從頁面的兼容性、可擴展性及可維護性層面來講，我們設計師還是有必要考慮的更加長遠，遵循「偶數原則」可以大程度上避免各種潛在的問題。

前端開源組件庫基于 8 的原子單位來設計

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

網站欄目：網站建設中關于柵格系統的應用總結及后臺設計
分享URL：http://www.js-pz168.com/news/106673.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯