電商Banner中的文字排版方法四個(gè)技巧

2018-01-05 1286 0
我們上期提到了常用版式及在版式應(yīng)用中需要注意的一些小細(xì)節(jié)。接下來(lái)我們還是圍繞細(xì)節(jié)問(wèn)題展開(kāi)講解,畢竟所有好的作品,最最基本的要素就是細(xì)節(jié)的豐富和完善,細(xì)節(jié)處理得好,作品想出問(wèn)題都很難。今天這篇從文字排版的規(guī)律、行距和間距,主副標(biāo)題的運(yùn)用等細(xì)節(jié)幫你做出一個(gè)細(xì)節(jié)到位的電商Banner。
 一、文字的排列要遵循規(guī)律 我們?cè)陂喿x文字時(shí)的基本規(guī)則是從上到下、從左到右的。文案的排版應(yīng)盡量遵從這一規(guī)則,除特殊版式之外,盡可能減少參差不齊或右對(duì)齊排列,大部分情況下,使用左對(duì)齊或居中對(duì)齊是最為合適的選擇。 uisdc-shanyan-201609291
△ 左對(duì)齊、居中對(duì)齊、右對(duì)齊、參差不齊(從左到右) uisdc-shanyan-201609292
不管是應(yīng)用了文字的特效、文字的前后層次還是文字的傾斜,都是遵循左對(duì)齊原則。而當(dāng)沿著某一板塊或素材的左側(cè)排列文字的時(shí)候,我們使用右對(duì)齊會(huì)比左對(duì)齊和居中對(duì)齊,要有更好的表達(dá)效果,但一定要記住這是特例 ↓ uisdc-shanyan-201609294
以上7張圖均為@Naniee的作品下面我在通過(guò)一個(gè)小例子來(lái)更加明確關(guān)于左對(duì)齊的操作。
uisdchb20160929-2
△ 參差不齊,視覺(jué)點(diǎn)混亂
uisdchb20160929
△ 右對(duì)齊,左側(cè)的不規(guī)則空白閱讀起來(lái)不舒服 uisdc-shanyan-201609296
△ 左對(duì)齊,產(chǎn)品跟文字之間的縫隙是很難受的地方 ↓ 改變文字跟主體的位置,可以去掉參差不齊的縫隙,所以左對(duì)齊要靈活運(yùn)用 uisdc-shanyan-201609297
↓ 使用居中對(duì)齊讓版面整體有自由感 uisdc-shanyan-201609298
這里有人會(huì)問(wèn),這兩個(gè)圖足有都是以不規(guī)則的,為什么第一個(gè)就不舒服第二個(gè)就沒(méi)事,這里考慮的就是我前面提到的視覺(jué)點(diǎn),從正常從左到右的閱讀順序,第1張氏視覺(jué)的{入口處}就是開(kāi)始不齊,是一開(kāi)始就有的生硬的視覺(jué)干擾,而第二張是視覺(jué){出口處}末端不齊,出口部分是緩和的部分,是可以減少視覺(jué)硬性干擾的。我們拋去美觀、版式等問(wèn)題不看,單從閱讀的流暢性和合理性來(lái)說(shuō),也是左對(duì)齊比右對(duì)齊要好的很多。 uisdc-shanyan-201609299
二、明確主、副標(biāo)題及描述 文字排版應(yīng)用的核心是對(duì)比,而對(duì)誰(shuí)做對(duì)比,怎么對(duì)比,為什么要對(duì)比是很多設(shè)計(jì)師都做不好的點(diǎn)。主標(biāo)題大、粗、醒目。副標(biāo)題與主標(biāo)題用同一字體,略大,略粗,較為規(guī)整。描述——常伴有形搭配來(lái)劃出分隔。利于閱讀,較細(xì)、較?。ㄓ行┪陌笡](méi)有描述或副標(biāo)題時(shí),可彼此借鑒綜合使用)另外在字體的選擇上盡量不要使用識(shí)別度較低,特性異性的字體。舉個(gè)例子: uisdc-shanyan-2016092910
上圖有一下幾點(diǎn)問(wèn)題,這也是很多文字排版有問(wèn)題的朋友常犯的一些問(wèn)題。 uisdc-shanyan-2016092911
1、「高清無(wú)暇,美若天生」的文字辨識(shí)度較低,不易閱覽。很多情況下,觀看者在畫(huà)面的停留時(shí)間僅僅數(shù)秒的,如果在這有限的時(shí)間里還辨識(shí)不出你寫(xiě)的是什么,就會(huì)失去對(duì)你作品的興趣,也可以說(shuō)你的作品本身就是失敗的。
2、主標(biāo)題的定義一般為產(chǎn)品的名稱(chēng)、活動(dòng)名稱(chēng)、要表達(dá)的重要信息等,畫(huà)面中應(yīng)該是絲滑無(wú)暇BB霜為主標(biāo)題。高清無(wú)暇,美若天生只是副標(biāo)題。做圖的時(shí)候一定要好好去判斷。
uisdc-shanyan-2016092912
3、形狀款的應(yīng)用,在針對(duì)描述去使用的形狀裝飾里,我們經(jīng)理使用填充為主,少用只有描邊形式的裝飾,這種文本過(guò)于單薄,如果控制不當(dāng)就會(huì)覺(jué)得整個(gè)描述非常擁擠難受。
4、如果投放價(jià)格,就盡量醒目不要太過(guò)袖珍。立即搶購(gòu)等按鈕形式,盡量不要與價(jià)格或文本水平排列,會(huì)顯的版面非常別扭,文字水平跟按鈕排列是一種很不好駕馭的排版形式,盡量讓按鈕出現(xiàn)在文案的最下方。綜上所述,我們的文案可以稍作改進(jìn),更符合明確的展示: uisdc-shanyan-2016092913
另外,在同一個(gè)小范圍應(yīng)用顏色盡量不要太多,像下圖裝飾形狀內(nèi)的文字顏色最好是應(yīng)用跟背景色相近的顏色,不然會(huì)覺(jué)得非常的跳脫,不舒服。 uisdc-shanyan-2016092914
主、副標(biāo)題盡量的區(qū)分開(kāi)來(lái),不要給人模棱兩可或含糊不清的感覺(jué): uisdc-shanyan-2016092915
關(guān)于主、副標(biāo)題的排版形式,之前也有明確的實(shí)例,可以作為借鑒參考。
三、主標(biāo)題的應(yīng)用 一般情況下,我們都是以主題的長(zhǎng)度為一個(gè)文字排版的左右寬幅,而如果主標(biāo)題過(guò)長(zhǎng)會(huì)導(dǎo)致我們的視覺(jué)點(diǎn)被拉長(zhǎng),文字如果都以主標(biāo)題為基準(zhǔn)去排列會(huì)顯的臃腫,不按主標(biāo)題去排列,主標(biāo)題和其它文字之間會(huì)有很明顯的斷檔,所以一般情況下,檔主標(biāo)題超過(guò)8個(gè)字的時(shí)候我們可以選擇性地分段。
uisdc-shanyan-2016092916 uisdc-shanyan-2016092917 uisdc-shanyan-2016092918
很多朋友愿意文字排版的開(kāi)頭使用你整體文案中最大或最粗的文字,其實(shí)有時(shí)候這種版式會(huì)讓畫(huà)面頭重腳輕,有很強(qiáng)的壓迫感,文字排版的摸索階段,還是多以副標(biāo)題或縮小的主標(biāo)題作為開(kāi)頭比較合理。 uisdc-shanyan-2016092919
主標(biāo)題字?jǐn)?shù)略少時(shí)候可以單獨(dú)以主標(biāo)題的每一個(gè)字作為一個(gè)圖層樣式,通過(guò)大小變化、粗細(xì)變化、旋轉(zhuǎn)、疊加、排列等方式靈活運(yùn)用主標(biāo)題,必要時(shí)可附帶特效。
 uisdc-shanyan-2016092921 uisdc-shanyan-2016092922
四、行距與間距 行距與間距的把握是文字排版中最為點(diǎn)睛的一環(huán),如果控制得好,整個(gè)文案都會(huì)很和諧,如果控制不好即便上邊提到的幾個(gè)技巧都做的完善也會(huì)感覺(jué)整體非常不舒服。距離的把空中我們一定要慎重考慮承重是否合理,直白的說(shuō)你就是下方的文案能否撐得住上方的文案,而這個(gè)撐的含義就是通過(guò)行距與間距去展現(xiàn)的。 uisdc-shanyan-2016092923
上圖為例,我們說(shuō)說(shuō)行距,上圖的文字整體行距是比較保守的同距型,這種方式比較隨意的擺放合理一些,但是整個(gè)文案部分看起來(lái)較為死板呆滯。 uisdc-shanyan-2016092924
我們可以拉開(kāi)文案間距的行距,較為合理的承重行距的上窄下寬,寬度可以幫助你去支持畫(huà)面,但是注意,這個(gè)時(shí)候我們要把同一范圍的文案看做一個(gè)整體,當(dāng)做一個(gè)分塊,但不要讓這種整體在一個(gè)畫(huà)面里出來(lái)太多,板塊分的太多文案就會(huì)散亂,視覺(jué)也不易局集中,一般情況下兩塊即可。不過(guò)這個(gè)整體中的文案之間可以做一些小浮動(dòng)性的行距的處理。 uisdc-shanyan-2016092925   uisdc-shanyan-2016092926
紅框部分為一個(gè)整體,注意上面提到過(guò),就算是整體,其中的行距也可以租歐一些小的浮動(dòng)變化,尤其是文案較多的時(shí)候不要讓你的文字看著死板。然后整個(gè)文案和明確的分為兩部分,紅色一部分,點(diǎn)擊領(lǐng)取一部分,通過(guò)兩個(gè)部分的行距拉大來(lái)增加承重,但這種行距的拉大不要做的太過(guò),盡量讓他們集中在一個(gè)視野的范圍。間距一般來(lái)說(shuō)使用默認(rèn)距離是不會(huì)出現(xiàn)太大的問(wèn)題的,足夠應(yīng)付很多場(chǎng)合,但是有的時(shí)候我們需要通過(guò)間距拉伸來(lái)達(dá)到某些目的,比如下圖中“精品臺(tái)釣竿”與整體文案相比較文字部分相對(duì)薄弱,我們就可以使用文字間距拉伸的方式讓它又更好的表現(xiàn)效果,不過(guò)我們要注意文字間距的人為拉伸盡量不要讓拉開(kāi)的距離超過(guò)當(dāng)前一個(gè)字體大小的一半,那樣文字就會(huì)散亂。 uisdc-shanyan-2016092927  
↓ 盡量不要超過(guò)單一文字體積的二分之一 uisdc-shanyan-2016092928
如果你非要做大于一個(gè)體積的間距,就需要增加一些裝飾效果來(lái)彌補(bǔ)空白過(guò)大所帶來(lái)的視覺(jué)問(wèn)題。 uisdc-shanyan-2016092929
再延伸到一個(gè)問(wèn)題,很多朋友都很喜歡用英文做些裝飾效果或者翻譯,這種情況我們經(jīng)理使用大寫(xiě)字母而不要使用小寫(xiě),小寫(xiě)文字有高有低,一行下去很不規(guī)整,凹凸不平,很容易干擾視覺(jué),而大寫(xiě)高度相同就會(huì)減少這種視覺(jué)上的沖突。 uisdc-shanyan-2016092930
從干擾的角度去出發(fā),文字中的標(biāo)點(diǎn)符號(hào)也是比較影像視覺(jué)的,可以選擇性去掉,我們可以使用空格或一些裝飾符號(hào)去代替生硬的標(biāo)點(diǎn): uisdc-shanyan-2016092931

20
評(píng)論區(qū)(0)
正在加載評(píng)論...
相關(guān)推薦