三、怎么樣建立網(wǎng)頁(yè)柵格

1. 確定屏幕尺寸，確定安全范圍

當(dāng)我們開始著手做一個(gè)項(xiàng)目時(shí)，首先應(yīng)考慮在多大的尺寸范圍內(nèi)做設(shè)計(jì)，也就是確定柵格區(qū)域的寬度范圍。

2. 確定關(guān)鍵數(shù)據(jù)：列的數(shù)量、水槽的寬度

常見(jiàn)的柵格系統(tǒng)通常被劃分為12柵格或24柵格。我們需要根據(jù)自己的項(xiàng)目確定柵格的劃分?jǐn)?shù)量，劃分的格子越多，承載的內(nèi)容越精細(xì)。通常，在信息繁雜的后臺(tái)系統(tǒng)常用24柵格，而一些商業(yè)網(wǎng)站、門戶網(wǎng)站通常劃分成12柵格。

柵格不是劃分的越細(xì)越好，24柵格精細(xì)，但也容易顯得瑣碎，內(nèi)容排布的規(guī)則太多，也就相當(dāng)于沒(méi)有規(guī)則。有的項(xiàng)目根據(jù)實(shí)際情況也會(huì)劃分成16柵格、20柵格，也是可以的。

△ 槽的數(shù)值越大，頁(yè)面留白越多

需要注意的是，槽的區(qū)域不可以放置內(nèi)容。通常，我們會(huì)給槽設(shè)定一個(gè)定值，用來(lái)確定欄的大小。

計(jì)算公式

我們假設(shè)內(nèi)容區(qū)寬度為W(Weight)，列寬為C(Column)，列數(shù)為n，槽為定寬G，可以得出：W=C*n。由于槽不可以放置內(nèi)容，可見(jiàn)內(nèi)容區(qū)為：W=C*n-G。

舉例：我們?yōu)橐粋�(gè)屏寬1440的項(xiàng)目劃分柵格，首先確定內(nèi)容區(qū)寬度為1440，24列，槽為定值16;那么可以得出列寬60，欄為48。

內(nèi)容區(qū)應(yīng)從水槽開始到水槽結(jié)束：

附：sketch 柵格工具

目前，很多軟件提供自動(dòng)?xùn)鸥裨O(shè)置功能，sketch也提供這樣的功能：Layout Settings。

Total Width：相當(dāng)于 Container，是內(nèi)容區(qū)的寬度。

Offset：表示柵格的偏移量，表示柵格從哪里開始。

Number of Columns：表示柵格的數(shù)量。

Gutter on outside：記得勾選。勾選以后柵格的設(shè)置才是跟前端的柵格算法匹配。

Gutter Width：槽的值，通常是定值，控制頁(yè)面留白間隙。

Column Width：列的值(欄+槽)，也就是柵格單個(gè)內(nèi)容區(qū)的寬度。

歡迎關(guān)注「宜信大數(shù)據(jù)用戶體驗(yàn)設(shè)計(jì)部」公眾號(hào)：