網(wǎng)格是基本的設(shè)計原則之一司倚，不管你用什么樣的工具。網(wǎng)格設(shè)計也可以用在很多地方皿伺，不管是網(wǎng)站設(shè)計還是雜志盒粮、海報設(shè)計丹皱，在我們常用的設(shè)計軟件Illustrator和Photoshop中同樣支持網(wǎng)格設(shè)計宋税。
比如我們要設(shè)計一個三折頁宰翅。
然后我們可以通過參考線設(shè)置好邊距和分欄之間的距離汁讼。
再進一步標出版心位置嘿架。
最后我們就可以對該版面的進行網(wǎng)格設(shè)計了耸彪。
當(dāng)然蝉娜，我們也可以通過另外一種手段來實現(xiàn)對網(wǎng)格布局的設(shè)計。
我想南缓，現(xiàn)在你應(yīng)該對網(wǎng)格布局有一定的了解了荧呐，但是還可以更復(fù)雜倍阐，當(dāng)然也會更強大。
比如通過下面的這個小圖表也可以發(fā)現(xiàn)網(wǎng)格的存在岔冀，實際上概耻，這是通過網(wǎng)格計算的出來的列和行的寬度。舉例來說咐蚯，| ~ | ~ | ~ |將是一個三列的網(wǎng)格弄贿。
如果我們展開觀察差凹，在本例中，文檔的頁邊距和裝訂線是40個像素呐萌，則該圖標的寬度為60個像素肺孤，該段之間的空間為10個像素，并且列的寬度是未知的小渊，但應(yīng)當(dāng)是彼此相等茫叭。這可以在像這樣的網(wǎng)格符號來表示：
| 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px |
網(wǎng)格加起來有一個明確的值，并減去從可用空間的寬度的命令呐萨。然后它將該通配符之間剩余的區(qū)域莽囤。其結(jié)果將是這樣的：
我們可以用到更美的數(shù)學(xué)方式來設(shè)計網(wǎng)格烁登。
黃金比率
黃金比例是0.618，黃金比例用百分比表示是38.2%和61.8%锨络。所以狼牺，如果輸入38.2%的寬度是钥，那么這個分欄就是黃金比例的。
斐波那契序列
后者是前面兩個數(shù)字之和虏冻，并且在100％的斐波值為1％厨相，1％，2％蛮穿，3％庶骄，5％，8％践磅，13％单刁，21％，34％府适，55％羔飞，89 ％。雖然這看起來非常簡單细溅，我們必須進行調(diào)整褥傍，以使網(wǎng)格看上去是準確的。通過調(diào)整后喇聊，斐波那契數(shù)網(wǎng)格的比例將是：
| 1% | 1% | 1% | 2% | 3% | 5% | 8% | 13% | 21% | 34% | ( vl )
如果覺得每次設(shè)置太麻煩，我們可以存為模板誓篱，你可以試試看朋贬。
