首頁

版式設計-文字

資深UI設計者

今天的這篇文章也將圍繞著「文字」展開,相信大家看完后會對「文字」有一個全新的了解,也將明白文字對于版面的意義是巨大的,處理好它,基本上你的版面也就編排的差不多了。好了,下面我們開始今天的內(nèi)容吧。

高手的版式三部曲系列:文字篇

首先來看幾張不同類型的海報,第一張文字占比較高,第二張圖片占比較高,第三張文字與圖片占比是五五開。

然而不管是屬于哪種類型的,它們的核心目的都是在傳達信息。因為對于一張海報來說,我們不光會看還會去閱讀它們。

高手的版式三部曲系列:文字篇

平面設計就是通過文字來「說話」的。

高手的版式三部曲系列:文字篇

而在廣告設計中,圖片的占比會非常高,因為廣告多以圖片為主,通過圖片我們能大致的猜測出設計師想要表達的東西是什么。

高手的版式三部曲系列:文字篇

總結(jié)一下:廣告設計多以圖片為主,意在通過圖片傳達概念;而平面設計則多以文字或圖片為主,意在通過文字傳達信息。

高手的版式三部曲系列:文字篇

那么作為信息傳達的載體,字體就顯得格外重要了。下面我會從字體的分類、字體的搭配、字體的氣質(zhì)與設置細節(jié)著手,慢慢帶領(lǐng)大家去認識字體,首先我們來看看字體的分類都有哪些。

高手的版式三部曲系列:文字篇

中文字體大致可分為:黑體、宋體、圓體、書法體與卡通體等。

高手的版式三部曲系列:文字篇

其中書法體又細分為:楷書、行書、草書與隸書等。

高手的版式三部曲系列:文字篇

在列舉的這些字體中,最常用就是:黑體、宋體和圓體,而在書法體中,最常用的是楷書與行書。為什么說這些字體常用呢?因為在許多優(yōu)秀的設計作品中,這些字體的出現(xiàn)概率都非常高,尤其是黑體與宋體。

高手的版式三部曲系列:文字篇

下面說一下英文字體,大致可以分為:襯線體、無襯線體、手寫體與展示字型等。

高手的版式三部曲系列:文字篇

其中最常用的就是:襯線體與無襯線體。理由與中文一樣,它們也是使用率很高的字體,其次還有一個原因就是在以中文為主的設計中,它們與中文字體搭配起來比較契合。

高手的版式三部曲系列:文字篇

拿黑體來說,與之搭配的英文字體就是無襯線體,因為它們的筆畫特征相似度很高。

高手的版式三部曲系列:文字篇

宋體搭配的就是襯線體,因為宋體的筆畫特征是有粗細變化且有裝飾線,而英文的襯線體也剛好有與之相似的地方。

高手的版式三部曲系列:文字篇

而圓體則是搭配擁有相似特征的無襯線體。

高手的版式三部曲系列:文字篇

因為常用的書法體通常使用毛筆書寫,所以在筆畫特征上沒有與之相匹配的英文字體,大多數(shù)時候我們會選擇用襯線體來搭配,具體原因我會在后面的字體氣質(zhì)環(huán)節(jié)為大家講解。

高手的版式三部曲系列:文字篇

雖然也有別的搭配方式存在,但我給大家提供的這些都是最常用和最安全的。說完字體搭配問題后,下面我們來看看這些字體,所包含的氣質(zhì)又有哪些。

高手的版式三部曲系列:文字篇

首先是黑體,它具有科技感與現(xiàn)代感,這是由它簡潔干練的筆畫特征決定的。

高手的版式三部曲系列:文字篇

其次黑體也能表現(xiàn)出運動與時尚的感覺,因為運動與時尚本就是偏現(xiàn)代的詞匯。

高手的版式三部曲系列:文字篇

接著是宋體,它具有文化與歷史的氣質(zhì),這個比較好理解。

高手的版式三部曲系列:文字篇

而除了能表現(xiàn)出歷史與文化感之外,宋體還能表現(xiàn)出清新與雅致的感覺,這是由宋體的筆畫特征決定的,橫細豎粗且末端帶有裝飾,與優(yōu)雅精致的感覺十分契合。

高手的版式三部曲系列:文字篇

圓體的特點也是非常明顯的,在看到它時腦海中的第一印象就是可愛與卡通。

高手的版式三部曲系列:文字篇

除了刻板印象外,圓體那種圓滾滾的筆畫給我們的感覺還有安全和易親近,所以圓體也能用來表現(xiàn)兒童與溫暖感覺的題材。

高手的版式三部曲系列:文字篇

一說到書法體,能直接聯(lián)想到的關(guān)鍵詞就是傳統(tǒng)與歷史,因為書法的演變就是我們漢字發(fā)展的軌跡。然后我們回過頭來講一下,為什么書法體可以和西文中的襯線體搭配。

高手的版式三部曲系列:文字篇

原因就在于襯線體也具備書法體的某些氣質(zhì),比如傳統(tǒng)、文化、歷史等。與書法體在早期的東方一樣,襯線體在早期的西方也是主要的字體之一。

高手的版式三部曲系列:文字篇

溫暖、人情味兒,說到書法體可能很難聯(lián)想到這兩個詞,但是書法體確實具備這種氣質(zhì)。跟黑體這種棱角分明的字體相比,書法體是手寫出來的,它的筆畫特征給我們的感覺就是有「溫度」的。

高手的版式三部曲系列:文字篇

在字符面板中,除了選擇字體與改變字號以外,這兩個區(qū)域相信大家用的還是比較多的,它們分別是:行距設置與字距設置。

高手的版式三部曲系列:文字篇

拿行距來說,在使用時有幾個比較常用的設置方法,比如用當前文字的字號乘以1.2、1.732或是2。不過,通過這個方法所算出來的數(shù)值只是一個參考,也就是說你可以在這個基礎(chǔ)上做些調(diào)整。

高手的版式三部曲系列:文字篇

比如:在計算出的數(shù)值的基礎(chǔ)上進行遞增或是遞減,這時你要做的就是用眼睛去觀察,覺得大了就減少一些,覺得小了就增大一些。

高手的版式三部曲系列:文字篇

其中,用字號乘以1.2適用于標題。

高手的版式三部曲系列:文字篇

比如上方那個標題的字號是40pt,那么行距的數(shù)值就是用40乘以1.2等于48。下方這個是在此基礎(chǔ)上做的一個調(diào)整,稍微增大了一些行距。

高手的版式三部曲系列:文字篇

字號乘以1.2適用于標題,而用字號乘以1.732或2則更適用于小字號的文字,比如內(nèi)文。

高手的版式三部曲系列:文字篇

上方是用字號乘以1.732的例子,字號是9pt,用它乘以1.732得出來的數(shù)值是15.588,四舍五入取個整數(shù)得到的行距就是16,下方這個是用字號乘以2得到的效果。

高手的版式三部曲系列:文字篇

大多數(shù)情況下我建議大家用字號乘以1.732的行距,大小比較適中。

高手的版式三部曲系列:文字篇

跟行距不同的是,基本上來說字距是無需調(diào)整的。當然還是那句話,要靠自己的眼睛來衡量,如果你覺得字與字之間離的很近的話,那么可以增大一些字距,反之,則可以減小一些。

高手的版式三部曲系列:文字篇

高手的版式三部曲系列:文字篇

其次就是,當你遇到一些偏輕松慢節(jié)奏的設計,比如典雅清新類的文學小說時,就可以適當?shù)脑黾右恍┳志鄟頎I造這個感覺。

比如這兩張海報,左邊的是經(jīng)典的居中結(jié)構(gòu),右邊的是包圍結(jié)構(gòu),構(gòu)圖都是可以的沒有任何問題,但為什么看起來還是怪怪的呢?因為文字組沒有刻畫好。

為了讓大家能更深刻地體會到文字組對于版面的意義,修改了這兩張海報,其中構(gòu)圖不變只改文字組。

高手的版式三部曲系列:文字篇

這個修改前后的對比還是非常直觀的,可見文字組對版面的影響有多大。如果說構(gòu)圖是版面的骨架的話,那么文字組就是版面的五官,骨架再好五官不行結(jié)果也是可想而之的。

高手的版式三部曲系列:文字篇

文字組分為:左對齊、居中對齊、頂對齊以及兩端對齊。

高手的版式三部曲系列:文字篇

其中與左對齊與頂對齊對應的有:右對齊與底對齊。

高手的版式三部曲系列:文字篇

給大家找了一些各種對齊方式的案例。這是左對齊的形式。

高手的版式三部曲系列:文字篇

這是右對齊的形式,與左對齊相比右對齊屬于不常用的對齊方式,主要是出于易讀性的考慮,但并不是說不能用。

高手的版式三部曲系列:文字篇

這是居中對齊的形式,最經(jīng)典的對齊方式之一。

高手的版式三部曲系列:文字篇

這是頂對齊的形式,是文字豎排時最常用的對齊方式。

高手的版式三部曲系列:文字篇

這是底對齊的形式,跟頂對齊相比也是屬于不常用的對齊方式。

高手的版式三部曲系列:文字篇

最后是兩端對齊的形式,橫排與豎排都可以使用這種對齊方式。

高手的版式三部曲系列:文字篇

如果作品看得足夠多,應該見過這種形式的組合,它同時包含了多種不同對齊方式,我們稱其為「對齊組合」。

高手的版式三部曲系列:文字篇

比如我們可以借鑒結(jié)構(gòu),以這個文字組為例,它的結(jié)構(gòu)是這樣的:兩端對齊、中間的文字字號大,上下的文字字號小,按照這個套路我們來試著做一個組合。

高手的版式三部曲系列:文字篇

在編排前,我們先閱讀一下文案,通過文字可以得知,這是一個與籃球明星有關(guān)的內(nèi)容,氣質(zhì)上來說會偏現(xiàn)代一些。

高手的版式三部曲系列:文字篇

所以字體可以選擇一款黑體,英文部分則搭配一款無襯線體。

高手的版式三部曲系列:文字篇

根據(jù)之前總結(jié)到的這些特征,下面就可以開始編排文字了。

高手的版式三部曲系列:文字篇

按照那個組合的套路,我們先將兩端對齊中較大字號的文字給編排出來,而標題信息無疑是非常適合用來放大的。

高手的版式三部曲系列:文字篇

接著再將上方和下方的小字號文字給編排出來。

高手的版式三部曲系列:文字篇

其中要注意的就是這段文字的行距,我參考了logo的高度來進行設置。而整個組合中,字距是基本沒有進行調(diào)整的。

高手的版式三部曲系列:文字篇

值得一提的是,在兩端對齊的文字組中,這種小大小的形式非常好用。因為它的節(jié)奏變化豐富,所以大家在做兩端對齊的文字組時不妨試試。

高手的版式三部曲系列:文字篇

這就是借鑒結(jié)構(gòu)的效果了,精髓在于要多去分析別人的形式與套路,并從中獲取做組合的靈感。除了能借鑒結(jié)構(gòu)之外,我們還可以借鑒標題字數(shù)+結(jié)構(gòu),是什么意思呢?

高手的版式三部曲系列:文字篇

以這個組合為例,它的標題有7個字,整個組合是由頂對齊與兩端對齊構(gòu)成的一個對齊組合。

高手的版式三部曲系列:文字篇

它的組合結(jié)構(gòu)為小中大,按照這些特點我們來嘗試借鑒。

高手的版式三部曲系列:文字篇

這是要用到的文案信息,通過閱讀文案可以得知,這是一個關(guān)于炸雞套餐的內(nèi)容。

高手的版式三部曲系列:文字篇

通過去看kfc的各種物料,發(fā)現(xiàn)運用黑體的場景還是比較多的。

高手的版式三部曲系列:文字篇

所以,在字體搭配上選擇用黑體與無襯線體。

高手的版式三部曲系列:文字篇

根據(jù)之前總結(jié)到的這些特征,下面就可以開始編排文字了。

高手的版式三部曲系列:文字篇

按照小中大的特點,依次將信息給編排出來。

高手的版式三部曲系列:文字篇

完成后可以在組與組之間,添加一根小線段用于連接,以起到過度的作用,如果大家現(xiàn)在回過頭去看原圖的話,也能發(fā)現(xiàn)這一特征。

高手的版式三部曲系列:文字篇

其中,標題的行距就是用標題的字號乘以1.2算出來的。

高手的版式三部曲系列:文字篇

字距我也做了調(diào)整,因為默認0的字距看上去有些擁擠。

高手的版式三部曲系列:文字篇

可以看出跟原圖相比,在不破壞組合結(jié)構(gòu)的情況下,針對文字信息的編排是做了些調(diào)整的,比如:原稿最左側(cè)是兩行頂對齊的小文字,在借鑒時將它換成了logo,因為我們是要借鑒它的結(jié)構(gòu),而不是為了跟原稿做的一模一樣,具體還是要根據(jù)我們的內(nèi)容來合理編排。

高手的版式三部曲系列:文字篇

首先我們來看這張圖,一個標準的兩端對齊、組合結(jié)構(gòu)與之前那個是一樣的,中間的字號大,上下的字號小。

高手的版式三部曲系列:文字篇

除去這些外還有一個小特征就是,在大字號中間還有一層小字號的文字。

高手的版式三部曲系列:文字篇

接著我們再來看這張圖,它的特點就是圖片疊壓在了文字的上方。至于它的結(jié)構(gòu)我們可以不用考慮,因為結(jié)構(gòu)已經(jīng)找好借鑒了。

高手的版式三部曲系列:文字篇

這是要用到的文案與圖片。通過文字可以得知,這是一個關(guān)于介紹昆蟲的圖書,且配有一張插圖。這個插圖的風格是手繪形的,偏寫實一些沒有那么的卡通。

高手的版式三部曲系列:文字篇

結(jié)合這些特點我選擇的字體搭配方式是,宋體配襯線體。

高手的版式三部曲系列:文字篇

因為字體搭配這部分我又借鑒了一些相關(guān)風格的書,發(fā)現(xiàn)它們的字體搭配方式用宋體比較多。

高手的版式三部曲系列:文字篇

分析完文案找到字體搭配方式后,在結(jié)合之前總結(jié)的一些組合特征,我們就可以開始編排了。

高手的版式三部曲系列:文字篇

先將中間比較大的那層文字給編排出來,然后在它中間處置入一個小字號的文字。

高手的版式三部曲系列:文字篇

中間層編排完成后再來編排上下層的文字,字號不用太大,整體注意好兩端對齊。

高手的版式三部曲系列:文字篇

調(diào)整字距的地方有兩處,首先是標題,調(diào)整的原因在于默認值我覺得有些小了,其次是標題中間的那行文字,調(diào)整它的原因在于不想字號放太大。

高手的版式三部曲系列:文字篇

因為是兩端對齊的結(jié)構(gòu),不調(diào)整字距的話。標題中間那行文字只能通過放大字號來達到目,然而這個效果并不是我想要的。

高手的版式三部曲系列:文字篇

綜合考慮,選擇了這個,最后,把圖片置入進去疊壓在文字的上方。

高手的版式三部曲系列:文字篇

圖疊壓在文字上有一個無法避免的問題就是,被壓住的文字會出現(xiàn)無法識別的情況,英文還好但是中文卻不行,因為在這個組合中,中文是用來閱讀的文字,英文僅充當裝飾用。

高手的版式三部曲系列:文字篇

既然中文是重要的信息,那為什么還要去遮擋它呢?因為有提示,通過這兩個字你也能猜出來被壓住的文字是什么。

高手的版式三部曲系列:文字篇

這就是借鑒結(jié)構(gòu)+表現(xiàn)手法的例子,多一張圖片的加入,混合借鑒后的效果與原稿的相似度就會降低。

高手的版式三部曲系列:文字篇

下面我們來看這張圖,它既有頂對齊又有兩端對齊的感覺,像這種組合我將它稱為頂部兩端對齊。

高手的版式三部曲系列:文字篇

它的組合結(jié)構(gòu)也是一個小大小的形式。

高手的版式三部曲系列:文字篇

分析完上一個組合后,再來看看這個組合,值得借鑒的地方有兩處,首先就是整體的結(jié)構(gòu),其次就是字體搭配。由于已經(jīng)借鑒了上一個組合的結(jié)構(gòu),所以這個組合要借鑒的就是字體搭配。

高手的版式三部曲系列:文字篇

在原圖的這個字體搭配中,英文是最好判斷的,這個字體是襯線體,中文則比較陌生了,既不像黑體也不像宋體。

高手的版式三部曲系列:文字篇

感覺是被設計過的,不像是字庫里的字體,我通過觀察發(fā)現(xiàn),它既有宋體橫細豎粗的筆畫感覺,又有黑體干凈利落的特征。

高手的版式三部曲系列:文字篇

所以,我在字庫字體中找到了一款具有類似感覺的字體:姚體。

高手的版式三部曲系列:文字篇

在字體搭配上選擇用姚體搭配襯線體。這里需要強調(diào)的一點是,在挑選字體借鑒的過程中已經(jīng)考慮到了與文案的氣質(zhì)相匹配的問題,下面我們就來看看文案。

高手的版式三部曲系列:文字篇

標題叫「遇見你之前」,給人的感覺比較文藝,而姚體我們前面也分析過了,它是具有宋體特征的,而且筆畫細長,整體給人的感覺就是比較文藝的。

高手的版式三部曲系列:文字篇

分析完成后,結(jié)合之前總結(jié)的組合特點就可以開始編排了。

高手的版式三部曲系列:文字篇

第一步,還是按照小大小的感覺將組合給編排出來,注意好頂部兩端對齊。

高手的版式三部曲系列:文字篇

接著在組與組的縫隙處加入線條就完成了。

高手的版式三部曲系列:文字篇

在這個組合中標題的行距與字距,默認狀態(tài)下是左邊這樣的,字距還好,行距卻非常大,這個時候你就不能套用之前講到的倍數(shù)去算行距了。那樣行距只會越來越大,所以這里我們要根據(jù)視覺效果來調(diào)整。

高手的版式三部曲系列:文字篇

這樣,一個借鑒結(jié)構(gòu)+字體搭配的例子就完成了。

高手的版式三部曲系列:文字篇

這是要用到的文案與圖片素材,首先,老規(guī)矩分析一下文案,選擇與之契合字體。書名叫《流星之絆》,還是比較文藝的。

高手的版式三部曲系列:文字篇

根據(jù)這個書名,搜索了一下原書的樣子,在這三個不同的版本中,所感受到的氣質(zhì)有:溫情和雅致,在字體的選擇上與之較為契合的有:書法體與宋體,這兩個字體的選擇在這三個不同的原版本中也都有體現(xiàn)。

高手的版式三部曲系列:文字篇

打算用宋體,與其搭配的英文首選就是襯線體了。

高手的版式三部曲系列:文字篇

這是第一個要借鑒的對象,可能有人會說這不像文字組,這確實不是文字組,但并不代表它不能被聯(lián)想成文字組。

高手的版式三部曲系列:文字篇

高手的版式三部曲系列:文字篇

比如它的結(jié)構(gòu)是由一個頂對齊與一個左對齊構(gòu)成的對齊組合,而且下方的那個左對齊文字是放在了頂對齊的負空間處的。

高手的版式三部曲系列:文字篇

其次,頂對齊的文字字號較大,下方左對齊的文字字號較小。

高手的版式三部曲系列:文字篇

這就是根據(jù)那張圖所總結(jié)出的一些組合特征,下面我們就根據(jù)這些特征來編排文字。

高手的版式三部曲系列:文字篇

先排出頂對齊的文字,然后在其負空間處置入左對齊的文字信息。

高手的版式三部曲系列:文字篇

排到這發(fā)現(xiàn)右下角還有塊小缺口,既然是要做一個對齊組合的話,那么就要把它填滿。

高手的版式三部曲系列:文字篇

關(guān)于頂對齊的中間部分為什么要這么做,是因為標題的字數(shù)不足以作出頂對齊的感覺,為了解決這個問題,選擇重復了一次標題并且將它的筆畫打散了,而打散的靈感來源于「流星」,它們就像流星一樣散布在天空中,不知道什么時候就會掉落下來。到這為止是書封的上半部分,下面我們來編排下半部分。

高手的版式三部曲系列:文字篇

這是要用到的借鑒圖,它也是一個由頂對齊與左對齊構(gòu)成的對齊組合。

高手的版式三部曲系列:文字篇

除了這個外它頂對齊部分的文字跟左對齊的比,也是屬于較大的。

高手的版式三部曲系列:文字篇

這是從那個組合中,總結(jié)出的組合特征,與上一個幾乎一樣。

高手的版式三部曲系列:文字篇

按照總結(jié)出的組合特征,將文字給編排出來。

高手的版式三部曲系列:文字篇

其中頂對齊與這段左對齊的文字,它們的行距是用字號乘以1.732算出來的,字距則是做了些微調(diào)整,因為當文字縮小后,它的字距在視覺上看著也會變小,所以我在默認0的基礎(chǔ)上將字距增加到了50。

高手的版式三部曲系列:文字篇

這就是根據(jù)那兩張圖片所借鑒出來的文字組了,下面把它們置入進版面中。

高手的版式三部曲系列:文字篇

整體是一個上下結(jié)構(gòu)的,這種類型在構(gòu)圖中屬于上下構(gòu)圖。這也是為什么會找那兩張圖來當參考的原因,因為提前已經(jīng)考慮好了構(gòu)圖。

高手的版式三部曲系列:文字篇

接下來做烘托氛圍的工作,先把底色換成夜空的黑色,然后配上圖片。

高手的版式三部曲系列:文字篇

接著更換字體的色彩恢復識別性,其中黃色的部分是為了與白色部分做區(qū)分。

高手的版式三部曲系列:文字篇

然后給腰封換上色彩以恢復下方的文字的識別性,再挑選一些信息,在它們的下方配上黃色,目的是為了與上方的色彩做呼應。

高手的版式三部曲系列:文字篇

最后,將書脊編排出來,這個案例就編排完成了。

高手的版式三部曲系列:文字篇

以上就是版式三部曲之文字篇的所有內(nèi)容了,回顧一下,由兩個部分組成。第一部分是:字體的分類、字體的搭配、字體的氣質(zhì)與設置細節(jié)。具體包括:字體有哪些不同的類型、在選中字體的類型后,要如何選擇與之搭配的英文字體。字體氣質(zhì)主要講的是,不同類型的字體都有哪些味道,它的意義在于當你確定好項目的風格后,可以根據(jù)不同字體的氣質(zhì),快速的找到與項目定位契合的字體。

文章來源:優(yōu)設    作者:研習設

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


「上下構(gòu)圖」的排版技巧

資深UI設計者

構(gòu)圖是在有限的空間內(nèi)把文字、色彩、圖形等元素結(jié)合起來構(gòu)成畫面,使作品不僅具有美感,還能清晰表達設計者的目的。不同構(gòu)圖能使畫面產(chǎn)生不同的視覺變化,進而給觀者帶來不同的心理感受。同的心理感受。本期分享的是上下構(gòu)圖的使用方法,此構(gòu)圖形式具有良好的視覺效果,也比較容易掌握,是非常實用的構(gòu)圖方式。

什么是上下構(gòu)圖

上下構(gòu)圖形式是將版面分割為上下兩部分,或讓畫面中的元素整體呈現(xiàn)出上下的分布趨勢,主空間承載視覺點,次空間承載閱讀信息,呈現(xiàn)的視覺效果平衡而穩(wěn)定。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

最典型的上下構(gòu)圖由「上圖下字」或者「上字下圖」兩部分構(gòu)成,圖片及文字各占據(jù)一部分,互不干預,能清晰明了的傳達出版面的信息。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

主空間還經(jīng)常使用圖形化的標題文字充當畫面主體,可以很好解決畫面缺少圖片層級的問題。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

上下構(gòu)圖空間劃分比較固定,為了得到豐富的視覺效果和良好的設計感,需要通過精心設計的編排來豐富版面的視覺效果。比如文字的橫豎排版,元素之間的對比、點線面的運用、巧妙的留白等。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

構(gòu)圖比例

進行上下構(gòu)圖設計時,可以根據(jù)版面內(nèi)容的信息體量劃分畫面的空間,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。在設計時也可以反復進行調(diào)整,直到找到最為合適的構(gòu)圖比例。

1. 1:1分割

把畫面平分為上下兩部分,形成對稱均衡的分割構(gòu)成。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

1:1分割比例構(gòu)成方式,多用于版面中兩部分內(nèi)容處于并列或?qū)α⒌年P(guān)系。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

2. 黃金分割

「黃金分割比例(1:1.618)」被認為是最具美感的分割比例,具有嚴謹?shù)乃囆g(shù)性、和諧性,蘊藏著豐富的美學價值。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

在設計中有意識地運用黃金分割比例進行設計,可以營造出富有美感的版式效果。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

3. 白銀分割

「白銀分割比例(1:1.414)」是日本率先采用的一種分割比例,目前廣泛運用在版式設計的布局中。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

與黃金分割相比,白銀分割次空間占據(jù)的比例更大一些,能夠承載的信息量也更多。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

4. 2:1分割

采用2:1的比例,圖片主體在畫面中占據(jù)主導地位,視覺焦點更清晰。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

主要的信息(標題)常融入圖片中放在主空間成為畫面主體,閱讀性文字則放在次空間。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

5. 3:1分割

3:1分割的比例與2:1比例相似,但圖片在畫面中占據(jù)主導地位更強,主空間承載視覺點,次空間承載閱讀信息。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

通過比例,可以讓版面分割更嚴謹。但沒有那個比例關(guān)系絕對正確,需要根據(jù)畫面的項目調(diào)性、信息體量、信息功能與圖文主體而定。如使用其它比例分割的優(yōu)秀案例:

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

空間調(diào)整

把圖文按比例分別編排在版面上下方,是比較嚴謹規(guī)范的構(gòu)圖方式,但是為了避免版面的呆板,可以通過調(diào)整版面空間變換出多種編排形式。如以下幾個案例:

縮小圖片和文字空間,使留白處形成外空間,增加層次感。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

在背景(繪畫作品)上重新劃出新的空間,形成內(nèi)外空間對比,既豐富了畫面層次,又讓版面變得生動有趣。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

通過圖片文字的錯位排版和負空間的巧妙留白,讓原本呆板的上下構(gòu)圖變得靈活多變,充滿個性。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

讓圖片位置重心偏移,打破均衡穩(wěn)定的構(gòu)圖形式。標題的破圖處理,也增加了版面的靈活性與豐富性。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

在上方空間上劃分出新的空間,這樣的手法可以很好讓空間具有多變性,也可以讓我們的設計更加靈動。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

靈活運用

上下構(gòu)圖的框架看似比較固定,但是也能通過設計手法,變換出多種編排形式,巧妙破除上下分割的單一性與呆板感。

1. 曲線分割

把生硬的直線改為呈現(xiàn)出動態(tài)的曲線或斜線進行畫面的分割,版面顯得更生動活潑。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

2. 圖片裁切

把方形圖片裁切為其他形狀,使上下構(gòu)圖沒有明顯的分割線,也可以呈現(xiàn)出良好的視覺效果。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

3. 文字破圖

使用文字串聯(lián)起上下兩個空間,破除上下構(gòu)圖版面的單一性。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

4. 元素串聯(lián)

利用圖形、色塊等元素串聯(lián)空間,讓主次空間建立起聯(lián)系,具有豐富的視覺效果和良好的設計感。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

5. 圖片退底

把圖片主體進行退底處理,重新營造場景,弱化空間的分區(qū)。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

6. 空間留白

使用留白破除兩個空間的間隙,拉開畫面的空間感,具有良好的視覺效果。

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

用超多案例,幫你掌握「上下構(gòu)圖」的排版技巧

總結(jié)

  • 上下構(gòu)圖是將版面分割為上下兩部分,或讓畫面中的元素整體呈現(xiàn)出上下的分布趨勢,主空間承載視覺點,次空間承載閱讀信息,呈現(xiàn)的視覺效果平衡而穩(wěn)定,是非常實用的構(gòu)圖方式;
  • 進行上下構(gòu)圖設計時,可以根據(jù)版面內(nèi)容的信息體量劃分畫面的空間,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等;
  • 為了避免版面的呆板,可以通過調(diào)整版面空間變換出多種編排形式;
  • 可以通過曲線分割、圖片裁切、文字破圖、元素串聯(lián)、圖片退底、空間留白等手法,變換出多種編排形式,巧妙破除上下分割的單一性與呆板感。
文章來源:優(yōu)設    作者:藝海拾貝Design

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


日期排版沒靈感?我總結(jié)了10套排版案例

資深UI設計者

版式設計在我們的設計中是非常重要的技能,無論是UI設計還是平面設計,都會運用到版式設計相關(guān)的知識,在版式設計中最常見的就是圖文排版、文文排版。一張圖片一段文案在不同的需求情況下我們都可以排版出很多種樣式,每一種樣式展現(xiàn)出來給人的感覺也是不一樣的,美的排版總是會使人眼前一亮,也會使整體的設計更耐看。

排版也是會根據(jù)重要程度劃分層級,我們都知道主題文案都需要醒目,讓人一眼就能看到,這樣才能達到宣傳的作用,當然僅僅只是展示主題文案也是遠遠不夠的,達到主題排版,主圖排版,小到副標題排版,我們都需要精心的排版,還可以更精細到小到輔助文案以及圖形的排版,而今天我們就來看一下日期這樣的文案我們可以怎么排版呢?

日期在一些重要的活動中也是比較重要的信息,比如展會時間,我們需要突出時間,不能用極小的文字排版在角落,用戶不注意的地方,這樣會給人一種焦慮的情緒,既然是展會活動,那么用戶關(guān)心的是展會的主題是什么?活動時間是什么時候?活動地址在什么地方?所以這些重要的信息就需要重要突出。而在一些做紀念性的日期我們就可以小化(例如我自己記錄自己的學習打卡練習)

案例分享

我們常見的日期有年、月、日、時、分、秒,接下來我們就通過對日期的展現(xiàn)做一些不同的排版方式,通過與日期的普通排版方式做對比,我們就可以看出微小的日期排版對整體的設計展現(xiàn)也是有很大影響的。

簡單的日期排版我們通常就只是將年月日對齊排版就算完成了,但是這樣的排版方式會影響整體畫面的美觀,我們對于小文案也需要花一定心思去整理以及排版出更精細的樣式,這樣給用戶的感覺就會覺得你的每一步設計都是用心設計的,并且為了整體的美觀,我們 也不得不從細微之處出發(fā)。

日期排版01

例如下面對于日期的排版,TIME這個文案有時候我們也可以去掉,因為用戶看到時間就會明白這是什么,在一定的情況下也是可以去掉的,當然有時候為了整體頁面的展示效果,我們也可以加上,便于排版,左邊只是將年、月、日并排,時間節(jié)點作為一個點排列,下面的文案我們可以根據(jù)實際情況選擇一些特殊的提示文案做裝飾

而通過對左邊簡單的日期排版進行改版后,我們會發(fā)現(xiàn)右邊的日期排版會顯得更美觀,排版更精妙,也有更多的細節(jié)之處,例如2020后緊接著年(YEAR)的提示,08后面標識是周六(SAT.),年月日和時間節(jié)點也同時做了層次區(qū)分,這樣更有利于閱讀。

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版02

對于上面同樣的日期文案,我們還可以排出右邊不同的樣式,整體采用橫排的方式,將年、月、日同排,時間段縮小處理,使時間之間也能有層次感

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版03

下面的日期是年、日期段、時間段的組合,左邊的排版顯然是比較常規(guī)的分層排版,卻主要突出了2020,而一般時間我們在這一年將要發(fā)生的事,我們更關(guān)心的是哪一天那個時間點,而右邊的排版主要突出時間段/點,更能讓用戶看到自己關(guān)心的事件。

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版04

下面這一組日期是有不同年份的,所以我們在排版的時候可以突出顯示年份,這樣在排版的時候就可以注意層級關(guān)系,排除層次感

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版05

這一組日期是比較簡單的,只有一個時間點,沒有時間段,如果直接按照左邊這樣的日期排版方式,顯然整體看著就很單薄,把這樣的日期排版方式融入到版式整體畫面中,也一定會顯得毫無設計感,而我們只需要將簡單的日期經(jīng)過簡單的排版,從年、月、日、時,從上至下依次排列,這樣就可以顯得信息有層次感,并且閱讀也不會有困惑,加上精致的icon做裝飾,這樣的日期排版就顯得更耐看。

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版06

這一組日期也很簡單,只有月、日、時,都是屬于時間段的信息,通過分析這個時間,月都是10月,是相同的,所以我們可以將月份單獨拿出來,作為共用信息,這樣就可以精簡畫面重復的信息,依然采用月、日、時這樣從上至下的順序排列,時間小化,但是利用色塊突出,也不會柔化時間點的閱讀,再通過一條線的連接,將斜線和時間icon相連,形成一個有趣味性的時間裝飾,這樣的排版更容易吸引用戶的眼球

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版07

下面的日期也是年、日期段、時間段的組合,和第三個日期排版的案例類似,所以存在同樣的問題,左邊的排版顯然是比較常規(guī)的分層排版,卻主要突出了2020,右邊改版后,我們同樣弱化年份(2020),提取相同的月份(8月),突出顯示日期

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版08

這一個和第五個也是一樣的,左邊都是年、月、日、時的時間點,沒有時間段,第五個我們是采用豎排的方式,而這里我們改版后采用的是橫排的方式,突出顯示月、日,讓整體的層次更加清晰

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版09

下面這一組時間改版,我們主要采用錯位豎排的方式,像這樣的排版方式,我們可以多用于一些比較有設計感或者比較唯美的畫面中,顯得每一個小的點,都有用心設計,并且也符合這樣的氣質(zhì)

日期排版沒靈感?我總結(jié)了10套排版案例

日期排版10

這一組日期只有年、月、日。左右兩邊的排版看起來很相似,但是通過對細節(jié)的調(diào)整,例如2020的弱化,間距的把控,星期幾的友好提示,這樣就會使整個日期排版看起來更精細、耐看。

日期排版沒靈感?我總結(jié)了10套排版案例

案例實操

我們通過對上面日期的排版分析和總結(jié),會發(fā)現(xiàn)小小的日期排版也是很關(guān)鍵也很追重要的,所以下面我們將通過一張海報案例,來真正體現(xiàn)日期排版對整體畫面的重要性。

海報主題是選擇的立秋,雖然立秋以及過去兩天了,但是我又學會了這個立秋新的排版技巧,所以我想將這一技巧分享出來,但是這里就不詳細講解海報的設計過程了,主要還是分享日期排版對整體畫面的影響作用

這里就簡單的說一下海報設計的思路,海報主題是立秋,所以我現(xiàn)在一片黃色的楓葉作為畫面的主視覺,畫面整體體現(xiàn)秋天的感覺,一片黃燦燦的畫面,給人感覺就像是秋天到了,畫面元素簡約,只選擇了一片楓葉加上它的投影,體現(xiàn)空間感,主題文案排版在楓葉上,與楓葉融為一體,這樣用戶得分第一視覺就會被主圖吸引,同時看到主題相關(guān)文案,下面的其它文案通過從|秋|字垂落的豎線,分別右對齊以及左對齊,顯得畫面規(guī)整

日期排版沒靈感?我總結(jié)了10套排版案例

第一張海報的日期排版就是采用普通常規(guī)的排版方式,我們會發(fā)現(xiàn)這樣的日期排版方式,在整個畫面中會顯得有點僵硬,并且左右兩邊不對稱的關(guān)系,會顯得右邊偏輕,使畫面的平衡感缺失,也正是日期的排版太粗糙的原因,導致整張海報的精細度大減。

日期排版沒靈感?我總結(jié)了10套排版案例

樣機效果

日期排版沒靈感?我總結(jié)了10套排版案例

我們保持其它元素以及排版都一致,只改變?nèi)掌诘呐虐娣绞?,我們就會發(fā)現(xiàn)右邊的海報整體給人的感覺更精美,平衡感更強烈,所以我們在做設計的時候不要忽略每一個點。將每一個點都細心的設計,這樣的作品才會更耐看。

總結(jié)

版式設計是我們設計中最基本的知識,我們在做設計的時候,通常會注意主題主圖的排版,而經(jīng)常會忽略哪些不是很重要的信息,但是我們在分析文案信息的時候,也需要考慮整體設計的目的,有時候日期信息也是非常重要的信息,所以我們在做排版的時候,也需要認真考慮日期與整體需求的關(guān)系,并且日期排版風格也會影響整體的氣質(zhì)。


文章來源:優(yōu)設    作者:設計小余

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

色彩搭配只是色相變化?應更注重明度與純度

周周

不管是平面設計、品牌設計,還是UI設計,配色都是一個基礎(chǔ),決定著作品的視覺效果。這篇文章就從色相、純度、明度(色彩的三大屬性)三個角度,展開談談色彩的搭配。

設計師必知的20個幻燈片實用設計技巧

資深UI設計者

設計師必知的20個幻燈片實用設計技巧

很多時候,設計師需要在公開場合借用幻燈片演示設計作品,或者給客戶展示的設計方案,又或者是需要在文章當中,展示作品,選取配圖。如果你希望你的展示和演講更加具有吸引力,那么可能需要針對這些視覺素材進行處理,讓你的觀眾或者讀者,被內(nèi)容吸引,被信息打動,能夠 Get 到你所要表達的東西。

今天這篇文章,梳理了 20 個對關(guān)于幻燈片/演示文稿的處理技巧和經(jīng)驗總結(jié),希望能夠幫到你。

1、厘清演示的目標是什么

設計師必知的20個幻燈片實用設計技巧

在創(chuàng)建任何用來展示的幻燈片之時, 你首先要搞清楚一個問題——你的目標或者目的是什么。明確了這一點,才能做好下一步的設計。

2、對你的觀眾有所了解

設計師必知的20個幻燈片實用設計技巧

除了了解自己的目標,你還要搞清楚你的觀眾或者你的受眾是做什么,有什么特征,對什么感興趣,會具備什么樣的動機,這樣你在設計的時候,才能夠更加具有針對性。如果是甲方,那么甲方是什么樣的人?你是否要提供一個具有代入感的故事,在最后再進行報價是否合適?搞清楚觀眾,后面的問題你就有答案了。

3、演示越短小精悍越好

設計師必知的20個幻燈片實用設計技巧

如果你的幻燈片準備得過長,那么最好大概每20分鐘就需要中斷,適當休息一下,或者調(diào)整演示內(nèi)容的媒體形態(tài),讓你的聽眾可以借此修整,并重新集中注意力。

4、講故事有助于保持觀眾注意力

設計師必知的20個幻燈片實用設計技巧

講故事能夠更好地同用戶建立聯(lián)系,保持用戶的參與感,集中注意力。如果用戶無法集中注意力,那么你的展示和設計做得再好都沒有用。你可以參考一些常見的、有效的敘事框架,拿捏好關(guān)鍵的因素:

關(guān)鍵角色:客戶、用戶、組織、團隊等;
核心問題:挑戰(zhàn)、痛點、風險等;
框架指南:產(chǎn)品、公司、服務等;
完整歷程:解決問題的愿景、具體執(zhí)行計劃等;
抵達成功:光明的未來、最終的成就等;

5、目前人類注意力時長為8秒

設計師必知的20個幻燈片實用設計技巧

這意味著,如果你的幻燈片當中的內(nèi)容,下面的觀看者無法在 8 秒內(nèi)消化,那么它可能就失去效果,并且用戶會快速分心。

6、減少文本,增加視覺效果

設計師必知的20個幻燈片實用設計技巧

幻燈片要簡短,不要讓它像書本一樣堆滿信息,你應該提供最快速有效的簡短展示,減少文字,增加輔助的視覺效果,幫助用戶集中注意力。

7、構(gòu)建文本層級

設計師必知的20個幻燈片實用設計技巧

如果你的文本內(nèi)容無法進一步增減,那么你需要做的就是梳理出它的層級關(guān)系,讓字體的層級來輔助觀看者更快 Get 到其中的信息。我們習慣于快速掃視,而不是逐字閱讀。

8、確保文本的可讀性

設計師必知的20個幻燈片實用設計技巧

凸顯重要內(nèi)容,控制好字號大小,排版結(jié)構(gòu),讓觀看者能夠清晰閱讀內(nèi)容。過于鮮艷的色彩會產(chǎn)生視覺頻閃,對比度過低會讓可讀性極差。

9、始終記住哪些信息是要分享出來

設計師必知的20個幻燈片實用設計技巧

在實際的展示的過程中,展示者在電腦上看到的,和最終在大屏幕上演示的內(nèi)容是不一樣。演示給下面觀眾的內(nèi)容一定要簡約直觀,而更多的輔助信息只需要顯示在展示者自己的電腦上,作為提示即可。

10、突出重點

設計師必知的20個幻燈片實用設計技巧

提取最重要的信息點,使用更大的展示性的字體來呈現(xiàn),這是有助于讓這些信息脫穎而出的,而不是簡單地、沒有篩選地鋪陳出來。

11、善用信息圖

設計師必知的20個幻燈片實用設計技巧

信息圖和簡單的數(shù)據(jù)展示有著極大的差別,信息圖所展示的信息更易于被觀看者理解和吸收,使用信息圖還能讓整個展示過程更加視覺化、富有創(chuàng)意。

12、不要糾結(jié)于幻燈片的數(shù)量

我經(jīng)常會聽到這樣的要求:「這套幻燈片只能有7個頁面,同時我們不能刪除任何內(nèi)容。」

千萬不要將內(nèi)容塞到固定數(shù)量的幻燈片當中,那是沒有任何意義的。一套用來演示的幻燈片的數(shù)量應該是可以增刪的,它們的數(shù)量取決于你所要展示內(nèi)容的多少,以及呈現(xiàn)的方式。對于絕大多數(shù)的展示和演講而言,20~30 張幻燈片是一個合理的數(shù)量。

13、將留白空間翻三倍

設計師必知的20個幻燈片實用設計技巧

留白是制作幻燈片時最容易被忽略的元素,通常而言,我在修改幻燈片的時候,將留白的空間放大三倍,視覺上的呼吸感就正正好好。

14、避免使用不自然的照片

設計師必知的20個幻燈片實用設計技巧

好的圖片素材,通常會有著相對充沛的感情和自然的敘事。在你的幻燈片當中,需要采用更加富有真實感的照片,以營造真實的敘事感。不幸的是,這種設計知易行難,絕大多數(shù)的圖庫所提供的照片都缺乏這種應有的真實感。當然, Unsplash.com 所提供的照片,相對而言會好一些,而且是免費的。

15、使用一致且妥帖的樣式

設計師必知的20個幻燈片實用設計技巧

影響幻燈片視覺樣式的因素有很多,主題、受眾、品牌等等等等,都會有影響。但是不論情況如何,你都應該讓整個幻燈片所采用的字體、圖標、配色、插畫的樣式始終保持一致。其中,最常用的方法是定義整個幻燈片的模板,來協(xié)助你保持一致性。

16、控制節(jié)奏感

設計師必知的20個幻燈片實用設計技巧

不要把幻燈片用信息全部填滿,可以在其中插入一些可以幫助觀看者「中場休息」的幻燈片,它可以起到過渡作用,也可以幫助觀看者不用一直緊繃著情緒。

17、使用轉(zhuǎn)場動效和動畫

轉(zhuǎn)場動效和動畫可能會成就你的整場演示,也可能讓它淪為一場災難。我的建議是,盡量讓動畫和動效微妙一點,讓它們緊貼內(nèi)容,對信息提供支撐,而不是喧賓奪主。

18、幫助用了解整個演示的進度

設計師必知的20個幻燈片實用設計技巧

對于較長且復雜的演示,讓觀眾看到進度條,了解整個演示的進程是非常有必要的,當他們感受到演示的進程,就能體會到掌控感和安全感。

19、排練和記錄同樣重要

做好幻燈片之后,一定要自己排練一下整個過程,走一遍之后會讓你對于整個演示過程中,哪里有問題,哪里要改進有更清晰的認知。借助排練來排查問題,迭代展示,非常有必要。

20、將設計思維貫徹到演示文稿中

當然,設計幻燈片和設計 APP、網(wǎng)頁是截然不同的,但是設計思維層面上,這幾個領(lǐng)域確實完全相通的。你可以借用各種設計規(guī)則和方法來將幻燈片設計得更加合理優(yōu)秀。

文章來源:優(yōu)設    作者:Taras Bakusevych

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

如何做好Banner設計?

資深UI設計者

「空間陳列法」是說先構(gòu)建一個空間,然后將主體元素用合適的形式陳列出來。

這是隨著手機興起而真正流行起來的一招,因為PC時代都是寬大的橫屏設計,適合展現(xiàn)視野開闊的大場面,像大漠、海邊等等,而「空間陳列」作為小場景,在PC端就顯得不大氣,因此使用較少;而手機端卻剛好相反,瘦長豎屏就適合表現(xiàn)長焦特寫的小場景,像微距下的花鳥魚蟲等等,這時「空間陳列」就用的恰到好處。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

如圖所示,同樣的產(chǎn)品展示圖,在PC端就顯得單薄,版面空缺,整體不飽滿;而在手機端則用的剛剛好,確實這種長焦特寫、微距放大的陳列小場景就是手機屏的最愛,所以在手機時代,空間陳列圖才會呈現(xiàn)井噴式增長。

其實合成、三維和攝影都可以實現(xiàn)「空間陳列」,但本書還是以合成為主,而合成的難點就在于如何將產(chǎn)品和空間進行自然融合,不能有違和感。

若想合的天衣無縫,第一步就是要做到「透視準確」,而透視作為構(gòu)圖中的重要知識點,可以說是無處不在,在前面的章節(jié)里也多次提及。我們只有掌握透視的變化規(guī)律,才能準確表現(xiàn)出元素的空間關(guān)系,如果透視不對,那空間將會失真,下面就來詳細講講這個理性知識點——透視。

焦點透視

日常生活中,當我們看周圍事物時,會有遠近、高低、長短、寬窄等不同,這是由于距離、方位等差異在視覺中呈現(xiàn)的不同反映,這種現(xiàn)象就是透視。透視學的出現(xiàn)可以幫我們非??茖W的表現(xiàn)各種空間感和立體感,它廣泛用于繪畫、建筑、環(huán)藝、設計等諸多領(lǐng)域,而常見的透視共3類:空氣透視、散點透視和焦點透視,這3類的側(cè)重點各有不同。

空氣透視又稱「色彩透視」,由于空氣介質(zhì)的存在(雨、雪、霧、煙等),使人們看到近處景物比遠處的輪廓更清晰、色彩更飽滿的視覺現(xiàn)象,例如下方海報中的「煙雨蒙蒙」,這種近實遠虛感就是典型的空氣透視,隨著鏡頭拉遠,山川也變得越來越模糊。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

散點透視則是中國畫特有的一種透視類型,例如下方的《清明上河圖》就是這類透視的代表作,在這五米長的畫卷中,很難找出畫家的具體觀察位置,好似在移動中作畫,每到一處畫一部分,最后拼接起來,這種視點不斷移動的畫法就是散點透視,散點透視適合表現(xiàn)景色的波瀾壯闊,重在寫意,體現(xiàn)一種氣勢和意境。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

而焦點透視才是本文重點,它是透視學中的核心理論,也是西方繪畫所遵循的透視原則,最早研究透視就是從這里開始,如果散點透視是「寫意」,那焦點透視則「寫實」,一切都以客觀還原為準。

例如名畫《最后的晚餐》,所有視線都匯聚一點(稱為滅點),營造出一種立體空間感,這些就像自己身處畫面中央所看到的逼真景象。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

而我們在設計中常說的透視也都指「焦點透視」,這是我們需要掌握的重中之重。記得高中學習素描時,老師就說畫靜物要「近大遠小」,其實就是對焦點透視最為形象的描述,例如草地上的奶牛,離我們越近就越大,越遠則越小,正是這種近大遠小的透視變化才使場景有了空間和層次。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

觀察視角

在介紹焦點透視前,我們先說說透視中一個很重要的影響因素——觀察視角。視角即指人眼(稱為視點)在觀察事物時視線之間所形成的角度。

如下圖所示,其實就是人眼觀看角度的變化,常見有3種:當我們平視前方時就是「平視視角」;仰頭看時則是「仰視視角」;低頭看時便是「俯視視角」。

其中平視時人眼和物體形成的假想連線稱為「水平視線」,這是判斷視角高低的參考線。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

當我們將產(chǎn)品放入空間時,就要根據(jù)陳列形式選擇合適視角,從下方的示意圖中能看到,三種視角給人的感受都不相同:

  • 平視有種方方正正感,給人一種非常自然的觀察感受,雖然中規(guī)中矩但視覺舒服;
  • 仰視則能體現(xiàn)產(chǎn)品的高大和氣勢,用來烘托價值感;
  • 而俯視最接近我們?nèi)粘?醋烂嫘∥锲返囊暯?,很真實也很親切,同時還凸顯了產(chǎn)品的立體感。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

而上圖的仰視和俯視都屬于小視角,即產(chǎn)品視線和水平視線的夾角較小,這是設計中的常見視角,大概就是把頭微微抬起或低下時看到的場景,這時畫面最自然也最舒服。反之若視角過大,即頭抬的很高或壓的很低時,這時產(chǎn)品的形變就很夸張,顯得刻意、不舒服。

說完3種視角,現(xiàn)在正式講解焦點透視,一般根據(jù)物體滅點的數(shù)量不同,焦點透視又分3種:平行透視(一點透視)、成角透視(兩點透視)和斜角透視(三點透視),它們都有各自的透視效果和適用范圍,但若鋪開講會很復雜,因此下面就結(jié)合「空間陳列」進行介紹。

1. 平行透視

用立方體簡單說明,就是有一面與畫面平行,這時物體的厚度邊線若向內(nèi)延伸,最后都會匯聚到1個點上,因此又稱「一點透視」。這是最簡單也最易掌握的一種透視形式,其中匯聚點稱為「滅點」,而滅點所在的那條線則是「視平線」,即與人眼等高的一條水平線。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

再來看看平行透視在生活中的場景呈現(xiàn),如圖所示,將各種景物進行前后連線并延伸,最后都是匯到一點才消失。平行透視適合表現(xiàn)場景縱深,給人一種正式感和平和感。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

電商中的產(chǎn)品展示也一樣,例如下方示意圖中,不管哪種視角,產(chǎn)品和立方體都是正對觀眾,讓人覺得擺放角度正正好。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

總體來說平行透視只有1個滅點,變化并不多,視覺表現(xiàn)單一,沒有太多的空間變化,基本就是從正面來表現(xiàn)整個場景,因此上手簡單,只要確保前后連線都匯聚一點即可,這樣畫面各元素也會顯得整齊。但有時這種正視會讓畫面缺少層次感,顯得很平,此時可嘗試俯視視角或者強化背景的空間縱深。

下面展示平行透視在3種視角下的應用案例,注意觀察不同視角下的產(chǎn)品呈現(xiàn)和透視變化,雖然微妙,但每種視角確實給人不一樣的視覺感受。

平行平視

當畫面為平行透視和平視視角時,這時的觀察位置很正。如下圖所示,空間和產(chǎn)品都顯得有些平整,雖然場景的立體感較弱,但視覺舒服協(xié)調(diào),表現(xiàn)起來也相對簡單。注意平視的「視平線」基本位于主體元素的中心處,即是說人眼此時正對前方物體的中心,這樣才會有平視效果。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

平行仰視

當畫面為仰視時,一般視角都不會太大,微微仰視即可,這樣視覺才舒服。如下圖所示,其實和平視比起來,小角度仰視的透視變化并不明顯,沒有夸張形變,但依然能體現(xiàn)空間和產(chǎn)品的高大。此時「視平線」位于主體中心靠下的位置,這時人眼明顯是從下往上看。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

平行俯視

如果覺得畫面的層次感和立體感不夠,那就嘗試下俯視視角,如下圖所示,由于俯視時我們能同時看到物體的頂面和正面,這樣就能表現(xiàn)物體的厚度,立體感也明顯增強。而畫面的「視平線」則位于主體中心靠上的位置,這時人眼就是從上往下看,但同樣屬于小角度俯視。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

2. 正俯視

平行透視的俯視還有一種特殊情形——正俯視,即視角為90°的俯視,這時我們是從物體的正上方低頭往下看,如下圖所示,當產(chǎn)品平放桌面時,正俯視能清晰看到產(chǎn)品的全貌。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

在空間陳列中這是一種常見視角,上手簡單,展現(xiàn)清晰。例如下方案例中,俯視下的產(chǎn)品擺放非常靈活,根據(jù)構(gòu)圖需求可以工整 ① 也可以隨意 ② ,并且產(chǎn)品多以正面展現(xiàn)為主,整體直觀、舒服。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

以上都是產(chǎn)品的陳列案例,其實正俯視有時也會用于場景呈現(xiàn)中,如下圖所示,視點位于場景的正上方,有點類似無人機的俯瞰拍攝,這種看似「刁鉆」的視角能給畫面帶來獨特的戲劇效果,令人印象深刻。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

空間平行透視

除了3種視角,這里還要介紹一種平行透視的常見形式——空間平行透視,這種形式即畫面的正前方有個類似方盒的縱深空間,而人物或產(chǎn)品就放置在空間里。

如圖所示,該形式也有視角的3種變化,但為了確保視覺的自然舒服,仰視和俯視也都是小角度的上下擺動,所以產(chǎn)品的透視變化并不明顯,場景呈現(xiàn)也沒有很夸張。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

為何要將該形式單獨列出?因為它非常適合手機端的豎屏構(gòu)圖。

手機不像PC,無法通過寬屏來表現(xiàn)視野開闊的大場面,手機屏更適合長焦特寫的小場景,但這樣有時就會顯得左右擁擠不透氣,這時「空間平行透視」就剛好取長補短,通過「深度」刻畫將狹窄空間的縱深感體現(xiàn)出來,最終使觀者視線在前后維度上有了延伸和舒展。

該形式正是利用平行透視的縱深性,才緩解了手機屏的擁擠感。下面分視角列舉案例,要注意不管平視、仰視還是俯視,空間里的所有元素最后都要匯聚一點,這樣透視才合理,縱深效果也最好。

3. 空間平視

3種視角中,空間平視最常見,因為這種方方正正的空間展示最適合手機的豎屏構(gòu)圖,看著最舒服,上手也簡單,易于搭建。在平視下,由于沒有視角的高低變化,空間基本位于人眼的正前方,無任何偏移,擺放角度非常正,構(gòu)圖給人一種穩(wěn)定感,元素也沒有夸張形變,組合方便,真實自然。

對于「空間平行透視」,「深度」刻畫很關(guān)鍵,我們要根據(jù)版面構(gòu)圖選擇合適的深淺。例如下方案例中:① ② 的深度淺,空間相對封閉,適合展現(xiàn)小空間,給人溫馨感和趣味性;而 ③ 的深度深,空間開闊,適合展現(xiàn)大空間,這樣能讓視線更舒展,畫面更透氣。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

4. 空間仰視

在仰視下,我們是抬頭向上看,這時空間顯得高大,給人強烈的氣勢感。如下圖所示,視平線貼近地面,像是我們蹲著向上看,這種仰望視角,建筑和人物都很高大,再加上強烈的縱深感,雖然空間左右依然狹窄,但上下和前后維度卻變的非常開闊,畫面通透。

空間仰視能渲染氛圍,提升場景的戲劇效果,突出視覺沖擊力,但要注意仰視視角不能太大,否則夸張的仰視效果反而給人一種壓抑感。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

5. 空間俯視

在俯視下,視平線處于空間中心的上方,類似我們站在高處往下看,如下圖所示,這時空間顯得立體,遠近的各類元素也能得到清晰展現(xiàn),層次分明。

俯視適合展現(xiàn)空間的全局觀,也讓各物體有著豐富的體積感。除非有特殊的構(gòu)圖需求,不然和仰視一樣,俯視視角不能過大,否則俯視就變成俯瞰,會產(chǎn)生遙遠的距離感,空間也壓縮的厲害,進而導致形變和失真。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

成角透視

還是拿立方體舉例,就是物體與畫面形成一定夾角,這時物體的所有邊線分別向各自方向進行延伸,最后會在視平線上形成一左一右2個滅點,因此又稱「兩點透視」。這類透視最接近我們?nèi)粘5挠^察角度,即是說大部分時候,我們看到的物體都屬于成角透視。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

雖然成角透視只比平行透視多了1個滅點,但2個滅點的位置卻很靈活,這樣空間的透視變化也更加豐富。

例如下方是我們經(jīng)??吹降木跋?,雖然都是典型的成角透視,但 ① 是2個滅點都在畫面外,這時建筑給人的感覺結(jié)構(gòu)平穩(wěn),立體感強,側(cè)重寫實;而 ② 則是1個滅點在畫面內(nèi),另1個在畫面外,這時空間右側(cè)的透視形變較大,產(chǎn)生縱深感,整個場景更有張力和沖擊。

其實還有第3種情形是2個滅點都在畫面內(nèi),但由于空間會產(chǎn)生夸張形變和失真,因此總體少見,不再舉例說明。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

再看看成角透視下的產(chǎn)品展示效果,如下圖所示,不同于單面展示為主的平行透視,成角透視則以展示物體的兩面為主,這樣立體感更強,構(gòu)圖也更穩(wěn)定。注意在成角透視中,畫面所有的豎向邊線都是平行,不會產(chǎn)生滅點。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

相比平行透視,成角透視在表現(xiàn)上更復雜一些,一般都以2滅點在畫面外的情形為主,這時透視最舒服。注意要想畫面只產(chǎn)生2個滅點,那當中的所有元素都需排列整齊,這也是成角透視的常用做法,此時畫面會顯得整齊統(tǒng)一。下面列舉3種視角下的電商案例,其中以仰視和俯視最為常見。

1. 成角平視

平視下的成角透視相對少見,因為使用成角透視就是為了凸顯物體的立體感,但平視由于視角很正,恰恰就會顯得立體感較弱,這時2種效果會有矛盾,影響場景的協(xié)調(diào)性。例如下方的2個案例中,產(chǎn)品看著就有些平整,和方形盒子以及立方體稍顯沖突,但整體視覺真實平和,沒有形變。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

2. 成角仰視

仰視下的成角透視就顯得剛剛好,如下圖所示,所有元素均用2個立面展示,加上透視形變,這時空間的立體感強,產(chǎn)品和立方體也都有明顯的體積感,視覺平穩(wěn)、飽滿,而且還能體現(xiàn)產(chǎn)品形象的高大,凸顯價值感。

注意2個案例中,視平線上都只有2個滅點,這是因為產(chǎn)品和立方體的排列都很整齊,反之若無序排列,就會產(chǎn)生多個滅點,這樣畫面會顯凌亂,視覺不舒服,所以在表現(xiàn)成角透視時,盡量確保所有元素都能整齊排列。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

3. 成角俯視

在成角透視中,俯視視角最常見。因為該視角下的物體可以展現(xiàn)3個面,能進一步強化元素的立體感和方位感,如圖所示,物體的空間關(guān)系明顯,層次分明,構(gòu)圖也平穩(wěn)。

一般成角俯視適合小場景陳列(若是大場景則垂直方向會發(fā)生嚴重形變,這就是后面要講的「斜角透視」),剛好這是手機屏的擅長,小空間配上小角度俯視會給人一種親切感,類似長焦鏡頭的特寫畫面,很好的拉近了觀者的心理距離,因此屬于手機端的常用構(gòu)圖。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

空間成角透視

成角透視的優(yōu)勢在于畫面立體、穩(wěn)定和寫實,這些優(yōu)勢剛好適合空間的立體呈現(xiàn),如下圖所示,成角透視即可用于室內(nèi)塑造 ① 也可用于外形搭建 ② ,類似我們站在空間側(cè)面看整體,此時空間立體、飽滿,結(jié)構(gòu)有張力。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

但由于成角透視都是在畫面兩端形成滅點,所以該透視下的空間更適合橫構(gòu)圖,但手機屏卻是豎構(gòu)圖,對于橫向擁擠的豎長屏,成角透視就會有些施展不開,左右狹窄,無法像橫版那樣開闊的展現(xiàn)空間,也沒有平行透視那樣看著規(guī)整,因此使用較少。

斜角透視

物體與畫面存在一定夾角,并且在2點透視的基礎(chǔ)上,再加入了高度變化,這樣垂直方向的連線會向上或者向下匯聚,最終畫面形成3個滅點,又稱「三點透視」。相比成角透視,斜角透視其實就是讓本沒有交集的豎線有了交集,這樣垂直方向就有了強烈的匯聚感。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

斜角透視的形變夸張,常用于大型物體的仰視或高處俯瞰,類似廣角拍攝。

如下圖所示,該透視能表現(xiàn)出建筑或空間的宏大感,并且越宏大透視就越強烈。這時畫面的夸張構(gòu)圖會顯得觀者渺小,給人一種壓迫感,也讓場景有著極強沖擊力,同時帶來了更加刺激的視覺感受。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

其實只要觀者在場景中顯得很小,這時看到的畫面就會產(chǎn)生斜角透視,例如當我們仰望高樓時,相對高樓而言,渺小的我們就會看到斜角透視。

但如果產(chǎn)品展示采用斜角透視時,就會有一種強烈的不真實感,因為相對產(chǎn)品來說,我們并不渺小,所以日常是不會看到這樣的場景,這種場景更像是「昆蟲視角」,如圖所示,斜角透視下,雖然畫面不真實,但會有種特別的戲劇效果。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

另外斜角透視沒有平視視角,因為平視物體的豎向邊線依然平行,不會在垂直方向產(chǎn)生第3個滅點,因此仍屬于成角透視??傊挥性诖蠼嵌妊鲆暬蚋┮暣笮臀矬w時,才會看到斜角透視。

這種形變強烈的夸張透視雖然生活中相對少見,但電商中用的還真不少。還記得我們在第2章講創(chuàng)意方法時提過的「獨特視角」嗎?其中一個方向就是使用斜角透視。

這種透視可以體現(xiàn)物體的巨大(仰視)或者場景的宏大(俯視),正是這樣一種不真實也不自然的視覺感受,反倒給人一種強烈的氣勢和沖擊,畫面極具張力的構(gòu)圖往往能脫穎而出,并在第一時間抓人眼球,吸引注意,所以成角透視特別適合大促主題的場景搭建和氛圍營造,下面分視角舉例。

斜角仰視

視能讓物體顯得高大,而斜角仰視則讓物體顯得「巨大」。如圖所示,2個案例中的產(chǎn)品都十分「巨大」,通過這樣一種「刁鉆」視角和夸張手法渲染出了產(chǎn)品氣勢,使產(chǎn)品顯得分量十足,同時也提升了視覺沖擊力,整個場景都變的大氣。其中 ① 由于版面有限,有個滅點沒有標示出來。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

斜角俯視

當我們站在一個很高的地方俯瞰周圍,或者用無人機在高空航拍,這時看到的景象就是斜角俯視。如圖所示,盡管豎構(gòu)圖并不適合展現(xiàn)遼闊的大場面,但在斜角俯視的幫助下,2個案例依然體現(xiàn)了場景的宏大,視覺沖擊強,這種居高臨下感使人視野開闊。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

平行斜角透視

斜角透視中還有一種特殊情形——平行斜角透視,就是當空間或產(chǎn)品的一面與畫面平行時,此時不管透視多強烈,畫面也只有2個滅點。

如圖所示,當立方體的一面正對視點時,側(cè)面便從2個主立面減為了1個,這時除了垂直方向的1個滅點外,原本視平線上的2個也就成了1個,雖然只剩2滅點,但本質(zhì)仍屬于透視強烈的斜角透視。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

既然是與畫面平行,那和平行透視有何區(qū)別?

下面看張空間對比圖,能看到2者的形變差異還是相當大:左圖為平行透視,像是我們在看一個小方盒,親切、自然、真實;而右圖則是平行斜角透視,更像是我們在仰望一個巨大空間的入口,充滿戲劇性,并有壓迫感。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

其實對于手機端,「平行斜角透視」才是斜角透視中的常用形式,因為它的擺放角度很正,這種正面觀察很適合手機端的豎屏構(gòu)圖,而且前后的縱深刻畫也能緩解版面的左右擁擠,另外畫面縱向的匯聚感還能迅速吸引注意,給人一種巨大沖擊力和強烈氛圍感,其中仰視比俯視更加常見。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

平行斜角仰視

近幾年這類透視越來越多見,因為它既適合豎構(gòu)圖,也能提升畫面的形式感和表現(xiàn)力,非常利于促銷主題的氛圍打造。

如圖所示,整個畫面就像是我們站在宏大場景的正中央仰望時看到的景象,各元素擺放很正,雖有壓迫感,但空間和產(chǎn)品都顯得非常高大,張力十足,能讓用戶牢牢聚焦,同時也產(chǎn)生了強烈沖擊力,更易在用戶腦海中形成記憶。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

平行斜角俯視

在這類透視下我們會感覺自己擁有高高在上的「上帝視角」,元素擺放同樣很正,視野遼闊,場景宏大。但過大的俯視視角會對場景進行一定壓縮,再加上俯瞰產(chǎn)生的遙遠距離感,這樣就顯得元素有些「小氣」,無法體現(xiàn)仰視下的高大,因此畫面的刺激感沒那么強烈,總體相對少見。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

3. 小結(jié)

以上便是焦點透視的3種類型,我們再來回顧下各自的使用情形,如下圖所示,這是一張3種透視的轉(zhuǎn)換示意圖,都是仰視視角,旁邊小人則是觀察者的大小示意:

  • 當立方體的一面正對觀察者時,就是「平行透視」,這時除了物體厚度的邊線會匯聚1點,其余邊線均無交集;
  • 而當立方體旋轉(zhuǎn)一個角度,任何一面都不正對觀察者時,就是「成角透視」,這時橫向邊線會向各自方向匯聚成2點,豎向邊線則無交集;
  • 此時若將立方體變的巨大,大到需要仰望,就是「斜角透視」,這時在2點基礎(chǔ)上,本無交集的豎向邊線將匯成1個新點。

希望通過這張示意圖能幫大家更好理解什么時候該用哪種透視,總之小場景搭建一般以「平行透視」和「成角透視」為主,而恢弘的大場景則以「斜角透視」為主。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

當然現(xiàn)實里的透視遠不會這么單一,根據(jù)物體不同的擺放位置以及不同的觀測距離,很多時候同一畫面也會存在多種透視,例如平行透視和成角透視就經(jīng)常組合出現(xiàn)。

電商設計也一樣,例如下方案例中,整個空間是平行透視,而里面的盒子則是成角透視,這時視平線上會有3個滅點,其實若產(chǎn)品的擺放再凌亂些,還會出現(xiàn)更多滅點,但這種無序組合會讓空間塑造變的復雜,看著也不規(guī)整,因此并不推薦。

但要注意不管畫面的透視多復雜,當中的視平線卻只能有1條,并且無論水平方向有多少個滅點,最后也都會落在視平線上。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

除了以上3種透視外,其實還有4點透視(超廣角透視)、5點透視(魚眼透視)等等,但都過于復雜,用的也很少,這里就不做展開。對于電商里的「空間陳列」,3種透視已夠用,它是我們塑造空間的基礎(chǔ),如果一開始的透視錯了,即便配色、光影做的再出彩那也無用。

總有人說透視難掌握,其實只要我們在生活中多觀察、多留意身邊物體的透視變化和規(guī)律,及時總結(jié),那這種理性還原就不難做到。當然設計終歸還是理性與感性的雙重表達,所以透視雖要遵循,但切忌生搬硬套,視覺協(xié)調(diào)即可。

講完了焦點透視,我們知道了空間塑造的基本原則,下面就來說說都有哪些陳列場景。

陳列場景

相對PC來說,手機端受屏幕所限,陳列場景其實沒那么復雜,核心是要先構(gòu)建一個空間,然后讓產(chǎn)品以合適的視角及透視在空間里呈現(xiàn)出來,而這個空間場景則要和主題氛圍、產(chǎn)品氣質(zhì)都高度匹配。

一般來說,手機端常用的陳列場景有4類:盒子陳列、臺面陳列、自然陳列以及舞臺陳列,選擇哪類則要看哪個場景對產(chǎn)品的烘托效果最好。

1. 產(chǎn)品組合

在介紹每個場景前,我先說說關(guān)于產(chǎn)品組合的2原則,因為很多時候在空間擺放的產(chǎn)品數(shù)量較多,這時它們的組合形式就變的尤其重要,稍不注意就會顯得畫面雜亂無章,不夠協(xié)調(diào),而且凌亂的擺放也會降低產(chǎn)品的品質(zhì)感,缺少吸引力。關(guān)于組合原則,核心有2點:大小合理以及三角構(gòu)圖。

大小合理

如果將多個產(chǎn)品擺一起,則要確保它們之間的相對大小符合現(xiàn)實中的真實差異,現(xiàn)實中尺寸大的產(chǎn)品就要相對大些,而尺寸小的產(chǎn)品就要相對小一點,這樣才會真實并經(jīng)得起推敲。

而有些設計師在組合產(chǎn)品時,也不管大小的真實差異,放進版面后就很隨意的放大或縮小,最后出來的組合要不就大小一樣,要不就比例失真,這些都會給用戶一種強烈的不協(xié)調(diào)感和不真實感。

下面再看一組對比圖,明顯大小一樣的左圖會有不適感,也缺少層次;而大小合理的右圖則更有美感也更舒服。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

其實大小合理的最終目的是希望整體結(jié)構(gòu)錯落有致,就像右圖一樣,這種有高有低的組合才能體現(xiàn)韻律感和結(jié)構(gòu)美。所以如果可以選擇,那我們就選擇一些尺寸差異較大的產(chǎn)品,盡量避免出現(xiàn)大小差不多的情況。

當然如果必須陳列大小一樣的產(chǎn)品,那也可以通過透視或者輔助元素來改善,例如空間里的近大遠小、立方體加高都能改變高度一樣的情形。

三角構(gòu)圖

當我們選好不同大小的產(chǎn)品后,就要注意它們的組合形式,千萬不能亂堆一氣,不同的擺放會形成不同結(jié)構(gòu),而每種結(jié)構(gòu)又會給人不同感受。我們在「圖形分割」中講過「正三角」具有很強的穩(wěn)定性,因此當產(chǎn)品采用正三角構(gòu)圖時,會讓人覺得版面平穩(wěn)、視覺舒服。

如圖所示,所謂三角構(gòu)圖,其實就是將尺寸大的產(chǎn)品放中間,而尺寸小的產(chǎn)品放兩邊,這樣不但構(gòu)圖穩(wěn)定,而且畫面也有節(jié)奏和變化??梢哉f「三角構(gòu)圖」就是空間陳列里最常用的構(gòu)圖方式,而本節(jié)展示的所有案例中,大部分也都是三角構(gòu)圖。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

明確了產(chǎn)品的組合原則,知道了如何陳列才舒服,下面就正式講講空間陳列的4類場景。

2. 場景

盒子陳列

「盒子陳列」就是在盒子里面放產(chǎn)品,而盒子多以禮盒為主,使用場景和主題相對單一,基本用于送禮之意的專題頁。創(chuàng)意雖然普通,但卻不易出錯,是種相對安全的表現(xiàn)方式。當然若能在盒里加些小心思,畫面也會很出彩,像我之前看過一個新年Banner,就是禮盒里裝著一個大家庭在吃年夜飯的溫馨場景,這樣的新組合便讓人眼前一亮。

另外若能提升禮盒刻畫的精致度,那畫面也會有不錯的設計感。而盒子外形也不只有方形,常用的還有圓形和異形。觀察視角則以小角度俯視居多,因為這個視角最接近我們?nèi)粘?炊Y盒的真實情形,盒內(nèi)產(chǎn)品在俯視下能看的一清二楚,展現(xiàn)也立體。

盒子陳列的難點在于當盒內(nèi)要擺放很多產(chǎn)品時,如何能讓產(chǎn)品真實、自然的呈現(xiàn),這需要我們既注意擺放的合理性,也能準確表現(xiàn)透視,還要刻畫出產(chǎn)品的明暗變化,總之只有把握好產(chǎn)品的空間感、立體感以及光影感,畫面才會舒服協(xié)調(diào)。

方形盒是最常用的盒子類型,畢竟也是生活中最常用的禮盒外形,結(jié)構(gòu)感強而且易表現(xiàn)。如下圖所示,禮盒都是成角透視,且左右滅點都在畫面之外,這樣結(jié)構(gòu)最穩(wěn)定,立體感也強。注意盒里的產(chǎn)品呈現(xiàn),特別是俯視視角下,產(chǎn)品越多越要注意它們是否協(xié)調(diào)統(tǒng)一,透視、光影等細節(jié)一個都不能少,把控不到位就會顯得凌亂,畫面別扭。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

圓形盒比較少見,因為和立方體比起來,圓柱體的透視沒那么強烈,結(jié)構(gòu)感偏弱,但圓潤的外形能使畫面變的柔和,給人一種親和力和溫馨感,如圖所示,由于圓形盒沒有明顯塊面,所以不管透視還是光影,刻畫起來都相對簡單。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

異形盒是指外形為不規(guī)則形狀的盒子,總體也很少見,但易出彩。形狀用的好便能打破「盒子陳列」的常規(guī)感,使畫面變的新穎有創(chuàng)意。

例如下方案例中,不管是心形、貓頭輪廓還是圣誕樹,都能成為畫面焦點并引人注意。另外盒子呈現(xiàn)均用了「正俯視」視角,其實除了小角度俯視外,這種視角也很常見,因為該視角下的產(chǎn)品陳列清晰完整,盒子外形也能直觀顯示,的展現(xiàn)了其外形的特別之處。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

臺面陳列

在空間陳列的4類場景中,「臺面陳列」用的最多,適用范圍也最廣,可以說電商中的大部分主題和產(chǎn)品都能使用,算是一種真正白搭的表現(xiàn)方式。

「臺面陳列」就是在空間里搭建一個「臺面」,然后在上面放置相關(guān)產(chǎn)品。由于該手法還是以放大特寫的小場景為主,元素形變不能太大,因此畫面常用平行透視和成角透視,視角則很靈活,跟著構(gòu)圖走,3種(平視、俯視、仰視)都有。「臺面陳列」上手簡單,場景多變,其中的關(guān)鍵元素——臺面需要根據(jù)主題、場景進行靈活變化,常見有2類:桌面和幾何體。

桌面很好理解,就是桌子頂部的陳列面,所有產(chǎn)品都放置其上。由于桌子是家里常見家具之一,因此桌面陳列往往能傳遞一種「家」的溫暖和溫馨。

可能有人覺得「桌面」形式有些單一,其實遠沒那么簡單,我們不要固化思維,要能靈活變化桌子的樣式和裝飾,例如方桌還是圓桌?木桌還是大理石桌?光面還是鋪桌布?這些都是可變量,再加上視角和周圍環(huán)境的變化,總之形式可以很豐富。

如圖所示,桌面陳列尤其適合各類美食的組合呈現(xiàn),這時整個場景貼近生活,頗有帶入感。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

就是將各種幾何形體作為陳列產(chǎn)品的臺面,幾何體相對抽象,表現(xiàn)場景更多元,因此比具象「桌面」更加常用。

如圖所示,幾何體一般都是組合出現(xiàn),特別適合多產(chǎn)品陳列,簡約大方,能烘托出產(chǎn)品的品質(zhì)感。同時通過高高低低的大小排列也能表現(xiàn)出畫面的結(jié)構(gòu)美以及層次感,總之是一種 「上手簡單、易出效果」的表現(xiàn)方式。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

常用幾何體有「立方體」和「圓柱體」,它們適合陳列,高度調(diào)節(jié)方便,使用靈活。

如下圖所示,整體表現(xiàn)并不復雜,就是將各種產(chǎn)品放在幾何體上。但作為畫面的核心元素,這時幾何體的形態(tài)、排列、視角和透視就變的非常重要,我們要根據(jù)創(chuàng)意需求和產(chǎn)品氣質(zhì)選擇最合適的展現(xiàn)方式,而這些展現(xiàn)本身就有不錯的形式感。

幾何體陳列既能營造空間關(guān)系和簡約氣質(zhì),也能讓用戶聚焦產(chǎn)品本身,因為它的外形簡單,不搶產(chǎn)品,不像一些復雜元素或場景,雖然視覺豐富但最后卻讓產(chǎn)品淹沒其中,這樣就本末倒置。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

自然陳列

「自然陳列」需要先創(chuàng)建一個合適的自然環(huán)境,然后再將產(chǎn)品以合適方式融入其中。相對其他場景,自然環(huán)境顯然復雜一些,呈現(xiàn)手法常以「合成」和「插畫」為主。因為產(chǎn)品都是實物拍攝,為了風格統(tǒng)一,自然環(huán)境會偏向?qū)憣嶏L格,這樣2者結(jié)合才協(xié)調(diào)。

從下方案例能看到,「自然陳列」常用于季節(jié)感受或者產(chǎn)地溯源等主題,畫面通過「自然場景」營造出天然健康的綠色氛圍。而場景中的元素繁多,呈現(xiàn)復雜,這就需要我們具備優(yōu)秀的整合能力。

對于「自然」塑造,視角以平視和小角度俯視居多,但畫面由于沒有太多的幾何型物體,所以透視沒那么嚴謹,核心是注意近、中、遠景的層次區(qū)分,還有光影的合理添加。如果這些把控不到位,就很可能出現(xiàn)場景雜亂、缺少層次、沒有帶入感的粗糙畫面,最終淪為各種素材的亂堆一氣。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

以上列舉的都是以花草樹木為主的自然環(huán)境,確實綠色場景在「自然陳列」中用的也是最多,但除了綠色場景外,有時也會用到其他環(huán)境。如下圖所示,像海底 ① 、沙灘 ② 、海面 ③ 、冰山 ④ 也是適合陳列的自然場景,特別是夏季主題會經(jīng)常用到。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

舞臺陳列

最后一類「舞臺陳列」常用于大促主題的氣氛營造,這類場景不挑類目,任何產(chǎn)品放在「舞臺」上,燈光一打,色彩再斑斕些,都能營造出熱鬧的促銷氛圍。

如圖所示,舞臺外形以圓形居多,因為圓形的透視感較弱,構(gòu)圖靈活,而且也符合大家對舞臺的第一印象。舞臺視角則很靈活,3種均很常見,核心是和產(chǎn)品視角保持一致。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

關(guān)于「舞臺」塑造,還有2處需要注意的地方:

舞臺外形除了最常用的「圓形」外,還有半圓形、方形和六邊形等等;舞臺造型也可以很豐富,并不局限于常規(guī)的表演舞臺,各種造型都可嘗試,例如上方左四圖就是現(xiàn)代感十足的三維舞臺,總之我們要根據(jù)創(chuàng)意和風格塑造相匹配的陳列舞臺。

另外就是燈光運用,可以說這是「舞臺陳列」和其他場景的最大區(qū)別,但燈光也不是越多越好,太多反而顯得眼花繚亂,其實能渲染出絢爛氣氛即可。而有光就有影,在燈光照射下,產(chǎn)品一定要有準確的光影呼應,這樣才不會顯得突兀。例如上方案例中,仔細觀察燈光下的產(chǎn)品呈現(xiàn),能看到產(chǎn)品表面都產(chǎn)生了被燈光照射后的色彩、明暗等變化,這些細節(jié)刻畫才讓畫面更真實,融合更自然。

3. 實戰(zhàn)案例

本次案例會用膠原蛋白口服液作主體元素,然后用這4類場景(盒子、臺面、自然、舞臺)來設計4張不同視角、不同風格的Banner,讓大家看看在不同場景下,如何將產(chǎn)品融入其中。先展示案例會用到的3種產(chǎn)品視角, 下方案例會根據(jù)不同的場景視角選擇對應素材。

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

如何做好Banner設計?先掌握這個高手都會的空間陳列法!

總結(jié)

「空間陳列法」的內(nèi)容量挺大,主要分成了「焦點透視」和「陳列場景」2大部分來介紹,其中焦點透視是立體「空間」的塑造基礎(chǔ);而陳列場景則是產(chǎn)品「陳列」的具體環(huán)境。

常用場景有4類:盒子陳列、臺面陳列、自然陳列和舞臺陳列,每種陳列都有各自適用的主題和氛圍:「盒子」常用于溫馨的送禮主題;「臺面」則能根據(jù)不同主題靈活應變,屬于百搭場景;而「自然」則適合季節(jié)或者溯源主題,體現(xiàn)天然清新感;最后的「舞臺」則用于氛圍濃烈的大促主題。不管哪種場景,都要確保產(chǎn)品和空間的視角、透視相一致,這樣場景才會真實協(xié)調(diào)。另外多產(chǎn)品陳列時,還要注意它們之間的大小比例以及擺放結(jié)構(gòu),其中三角結(jié)構(gòu)最常用??傊谑謾C時代,「空間陳列」是一種真正適合小屏豎構(gòu)圖的表現(xiàn)方式。

文章來源:優(yōu)設    作者:賢輩

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務

今天影院復工,帶你看2020電影海報大合集!

資深UI設計者

千呼萬喚始出來,猶戴口罩半遮面

要說上周什么消息最激動人心,那絕對是全國7月20日低風險地區(qū)電影院重開無疑了

今天影院復工,帶你看2020電影海報大合集!

消息一出,蟄伏數(shù)月的電影愛好者們,紛紛傾巢出動在央媽的評論區(qū)里為電影提前打Call。

今天影院復工,帶你看2020電影海報大合集!

各種網(wǎng)絡段子也是應聲齊飛:什么待業(yè)電影院員工急售餐車搶復工;上座率不超30%,情侶們也得分開坐

今天影院復工,帶你看2020電影海報大合集!

想必各位鴨脖聽聞也是激動難耐特別是海報設計師們,終于不用因為沒活兒繼續(xù)挨餓了

趁此機會,先來看看電影海報,一來可解相思之苦,順便排一排雷,還能邊挑邊學設計技巧,三全其美,豈不快哉:

7月上映電影

1. 誤殺

重映時間—7月20日

近年來難得一見的國產(chǎn)劇情好電影,單從海報上就可見一斑。

「看1000部電影」不能助你飛黃騰達,卻能讓你將世人的眼睛玩弄于股掌,既然生活是一部電影,那就沒有什么是不能人為去剪輯的。

今天影院復工,帶你看2020電影海報大合集!

表面上束手就擒的一家人,實則齊心協(xié)力,暗度陳倉。

今天影院復工,帶你看2020電影海報大合集!

如果你認為孩子畫的案發(fā)現(xiàn)場,將成為如山鐵證,那么恭喜你,人都還沒進影院,就已經(jīng)陷入了導演的敘事詭計。

今天影院復工,帶你看2020電影海報大合集!

2. 第一次的離別

上映時間—7月20日

發(fā)生在新疆男孩與母親間的溫情故事,母親患病無法言語,更時常離家出走,兩小無猜的男孩女孩,毅然穿越漫漫黃沙,踏上尋母的道路。

今天影院復工,帶你看2020電影海報大合集!

沙漠中,只要三個人影在孤獨地行走路的盡頭,究竟是與人別離,還是要跟童年別離,或許,二者都是。

今天影院復工,帶你看2020電影海報大合集!

3. 璀璨薪火

上映時間—7月20日

作為非物質(zhì)文化遺產(chǎn)紀錄片的海報一只飽經(jīng)風霜的粗糙的手,談不上精妙創(chuàng)意,甚至頗有些質(zhì)樸。

今天影院復工,帶你看2020電影海報大合集!

但別忘了,正是這一雙雙沉穩(wěn)的手,日復一日,年復一年守護著國人傲立世界的文化的驕傲。

今天影院復工,帶你看2020電影海報大合集!

4. 妙先生

上映時間—7月31日

年度話題大作《大護法》的姊妹篇有關(guān)「善良」的深刻討論,如果每次拯救惡人,都要犧牲好人,那這種所謂的拯救,究竟還值不值。

今天影院復工,帶你看2020電影海報大合集!

溫馨提示,內(nèi)有大漢「聚眾賞菊」是成年人畫給成年人看的動畫片。

今天影院復工,帶你看2020電影海報大合集!

5. 呆瓜兄弟

上映時間—7月31日

從1976年開播的第一集就讓觀眾捧腹大笑的木偶短片。

今天影院復工,帶你看2020電影海報大合集!

40年后重聚的不光是這兩只呆瓜更是熒幕前的觀眾與自己的童年。

今天影院復工,帶你看2020電影海報大合集!

8月至12月上映電影

1. 我想靜靜

上映時間—8月07日

號稱「國內(nèi)首部動物喜劇電影」海報卻疑似「寵物店」素材打底。

今天影院復工,帶你看2020電影海報大合集!

以上動物皆不會出現(xiàn)在電影中怕不光是「首部寵物喜劇」更是「首部魔幻現(xiàn)實主義作品」

今天影院復工,帶你看2020電影海報大合集!

2. 蕎麥瘋長

上映時間—8月25日

神似一年一度感動中國的構(gòu)圖展現(xiàn)著上世紀90年代,三個相互交織串聯(lián)的青年人生。

今天影院復工,帶你看2020電影海報大合集!

在人們熱衷討論00后、05后的當下導演將鏡頭對準70、80,在建的東方明珠,既是時代的挽歌也是對一代青年人美好未來的贊美。

今天影院復工,帶你看2020電影海報大合集!

3. 我在時間盡頭等你

上映時間—8月25日

偶然間獲得的超能力讓男主能夠回到過去,挽救愛情卻被命運捉弄,始終都不得圓滿

今天影院復工,帶你看2020電影海報大合集!

與《時空戀旅人》同樣的科幻題材海報當中,也有十分相似的一場雨,希望如同《流浪地球》,國人能再次拍出不輸經(jīng)典的高水準。

今天影院復工,帶你看2020電影海報大合集!

4. 小婦人

上映時間—8月待定

女性可以柔弱,也可以擁有高傲的頭顱南北戰(zhàn)爭中的四姐妹,在清苦生活中活出了不一樣的堅強人生。

今天影院復工,帶你看2020電影海報大合集!

5. 急先鋒

上映時間—8月待定

角落里熊熊燃燒的美國核動力航母身后高聳入云的迪拜塔,沒有一處不在透露著這是部大制作。

今天影院復工,帶你看2020電影海報大合集!

從沙漠到瀑布,劇情搭不搭且不說至少光是海報就搭了不少真金白銀。

今天影院復工,帶你看2020電影海報大合集!

鄰里美好的一天

上映時間—8月待定

一心想揭露社會陰暗丑惡的新聞記者處處與人為善的老好人,矛盾的二者相遇,會是場何樣的鬧劇。

今天影院復工,帶你看2020電影海報大合集!

上一秒促膝長談,下一秒皮鞋橫飛「鄰里間的美好」或許本身就是偽命題。

今天影院復工,帶你看2020電影海報大合集!

6. 許愿神龍

上映時間—8月待定

上海少年誤打誤撞喚醒沉睡神龍卻發(fā)自己與龍有著上千年的代溝,西式畫風,中式溫情,一人一龍的冒險故事,值得一看。

今天影院復工,帶你看2020電影海報大合集!

7. 無名狂

上映時間—9月25日

一部誕生于摩點眾籌的眾籌電影片名叫《無名狂》,海報卻寫滿了贊助的網(wǎng)友的名字。

今天影院復工,帶你看2020電影海報大合集!

圍繞萬歷年間兩大刺客門派所展開的一場場腥風血雨,平靜海報之下,山呼海嘯,風雨欲來。

今天影院復工,帶你看2020電影海報大合集!

尚未定檔的電影

除此之外,還有不少電影尚未排期,全年隨時可能上映。其中自然也不缺乏優(yōu)秀的海報創(chuàng)意,比如從路人視角,見證抗戰(zhàn)歷史的《八佰》。

今天影院復工,帶你看2020電影海報大合集!

克味十足,容易聯(lián)想到哈利波特系列的《刺殺小說家》

今天影院復工,帶你看2020電影海報大合集!

單靠海報配色就能讓人陷入迷惑的《抵達之謎》

今天影院復工,帶你看2020電影海報大合集!

頗有08年阿迪達斯海報味道的《奪冠》

今天影院復工,帶你看2020電影海報大合集!

今天影院復工,帶你看2020電影海報大合集!

用風卷云涌展現(xiàn)中式諸神之戰(zhàn)的《封神三部曲》

今天影院復工,帶你看2020電影海報大合集!

居然還能拍出第二部的《爵跡2》

今天影院復工,帶你看2020電影海報大合集!

正看是海浪,倒看是山巒的《一直游到海水變藍》

今天影院復工,帶你看2020電影海報大合集!

近看是懸崖,遠看是槍口的《懸崖之上》

今天影院復工,帶你看2020電影海報大合集!

六小齡童老師參與動捕制作今年下半年…可能會上映的《真假美猴王》

今天影院復工,帶你看2020電影海報大合集!

希望別播完片頭就播staff名單的《一秒鐘》

今天影院復工,帶你看2020電影海報大合集!

能把牛頓從棺材里嚇活過來的《神秘訪客》

今天影院復工,帶你看2020電影海報大合集!

進退兩男、男上加男、滿身大漢的《唐人街探案3》

今天影院復工,帶你看2020電影海報大合集!

生死一線間淡定到面帶微笑的《緊急救援》

今天影院復工,帶你看2020電影海報大合集!

以及萬眾期待的封神宇宙大片《姜子牙》

今天影院復工,帶你看2020電影海報大合集!

好了,以上就是2020年將要上映以及可能上映的電影的海報大合集??赐炅诉@些精彩的海報焦急的等待之情是否緩解了一些?

倒也正應了那句老話,只要熬過低谷,后面都是更好的一天。

文章來源:優(yōu)設    作者:你丫才美工

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

資深UI設計者

宋體字可以說是我們現(xiàn)在最常用的字體之一,一方面他與黑體一樣,具有非常良好的可讀性和易辨性,另一方面,他又比黑體更具有歷史感和東方韻味,我們可以看到很多的教材、書籍內(nèi)文或者官方文件,都是用的宋體字,甚至許多設計都會用一些比較有表現(xiàn)力的宋體字作為標題。所以可想而知,學習設計宋體字對我們的幫助有多大。正所謂欲知大道,必先知史。所以在講如何設計宋體字之前,我們先來扒一扒宋體字的歷史吧。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

雖然說宋體字叫做宋體字,但是如果要追溯宋體字的起源,我們還得從唐朝說起。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

唐朝時期,佛教在中國開始盛行開來,唐朝皇帝甚至派出唐僧師徒四人前往西天取經(jīng)。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

于是便出現(xiàn)了「抄經(jīng)生」這種人肉印刷機。這篇經(jīng)文便是當時唐朝的抄經(jīng)生所抄寫的,他們需要使用規(guī)整統(tǒng)一的楷體,文字的開頭在同一水平線,而且每一列的字數(shù)統(tǒng)一規(guī)定為17或者19個字,方便字數(shù)的統(tǒng)計,像這一篇經(jīng)文每一列就是17個字。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

可是即便出現(xiàn)了大量的抄經(jīng)生,依舊滿足不了人們對經(jīng)書的需求。于是聰明的中國人開始印刷經(jīng)書,將經(jīng)文刻在木板上,就可以實現(xiàn)大量的印刷了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

可是楷書刻起來是很不方便的。一方面,書法家寫的楷書講究起承轉(zhuǎn)合、抑揚頓挫,不同的人寫出來的字風格差異十分明顯,例如顏真卿和趙孟頫他們所寫的「宋」字就明顯不同,即便用筆臨摹都很難了,更別說雕刻出來了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

另一方面楷體由于是書寫的字體,所以大多數(shù)筆畫都是帶有弧度的,而在木板上刻字,曲線是非常難刻的。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

于是他們逐漸將曲線刻成直線,把筆畫的弧形特征降低,也將楷體中相同的筆畫進行規(guī)范了,這樣的字體便是宋體字的前身。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們可以看一下宋朝時期的刻本,這是南宋時期陳宅經(jīng)籍鋪所刊刻的《朱慶馀詩集》。這時,撇、捺等筆畫的彎曲程度大大降低了,而豎筆和橫筆也基本上變成筆直的直線了。不過宋朝時期刻本體的橫畫依舊是傾斜的,從中依然能很明顯地看到楷體的痕跡。那么為什么宋體字會形成橫細豎粗,橫畫后帶三角形飾角的字形呢?

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

那是因為刻字的木板上是帶有木紋的,如果垂直木頭的紋理刻的話,筆畫會比較容易斷,需要加粗一些。而如果是順著木紋刻的話,就沒那么容易斷,所以可以相對細一些??墒菫槭裁词菣M畫細,豎畫粗呢?反過來不行嗎。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

那是因為在大多數(shù)的漢字中,橫畫都是比豎畫多的。上海交大的郭曙綸教授對20902個漢字進行了統(tǒng)計,發(fā)現(xiàn)這些漢字的總筆畫數(shù)量多達268479個,而其中橫畫有82682個,占30.8%,而豎畫有51459個,占19.2%。可見,在漢字中橫畫是比豎畫多的。所以如果將橫畫刻粗,豎畫刻細的話,可能會使得字體過擠而不美觀。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

雖然說橫畫順著木紋,比較不容易斷,可是橫畫的兩端還是會比較容易磨損的,所以工匠們一般會將橫畫的兩端稍微刻大一些,形成飾角。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

在明朝,宋體得到了進一步的簡化,原本復雜精細的刀刻技法簡化成了橫、豎和斜三種,所以刻字工匠的門檻大大降低了,宋體字得到了真正的普及。我們同樣來看一下明朝時期的刻本,這是明朝時期汲古閣刻印的《道德指歸論》,這個時候的宋體橫畫已經(jīng)基本變成水平了,雖然筆畫依舊比較張揚,但是已經(jīng)少了許多楷體的影子。所以從明朝時期開始的刻本體才能算作真正的宋體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

也是在明朝時期,宋體字傳到了日本,所以現(xiàn)在日本將宋體字稱為明朝體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

清朝是刻本最多的一個朝代,而宋體字在中國真正被確定統(tǒng)一稱為「宋體字」也是發(fā)生在清朝。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

了解了宋體字的歷史后,我們可以發(fā)現(xiàn)宋體字的意義并非只是美觀和易讀而已,他是經(jīng)過中華民族近千年傳承、優(yōu)化和改良的文化結(jié)晶,他的身上有著厚重的文化氣息。也難怪中國、日本、韓國等受中華文化影響的國家會對宋體有獨特的偏愛。接著我們就正式進入設計宋體字的教程部分,首先我們來了解一下宋體字的主要特征。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

從楷體字轉(zhuǎn)變?yōu)樗误w,主要產(chǎn)生了三個特征,第一個是橫平豎直,也就是說橫畫是水平的,豎畫是垂直的。第二個特征是橫畫比較細,豎畫比較粗。第三個特征是筆畫上出現(xiàn)了三角形的裝飾角。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

可是隨著字體設計的發(fā)展,對于宋體的定義已經(jīng)越來越模糊了。例如上面的這三種字體,雖然他們不完全滿足宋體的特征,可是它們都能算作是宋體。所以我們也不需要對宋體下一個死定義,免得我們在設計字體的時候被定義所束縛住了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

可是仿宋體是不能夠算是宋體字的。我們看仿宋體是不是覺得他和宋朝時期的刻本非常像呢?因為仿宋體是在民國時期,丁善之和丁輔之模仿宋刻本所設計出來的字體,所以仿宋體模仿的是宋朝刻本,而非宋體字,那么仿宋體當然也就不能算在宋體的行列里了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接著我們來分析一下宋體字的氣質(zhì)。由于宋體誕生于明朝,具有非常悠長的歷史,而黑體是在民國時期才產(chǎn)生的,所以宋體相對于黑體更能體現(xiàn)傳統(tǒng)感、文化感的氣質(zhì)屬性。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

所以我們做現(xiàn)代風格的設計的時候,可以使用黑體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而做比較具有傳統(tǒng)風格的設計則可以用宋體。當然也并非說宋體就沒辦法做現(xiàn)代感的設計,通過對宋體體飾和中宮的設計,我們完全可以做出一款現(xiàn)代型的宋體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

先來說一下中宮,我們在之前的教程里說過,中宮越大,越顯現(xiàn)代感,而中宮越小,則越有傳統(tǒng)感。在宋體里也不例外。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們再來看看這兩個「東」字,很明顯也是左邊的「東」字更現(xiàn)代一些,而右邊的「東」字傳統(tǒng)一些。這兩個字的區(qū)別在于體飾的不同。體飾越少越簡潔,宋體就越顯現(xiàn)代;體飾越多越復雜,就越顯傳統(tǒng)。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

另外幾何形的體飾也會給宋體帶來現(xiàn)代感。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而傳統(tǒng)宋體字的體飾則是具有手寫感的,線條比較圓滑。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

根據(jù)體飾和中宮的不同,我們可以大致地將宋體分為三大類。中宮小、體飾多且具有手寫感的宋體歸類為傳統(tǒng)型宋體,中宮大、體飾少且為幾何體飾的則歸類為現(xiàn)代型宋體。而具有一定手寫感的體飾,且中宮偏大的宋體,則歸類為中間型的宋體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

除了中宮和體飾之外,我們還經(jīng)常調(diào)整筆畫粗細去適應宋體字不同的用途。首先我們先來講講正文的宋體。一般正文的字號都是比較小的,如果橫畫過細的話,會使得橫畫幾乎看不見了,而如果橫畫過粗的話,筆畫又會糊在一塊了,所以為了讓宋體字在小字號下也能清晰的顯示,一般橫畫和豎畫的粗細會控制在1:2到1:3左右,最大一般也不會超過1:4。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

不過我們設計正文字體的機會還是比較少的,大多數(shù)時候我們都是需要設計比較具有張力的標題字。這個時候我們就可以嘗試拉大橫畫和豎畫的粗細差距。當橫畫和豎畫的粗細差距非常大的時候,可以產(chǎn)生較強的視覺沖擊力。畫面中這三款標題宋體,都用了細橫畫搭配粗豎畫。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

有時候我們也可以反其道而行之,將橫畫加粗,讓橫畫與豎畫差不多的粗細。這樣我們就可以獲得一款非常醒目的宋體。這樣的宋體有點像比較粗的黑體,既有醒目的特點,也保留了宋體優(yōu)雅的屬性。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

當然,具有張力的標題宋體也并非一定要通過控制橫豎筆畫的粗細來塑造,通過設計一些有張力的體飾,同樣可以讓宋體字變得具有表現(xiàn)力。設計體飾是設計宋體字非常重要的一個環(huán)節(jié),因為宋體字的大多數(shù)筆畫是存在許多體飾的,我們除了要將體飾設計得好看之外,更重要的是讓不同的體飾和諧共存。如果一個宋體字里存在的體飾都風格不一,那么這個宋體字看著就會不倫不類了。下面我就給大家介紹一個我比較常用的,設計宋體字體飾的方法。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

在做字之前,我們要先確定我們想要做的字體的氣質(zhì),是傳統(tǒng)的,還是現(xiàn)代的?文藝的還是可愛的?又或者是其他的氣質(zhì)。因為我們前面也說到,體飾和中宮都會影響字體的氣質(zhì),所以我們必須要確定了氣質(zhì)之后,才能動手去設計字體的中宮和體飾。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

另外還要確定字體的用途,需要比較有張力的標題字體,還是需要具備閱讀舒適性的正文字體,那我們也能確定文字的筆畫粗細。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

確定好了風格之后,我們就可以開始設計筆畫了。那么我們先來回顧一下,漢字里的八個基本筆畫,我們可以先把這八個筆畫的體飾特征都設計好了,再去拼湊我們想要的字。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

一般來說,我們設計宋體會先從橫畫開始設計。因為確定了橫畫之后,體飾的風格、體飾大小、筆畫粗細等很多東西就都可以確定了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

其實宋體中的體飾都是來源于書法中的頓筆,所以我們來看看書法中,橫畫是怎么寫的,書法中的橫在起筆和收筆處分別有一個頓筆。這兩個頓筆分別對應著宋體橫畫首尾的兩處體飾。對于宋體字來說,橫畫末尾的這個體飾是非常重要的,他對整個字體的氣質(zhì)影響非常的大。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們前面已經(jīng)介紹了這兩種襯角分別具有現(xiàn)代感和傳統(tǒng)感。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而這一個的襯角是一個比較圓潤的圓形,他可以用來做比較可愛的宋體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

這一個襯角和剛剛的就正好相反,非常的非常尖銳,適合用來做比較恐怖的宋體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

還有一點要注意的是,如果豎畫越粗的話,橫畫的襯角一般也要相應的變大一些。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

因為宋體的橫畫本來就已經(jīng)很細了,如果襯角還非常小的話,橫畫很容易就會被忽略掉了,橫畫末端的這個三角形起到了一定強調(diào)橫線的作用。當然如果是故意要設計成小襯角或者無襯角的話就另當別論了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

橫畫做好之后,就可以開始設計豎畫了。在書法中,豎畫在起筆處會有一個頓筆,而收筆的地方會稍微往左側(cè)偏一些,這樣分別形成了宋體中豎畫起筆和收筆的兩處體飾。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

那么我們應該怎么用橫畫推導出豎畫呢?橫畫和豎畫關(guān)聯(lián)度最大的地方在橫畫三角形襯角和豎畫上方襯角的這個地方。例如這一組都是直線加切角。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而這組都是曲線加圓角。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

另外我們還能將這兩個地方給聯(lián)系起來,因為他們都是起筆的位置。如果橫畫的起筆是水平的話,那么豎畫的起筆就應該是垂直的。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而如果橫畫的起筆是往外擴的話,那么豎畫的起筆也可以往外擴張。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我一般還會將豎畫的起筆和收筆的的地方關(guān)聯(lián)起來,如果起筆是垂直的,那么收筆我也會設置成垂直的。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而如果起筆往外擴的話,那么收筆我也會往外擴形成書寫曲線,這樣整個豎畫能看起來平衡一些。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接著來設計橫折。書法中在這個轉(zhuǎn)折的地方會有一個頓筆。所以在宋體的橫折處也會形成一個裝飾角。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

其實橫折這個筆畫在設計好橫畫和豎畫之后基本就已經(jīng)出來了。只要將他們組合在一起,然后將橫畫的襯角往回縮小一些,橫折就做好了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

講完了橫折我們順便也講一下這種口字的結(jié)構(gòu)好了。口字結(jié)構(gòu)由剛剛做好的橫折加上一個豎線和一個去掉三角襯角的橫線組成。然后我們需要做一些細微的調(diào)整。豎筆體飾的這個地方需要往上收一些,不要漏出來,這樣的筆畫看著能干凈一些。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

然后豎畫入筆的地方也要往上提一些,讓左右兩邊的體飾能夠平衡。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

最后加上橫畫,把襯角的部分裁去,注意兩個豎線需要出頭一些。這個口字就完成了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

然后來做撇和捺。書法里的撇起筆的地方有一個頓筆,所以宋體里,撇有一處體飾。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

書法里捺則在起筆和收筆處各有一處轉(zhuǎn)折。所以宋體里,捺則有兩處體飾。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

撇基本上可以從豎線輕易地推導出來,因為他們的起筆都是一樣的,只要稍微調(diào)整一下起筆的角度就可以了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而捺與撇是正好相反的,起筆細,收筆粗,所以捺的起筆需要縮小一些,但是需要保證這兩個地方是相同的。而捺的收筆是一個比較獨立的地方,只需要風格保持大致一致就好了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接著來做提。在書法中,提的起筆一般是會有一個頓筆的,這一個頓筆與豎的起筆的頓筆是類似,所以在宋體中,提的起筆會有一個與豎類似的體飾。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

提與豎起筆的體飾是差不多的,只是方向不同而已。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

最后就只剩下點和鉤兩個基礎(chǔ)筆畫還沒設計了。這兩個筆畫和別的筆畫之間的聯(lián)系不太大,同樣也只需要保持整體筆畫風格一致就好了。不過點和鉤之間卻存在著一定的聯(lián)系的。最主要的是體現(xiàn)在這個地方,如果是尖角,那么點和鉤最好都統(tǒng)一為尖角。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而如果點是圓滑過渡的,那么鉤最好也是圓角。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

另外還有如果點的這個位置是比較飽滿的話,那么鉤轉(zhuǎn)折的位置也應該設計得飽滿一些。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

而如果是瘦瘦的點,鉤轉(zhuǎn)折的位置也要相應的瘦一些。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

最后還有一個需要統(tǒng)一的地方,就是撇、點、鉤等筆畫的收筆必須要保持一致??梢允菆A角、還是切角、尖角或者是其他特殊的角,收筆的大小也應該統(tǒng)一。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

不過我們設計宋體字時,也并非一定要百分百遵循這一套設計方法,因為這一套設計理論是結(jié)合書法所推導出來的,而隨著時代的發(fā)展,宋體字的形式和定義也不斷被拓寬,例如一些比較新型的宋體,都會省略掉豎、撇、捺等筆畫的體飾,讓字體顯得更簡潔一些。所以如果大家想做一些比較創(chuàng)新的宋體字,而非傳統(tǒng)嚴謹?shù)淖煮w的話,大可以放開手腳去設計,最終只要保證美觀和和諧統(tǒng)一就好了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們在將所有筆畫都設計完之后,就可以將筆畫拼起來了,可是如果我們設計的筆畫比較沒有特點,最后拼湊出來的字體也就顯得有些中規(guī)中矩,缺乏視覺張力。那么接下來我就給大家介紹幾個讓宋體字比較有張力的常用方法。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

第一個是在宋體字的筆畫之間加入連接線,模擬寫字的連筆效果。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

由于宋體字是用刀刻出來的字,基本上是不會有連筆的存在,而加入連筆線條就可以緩和宋體字刀刻的僵硬感,讓文字顯得更靈動。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

第二個方式是將設計好的筆畫松散的排列。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

因為宋體具有文藝的氣質(zhì),而將筆畫松散地排列能夠體現(xiàn)一種慵懶的文藝感,和宋體的氣質(zhì)是非常契合的。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

不過這種方式最好能與詞義吻合,例如團圓這個詞應該是筆畫凝結(jié)在一起更能符合團圓的詞義,像這樣做得松松垮垮的味道就有些不太對了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

第三個方式是省略橫畫。由于宋體字存在著三角襯角,所以即便省略掉了橫線,依舊能夠通過三角襯角判斷橫線的位置。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

所以省略橫畫對宋體的識別度影響不大,并且能夠增加宋體字的圖形感。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

第四個方式是斷筆。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

剛剛我們講到了宋體存在著三角襯角,所以省略掉橫畫也不會過多的影響識別度。那么在斷筆這里也是一樣的道理,我們最好選擇斷開橫畫,因為這樣對字體識別度的影響最小。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

也許有的人聽到這里會覺得,這才是課程的重點。其實并不是的,這里教給大家的四個增加張力的手法只是輔助工具而已,不是說我先隨便瞎設計一個字體,然后再套用這幾個方法去增加形式感,我認為這樣的方式只是在遮丑而已,而作為設計師的我們更應該追求骨骼和體飾的美感,而非一味遮丑。那么教程部分就到這里結(jié)束,下面給大家示范一個案例吧。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們這節(jié)課的案例就是做韋禮安這首貓咪共和國的單曲封面。這是我從MV開頭截的圖。我們可以看到MV中貓咪共和國這五個字是手寫的,給人一種可愛隨意的感覺。那么我們這節(jié)課就嘗試用宋體字來體現(xiàn)這種感覺。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

那么我們對這款字體的定位就很明確了,是一款可愛的標題字體。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們先在屏幕上打上貓咪共和國五個字作為字體骨骼的參考。這里我選擇了思源宋體,因為思源宋體是一款現(xiàn)代型的字體,中宮比較大一些。太過緊湊的中宮不適合我們塑造可愛、隨意的感覺。另外一個很重要的原因是,思源宋體雖然高貴,但是免費,如果我們改動的程度不大,也不會造成侵權(quán)。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

為了讓字體更憨一點,我們可以將文字壓扁一點點,營造出一種老子一米五的感覺。然后就可以降低透明度,開始在這個參考骨架上秀一波操作了,接下來我們就一個筆畫一個筆畫地來設計。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

首先因為是標題字體,所以我們希望做一個橫畫和豎畫都差不多粗的宋體,這樣會比較醒目一些。然后因為氣質(zhì)是可愛的,所以我把體飾設置成圓圓的,胖胖的。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們用橫畫推導出豎畫。體飾方面基本上就直接照搬了橫畫的體飾,因為橫畫的風格很明顯了,豎畫保持一致就可以了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接著做橫折。我們先將橫畫和豎畫湊一起看看。這樣會有兩個比較大的問題,一個是豎線的體飾凸出來了一塊,另一個是橫畫和豎畫的襯角疊加在一塊顯得太大了。所以我們需要將襯角縮小一些。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接著做口字結(jié)構(gòu),我們將豎畫放好之后,發(fā)現(xiàn)不用調(diào)整也挺平衡的,所以我們就直接用這一個口字。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

然后撇和捺的起筆我們也可以直接用豎畫的起筆推導出來。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

值得注意的是,我們可以看一下這個撇,為了凸顯這個筆畫的可愛,所以我們筆畫的粗細變化其實是很小的,為的是讓收筆的地方比較鈍一些,顯得更人畜無害。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

同樣為了營造字體可愛的氣質(zhì),我將捺的收筆也設計成圓弧收筆,而并非普通宋體的尖銳收筆。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接下來我們應該是要做提筆畫的,可是我們發(fā)現(xiàn)這五個字里并沒有提,所以我們就跳過他,直接做點和鉤了。同樣為了保證風格的一致,這個點的粗細變化也不大,而且頭特別鈍。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

點和鉤之間是有關(guān)聯(lián)的,這三組地方分別互相對應。

① 端點應該都比較大,比較鈍一些;

② 圓滑地過渡;

③ 屁股的地方比較飽滿一些。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

將做好的筆畫放上去,接著還需要做一些調(diào)整,因為我們現(xiàn)在用的還是思源宋體的骨架,這個骨架和我們設計的筆畫并不一定搭。我對字面大小,視錯覺等進行了一定的修正,然后還將中宮稍微擴大了一些。這時候我們會發(fā)現(xiàn),調(diào)整過后的這組字依然顯得太過正經(jīng),還是擺脫不了思源宋體正文字的屬性,而我們想做的字應該是可愛、慵懶的標題字。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

不知道大家還記不記得我們剛剛講的宋體字四種增加張力的套路。很明顯松散筆畫這種方式最適合隨機慵懶的感覺,那么我們來試試看。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

我們先將這五個字的字距拉開一些,方便我們調(diào)整筆畫。然后將筆畫松散地排列開。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接著我們還需要做一些調(diào)整,這樣看起來太粗糙了。我們將點、撇、捺等筆畫調(diào)短一些,讓他們具有點的感覺。因為點的構(gòu)成具有隨機和活潑的氣質(zhì)。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

然后將重心往下壓,因為重心靠下的字體會顯得比較憨一些,那么我們這一組字就完成了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

最后我們用這個字來做一個版面,先建立一個單曲封面125mm*125mm的畫板,并設置5mm的頁邊距和7*7的網(wǎng)格。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

然后我們放入一張貓的照片作為版面的主體,占據(jù)右下角的5.5欄。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

接著我們將做好的字體放在左上角,和右下角的貓做對角線的呼應,可是這么擺放好像還是不夠好玩。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

所以我們加入英文和線條做成一個文字組合。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

最后在版面的左下角加入其它信息,這個單曲封面就做好了。

宋體字設計很難?來看這份平面高手的系統(tǒng)性指南!

效果還不錯吧。

最后我們來總結(jié)一下這節(jié)課。首先我們給大家扒了一下宋體字的歷史,知道了宋體字誕生于明朝,可是最早能夠追溯到唐朝。接著分析了宋體字的特征和氣質(zhì),宋體字相較黑體字具有傳統(tǒng)、文化的屬性,可是也能通過對體飾、中宮的控制,設計出具有現(xiàn)代感的宋體。然后我們教給了大家一套設計宋體字體飾的方法,最后是四個增加宋體字張力的常用手法。那么我們這節(jié)課就到這里,我是千樹,我們下次再見。

文章來源:優(yōu)設    作者:研習設

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

為什么很多設計大神都喜歡用斜線排版?

資深UI設計者

線是平面構(gòu)成的三大要素之一,在各類設計中都有著廣泛的應用,而其中的斜線更是設計師非常喜歡的元素,相比水平和垂直的線,斜線更特別、更具動感,下面我們來看看斜線有哪些主流且強大的用法。

區(qū)隔信息

區(qū)隔信息是斜線最常見的用法,通常用來區(qū)隔左右、左上和右下兩部分的信息,用斜線區(qū)隔的內(nèi)容不需要對齊排列,這樣看起來更靈活一點。

在海報設計中就經(jīng)常用斜線來區(qū)隔年月日等日期信息。

切割元素

很多簡單的元素完整呈現(xiàn)出來時會顯得很普通,這時依據(jù)斜線將其切割可以增加設計感,即切除元素的局部,只保留元素剩余的部分以及斜線,元素被切割后的不完整性會增加元素的獨特性和神秘感,所以更容易讓人眼前一亮。

PS:切割的時候要注意保留元素的美觀性和識別性。

裝飾

由于斜線具有一定的動感,通過重復排列后又具有節(jié)奏感,且線本身占面積比較小,不會對畫面造成太大干擾,所以很適合用作裝飾元素,斜線主要是從以下幾方面來起到裝飾作用的。

1. 增加動感

一些以文字為主且文字是水平或垂直排列的設計,可能會因為太過常規(guī)或缺少對比而缺乏動感,這時在文字周圍增加一些平行的斜線,使其與主體形成方向?qū)Ρ?,就可以大大提升該設計的動感。

2. 增加氛圍

比如在一些促銷設計中,如果畫面中缺少裝飾元素的點綴,那么促銷的氛圍也可能會有所欠缺,這種情況下,我們也可以通過增加斜線來改善,這里使用的斜線可以有粗細和顏色的變化。

PS:斜線的方向要統(tǒng)一。

3. 增加細節(jié)

比如很多畫面的背景太單調(diào),我們就可以把重復排列的斜線放進背景里做底紋,這樣的背景感覺更豐富,而且用斜線做底紋不會對主體造成太大干擾。

PS:把斜線排成一個圓,具有不錯的裝飾效果。

平衡

在排版時可能會遇到這樣的情況,比如我們想采用某種形式排版,但由于缺少內(nèi)容或圖片輪廓有限制,所以這么排會引起版面的失衡,這時可以用斜線來填充空白,以達到版面平衡的效果。

創(chuàng)造形式

由于設計的版面通常都是矩形的,以至于斜線天生就顯得比較特別,所以在設計中合理的使用斜線可以增加其設計感。

例如下面這張海報作品,如果沒有中間的斜線它也會是一件不錯的版式作品,但是有點常規(guī),所以設計師用一根斜線穿過整個畫面,打破了這種常規(guī),給這件作品帶來一種不一樣的感覺。

PS:貫穿畫面的斜線不能影響文字的識別性,且不能從人物的臉部穿過。

總結(jié)

最后總結(jié)一下,斜線的主要功能有:區(qū)隔信息;分割元素;裝飾;平衡;創(chuàng)造形式。光說不練假把式,大家在排版時記得多嘗試一下斜線。


文章來源:優(yōu)設    作者:蔥爺

2020高校畢業(yè)設計展海報大PK,美哭or丑翻?

資深UI設計者

一年一度畢業(yè)季來襲高校畢業(yè)展海報簡直「神仙打架」

大家好,我是美丫姐,今年,因為疫情原因,各大高校畢業(yè)生可以說是哭笑不得,先是因為人聚不齊,拍個畢業(yè)照都拍不成,只能上手 p。

再是各高校想方設法也要讓畢業(yè)生有個難忘的畢業(yè)典禮,紛紛搞了一出「賽博朋克」撥穗儀式。

這得虧是大白天,要是晚上在校園撞到這玩意兒還不得給人嚇個半死!

不禁讓網(wǎng)友紛紛大呼「搞點陽間的東西吧!」

但即便是這樣,也絲毫沒有減少,藝術(shù)院校辦畢業(yè)展的熱情全國各地各大藝術(shù)院校,都紛紛舉辦起了線上畢業(yè)設計展,斬斷大家想逃過做畢設的念頭,畢業(yè)設計展照常舉辦,那么畢業(yè)設計展宣傳海報也一定少不了。

接下來,就讓美丫姐帶著大家來品品,今年各大藝術(shù)院校令人「眼花繚亂」的海報。

廣州美術(shù)學院

廣美以其縮寫 GAFA 組成的動態(tài) 3D 圖形利用視差讓人產(chǎn)生錯覺,頗有幾分韻味。

就是搭配上富有節(jié)奏的 BGM 后,讓人不禁想到那句傳唱大街小巷的廣告詞「一年逛兩次海瀾之家,每次都有新感覺」。

湖北美術(shù)學院

你看,這亦實亦虛的透明物體像不像甲方虛無縹緲的需求……

中央美術(shù)學院

彼時,這一疊疊的紙張是一次次熬夜趕的作業(yè)此時畢業(yè)了,這一疊疊紙張將會是你被打回重做的稿子

天津美術(shù)學院

去年被全網(wǎng)吐槽的天津美院海報,天美 2019 年畢業(yè)展海報

今年選擇打一張規(guī)規(guī)矩矩的保守牌

河南大學民生學院藝術(shù)學院

不管甲方有多奇葩但畢竟給了錢,不管有多少坎坷都得咬著牙勇往直前 ,逆流而上!

南京藝術(shù)學院

這向四面八方發(fā)散的線條就像甲方天馬行空的想法,沒有重點,也似乎沒有終點。

南京藝術(shù)學院藝術(shù)管理系

稀疏的黑白線條,就像學設計后你的頭發(fā),做設計,做到最后白了少年發(fā),又禿了頭。

南京藝術(shù)學院服裝設計系

這需要瞪大眼看的 PPT 式動態(tài)海報,不正代表著更新迭代快速的時尚圈嘛!

武漢輕工大學藝術(shù)與傳媒學院

畢業(yè),能帶走的是屬于大學 4 年的回憶,難以帶走的,是積攢 4 年的行李,一看這陣仗,快遞費肯定不便宜。

廣西藝術(shù)大學

中間的圓就像催眠師搖擺的鐘表,這畢設,是越做越瞌睡……

北京大學藝術(shù)學院

兩耳不聞窗外事,一心只往屏幕鉆,這才是一個優(yōu)秀設計師的優(yōu)良品質(zhì)。

上海師范大學

設計師:「你好,有什么需要我服務的嗎?」

甲方:「需要做一個 logo,目前預算 20」

設計師:「好的,再見」

武漢華夏理工學院

俗話說得好,做設計不帶參考線,都展現(xiàn)不出設計師有多用心。這不,理工學院密密麻麻的參考線,哪個甲方拿到手不會覺得物超所值。

只是輔助線過于密集我看了三遍才看出寫的啥。

上海視覺藝術(shù)學院

甲方的心就像一個無底黑洞,你永遠不知道他在想啥,他給你的意見也總是在你意料之外。

武漢工商學院

做設計師,不僅要會動手,還得眼觀六路,耳聽八方能說會道,還要會「嗅」出空氣中的氛圍,這才能把甲方爸爸服侍得妥妥帖帖。

中原工學院藝術(shù)設計學院

每個看向不同方向的眼珠,就像一個項目有好幾個甲方,每個甲方都有自己的想法。

湖南師范大學美術(shù)學院

藝術(shù),總是得留有一絲絲神秘感才能吸引大家的眼球,就像馬賽克后內(nèi)容總是令人好奇。


除了大陸各大高校畢業(yè)展海報外,臺灣的畢業(yè)展海報也是百花齊放。

國立華東大學藝術(shù)與設計系

作品記得署名,被盜了你都沒地兒哭去。

輔仁大學應用美術(shù)學系

水印打得再滿也不如自個兒的臉辨識度高,實際上畢業(yè)作品是個 AR 濾鏡。

國立清華大學藝術(shù)與設計系

設計就是一場探索,多走幾次,就能摸清楚甲方的套路。

東海大學工業(yè)設計系

選專業(yè)前猶豫做什么設計,設計系畢業(yè)后:「做什么設計!」

國立臺中教育大學文創(chuàng)系

遇到蠻不講理的甲方,多深呼吸幾次忍忍也就過去了。

臺灣藝術(shù)大學多媒體動畫系

保持一個樂觀的心態(tài),才能發(fā)現(xiàn)設計的世界多姿多彩。

嶺東科技大學視覺傳達系

你看這從上到下密密麻麻的人海,就像是一次次嘗試夠到甲方需求,卻又一次次失敗的你。

臺灣科技大學設計系

看這畢設把孩子逼得這醫(yī)院看來沒少去。

國立臺北商業(yè)大學數(shù)位多媒體設計系

無論何時,回憶起肝畢設的日子,就連軟件頁面都能浮現(xiàn)在眼前。

銘傳大學商品設計學系

當你正式成為設計師你會發(fā)現(xiàn),做多了辣眼睛的設計,你的眼球?qū)兂上钠贰?

縱觀今天所有的畢業(yè)展的海報設計,有的難以理解,有的讓人出乎意料,但唯一可以肯定的是,無論條件多糟糕,哪怕不能像往年,有展館可給學子們呈現(xiàn)自己的創(chuàng)意,熱愛設計的大家,創(chuàng)作的熱情,也沒有被這場突如其來的疫情澆滅。

雖說有些海報可能不能做到,讓所有人滿意,但校方也盡力,為同學們搭建了一個可以展現(xiàn),大學四年學習成果的舞臺。

文章來源:優(yōu)設    作者:你丫才美工

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔