別再說不懂柵格系統(tǒng)了
編輯導(dǎo)語:對于設(shè)計師來說,柵格系統(tǒng)是一種可以更有邏輯地進(jìn)行工作的布局思想。它有哪些優(yōu)勢?又是如何與前端聯(lián)系的?本文作者對柵格系統(tǒng)進(jìn)行了分析,希望能給你帶來幫助。
一、柵格系統(tǒng)的定義
講解柵格系統(tǒng)之前,先來了解一下什么是柵格系統(tǒng)。不妨來看看百度百科跟維基百科是怎么解釋的:
- 百度百科:柵格系統(tǒng)英文為“grid systems”,也有人翻譯為“網(wǎng)格系統(tǒng)”,運用固定的格子設(shè)計版面布局,其風(fēng)格工整簡潔,在二戰(zhàn)后大受歡迎,已成為今日出版物設(shè)計的主流風(fēng)格之一。
- 維基百科:柵格設(shè)計系統(tǒng)(又稱網(wǎng)格設(shè)計系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計、瑞士平面設(shè)計風(fēng)格、國際主義平面設(shè)計風(fēng)格),是一種平面設(shè)計的方法與風(fēng)格。
二、柵格系統(tǒng)的簡介
1692年,新登基的法國國王路易十四感到法國的印刷水平不盡人意,因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務(wù)是設(shè)計出科學(xué)的、合理的, 重視功能性的新字體。
委員會由數(shù)學(xué)家尼古拉斯加宗(Nicolas Jaugeon)擔(dān)任領(lǐng)導(dǎo),他們以羅馬體為基礎(chǔ),采用方格為設(shè)計依據(jù),每個字體方格分為64個基本方格單位,每個方格單位再分成36個小格,這樣,一個印刷版面就有2304個小格組成。在這個嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計字體的形狀、版面的編排、試驗傳達(dá)功能的效能,這是世界上最早對字體和版面進(jìn)行科學(xué)實驗的活動,也是柵格系統(tǒng)最早的雛形。
說白了這玩意就像小時候?qū)W習(xí)寫字的田字格,橫平豎直的。其實它更多的作用是哪怕你的字再難看,最起碼整體看起來還是顯得規(guī)整。
首先是規(guī)整,然后字的大小整齊劃一,最后熟練度高了,自然會慢慢寫好看。再舉個例子,故宮一共有房間八千七百零七間,可從沒感覺規(guī)劃的亂。所以有良好的秩序是美最基礎(chǔ)的前提。這就是柵格系統(tǒng)最重要的作用之一。
三、柵格系統(tǒng)的原理
在網(wǎng)頁設(shè)計中,我們把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”,每個單元與單元之間的間隙設(shè)為“i”,此時我們把“a+i”定義“A”。他們之間的關(guān)系如下:
W =(a×n)+(n-1)i
由于a+i=A,可得:
(A×n) – i = W
四、柵格系統(tǒng)的優(yōu)勢
對于設(shè)計師來說,柵格系統(tǒng)更多的是一種布局思想,可以更有邏輯地進(jìn)行設(shè)計工作。靈活地運用柵格系統(tǒng),不僅可以讓整個網(wǎng)站各個頁面的布局保持一致,讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀,讓設(shè)計稿有更好的結(jié)構(gòu),更可以通過匹配不同組合,做出很多優(yōu)秀和獨特的排版設(shè)計。
使用網(wǎng)格系統(tǒng),可以使網(wǎng)頁設(shè)計給用戶正式感和規(guī)范感,還具有一種結(jié)構(gòu)分明的設(shè)計感,提升用戶體驗。網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩,一味按照網(wǎng)格線來進(jìn)行布局。網(wǎng)格系統(tǒng)的意義在于更靈活的幫助設(shè)計師有序布局,而不是限制設(shè)計師的設(shè)計。
對于前端開發(fā)人員來說,柵格系統(tǒng)的使用,給整個網(wǎng)站的頁面結(jié)構(gòu)定義了一個標(biāo)準(zhǔn),大大提高了網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下,頁面中所有組件的尺寸都是有規(guī)律的,可重用的,這對于大型網(wǎng)站的開發(fā)和維護(hù)來說,能節(jié)約不少成本。
隨著響應(yīng)式設(shè)計的流行,柵格系統(tǒng)開始被賦予新的意義,那就是,一種響應(yīng)式設(shè)計的實現(xiàn)方式。響應(yīng)式的要點是為同一個頁面設(shè)計多種布局形態(tài),分別適配不同屏幕尺寸的設(shè)備。
五、柵格系統(tǒng)與前端的結(jié)合
由于柵格系統(tǒng)最早出現(xiàn)在印刷品中,起到的作用更多就是規(guī)范布局。但是在現(xiàn)在的UI設(shè)計中,柵格系統(tǒng)的實際用途除了規(guī)范我們平時設(shè)計稿的布局以外,更重要的原因一切設(shè)計稿都是為了與前端開發(fā)結(jié)合,形成自適應(yīng)布局。前端css中有個叫Flexbox。
https://getbootstrap.com/docs/4.0/layout/grid/這個網(wǎng)站算是前端第三方的界面框架,開發(fā)利用第三方的框架會高效很多。
我們通常定義柵格系統(tǒng)為12個列(根據(jù)實際項目需求可能存在不同),柵格布局中的12是1,2,3,4,6的最小公倍數(shù),意思是要實現(xiàn)1等分,2等分,3等分…..而12是最小的數(shù),也是最好的,當(dāng)然如果分成16列,24列,32列,就需要更多的代碼來開發(fā)維護(hù)項目。
以下圖為例,第一行三個模塊平分,一個模塊就占據(jù)4列。第二行2個模塊,左邊就占了12格的8列,右邊就占了4列。
結(jié)合實際案例,以我的語雀為例,網(wǎng)頁的大框架分為三列:
隨著瀏覽器寬度縮小,整個網(wǎng)頁的比例也在發(fā)生變化,第二列在不停地縮小。當(dāng)瀏覽器寬度縮小到某個特定的數(shù)值,第三列消失,只有第一列和第二列。這個就是俗稱的自適應(yīng)。
六、設(shè)計與前端的聯(lián)系
下圖的某一個色塊代表內(nèi)容的一部分,每個色塊的寬度并不是隨便畫的。是有規(guī)劃的想要每個色塊占多少個柵格。這就是與前端開發(fā)聯(lián)系的點。當(dāng)然我們也可以隨意的拉伸,但不管怎么拉伸,所占的柵格比例是不變的。
七、柵格系統(tǒng)三個重要的屬性
柵格系統(tǒng)主要是三部分構(gòu)成,列、水槽、邊距。
顧名思義,“列”就是柵格的寬度,“水槽”是兩個柵格之間的間距;“邊距”是柵格與畫布的邊距。
根據(jù)列寬屬性不同,可以分為兩種網(wǎng)格,一種是流動網(wǎng)格,也可以叫拉伸網(wǎng)格,是根據(jù)尺寸不同實時做變化;
八、常用的柵格系統(tǒng)
1. 960柵格系統(tǒng)
960柵格系統(tǒng)是:寬度為960px,12列,每列60px,水槽為20px。內(nèi)容區(qū)域總寬度為940px。
秉承知其然知其所以然的原則,特意查了一下來源。以下內(nèi)容牽扯部分?jǐn)?shù)學(xué)問題,略微枯燥,有興趣的可以嘗試了解一下。
根據(jù)上面的簡單分析可以認(rèn)為:當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時,開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px。上面的“自然”出現(xiàn),細(xì)究自然是不讓人信服的。
蘋果系統(tǒng)的設(shè)計者們在沒有喝醉酒的情況下選擇了960,而不是其它什么1000之類的整數(shù),自然另有奧妙。
科學(xué)界有很多問題都可以歸結(jié)到數(shù)學(xué)問題上,我們也從數(shù)學(xué)著手:960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍:2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480。共26種(26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身),我們標(biāo)記為:N(960) = N(2^6 * 3 * 5) = 26。
根據(jù)上面的算法,可以得到:
- N(360) = N(2^3 * 3^2 * 5) = 22
- N(480) = N(2^5 * 3 * 5) = 22
- N(720) = N(2^4 * 3^2 * 5) = 28
- N(750) = N(2 * 3 * 5^3) = 14
- N(800) = N(2^5 * 5^2) = 16
- N(960) = N(2^6 * 3 * 5) = 26
- N(1000) = N(2^3 * 5^3) = 14
- N(1024) = N(2^10) = 9
- N(1440) = N(2^6 * 3^2 * 5) = 34
- N(1920) = N(2^7 * 3 * 5) = 30
根據(jù)直覺(嚴(yán)格證明也不難,不過還是留給數(shù)學(xué)系的學(xué)生去證明吧),我們得到一個有趣的結(jié)論——要使得N(width)最大,width的取值有兩個系列:
- A系列:……320, 720, 1440……
- B系列:……480, 960, 1920……
N越大,可組合的寬度值就越多。對柵格系統(tǒng)來說,這意味著越靈活!
2. 8pt柵格系統(tǒng)
8pt柵格系統(tǒng),也稱8點柵格?;镜氖褂迷瓌t是,設(shè)計是在設(shè)計中需要一致的使用8的倍數(shù)來定義元素的尺寸、填充和編劇。也就意味著在開發(fā)的世界中任何padding、margin、sizing都是8的倍數(shù)。
秉承知其然知其所以然的原則,有興趣的可以嘗試了解。
在iPhoneX的例子中,有賴于它的Super Retina屏幕,在實際屏幕分辨率下每英寸顯示出來的像素是畫布的三倍。通過最小尺寸設(shè)計,我們可以輕松地將組件放大到其他設(shè)備需要的屏幕尺寸,同時確保渲染具有完美的像素清晰度。這意味著,1個像素可以被轉(zhuǎn)化成4px(@2x分辨率),9px(@3x分辨率),如此類推。
所以如果我們有一個大小為16px的icon,當(dāng)我們導(dǎo)出到@2x和@3x的分辨率,渲染出來的icon大小分別就是32px和48px,并適用于Rentina和Super Retina的屏幕。
那為什么是8?
- 以8個像素為基礎(chǔ)單位的尺寸可以完美地轉(zhuǎn)化成其他不同的屏幕尺寸(包括安卓的0.75倍和1.5倍)
- 理由是,盡管沒有解釋過多,Apple和Google都有建議這樣做。
- 以4或8為倍數(shù)的尺寸很容易計算,它們靈活且一致。用這個倍數(shù)設(shè)定組件之間的間距,也比較明顯(如下圖)
九、常見的響應(yīng)式柵格
1. 排列式柵格
顧名思義,這種柵格中,卡片(即內(nèi)容區(qū)塊)尺寸和間距不變,每行能放幾張卡片就放幾張,擺不下就換行,邏輯非常簡單。典型的例子有 Youtube 、Pinterest、Behance ……
這么簡單的響應(yīng)式柵格系統(tǒng),其問題也很明顯:頁邊距不確定,所以為了視覺的平衡感,大多將列表居中(像 Google Play 那樣堅持左對齊也不是不可以)。一整頁最好只有一種尺寸的卡片,否則邊距無法不統(tǒng)一。
固定的卡片尺寸和邊距可能在大屏里看起來太小,小屏里看起來又太大。但是如果產(chǎn)品夠簡單,列表單一的話,用這種是沒問題的。
2. 彈性式柵格
這種柵格系統(tǒng)的間距和頁邊距是固定的,卡片尺寸在一定程度下彈性伸縮,以確保填滿整個屏幕。因為間距和頁邊距固定,也不用擔(dān)心卡片混排。典型的例子有: Google Drive 、Spotify ……
3. 定制式柵格
其實國內(nèi)的大部分網(wǎng)頁并沒有做響應(yīng)式布局(比如知乎、淘寶、愛奇藝等),即便是部分做了的(比如簡書、京東、騰訊視頻等),也大多沒有使用上面講的那兩種自適應(yīng)的柵格,而是定制類響應(yīng)式布局。
以騰訊視頻為例,你可以看到它的尺寸伸縮并不是依賴一套通用的規(guī)范,而是人為設(shè)計了幾種尺寸。這個例子還算相對復(fù)雜了,如果你去看國內(nèi)其它響應(yīng)式界面,可能因為是人力設(shè)計,所以大多變化范圍并不大,最大尺寸和最小尺寸之間的差別有限。
十、如何創(chuàng)建柵格系統(tǒng)
1. 設(shè)置屏幕總寬度
做界面設(shè)計前會先設(shè)置一個個尺寸,寬度是固定的,因為內(nèi)容不定所以高度也是情況而定,使用布局設(shè)置,sketch中默認(rèn)屏幕內(nèi)容寬度是960,是現(xiàn)在最常用的一個網(wǎng)頁寬度。
2. 設(shè)置列數(shù)
就是縱向分欄數(shù)量,sketch默認(rèn)分為12列,也可以分為24列,這是網(wǎng)頁端的常用分法,移動端一般是6列。
3. 設(shè)置水槽寬度
布局設(shè)置中間距寬度就是水槽,紅色區(qū)域?qū)挾染褪撬郏ㄩg隔),水槽寬度越大,頁面留白和呼吸感會更好,反之則更緊湊。水槽可以將內(nèi)容更規(guī)范地區(qū)分開來。
本文由 @卡洛設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash ,基于 CC0 協(xié)議。
- 目前還沒評論,等你發(fā)揮!