移動(dòng)端 Banner 設(shè)計(jì)指南

2019-12-4    資深UI設(shè)計(jì)者

根據(jù)遇到的問題,總結(jié)的一些小經(jīng)驗(yàn),個(gè)人的一點(diǎn)薄見,歡迎大家交流。

國(guó)內(nèi)國(guó)外運(yùn)營(yíng) Banner 設(shè)計(jì)

最近有小伙伴接到了國(guó)外的運(yùn)營(yíng)外包項(xiàng)目,發(fā)現(xiàn)國(guó)外和國(guó)內(nèi)對(duì)于運(yùn)營(yíng)的需求是有差別的,這篇文章就談?wù)剣?guó)內(nèi)外:中國(guó)、韓國(guó)、歐美,它們運(yùn)營(yíng)設(shè)計(jì)的各自特點(diǎn)和里面的門道。

主要從以下三方面來說:

1. 風(fēng)格特點(diǎn)

三個(gè)地區(qū)文化差異大不相同。

中國(guó)從古到今講究遵循傳統(tǒng),過年過節(jié)講究氣氛,營(yíng)造一種氛圍。用紅包來表達(dá)祝福和心意;其次,就是社會(huì)環(huán)境,中國(guó)人喜歡「熱鬧」,逢年過節(jié),一幫人聚到一起才熱鬧,別人都買、賣的火的肯定就是好的,所以就「跟風(fēng)效仿」。

韓國(guó)建國(guó)很晚,歷史相對(duì)比較短。所以文化氛圍比較年輕,偶像文化在韓國(guó)盛行,傳統(tǒng)的東西相對(duì)較少,都是比較年輕化的:年輕化的偶像,年輕化的文化,年輕化的價(jià)值觀。

歐美整個(gè)文化環(huán)境受移民的影響,比較開放國(guó)際化,體現(xiàn)的文化也是比較多元的,包容性、簡(jiǎn)潔、時(shí)尚是這些它最直接的特點(diǎn)。

接下來分別談一下三個(gè)地區(qū)運(yùn)營(yíng)推廣的設(shè)計(jì)特點(diǎn)差異化:

中國(guó)

中國(guó)的運(yùn)營(yíng)突出的是優(yōu)惠:送紅包、滿減、優(yōu)惠券等;必須要喜慶,鮮艷的色彩:以紅色、橙色、黃色居多,來刺激消費(fèi)。就好像進(jìn)了賣場(chǎng)「瞧一瞧看一看,季末打折滿100減99」

韓國(guó)

韓國(guó)的文化里「社交」這一關(guān)鍵詞體現(xiàn)的尤為重要,「Line」這款A(yù)PP對(duì)韓國(guó)影響比較大,里面的矢量涂鴉風(fēng)格的插畫深入人心,Line 官方設(shè)計(jì)可愛且特色鮮明的「饅頭人」、「可妮兔」、「布朗熊」和「詹姆士」四個(gè)形象也很有特點(diǎn),所以Line的「IP屬性」和「矢量涂鴉」就成為了韓國(guó)主流設(shè)計(jì)風(fēng)格。

2. 整體構(gòu)圖

而韓國(guó)的偶像明星文化也頗具影響力,在推廣時(shí)也會(huì)用到明星來制造效應(yīng)。

我們從整體構(gòu)圖解析一下三個(gè)地區(qū)的設(shè)計(jì)細(xì)節(jié)。首先把一個(gè)運(yùn)營(yíng) banner 按照組件層級(jí)進(jìn)行拆分,分別來看一下。

分為:文字層、主體物層、裝飾層、背景層

文字層

從文字層可以看出中國(guó)的文字層級(jí)劃分更加清晰。運(yùn)用「格式塔」原理,主文案和副標(biāo)題的突出,能讓用戶對(duì)信息提取更加準(zhǔn)確直觀。

中文結(jié)構(gòu)的復(fù)雜性,排版上必須嚴(yán)格區(qū)分,所以在層級(jí)劃分上裝飾線的運(yùn)用也是比較常見的。(后面有針對(duì)性字體設(shè)計(jì)形式,詳細(xì)解讀,這里就不細(xì)說了)

韓文的本身的圖形特質(zhì),為保證識(shí)別度,文案提煉精簡(jiǎn),信息層級(jí)相對(duì)較少。文字層級(jí)一般分為兩層。

有意思的是韓文由于字形結(jié)構(gòu)的單一,排版上很多時(shí)候會(huì)搭配字體形式的變化來增加排版樣式的變化,裝飾線的運(yùn)用也比較多變。

英文排版上本質(zhì)上和韓文相同——符號(hào)化,通過字形的特點(diǎn)來特出主要信息。

排版的優(yōu)勢(shì)性,讓其排版變化上自帶韻律感,加上裝飾線的運(yùn)用,本身字形的符號(hào)特性視覺呈現(xiàn)很有設(shè)計(jì)感。

主體物層

為了輔助信息傳達(dá),往往采用圖文結(jié)合,注意主體物的構(gòu)圖布局朝向,主題物對(duì)主要文字起到視覺引導(dǎo)作用,用戶的聚焦點(diǎn)一定是主文案,而不是主體物。

下圖里「手」作為整個(gè)畫面的「支點(diǎn)」,把模特的臉部向主要文案指引,最終達(dá)到活動(dòng)的最核心。

下圖里「眼睛」為整個(gè)畫面的「支點(diǎn)」,利用眼睛視線,把用戶向文案核心指引。

利用周圍的物體形成三個(gè)「支點(diǎn)」,把視覺中心聚焦到中間主文案。

裝飾層

點(diǎn)線面是運(yùn)用最多的元素,中國(guó)把平面設(shè)計(jì)的三大構(gòu)成運(yùn)用到了。

為了營(yíng)造構(gòu)圖的穩(wěn)定性,在設(shè)計(jì)里加入點(diǎn)和線的元素讓畫面占比更加平衡,同時(shí)彌補(bǔ)畫面中空白的地方,減少負(fù)空間,讓構(gòu)圖更加飽滿。

同時(shí)點(diǎn)和線的元素也是為了輔助襯托主體元素,分布要合理,避免過多,造成使畫面的擁擠。

面簡(jiǎn)單的理解成形狀,用形狀配合主體物,達(dá)到聚焦視覺中心,來突出主題,但是形狀不易過于復(fù)雜,「格式塔原理」——「簡(jiǎn)單」原則(我們的眼睛在觀看時(shí),眼腦并不是在一開始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分,而是將各個(gè)部分組合起來,使之成為一個(gè)更易于理解的統(tǒng)一體),用戶更容易理解。

三角形——利用穩(wěn)定的特點(diǎn)來達(dá)到視覺的平衡

圓形——最簡(jiǎn)單直接有效的圖形元素,視覺聚焦更明確

多邊形——豐富畫面,多邊形的邊角多的特點(diǎn)也多用做突出設(shè)計(jì)的高逼格

形狀流體在營(yíng)銷中突出了活動(dòng)的促銷感和氣氛,在重大活動(dòng)中經(jīng)常看到,色彩上也比較鮮艷。相較歐美、韓國(guó),中國(guó)電商運(yùn)用比較多,這也側(cè)面反映出出中國(guó)運(yùn)營(yíng)推廣競(jìng)爭(zhēng)的殘酷性映射出來的「浮夸」。

背景層

中國(guó)設(shè)計(jì)里最多變的就屬背景了。可以利用多彩漸變、放射的線、還有圖案疊加,讓畫面迎合表達(dá)的主體基調(diào)

韓國(guó)的設(shè)計(jì)分為涂鴉放射背景和純色背景簡(jiǎn)單幾何形狀

歐美撞色對(duì)比和性冷淡純色底,也會(huì)運(yùn)用視錯(cuò)覺,來吸引用戶眼球

3. 營(yíng)銷推廣層面

文案是營(yíng)銷第一要素,想辦法突出運(yùn)營(yíng)信息,是所有運(yùn)營(yíng)必須要注意的,這就有了根據(jù)活動(dòng)氣氛進(jìn)行字體設(shè)計(jì)。

中國(guó)字體的復(fù)雜和文化的久遠(yuǎn)特殊性,對(duì)于字體我們是有很深的研究和造詣,表現(xiàn)空間也很大。另外由于中文字形的復(fù)雜,導(dǎo)致字庫(kù)設(shè)計(jì)成本比較大,字體種類相對(duì)較少,為了避免字體版權(quán)問題,多采用一些設(shè)計(jì)變形來達(dá)到營(yíng)銷推廣目的。比如針對(duì)字形進(jìn)行改變、針對(duì)筆畫進(jìn)行加工、針對(duì)體積和質(zhì)感進(jìn)行變化等。

層次疊加——提取等比重的筆畫,變現(xiàn)字體的體積和空間感

筆畫鏈接——讓文字直接更緊湊,空間運(yùn)用更整體合理

筆畫裝飾——增加文字設(shè)計(jì)感,突出表現(xiàn)風(fēng)格

厚度層次——讓字體突出,增加厚重感

字形改變?cè)O(shè)計(jì)——考慮到字體版權(quán),對(duì)字體進(jìn)行再設(shè)計(jì),結(jié)合主題進(jìn)行宣傳

字體內(nèi)部裝飾——字體呼應(yīng)主題的一種簡(jiǎn)單方式

韓國(guó)字形相對(duì)簡(jiǎn)單,變化不是很多,運(yùn)用厚度體積和筆畫裝飾來表現(xiàn)字體

歐美的西文字體更多的是運(yùn)用和主體物穿插、和字形搭配的變換,和復(fù)古風(fēng)字體厚度設(shè)計(jì)

4. 小結(jié)

可以看到不同的國(guó)家地區(qū)根據(jù)本國(guó)習(xí)慣、審美、風(fēng)格不同,都有各自不同的設(shè)計(jì)。中國(guó)營(yíng)銷快速簡(jiǎn)單直接出效果;韓國(guó)偶像路線,不管是對(duì)于模特的選擇,還是網(wǎng)紅形象的選擇,把粉絲效應(yīng)運(yùn)用到了;而歐美則簡(jiǎn)單兼顧設(shè)計(jì)創(chuàng)意表現(xiàn)。

淺談學(xué)習(xí)Banner

隨著教育在大趨勢(shì)下崛起,很多學(xué)習(xí)類產(chǎn)品開始出現(xiàn)。很多在做教育的小伙伴求助,學(xué)習(xí)類的運(yùn)營(yíng) banner 無從下手,思路不清晰,那么我稍稍的屢了一下思路,淺談一下學(xué)習(xí) banner 的個(gè)人薄見。

在很多設(shè)計(jì)師剛開始縷思路的時(shí)候,總因?yàn)闊o從下手而著急盲目,下意識(shí)的認(rèn)為「我不會(huì)啊」!那復(fù)雜的不會(huì),就從簡(jiǎn)單的開始縷。從設(shè)計(jì)開始,我構(gòu)圖都沒想好,設(shè)計(jì)啥設(shè)計(jì)?那再簡(jiǎn)單點(diǎn),從構(gòu)圖開始吧,我思路都沒想好,構(gòu)啥圖?繼續(xù)再簡(jiǎn)單點(diǎn),一步一步往前推,直到推到最簡(jiǎn)單的細(xì)節(jié),從最初第一步開始做。你會(huì)發(fā)現(xiàn),首先第一步就是先建立一個(gè)符合主題的思路。

談到學(xué)習(xí)類 banner,光聽一聽就覺得頭大甚至很討厭的事情。因?yàn)楸緛韺W(xué)習(xí)就是讓人很拒絕的,如何引導(dǎo)用戶主動(dòng)做一個(gè)不想做的事,就得用到一些特殊的手段了。

咱們這次主要從以下方面來多維度探討:

1. 主題定位方向

K12教育

K12 也就是九年義務(wù)教育和三年高中,所以人群定位青少年,年齡 7-18 歲。這個(gè)年齡段非常單純。

大家可以回想一下我們小時(shí)候,在這個(gè)年齡最享受的是什么?那就是「滿足感」和「參與感」,我們小時(shí)候玩積木、做游戲,最重要的不是贏了能得到什么東西,而是參與到其中享受快樂。所以建立一種參與感,參與進(jìn)來「一起玩」的感覺,就會(huì)得到滿足。

我們看到下面這類 APP,為了能夠吸引這一部分用戶,大多都以有趣好玩為主,「游戲性」是最大的特點(diǎn),所以情感化設(shè)計(jì)是非常好的選擇,通過豐富的「體積感插畫」用游戲的思路激發(fā)興趣,讓他們感覺有參與感,從而吸引他們「想看」并「點(diǎn)擊」。

知識(shí)付費(fèi)

而對(duì)于成年人來說,學(xué)習(xí)需求變成一種「插件思維」,能夠快速學(xué)會(huì),或者說是能夠收獲很多的干貨,突出不枯燥、學(xué)會(huì)、能懂。這類的情感化設(shè)計(jì)相對(duì)于少兒學(xué)習(xí)插畫,更多的突出主題所以,以更極簡(jiǎn)的設(shè)計(jì)形式。

有時(shí)候文字作為主視覺中心更加直觀,整體設(shè)計(jì)風(fēng)格可能更加簡(jiǎn)單,對(duì)于成年人來說,這種設(shè)計(jì)更能直達(dá)我們需求本身,更容易理解。

高端知識(shí)分享

對(duì)于這部分人來說,定位跟上面兩類完全不同,從所處層級(jí)來說就不同。首先這類人,學(xué)習(xí)的可能就不只是干貨了,更多的需求是職場(chǎng)環(huán)境帶來的。比如,我怎么跟同事、朋友、下屬更好的相處,如何具有更好的說服力,或者是想進(jìn)修一下,就有了學(xué)習(xí)需求,基于「馬斯洛金字塔」里的,這里學(xué)習(xí)需求可能也是更高層次的,為了體現(xiàn)自己的價(jià)值。

所以更關(guān)心的是,這是誰講的課;通過設(shè)計(jì)情緒版,映射出當(dāng)前課程的專業(yè)、嚴(yán)謹(jǐn)、課程的價(jià)值高,這些關(guān)鍵點(diǎn)。

課程的品質(zhì)感的體現(xiàn),顏色不能太多,插畫設(shè)計(jì)元素少,更多的利用文字排版和少量圖形來突出主題。

總之,根據(jù)所代表的用戶來針對(duì)性設(shè)計(jì)。就好像剪頭發(fā),Tony 老師肯定不會(huì)給一個(gè) 20 多歲的年輕人理一個(gè)小平頭;穿衣服也一樣,你上班肯定不會(huì)穿個(gè)背心褲衩就去了,但在海邊放松你也不可能穿個(gè)西裝、牛仔,我相信大家都能明白這個(gè)道理。

2. 構(gòu)圖結(jié)構(gòu)

良好的構(gòu)圖,目的是能夠讓用戶易懂,首先結(jié)構(gòu)要清晰、簡(jiǎn)單,主要構(gòu)圖比如:居中、左右。

居中結(jié)構(gòu)

突出活動(dòng)文案,居中構(gòu)圖是個(gè)很好的選擇,不足就是體現(xiàn)不了有趣好玩的調(diào)性。直白說主要就是明確干什么。所以用戶的視覺焦點(diǎn)會(huì)聚集在重心區(qū)域,忽略掉周圍的東西,在設(shè)計(jì)的時(shí)候,周圍元素主要是襯托,不能搶主視覺重心。

所以說運(yùn)用插畫風(fēng)格的話,簡(jiǎn)單輪廓插畫和剪影插畫是最適合的。

設(shè)計(jì)的時(shí)候注意幾點(diǎn):一,主體物要突出飽滿,太小容易畫面太空;二,弱化輔助元素并不是要把它做的粗糙。

左右結(jié)構(gòu)

左右結(jié)構(gòu)分為兩種,一種是左圖右文,左文右圖。兩種構(gòu)圖的秘密在于,用戶的瀏覽順序是「從左至右」,如果圖在左邊,圖在表意性不明顯的情況下,我們需要看一遍文字,再看一遍圖,這樣圖相當(dāng)于重復(fù)瀏覽了兩次;文字在左邊就減少了重復(fù)閱讀,提高了閱讀效率,在運(yùn)營(yíng)推廣「3秒原則」里,是首先要考慮的因素。而插畫設(shè)計(jì)本身也是為了烘托氣氛,表意性不是很明顯,所以突出文案尤為重要。

所以,市面上大部分的學(xué)習(xí)知識(shí)類左右構(gòu)圖的,更傾向第二種左文右圖。

左右構(gòu)圖受限于屏幕顯示內(nèi)容,所以,有一個(gè)明確的主體物至關(guān)重要。比如:像 VIPKID 和噠噠英語,會(huì)有一個(gè)自己的 IP 主形象,比較生動(dòng)突出了品牌特征,還能讓用戶有代入感;還有像一些知識(shí)分享的,就會(huì)有一個(gè)明確的講師或者人物,體現(xiàn)專業(yè)權(quán)威性,在設(shè)計(jì)上一切都以突出主人物來展開,就不要設(shè)計(jì)太過于復(fù)雜。

不同于電商的模特,主人物首先穿著上不能太花哨,要正式;周圍裝飾上不要太浮夸,要精簡(jiǎn),甚至像高端知識(shí)分享的,背景就一個(gè)簡(jiǎn)單顏色來襯托。

衍生結(jié)構(gòu)

還有以上面構(gòu)圖衍生的構(gòu)圖形式,比如傾斜構(gòu)圖,受限于 banner 尺寸高度,過大的傾斜角度會(huì)讓畫面失衡,負(fù)空間留白不均,會(huì)讓畫面不協(xié)調(diào)。

構(gòu)圖比例合理

注意畫面整體構(gòu)圖比例,文案占比永遠(yuǎn)都是大的,不要讓主要畫面輔助元素過大搶了文案的風(fēng)頭,因?yàn)榧词箞D形輔助再精彩,用戶更關(guān)心的是「你能給他看什么」。

文案和輔助元素大概是六四開,黃金分割比例能讓焦點(diǎn)更多的關(guān)注內(nèi)容,有些小伙伴可能在做的時(shí)候過多的沉浸在放大的畫布里,由于沒有直觀感受,錯(cuò)誤的預(yù)估當(dāng)前構(gòu)圖的合理性,所以做圖的時(shí)候多縮小畫布離遠(yuǎn)看是個(gè)非常不錯(cuò)的方法。還有一個(gè)就是,做完了 banner 導(dǎo)出圖片,雙擊打開圖片,把圖拖小到無法拖動(dòng)為止,再看當(dāng)前實(shí)際尺寸大小,用實(shí)際尺寸來檢查。

更多構(gòu)圖形式:《文案超多的海報(bào)設(shè)計(jì)該怎么排版?16個(gè)實(shí)用模板送給你!》

3. 文案文字

文案選字

文字的選擇也是衡量當(dāng)前產(chǎn)品用戶定位的標(biāo)準(zhǔn),首先文字結(jié)構(gòu)不能太過于復(fù)雜,K12 教育因?yàn)楸旧碛脩裟贻p化的特點(diǎn),字形簡(jiǎn)單而且飽滿有趣,所以一些藝術(shù)手寫可愛字體比較適合。

免費(fèi)商用可愛字體推薦:沐瑤軟筆手寫體、站酷快樂體、鄭慶科黃油體、站酷小薇 LOGO 體、銳字真言體。

其他可愛字體推薦:漢儀唐美人、漢儀糯米團(tuán)、漢儀鑄字童年體、漢儀小麥體、方正胖娃體、方正字跡新手書、造字工房童心、文悅方糖體。

如果是高端知識(shí)分享和知識(shí)付費(fèi),體現(xiàn)高端。文字就要簡(jiǎn)單,字形不要那么隨意,一些黑體和簡(jiǎn)單的襯線體就比較合適。

免費(fèi)商用黑體襯線體推薦:思源黑、思源宋、站酷文藝體、方正書宋簡(jiǎn)體。

其他黑體襯線體推薦:漢儀瑞意宋、方正清刻本悅宋、方正蘭亭、造字工房朗宋、造字工房黃金時(shí)代體、造字工房尚雅體。

文案排版

當(dāng)用戶人群比較年輕,意味著所有的呈現(xiàn)方式都要直接,文案精簡(jiǎn)并且排版直觀,提煉關(guān)鍵主標(biāo)題,信息層級(jí)要拉開明顯,如果信息層級(jí)不清楚,識(shí)別性是很差的,先看下面的案例:

看這兩個(gè),明顯右邊的對(duì)于我們識(shí)別,和對(duì)當(dāng)前功能的認(rèn)知更清晰,還有一個(gè)明顯的視覺引導(dǎo),突出了最主要的交互點(diǎn);而左邊的由于信息比較密集,導(dǎo)致我們無法短時(shí)間反應(yīng)出關(guān)鍵信息是什么,這是比較糟糕的,運(yùn)營(yíng)同樣如此,而運(yùn)營(yíng)比較尷尬的一點(diǎn)是,如果用戶看不懂或不感興趣,是根本不會(huì)點(diǎn)擊、不予理睬的。那么流量入口的意義就沒有了,設(shè)計(jì)的再精美,都是一個(gè)非常差的作品。

提煉文案是很有必要的,下面兩個(gè)同樣的設(shè)計(jì),右邊對(duì)于文案的認(rèn)知就更明顯。

有的時(shí)候往往文案的關(guān)鍵信息比較多,我們?cè)谂虐娴臅r(shí)候第一個(gè)重要點(diǎn),就是排版怎么拉開信息對(duì)比,同時(shí)又讓排版緊湊?有時(shí)需要增加一些特定圖形,或按鈕。但是又會(huì)考慮,加了這些特殊圖形和文案又顯得相對(duì)獨(dú)立不整體;還有就是關(guān)鍵點(diǎn)該怎么取舍,強(qiáng)化那些文案、弱化哪些,或是主文案是重要的,同時(shí)關(guān)鍵的數(shù)字也要突出怎么辦?

左圖,左邊主文案放大了關(guān)鍵點(diǎn),由于右邊文案文字比較粗,所以層級(jí)拉開還是不夠突出,如果想拉開對(duì)比的話那就讓他們截然不同。右圖,字體選擇上拉開強(qiáng)弱,讓右邊的文字比劃選擇細(xì)一些;左圖的關(guān)鍵數(shù)字不夠突出,通過提亮改變顏色,來強(qiáng)化;按鈕在左邊畫面顯得太獨(dú)立,和文案沒有形成統(tǒng)一關(guān)系,反而按鈕看起來變得要比文案重要,那么把按鈕插到里面。

現(xiàn)在所有的信息,一環(huán)插一環(huán),并且突出的文案明顯,關(guān)鍵數(shù)字也明顯;最后讓他們整體在畫面構(gòu)圖中面積比例放大,改版后是不是舒服很多。

還有一些小伙伴可能覺得親密性原則不就是距離相近么,然后沒有把控好各個(gè)部分的文字距離,導(dǎo)致反而該拉開的沒有拉開,該近的沒有近。

上圖這個(gè)案例里,主文案分為了兩行,但左邊由于主文案行距比較寬,而跟輔助信息的距離太近,導(dǎo)致親密性不夠,而由于副標(biāo)題文案又比較孤立,上半部的信息和下半部信息太散,整體統(tǒng)一度不夠。

右圖改進(jìn)后,調(diào)整合適行距,并且加裝飾線,協(xié)調(diào)一下輔助信息比較短的問題,同時(shí)也起到分割的作用讓上下文案有關(guān)聯(lián)和統(tǒng)一。

文案排版的其他細(xì)節(jié)還有錯(cuò)位排版時(shí),注意錯(cuò)位的大小,太大會(huì)丟失掉排版的平衡性;注意文案排版對(duì)齊,往往有的時(shí)候不注意,會(huì)讓你的作品看起來不夠精細(xì);文案做傾斜處理的時(shí)候,一般情況都是往右邊傾斜,第一,右邊都是我們的主要習(xí)慣方向;第二,往右可以很好的把用戶引導(dǎo)到關(guān)鍵信息上,這些也是做 banner 排版里經(jīng)常犯的錯(cuò)也是要規(guī)避的一些坑。

4. 顏色技巧

顏色傾向

如果是代表年輕化,多用綠色和黃色,綠色代表活力、生機(jī)、積極向上;黃色系代表溫暖、希望、舒服。

這兩個(gè)顏色由于是臨近色的關(guān)系所以也會(huì)搭配出現(xiàn)在畫面中,色環(huán) 90° 角的顏色搭配所以是最舒服的配色,還有就是顏色對(duì)比非常和諧。

由于藍(lán)色是綠色的鄰近色、是黃色的對(duì)比色,紅色是綠色的互補(bǔ)色、黃色的鄰近色,所以綠、黃、藍(lán)、紅這些會(huì)在畫面中組成主色、輔色、點(diǎn)綴色。

注意協(xié)調(diào)好每部分顏色之間占比,主色 60% 左右、輔色 30% 左右、剩下的輔助色 10% 左右。

如果是代表科技、互聯(lián)網(wǎng),就會(huì)以藍(lán)色為主,顏色也不會(huì)像上面那樣豐富,顏色體現(xiàn)的設(shè)計(jì)也沒有那么活潑,代表冷靜、自然、科技。

一般畫面在2-3種顏色,以藍(lán)色為主,再搭配紫色。因?yàn)樽仙退{(lán)色是鄰近色,不會(huì)像暖色調(diào)一樣太沖撞,所以我們經(jīng)常會(huì)看到藍(lán)紫這種「好基友」的搭配。

知識(shí)分享類,分為普通的講師分享和高端知識(shí)分享。講師分享顏色要亮一些,顏色搭配大概是 1-2 種。

而高端知識(shí)分享,要體現(xiàn)知識(shí)的稀缺性和專屬感,代表尊貴、品質(zhì)、價(jià)值,顏色大多用暗色或消色(消色就是黑白灰),大概也是 1-2 種。

顏色方面我總結(jié)幾點(diǎn)坑需要避開的:一,如果用插畫表現(xiàn),一定要避免顏色的灰和臟,因?yàn)閷W(xué)習(xí)代表著積極向上的,灰色不適合。顏色選取的時(shí)候大概要避開「顏色警示區(qū)」的位置。

二,插畫風(fēng)格避免選擇紫和一些冷色調(diào),以暖色調(diào)為主,才能貼合情緒版定位;三,同樣的道理,顏色不要過于艷麗、過于刺激,反差明顯了,反而閱讀體驗(yàn)不好,影響觀感;四,所有的顏色最終都要定位到主題上,做完后,反向推倒檢查一下,顏色呈現(xiàn)符合當(dāng)前文案定位嗎?符合面向的用戶人群?jiǎn)??根?jù)主題當(dāng)前配色合適嗎?

更多電商配色方法:《這是一篇不看會(huì)后悔的配色干貨》

5. 小結(jié)

最后我想說的是,所做的東西把自己當(dāng)成模擬用戶自檢一下,自己如果看到這個(gè) banner 會(huì)點(diǎn)擊么?會(huì)吸引到你么?能直觀感受到么?會(huì)讓你舒服么?如果連自己都無感,那是相當(dāng)失敗的。

如何使Banner中主體物更突出

運(yùn)營(yíng)專題在設(shè)計(jì)的時(shí)候,我們要考慮的是針對(duì)運(yùn)營(yíng)需求,給特定需求的用戶傳達(dá)零成本閱讀體驗(yàn),很多設(shè)計(jì)師做的 banner 畫面特別亂,原因是畫面中沒有突出主體元素。

所以在 banner 設(shè)計(jì)上要考慮貼合當(dāng)前傳達(dá)的主題,所謂設(shè)計(jì)的「言之有物」。下面來詳細(xì)的談一下運(yùn)營(yíng)設(shè)計(jì)時(shí)如何突出主體元素,其中的言之有物。

運(yùn)營(yíng)活動(dòng)最終想給用戶快速傳達(dá)文案信息,也就是「三秒閱讀」體驗(yàn),配合輔助文案的主體圖形更能方便用戶去理解。

可以看到下圖左為了讓畫面豐富,設(shè)計(jì)師往往會(huì)加一些輔助元素或圖形;而圖右糟糕的元素添加反而會(huì)過度設(shè)計(jì),干擾用戶對(duì)于運(yùn)營(yíng)活動(dòng)本身的理解和其表意性。

那么,如何突出視覺主體物,而達(dá)到最理想的設(shè)計(jì)作品的表意性呢?

我們從以下五方面細(xì)談:

1. 圖形化輔助元素

流暢線條的運(yùn)用

我們?cè)诳匆魳奉愡\(yùn)營(yíng) banner 的時(shí)候發(fā)現(xiàn)線條運(yùn)用非常普遍,特別是利用 illustrator 里的「混合工具」來實(shí)現(xiàn)兩條線之間的復(fù)制混合。

人物涂鴉剪影

往往為了表現(xiàn)特定的主題:比如年輕化、個(gè)性化,通過錯(cuò)位移動(dòng),添加亮色來使人物突出,往往更多的表現(xiàn)在:音樂、設(shè)計(jì)、嘻哈接頭文化的電商運(yùn)營(yíng)宣傳中。

這類設(shè)計(jì)個(gè)性鮮明,所以做之前考慮好,所要傳達(dá)的特定的人群是不是符合當(dāng)前的審美認(rèn)知。

簡(jiǎn)單幾何形狀

有時(shí)候?yàn)榱俗寕鬟_(dá)主題更加明確,簡(jiǎn)潔化設(shè)計(jì)很有必要「少即是多」,所以比如學(xué)習(xí)和知識(shí)付費(fèi)類的設(shè)計(jì),干脆就用簡(jiǎn)單的圓形、方形、波浪曲線。

下面這個(gè)案例,設(shè)計(jì)者為了使這幾個(gè)人物不會(huì)太散,用圓形包裹,目的也是為了更加整體,試想一下,如果把圓形去掉,人物不僅會(huì)顯多,畫面也顯得既單調(diào)又亂。

立體幾何載體

讓風(fēng)格調(diào)性顯得品質(zhì)高,同樣讓設(shè)計(jì)少而精。需要注意的是,品質(zhì)感高逼格的設(shè)計(jì)所用的圖形相對(duì)要規(guī)整一些,盡量不要顯得太隨意,多用方塊形狀和立體幾何載體。

比如網(wǎng)易嚴(yán)選,為了突出「所賣東西都是精挑細(xì)選」,會(huì)采用立體幾何載體襯托的方式,所表現(xiàn)的就是「隆重和百里挑一」,我們不一樣~(會(huì)唱的朋友們一起唱)

多邊圖形

運(yùn)用模特表現(xiàn)的時(shí)候,高品質(zhì)感會(huì)用一些規(guī)則多邊形,比如:四邊形、多邊形等。多邊的形狀會(huì)給我們帶來穩(wěn)重感,「尊貴感與眾不同」往往是這類商品想傳達(dá)給我們的。

不規(guī)則流體

促銷類電商營(yíng)造促銷的氛圍,激發(fā)購(gòu)買欲,會(huì)用到多色彩的不規(guī)則流體,目的為了傳達(dá)「降價(jià)、折扣、滿減、超值、限時(shí)」等 ,往往會(huì)為圍繞主體物四周,突出主體元素。

小結(jié)

圖形化元素是最簡(jiǎn)單也是最實(shí)用的一種突出主體元素的表現(xiàn)方式,不管是用哪種,一定要想明白所表現(xiàn)的主題:符不符合當(dāng)前主題;推廣所屬對(duì)應(yīng)的用戶群體:心理認(rèn)知上能不能贊同;滿足這兩點(diǎn),所加的圖形才有意義。任何圖形都是為了輔助突出主體元素,記住這一點(diǎn),你就不會(huì)盲目的進(jìn)行設(shè)計(jì)。

2. 文案裝飾襯托

文字鋪底

直接把相關(guān)文字鋪底是最常見的一種方式,用當(dāng)前所對(duì)應(yīng)主題的人物名字、相關(guān)文案、對(duì)應(yīng)英文等。

文字與主體穿插

利用文字與主體的穿插營(yíng)造出空間感,也是在平面設(shè)計(jì)中經(jīng)常用到的手法,同樣也是在保證文字基本的識(shí)別度前提下。

注意文字顏色與主體顏色之間要拉開反差,不要糊成一坨,就適得其反了,適當(dāng)?shù)臅r(shí)候加一點(diǎn)點(diǎn)陰影還是很有必要的。

小結(jié)

不管是什么形式,所加的文字要有意義,跟主題相關(guān)。任何加的文案一定要能襯托主體物,也要有很強(qiáng)的表意性,畢竟文案才是最重要的。

3. 顏色對(duì)比的運(yùn)用

主體物吸色襯托

從主體物上之間選取,作為背景顏色搭配,來襯托主體物簡(jiǎn)直不要太完美,前提是主體物的顏色相對(duì)夠和諧舒服。需要襯托的背景顏色相對(duì)要弱一點(diǎn),以突出主體。

顏色對(duì)比

我們一想到顏色對(duì)比,馬上想到「紅配綠賽狗屁」這句話,這句話的意思不是說紅配綠不行,而是說錯(cuò)誤的紅配綠不行,聽不懂???來,舉個(gè)栗子…李子…梨子…例子!

左圖的紅綠顏色占比可以看到是比較平均的,大概1:1的比例,但是紅色作為一個(gè)比較刺激的顏色,顏色很鮮艷,如果搭配的綠色也一樣飽和度很高,兩個(gè)撞到一起沒有一個(gè)突出色,畫面就不會(huì)那么和諧了。

右圖如果我們把紅色的占比相應(yīng)的減少,飽和度不變,而綠色降低飽和度,從而面積占比增大,起到襯托的作用,畫面之間是不是舒服很多。

下圖其他的顏色對(duì)比同樣如此。

小結(jié)

顏色對(duì)比的口訣是:主體如果是亮色,背景就用冷色;主體用重色,背景用亮色;主體用純色,背景用灰色;不管哪種對(duì)比,主體物的顏色一定是面積最小的那一個(gè),無論如何拉開顏色對(duì)比反差是王道。

4. 主體物局部打光

人物面部打光

人物面部是最容易辨識(shí),也是視覺焦點(diǎn)部分,所以讓面部從畫面凸現(xiàn)出來尤為重要,讓光源聚焦到臉部,主體人物顯得更加有質(zhì)感和飽滿度。

物體亮部打光

物體和人物相比相對(duì)簡(jiǎn)單,亮部高光部分為視覺焦點(diǎn),讓物體顯得有質(zhì)感,只需要給亮部特殊光源即可。

小結(jié)

光線能在突出主體物的同時(shí),讓構(gòu)圖更加豐富和飽滿,切記光線不要過亮,看起來會(huì)很不舒服。

5. 主體元素?cái)[放技巧

人物截取范圍

截取擺放人物的時(shí)候注意,為了讓視覺焦點(diǎn)集中、有辨識(shí)度。具有代表性的人物和明星一般截取一半左右,大約胸部以上部位;而電商模特為了展示所賣衣服,一般露出大約三分之二。

萬萬不要切頭部

讓人物完美的呈現(xiàn)在畫面之中,讓畫面能夠看起來舒服些,構(gòu)圖也相對(duì)完整,反之把頭部一刀切,會(huì)使畫面負(fù)空間變小,構(gòu)圖擁擠,而觀看者對(duì)于人物的識(shí)別度也隨之降低,閱讀成本變高。

多人物擺放要求

多人物組合時(shí),整體人物處理要基本保持一致,特別是眼睛視線要盡量保持統(tǒng)一的視覺基準(zhǔn)線,不然會(huì)顯得雜亂不堪。

多物體的擺放

表現(xiàn)美食產(chǎn)品的時(shí)候,文字居中構(gòu)圖,物體散點(diǎn)擺放要注意,角度的統(tǒng)一,統(tǒng)一俯視角度,不要有俯視有平視,保證統(tǒng)一度。

6. 案例帶練示例

案例分析

這是一個(gè)小伙伴做的醫(yī)美類的運(yùn)營(yíng) banner,當(dāng)看到這個(gè)設(shè)計(jì)的時(shí)候我的內(nèi)心是崩潰的,我們分析一下問題。

問題一,首先主體物沒有突出,主體人物偏灰,背景也灰;問題二背景太亂,沒有視覺焦點(diǎn);問題三,文案識(shí)別度完全丟失掉了,排版也太亂;好下面我們來改一下。整體看下來,并沒有表現(xiàn)出醫(yī)美要體現(xiàn)的「變美」,用戶完全沒有視覺感受。

調(diào)整改動(dòng)

前后對(duì)比

最后我們來看看對(duì)比效果,是不是好很多。

無論什么樣的設(shè)計(jì),加什么樣的元素,目的只有一個(gè)就是要有理有據(jù)、有道理,所有的運(yùn)營(yíng)設(shè)計(jì)都是為了輔助主體文案。不要讓你的設(shè)計(jì)無用,或者減分,把設(shè)計(jì)元素最大化發(fā)揮它的作用才是設(shè)計(jì)的最終目的,你就說是不是吧!

日歷

鏈接

個(gè)人資料

存檔