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

@ux-boy ：關(guān)于柵格系統(tǒng)的文章不少，但鮮有專門(mén)針對(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)：

可以被 8 整除

目前主流桌面設(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)的原子單位。

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

以 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)題。

前端開(kāi)源組件庫(kù)基于 8 的原子單位來(lái)設(shè)計(jì)

開(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ì)師的稿件。

網(wǎng)站欄目：網(wǎng)站建設(shè)中關(guān)于柵格系統(tǒng)的應(yīng)用總結(jié)及后臺(tái)設(shè)計(jì)
分享URL：http://www.bm7419.com/news/106673.html

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

廣告

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