我們?cè)诜嗠s志的時(shí)候，總是會(huì)驚嘆雜志里的圖片怎么會(huì)這么好看。其實(shí)雜志里的圖片一方面是由攝影師專門為雜志的編排而拍攝的，另一方面，也是因?yàn)殡s志對(duì)圖片的處理手法十分巧妙，今天這節(jié)課我們將給大家講解一下關(guān)于雜志里的圖片都是如何處理的。
在課程開始之前，我們先來看一些雜志的圖片。這三張是以一張大圖片為主體的雜志頁(yè)面，我們將圖片用紅色的色塊標(biāo)記，文字則用藍(lán)色的色塊標(biāo)記。我們可以發(fā)現(xiàn)，紅色部分的面積遠(yuǎn)大于藍(lán)色部分的面積。
我們換成小圖片的頁(yè)面看看。同樣的，圖片的面積也遠(yuǎn)大于文字的部分。我們可以發(fā)現(xiàn)，現(xiàn)在雜志的大多數(shù)頁(yè)面其實(shí)都是以圖片作為畫面的主體，或者說圖片所占比重會(huì)比文字大得多。
為什么會(huì)出現(xiàn)這種現(xiàn)象呢？那是因?yàn)閳D片與文字相比，圖片的視覺沖擊力和對(duì)人的吸引力遠(yuǎn)大于文字。為了能夠吸引讀者的購(gòu)買和閱讀，所以雜志頁(yè)面中會(huì)加入豐富的圖片。
那么我們接著先來了解一下關(guān)于圖片分類的小知識(shí)。
圖片可以分為點(diǎn)陣圖和矢量圖，點(diǎn)陣圖就是以像素組成的圖，放大之后可能會(huì)造成模糊等失真的效果。矢量圖則是由線條、幾何圖形等構(gòu)成，可以隨意放大縮小也不會(huì)失真。
也可以分為攝影圖片和手繪圖片，顧名思義，攝影圖片是用照相機(jī)拍攝出來的圖片，而手繪圖片則是通過筆或者手繪板畫出來的圖片。
矩形圖片和去底圖，矩形圖片是指外輪廓是矩形的圖片，而去底圖則是把環(huán)境都除去，只保留主體的圖片。
因?yàn)槭掷L的圖片本身就會(huì)比實(shí)物的攝影圖更加具備張力，也更容易給人提供想象，修飾的需求并沒有攝影圖來的這么高，而且手繪的或是矢量圖在雜志中出現(xiàn)的概率相對(duì)比較少一些，所以本篇教程所針對(duì)的圖片是左邊的這兩種，矩形或者是去底的攝影圖片。
這節(jié)課我們雖然講解的是如何去修飾一張圖片，可是對(duì)于圖片的修飾我們應(yīng)該要把控好一個(gè)度，因?yàn)槿绻覀円晃兜淖非笮Ч鴮?duì)圖片進(jìn)行過度的處理，很可能會(huì)削弱了圖片想表達(dá)的東西，甚至讓版面過于繁雜而凌亂不堪。而且在某些情況下，圖片不需要進(jìn)行修飾也能讓版面足夠有張力和美觀，那么在什么情況下我們可以不對(duì)圖片進(jìn)行修飾呢？我們來看看吧。
第一種情況是當(dāng)我們使用的圖片本身就足夠的好，足夠有質(zhì)感和張力，無需進(jìn)行修飾便能夠撐起整個(gè)版面。
第二種情況是我們可以通過兩張以上的圖片排列，讓圖片之間產(chǎn)生對(duì)比或是關(guān)聯(lián)，從而讓畫面產(chǎn)生張力。
那么第三種情況就是當(dāng)我們想要強(qiáng)調(diào)文字部分時(shí)，并且文字組合做得足夠的精致或者有表現(xiàn)力時(shí)，那么圖片也可以省略掉修飾的環(huán)節(jié)。
最后一種情況是我們要刻畫簡(jiǎn)約風(fēng)格的畫面時(shí)，就要盡量避免對(duì)圖片進(jìn)行太多的修飾和刻畫，否則圖片會(huì)使畫面產(chǎn)生巨大的違和感。
接下來正式進(jìn)入本次教程的核心部分，雜志中對(duì)圖片都是如何刻畫的呢？我們第一種要講解的方法就是前面提到的去底圖。
為什么說去底也算是一種修飾圖片的手法呢？我們來看看這張圖片，這張圖片是我從一個(gè)電商網(wǎng)站上保存的圖片。我們可以看到這張圖片雖然十分的美觀，但是模特的裙子和背景色調(diào)很接近，比較不容易展示裙子的細(xì)節(jié)。
我們把他做成一頁(yè)雜志，可以發(fā)現(xiàn)這個(gè)頁(yè)面從版式結(jié)構(gòu)上來說并沒有什么問題，整體畫面也十分美觀。
但是如果我們想要做一版能夠展示裙子細(xì)節(jié)的版面，那么我們可以嘗試把這個(gè)模特?fù)赋鰜?，裙子在純色的背景上就足夠清晰和亮眼了?
把去底的模特放進(jìn)版面中，這兩個(gè)版面對(duì)比一下，是不是右手邊的版面更加簡(jiǎn)潔有力呢？
另外，去底的圖片相比起矩形圖片也會(huì)顯得更加靈活。我們用這樣一個(gè)多張矩形圖片整齊排列的畫面來作為例子。這個(gè)版面排列十分整潔美觀，信息都一目了然。
但是如果我們想要讓版面變得更加活潑和有張力一些呢？我們就可以通過去底來實(shí)現(xiàn)。利用圖片去底之后所形成的負(fù)空間進(jìn)行排列圖片，讓圖片錯(cuò)落有致地排列在版面里，這樣靈活處理出來的畫面，會(huì)更加熱鬧和有張力。
這些都是雜志中使用去底圖片的案例。
剛剛我們講的只是去底圖片的基礎(chǔ)玩法，接下來我們要講解一下去底圖的另外兩種高階一些的玩法。首先是粗糙去底。粗糙去底就是大致地沿著主體的輪廓將主體摳下來，并不需要嚴(yán)絲合縫地?fù)笀D。
還是用這個(gè)模特當(dāng)做案例，如果我們覺得剛剛做的這個(gè)版面有些單調(diào)的話，那么我們不妨嘗試一下粗糙去底的方法。粗糙去底的方式能讓圖片的形式感更加強(qiáng)烈。
很多時(shí)候粗糙去底還會(huì)在圖片底下加一個(gè)小小的投影，讓圖片有種不規(guī)則的小紙片的感覺。
在雜志中這樣的處理方式是非常常見的，它適合用在偏時(shí)尚潮流或者是偏文藝的版面中。
第二種進(jìn)階玩法是半去底，也可以叫做局部去底，意思就是沿著圖片主體的外輪廓將主體的局部摳出來。
在這里給大家介紹兩種比較常用的局部去底的小技巧。第一種是主體背后有輪廓明顯的物體的話，我們可以將主體沿著主體背后物體的輪廓進(jìn)行摳圖，例如這個(gè)模特背后的門。
當(dāng)主體背后沒有什么明顯的物體讓我們進(jìn)行局部摳圖的時(shí)候，那也沒關(guān)系，我們可以使用第二種小技巧，將主體踩著的地面摳出一部分來，這樣也能一定程度上展示主體所在的環(huán)境。
我們同樣將這兩個(gè)摳好的模特放進(jìn)版面里，比起最初的版本，這兩稿的形式感會(huì)更強(qiáng)一些。
這個(gè)雜志作品就用到了我剛剛介紹的小技巧。這樣的去底方式能讓版面更加活潑有趣。
另外將去底圖和矩形圖片放在一起，能夠產(chǎn)生強(qiáng)烈對(duì)比，表現(xiàn)力也會(huì)很強(qiáng)。
例如這些雜志頁(yè)面都存在著矩形圖片和去底圖片的對(duì)比。
我們很多時(shí)候都會(huì)自嘲自己只是摳圖的，可是聽了這些之后，有沒有發(fā)現(xiàn)自己連摳圖都不配，摳圖遠(yuǎn)遠(yuǎn)沒有你想得這么簡(jiǎn)單，去底的圖片比矩形圖片靈活得多，也更具有活潑熱鬧的屬性，將去底圖處理得好，可以給版面帶來非常大的氣質(zhì)上的提升。那么我們接著來看，除了去底之外，還有什么別的處理圖片的技巧吧！
接下來給大家講解一下第二種比較常見的圖片處理方式——疊加色塊。
疊加色塊的方式有兩種，分別為半疊色塊和全疊色塊。我們先來講講半疊的。
好吧，又是這個(gè)模特。我們?cè)谒谋澈蟑B加一個(gè)色塊，一方面可以一定程度上填補(bǔ)留白，另一方面也能讓圖片更具有形式感。
除了疊加這種矩形色塊，還可以嘗試疊加不規(guī)則的色塊，不規(guī)則的色塊相比矩形色塊能更靈活的處理負(fù)空間，也可以根據(jù)主體的輪廓進(jìn)行靈活調(diào)整。
看看這些案例，通過加入了色塊是不是讓畫面更飽滿和有張力了呢？
接下來來講講全疊色塊，全疊色塊的處理手法一般是用在這種多圖片并列排列的版面中，因?yàn)槿绻且粡埓髨D片使用全疊的手法就會(huì)顯得有些呆板了。
我們用個(gè)案例來展示一下吧，例如這樣一個(gè)版面，整齊地排列著九種不同的蔬菜，可是由于這些蔬菜的形狀各異，導(dǎo)致了負(fù)空間特別的零碎，畫面顯得有些散。
最快的解決方式就是給他們疊加一些色塊，那么版面就變得規(guī)整許多了。
如果我們覺得這樣有些不夠靈活的話，我們可以將個(gè)別的蔬菜放大，讓蔬菜的局部或者是投影超出色塊，這樣的版面就會(huì)顯得靈活而不零碎了。
第三個(gè)手法是使用描邊或者邊框。
剛剛我們用去底的方式來讓這個(gè)版面更加活潑有張力，其實(shí)通過添加邊框是一個(gè)更加簡(jiǎn)單快捷的方法。
我們不需要改變版面的結(jié)構(gòu)，只需要在矩形圖片的邊緣添加一圈描邊，或者是將圖片的邊框處理成拍立得，版面就會(huì)立即顯得更加活潑有趣了。
邊框的形式有很多，例如在圖片的內(nèi)部加邊框，兩條粗細(xì)不同的線組成的邊框，或者是手繪的線條作為邊框。我們可以通過多看雜志總結(jié)出更多的邊框形式。
剛剛我們講的都是矩形圖片，其實(shí)去底圖片也是可以添加描邊的。例如這頁(yè)雜志，通過描邊的使用，使得深色的產(chǎn)品在深棕色的背景中能夠凸顯出來。
字疊圖是在雜志中可以說是最常見的修飾手法了，非常的簡(jiǎn)單粗暴但是超級(jí)實(shí)用。字疊圖的方式大概也有三種，分別為標(biāo)題疊圖，段落文字疊圖和手寫體疊圖。
首先講講標(biāo)題疊圖的使用。我們來看看這個(gè)版面，他的主體是一個(gè)大草原的大場(chǎng)景圖片，圖片中沒有明顯主體。那么我們就可以通過將標(biāo)題疊在圖片上的方式，使得圖片上產(chǎn)生視覺焦點(diǎn)。
如果將兩張圖片的位置換一換，上方的大圖片變成了這張以蒙古包為主體的草原圖片，那么我們疊加文字的時(shí)候就需要注意到疊加的位置要與主體相呼應(yīng)了。
這兩個(gè)都是將標(biāo)題組疊壓在圖片上的例子，將標(biāo)題組合疊加在圖片上，能讓標(biāo)題和圖片都得到凸顯和強(qiáng)調(diào)。
接下來是疊加段落文字，將段落文字疊壓在圖片上，能讓版面更加靈活，也能讓大段的段落文字顯得沒這么枯燥。一般來說，因?yàn)樽R(shí)別度的原因，段落文字不會(huì)完全疊加在圖片上，只會(huì)疊壓局部。
我們同樣用大草原的文案來做一個(gè)段落文字的疊壓。由于是段落文字，特別需要注意文字的可讀性，所以我們將段落文字都疊壓在了色調(diào)比較淺的天空上，盡可能地保證閱讀的流暢。
最后是疊壓手寫體的處理方式，手寫體的疊壓與標(biāo)題一樣，同樣需要注意疊壓的位置。
手寫體的疊壓能將手寫體自帶的屬性帶給圖片，例如想讓圖片更文藝一些可以用細(xì)一些的手寫體，更潮流一些則可以疊壓粗的涂鴉感覺的手寫體等等。
我們剛剛講解的都是在矩形圖片上疊加文字，那么在去底圖片上能不能疊加文字呢？其實(shí)是可以的，像一些裝飾的手寫體，或者字號(hào)比較大的標(biāo)題，在不影響識(shí)別性的情況下進(jìn)行字疊圖的手法都是沒有問題的。但是！我們是非常不建議在去底圖上疊加段落文字，因?yàn)橐话闳サ讏D可以用來疊壓文字的地方不多，如果要大面積的疊壓段落文字，必定會(huì)產(chǎn)生識(shí)別度不足的問題，所以在去底圖上疊加段落文字需要非常謹(jǐn)慎。
那么除了字疊圖之外，利用文字進(jìn)行修飾的方式非常的多，我在這里給大家介紹幾種比較常用的。
將文字繞著圖片主體排列是在雜志中非常常見的一種手法，能讓畫面變得更加活潑熱鬧。
我們也可以將文字處理成發(fā)射狀，模擬出一種噴口而出的感覺，使得圖片更具有動(dòng)感。
添加對(duì)話框，能讓圖片變得十分生動(dòng)，讓靜止的圖片也有一種會(huì)思考或者會(huì)說話的感覺。
類似的方式還有非常多，例如文字加指向性的箭頭、個(gè)性的字體、數(shù)字，甚至是豎排的文字等等，都可以變成裝飾圖片的元素。
還是用一個(gè)案例來示范一下吧。這次換一個(gè)鞋子的案例，我們看這個(gè)版面構(gòu)圖啥的都沒什么問題，就是缺乏了一些活潑的氛圍，那么我們加入文字的裝飾性元素，版面就瞬間變得活躍了。
如果我們想要添加裝飾元素又缺少文案的時(shí)候，那我們就可以用下一種修飾手法，添加手繪的元素。
裝飾性的手繪小元素，能夠模擬出人物或者是物體的運(yùn)動(dòng)趨勢(shì)，讓圖片和版面具備運(yùn)動(dòng)感。
同樣這雙鞋，我們給他添加一些手繪的小元素，也同樣能夠塑造出活潑生動(dòng)的畫面。
接下來要講的是添加投影
我們來看看這些添加投影的例子，投影可以讓圖片變得更加真實(shí)，更具備細(xì)節(jié)，使得畫面更加具備質(zhì)感。
這一個(gè)案例添加投影也可以一定程度上解決畫面單調(diào)的問題，但是他具備的氣質(zhì)并不是添加裝飾性元素的活潑熱鬧，添加投影帶來的是使畫面更具備質(zhì)感。
添加投影除了剛才使用的真實(shí)投影外，我們還可以用這種假的投影，其實(shí)就是一個(gè)疊在主體下方的，與主題輪廓相似的幾何色塊。這種方式更注重的是表達(dá)一種形式感，而非真實(shí)感。
第8種的修飾手法是傾斜。
傾斜的手法能讓圖片具有不平衡感，從而產(chǎn)生強(qiáng)烈的動(dòng)感。關(guān)于傾斜我們之前已經(jīng)有別的教程詳細(xì)說過了，那我們就直接看看案例吧。
我們將這雙鞋子進(jìn)行傾斜擺放之后，感覺畫面就不那么單調(diào)了，產(chǎn)生了一定的張力。
最后一種方式是出血和跨頁(yè)處理的手法。
也許你們會(huì)想怎么出血也算是修飾手法呢？不就是放大而已么？沒錯(cuò)，放大也能算是一種修飾手法。在圖片足夠高清的情況下，放大能讓讀者留意到許多我們平時(shí)不注意的細(xì)節(jié)，增添了版面的細(xì)節(jié)感。相對(duì)于完整的圖片，經(jīng)過出血的處理的圖片遭到了裁切，會(huì)產(chǎn)生一種陌生感，也能夠讓讀者覺得更新鮮。
最后我們還是用這雙鞋子來示范一下，因?yàn)樾臃糯蟪鲅?，版式結(jié)構(gòu)會(huì)遭到破壞，所以我們得換一個(gè)新的構(gòu)圖。由于經(jīng)過出血處理之后的鞋子并不完整，所以我們?cè)谏戏郊尤肓艘浑p小的完整的鞋子作為信息的補(bǔ)充。
好啦，我們給大家總結(jié)的雜志里處理圖片的小技巧已經(jīng)全部講完啦，不知道大家都學(xué)會(huì)了沒。雖然說我們是從雜志的設(shè)計(jì)中總結(jié)出來的設(shè)計(jì)技法，但是并不意味著這些手法就只能應(yīng)用在雜志設(shè)計(jì)中，設(shè)計(jì)其實(shí)都是共通的，并沒有說某些技法就只能被用在某些領(lǐng)域中。下面我們就給大家?guī)硪粋€(gè)海報(bào)的案例，給大家演示一下如何將雜志中的騷操作帶到別的設(shè)計(jì)中。
因?yàn)槲覀兪褂玫氖请s志的編排技巧，比較適合時(shí)尚、潮流或是文藝的風(fēng)格，所以我們選擇做一個(gè)潮牌的宣傳海報(bào)，這樣在氣質(zhì)上會(huì)比較相符合。
首先建立一個(gè)版面并確定好頁(yè)邊距。接著我們把畫面的主體，也就是這個(gè)潮牌的創(chuàng)始人陳冠希歐巴放在畫面中間。
然后將標(biāo)題文字放在版面右上角，標(biāo)題文字我們做了一個(gè)投影的效果增強(qiáng)標(biāo)題的形式感。對(duì)應(yīng)的，我們?cè)诎婷娴淖笙陆蔷幣哦?jí)信息的文字，做一個(gè)對(duì)角線的呼應(yīng)。
接著將其余的文字安排在左上角和右下角，我們整個(gè)版面的大體框架就出來了。我們可以看到現(xiàn)在這個(gè)版面的留白太多，形式感不夠強(qiáng)烈，缺乏氛圍感。接下來我們就要用我們今天教程所講的手法來一一解決這些問題。
先來一個(gè)疊加色塊的手法，在歐巴的身后疊一個(gè)黃色的圓形色塊，那么上半部分負(fù)空間零碎的問題就一定程度上得到了解決。接著再來添加一個(gè)投影，這個(gè)投影我們選用了高明度和高純度的青藍(lán)色，這樣更加有時(shí)尚有趣的感覺。
然后使用字疊圖，從文案中的slogan里提取出It’s Movement的英文放大疊在人物身上，這里我們選用了一款比較有趣的粗無襯線字體。
剩下的負(fù)空間我們用添加文字裝飾元素和手繪裝飾元素的手法填滿。最后的最后，再給版面上加一層點(diǎn)元素背景，增加版面形式感。我們這一張海報(bào)就最終成型了。
文章來源：優(yōu)設(shè)
年底了，大家有沒有在電腦前面忙成狗呢？我身邊設(shè)計(jì)師朋友們可都在沖刺年終 kpi 呢。
但設(shè)計(jì)需求越著急就越容易出現(xiàn)問題，不少客戶爸爸們都抱著一種「沒多少時(shí)間了，你就這么抄吧」的速成心態(tài)，殊不知這樣讓設(shè)計(jì)師很為難??！
粉絲投稿，求問老板讓「致敬」時(shí)，設(shè)計(jì)師應(yīng)該如何應(yīng)對(duì)呢？
當(dāng)然這種抄襲的事情我們自然不能支持，但從別人的套路中總結(jié)出經(jīng)驗(yàn)還是可以的，為了給大家寫出有干貨的內(nèi)容，我收集了喜茶全年的廣告海報(bào)，做了一個(gè)設(shè)計(jì)風(fēng)格的總結(jié)，方便大家「偷師」（不是抄襲，謝謝）
要說新式茶飲行業(yè)最喜歡用的風(fēng)格之一，莫過于「港式風(fēng)格」了，畢竟港式奶茶也是新式茶飲行業(yè)的扛把子。
港風(fēng)兼具了：風(fēng)格強(qiáng)烈/配色醒目等諸多好處，喜茶也在 2019 年多次使用這個(gè)風(fēng)格，例如與阿華田合作的聯(lián)名款還有后面的阿喜小賣部以及吃瓜公司，還有后續(xù)的火鍋跨界多肉芒芒甘露等等都采用了港式風(fēng)格來設(shè)計(jì)
但其實(shí)港風(fēng)是非常容易操作的，只需要三步就能打造喜茶同款。
下面我們就來看看怎么搞港風(fēng)設(shè)計(jì)吧！
談到配色就逃不出一個(gè)核心話題：「港風(fēng)到底是什么風(fēng)格？」這就要從香港本土的環(huán)境開始說了，香港擁有非常高的人口密度，在鬧市區(qū)樓宇一棟挨著一棟，店鋪的招牌鱗次櫛比。
大家日常的生活環(huán)境就是每天都被高密度的信息轟炸著，所以店招想要在眾多招牌中脫穎而出自然就需要視覺上的沖擊，其中便以極其醒目的霓虹燈店招勝出。
但霓虹的制作工藝上，圖形與配色都不能太復(fù)雜，于是就形成了：手寫字體+高飽和配色+簡(jiǎn)單圖形，這樣的固定組合形式，港式風(fēng)格也就此定型。
所以其實(shí)只要選擇好一個(gè)手寫字體你就完成了港風(fēng)的一大半！
然后再選擇一個(gè)飽和度高的顏色外加基礎(chǔ)好看的圖形就搞定了，這時(shí)你就會(huì)擁有一個(gè)喜茶同款海報(bào)了。
好看的免費(fèi)字體這里找：
說完了港風(fēng)之后，第二個(gè)經(jīng)常被 cue 的就是傳統(tǒng)古風(fēng)，而古風(fēng)中最最最最重要的一點(diǎn)就是定好主基調(diào)色，然后選對(duì)輔助素材。
而主色調(diào)的選擇無外乎幾種常見的水墨畫、工筆畫、民國(guó)畫報(bào)等，這些都是古時(shí)候我們常用的藝術(shù)載體。
而其中工筆畫和民國(guó)畫報(bào)因?yàn)楫嬅嫒崦篮每础嬶L(fēng)具有明顯特點(diǎn)成為了現(xiàn)在年輕品牌愛用的設(shè)計(jì)形式。
當(dāng)然色調(diào)只能展現(xiàn)畫面的整體感覺，真正的神韻還是要靠細(xì)節(jié)來呈現(xiàn)，例如祥云、角飾紋樣、圓月玉兔等都是極具特色的。
古風(fēng)色調(diào)+裝飾性圖案的這種搭配，可以說在產(chǎn)品廣告中是非常百搭的，且大部分的產(chǎn)品展示都能應(yīng)用上，例如喜茶新品的荔枝季還有桂花綠的海報(bào)。
△ 喜茶的中國(guó)風(fēng)海報(bào)
以及一些節(jié)日海報(bào)的應(yīng)用都能很好的體現(xiàn)中國(guó)節(jié)日的特色
如果你沒有太多時(shí)間去追求風(fēng)格創(chuàng)作但是又想要有好的視覺效果，那你也可以學(xué)學(xué)喜茶的廣告，走簡(jiǎn)約派的路線，簡(jiǎn)單來說這一風(fēng)格的要素就是排版要好 + 元素要少。
說白了就是畫面保持簡(jiǎn)潔的同時(shí)還要具有設(shè)計(jì)感，這就全靠排版來?yè)瘟?，相比其他的風(fēng)格，簡(jiǎn)約風(fēng)的排版更多元化。
常規(guī)的排版方式有居中、左右、四邊構(gòu)圖。
只要選擇合適的構(gòu)圖外加上好看的照片，你就會(huì)獲得不錯(cuò)的簡(jiǎn)約風(fēng)海報(bào)了，其實(shí)這種風(fēng)格也不用拘泥于灰白色調(diào)，配上其他的顏色或是插畫圖片時(shí)效果也一樣很好。
當(dāng)然，我們?cè)诳丛O(shè)計(jì)作品時(shí)都是只看到了最好的一面，看不到品牌與設(shè)計(jì)師在背后反復(fù)實(shí)驗(yàn)與摸索的過程。
△ 喜茶全年海報(bào)的一小小小部分…
里面還有一些不錯(cuò)的海報(bào)作品卻因?yàn)椴煌脑蛭茨芘c大家見面。
號(hào)稱茶飲界「廣告公司」的喜茶在這一年除了用心做飲品之外，也為設(shè)計(jì)圈提供了不少有價(jià)值的物料，能夠靠設(shè)計(jì)將產(chǎn)品的價(jià)值傳遞出來對(duì)于設(shè)計(jì)師來說是一個(gè)好現(xiàn)象，設(shè)計(jì)在以后的日子里會(huì)被越來越多的品牌重視起來，上面這些「套路」大家可以學(xué)起來了~
文章來源：優(yōu)設(shè)
近一年多接觸到了插畫 Banner 設(shè)計(jì)，算是自己邊做邊摸索，還在學(xué)習(xí)探索期，目前總結(jié)了一些做稿的思路，分享的目的是為了梳理完善自己的方法論，讓自己繼續(xù)向前進(jìn)一步。
本篇文章分享內(nèi)容：插畫 Banner 的三個(gè)層次。
插畫 Banner 的三個(gè)層次：文案層、畫面元素、背景層。
相關(guān)聯(lián)元素和點(diǎn)綴元素可以二選一，也可以同時(shí)使用，具體根據(jù)設(shè)計(jì)畫面而定。
以下內(nèi)容是我目前總結(jié)的背景層類型。選擇背景時(shí)的注意事項(xiàng)：背景一定要和元素風(fēng)格一致。我經(jīng)常會(huì)出現(xiàn)這樣的問題，主體物和背景不融合，導(dǎo)致設(shè)計(jì)看起來主體元素是貼上去的。
注：以上所用到的圖片素材均來自于懶設(shè)計(jì)、稿定設(shè)計(jì)
Banner 設(shè)計(jì)畫面千千萬，套路來回就幾樣。希望大家能在框架的基礎(chǔ)上進(jìn)行思維發(fā)散，創(chuàng)作出好的作品。
定量的設(shè)計(jì)套路（不變）+百變的設(shè)計(jì)風(fēng)格（變）=屬于你的千變?nèi)f化的 Banner 作品
（原文章地址：https://www.uisdc.com/banner-design-guide）
自從做設(shè)計(jì)以來經(jīng)常會(huì)看到一些很高大上的理論，例如：格式塔法則、網(wǎng)格系統(tǒng)、黃金分割法等等，這些詞語(yǔ)給人第一印象就是很高大上，很難學(xué)會(huì)，也有很多設(shè)計(jì)師看到這些理論就被嚇到，認(rèn)為自己學(xué)不會(huì)，也不想學(xué)，因?yàn)槔碚撝R(shí)確實(shí)是學(xué)起來很枯燥。對(duì)于初學(xué)者的設(shè)計(jì)師來說，這些理論可以在短時(shí)間不用學(xué)太多，但是對(duì)已經(jīng)工作幾年的設(shè)計(jì)師來說，這些設(shè)計(jì)理論知識(shí)也是必不可少的。
只有掌握設(shè)計(jì)中必要的設(shè)計(jì)知識(shí)，才能讓自己的設(shè)計(jì)眼界、技能得到提升。就我個(gè)人而言，我在設(shè)計(jì)初期也是很反感這些所謂的理論知識(shí)，對(duì)于我來說簡(jiǎn)單通俗的教學(xué)才是最容易讓人接受的，理論太深?yuàn)W，我真的無法從中體會(huì)到真正的奧秘。但是，越到后面，我越喜歡研究那些設(shè)計(jì)理論知識(shí)，因?yàn)槲以絹碓蕉媚切├碚摰闹匾?，?duì)我的設(shè)計(jì)也有很大的幫助。所以今天我采用通俗易懂的方法，教大家去理解和掌握這些高大上的設(shè)計(jì)理論知識(shí)。
今天主要分享我們經(jīng)常聽到的黃金分割構(gòu)圖法。
黃金分割構(gòu)圖法：是一種由古希臘人發(fā)明的幾何學(xué)公式，遵循這一規(guī)則的構(gòu)圖形式被認(rèn)為是「和諧」的，在欣賞一件形象作品時(shí)這一規(guī)則的意義在于提供了一條被合理分割的幾何線段。
黃金分割構(gòu)圖法的基本理論來自于黃金比例 ── 1 : 1.618。
黃金分割構(gòu)圖法運(yùn)用到海報(bào)設(shè)計(jì)、畫冊(cè)設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、繪畫、服裝設(shè)計(jì)、logo 設(shè)計(jì)、電視電影、建筑等等領(lǐng)域。在攝影中也經(jīng)常會(huì)引入黃金分割比例，可以讓照片感覺更自然、舒適，更能吸引觀賞者，給人一種賞心悅目的視覺感受。
我們先賞析一些運(yùn)用黃金分割法的優(yōu)秀案例，通過賞析能讓我們體會(huì)到它的美和重要性。
1. 在海報(bào)中的應(yīng)用
從上面的 2 張人物海報(bào)案例中，可以看出都利用了黃金分割螺旋法的技巧，當(dāng)整張圖作為背景時(shí)，我們不知道圖片主題位置的掌控時(shí)，就可以采用黃金分割法的原則。對(duì)于人物，可以根據(jù)想要突出的人物某一部位，直接采用這種分割方法快速找到版面位置
下面2張海報(bào)是通過圖形和文字的結(jié)合，主題文字排版的位置也都剛剛好是黃金分割的編排，帶給人一種美的、舒適的畫面感，圖片和文字在版面的比例剛好是 1 : 0.618。
2. 在網(wǎng)頁(yè)中的應(yīng)用
上面 2 個(gè)網(wǎng)頁(yè)都采用了黃金分割的原則，大體將版面分為圖片區(qū)+文案區(qū)，比例為 1 : 0.618。上面同時(shí)采用了網(wǎng)格重疊的形式，而下面的就是最基本的黃金分割比例。版面的編排整體給人一種呼吸感、有序的、層次分明的視覺感受，并且瀏覽的順序也是井井有條，如下圖閱讀順序指引：
3. 在繪畫上的應(yīng)用
像我們看熟悉的名畫「蒙娜麗莎」、「維納斯的誕生」等也符合黃金分割的比例。黃金分割比例也在這些作品上經(jīng)過了歷史認(rèn)證，利用黃金分割布局，讓畫面更耐看、更精致。
4. 在攝影上的應(yīng)用
在攝影中也經(jīng)常會(huì)引入黃金分割比例，可以讓照片感覺更自然、舒適，更能吸引觀賞者，給人一種賞心悅目的視覺感受。使用黃金分割的攝影可以制造出一種空曠、寂靜的視覺效果，也可以制造出一種特寫鏡頭的效果。不知道怎么拍照好看，學(xué)會(huì)這一招你的攝影立馬高大上。
5. 在建筑上的應(yīng)用
在建筑設(shè)計(jì)中的運(yùn)用也有很多案例，例如上面的金字塔和泰姬陵的多處布局都能看出黃金分割，第三張中國(guó)古建筑也都運(yùn)用了黃金分割構(gòu)圖。自古以來很多文化建筑都采用了這個(gè)構(gòu)圖，讓建筑看起來更加美觀、耐看、精致。
了解了螺旋黃金分割法的用途和好處，我們最主要的是需要知道怎么來畫這個(gè)螺旋黃金圖。
1. 新建畫布
2. 畫正方形
這里畫正方形是最關(guān)鍵的一步，我們只要知道螺旋黃金圖的比例就可以很快的畫出來。
螺旋黃金圖比例為：13 : 8 : 5 : 3 : 2 : 1
只要知道螺旋黃金圖的比例我們就可以開始畫正方形了，簡(jiǎn)單的正方形不用我多說吧。我們按 10 倍的比例來畫圖，簡(jiǎn)單的意思就是前面的螺旋黃金圖比例都乘 10，變?yōu)?130 : 80 : 50 : 30 : 20 : 10，再根據(jù)這個(gè)數(shù)字畫出 6 個(gè)正方形。
正方形畫好后按照這個(gè)轉(zhuǎn)圈的順序排好即可。
3. 畫圓弧線
正方形畫好后，畫圓弧線，可以通過畫正圓得到。
圓弧線為正圓的四分之一，圓的半徑為每個(gè)不同正方形的邊長(zhǎng)，通過不同大小的正方形畫出不同大小的圓弧即可。
開始畫圓?。阂源笳叫蔚挠蚁陆菫閳A心畫正圓，注意相切位置，畫好后刪除多余的錨點(diǎn)。
△ 圓心位置
△ 相切位置
△ 刪除多余錨點(diǎn)
△ 圓弧畫完后
到了這一步基本也就出現(xiàn)我們想要的螺旋黃金圖，最后只需要將我們的正方形改成描邊的模式即可。
△ 最終圖形
這里展示一下第二種方法：
螺旋黃金比1 : 1.618在畫面中怎么看？
說了這么多，沒有實(shí)際的操作案例你們是不是也很頭痛，到底拿到這個(gè)技巧怎么去使用呢？在我這里例舉一個(gè)橫版和一個(gè)豎版的案例。
找素材
這里找來幾張圖片，因?yàn)槭亲龇治霭咐?，所以我就選擇我自己喜歡的圖，我選擇的是圖1。
圖片調(diào)整
圖片確定后，我們就需要把圖放到我們的畫布中。
但是問題來了，一般我們的設(shè)計(jì)尺寸基本是不會(huì)和找到的素材是一樣大的，我們到底要怎樣放大圖片呢？圖片中哪些元素可以忽略，哪些需要重視？螺旋黃金分割法就可以用上了。
利用我們的螺旋黃金分割圖，放在我們的版面中。接下來就放大我們的素材圖片，分析圖片結(jié)構(gòu)。圖片上方都是天空，左邊是海和天空，只有右下比較復(fù)雜，有人和零碎的石頭，所以我們這里圖片就以人為畫面中的焦點(diǎn)，那么我們的螺旋圖就需要改變一下位置。
調(diào)整圖片大小和位置，將圖片中的人物放在螺旋圖的焦點(diǎn)位置，這樣我們的版面就快速地確定了視覺焦點(diǎn)。
文字排版
將文字排版在畫布中，再根據(jù)文字豎排的樣式，和人閱讀的習(xí)慣，調(diào)整圖的方向和文字位置，使人看向主題文字，給人一種指引的方向。
總結(jié)：主要利用螺旋黃金分割法調(diào)整圖片的位置焦點(diǎn)，使畫面中心達(dá)到舒適耐看和精致的視覺效果。
標(biāo)記分析圖：
這個(gè)案例我就不做太多的講解，因?yàn)楹芎?jiǎn)單，直接利用螺旋黃金分割構(gòu)圖的方法，將版面按1 : 0.618的比例劃分，然后在這個(gè)比例畫布中排版文案和圖片。
圖片位置排版
素材選擇上面的圖2，這里就做一張豎版的海報(bào)。
將素材圖放在畫布中，準(zhǔn)備好我們的螺旋黃金分割圖，也放在畫布中。根據(jù)圖片本身的特點(diǎn)，人物只有上半身，所以將圖片放在底部最為合適。至于人物應(yīng)該靠中間還是靠邊，我們同可以根據(jù)圖片人物本身的姿勢(shì)判斷，根據(jù)人物是微抬頭向上看，角度約 30 度，所以選擇將人物靠邊。
再就是人物具體位置的掌控，我們同樣和上面的案例一樣直接利用螺旋黃金分割圖做參考位置選擇，所以就很快找到合適的位置，如上面右圖。
填充背景和文案
我們將背景顏色填充為天空統(tǒng)一的色彩，建立網(wǎng)格，將文案排版在畫布中，上面主要是海報(bào)中的主要文案及主題文案，文案和圖片的總體比例為1 : 0.618，遵循我們的黃金法則。
根據(jù)圖片的氣質(zhì)，圖片中的色彩和人物都屬于文藝氣質(zhì)，清新、寂靜、雅致的感覺，所以我們這里可以選襯線體宋體，結(jié)合韓文來體現(xiàn)整體的氣質(zhì)。
效果展示
最后看看海報(bào)效果吧，主要講解螺旋黃金分割圖的使用，所以排版方面講解的比較簡(jiǎn)單，以及主題文字都采用最簡(jiǎn)單粗暴的字體，沒有過多的修飾。
文章分享了螺旋黃金分割構(gòu)圖的用途，很廣泛，包含海報(bào)設(shè)計(jì)、畫冊(cè)設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、繪畫、服裝設(shè)計(jì)、logo設(shè)計(jì)、電視電影、建筑、攝影等等領(lǐng)域，以及分享了黃金分割圖形的畫法，3 個(gè)簡(jiǎn)單的案例實(shí)操，利用黃金分割構(gòu)圖來幫助我們構(gòu)圖和排版，最有利于我們對(duì)圖片焦點(diǎn)位置的選擇和排版分布的掌控。
文章來源：優(yōu)設(shè)
Type defines type. 在英文中，單詞 Type 包含兩個(gè)含義，文字和類型。這從某個(gè)角度說明了字體對(duì)于品牌的意義。一種字體能影響甚至決定人們對(duì)于這個(gè)品牌風(fēng)格的認(rèn)知。隨著產(chǎn)品使用場(chǎng)景的不斷拓寬，一個(gè)品牌的呈現(xiàn)已經(jīng)不再局限于一個(gè) LOGO 那么簡(jiǎn)單。
品牌可以通過 LOGO、品牌色、IP 形象、字體等多種方式與受眾構(gòu)建聯(lián)系。根據(jù)權(quán)威機(jī)構(gòu) Salesforce 今年 4 月的調(diào)查，75% 的消費(fèi)者期望在與品牌互動(dòng)時(shí)獲得一種持續(xù)性的、連貫的體驗(yàn)。
縱觀京東現(xiàn)在的品牌光譜，可以發(fā)現(xiàn)，之前我們?cè)谧煮w方面的確是處于缺位的狀態(tài)。而字體作為一個(gè)分布廣泛的媒介，必將成為連通全部潛在品牌觸點(diǎn)的重要工具。
因此，京東朗正體的推出，將會(huì)與我們現(xiàn)有的資源一起，全面提升京東的品牌體驗(yàn)的連貫性，并有利于構(gòu)建新的品牌生態(tài)。
京東朗正體其實(shí)脫胎于京東內(nèi)部設(shè)計(jì)團(tuán)隊(duì)所稱的「京東字體」。與很多品牌（IBM、奧美）相似，我們的品牌字體也是從我們的 LOGO 文字中延伸而來。
一開始，我們也是邊學(xué)邊做，通過已有的一些基礎(chǔ)字體設(shè)計(jì)知識(shí)，從 LOGO 里寥寥無幾的筆畫中總結(jié)了一些筆畫規(guī)律，比如橫細(xì)、豎粗、點(diǎn)平、銳折等，然后將其應(yīng)用到各個(gè)部門提過來的做字需求中。另外有時(shí)候也需要對(duì)其他部門提交的文字 LOGO 進(jìn)行審核。
△ 這個(gè)神秘組織就是我本人
但是漸漸的，我們開始感到力不從心。一方面是隨著京東業(yè)務(wù)不斷擴(kuò)充，希望設(shè)計(jì)京東字體作為 LOGO 的需求越來越多。使用京東字體作為標(biāo)志，具有強(qiáng)品牌背書的優(yōu)點(diǎn)，而且相比專門設(shè)計(jì)一個(gè)圖形 LOGO 乃至一套 VI 體系，使用京東字體更加節(jié)省時(shí)間，具備更高的推廣效益。但僅靠一個(gè)設(shè)計(jì)師來對(duì)接整個(gè)集團(tuán)眾多部門的做字需求，還是有點(diǎn)不堪重負(fù)。
△ 源源不斷的做字需求
另一方面是我們意識(shí)到，我們根據(jù) LOGO 字體制定的造字規(guī)則，其實(shí)非常模糊且局限，這也是我們?nèi)狈ψ謳?kù)設(shè)計(jì)的經(jīng)驗(yàn)造成的。而這樣的漏洞使得我們?cè)趯?shí)際的應(yīng)用中遇到了問題。比如一開始我們簡(jiǎn)單地將撇的收筆都規(guī)定為縱切，但是在某些字中，使用橫切收筆，視覺上卻顯得更為舒適。
后來我們?cè)谂c專業(yè)的字體設(shè)計(jì)師溝通后了解到，這其實(shí)是因?yàn)樵跐h字中，單是一個(gè)撇筆就分為左上撇，斜撇，彎撇，直撇這么多種類型，而簡(jiǎn)單地將一個(gè)規(guī)則應(yīng)用到所有的撇筆中，會(huì)造成某些字結(jié)構(gòu)上的失衡。
就在京東字體的造字工程陷入困局時(shí)，市場(chǎng)部剛好找到我們，提出了與專業(yè)字庫(kù)公司合作定制京東品牌字體的計(jì)劃，從而推進(jìn)品牌升級(jí)。我們與市場(chǎng)部一拍即合，確定了與方正的合作。于是，整個(gè)字庫(kù)的創(chuàng)作主力轉(zhuǎn)到了方正身上，而我們主要承擔(dān)掌舵的角色，整個(gè)字庫(kù)的制作也開始向?qū)I(yè)化、規(guī)?；⑾到y(tǒng)化發(fā)展，生產(chǎn)速度更是呈現(xiàn)出爆炸性增長(zhǎng)。
首先，我們與方正的老師確定了字體整體的基調(diào)，希望仍然保持簡(jiǎn)潔、直接、力量的感覺。對(duì)已有材料進(jìn)行分析后，方正團(tuán)隊(duì)重新調(diào)整了字體的筆畫、字面、重心和結(jié)構(gòu)等方面，特別是對(duì)筆畫粗細(xì)比例和規(guī)則進(jìn)行了規(guī)范化。
可以看到，新版字體的縱橫筆畫比例從 20:11 縮小到 3:2 后，字面布白變得更均勻，辨識(shí)度也顯著提高。
同時(shí)，方正團(tuán)隊(duì)對(duì)筆畫規(guī)則的重新分類，也解決了我們之前碰到的難題。例如規(guī)定：點(diǎn)、撇、捺及鏡像點(diǎn)撇的收筆采用橫切，較為扁平的撇捺和鏡像撇捺的收筆則采用縱切。
明確規(guī)則后，方正團(tuán)隊(duì)先小規(guī)模試點(diǎn)，做了 130 個(gè)字，這些字涵蓋了京東常用字以及中文里的主要偏旁部首和部分獨(dú)特字形。同時(shí)，方正也邀請(qǐng)我們?yōu)檫@些字提供意見。
由此，我們開始了字體找茬大賽。我們把這些字放大，打印后貼在墻上細(xì)細(xì)端詳。近看，遠(yuǎn)看，坐著看，站著看，跪著看，走著看，調(diào)動(dòng)起我們體內(nèi)最原始的設(shè)計(jì)直覺，試圖找出這些字里不自然的地方，然后貼上便利貼標(biāo)記。后來我們甚至走火入魔，看字不是字。
△ 看字看到失智的同事
這次的項(xiàng)目合作，方正團(tuán)隊(duì)派出了兩位重量級(jí)的設(shè)計(jì)專家，方正字庫(kù)的設(shè)計(jì)總監(jiān)仇寅老師與設(shè)計(jì)副總監(jiān)汪文老師。（如此深厚沉淀的字體設(shè)計(jì)資歷讓我們?nèi)滩蛔【椭焙衾蠋煟?
一開始，我們還擔(dān)心在項(xiàng)目過程中會(huì)比較被動(dòng)，無法很好地參與到字型設(shè)計(jì)的討論中。畢竟相比之下，我們簡(jiǎn)直是字體小白，缺乏系統(tǒng)的字體設(shè)計(jì)知識(shí)與建設(shè)大型字庫(kù)的經(jīng)驗(yàn)。但在合作的過程中，我們慢慢能體會(huì)到，從某個(gè)角度來說設(shè)計(jì)還是相通的。
在一期和二期字樣中，我們都根據(jù)「設(shè)計(jì)直覺」，對(duì)一些基本結(jié)構(gòu)提了調(diào)整意見，甚至直接上手做了修改的嘗試，因?yàn)楦杏X這樣討論起來也比較直觀。這也的確得到了方正老師們的認(rèn)可與呼應(yīng)，其中還包括一些比較重要的偏旁部首。
比如豎心旁、火字旁的兩點(diǎn)，老師們一開始都做得特別纖細(xì)。這可能是因?yàn)辄c(diǎn)筆在初始的調(diào)性設(shè)定上，就被規(guī)定從起筆到收筆都不能有弧度。老師們或許是出于字面留白的考慮做小了。但我們認(rèn)為從總體來看，還是顯得過于「可愛」了點(diǎn)，于是將它們適當(dāng)加粗，并向中心靠攏。老師也采納了我們的意見，終稿效果呈現(xiàn)上雙方都比較滿意。
確認(rèn)核心字樣后，方正開始進(jìn)一步快速地?cái)U(kuò)充字庫(kù)。整個(gè)字庫(kù)制作的時(shí)間雖然只有短短的 3 個(gè)月，但還是進(jìn)行得比較流暢和有序的。
而這當(dāng)中，還有一個(gè)無法忽略的角色，那就是市場(chǎng)部。市場(chǎng)部作為整個(gè)集團(tuán)的品牌資源中繼站，長(zhǎng)期負(fù)責(zé)承接各個(gè)部門的設(shè)計(jì)需求，對(duì)字體在業(yè)務(wù)前線的實(shí)際應(yīng)用效果有很強(qiáng)的發(fā)言權(quán)。于是，方正和市場(chǎng)部，自然落在了蹺蹺板的兩邊，而我們站在中間，既要信任雙方，又要平衡好雙方的意見，推進(jìn)字庫(kù)快速而高質(zhì)量地產(chǎn)出。
這次制作間隙，剛好碰上了新板塊業(yè)務(wù)——「京東健康」的品牌發(fā)布，因此方正團(tuán)隊(duì)需要臨時(shí)先制作這幾個(gè)字的標(biāo)準(zhǔn)字。在康字上，我們費(fèi)了不少的功夫。
市場(chǎng)部認(rèn)為方正給到的「康」字設(shè)計(jì)，有種不穩(wěn)固的感覺。這可能是康字右下角的捺筆過高過短造成的。這可以理解，因?yàn)樯婕暗骄〇|健康的業(yè)務(wù)范圍和希望傳達(dá)的品牌調(diào)性，業(yè)務(wù)方自然希望在字體標(biāo)志上體現(xiàn)出穩(wěn)定、安全的感覺。
但業(yè)務(wù)方提過來的建議，從設(shè)計(jì)上看還有欠缺，與其他字體也不成體系。因此我們?cè)诖嘶A(chǔ)上為方正老師提供了一些修改方向的建議，也就是讓折捺更貼近地面，左邊的兩點(diǎn)也相應(yīng)做出調(diào)整適應(yīng)。
方正側(cè)根據(jù)我們的意見，又做了進(jìn)一步的創(chuàng)新修改。我們以設(shè)計(jì)角度和業(yè)務(wù)需求結(jié)合的角度進(jìn)行挑選，認(rèn)為將右邊的點(diǎn)和捺打散，捺筆能獲得更大的舒展空間，整個(gè)字符也「站得更穩(wěn)」，選定了方案C。這個(gè)小插曲也就順利解決了。
品牌定制字體，從名字上可以看出，似乎具有天然的專屬性，它只屬于其服務(wù)的品牌。但正如蒙納在 2020 字體設(shè)計(jì)趨勢(shì)報(bào)告所說，品牌的字體策略不應(yīng)該是固定的、死板的，它更像是一個(gè)可擴(kuò)展、可變化的工具，幫助我們實(shí)時(shí)重塑品牌。這意味著京東朗正體在未來仍將持續(xù)進(jìn)化，更加開放。它不只是屬于京東的字體，它還是我們所有人的字體，它試圖滿足設(shè)計(jì)師、合作商家、消費(fèi)者等多方的需求。
京東朗正體目前僅有一個(gè)字重，比較粗，主要適用在大型標(biāo)題或標(biāo)志中，還不能滿足目前眾多文字內(nèi)容樣式的需要。后續(xù)我們將會(huì)制作更多字重，豐富京東朗正體的字體家族。我們也不排除京東朗正體會(huì)覆蓋更多語(yǔ)言的計(jì)劃。畢竟京東作為一個(gè)全球化的品牌，在各個(gè)國(guó)家的露出將會(huì)越來越多，使用字體在不同語(yǔ)境中保持品牌連貫性也一樣至關(guān)重要。
除此之外，可變式字體(Variable Font) 可能是我們更長(zhǎng)遠(yuǎn)的一個(gè)發(fā)展方向。可變式字體的特點(diǎn)在于其無限性，只需下載一套支持這種技術(shù)的字體，就可以直接調(diào)整字的各種外形參數(shù)，包括字重、字寬、襯線、斜度等。這既能減輕字體設(shè)計(jì)師的工作，也能為使用字體的設(shè)計(jì)師提供更多可能性。同時(shí)，這也有助于消除字體在各種電子終端演繹的屏障，釋放更多品牌活力。目前我們正在與技術(shù)平臺(tái)的小伙伴溝通這一計(jì)劃的實(shí)現(xiàn)進(jìn)程。
在使用范圍上，京東朗正體已經(jīng)開放授權(quán)給所有合作的商家和機(jī)構(gòu)。我們也希望借助品牌字體增強(qiáng)與合作方的聯(lián)系，讓這個(gè)品牌符號(hào)為合作伙伴提供更多展示的空間，進(jìn)一步拓展品牌生態(tài)的廣度。
品牌戰(zhàn)略公司 Lippincott 的負(fù)責(zé)人提到：「在這個(gè)新的時(shí)代，字體比任何時(shí)候，都更需要也更可能統(tǒng)一人們關(guān)于品牌的體驗(yàn)，并在各個(gè)渠道和載體上都實(shí)現(xiàn)無縫連接。」
這一次，我們做京東的品牌字體，當(dāng)然不是為了「趕潮流」。它立足于現(xiàn)實(shí)環(huán)境的需要。京東，根源上看是一個(gè)提供零售基礎(chǔ)設(shè)施服務(wù)的平臺(tái)。這個(gè)服務(wù)，既是硬件上的，比如儲(chǔ)存和傳送包裹，也是軟件上的，處理和分發(fā)信息。 而文字，作為信息的重要載體之一，是我們這一次嘗試為京東創(chuàng)造設(shè)計(jì)價(jià)值而抓住的發(fā)力點(diǎn)和機(jī)會(huì)點(diǎn)。
和京東朗正體一起成長(zhǎng)的歷程，包含了我們?cè)谙到y(tǒng)化字庫(kù)設(shè)計(jì)中的懵懂探索，與跨界設(shè)計(jì)師合作的思想碰撞，乃至對(duì)京東品牌字體未來發(fā)展的想象，辛酸和快樂等比混合。
讓我們期待京東朗正體的表現(xiàn)。
另外一款品牌字體「騰訊字體」也值
我們?cè)谧鲈O(shè)計(jì)的時(shí)候總是會(huì)聽到，要注意「節(jié)奏感」。關(guān)于節(jié)奏感這個(gè)詞，大多數(shù)人似懂非懂，可能明白它是什么意思，但是在設(shè)計(jì)中都應(yīng)該注意哪些節(jié)奏感，卻還沒有一個(gè)比較清晰的思路。我們都知道音樂是有不同種類的，有古典音樂，有搖滾音樂等，它們之間的不同，很多時(shí)候是節(jié)奏給我們帶來的感受不同。在設(shè)計(jì)上也是一樣的，掌握節(jié)奏感就能控制畫面的變化和氣質(zhì)的傳達(dá)。
先理解什么是節(jié)奏感。
我們常說的生活節(jié)奏，可以理解為，假如你在規(guī)定時(shí)間里，你只需要上班和回家兩點(diǎn)一線的生活。
但是當(dāng)你有了孩子還要去幼兒園接送，晚上還要去健身等，這樣就是生活節(jié)奏加快了。
我們常聽到的節(jié)奏感其實(shí)是來源于音樂的。
不同節(jié)奏感的音樂會(huì)給人不同的感受，就像音樂1這種，會(huì)給你一種平靜舒緩的感覺。音樂2這種就會(huì)有種比較喧鬧、比較活潑的感覺。
說到設(shè)計(jì)的中的節(jié)奏感，從繪畫里也可以看出，這是吳冠中的繪畫作品，看似很簡(jiǎn)單的畫面，但是這種水流的蜿蜒的感覺讓這個(gè)畫面變得靈動(dòng)起來。
去掉這些流動(dòng)的線之后，整個(gè)畫面就變得很平靜了。失去了那種蜿蜒流潺的感覺。
在我們很多圖像網(wǎng)站里都用了這種瀑布流的方式，不僅是為了方便不同尺寸的圖片的載入，在很多時(shí)候這種方式，相對(duì)于平鋪的圖片放置會(huì)更讓人舒服而不枯燥。
在平面設(shè)計(jì)里，我們?cè)趯W(xué)習(xí)平面構(gòu)成的時(shí)候節(jié)奏與韻律是常常放在一起說的。
我們可以看海報(bào)去理解，第一張海報(bào)那幾條魚擺放的位置是沒什么規(guī)律的，但是它卻能形成節(jié)奏感。那么在第二張海報(bào)，我們能清晰地感受到它的節(jié)奏與韻律的變化。所以節(jié)奏是有規(guī)律或者無規(guī)律的變化的，韻律是有規(guī)律的變化的。
包括去百度百科查找相關(guān)信息也是表達(dá)類似這樣的意思。
一個(gè)版面里的節(jié)奏影響是多方向面的，有文字編排、色彩搭配、圖像處理等。
今天我們要講的是文字編排里的節(jié)奏感。在文字編排上我們?yōu)槭裁匆莆展?jié)奏感呢?
我們?cè)诳匆恍┘兾淖值臅臅r(shí)候，很容易犯困。
這就是因?yàn)闀奈淖志幣艓缀鯖]有節(jié)奏感，所以相對(duì)來說是枯燥的。
有一些不同的書籍設(shè)計(jì)或者雜志會(huì)在里面加入圖片、對(duì)文字與版式進(jìn)行處理，使它們變得有變化性，就會(huì)調(diào)節(jié)這種節(jié)奏感。讓畫面閱讀不再枯燥。當(dāng)然了，畫面左邊是因?yàn)榇罅康男畔⒌膫鬟_(dá)不適合做過多的變化，否則閱讀過程會(huì)有阻礙。這也是根據(jù)不同種類的信息從而把握不同節(jié)奏感的結(jié)果。
所以在這個(gè)畫面里標(biāo)題是節(jié)奏感比較強(qiáng)的，在保證閱讀性的同時(shí)也做到了裝飾性。那么由于下方信息量比較多，這些文字又需要被快速傳達(dá)，所以這些文字的編排就會(huì)趨向于閱讀性。
掌握文字編排的節(jié)奏感對(duì)畫面?zhèn)鬟_(dá)的氣質(zhì)的影響是非常大的。就像這兩張海報(bào)，它們的背景圖片氣質(zhì)是很像的，都是天空的大留白，但是，完全不同的文字編排，就讓第一張海報(bào)表現(xiàn)出活潑可愛的感覺，第二張海報(bào)表現(xiàn)出平靜安靜的感覺。
我們可以理解為，隨著幾乎沒有節(jié)奏感到節(jié)奏感比較弱再到節(jié)奏感強(qiáng)，它的畫面是可以呈現(xiàn)出由靜止到舒緩再到動(dòng)感的。
在文字編排中有非常多的對(duì)比，是一個(gè)非常大的系統(tǒng)，今天我們主要去梳理一下文字編排時(shí)的一些影響因素，以及在文字編排上一些需要注意的細(xì)節(jié)。（我們今天會(huì)講這些影響我們文字編排的節(jié)奏感，字體種類、大小、長(zhǎng)短、位置、疏密、顏色、組合形狀和方向。）
文字種類就是我們對(duì)文字的類別進(jìn)行分類，在字體種類里一般分成了襯線體與非襯線體，但是在中文里，我覺得主要由這五大類組成，分別是黑體，宋體，楷體，圓體與書法體。
包括字體家族里的不同字重。
不僅是這樣，對(duì)于同一個(gè)字體我們還分常規(guī)體、窄體、扁體。
一段文字只選擇上面的所說的變化就已經(jīng)可以有很多種了。我拿了一段數(shù)學(xué)公式裝?。這里我們算出有 105 種。所以文字編排時(shí)稍微不注意就會(huì)有太多的變化性。
更何況我們經(jīng)常在版面里加入其他國(guó)家語(yǔ)言的文字，這些都會(huì)影響文字的節(jié)奏感。
所以我們要學(xué)會(huì)控制這種節(jié)奏感，一般來說我們?nèi)粘１容^常用的就是黑體配無襯線體，宋體配襯線體。并且在字重上我們都要注意協(xié)調(diào)。盡量使它們看一起是一樣的粗細(xì)度。
不同的字體搭配起來是有一定難度的。這種節(jié)奏感就好像不同風(fēng)格的音樂的結(jié)合，它們之間的銜接與融合會(huì)比單純的某一種風(fēng)格的音樂制作起來更難。
這種不同類型的文字的搭配，對(duì)于排版和運(yùn)用的能力有一定要求，運(yùn)用不好就會(huì)傳達(dá)不了畫面的氣質(zhì)與信息。在電商里的反例是比較多的。在我看到的這張圖里，它同時(shí)用了無襯線體與襯線體的結(jié)合，畫面沒有清晰呈現(xiàn)出準(zhǔn)確的氣質(zhì)。大家可能會(huì)說它是簡(jiǎn)約高貴風(fēng)，但是這是一個(gè)大范圍，在簡(jiǎn)約高貴里有現(xiàn)代的高貴，有復(fù)古的高貴，還有一些與眾不同的高貴等。
我們嘗試把左邊的襯線體換成無襯線看看。是不是有種現(xiàn)代都市的氣質(zhì)？
如果都統(tǒng)一成襯線的話，是不是一種精致的時(shí)尚感就出來了呢。統(tǒng)一這種文字的種類能更加精準(zhǔn)地傳達(dá)畫面的氣質(zhì)。
剛剛我們也說到字體的混搭會(huì)產(chǎn)生混亂和怪異感，要慎用，但是如果我們的畫畫就需要這種感覺呢，當(dāng)然就可以用這種特性來故意營(yíng)造一種怪異感，當(dāng)畫面的字體種類越多的時(shí)候，所營(yíng)造出來的節(jié)奏感會(huì)更強(qiáng)烈。
我們看這個(gè)畫面也是這樣的，周圍的很多圖形和各種各種樣的字體類型讓這個(gè)畫面變得搞怪活潑。
就算去掉了周圍的圖形，文字這傳達(dá)出來的搞怪感覺也依然存在。
接下來我們用這個(gè)文案來做一個(gè)案例演示下，由于平時(shí)很多都是用同一種類型字體搭配，那么這一次就挑戰(zhàn)一下，我就打算做一稿用不同類型字體的版面。看看會(huì)有什么樣的效果。
首先我在版面中劃分版塊，填上相應(yīng)的文字，在這里可以看到，我同時(shí)用了襯線與無襯線的字體，還用了具有手寫性質(zhì)的字體。不僅如此， 所有的文字我都用了窄體而不是常見的常規(guī)體來增強(qiáng)這種怪異的節(jié)奏感。
最后加上一些圖形處理一下負(fù)空間，這個(gè)案例就完成了。
為了減少影響，我把圖片遮住單看文字組，我把這些字體都變成黑體了，對(duì)比可以發(fā)現(xiàn)，還是原來的文字組更有搞怪奇異的節(jié)奏感。右邊這個(gè)因?yàn)榘迨脚c圖形的完整性使得它看起來并沒有很大的問題，但是它的確是缺少了像左邊這種古典與現(xiàn)代結(jié)合的節(jié)奏感。
文字的大小節(jié)奏可能會(huì)有人理解為這樣，但是我們一般不會(huì)這么做。
我們更多地是用在標(biāo)題與內(nèi)文的對(duì)比。
節(jié)奏變化比較大的文字組會(huì)給人一種沖擊力，讓人無法忽視標(biāo)題的存在，就好像我在大聲告訴你一句話的感覺，會(huì)比較強(qiáng)硬與喧鬧。
節(jié)奏比較平緩的文字組表現(xiàn)出一種精致、安靜的感覺。
我們把它們放到畫面里看下，這個(gè)標(biāo)題與內(nèi)文的對(duì)比很大，并且在這個(gè)版面中占據(jù)一定的大小，這種時(shí)候有沒有覺得這個(gè)畫面呈現(xiàn)出一種，好像在播放新聞的感覺，好像在說這個(gè)小島有什么重大新聞一樣。
但是當(dāng)標(biāo)題變小時(shí)，整個(gè)畫面呈現(xiàn)出比較平緩的節(jié)奏感，很符合畫面?zhèn)鬟_(dá)出來的安靜舒緩的感覺。
這種方式很多作品都有，這種標(biāo)題和內(nèi)文的對(duì)比，或者說是文字在版面的占比比較大時(shí)，就可以體現(xiàn)出這種很強(qiáng)烈的節(jié)奏，讓人很難忽視這些文字內(nèi)容。同時(shí)畫面也更容易傳達(dá)出一種力量感。
往往想要營(yíng)造這種安靜感的時(shí)候，比較注重畫面整體的感覺，就不需要太多的文字變化，甚至為了區(qū)別文字層級(jí)而需要有的文字大小，也盡量地在減少對(duì)比。
我們都知道音頻都是這種長(zhǎng)短不一的聲波圖，因?yàn)檫@種長(zhǎng)短不一的變化感受會(huì)給人帶來節(jié)奏感。
所以也有以這種形式來編排文字，表現(xiàn)節(jié)奏感的系列廣告作品。
它比較經(jīng)常出現(xiàn)在居中對(duì)齊的文字組上。
但是我們要注意的是，你會(huì)發(fā)現(xiàn)很少情況在兩個(gè)極端之間直接過度，比如說一長(zhǎng)一短。
在沒有文字大小的對(duì)比情況下，如果文字的長(zhǎng)短對(duì)比太小，我們先不說節(jié)奏感，我們可能會(huì)有種疑問，它到底是想兩端對(duì)齊還是居中對(duì)齊的呢？所以這種兩端模棱兩可的情況最好避免。不能模棱兩可，對(duì)比太大又會(huì)不夠美觀，所以我們?nèi)?chuàng)造節(jié)奏感的時(shí)候要注意這些問題。
畢竟它不是讓人閱讀時(shí)間很長(zhǎng)的文字，所以我們就需要調(diào)節(jié)這種節(jié)奏讓它看起來美觀而且不枯燥。
這是我隨便在購(gòu)物網(wǎng)站截圖的，你會(huì)發(fā)現(xiàn)它們的文字編排都很注意我剛剛說的短長(zhǎng)短的節(jié)奏感。
我找了兩張都是黑色背景并且配圖比例也差不多的海報(bào)作對(duì)比說明這個(gè)問題。
因?yàn)閳D像的干擾我就同時(shí)去掉了圖片，還有也把右邊紅色的字變成了白色，它們之間的對(duì)比變得清晰了，左邊的文字規(guī)劃在版面中顯得更有活力，右邊版面的文字集中在一塊，就像我們前面提到的小說書籍內(nèi)頁(yè)一樣。這樣的文字編排在閱讀上會(huì)比左邊的缺少節(jié)奏感。但是我在這里要說的一點(diǎn)是，左邊海報(bào)本身的圖像沒有右邊的有沖擊力與活力，所以我們?nèi)绻嬲鰧?duì)比的話。
用左邊的圖像放置在兩個(gè)不同的版面來作對(duì)比，這樣大家應(yīng)該能感覺到差別。左邊的版面雖然沒有表現(xiàn)特別強(qiáng)的節(jié)奏感覺，但是至少版面不是特別壓抑的。至于右邊的我們會(huì)覺得很沉靜，配合這種黑色的背景比左邊更壓抑。這就是文字編排在版面的影響。
不僅是文字組之間，標(biāo)題的有意放置不同的位置就可以營(yíng)造這種節(jié)奏感，是因?yàn)樗廊豢梢允沟梦覀兊拈喿x視線發(fā)生變化。
比較隨意編排的文字組也會(huì)比，比較拘謹(jǐn)正式的文字組看起來更有節(jié)奏、更活潑。
接下來我們用案例來演示。
首先選擇纖細(xì)的宋體會(huì)比較符合這個(gè)畫面的氣質(zhì)，很多人可能把文字組放在畫面四個(gè)角就算大功告成了，但是這個(gè)畫面既沒有一個(gè)亮點(diǎn)吸引我們，而且畫面里的元素都非常得散，沒有體現(xiàn)出一點(diǎn)活潑的味道。
這個(gè)時(shí)候我們可以效仿剛剛我們看到的標(biāo)題的做法，拉開距離，調(diào)整位置讓它有上下浮動(dòng)的節(jié)奏感，包括文字上我都做了一些切割移動(dòng)讓它們活潑，再加上線條讓它們更有聯(lián)系感。這個(gè)畫面就會(huì)比剛剛活潑多了。
案例完成。
左邊緊湊的文字字距會(huì)呈現(xiàn)出一種張力，一種急促的節(jié)奏，營(yíng)造一種緊張感。右邊寬松的字距畫面會(huì)更緩和，不同的字距在版面中有寬松對(duì)比，也營(yíng)造出了一種節(jié)奏對(duì)比。不會(huì)感到枯燥。
很多人可能沒太去注意這些文字編排的小細(xì)節(jié)，這兩版里哪一個(gè)更符合平緩的節(jié)奏感呢？答案是下面這個(gè)。第一張這樣做也沒錯(cuò)的，但是我們想讓文字也能相應(yīng)地呈現(xiàn)出一種透氣感的話，第二張的會(huì)更加符合。
顏色的問題大家應(yīng)該了解了很多了，這里就簡(jiǎn)單提一下，就像我們?cè)跔I(yíng)造一種氛圍的時(shí)候選擇的氣球顏色都是非常重要的，我們選擇飽和度比較高，顏色種類比較多的氣球的時(shí)候，是想營(yíng)造一種熱鬧活潑的感覺的。但是如果想營(yíng)造一種浪漫安靜的氛圍時(shí)就用了很多白色或者淡色調(diào)的顏色。
就像這個(gè) banner 一樣，中間不同顏色的文字為這個(gè)畫面增加了很強(qiáng)的節(jié)奏感。變得很活潑。
很多時(shí)候我們不需要太強(qiáng)的節(jié)奏感，所以我們經(jīng)常給文字做一點(diǎn)的顏色變化，來讓畫面更鮮活。就像這個(gè) banner，如果它沒有了左邊那個(gè)粉色的顏色的跳躍。
這個(gè)畫面就會(huì)變得很沉靜。
如果，畫面文字的粉色變多，它的節(jié)奏感又會(huì)變得更強(qiáng)。
不僅是因?yàn)檫@個(gè)顏色本身的跳躍性比較高，而且也是因?yàn)轭伾牟煌Ｇ袚Q導(dǎo)致這種節(jié)奏感的增強(qiáng)。所以不同顏色的占比也是需要考慮的。在這里主要是因?yàn)槟Ｌ厣砩蠜]有玫紅色，所以左邊不適合用過多的玫紅色，用全黑都會(huì)顯得很沉悶，所以這里選擇用一次玫紅色讓這個(gè)畫面鮮活。
我們?cè)谶@些變化的圖形中替換兩個(gè)不同形狀的圖形，我們可以感覺到替換后的圖形里的變化會(huì)更多，呈現(xiàn)出來的活潑性更強(qiáng)了。當(dāng)畫面中的不同形狀更多，就會(huì)趨向于一種混亂。
用不同的圖形在版面里，有區(qū)分不同信息的作用，但是這種方式也是增加版面節(jié)奏感的一種方式。在很多促銷的傳單會(huì)經(jīng)?？吹健?
這個(gè)畫面沒有人物圖片，僅僅是通過文字的編排就能傳達(dá)出這種熱鬧的節(jié)奏感。
除了顏色本身的熱鬧性，其中比較大的影響因素。就是文字在各種不同形狀里的編排，讓這個(gè)畫面呈現(xiàn)出熱鬧的氛圍。
隨著方向變化越來越多，畫面會(huì)趨向于更有動(dòng)感的的節(jié)奏。但是節(jié)奏感覺也是有度的，一旦變化性很多，那么這個(gè)版面就會(huì)顯得雜亂。我們也可以簡(jiǎn)單理解為亂的元素的占比決定著你畫面呈現(xiàn)出來的節(jié)奏感的強(qiáng)烈。
像第一張海報(bào)一樣，這種有點(diǎn)古老的作品我們一般會(huì)認(rèn)為是比較正式和比較嚴(yán)肅的，但是這些方向不一的文字編排，向我們說明了這不是一個(gè)嚴(yán)肅的展覽，而是具有活潑的屬性，從而吸引不同的觀看群體。包括右邊這個(gè)海報(bào)的文字編排都讓這個(gè)畫面的節(jié)奏感變得更強(qiáng)了，與人物夸張的肢體語(yǔ)言也相呼應(yīng)。
傾斜的文字編排在電商里是出現(xiàn)得比較多的，微微傾斜文字就可以強(qiáng)調(diào)這種活潑的節(jié)奏感。
我們來看一個(gè)比較明顯的例子，畫面只有一個(gè)黃色的色塊和文字編排以及一個(gè)不規(guī)則的圖形，但是這個(gè)畫面呈現(xiàn)出來的感覺卻很活潑。
其實(shí)去掉這圖形，也并沒有影響原有的氣質(zhì)，是因?yàn)槲淖值木幣诺姆较蛐缘膶?duì)比讓它的節(jié)奏感增強(qiáng)了。
那么說到這里其實(shí)今天的內(nèi)容也就結(jié)束了，這次的案例就給大家演示下怎么用這些知識(shí)去做一張海報(bào)。
首先我們要分析這個(gè)畫面，圖片本身是比較具有節(jié)奏感的，因?yàn)椴皇俏覀兤匠？吹囊m子的視角，而且人物有一種運(yùn)動(dòng)過程的動(dòng)勢(shì)。
這個(gè)負(fù)空間非常不規(guī)則，如果文字在這個(gè)畫面負(fù)空間上直接加字的話，可能就會(huì)顯得比較亂，但是我們又要做出迎合這個(gè)圖片的節(jié)奏但是不亂的畫面，應(yīng)該怎么做呢？
首先不采取直接在圖上加字的方式，把圖片縮小，再添加一個(gè)深色的底色，這樣這張圖片和這個(gè)畫面里就是一個(gè)整體了。
由于我們要壓住圖片的節(jié)奏感，不讓它太亂，所以我在周圍的空間編排文字是呈現(xiàn)一個(gè)既有文字層級(jí)關(guān)系，但是整體是呈現(xiàn)矩形的文字組?，F(xiàn)在這個(gè)畫面看起來的確不會(huì)亂，但是文字還是少了和圖片活潑氣質(zhì)契合的節(jié)奏感。
分析一下這個(gè)畫面，是宇宙系列的感覺，所以我就加入了環(huán)形的文字，然后再加一點(diǎn)與圖片呼應(yīng)的顏色。這個(gè)畫面就會(huì)比之前更和諧。在做的過程通過減少變化與增加變化讓畫面逐漸接近自己的預(yù)期。
總結(jié)一下今天我們講的，我們今天講的是文字編排中的節(jié)奏感，在一開始，我分別給大家講了從生活節(jié)奏、音樂節(jié)奏、再到設(shè)計(jì)的節(jié)奏去理解什么是節(jié)奏感，然后我還講了關(guān)于文字節(jié)奏感對(duì)于畫面的重要性，無論是對(duì)信息的傳達(dá)還是對(duì)氣質(zhì)的表現(xiàn)，它的影響是非常大的。最主要的部分，我講了影響文字編排的節(jié)奏都有哪些因素，比如文字類型、大小、方向、長(zhǎng)短、文字組合形態(tài)等。把握自己要傳達(dá)的節(jié)奏，才能正確傳達(dá)信息。大家也可以用這種方式去看作品，分析它的節(jié)奏感是通過什么方式形成的。久而久之，對(duì)節(jié)奏感的掌握就會(huì)更加熟練與精準(zhǔn)。
文章來源：優(yōu)設(shè)
給大家看兩張圖，這兩頁(yè)的文字內(nèi)容相同，你更想看哪本？
不出意外的話，大家應(yīng)該會(huì)選右手邊的吧（選左邊的請(qǐng)自覺去面壁）。（所拍書籍為《西文字體》，高岡昌生 ）
雖然大家不是專業(yè)做文字排印的，但對(duì)文字排版的感知力，其實(shí)是生而有之的。
中文也是如此，優(yōu)秀的出版社（譯林出版社、廣西師范大學(xué)出版社等），為了讓閱讀體驗(yàn)順暢、版面舒適，在文字排印上做了許多工序。
正是這些工序，提升了書籍正文的閱讀體驗(yàn)。想要在閱讀軟件上打造優(yōu)秀的閱讀頁(yè)，這些工序正是我們需要借鑒的。
通過設(shè)計(jì)師與開發(fā)的共同努力，我們最近完成了這一文字排版能力的建造，讓閱讀頁(yè)的效果能夠更上一層樓。
最終效果如下：
本文將從以下幾個(gè)部分說明這些工序存在的理由、實(shí)現(xiàn)的邏輯等。
細(xì)致的來看，文章包括以下內(nèi)容：
通過前期的大量學(xué)習(xí)與調(diào)研（專家觀點(diǎn)：小林章先生、鳥海修先生、劉慶先生等人關(guān)于字體排印 or 字體設(shè)計(jì)的講座、W3C 中文排版需求（強(qiáng)烈建議大家看這個(gè)）、孔雀計(jì)劃的文章、字體排印的專著：《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》、《字體排印》、《西文字體》等；本次改版幾乎所有的功能與邏輯都參照了以上專著與文章。）
我們把文字書排版時(shí)的工序，總結(jié)為「文字排印要遵循的三個(gè)原則」：
原則說明
中文排版中，字與字之間的間距被稱為「字間距」。
文字間距會(huì)影響閱讀節(jié)奏。字間距大的文章，閱讀速度會(huì)變慢。因此，散文、詩(shī)歌在排版時(shí)，會(huì)刻意調(diào)大字間距。
下面的圖，僅憑自己感受，選一張更好的:
不出意外的話，應(yīng)該是覺得下圖更好看。
嘗試默讀一下，你會(huì)發(fā)現(xiàn)，上邊的圖片，最后兩行字間距被拉大，閱讀速度放慢；而這不是作者的本意，換言之，這會(huì)破壞閱讀節(jié)奏。
因此，我們把「保證字間距恒定」作為首要原則，來保障閱讀節(jié)奏感。
備注（建議第二次看文章的時(shí)候再讀）：需要說明的是，部分字面較大的字體（方正博雅宋、蘭亭黑等）在書籍排版時(shí)為了契合書籍內(nèi)容的調(diào)性，有時(shí)會(huì)刻意設(shè)置字間距，這與「字間距保持恒定」的原則并不沖突。在電子閱讀軟件中，由于無法針對(duì)特定書籍進(jìn)行調(diào)整，因此本次設(shè)計(jì)實(shí)際上是保持「密排」(字與字之間沒有額外添加字間距，保留字體原始的間距)。
工序
行長(zhǎng)是字號(hào)的整數(shù)倍。相同字號(hào)下，漢字字寬固定（就是字號(hào)本身），漢字標(biāo)點(diǎn)的字寬同樣也是字號(hào)本身（除了個(gè)別標(biāo)點(diǎn)之外，例如破折號(hào)）
漢字排版時(shí)，沒有額外字間距的情況下，是上圖所示的字面框依次密排。
因?yàn)橹形臅恼呐虐娉Ｓ脙啥藢?duì)齊，如果行長(zhǎng)不是字號(hào)的整數(shù)倍，則漢字之間會(huì)有異常的行間距出現(xiàn)。
更嚴(yán)重的是：閱讀軟件字號(hào)可變的情況下，行長(zhǎng)不可能做到適應(yīng)所有字號(hào)且字間距不會(huì)被拉大。
行長(zhǎng)是字號(hào)的整數(shù)倍是中文字體排印中標(biāo)點(diǎn)擠壓等的前提。
——《孔雀計(jì)劃》，原文鏈接：https://thetype.com/2017/07/12513/
在閱讀軟件中，隨著字號(hào)調(diào)整，如果沿用「版心寬度固定」的思路，難免存在字間距被拉大的情況。
對(duì)此，我們調(diào)查了國(guó)內(nèi)外知名中文閱讀軟件，發(fā)現(xiàn)：KindleAPP 能隨著字號(hào)變化自由變動(dòng)，但這會(huì)導(dǎo)致：改變字號(hào)大小時(shí)，版心寬度略微變化。
有此顧慮，我們做了一個(gè)測(cè)試。結(jié)果證明，大家不會(huì)發(fā)現(xiàn)版心寬度有變化。這說明用戶投入到閱讀當(dāng)中、調(diào)整字號(hào)時(shí)，并不會(huì)因?yàn)榘嫘膶挾茸兓胁贿m，甚至不會(huì)感知。通過測(cè)試，打消了我們的顧慮。
最終我們大膽采取了「版心寬度跟隨字號(hào)調(diào)整而變化」，來確?！感虚L(zhǎng)是字號(hào)的整數(shù)倍」。
雖然「版心寬度跟隨字號(hào)變化」并沒有不適，但我們需要保證在多種屏幕尺寸、字號(hào)下，版心占據(jù)屏幕的區(qū)域都舒適。
面對(duì)這個(gè)問題，我們制定了一個(gè)公式，可根據(jù)屏幕大小、字體大小等，自動(dòng)調(diào)整版心寬度。確?！感虚L(zhǎng)是字號(hào)的整數(shù)倍」的同時(shí)，保證頁(yè)面美觀。
標(biāo)點(diǎn)符號(hào)「優(yōu)先推入式避頭尾」。如圖所示，為宋抄本《孫子算經(jīng)》；在古代，書籍排版可以做到字間距恒定，原因是古代不存在「標(biāo)點(diǎn)」，也就沒有「標(biāo)點(diǎn)避頭尾」導(dǎo)致的種種問題。
而現(xiàn)代漢語(yǔ)存在標(biāo)點(diǎn)符號(hào)，有的標(biāo)點(diǎn)不能放在行首，有的不能放在行尾。
我們把不能放在行首的標(biāo)點(diǎn)叫做避頭標(biāo)點(diǎn)，如逗號(hào)、頓號(hào)、句號(hào)等；把不能放置在行尾的叫做避尾標(biāo)點(diǎn)，如前引號(hào)、前括號(hào)等。
「推出式」避頭尾是大部分閱讀軟件的做法：
以避頭標(biāo)點(diǎn)為例，若此標(biāo)點(diǎn)被排到了行首，「推出式」 的做法是從上一行拉一個(gè)字放在本行。如下圖所示：
然而這么做的話，上一行的字間距被拉大，打斷了閱讀節(jié)奏（閱讀節(jié)奏放慢）。
我們發(fā)現(xiàn)專業(yè)的排版軟件（Indesign）和出版社（廣西師范大學(xué)理想國(guó)系列、人民文學(xué)出版社、譯林出版社等知名出版社）的做法是「優(yōu)先推入式避頭尾」，這種方式可以很好地解決「僅推出式」造成的問題。如下圖所示：
△ 《少數(shù)派報(bào)告》譯林出版社
通過「優(yōu)先推入式避頭尾」，上圖中標(biāo)出的雙引號(hào)的寬度被擠壓了一半，如果它保留為「全寬」，就沒辦法排在這一行，這就是「優(yōu)先推入式避頭尾」的最終效果。
以避頭尾標(biāo)點(diǎn)為例，「優(yōu)先推入式」避頭尾在這種情況下會(huì)將本行內(nèi)標(biāo)點(diǎn)寬度擠壓，為避頭尾的標(biāo)點(diǎn)騰出空間，如下圖所示：
上面的圖可以看到：通過「優(yōu)先推入式標(biāo)點(diǎn)擠壓」，第一行的字間距沒有被拉大，保持了密排。
通過將本行內(nèi)的標(biāo)點(diǎn)寬度進(jìn)行擠壓后，騰出了空間給本來排不到的逗號(hào)，確保了字間距的恒定。然后只有在本行內(nèi)標(biāo)點(diǎn)無法壓縮出足夠空間時(shí)，才會(huì)選擇「推出式」的處理方式。
因此這種處理方式叫做「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾。
行內(nèi)標(biāo)點(diǎn)擠壓。因?yàn)橄噜彉?biāo)點(diǎn)擠壓、行首段首擠壓，會(huì)出現(xiàn)部分標(biāo)點(diǎn)符號(hào)占據(jù)半寬的情況。這種時(shí)候，一行的末尾可能正好有漢字或標(biāo)點(diǎn)軋?jiān)诹诉吙蛏?，如下圖所示，為漢字軋?jiān)谶吙虻那闆r：
遇到這種情況，通過擠壓行內(nèi)標(biāo)點(diǎn)寬度，從而騰出空間給最后一個(gè)字。這種做法叫做「行內(nèi)標(biāo)點(diǎn)擠壓」
標(biāo)點(diǎn)懸掛的邏輯和配套內(nèi)容。存在另外一種處理方式來避頭，叫做「標(biāo)點(diǎn)懸掛」，即將標(biāo)點(diǎn)懸掛在文本框外。
然而這種采用「標(biāo)點(diǎn)懸掛」，需要配套做「行尾強(qiáng)制半寬」，如下圖所示：
然而行尾強(qiáng)制半寬帶來的問題是字間距被拉大，違反了原則一（盡量保證字間距恒定），對(duì)于寬度有限的手機(jī)屏幕，盡量不要改動(dòng)。因此最終我們沒有采用標(biāo)點(diǎn)懸掛的處理方式。
Type is Beautiful 網(wǎng)站中對(duì)此有詳盡的思考，如有興趣請(qǐng)看：https://thetype.com/kongque/
原則說明
書籍排版中，文字所在的范圍稱為「版心」。
經(jīng)驗(yàn)老道的文字排印設(shè)計(jì)師，檢查正文排版效果時(shí)，最常用的方法是：離遠(yuǎn)看頁(yè)面，就像蒙上一層磨砂玻璃一樣，檢查整個(gè)頁(yè)面是否疏密均衡（《字體排印》，高岡昌生先生），也叫做「灰度均衡」（龜倉(cāng)雄策先生稱之為「濃淡勻稱」，from《疾風(fēng)迅雷》）?；叶染獾陌嫘目梢宰屨麄€(gè)頁(yè)面美觀的同時(shí)，也保證了讀者閱讀中不會(huì)被突然的空白打斷。
如下圖所示，第一張圖因?yàn)橐恍┰驅(qū)е铝隧?yè)面中有許多「窟窿」，顯得零碎，灰度明顯不均衡。而第二張圖，通過「標(biāo)點(diǎn)擠壓」將這些「窟窿」填上，整個(gè)版面更像是一個(gè)整體，灰度更均衡。
看倒數(shù)第二行的「乃跪地罪曰：‘大人何故’」兩個(gè)標(biāo)點(diǎn)連續(xù)的地方，從整體的角度看，會(huì)不會(huì)覺得這里有一個(gè)窟窿？
總的來說，灰度均衡的版面整體感更強(qiáng)、視覺上更舒適，因此也是相當(dāng)重要的原則。
工序：
相鄰標(biāo)點(diǎn)擠壓
眾所周知的，漢字是方塊字，在字體設(shè)計(jì)時(shí)會(huì)被放在一個(gè)方形里；中文標(biāo)點(diǎn)同樣也會(huì)被放置于同等大小的方框之中，如下圖所示。
如上圖所示，中文標(biāo)點(diǎn)所占體積一般遠(yuǎn)小于漢字，因此當(dāng)多個(gè)標(biāo)點(diǎn)符號(hào)連續(xù)排列時(shí)，會(huì)讓版面在這里好像有一個(gè)窟窿。專業(yè)的中文排版中會(huì)做的事情是「相鄰標(biāo)點(diǎn)擠壓」。如下圖所示：
如上圖所示，有連續(xù)標(biāo)點(diǎn)存在時(shí)，通過壓縮標(biāo)點(diǎn)所占的寬度，從而補(bǔ)上「窟窿」。
原則說明
與西文書籍的左側(cè)對(duì)齊不同，中文書籍（橫排）傳統(tǒng)而言是講究?jī)啥藢?duì)齊。這是被大多數(shù)國(guó)人認(rèn)可的中文排版方式，因此不再贅述。
工序
行首段首標(biāo)點(diǎn)擠壓。當(dāng)行首出現(xiàn)標(biāo)點(diǎn)符號(hào)，會(huì)感覺左側(cè)不齊：
可以看到，處理前版心左側(cè)因?yàn)橛袉我?hào)，看起來第一行沒有和第二行左對(duì)齊，處理后效果回歸正常。同樣的，段首的標(biāo)點(diǎn)也需要擠壓。
知道了以上內(nèi)容，我們需要把它變成開發(fā)需要的邏輯。具體如下：
1. 相鄰標(biāo)點(diǎn)擠壓邏輯
在 W3C 的《中文排版需求》中，對(duì)相鄰標(biāo)點(diǎn)擠壓的具體做法為：
通過梳理，我們將其簡(jiǎn)化描述為 4個(gè)邏輯（實(shí)際邏輯與 W3C 基本一致）：
備注：成對(duì)出現(xiàn)的標(biāo)點(diǎn)叫做夾注符，如雙引號(hào)、書名號(hào)等；其中細(xì)分為開始夾注符與結(jié)束夾注符。
此外，我們注意到，一些出版書在以上邏輯之外，把問號(hào)與嘆號(hào)與[頓、逗、句]歸為一類，實(shí)際效果良好，因此出于問號(hào)與嘆號(hào)同樣占據(jù)字面不多的邏輯，采用了這種分類法。然而隨后在走查階段發(fā)現(xiàn)線上部分字體的問號(hào)與句號(hào)占據(jù)字面的位置不同。
這促使我們關(guān)注到標(biāo)點(diǎn)在字面中占據(jù)的位置，我們梳理了客戶端所有字體的中文標(biāo)點(diǎn)。
發(fā)現(xiàn)漢儀樂喵、方正蘭亭黑、漢儀啟體等幾款字體的問號(hào)字面占據(jù)異常，如果進(jìn)行相鄰標(biāo)點(diǎn)擠壓可能會(huì)造成標(biāo)點(diǎn)粘連的情況，因此最終我們決定保持問號(hào)與嘆號(hào)不參與相鄰標(biāo)點(diǎn)擠壓。
2. 避頭、避尾標(biāo)點(diǎn)匯總表：
以上邏輯實(shí)施需要首先讓程序判定哪些標(biāo)點(diǎn)是避頭尾標(biāo)點(diǎn)，因此我們梳理了所有漢字標(biāo)點(diǎn)并分為避頭、避尾兩類（部分標(biāo)點(diǎn)即避頭又避尾）。
漢字標(biāo)點(diǎn)符號(hào)與西文的標(biāo)點(diǎn)符號(hào)許多時(shí)候僅憑肉眼難以分辨（如,與，前者是西文標(biāo)點(diǎn)中的逗號(hào)，后者是中文標(biāo)點(diǎn)中的逗號(hào)），因此我們使用Unicode 碼為每一個(gè)標(biāo)點(diǎn)精準(zhǔn)劃分，確保不會(huì)造成錯(cuò)誤。
3. 行內(nèi)標(biāo)點(diǎn)擠壓與「優(yōu)先推入式避頭尾」邏輯：
「行內(nèi)標(biāo)點(diǎn)擠壓」與「優(yōu)先推入式避頭尾」其實(shí)本質(zhì)上都是對(duì)行內(nèi)標(biāo)點(diǎn)寬度進(jìn)行壓縮，因此在邏輯上歸為一類。根據(jù)具體解決邏輯的不同將其分為以下四類：
針對(duì)這四種情況要做的具體事項(xiàng)補(bǔ)充在右側(cè)：
至于推出邏輯，則稍簡(jiǎn)單些，書籍中有時(shí)候會(huì)遇到連續(xù)幾個(gè)標(biāo)點(diǎn)符號(hào)都是避尾標(biāo)點(diǎn)的情況（或連續(xù)避頭標(biāo)點(diǎn)），因此對(duì)推出的邏輯設(shè)定為：
備注：國(guó)內(nèi)知名的字體設(shè)計(jì)與排印網(wǎng)站 Type is Beautiful 中有介紹，行內(nèi)標(biāo)點(diǎn)擠壓的方式有多種，「開明式」「全部半寬式」「平均式」等等…我們選擇了「平均式」（有權(quán)重），開發(fā)難度會(huì)稍小些、效果也更可控制，不再贅述。
4. 整體邏輯流程圖
但是僅僅通過文字性質(zhì)的描述還不夠，我們需要能讓程序理解的邏輯。
由于部分處理方式之間互相干擾，因此根據(jù)這四種方式影響的內(nèi)容不同，以「對(duì)其他處理方式的干擾程度」從高到低排序，并串聯(lián)成整整體的邏輯圖，以保證整體邏輯簡(jiǎn)單、不重復(fù)，如下圖所示。
在此基礎(chǔ)上，我們將文章中第二部分所梳理的邏輯細(xì)節(jié)填充進(jìn)流程圖內(nèi)，并合并重復(fù)流程，最終獲得如下流程圖，方便開發(fā)理解和工作：
5. 小結(jié)
通過「避頭尾標(biāo)點(diǎn)列表」「可擠壓標(biāo)點(diǎn)與擠壓空間」「廣義的推入邏輯具體說明」「整體邏輯流程圖」四個(gè)文件，我們可以順暢的將設(shè)計(jì)要求傳達(dá)給開發(fā)。
最終，通過這些工序，我們可以在最大限度上保證字間距恒定、版面齊整和內(nèi)容灰度均衡。提升閱讀流暢性和閱讀頁(yè)的體驗(yàn)。
文字排印作為一個(gè)古老的技藝，從排版工人操作實(shí)體字模的時(shí)代，經(jīng)歷了照排時(shí)代，來到了數(shù)字排版的當(dāng)下，排版的自由度和效率已然成倍提高，然而由于許多原因至今這些排版的工序只在出版社等專業(yè)領(lǐng)域流通。
相對(duì)于紙質(zhì)書籍，電子閱讀在易攜帶性、閱讀方便性、多媒體輔助閱讀上有得天獨(dú)厚的優(yōu)勢(shì)，然而最基礎(chǔ)的閱讀體驗(yàn)有時(shí)候不如紙質(zhì)書籍，我們希望通過我們的努力，電子閱讀在未來，能夠讓讀者獲得全面超過紙質(zhì)書籍的閱讀體驗(yàn)。
當(dāng)然，文字在移動(dòng)端的體驗(yàn)上限遠(yuǎn)不止如此，一些產(chǎn)品僅靠網(wǎng)格系統(tǒng)與字體排印加上優(yōu)秀的字體，已經(jīng)做出了令人驚艷的體驗(yàn)。
如上圖所示，通過優(yōu)秀的明朝體、網(wǎng)格系統(tǒng)，物書堂出品的幾個(gè)詞典 APP 的界面讓人驚艷，文字之美還有很多可能，這也是我們的努力方向。我們也知道，當(dāng)前客戶端內(nèi)中英混排、英文排版等方面，依然有進(jìn)步空間，未來也會(huì)進(jìn)一步完善。
文章來源：優(yōu)設(shè)
本篇文章立足于網(wǎng)格系統(tǒng)的基礎(chǔ)上，以網(wǎng)格使用邏輯詳細(xì)的介紹了在實(shí)際的應(yīng)用中應(yīng)該如何才能把劃分的網(wǎng)格當(dāng)做工具使用。
文章來源：站酷
目錄頁(yè)主要出現(xiàn)在一些篇幅比較長(zhǎng)的書籍（畫冊(cè)）中，其位置一般被安排在扉頁(yè)之后，目錄雖然不是正文，卻概括了一本書的所有內(nèi)容，具有便于讀者快速了解及查閱書本內(nèi)容的作用，所以，即使說目錄頁(yè)是一本書中最重要的頁(yè)面也不為過。
既然如此，那么目錄頁(yè)的設(shè)計(jì)自然也是十分重要，于是乎，蔥爺整理了 8 個(gè)很不錯(cuò)的目錄設(shè)計(jì)技巧分享給大家。
直線在目錄設(shè)計(jì)中的作用主要有以下三個(gè)。
1. 連接
即把每節(jié)內(nèi)容的標(biāo)題與其對(duì)應(yīng)的頁(yè)碼連起來，這是比較常規(guī)的一種做法，可以使目錄更加清晰，重復(fù)排列的線條會(huì)形成統(tǒng)一、規(guī)整的美感。采用這種排版方式時(shí)，標(biāo)題與頁(yè)碼一般會(huì)設(shè)置成兩端對(duì)齊，這樣的效果更加整潔、清晰。
2. 創(chuàng)造形式
對(duì)于一些文字內(nèi)容比較少的目錄頁(yè)，如果像上面的例子一樣排列會(huì)顯得比較單調(diào)和小氣，所以可以借助直線來增加其趣味性和張力。由于內(nèi)容不多，所以即使不嚴(yán)格對(duì)齊也不會(huì)影響閱讀。
3. 信息區(qū)隔
比如在下圖的例子中，直線起到了兩個(gè)信息區(qū)隔的作用，一是區(qū)隔頁(yè)碼與大標(biāo)題；二是使七個(gè)大章節(jié)的內(nèi)容獨(dú)立開來。
這種形式也適合內(nèi)容比較少的目錄頁(yè)，當(dāng)有了圖片后，目錄頁(yè)似乎也變成了一個(gè)內(nèi)頁(yè)版面，更加豐富、飽滿。圖片在目錄設(shè)計(jì)中主要有兩個(gè)用法。
1. 概括章節(jié)的主要內(nèi)容
其功能與標(biāo)題一樣，所以如果要使用這種方式，那么就需要為目錄中的每個(gè)大標(biāo)題都搭配對(duì)應(yīng)的圖片。
2. 裝飾
這里的圖片不是與標(biāo)題一一對(duì)應(yīng)的，其目的是為了消除純文字目錄的單調(diào)感，使版面更豐富、更好看。
即將目錄中的元素（頁(yè)碼、標(biāo)題、圖片）用表格的形式來排列，這么做也可以使信息更加清晰，更有秩序。由于這種做法在目錄設(shè)計(jì)中并不常見，所以顯得很特別。
頁(yè)碼或者序號(hào)是目錄頁(yè)必不可少的元素，章節(jié)細(xì)分比較多的目錄都會(huì)標(biāo)明頁(yè)碼，而分類比較少的目錄一般會(huì)采用序列號(hào)，用來區(qū)分幾個(gè)大板塊。把頁(yè)碼或序號(hào)拉大并使用筆畫比較粗的字體，除了可以使其更明了、醒目以外，還可以增加版面的大小對(duì)比，提升設(shè)計(jì)感。
把頁(yè)碼裁切一下，會(huì)更有設(shè)計(jì)感。
即把文字信息豎向等分成兩份或兩份以上，適用于文字比較多的版面，所以如果目錄頁(yè)的內(nèi)容比較多時(shí)也適合分欄排版。由于每一欄的內(nèi)容都嚴(yán)格對(duì)齊，且頁(yè)碼比較大，所以欄與欄之間即使錯(cuò)位排列也不會(huì)影響閱讀。
除了文字還可以用圖片來分欄。
即把目錄信息沿著某條軸排列，這種形式在目錄設(shè)計(jì)中也比較少見，適用于內(nèi)容比較少的目錄頁(yè)。軸的形式一般為豎軸和橫軸，排列的形式通常為錯(cuò)位排版。
上圖并不是以線為軸，而是以圖片和色塊為軸。
我們都知道網(wǎng)格系統(tǒng)是畫冊(cè)設(shè)計(jì)的常用工具，可以有效組織版面信息，使其更有序、更整潔，所以內(nèi)容比較多的目錄頁(yè)也可以用網(wǎng)格系統(tǒng)來排版，為了避免單調(diào)和無趣，通常會(huì)加入圖片元素。
如果目錄的文字比較少，版面就容易顯得很空、很單調(diào)，常見的做法是增加圖片或者把文字拉大，其實(shí)主動(dòng)保留大量空白也是一種解決辦法，比如把內(nèi)容集中排列在版面的頂部、底部、左下角、右下角等位置，留出其他位置的空白。這么處理的版面雖然有一種不平衡感，但動(dòng)感和設(shè)計(jì)感更強(qiáng)，大面積的留白還可以適當(dāng)緩解眼睛的疲勞。
無論做什么設(shè)計(jì)我們都要以它的最終目的為設(shè)計(jì)準(zhǔn)則，由于目錄是為了方便瀏覽和查閱書本內(nèi)容，所以設(shè)計(jì)時(shí)一定要注意視覺的整潔與信息的清晰，所以可以發(fā)現(xiàn)對(duì)齊和統(tǒng)一是最常被用到的兩個(gè)技巧。
如果經(jīng)常聽評(píng)片會(huì)，許多朋友會(huì)聽過這樣一句話：「這樣拍會(huì)顯得畫面更有張力……」就攝影而言，我們認(rèn)為張力，是讓一幅攝影作品在視覺上出效果的重要「內(nèi)力」。此外「張力」還被廣泛應(yīng)用在點(diǎn)評(píng)一段演唱，一幅畫，一次表演……我們都似乎能感受「張力」的意境，卻又似乎不能參透它的意思。
如何理解「張力」？如何借此來提高我們的攝影感悟？下面我就試著做個(gè)粗淺的分析吧。
關(guān)于「張力」有很多略顯深?yuàn)W的解釋。我認(rèn)為下面這種解釋較為通俗，同時(shí)與攝影有一些關(guān)聯(lián)：
互補(bǔ)物、相反物和對(duì)立物之間的沖突或摩擦?！话愣?，凡是存在著對(duì)立而又相互聯(lián)系的力量、沖動(dòng)或意義的地方，都存在著張力。（轉(zhuǎn)引自楊果〈隱藏的視點(diǎn)：中西「張力」范疇再辨〉，《江漢學(xué)術(shù)》，2013年10月）
盡管這段話不是針對(duì)攝影，甚至不是針對(duì)視覺藝術(shù)而寫的，但是卻很好的解釋了張力一詞。「張力」（tension）由「內(nèi)涵」（intension）和「外延」（extension）二詞而來。其實(shí)它在物理學(xué)上的意思便是其在美學(xué)上的意義的絕佳比喻。
那么我們便可以粗淺感受一下「張力」在一張照片（或者說任何一種視覺藝術(shù)）中表達(dá)的是什么了：它通常表示了一幅照片對(duì)立而又統(tǒng)一的相互作用，這種作用通常產(chǎn)生緊張感、拉扯感，產(chǎn)生一種繁復(fù)的韻味。力的暗示、不平衡、斷裂、突發(fā)等效果都屬于張力范疇。
舉個(gè)極其通俗的例子，如果我要用圖片表達(dá)「跨欄」。
這張「沒有張力」，因?yàn)槌Ｒ?guī)、平衡、穩(wěn)定：
這張「有張力」，因?yàn)榭鋸?，不平衡?
當(dāng)我們說一張照片的「張力」的時(shí)候，更多表達(dá)的是照片給我們帶來的主觀感受。通常情況下，一張「有張力」的照片背后蘊(yùn)含著以下的特質(zhì)。
1. 拉扯感
即我們可以感覺到「力量的存在」，似乎被某種力量拉扯著。哇，這是再直白不過的張力了。
以拍街頭行人為例，「奔跑」「轉(zhuǎn)向」或其他肢體較為夸張的動(dòng)作和表情通常能讓我們體會(huì)到力量。人的潛意識(shí)總是會(huì)傾向于，試著讓一些看起來沒有達(dá)到穩(wěn)態(tài)的東西趨向于達(dá)到穩(wěn)態(tài)，夸張的動(dòng)作同時(shí)也暗示著那些行人「將要跨出下一步」「將要轉(zhuǎn)過去」「將會(huì)拉扯肌肉」等等。
△ 韓松 / 攝 iPhone 7p， 莫斯科。奔跑的人。
△ 韓松 / 攝 iPhone 6， 馬爾丁，孩子的表情較為夸張，能感受到肌肉的拉扯，畫面感染力較強(qiáng)。
△ 韓松 / 攝 iPhone 6， 馬爾丁。同樣是人物照，這張就畫面張力略顯單薄。
而另一種拉扯感來自所拍攝的元素的形態(tài)本身。例如夕陽(yáng)下被拉長(zhǎng)的影子，具有縱深感的空間，夸張尖銳的幾何形態(tài)等。它們都會(huì)讓我們有被拖拽、被虹吸、被纏繞等感覺。
△ 韓松 / 攝 iPhone 7p， 布達(dá)佩斯。影子。
2. 沖突
制造各種對(duì)比與沖突。
例如強(qiáng)烈的色相對(duì)比，陰影和高光的高調(diào)對(duì)比等等。這無疑用畫面的色彩擊中我們的眼球。
再如一切能造成沖擊力的題材沖突：如抽象和具象，虛幻和真實(shí)，細(xì)膩與粗糙，動(dòng)態(tài)與靜態(tài)等等。
△ 韓松 / 攝 iPhone 6， 香港。紅衣人物和綠色墻面的「撞色」。
△ 韓松 / 攝 iPhone 6， 里斯本。行人和影子。
3. 構(gòu)圖
夸張的構(gòu)圖也能產(chǎn)生張力。
斜線的構(gòu)圖通常更有張力，因?yàn)樗鋸埗鴱?qiáng)烈。但斜線的構(gòu)圖是需要磨練的，有時(shí)候「為了斜線而斜線」會(huì)顯得矯揉造作（之前的文章我建議大家先從擺正，拍平開始）。
△ 譚凌飛 / 攝 iPhone 6， 薩爾茨堡。斜射的影子讓不起眼的場(chǎng)景有了張力。
極度不遵從「三分法」「對(duì)稱」「平衡」等原則，而又在某種意義上很精妙地構(gòu)圖，有時(shí)候也能造成張力。這種構(gòu)圖的本質(zhì)是打破了平衡感，擾動(dòng)了我們潛意識(shí)里的平衡球。元素的極大和極小的對(duì)比，大量留白和極度撐滿，以及一些「莫名其妙」的夸張形式，都有可能成為視覺張力的發(fā)力點(diǎn)。
△ 韓松 / 攝 iPhone 6s， 北京。
△ 韓松 / 攝 iPhone 7p， 日本高松?！笜O大」的場(chǎng)景和「極小」的人物，拉開了比例。
△ 韓松 / 攝 iPhone 7p， 巴黎。雕塑和觀眾的比例和顏色對(duì)比形成張力，然而他們的動(dòng)作又有一些聯(lián)系。
1. 手機(jī)外置廣角或魚眼鏡頭
手機(jī)定焦鏡頭較為平和，如果加上外置的廣角或魚眼鏡頭能夠拍一些較有沖擊力的照片。廣角顧名思義是有很寬廣的視角，能夠近距離將比較寬的場(chǎng)景元素都拉扯在一起，讓斜線、曲線都更為夸張。
2. 勇敢面對(duì)那些「不舒服」的素材吧
其實(shí)本質(zhì)還是在于不平衡。擁擠、窺視、抖動(dòng)、不穩(wěn)定的、轉(zhuǎn)瞬即逝，這些東西都不太舒服，但又常常因此形成視覺上的動(dòng)感。擁擠人群中的一瞥，從奇特角度的窺探人物的活動(dòng)、快速運(yùn)動(dòng)的騎車的人，匆匆而過的行人汽車等等，讓我們感到有「絲毫不安」，卻也預(yù)示著「這不是穩(wěn)態(tài)」，是矛盾而拉扯著的。
△ 韓松 / 攝 iPhone 7p， 布拉格。擁擠的人群。
△ 韓松 / 攝 iPhone 7p， 日本奈良。透過吃草的鹿看后面的鹿。
△ 譚凌飛/ 攝 iPhone 6s， 巴黎。差點(diǎn)被遮住的鐵塔。
3. 不平衡的構(gòu)圖
自不多說。對(duì)角線、夸張的引導(dǎo)線，螺旋線，撐滿畫面的構(gòu)圖。那些找不到幾何中心而又精妙的構(gòu)圖。
△ 韓松 / 攝 iPhone 7p， 日本。螺旋線。
4. 拍攝運(yùn)動(dòng)物體
跑步的人，快走的人，跳躍的人，快速通過的車。
△ 韓松 / 攝 iPhone 6s， 伊斯坦布爾。撐傘的人走過。
△ 韓松 / 攝 iPhone 7p， 莫斯科。拉手風(fēng)琴的人與匆匆而過的行人。
5. 后期
通過調(diào)高飽和度等參數(shù)強(qiáng)化色相的對(duì)比等等。
△ 韓松 / 攝 iPhone 7p， 日本。后期調(diào)高了些飽和度，強(qiáng)化了人物和背景的顏色對(duì)比。
不得不承認(rèn)，張力還是一個(gè)比較抽象的概念，我們從來不會(huì)以「張力」為目的去拍一張照片，更多的時(shí)候，我們是無意識(shí)地被「有張力」的場(chǎng)景所吸引，也具有從一堆原片中甄選出「有張力的照片」的能力。重要的是會(huì)在取景框中通過構(gòu)圖的運(yùn)用來制造張力的可能性。
文章來源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com