2021-04-08 分類: 網(wǎng)站建設(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,用戶已習慣通過鼠標滾輪或滾動條(scrollbar)來縱向瀏覽頁面內(nèi)容,因此,在不考慮內(nèi)容優(yōu)先級的情況下,web 可以實現(xiàn)豎直方向的「無限」加載,即豎直方向可以無限延伸,因此基于 web 的后臺頁面,它的柵格系統(tǒng)在水平方向的柵格可以不體現(xiàn)出來,我們在執(zhí)行設(shè)計時只要在豎直方向保持規(guī)律的變化就可以了。標準的柵格系統(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è)計師是直接在目標尺寸下進行設(shè)計,并在此基礎(chǔ)上標注、切圖給開發(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è)計師的稿件。
網(wǎng)站欄目:網(wǎng)站建設(shè)中關(guān)于柵格系統(tǒng)的應(yīng)用總結(jié)及后臺設(shè)計
分享URL:http://redsoil1982.com.cn/news/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)
猜你還喜歡下面的內(nèi)容