海淘科技與你分享《網(wǎng)頁(yè)設(shè)計(jì)中的柵格系統(tǒng)知識(shí)點(diǎn)》，這是一篇讓你明白、學(xué)會(huì)柵格系統(tǒng)的文章。
柵格最早來(lái)源于平面設(shè)計(jì)中，在1692年時(shí)，法國(guó)國(guó)王路易十四因?yàn)閲?guó)家印刷水平差強(qiáng)人意，命人成立了一個(gè)管理印刷的皇家特別委員會(huì)。他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方格，每個(gè)方格再分為36個(gè)小格，一個(gè)印刷版面就有2304個(gè)小格組成。這就是柵格最早的雛形。再到后來(lái)，逐漸完善演變成是一種平面設(shè)計(jì)的方法與風(fēng)格，運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔。所以市面上幾乎所有平面軟件都有網(wǎng)格這個(gè)功能。
拿平面中的板式設(shè)計(jì)作為例子，柵格系統(tǒng)利用了水平和垂直的參考線，將版面分割成格子，根據(jù)這些格子作為參考來(lái)構(gòu)造秩序性版面。帶來(lái)的直接好處就是明確了版面的對(duì)齊關(guān)系、留白關(guān)系、圖文關(guān)系等。
為什么這里說(shuō) UI 中的柵格，我們將網(wǎng)頁(yè)端的柵格和移動(dòng)端的柵格都稱為 UI 中的柵格，定義為以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)規(guī)范界面中的版面布局以及信息分布。用通俗易懂的話來(lái)講，就是根據(jù)一定邏輯，在界面中繪畫一個(gè)一個(gè)的小格子，然后將內(nèi)容擺在這一個(gè)一個(gè)格子里組合起來(lái).
1. 邏輯性
很多時(shí)候你會(huì)沒(méi)辦法解釋為什么這個(gè)按鈕100 px ,為什么這個(gè)導(dǎo)航750 px ,越細(xì)節(jié)的地方越是沒(méi)辦法解釋，但是商業(yè)設(shè)計(jì)是邏輯性解決問(wèn)題的設(shè)計(jì)方式。通過(guò)柵格的使用，這些尺寸都可以被完美解釋。
2. 站在山上
設(shè)計(jì)師除了本身視覺(jué)工作外，還需要對(duì)是否可落地，實(shí)現(xiàn)方式，是否規(guī)范，復(fù)用性是否高，性價(jià)比是否高這些問(wèn)題上有一定高度的認(rèn)知。柵格可以間接推動(dòng)這些問(wèn)題。
3. 更有調(diào)理
設(shè)計(jì)師可以利用柵格讓畫面更加有調(diào)理，讓內(nèi)容可讀性變高?？焖傩?zhǔn)元素在畫面內(nèi)的位置，讓畫面更加平衡。讓版面更加有層次感，模塊化的管理元素。
想讀懂柵格，首先要了解柵格系統(tǒng)里的基本名詞的意思，接下來(lái)詳細(xì)介紹后柵格里涉及到的基本詞。
這6個(gè)基本詞就是棚格中的基本概念，要對(duì)這些概念非常熟悉才能熟練的運(yùn)用棚格系統(tǒng)。在剛開(kāi)始設(shè)計(jì)的時(shí)候，很多人會(huì)猶豫是分為12列昵還是24列還是其他列數(shù)，我想說(shuō)的是不管是幾列，都要根據(jù)具體的界面內(nèi)容。但是或許24列用起來(lái)會(huì)更加靈活一些，可以在這個(gè)系統(tǒng)里衍射出很多不同的板式方案。
1.960柵格系統(tǒng)
960柵格系統(tǒng)是在早期被運(yùn)用的最廣的棚格系統(tǒng)。棚格寬度為960PX, 12列，每列60px，水槽為20px。內(nèi)容區(qū)域的總寬度為940px。
市面上大型的門戶網(wǎng)站、電商網(wǎng)站基本上都采用了960的棚格，比如下列。
2.8 pt 柵格系統(tǒng)
8pt柵格系統(tǒng)，也稱8點(diǎn)柵格 # 基本的使用原則是，設(shè)計(jì)師在設(shè)計(jì)中需要一致的使用8的倍數(shù)來(lái)定義元素的尺寸、填充和邊距。也就意味著，在開(kāi)發(fā)的世界中任何padding、margin、sizing都是8的倍數(shù)。
會(huì)有人困惑，為什么8pt棚格系統(tǒng)采用的是8的倍數(shù)，而不是2、4、6、10、12？其實(shí)這可以分兩點(diǎn)去說(shuō)。
其一，現(xiàn)在不論是i〇S還是Android,物理屏幕尺寸和分辨率應(yīng)有盡有，那么設(shè)計(jì)師該按照哪個(gè)界面標(biāo)準(zhǔn)去設(shè)計(jì)就是一個(gè)問(wèn)題，這時(shí)候引入一個(gè)“偶數(shù)思維”，當(dāng)我們采用的值是偶數(shù)的時(shí)候，元素不會(huì)因?yàn)槿ミm配不同的屏幕而變得模糊，失真。舉個(gè)例子。
其二，那么多雙數(shù)，選擇了8,是因?yàn)橐?作為最小單位，退可守進(jìn)可攻，不會(huì)像2、4、6這樣很碎顯得頁(yè)面分割感重，也不會(huì)像10、12—樣在小細(xì)節(jié)里無(wú)法精致把控。
總體而言，現(xiàn)在市面上越來(lái)越多的設(shè)計(jì)者開(kāi)始選用8pt柵格，可以以更有邏輯的方式讓元素協(xié)調(diào)統(tǒng)一，也大大減少了與工程師的溝通成本。在每一個(gè)細(xì)節(jié)都達(dá)到一致和邏輯性，從用戶層面上也能逐漸建立信任感。比如市面上，使用8點(diǎn)棚格的案例。
我們要在畫板里建立自己的棚格系統(tǒng)，首先我們先強(qiáng)化一下柵格的關(guān)鍵詞，用專業(yè)詞匯帶入學(xué)習(xí)公式,
當(dāng)然，現(xiàn)在sketch的運(yùn)用已經(jīng)廣泛被大家接受的吋候，sketch特有的強(qiáng)拓展性，讓設(shè)計(jì)師們解放了計(jì)算器，不用苦苦的去計(jì)算?？芍苯釉趕ketch中使用網(wǎng)格設(shè)鬣功能，輕松設(shè)霊出自己的柵格系統(tǒng)。以960柵格為例子，演示一次棚格的設(shè)置。
那么，看到現(xiàn)在，其實(shí)棚格的大部分信息你已經(jīng)了解了。而且也已經(jīng)制作好了可使用的棚格系統(tǒng)，那么如何來(lái)應(yīng)用呢。
其實(shí)，應(yīng)用柵格很關(guān)鍵的一句話是，在界面中的區(qū)塊的定義要從列開(kāi)始到列結(jié)束，水槽和安全距離內(nèi)不可單獨(dú)使用內(nèi)容。
舉幾個(gè)例子，如果純按照棚格來(lái)定義一切內(nèi)容，
1.定義導(dǎo)航寬度的時(shí)候，就是如下圖#記號(hào)1#的寬度，也不用糾結(jié)說(shuō)為什么導(dǎo)航是220px、240px。
2.定義彈出的S度旳時(shí)候，就如下圖#記號(hào)2#的寬度，所有的尺寸大小一定是確定且符合邏輯的，
布局中，柵格和間距冥實(shí)是息息相關(guān)的?？梢赃@么理解兩者的關(guān)系，柵格定義的是布局中大棋塊的邏輯性定位和排布，那間距定義的是版面中所有細(xì)節(jié)的間距、步進(jìn)、適配 #以8pt柵格舉例，柵格中定義了安全距離、列寬、水檣等基本詞的值 # 都是以8為基本單位然后進(jìn)行步進(jìn)，那么在間距中，元素與元素之間的距離就可以定義成8的倍數(shù)，所有元素之間的間距都是8的倍數(shù)。就可以讓轚個(gè)界面的設(shè)計(jì)*有節(jié)奏，在定義元素尺寸的時(shí)候有非常強(qiáng)的邏輯性支捋，在一致性上也會(huì)很好的達(dá)到。
優(yōu)點(diǎn)：通篇都在說(shuō)棚格的優(yōu)點(diǎn)不做贅述，基本可以概括成一致性、有邏輯、加強(qiáng)團(tuán)隊(duì)協(xié)作和統(tǒng)一、培養(yǎng)信任感等。
缺點(diǎn)：
1、 新手設(shè)計(jì)師在運(yùn)用的時(shí)候，可能會(huì)覺(jué)得被束縛，這時(shí)候建議邊設(shè)計(jì)邊調(diào)整的方式。
2、 柵格系統(tǒng)有一定的學(xué)習(xí)成本，但是強(qiáng)烈建議設(shè)計(jì)師一定要花時(shí)間弄懂柵格，百益而無(wú)一噻。
綜上是上海網(wǎng)站建設(shè)公司——海淘科技為你分享的《網(wǎng)頁(yè)設(shè)計(jì)中的柵格系統(tǒng)知識(shí)點(diǎn)》
