骨骼

設(shè)計(jì)某個(gè)元素或者幾個(gè)元素組成的單元也要注重骨骼，骨骼有外延骨骼和內(nèi)在骨骼兩種。在做完設(shè)計(jì)以后可以將作品元素的外圍連個(gè)線，看看是什么形狀。有時(shí)我們會(huì)發(fā)現(xiàn)一些骨骼不好的設(shè)計(jì)確實(shí)會(huì)給人不舒服的感受。

柵格系統(tǒng)

1692年法國(guó)國(guó)王路易十四命令成立管理印刷的皇家特別委員會(huì)。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗(Nicolas Jaugeon)擔(dān)任領(lǐng)導(dǎo)，他們采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方格單位，每個(gè)方格單位再分成36個(gè)小格，這樣印刷版面就有 2304個(gè)小格組成，在嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格中設(shè)計(jì)字體和版面來(lái)試驗(yàn)視覺(jué)傳達(dá)的功能。柵格系統(tǒng)英文是“grid systems”，是一種平面設(shè)計(jì)的方法。柵格系統(tǒng)運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，這種方法現(xiàn)在也被應(yīng)用在移動(dòng)設(shè)備和網(wǎng)站設(shè)計(jì)等領(lǐng)域里�？茖W(xué)的柵格會(huì)給人一種秩序的美感和現(xiàn)代感。

網(wǎng)格系統(tǒng)在書籍排版的應(yīng)用 作品:Dale magazine by Rocio Gomez

網(wǎng)格系統(tǒng)在圖形中的應(yīng)用 作品:Pixty App Branding by Ramotion

為你的設(shè)計(jì)建立柵格

我們?cè)谠O(shè)計(jì)任何作品時(shí)，首先考慮的是應(yīng)用的尺寸。如iPhone8的分辨率為750x1334px、安卓1080P分辨率為1080x1920px等。在我們確立了我們排版的尺寸后，我們就可以根據(jù)這個(gè)寬度設(shè)計(jì)可以被整除的柵格了。我們把整體寬度定義為W。然后整個(gè)寬度分成多個(gè)等分單元A。每個(gè)單元A中有元素a和間距i。所以他們之間的關(guān)系就是 W =(a×n)+(n-1)i 。當(dāng)然每個(gè)應(yīng)用的尺寸不止可以整除成一種柵格，這就要看我們內(nèi)容排版的疏密程度了。之后，我們將過(guò)多內(nèi)容的柵格和另一個(gè)柵格相加得到更大的排版空間;其他元素都須老老實(shí)實(shí)呆在自己的柵格內(nèi)，這樣就完成了一個(gè)布局非�？茖W(xué)的設(shè)計(jì)了。

比如一個(gè)網(wǎng)頁(yè)寬度是1000px的情況中我們可以使用：20列每列40px和10像素間隔、20列每列30px和20像素間隔、25列每列30px和10像素間隔、25列每列20px和20像素間隔。如果網(wǎng)頁(yè)寬度是990px我們可以使用：11列每列80px和10像素間隔、18列每列35px和20像素間隔、25列每列45px和10像素間隔、33列每列20px和10像素間隔。如果網(wǎng)頁(yè)寬度是頁(yè)寬980px我們可以使用：14列每列60px和10像素間隔、14列每列50px和20像素間隔、28列每列25px和10像素間隔。

8像素柵格

用8當(dāng)然不是因?yàn)閿?shù)字吉利，而是因?yàn)?8 是偶數(shù)，并且8可以被成倍縮小三次!(就是8可以縮小一倍到4,4可以縮小一倍到2，這對(duì)于移動(dòng)端適配來(lái)說(shuō)太有優(yōu)勢(shì)了)考慮到移動(dòng)設(shè)計(jì)中的適配特殊性，縮小到其它尺寸可能會(huì)出現(xiàn)虛邊和半像素，用偶數(shù)可以避免這種情況。 為什么是8?因?yàn)楸热?920x1080、1280x1024、1280x800、1024x768都是8的倍數(shù)(盡管部分尺寸不是8的倍數(shù)，但也不會(huì)顯得奇怪)。除此之外，我們?cè)谧銎渌�設(shè)計(jì)時(shí)也可以將不同的留白設(shè)計(jì)成有倍數(shù)關(guān)系的數(shù)字，比如10px、20px、30px等，讓設(shè)計(jì)內(nèi)部更有邏輯性。

黃金比例

黃金比例是一個(gè)定義為 (√5-1)/2的無(wú)理數(shù)。 運(yùn)用到的層面相當(dāng)?shù)膹V闊，例如：數(shù)學(xué)、物理、建筑、美術(shù)甚至是音樂(lè)。 黃金比例的獨(dú)特性質(zhì)首先被應(yīng)用在分割一條線段上。如果有一條線段的總長(zhǎng)度為黃金比例的 分母加分子的單位長(zhǎng)，若我們把他分割為兩半，長(zhǎng)的為分母單位長(zhǎng)度，短的為分子單位長(zhǎng)度，則短線長(zhǎng)度與長(zhǎng)線長(zhǎng)度的比值即為黃金比例。

黃金比例(以下簡(jiǎn)稱“黃金比”)約為： 0.618:1。

使用黃金比例設(shè)計(jì)出來(lái)的蘋果logo

斐波那契螺旋線

斐波那契螺旋線也被叫做“黃金螺旋”，是根據(jù)斐波那契數(shù)列畫出來(lái)的螺旋曲線，自然界中存在許多斐波那契螺旋線的圖案，是自然界最完美的經(jīng)典黃金比例。斐波那契螺旋線，以斐波那契數(shù)為邊的正方形拼成的長(zhǎng)方形，然后在正方形里面畫一個(gè)90度的扇形，連起來(lái)的弧線就是斐波那契螺旋線。

斐波那契數(shù)列(FibonacciSequence)，又稱為黃金分割數(shù)列。在數(shù)學(xué)上，斐波那契數(shù)列是以遞歸的方法來(lái)定義：

F0=1

F1=1

Fn=Fn-1+Fn-2

符合斐波那契螺旋線設(shè)計(jì)的Twitter logo

APP圖標(biāo)中的柵格

以64px為一個(gè)單位，即a=64px。那么大正方形的邊長(zhǎng)的一半=8a，大圓半徑=7a，中圓半徑=4.25a，小圓半徑=3a。 8a/(8a-3a)=1.6 小圓與大正方形接近黃金比 7a/4.25a≈1.647 中圓與大圓接近黃金比 4.25a/3a≈1.417 中圓與小圓比例接近√2 整個(gè)柵格系統(tǒng)中的尺寸都是通過(guò)黃金比例互相聯(lián)系的。

內(nèi)部符合斐波那契螺旋線和黃金分割的IOS啟動(dòng)圖標(biāo)骨骼

iOS的啟動(dòng)圖標(biāo)非常重要。并且蘋果規(guī)定所有應(yīng)用程序的啟動(dòng)圖標(biāo)都必須是圓角正方形作為圖標(biāo)背板。這個(gè)背板也給我們了一些參考線，蘋果使用黃金分割和斐波那契螺旋線將畫面分割為若干部分。如果我們繪制啟動(dòng)圖標(biāo)時(shí)可以貼合這些參考線。8a/(8a-3a)=1.6 小圓與大正方形接近黃金比7a/4.25a≈1.647 ，中圓與大圓接近黃金比，4.25a/3a≈1.417 中圓與小圓比例接近√2。

總結(jié)

平面與版式的設(shè)計(jì)知識(shí)涵蓋了字體的選擇、圖片的選擇、平面構(gòu)成基礎(chǔ)、排版的CRAP原則、柵格化設(shè)計(jì)、黃金比例等多個(gè)知識(shí)點(diǎn)。如果我們現(xiàn)在接到一個(gè)需求，可以首先將內(nèi)容放進(jìn)畫面并排列好重要性、然后選擇合適氣質(zhì)的字體和圖片、使用CRAP的排版原則將信息排成合理的順序、利用柵格化和黃金比例讓畫面更加科學(xué)、最后如果發(fā)現(xiàn)畫面比較空可以加入幾何形裝飾。怎么樣，思路清晰了嗎?平面與版式知識(shí)背后是人類讀取信息幾千年來(lái)形成的習(xí)慣以及現(xiàn)代社會(huì)約定俗成的閱讀方式和心理學(xué)等，要想成為一個(gè)優(yōu)秀的設(shè)計(jì)師，我們還需要進(jìn)一步地了解設(shè)計(jì)背后的原理以及表達(dá)信息的多種方法。希望本篇文章能夠?qū)δ�的平面與版式設(shè)計(jì)有所啟迪。