設(shè)計：Violaine & Jeremy
對上一篇內(nèi)容還有印象的同學(xué)，應(yīng)該記得我在結(jié)尾處預(yù)留的一個預(yù)告，當(dāng)時我說的編排細(xì)節(jié)就是「文字」，為什么是文字呢？因為我們在排版時除了處理圖片之外，剩下的就是要編排文字。今天的這篇文章也將圍繞著「文字」展開，相信大家看完后會對「文字」有一個全新的了解，也將明白文字對于版面的意義是巨大的，處理好它，基本上你的版面也就編排的差不多了。好了，下面我們開始今天的內(nèi)容吧。
首先來看幾張不同類型的海報，第一張文字占比較高，第二張圖片占比較高，第三張文字與圖片占比是五五開。
然而不管是屬于哪種類型的，它們的核心目的都是在傳達(dá)信息。因為對于一張海報來說，我們不光會看還會去閱讀它們。
平面設(shè)計就是通過文字來「說話」的。
而在廣告設(shè)計中，圖片的占比會非常高，因為廣告多以圖片為主，通過圖片我們能大致的猜測出設(shè)計師想要表達(dá)的東西是什么。
總結(jié)一下：廣告設(shè)計多以圖片為主，意在通過圖片傳達(dá)概念；而平面設(shè)計則多以文字或圖片為主，意在通過文字傳達(dá)信息。
那么作為信息傳達(dá)的載體，字體就顯得格外重要了。下面我會從字體的分類、字體的搭配、字體的氣質(zhì)與設(shè)置細(xì)節(jié)著手，慢慢帶領(lǐng)大家去認(rèn)識字體，首先我們來看看字體的分類都有哪些。
中文字體大致可分為：黑體、宋體、圓體、書法體與卡通體等。
其中書法體又細(xì)分為：楷書、行書、草書與隸書等。
在列舉的這些字體中，最常用就是：黑體、宋體和圓體，而在書法體中，最常用的是楷書與行書。為什么說這些字體常用呢？因為在許多優(yōu)秀的設(shè)計作品中，這些字體的出現(xiàn)概率都非常高，尤其是黑體與宋體。
下面說一下英文字體，大致可以分為：襯線體、無襯線體、手寫體與展示字型等。
其中最常用的就是：襯線體與無襯線體。理由與中文一樣，它們也是使用率很高的字體，其次還有一個原因就是在以中文為主的設(shè)計中，它們與中文字體搭配起來比較契合。
拿黑體來說，與之搭配的英文字體就是無襯線體，因為它們的筆畫特征相似度很高。
宋體搭配的就是襯線體，因為宋體的筆畫特征是有粗細(xì)變化且有裝飾線，而英文的襯線體也剛好有與之相似的地方。
而圓體則是搭配擁有相似特征的無襯線體。
因為常用的書法體通常使用毛筆書寫，所以在筆畫特征上沒有與之相匹配的英文字體，大多數(shù)時候我們會選擇用襯線體來搭配，具體原因我會在后面的字體氣質(zhì)環(huán)節(jié)為大家講解。
雖然也有別的搭配方式存在，但我給大家提供的這些都是最常用和最安全的。說完字體搭配問題后，下面我們來看看這些字體，所包含的氣質(zhì)又有哪些。
首先是黑體，它具有科技感與現(xiàn)代感，這是由它簡潔干練的筆畫特征決定的。
其次黑體也能表現(xiàn)出運動與時尚的感覺，因為運動與時尚本就是偏現(xiàn)代的詞匯。
接著是宋體，它具有文化與歷史的氣質(zhì)，這個比較好理解。
而除了能表現(xiàn)出歷史與文化感之外，宋體還能表現(xiàn)出清新與雅致的感覺，這是由宋體的筆畫特征決定的，橫細(xì)豎粗且末端帶有裝飾，與優(yōu)雅精致的感覺十分契合。
圓體的特點也是非常明顯的，在看到它時腦海中的第一印象就是可愛與卡通。
除了刻板印象外，圓體那種圓滾滾的筆畫給我們的感覺還有安全和易親近，所以圓體也能用來表現(xiàn)兒童與溫暖感覺的題材。
一說到書法體，能直接聯(lián)想到的關(guān)鍵詞就是傳統(tǒng)與歷史，因為書法的演變就是我們漢字發(fā)展的軌跡。然后我們回過頭來講一下，為什么書法體可以和西文中的襯線體搭配。
原因就在于襯線體也具備書法體的某些氣質(zhì)，比如傳統(tǒng)、文化、歷史等。與書法體在早期的東方一樣，襯線體在早期的西方也是主要的字體之一。
溫暖、人情味兒，說到書法體可能很難聯(lián)想到這兩個詞，但是書法體確實具備這種氣質(zhì)。跟黑體這種棱角分明的字體相比，書法體是手寫出來的，它的筆畫特征給我們的感覺就是有「溫度」的。
在字符面板中，除了選擇字體與改變字號以外，這兩個區(qū)域相信大家用的還是比較多的，它們分別是：行距設(shè)置與字距設(shè)置。
拿行距來說，在使用時有幾個比較常用的設(shè)置方法，比如用當(dāng)前文字的字號乘以1.2、1.732或是2。不過，通過這個方法所算出來的數(shù)值只是一個參考，也就是說你可以在這個基礎(chǔ)上做些調(diào)整。
比如：在計算出的數(shù)值的基礎(chǔ)上進行遞增或是遞減，這時你要做的就是用眼睛去觀察，覺得大了就減少一些，覺得小了就增大一些。
其中，用字號乘以1.2適用于標(biāo)題。
比如上方那個標(biāo)題的字號是40pt，那么行距的數(shù)值就是用40乘以1.2等于48。下方這個是在此基礎(chǔ)上做的一個調(diào)整，稍微增大了一些行距。
字號乘以1.2適用于標(biāo)題，而用字號乘以1.732或2則更適用于小字號的文字，比如內(nèi)文。
上方是用字號乘以1.732的例子，字號是9pt，用它乘以1.732得出來的數(shù)值是15.588，四舍五入取個整數(shù)得到的行距就是16，下方這個是用字號乘以2得到的效果。
大多數(shù)情況下我建議大家用字號乘以1.732的行距，大小比較適中。
跟行距不同的是，基本上來說字距是無需調(diào)整的。當(dāng)然還是那句話，要靠自己的眼睛來衡量，如果你覺得字與字之間離的很近的話，那么可以增大一些字距，反之，則可以減小一些。
其次就是，當(dāng)你遇到一些偏輕松慢節(jié)奏的設(shè)計，比如典雅清新類的文學(xué)小說時，就可以適當(dāng)?shù)脑黾右恍┳志鄟頎I造這個感覺。
比如這兩張海報，左邊的是經(jīng)典的居中結(jié)構(gòu)，右邊的是包圍結(jié)構(gòu)，構(gòu)圖都是可以的沒有任何問題，但為什么看起來還是怪怪的呢？因為文字組沒有刻畫好。
為了讓大家能更深刻地體會到文字組對于版面的意義，修改了這兩張海報，其中構(gòu)圖不變只改文字組。
這個修改前后的對比還是非常直觀的，可見文字組對版面的影響有多大。如果說構(gòu)圖是版面的骨架的話，那么文字組就是版面的五官，骨架再好五官不行結(jié)果也是可想而之的。
文字組分為：左對齊、居中對齊、頂對齊以及兩端對齊。
其中與左對齊與頂對齊對應(yīng)的有：右對齊與底對齊。
給大家找了一些各種對齊方式的案例。這是左對齊的形式。
這是右對齊的形式，與左對齊相比右對齊屬于不常用的對齊方式，主要是出于易讀性的考慮，但并不是說不能用。
這是居中對齊的形式，最經(jīng)典的對齊方式之一。
這是頂對齊的形式，是文字豎排時最常用的對齊方式。
這是底對齊的形式，跟頂對齊相比也是屬于不常用的對齊方式。
最后是兩端對齊的形式，橫排與豎排都可以使用這種對齊方式。
如果作品看得足夠多，應(yīng)該見過這種形式的組合，它同時包含了多種不同對齊方式，我們稱其為「對齊組合」。
比如我們可以借鑒結(jié)構(gòu)，以這個文字組為例，它的結(jié)構(gòu)是這樣的：兩端對齊、中間的文字字號大，上下的文字字號小，按照這個套路我們來試著做一個組合。
在編排前，我們先閱讀一下文案，通過文字可以得知，這是一個與籃球明星有關(guān)的內(nèi)容，氣質(zhì)上來說會偏現(xiàn)代一些。
所以字體可以選擇一款黑體，英文部分則搭配一款無襯線體。
根據(jù)之前總結(jié)到的這些特征，下面就可以開始編排文字了。
按照那個組合的套路，我們先將兩端對齊中較大字號的文字給編排出來，而標(biāo)題信息無疑是非常適合用來放大的。
接著再將上方和下方的小字號文字給編排出來。
其中要注意的就是這段文字的行距，我參考了logo的高度來進行設(shè)置。而整個組合中，字距是基本沒有進行調(diào)整的。
值得一提的是，在兩端對齊的文字組中，這種小大小的形式非常好用。因為它的節(jié)奏變化豐富，所以大家在做兩端對齊的文字組時不妨試試。
這就是借鑒結(jié)構(gòu)的效果了，精髓在于要多去分析別人的形式與套路，并從中獲取做組合的靈感。除了能借鑒結(jié)構(gòu)之外，我們還可以借鑒標(biāo)題字?jǐn)?shù)+結(jié)構(gòu)，是什么意思呢？
以這個組合為例，它的標(biāo)題有7個字，整個組合是由頂對齊與兩端對齊構(gòu)成的一個對齊組合。
它的組合結(jié)構(gòu)為小中大，按照這些特點我們來嘗試借鑒。
這是要用到的文案信息，通過閱讀文案可以得知，這是一個關(guān)于炸雞套餐的內(nèi)容。
通過去看kfc的各種物料，發(fā)現(xiàn)運用黑體的場景還是比較多的。
所以，在字體搭配上選擇用黑體與無襯線體。
根據(jù)之前總結(jié)到的這些特征，下面就可以開始編排文字了。
按照小中大的特點，依次將信息給編排出來。
完成后可以在組與組之間，添加一根小線段用于連接，以起到過度的作用，如果大家現(xiàn)在回過頭去看原圖的話，也能發(fā)現(xiàn)這一特征。
其中，標(biāo)題的行距就是用標(biāo)題的字號乘以1.2算出來的。
字距我也做了調(diào)整，因為默認(rèn)0的字距看上去有些擁擠。
可以看出跟原圖相比，在不破壞組合結(jié)構(gòu)的情況下，針對文字信息的編排是做了些調(diào)整的，比如：原稿最左側(cè)是兩行頂對齊的小文字，在借鑒時將它換成了logo，因為我們是要借鑒它的結(jié)構(gòu)，而不是為了跟原稿做的一模一樣，具體還是要根據(jù)我們的內(nèi)容來合理編排。
首先我們來看這張圖，一個標(biāo)準(zhǔn)的兩端對齊、組合結(jié)構(gòu)與之前那個是一樣的，中間的字號大，上下的字號小。
除去這些外還有一個小特征就是，在大字號中間還有一層小字號的文字。
接著我們再來看這張圖，它的特點就是圖片疊壓在了文字的上方。至于它的結(jié)構(gòu)我們可以不用考慮，因為結(jié)構(gòu)已經(jīng)找好借鑒了。
這是要用到的文案與圖片。通過文字可以得知，這是一個關(guān)于介紹昆蟲的圖書，且配有一張插圖。這個插圖的風(fēng)格是手繪形的，偏寫實一些沒有那么的卡通。
結(jié)合這些特點我選擇的字體搭配方式是，宋體配襯線體。
因為字體搭配這部分我又借鑒了一些相關(guān)風(fēng)格的書，發(fā)現(xiàn)它們的字體搭配方式用宋體比較多。
分析完文案找到字體搭配方式后，在結(jié)合之前總結(jié)的一些組合特征，我們就可以開始編排了。
先將中間比較大的那層文字給編排出來，然后在它中間處置入一個小字號的文字。
中間層編排完成后再來編排上下層的文字，字號不用太大，整體注意好兩端對齊。
調(diào)整字距的地方有兩處，首先是標(biāo)題，調(diào)整的原因在于默認(rèn)值我覺得有些小了，其次是標(biāo)題中間的那行文字，調(diào)整它的原因在于不想字號放太大。
因為是兩端對齊的結(jié)構(gòu)，不調(diào)整字距的話。標(biāo)題中間那行文字只能通過放大字號來達(dá)到目，然而這個效果并不是我想要的。
綜合考慮，選擇了這個，最后，把圖片置入進去疊壓在文字的上方。
圖疊壓在文字上有一個無法避免的問題就是，被壓住的文字會出現(xiàn)無法識別的情況，英文還好但是中文卻不行，因為在這個組合中，中文是用來閱讀的文字，英文僅充當(dāng)裝飾用。
既然中文是重要的信息，那為什么還要去遮擋它呢？因為有提示，通過這兩個字你也能猜出來被壓住的文字是什么。
這就是借鑒結(jié)構(gòu)+表現(xiàn)手法的例子，多一張圖片的加入，混合借鑒后的效果與原稿的相似度就會降低。
下面我們來看這張圖，它既有頂對齊又有兩端對齊的感覺，像這種組合我將它稱為頂部兩端對齊。
它的組合結(jié)構(gòu)也是一個小大小的形式。
分析完上一個組合后，再來看看這個組合，值得借鑒的地方有兩處，首先就是整體的結(jié)構(gòu)，其次就是字體搭配。由于已經(jīng)借鑒了上一個組合的結(jié)構(gòu)，所以這個組合要借鑒的就是字體搭配。
在原圖的這個字體搭配中，英文是最好判斷的，這個字體是襯線體，中文則比較陌生了，既不像黑體也不像宋體。
感覺是被設(shè)計過的，不像是字庫里的字體，我通過觀察發(fā)現(xiàn)，它既有宋體橫細(xì)豎粗的筆畫感覺，又有黑體干凈利落的特征。
所以，我在字庫字體中找到了一款具有類似感覺的字體：姚體。
在字體搭配上選擇用姚體搭配襯線體。這里需要強調(diào)的一點是，在挑選字體借鑒的過程中已經(jīng)考慮到了與文案的氣質(zhì)相匹配的問題，下面我們就來看看文案。
標(biāo)題叫「遇見你之前」，給人的感覺比較文藝，而姚體我們前面也分析過了，它是具有宋體特征的，而且筆畫細(xì)長，整體給人的感覺就是比較文藝的。
分析完成后，結(jié)合之前總結(jié)的組合特點就可以開始編排了。
第一步，還是按照小大小的感覺將組合給編排出來，注意好頂部兩端對齊。
接著在組與組的縫隙處加入線條就完成了。
在這個組合中標(biāo)題的行距與字距，默認(rèn)狀態(tài)下是左邊這樣的，字距還好，行距卻非常大，這個時候你就不能套用之前講到的倍數(shù)去算行距了。那樣行距只會越來越大，所以這里我們要根據(jù)視覺效果來調(diào)整。
這樣，一個借鑒結(jié)構(gòu)+字體搭配的例子就完成了。
這是要用到的文案與圖片素材，首先，老規(guī)矩分析一下文案，選擇與之契合字體。書名叫《流星之絆》，還是比較文藝的。
根據(jù)這個書名，搜索了一下原書的樣子，在這三個不同的版本中，所感受到的氣質(zhì)有：溫情和雅致，在字體的選擇上與之較為契合的有：書法體與宋體，這兩個字體的選擇在這三個不同的原版本中也都有體現(xiàn)。
打算用宋體，與其搭配的英文首選就是襯線體了。
這是第一個要借鑒的對象，可能有人會說這不像文字組，這確實不是文字組，但并不代表它不能被聯(lián)想成文字組。
比如它的結(jié)構(gòu)是由一個頂對齊與一個左對齊構(gòu)成的對齊組合，而且下方的那個左對齊文字是放在了頂對齊的負(fù)空間處的。
其次，頂對齊的文字字號較大，下方左對齊的文字字號較小。
這就是根據(jù)那張圖所總結(jié)出的一些組合特征，下面我們就根據(jù)這些特征來編排文字。
先排出頂對齊的文字，然后在其負(fù)空間處置入左對齊的文字信息。
排到這發(fā)現(xiàn)右下角還有塊小缺口，既然是要做一個對齊組合的話，那么就要把它填滿。
關(guān)于頂對齊的中間部分為什么要這么做，是因為標(biāo)題的字?jǐn)?shù)不足以作出頂對齊的感覺，為了解決這個問題，選擇重復(fù)了一次標(biāo)題并且將它的筆畫打散了，而打散的靈感來源于「流星」，它們就像流星一樣散布在天空中，不知道什么時候就會掉落下來。到這為止是書封的上半部分，下面我們來編排下半部分。
這是要用到的借鑒圖，它也是一個由頂對齊與左對齊構(gòu)成的對齊組合。
除了這個外它頂對齊部分的文字跟左對齊的比，也是屬于較大的。
這是從那個組合中，總結(jié)出的組合特征，與上一個幾乎一樣。
按照總結(jié)出的組合特征，將文字給編排出來。
其中頂對齊與這段左對齊的文字，它們的行距是用字號乘以1.732算出來的，字距則是做了些微調(diào)整，因為當(dāng)文字縮小后，它的字距在視覺上看著也會變小，所以我在默認(rèn)0的基礎(chǔ)上將字距增加到了50。
這就是根據(jù)那兩張圖片所借鑒出來的文字組了，下面把它們置入進版面中。
整體是一個上下結(jié)構(gòu)的，這種類型在構(gòu)圖中屬于上下構(gòu)圖。這也是為什么會找那兩張圖來當(dāng)參考的原因，因為提前已經(jīng)考慮好了構(gòu)圖。
接下來做烘托氛圍的工作，先把底色換成夜空的黑色，然后配上圖片。
接著更換字體的色彩恢復(fù)識別性，其中黃色的部分是為了與白色部分做區(qū)分。
然后給腰封換上色彩以恢復(fù)下方的文字的識別性，再挑選一些信息，在它們的下方配上黃色，目的是為了與上方的色彩做呼應(yīng)。
最后，將書脊編排出來，這個案例就編排完成了。
以上就是版式三部曲之文字篇的所有內(nèi)容了，回顧一下，由兩個部分組成。第一部分是：字體的分類、字體的搭配、字體的氣質(zhì)與設(shè)置細(xì)節(jié)。具體包括：字體有哪些不同的類型、在選中字體的類型后，要如何選擇與之搭配的英文字體。字體氣質(zhì)主要講的是，不同類型的字體都有哪些味道，它的意義在于當(dāng)你確定好項目的風(fēng)格后，可以根據(jù)不同字體的氣質(zhì)，快速的找到與項目定位契合的字體。
第二部分主要講的是：文字組的刻畫與借鑒，其實對于新手而言，刻畫文字組的過程就是借鑒的過程，因為我們都需要在借鑒的過程中逐步積累編排的經(jīng)驗，所以學(xué)會如何借鑒對于我們的成長是至關(guān)重要的。這一期要說的就是這些，我們下期再見，拜拜。
作者：研習(xí)設(shè)
]]>
在準(zhǔn)備了大量素材及資料后，今天咱們的這篇關(guān)于網(wǎng)格的方法文章，終于來啦。本文過于干貨，SO，記筆記的小本本，準(zhǔn)備起來~~
第一：什么是網(wǎng)格？
在掌握網(wǎng)格的設(shè)計方法之前，咱們得先知道，到底什么是網(wǎng)格？為什么會有網(wǎng)格系統(tǒng)這一說？網(wǎng)格系統(tǒng)的存在，是為了解決設(shè)計什么樣的問題？
實際上，說到網(wǎng)格的歷史，得追溯到文藝復(fù)興時期。為了達(dá)到美的極致，藝術(shù)家從繪畫中找到了完美的比例分布圖，并嘗試以輔助線來實現(xiàn) 「完美」 構(gòu)圖的方法。
△ Masaccio, ‘The Tribute Money,’ Brancacci Chapel, 1425.
在13世紀(jì)，法國的建筑設(shè)計師 Villard de Honnecourt 將網(wǎng)格系統(tǒng)及黃金比例進行了結(jié)合，創(chuàng)建了一個這樣的圖表，固定版面中內(nèi)容的結(jié)構(gòu)及邊距，來實現(xiàn)完美的布局。而這套方法，直到至今都仍在使用，大量的雜志排版、書籍排版都能看到這套方法的影子。
所以，網(wǎng)格的存在，最主要就是為了解決設(shè)計美感的問題，通過網(wǎng)格讓雜亂無章的信息能通過一個較好的結(jié)構(gòu)來進行約束，保障信息高效傳達(dá)的同時，充分提升版面設(shè)計的美感。
1. 網(wǎng)格的結(jié)構(gòu)
網(wǎng)格實際上，是一種結(jié)構(gòu)，通過線的垂直或者相交，來構(gòu)建一個參考界線。通過這個參考界線，我們可以在一個單一的容器中，把容器里的內(nèi)容，以參考線進行對齊，來有秩序的布局組織并羅列分布。從而實現(xiàn)一個較好的視覺秩序感，提升閱讀效率的同時增加美感。
因為網(wǎng)格是一種結(jié)構(gòu)，所以網(wǎng)格本身是不一定可見（少部分作品會使用網(wǎng)格做裝飾），但這種結(jié)構(gòu)會映射到內(nèi)容元素的布局，影響信息的排列美感及閱讀效率。所有在有確定了網(wǎng)格的邊界和約束后，設(shè)計師就可以根據(jù)網(wǎng)格，來對內(nèi)容的位置比例，進行調(diào)整約束元素的坐標(biāo)，達(dá)到一個比較理想的版式設(shè)計。
環(huán)顧我們的生活周圍，實際上也能看到很多網(wǎng)格的運用場景。比如我很喜歡的這套宜家網(wǎng)格柜子~
不過網(wǎng)格目前運用的最為廣泛的場景，還是在書籍、雜志的版式設(shè)計中。實際上，網(wǎng)格系統(tǒng)誕生的初衷也是為了解決印刷制版的問題。所以從印刷術(shù)的興起，網(wǎng)格就開始誕生了 ，并演繹的越來越豐富，越來越系統(tǒng)。
2. 網(wǎng)格的制版
在平面設(shè)計中，網(wǎng)格系統(tǒng)更常見，特別是用于書籍的裝幀及印刷場景。所以如果有從事平面設(shè)計或者是從事視覺相關(guān)行業(yè)的同學(xué)，我推薦有機會也可以讀讀下面這本書。
這本書是由瑞士的設(shè)計師約瑟夫·米勒–布羅克曼 編寫的《平面設(shè)計中的網(wǎng)格系統(tǒng)》，文中主要介紹了在平面設(shè)計中，網(wǎng)格的功能和使用方法，旨在為平面和空間的設(shè)計師們提供一個實際的工具，讓他們可以從概念、組織結(jié)構(gòu)和設(shè)計上更有效、 自信地處理和解決視覺問題。
書中很多方法及版式，基本上可以現(xiàn)學(xué)現(xiàn)用，掌握起來也非常方便。
「事實上，絕大多數(shù)的設(shè)計師都不知道、也不理解為什么要建立這樣的一個秩序系統(tǒng)。所以，如果想要合理、功能地運用網(wǎng)格系統(tǒng)，那就必須仔細(xì)地研究網(wǎng)格的所有原理。只要不嫌麻煩，任何研究網(wǎng)格的人都會發(fā)現(xiàn)，在網(wǎng)格系統(tǒng)的幫助下，他都能更快地解決設(shè)計中的問題，并讓設(shè)計更具功能性、邏輯性和視覺美感。
——約瑟夫·米勒－布羅克曼 」
第二：網(wǎng)格的組成部分
講了網(wǎng)格的歷史，接下來咱們就開始講正式的網(wǎng)格使用方法啦。
目前網(wǎng)格設(shè)計主要運用在兩大場景，一個是印刷讀物，比如海報、書籍、封面等，而另外一個就是電子設(shè)備的熒幕，比如 iPhone、iPad、Windows 等，常見于 APP 設(shè)計、H5設(shè)計及 Web 設(shè)計中。
在這些不同場景的網(wǎng)格設(shè)計中，都會有一些很通用的基礎(chǔ)組件部分，如邊距、列寬、水槽、以及交叉的模塊，正是這些基礎(chǔ)的元素組成了復(fù)雜的網(wǎng)格系統(tǒng)。所以在使用網(wǎng)格設(shè)計方法做圖之前，我們需要先了解每個元素的具體含義以及其具體用法。
1. 網(wǎng)格邊距
網(wǎng)格邊距指的是內(nèi)容外部邊緣距離容器的空白距離，在紙質(zhì)設(shè)備中，容器就是紙張的大小，在界面設(shè)計里，容器就是設(shè)計稿的尺寸分辨率。這個邊距，一方面是為了信息不超出安全距離，二方面也主要是為了讓內(nèi)容看起來，能更加的聚焦在中心區(qū)域，以防信息太過于貼邊導(dǎo)致的不利于閱讀。
在APP設(shè)計中，也會用到邊距這個概念。基于@2x尺寸，很多APP內(nèi)容到屏幕的邊距，都采用的是24px，比如淘寶、支付寶、微博等。但也有不少的APP采用的是32px的邊距，比如微信、QQ、知乎等，這個大家可以截圖，縮到750的寬度，自行量~~當(dāng)然，文章后面也會詳細(xì)講這塊怎么定比較好
2. 列寬及水槽
除去邊距，在內(nèi)容區(qū)域的中心部分，網(wǎng)格主要由列寬及水槽組成，列寬就是每列中間的寬度，水槽就是每兩列的中間預(yù)留區(qū)域。列決定網(wǎng)格的復(fù)雜程度，而水槽決定內(nèi)容的疏密程度。
3. 交叉模塊
這個指的就是網(wǎng)格中的交叉區(qū)域，實際上是一個空間單位。我們可以把固定的圖片或者是段落，直接填充在這個模塊里。當(dāng)然，后面也有案例來解讀。
所有的網(wǎng)格，基本上都是由上面的基礎(chǔ)元素組成。正是這些，組成了龐大且復(fù)雜的網(wǎng)格系統(tǒng) Gird System
第三：三種常見的網(wǎng)格
在我們的設(shè)計當(dāng)中，目前這三種網(wǎng)格最為常見，且這三種也能滿足我們?nèi)粘５拇蟛糠中枰?/p>
1. 單列網(wǎng)格
在咱們目前設(shè)計中，其實最常見的，就是這種單列的網(wǎng)格。這種單列的網(wǎng)格大多數(shù)以水平，或者是垂直的形態(tài)出現(xiàn)。比如你看到的現(xiàn)在咱們發(fā)的這篇文章，實際上它就是一種以水平形態(tài)的單列網(wǎng)格所組成，文字與文字中間的距離，就組成了水渠，它也是目前最簡單的一種網(wǎng)格。
這種其實我們用文字的行高，就可以控制了，不需要設(shè)置特別多的信息。保證每一列的距離是一樣的即可。
2. 多列網(wǎng)格
多列網(wǎng)格，顧名思義就是有多列的網(wǎng)格，會包含交叉關(guān)系。實際上，創(chuàng)建的列數(shù)越多，你的網(wǎng)格在使用過程中覆蓋面會越廣，能對齊的內(nèi)容也會越多，不過處理不好的話，信息也會越碎。
咱們根據(jù)這個網(wǎng)格，簡單排一些文字，看看效果
再把線去掉，順便加點顏色看看，再修飾一下細(xì)節(jié)~~
其實還是比較的簡單，當(dāng)然，我這個只是隨意拼湊，小伙伴們可以在收藏本文后，抽時間自己動手試試~~相信肯定會比我這個好
3. 交叉網(wǎng)格
交叉網(wǎng)格也比較好理解，其實就是基于水平及垂直領(lǐng)域的交叉網(wǎng)格。這種網(wǎng)格的節(jié)奏感非常好，適合在海報、雜志、封面版本中使用。包括在部分App以及Web的場景中，也可以使用這種布局方式。
比如：
是不是明白許多啦，再強調(diào)一句，光看是不行的，這里我鼓勵各位小伙伴們，多動手進行練習(xí)嘗試，只有動手了，這些知識才能轉(zhuǎn)化成你自己的能力！加油，奧利給！
第四：界面設(shè)計中，如何使用網(wǎng)格布局
那么在界面設(shè)計當(dāng)中，如何使用網(wǎng)格來約束版式，讓設(shè)計看起來更整齊、更規(guī)律、更美觀？其實方法一樣的，無非只是容器的不同。
1. 先定邊距
在規(guī)劃網(wǎng)格之前，咱們的第一步實際上是需要先定內(nèi)容到容器的邊距，這個邊距定好了后，咱們才能開始后面的網(wǎng)格制定。
通常在APP設(shè)計中，常見的邊距有24、32、40，這3個單位，信息比較密集的，通常會使用24這個單位，而信息比較寬松，偏工具型的產(chǎn)品，則會使用40的這個單位。當(dāng)然，也有很多產(chǎn)品，選擇了比較中立的32。
△ 圖中 ③ 綠色區(qū)域為邊距，② 藍(lán)色區(qū)域為水槽，① 紅色區(qū)域為邊距
在Web或者是PPT的封面設(shè)計中，由于屏幕本身就是橫向的，所以咱們的邊距可以定的更大一些，通常為100、200、300不等，這個可以根據(jù)個人風(fēng)格喜好來定。
2. 確定列數(shù)
在確定了邊距之后，很重要的一步就是需要確定列數(shù)了。定義使用多少列，這個直接會影響到頁面的信息疏密以及靈活程度。在APP設(shè)計中，比較流行的有 4-6 列，而在Web設(shè)計中，10-12 列則是非常的主流
在做PPT或者是網(wǎng)頁的時候，我最喜歡還是使用12列，因為它其實最靈活，而且大小不大不小，剛剛合適~~大家可以對應(yīng)下面這張圖（基于@1x），來決定自己設(shè)計稿中，列數(shù)的數(shù)量是多少。
3. 設(shè)定水槽寬度
邊距及列數(shù)都確定下來了后，咱們其實需要定的，就是水槽的寬度了。
在移動端設(shè)計中，我建議水槽的距離，最小尺寸為16，其次以4為單位往上遞增，比如16、20、24、28、32、36，可以根據(jù)產(chǎn)品的類型來定義這個水槽的寬度。如果你的屏幕信息密度很高，那么我建議使用20、24這種小距離的，如果密度非常低，整個屏幕里都沒什么內(nèi)容，那么可以使用32、36等大水槽邊距。
在Web或者PPT封面設(shè)計中，則是以8為單位整加比較合適，比如16、24、32、40、48、56，這種大寬屏的尺寸，在定義水槽邊距的開放度會更高。
列跟水槽，sketch自帶的工具其實都可以實現(xiàn)，我們用這個工具，能很輕松的達(dá)到自己想要的效果。在PS里，可能更多的是需要靠自己繪制矩形量尺寸，然后來拉取輔助線。
4. 按照網(wǎng)格調(diào)整設(shè)計稿
待網(wǎng)格定好后，我們再根據(jù)網(wǎng)格，去制定界面中元素的間距及尺寸即可，盡量保證各個元素的垂直間距是一致的。
網(wǎng)格定義好了之后，其實后面就很簡單了，就是按照網(wǎng)格，咱們來約束內(nèi)容的邊界了，我們可以通過手動把文字的邊距，或者圖片的尺寸，來控制到跟網(wǎng)格一樣大小，調(diào)整整個頁面的和諧程度。
第五：熟練掌握&插件提效
方法掌握了后，實際上就是需要自己日常多收藏一些優(yōu)秀的網(wǎng)格作品，其次多加練習(xí)，尋找網(wǎng)格排版的手感。畢竟只有不斷練習(xí)，不斷發(fā)現(xiàn)問題、總結(jié)問題，你才能牢牢的掌握知識，提升自己的動手能力。
不要完全被網(wǎng)格約束
網(wǎng)格實際上也只是一種參考線，并不是需要完全約束內(nèi)容，比如有的文字長度會超出網(wǎng)格線，實際上完全參考網(wǎng)格，也會出現(xiàn)問題。所以網(wǎng)格最終只是參照，不要完全刻意約束，避免出現(xiàn)適得其反的效果。
橫向的水槽高度需要保持統(tǒng)一
在APP設(shè)計中，不同信息的高度不一致，所以我們很難用等距網(wǎng)格去約束它，更多的時候是去約束模塊與模塊的間距。在那種大模塊與大模塊的間距中，咱們的水槽高度盡量保持統(tǒng)一。
2. 網(wǎng)格插件神器下載
最后為了方便大家制定網(wǎng)格，我這里也給大家推薦一些制定網(wǎng)格的插件神器，非常好用，推薦指數(shù)五顆星。
Bootstrap Grid（ Sketch 使用）
用這個插件，可以在 Sketch 里輕松創(chuàng)建自定義網(wǎng)格，不需要那么多繁瑣的設(shè)置，簡單兩步就能搞定！
還支持針對不同的尺寸，自定義生成不同的網(wǎng)格參考線~~
flavor（ Sketch 使用）
部分文獻參考資料
- 「A Brief History of Grids,」 Lucienne Roberts, Graphics
- 「The Secret Law of Page Harmony,」 Retinart
- 「Responsive layout grid 」Material Design Team
- 「Building Better UI Designs With Layout Grids」
原文：UX小學(xué)
在日常的設(shè)計工作中，版式即一個畫面的骨架，也是視覺傳達(dá)的重要組成部分，版式整體的活躍程度也能起到改變畫面基調(diào)的作用，這也就是為什么很多作品看似很“簡單”，但卻不失設(shè)計感的原因，如何把原本比較中規(guī)中矩的版式結(jié)構(gòu)通過設(shè)計手法將其差異化、提升設(shè)計感、增強活躍度，這樣做的目的是為了打破墨守成規(guī)的形式，提升用戶停留時間、以及畫面的趣味性，所以本期就和大家一起總結(jié)一些常用增強版式活躍度、提升版式設(shè)計感的設(shè)計手法，有哪些？
色塊疊壓法
色塊疊壓法，顧名思義就是改變色塊的擺放方式，可以分為兩類：
第一類是：色塊與色塊之前的疊壓；通過色塊與色塊之間的非常規(guī)擺放形式，打破原本常規(guī)的版式結(jié)構(gòu)，增強其形式感、活躍度，下面我們舉個例子：
通過上下對比，我們不難發(fā)現(xiàn)，下側(cè)畫面整體版式結(jié)構(gòu)更跳躍，直白的說就是不死板，而且形式感更強，給人的感覺也更舒服、有趣味性；而上側(cè)畫面的整體感受并不是說不合理，只不過相對比而言，這種種結(jié)構(gòu)形式很常見，版式結(jié)構(gòu)變化性不高，形式感和設(shè)計感也稍有欠缺，那么造成這種現(xiàn)象的原因是什么呢？
1、頂部LOGO區(qū)域因采用了色塊疊壓的手法且故意將LOGO處的色塊放大，使其超出導(dǎo)航欄的固定范圍，在視覺感受本身來說就已經(jīng)形成了很強烈的形式感，打破了原本色塊區(qū)域分明的布局，因此，版式的跳躍性也更加強烈~
2、時間說明區(qū)域?qū)⒃旧舷玛P(guān)系的色塊劃分通過疊壓的手法將其改變?yōu)榍昂箨P(guān)系，且合理的將海報、時間說明、以及下半部分三個不同模塊連接為一個整體，在提升版式活躍度的同時也增強了視覺的整體性！
色塊疊壓的形式在很多優(yōu)秀作品中也是很常見的，這種手法對于版式結(jié)構(gòu)的重組、改變也是最直觀的一種，比如：
通過色塊之間的相互疊壓，形成了很好打破常規(guī)的效果，使得頁面版式的跳躍性更強！
第二類：色塊與主體的疊壓方式，通過色塊與主體物或者產(chǎn)品之間的相互疊壓作用，營造出非常規(guī)的設(shè)計形式，從而提升版式整體的靈活度以及設(shè)計感，舉個例子：
這里運用的就是將主體物與色塊之間相互疊壓的手法，形成了一定的前后關(guān)系，而且這里主體處色塊最大作用還是打破常規(guī)的版面形式，目的是在視覺上給人以更加新穎、更具形式感的感受，且雖然做了結(jié)構(gòu)上的改變，但并沒有影響到主體信息的傳達(dá)；切記，不能一味的追求非常規(guī)而忽略了設(shè)計本質(zhì)問題，一定要合理運用！
局部放大法
當(dāng)作品版式不夠活躍的時候，我們可以嘗試刻意改變某處的局部信息，將其放大，提升視覺變化的對比性，因為放大的元素其本身就具有很強烈的視覺沖擊力以及裝飾性，比如大號字體、數(shù)字、圖形等等，所以局部放大的手法在頁面版式設(shè)計中也是很常用的一種表達(dá)形式，比如：
將主體的某一處細(xì)節(jié)或者某一局部放大處理，與原本偏常規(guī)布局形成了鮮明的對比關(guān)系，在頁面整體而言也起到了很好的打破版式關(guān)系，試想一下：當(dāng)用戶前面一直在瀏覽比較常規(guī)的布局結(jié)構(gòu)時，突然有1-2處這樣非常規(guī)的處理模塊，會很大程度上提升頁面對于用戶視覺的沖擊力，，給用戶留下更深刻的印象；同時也使得作品整體的版面結(jié)構(gòu)更加富有跳躍性！
還有另外一種局部放大形式，即在放大的基礎(chǔ)上故意按照非常規(guī)的形式擺放，往往也能起到很好的打破版面布局的作用，只不過這種形式在使用時相對不好把握，比如：
類似案例中所展示的一樣，通過產(chǎn)品非常規(guī)的局部放大以及擺放形式，畫面給人的感受更加大氣，視覺沖擊力更強烈，同時版式的跳躍性也更強；只不過這種形式在運用時要注意：頁面整體中最多出現(xiàn)1-2次即可，用于活躍版式、提升設(shè)計感，一點出現(xiàn)次數(shù)過多，很容易形成雜亂的現(xiàn)象；之所以叫做非常規(guī)是因為有常規(guī)方式加以襯托、輔助，所以才會在視覺上形成反差！
使用非常規(guī)形狀
既然是為了提升版面的活躍度，那么版面中所有的元素都可以是嘗試改變的元素，比如常用到的按鈕，再或者線條等等；使用非常規(guī)的形狀、圖形也是方式之一，比如最簡單的：
說到矩形，很多人都會想到常規(guī)形式，而也有一部分設(shè)計師會聯(lián)想到非常規(guī)形式1，少數(shù)人會想到2和3的形式，這四類并沒有設(shè)計上的好壞之分，而是當(dāng)我們習(xí)慣了常規(guī)形式的色塊之后，也可以嘗試一下其他形式，也是會有意想不到的結(jié)果！比如非常規(guī)形式2的運用：
相比平時看到的矩形排列方式，這一作品則給人很新穎的感覺，原本平面的作品，因為色塊形狀的改變使得整體有了很強烈的縱深感，版面的跳躍性很強烈，這樣的版式還會有人說死板、常規(guī)嗎？
非常規(guī)形狀3的使用可以參考下面這個案例：
在原本頁面中完全統(tǒng)一的形狀圖形中變幻其中一處的形式，對于頁面整體跳躍性的提升還是一目了然的，原因在于：此處矩形的形態(tài)就屬于非常規(guī)類型，本身就具有一定的跳躍性、設(shè)計感，而用在此頁面中又與上下形成了一定的反差對比，所以使得版面整體更加活躍！
還有很多非常規(guī)的形狀，同樣也可以嘗試，比如：
想要版面看似來不古，、就要在頁面中的每一個視覺元素上找突破，版式聽起來好像一個很大的整體一般，其實一樣可以拋開整體，把每一個局部作為突破點，尋找合適的視覺表達(dá)形式；當(dāng)某一種形式已經(jīng)讓大家所熟知甚至成為常識的時候，我們不妨稍作改變，在不影響辨識度以及視覺傳達(dá)的基礎(chǔ)上，做一些形式上的改變，往往可以給與版式更強烈的跳躍性以及設(shè)計感！
總結(jié)
版式就像配色一樣，很感性，沒有完全一成不變的理論；當(dāng)我們想要提升版面整體跳躍性的時候，我們不妨試試以上方法，也許小小的改變對于整體而言就是完全不同的兩種感受，當(dāng)然，也不能盲目的追求形式感、特殊性，要切記：特殊是通過對比體現(xiàn)出來的，沒有對比，就無法形成很好的視覺反差，同時也起不到應(yīng)有的作用；還是要提醒大家：一個整體非常規(guī)的手法用在1-2處即可，太多的話是很難把握的！
來源：美工美邦
]]>
版式設(shè)計關(guān)注的是設(shè)計中文字和圖像的位置關(guān)系。 這些元素應(yīng)該如何擺放，它們彼此以及整體設(shè)計構(gòu)想的關(guān)系，都會影響到用戶對內(nèi)容的識別與接收，以及他們對內(nèi)容所產(chǎn)生的情緒反應(yīng)。利用親密性原則和對齊方式可以促進用戶接收頁面中呈現(xiàn)的信息。
對齊原則
什么是對齊方式：是指文字或圖片在垂直層面和水平層面頁面的位置。
下面列舉一些較為常見的對齊方式：
垂直對齊
文字的垂直對齊可以是居中對齊、上對齊或底端對齊
水平對齊
文字或圖片的水平對齊可以是左對齊、右對齊、居中對齊或兩端對齊。
對齊方式?jīng)Q定了整個畫面的流暢性，在做日常需求中明明有對齊的意識，但是為什么設(shè)計出來的頁面就是很奇怪呢？對齊方式的合理運用絕大部份是體現(xiàn)在視覺維度上，而我們往往僅考慮物理對齊方式。
下面舉幾個我的需求案例來解決視覺對齊的幾點問題：
以視覺邊界線對齊
上圖案例好像看起來并沒有問題，但是在上半部分的列表中灰色背景承擔(dān)了兩端對齊的角色，而事實上文字的視覺重量大于背景，就會導(dǎo)致整個頁面的視覺重量不對等，視覺引導(dǎo)線發(fā)生形變。
而下圖中將列表數(shù)據(jù)做兩端對齊，讓整個畫面大方得體，視覺重量趨于一致，瀏覽閱讀上變得舒適。
小結(jié)：對齊邊緣以視覺引導(dǎo)線為準(zhǔn)。
以視覺流對齊
我們正常在看東西的時候會是從上到下，從左到右這樣進行瀏覽閱讀信息，那么在頁面設(shè)計的時候也應(yīng)當(dāng)考慮一下。
上圖兩個卡片的操作區(qū)域分別運用了左、右對齊，兩種看起來沒有什么問題，但是考慮到視覺流向，會發(fā)現(xiàn)第二個的操作區(qū)域位置更為合理，也是視覺距離更近的方案。
小結(jié)：頁面的一個區(qū)塊內(nèi)，重要元素或者操作區(qū)往往會跟隨著視覺流向進行布局。
多屬性對齊原則
上圖案例在對齊方式上列表標(biāo)題和內(nèi)容采用了左對齊的形式，形成了不規(guī)整的邊緣，視覺上就會參差不齊，操作流暢性大打折扣。
上圖為優(yōu)化后的版本，將列表標(biāo)題和內(nèi)容的對齊方式進行單獨劃分，用戶在瀏覽中可以快速識別和區(qū)分信息。
小結(jié)：同一屬性的可以使用同一對齊方式。
那么通過解決這幾個常見問題，我們會發(fā)現(xiàn)，對齊原則是在滿足物理對齊原則的同時，在視覺上也要思考他適合哪種對齊方式，元素之間是如何對齊。
親密性原則
首先通過一組物品來感受一下親密性原則。
這張圖片中的四個不同類別物品我們會感覺它們是一個整體。
當(dāng)我們移動了物體的位置之后，會感覺左面三個物品屬于一個區(qū)域整體。
同一組物品我們將它們分成不同顏色，同樣也是左面三個物品看起來是一個區(qū)域整體
通過上面的案例我們可以得出一種結(jié)論：距離較近，我們就會感覺它們之間存在著一定的關(guān)系同屬一個整體。
由此我們可以得知，親密性原則是在界面設(shè)計中相對靠近的元素，它們之間就會存在聯(lián)系。
那么在需求中我會用到兩種方法來對親密性實現(xiàn)和調(diào)優(yōu)的：
借助間距優(yōu)化親密性
上面這張設(shè)計圖中，我們會感覺日期、評論、點贊量和下面的章節(jié)是一個區(qū)塊，在瀏覽的時候造成很大困擾。
而在優(yōu)化后，將三個信息點的距離拉近成為一個區(qū)塊，并且層級關(guān)系也一目了然。
小結(jié)：在信息容易產(chǎn)生誤解的時候，需要注意間距的把控
借助元素建立親密性
除了把控間距之外我們在處理親疏關(guān)系的時候還會借助一些輔助元素，下面介紹一下兩個常用的方式。
卡片工具
分割工具
小結(jié)：針對不同的頁面風(fēng)格和強弱，工具的使用也會有所差異，要適合頁面調(diào)性來選擇使用。
總結(jié)：通過幾個小的需求案例，希望可以給大家一些幫助～