2017年7月12日 星期三

Banner四種文字排版技巧

內文詳細解說在Banner中運用文字的技巧,
排版以及閱讀、表達效果,運用文字創造空間及合理性,
很適合我們每一天在做的工作內容所要吸收的知識。

一、文字的排列要遵循規律
我們在閱讀文字時的基本規則是從上到下、從左到右的。文案的排版應儘量遵從這一規則,除特殊版式之外,儘可能減少參差不齊或右對齊排列,大部分情況下,使用左對齊或居中對齊是最為合適的選擇。



△ 左對齊、居中對齊、右對齊、參差不齊(從左到右)



不管是應用了文字的特效、文字的前後層次還是文字的傾斜,都是遵循左對齊原則。
而當沿著某一板塊或素材的左側排列文字的時候,我們使用右對齊會比左對齊和居中對齊,要有更好的表達效果,但一定要記住這是特例 ↓



下面我再通過一個小例子來更加明確關於左對齊的操作。

△ 參差不齊,視覺點混亂


△ 右對齊,左側的不規則空白閱讀起來不舒服

△ 左對齊,產品跟文字之間的縫隙是很難受的地方

△ 改變文字跟主體的位置,可以去掉參差不齊的縫隙,所以左對齊要靈活運用

△ 使用居中對齊讓版面整體有自由感


這裡有人會問,這兩個圖足有都是以不規則的,為什麼第一個就不舒服第二個就沒事,這裡考慮的就是我前面提到的視覺點,從正常從左到右的閱讀順序,第1張氏視覺的{入口處}就是開始不齊,是一開始就有的生硬的視覺干擾,而第二張是視覺{出口處}末端不齊,出口部分是緩和的部分,是可以減少視覺硬性干擾的。我們拋去美觀、版式等問題不看,單從閱讀的流暢性和合理性來說,也是左對齊比右對齊要好的很多。



二、明確主、副標題及描述
文字排版應用的核心是對比,而對誰做對比,怎麼對比,為什麼要對比是很多設計師都做不好的點。

主標題大、粗、醒目。副標題與主標題用同一字體,略大,略粗,較為規整。描述——常伴有形搭配來劃出分隔。利於閱讀,較細、較小(有些文案沒有描述或副標題時,可彼此借鑑綜合使用)

另外在字體的選擇上儘量不要使用識別度較低,特性異性的字體。

舉個例子:



上圖有一下幾點問題,這也是很多文字排版有問題的朋友常犯的一些問題。


1、「高清無暇,美若天生」的文字辨識度較低,不易閱覽。很多情況下,觀看者在畫面的停留時間僅僅數秒的,如果在這有限的時間裡還辨識不出你寫的是什麼,就會失去對你作品的興趣,也可以說你的作品本身就是失敗的。

2、主標題的定義一般為產品的名稱、活動名稱、要表達的重要信息等,畫面中應該是絲滑無暇BB霜為主標題。高清無暇,美若天生只是副標題。做圖的時候一定要好好去判斷。



3、形狀款的應用,在針對描述去使用的形狀裝飾里,我們經理使用填充為主,少用只有描邊形式的裝飾,這種文本過於單薄,如果控制不當就會覺得整個描述非常擁擠難受。

4、如果投放價格,就儘量醒目不要太過袖珍。立即搶購等按鈕形式,儘量不要與價格或文本水平排列,會顯的版面非常彆扭,文字水平跟按鈕排列是一種很不好駕馭的排版形式,儘量讓按鈕出現在文案的最下方。


綜上所述,我們的文案可以稍作改進,更符合明確的展示:



另外,在同一個小範圍應用顏色儘量不要太多,像下圖裝飾形狀內的文字顏色最好是應用跟背景色相近的顏色,不然會覺得非常的跳脫,不舒服。


主、副標題儘量的區分開來,不要給人模稜兩可或含糊不清的感覺:


關於主、副標題的排版形式,之前也有明確的實例,可以作為借鑑參考。


三、主標題的應用
一般情況下,我們都是以主題的長度為一個文字排版的左右寬幅,而如果主標題過長會導致我們的視覺點被拉長,文字如果都以主標題為基準去排列會顯的臃腫,不按主標題去排列,主標題和其它文字之間會有很明顯的斷檔,所以一般情況下,檔主標題超過8個字的時候我們可以選擇性地分段。



很多朋友願意文字排版的開頭使用你整體文案中最大或最粗的文字,其實有時候這種版式會讓畫面頭重腳輕,有很強的壓迫感,文字排版的摸索階段,還是多以副標題或縮小的主標題作為開頭比較合理。


主標題字數略少時候可以單獨以主標題的每一個字作為一個圖層樣式,通過大小變化、粗細變化、旋轉、疊加、排列等方式靈活運用主標題,必要時可附帶特效。



四、行距與間距
行距與間距的把握是文字排版中最為點睛的一環,如果控制得好,整個文案都會很和諧,如果控制不好即便上邊提到的幾個技巧都做的完善也會感覺整體非常不舒服。距離的把空中我們一定要慎重考慮承重是否合理,直白的說你就是下方的文案能否撐得住上方的文案,而這個撐的含義就是通過行距與間距去展現的。

上圖為例,我們說說行距,上圖的文字整體行距是比較保守的同距型,這種方式比較隨意的擺放合理一些,但是整個文案部分看起來較為死板呆滯。



我們可以拉開文案間距的行距,較為合理的承重行距的上窄下寬,寬度可以幫助你去支持畫面,但是注意,這個時候我們要把同一範圍的文案看做一個整體,當做一個分塊,但不要讓這種整體在一個畫面里出來太多,板塊分的太多文案就會散亂,視覺也不易局集中,一般情況下兩塊即可。不過這個整體中的文案之間可以做一些小浮動性的行距的處理。



紅框部分為一個整體,注意上面提到過,就算是整體,其中的行距也可以租歐一些小的浮動變化,尤其是文案較多的時候不要讓你的文字看著死板。然後整個文案和明確的分為兩部分,紅色一部分,點擊領取一部分,通過兩個部分的行距拉大來增加承重,但這種行距的拉大不要做的太過,儘量讓他們集中在一個視野的範圍。

間距一般來說使用默認距離是不會出現太大的問題的,足夠應付很多場合,但是有的時候我們需要通過間距拉伸來達到某些目的,比如下圖中「精品台釣竿」與整體文案相比較文字部分相對薄弱,我們就可以使用文字間距拉伸的方式讓它又更好的表現效果,不過我們要注意文字間距的人為拉伸儘量不要讓拉開的距離超過當前一個字體大小的一半,那樣文字就會散亂。



↓ 儘量不要超過單一文字體積的二分之一


如果你非要做大於一個體積的間距,就需要增加一些裝飾效果來彌補空白過大所帶來的視覺問題。



再延伸到一個問題,很多朋友都很喜歡用英文做些裝飾效果或者翻譯,這種情況我們經理使用大寫字母而不要使用小寫,小寫文字有高有低,一行下去很不規整,凹凸不平,很容易干擾視覺,而大寫高度相同就會減少這種視覺上的衝突。



從干擾的角度去出發,文字中的標點符號也是比較影像視覺的,可以選擇性去掉,我們可以使用空格或一些裝飾符號去代替生硬的標點:



Via

沒有留言:

張貼留言