網(wǎng)站建設(shè)中關(guān)于柵格系統(tǒng)的應(yīng)用總結(jié)及后臺設(shè)計

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

一、柵格系統(tǒng)的目的

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

但實際應(yīng)用中，由于對柵格系統(tǒng)理解的不充分，很多設(shè)計師在應(yīng)用柵格系統(tǒng)的實踐中產(chǎn)生了各種問題，本來幫助設(shè)計的工具現(xiàn)在反而成了設(shè)計中需要解決的問題。結(jié)合我自己后臺設(shè)計的經(jīng)驗，本篇文章跟大家聊聊柵格系統(tǒng)在后臺設(shè)計中如何應(yīng)用。

二、建立柵格系統(tǒng)的方法與規(guī)則

1. 確立柵格系統(tǒng)的原子單位（網(wǎng)格）

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

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

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

可以被 8 整除

目前主流桌面設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被 8 整除，使用 8 作為最小原子足夠普適。

我們選取4、6、8、10、 12 為柵格的候選原子單位，然后用目前主流屏幕分辨率與其相除，判斷各個分辨率在豎直（y）與水平（x）方向能否被候選原子整除，統(tǒng)計結(jié)果如圖。

顯然，對于目前市場桌面設(shè)備屏幕而言， 4 是整除率高的一個原子，接下來依次是8、10、6、12。但 4 作為基本原子實在過于小了，太小的步進單位將導(dǎo)致我們決策成本的增加，因為我們將元素間距增加4px或者減小4px視覺感受到的差異并不明顯，這種情況下我們?yōu)榱苏业侥莻€「合適、滿意」的間距，就需要反復(fù)調(diào)試，這就造成了時間上的浪費，尤其對于沒有經(jīng)驗的新人，這點會更為突出。但這種調(diào)整并不合適，原因是后臺管理系統(tǒng)設(shè)計重點在于面向用戶使用的效率與邏輯，其次才是視覺呈現(xiàn)，使用柵格系統(tǒng)的目的之一也是想減少設(shè)計師在「細節(jié)」上的糾結(jié)，希望設(shè)計師站在更全局的角度看待設(shè)計，合理安排時間，因此我們舍棄4。在剩下的6、8、10、 12 四個單位中， 8 的整除率高（80%），以 8 像素作為一個步進單位的變化，我們視覺上也是能感受到較為明顯的差異，因此選取整除率高的 8 做為柵格系統(tǒng)的原子單位。

符合「偶數(shù)原則」

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

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

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

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

當(dāng)前名稱：網(wǎng)站建設(shè)中關(guān)于柵格系統(tǒng)的應(yīng)用總結(jié)及后臺設(shè)計
瀏覽地址：http://muchs.cn/news23/106673.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站建設(shè)等

廣告

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