萬字雄文!移動端 Banner 設計指南(附超多案例)

注:文章部分圖片來源於網絡,有些鏈接實在找不到了,如果作者看到可以評論裡放上作品鏈接,感謝。

萬字雄文!移動端 Banner 設計指南(附超多案例)

根據遇到的問題,總結的一些小經驗,個人的一點薄見,歡迎大家交流。

國內國外運營 Banner 設計

最近有小夥伴接到了國外的運營外包項目,發現國外和國內對於運營的需求是有差別的,這篇文章就談談國內外:中國、韓國、歐美,它們運營設計的各自特點和裡面的門道。

主要從以下三方面來說:

萬字雄文!移動端 Banner 設計指南(附超多案例)

1. 風格特點

三個地區文化差異大不相同。

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

韓國建國很晚,歷史相對比較短。所以文化氛圍比較年輕,偶像文化在韓國盛行,傳統的東西相對較少,都是比較年輕化的:年輕化的偶像,年輕化的文化,年輕化的價值觀。

歐美整個文化環境受移民的影響,比較開放國際化,體現的文化也是比較多元的,包容性、簡潔、時尚是這些它最直接的特點。

接下來分別談一下三個地區運營推廣的設計特點差異化:

中國

中國的運營突出的是優惠:送紅包、滿減、優惠券等;必須要喜慶,鮮豔的色彩:以紅色、橙色、黃色居多,來刺激消費。就好像進了賣場「瞧一瞧看一看,季末打折滿100減99」

萬字雄文!移動端 Banner 設計指南(附超多案例)

韓國

韓國的文化裡「社交」這一關鍵詞體現的尤為重要,「Line」這款APP對韓國影響比較大,裡面的矢量塗鴉風格的插畫深入人心,Line 官方設計可愛且特色鮮明的「饅頭人」、「可妮兔」、「布朗熊」和「詹姆士」四個形象也很有特點,所以Line的「IP屬性」和「矢量塗鴉」就成為了韓國主流設計風格。

萬字雄文!移動端 Banner 設計指南(附超多案例)

2. 整體構圖

而韓國的偶像明星文化也頗具影響力,在推廣時也會用到明星來製造效應。

我們從整體構圖解析一下三個地區的設計細節。首先把一個運營 banner 按照組件層級進行拆分,分別來看一下。

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

文字層

從文字層可以看出中國的文字層級劃分更加清晰。運用「格式塔」原理,主文案和副標題的突出,能讓用戶對信息提取更加準確直觀。

萬字雄文!移動端 Banner 設計指南(附超多案例)

中文結構的複雜性,排版上必須嚴格區分,所以在層級劃分上裝飾線的運用也是比較常見的。(後面有針對性字體設計形式,詳細解讀,這裡就不細說了)

萬字雄文!移動端 Banner 設計指南(附超多案例)

韓文的本身的圖形特質,為保證識別度,文案提煉精簡,信息層級相對較少。文字層級一般分為兩層。

萬字雄文!移動端 Banner 設計指南(附超多案例)

有意思的是韓文由於字形結構的單一,排版上很多時候會搭配字體形式的變化來增加排版樣式的變化,裝飾線的運用也比較多變。

萬字雄文!移動端 Banner 設計指南(附超多案例)

英文排版上本質上和韓文相同——符號化,通過字形的特點來特出主要信息。

萬字雄文!移動端 Banner 設計指南(附超多案例)

排版的優勢性,讓其排版變化上自帶韻律感,加上裝飾線的運用,本身字形的符號特性視覺呈現很有設計感。

萬字雄文!移動端 Banner 設計指南(附超多案例)

主體物層

為了輔助信息傳達,往往採用圖文結合,注意主體物的構圖佈局朝向,主題物對主要文字起到視覺引導作用,用戶的聚焦點一定是主文案,而不是主體物。

下圖裡「手」作為整個畫面的「支點」,把模特的臉部向主要文案指引,最終達到活動的最核心。

萬字雄文!移動端 Banner 設計指南(附超多案例)

下圖裡「眼睛」為整個畫面的「支點」,利用眼睛視線,把用戶向文案核心指引。

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

裝飾層

點線面是運用最多的元素,中國把平面設計的三大構成運用到了極致。

萬字雄文!移動端 Banner 設計指南(附超多案例)

為了營造構圖的穩定性,在設計里加入點和線的元素讓畫面佔比更加平衡,同時彌補畫面中空白的地方,減少負空間,讓構圖更加飽滿。

萬字雄文!移動端 Banner 設計指南(附超多案例)

同時點和線的元素也是為了輔助襯托主體元素,分佈要合理,避免過多,造成使畫面的擁擠。

萬字雄文!移動端 Banner 設計指南(附超多案例)

面簡單的理解成形狀,用形狀配合主體物,達到聚焦視覺中心,來突出主題,但是形狀不易過於複雜,「格式塔原理」——「簡單」原則(我們的眼睛在觀看時,眼腦並不是在一開始就區分一個形象的各個單一的組成部分,而是將各個部分組合起來,使之成為一個更易於理解的統一體),用戶更容易理解。

萬字雄文!移動端 Banner 設計指南(附超多案例)

三角形——利用穩定的特點來達到視覺的平衡

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

多邊形——豐富畫面,多邊形的邊角多的特點也多用做突出設計的高逼格

萬字雄文!移動端 Banner 設計指南(附超多案例)

形狀流體在營銷中突出了活動的促銷感和氣氛,在重大活動中經常看到,色彩上也比較鮮豔。相較歐美、韓國,中國電商運用比較多,這也側面反映出出中國運營推廣競爭的殘酷性映射出來的「浮誇」。

萬字雄文!移動端 Banner 設計指南(附超多案例)

背景層

中國設計裡最多變的就屬背景了。可以利用多彩漸變、放射的線、還有圖案疊加,讓畫面迎合表達的主體基調

萬字雄文!移動端 Banner 設計指南(附超多案例)

韓國的設計分為塗鴉放射背景和純色背景簡單幾何形狀

萬字雄文!移動端 Banner 設計指南(附超多案例)

歐美撞色對比和性冷淡純色底,也會運用視錯覺,來吸引用戶眼球

萬字雄文!移動端 Banner 設計指南(附超多案例)

3. 營銷推廣層面

文案是營銷第一要素,想辦法突出運營信息,是所有運營必須要注意的,這就有了根據活動氣氛進行字體設計。

中國字體的複雜和文化的久遠特殊性,對於字體我們是有很深的研究和造詣,表現空間也很大。另外由於中文字形的複雜,導致字庫設計成本比較大,字體種類相對較少,為了避免字體版權問題,多采用一些設計變形來達到營銷推廣目的。比如針對字形進行改變、針對筆畫進行加工、針對體積和質感進行變化等。

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

筆畫裝飾——增加文字設計感,突出表現風格

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

字形改變設計——考慮到字體版權,對字體進行再設計,結合主題進行宣傳

萬字雄文!移動端 Banner 設計指南(附超多案例)

字體內部裝飾——字體呼應主題的一種簡單方式

萬字雄文!移動端 Banner 設計指南(附超多案例)

韓國字形相對簡單,變化不是很多,運用厚度體積和筆畫裝飾來表現字體

萬字雄文!移動端 Banner 設計指南(附超多案例)

歐美的西文字體更多的是運用和主體物穿插、和字形搭配的變換,和復古風字體厚度設計

萬字雄文!移動端 Banner 設計指南(附超多案例)

4. 小結

可以看到不同的國家地區根據本國習慣、審美、風格不同,都有各自不同的設計。中國營銷快速簡單直接出效果;韓國偶像路線,不管是對於模特的選擇,還是網紅形象的選擇,把粉絲效應運用到了極致;而歐美則簡單兼顧設計創意表現。

淺談學習Banner

隨著教育在大趨勢下崛起,很多學習類產品開始出現。很多在做教育的小夥伴求助,學習類的運營 banner 無從下手,思路不清晰,那麼我稍稍的屢了一下思路,淺談一下學習 banner 的個人薄見。

在很多設計師剛開始縷思路的時候,總因為無從下手而著急盲目,下意識的認為「我不會啊」!那複雜的不會,就從簡單的開始縷。從設計開始,我構圖都沒想好,設計啥設計?那再簡單點,從構圖開始吧,我思路都沒想好,構啥圖?繼續再簡單點,一步一步往前推,直到推到最簡單的細節,從最初第一步開始做。你會發現,首先第一步就是先建立一個符合主題的思路。

談到學習類 banner,光聽一聽就覺得頭大甚至很討厭的事情。因為本來學習就是讓人很拒絕的,如何引導用戶主動做一個不想做的事,就得用到一些特殊的手段了。

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

1. 主題定位方向

K12教育

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

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

知識付費

而對於成年人來說,學習需求變成一種「插件思維」,能夠快速學會,或者說是能夠收穫很多的乾貨,突出不枯燥、學會、能懂。這類的情感化設計相對於少兒學習插畫,更多的突出主題所以,以更極簡的設計形式。

萬字雄文!移動端 Banner 設計指南(附超多案例)

萬字雄文!移動端 Banner 設計指南(附超多案例)

有時候文字作為主視覺中心更加直觀,整體設計風格可能更加簡單,對於成年人來說,這種設計更能直達我們需求本身,更容易理解。

萬字雄文!移動端 Banner 設計指南(附超多案例)

高端知識分享

對於這部分人來說,定位跟上面兩類完全不同,從所處層級來說就不同。首先這類人,學習的可能就不只是乾貨了,更多的需求是職場環境帶來的。比如,我怎麼跟同事、朋友、下屬更好的相處,如何具有更好的說服力,或者是想進修一下,就有了學習需求,基於「馬斯洛金字塔」裡的,這裡學習需求可能也是更高層次的,為了體現自己的價值。

萬字雄文!移動端 Banner 設計指南(附超多案例)

所以更關心的是,這是誰講的課;通過設計情緒版,映射出當前課程的專業、嚴謹、課程的價值高,這些關鍵點。

萬字雄文!移動端 Banner 設計指南(附超多案例)

課程的品質感的體現,顏色不能太多,插畫設計元素少,更多的利用文字排版和少量圖形來突出主題。

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

2. 構圖結構

良好的構圖,目的是能夠讓用戶易懂,首先結構要清晰、簡單,主要構圖比如:居中、左右。

萬字雄文!移動端 Banner 設計指南(附超多案例)

居中結構

突出活動文案,居中構圖是個很好的選擇,不足就是體現不了有趣好玩的調性。直白說主要就是明確幹什麼。所以用戶的視覺焦點會聚集在重心區域,忽略掉周圍的東西,在設計的時候,周圍元素主要是襯托,不能搶主視覺重心。

萬字雄文!移動端 Banner 設計指南(附超多案例)

所以說運用插畫風格的話,簡單輪廓插畫和剪影插畫是最適合的。

萬字雄文!移動端 Banner 設計指南(附超多案例)

設計的時候注意幾點:一,主體物要突出飽滿,太小容易畫面太空;二,弱化輔助元素並不是要把它做的粗糙。

萬字雄文!移動端 Banner 設計指南(附超多案例)

左右結構

左右結構分為兩種,一種是左圖右文,左文右圖。兩種構圖的秘密在於,用戶的瀏覽順序是「從左至右」,如果圖在左邊,圖在表意性不明顯的情況下,我們需要看一遍文字,再看一遍圖,這樣圖相當於重複瀏覽了兩次;文字在左邊就減少了重複閱讀,提高了閱讀效率,在運營推廣「3秒原則」裡,是首先要考慮的因素。而插畫設計本身也是為了烘托氣氛,表意性不是很明顯,所以突出文案尤為重要。

萬字雄文!移動端 Banner 設計指南(附超多案例)

所以,市面上大部分的學習知識類左右構圖的,更傾向第二種左文右圖。

萬字雄文!移動端 Banner 設計指南(附超多案例)

左右構圖受限於屏幕顯示內容,所以,有一個明確的主體物至關重要。比如:像 VIPKID 和噠噠英語,會有一個自己的 IP 主形象,比較生動突出了品牌特徵,還能讓用戶有代入感;還有像一些知識分享的,就會有一個明確的講師或者人物,體現專業權威性,在設計上一切都以突出主人物來展開,就不要設計太過於複雜。

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

衍生結構

還有以上面構圖衍生的構圖形式,比如傾斜構圖,受限於 banner 尺寸高度,過大的傾斜角度會讓畫面失衡,負空間留白不均,會讓畫面不協調。

萬字雄文!移動端 Banner 設計指南(附超多案例)

構圖比例合理

注意畫面整體構圖比例,文案佔比永遠都是大的,不要讓主要畫面輔助元素過大搶了文案的風頭,因為即使圖形輔助再精彩,用戶更關心的是「你能給他看什麼」。

萬字雄文!移動端 Banner 設計指南(附超多案例)

文案和輔助元素大概是六四開,黃金分割比例能讓焦點更多的關注內容,有些小夥伴可能在做的時候過多的沉浸在放大的畫布裡,由於沒有直觀感受,錯誤的預估當前構圖的合理性,所以做圖的時候多縮小畫布離遠看是個非常不錯的方法。還有一個就是,做完了 banner 導出圖片,雙擊打開圖片,把圖拖小到無法拖動為止,再看當前實際尺寸大小,用實際尺寸來檢查。

更多構圖形式:《文案超多的海報設計該怎麼排版?16個實用模板送給你!》

3. 文案文字

文案選字

文字的選擇也是衡量當前產品用戶定位的標準,首先文字結構不能太過於複雜,K12 教育因為本身用戶年輕化的特點,字形簡單而且飽滿有趣,所以一些藝術手寫可愛字體比較適合。

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

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

如果是高端知識分享和知識付費,體現高端。文字就要簡單,字形不要那麼隨意,一些黑體和簡單的襯線體就比較合適。

萬字雄文!移動端 Banner 設計指南(附超多案例)

免費商用黑體襯線體推薦:思源黑、思源宋、站酷文藝體、方正書宋簡體。

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

文案排版

當用戶人群比較年輕,意味著所有的呈現方式都要直接,文案精簡併且排版直觀,提煉關鍵主標題,信息層級要拉開明顯,如果信息層級不清楚,識別性是很差的,先看下面的案例:

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

提煉文案是很有必要的,下面兩個同樣的設計,右邊對於文案的認知就更明顯。

萬字雄文!移動端 Banner 設計指南(附超多案例)

有的時候往往文案的關鍵信息比較多,我們在排版的時候第一個重要點,就是排版怎麼拉開信息對比,同時又讓排版緊湊?有時需要增加一些特定圖形,或按鈕。但是又會考慮,加了這些特殊圖形和文案又顯得相對獨立不整體;還有就是關鍵點該怎麼取捨,強化那些文案、弱化哪些,或是主文案是重要的,同時關鍵的數字也要突出怎麼辦?

萬字雄文!移動端 Banner 設計指南(附超多案例)

左圖,左邊主文案放大了關鍵點,由於右邊文案文字比較粗,所以層級拉開還是不夠突出,如果想拉開對比的話那就讓他們截然不同。右圖,字體選擇上拉開強弱,讓右邊的文字比劃選擇細一些;左圖的關鍵數字不夠突出,通過提亮改變顏色,來強化;按鈕在左邊畫面顯得太獨立,和文案沒有形成統一關係,反而按鈕看起來變得要比文案重要,那麼把按鈕插到裡面。

現在所有的信息,一環插一環,並且突出的文案明顯,關鍵數字也明顯;最後讓他們整體在畫面構圖中面積比例放大,改版後是不是舒服很多。

還有一些小夥伴可能覺得親密性原則不就是距離相近麼,然後沒有把控好各個部分的文字距離,導致反而該拉開的沒有拉開,該近的沒有近。

萬字雄文!移動端 Banner 設計指南(附超多案例)

上圖這個案例裡,主文案分為了兩行,但左邊由於主文案行距比較寬,而跟輔助信息的距離太近,導致親密性不夠,而由於副標題文案又比較孤立,上半部的信息和下半部信息太散,整體統一度不夠。

右圖改進後,調整合適行距,並且加裝飾線,協調一下輔助信息比較短的問題,同時也起到分割的作用讓上下文案有關聯和統一。

文案排版的其他細節還有錯位排版時,注意錯位的大小,太大會丟失掉排版的平衡性;注意文案排版對齊,往往有的時候不注意,會讓你的作品看起來不夠精細;文案做傾斜處理的時候,一般情況都是往右邊傾斜,第一,右邊都是我們的主要習慣方向;第二,往右可以很好的把用戶引導到關鍵信息上,這些也是做 banner 排版裡經常犯的錯也是要規避的一些坑。

萬字雄文!移動端 Banner 設計指南(附超多案例)

4. 顏色技巧

顏色傾向

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

這兩個顏色由於是臨近色的關係所以也會搭配出現在畫面中,色環 90° 角的顏色搭配所以是最舒服的配色,還有就是顏色對比非常和諧。

由於藍色是綠色的鄰近色、是黃色的對比色,紅色是綠色的互補色、黃色的鄰近色,所以綠、黃、藍、紅這些會在畫面中組成主色、輔色、點綴色。

注意協調好每部分顏色之間佔比,主色 60% 左右、輔色 30% 左右、剩下的輔助色 10% 左右。

萬字雄文!移動端 Banner 設計指南(附超多案例)

如果是代表科技、互聯網,就會以藍色為主,顏色也不會像上面那樣豐富,顏色體現的設計也沒有那麼活潑,代表冷靜、自然、科技。

一般畫面在2-3種顏色,以藍色為主,再搭配紫色。因為紫色和藍色是鄰近色,不會像暖色調一樣太沖撞,所以我們經常會看到藍紫這種「好基友」的搭配。

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

顏色方面我總結幾點坑需要避開的:一,如果用插畫表現,一定要避免顏色的灰和髒,因為學習代表著積極向上的,灰色不適合。顏色選取的時候大概要避開「顏色警示區」的位置。

萬字雄文!移動端 Banner 設計指南(附超多案例)

二,插畫風格避免選擇紫和一些冷色調,以暖色調為主,才能貼合情緒版定位;三,同樣的道理,顏色不要過於豔麗、過於刺激,反差明顯了,反而閱讀體驗不好,影響觀感;四,所有的顏色最終都要定位到主題上,做完後,反向推倒檢查一下,顏色呈現符合當前文案定位嗎?符合面向的用戶人群嗎?根據主題當前配色合適嗎?

更多電商配色方法:《這是一篇不看會後悔的配色乾貨》

5. 小結

最後我想說的是,所做的東西把自己當成模擬用戶自檢一下,自己如果看到這個 banner 會點擊麼?會吸引到你麼?能直觀感受到麼?會讓你舒服麼?如果連自己都無感,那是相當失敗的。

如何使Banner中主體物更突出

運營專題在設計的時候,我們要考慮的是針對運營需求,給特定需求的用戶傳達零成本閱讀體驗,很多設計師做的 banner 畫面特別亂,原因是畫面中沒有突出主體元素。

所以在 banner 設計上要考慮貼合當前傳達的主題,所謂設計的「言之有物」。下面來詳細的談一下運營設計時如何突出主體元素,其中的言之有物。

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

可以看到下圖左為了讓畫面豐富,設計師往往會加一些輔助元素或圖形;而圖右糟糕的元素添加反而會過度設計,干擾用戶對於運營活動本身的理解和其表意性。

萬字雄文!移動端 Banner 設計指南(附超多案例)

那麼,如何突出視覺主體物,而達到最理想的設計作品的表意性呢?

我們從以下五方面細談:

萬字雄文!移動端 Banner 設計指南(附超多案例)

1. 圖形化輔助元素

流暢線條的運用

我們在看音樂類運營 banner 的時候發現線條運用非常普遍,特別是利用 illustrator 裡的「混合工具」來實現兩條線之間的複製混合。

萬字雄文!移動端 Banner 設計指南(附超多案例)

人物塗鴉剪影

往往為了表現特定的主題:比如年輕化、個性化,通過錯位移動,添加亮色來使人物突出,往往更多的表現在:音樂、設計、嘻哈接頭文化的電商運營宣傳中。

萬字雄文!移動端 Banner 設計指南(附超多案例)

這類設計個性鮮明,所以做之前考慮好,所要傳達的特定的人群是不是符合當前的審美認知。

簡單幾何形狀

有時候為了讓傳達主題更加明確,簡潔化設計很有必要「少即是多」,所以比如學習和知識付費類的設計,乾脆就用簡單的圓形、方形、波浪曲線。

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

立體幾何載體

讓風格調性顯得品質高,同樣讓設計少而精。需要注意的是,品質感高逼格的設計所用的圖形相對要規整一些,儘量不要顯得太隨意,多用方塊形狀和立體幾何載體。

比如網易嚴選,為了突出「所賣東西都是精挑細選」,會採用立體幾何載體襯托的方式,所表現的就是「隆重和百裡挑一」,我們不一樣~(會唱的朋友們一起唱)

萬字雄文!移動端 Banner 設計指南(附超多案例)

多邊圖形

運用模特表現的時候,高品質感會用一些規則多邊形,比如:四邊形、多邊形等。多邊的形狀會給我們帶來穩重感,「尊貴感與眾不同」往往是這類商品想傳達給我們的。

萬字雄文!移動端 Banner 設計指南(附超多案例)

不規則流體

促銷類電商營造促銷的氛圍,激發購買慾,會用到多色彩的不規則流體,目的為了傳達「降價、折扣、滿減、超值、限時」等 ,往往會為圍繞主體物四周,突出主體元素。

萬字雄文!移動端 Banner 設計指南(附超多案例)

小結

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

2. 文案裝飾襯托

文字鋪底

直接把相關文字鋪底是最常見的一種方式,用當前所對應主題的人物名字、相關文案、對應英文等。

萬字雄文!移動端 Banner 設計指南(附超多案例)

文字與主體穿插

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

注意文字顏色與主體顏色之間要拉開反差,不要糊成一坨,就適得其反了,適當的時候加一點點陰影還是很有必要的。

萬字雄文!移動端 Banner 設計指南(附超多案例)

小結

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

3. 顏色對比的運用

主體物吸色襯托

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

顏色對比

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

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

下圖其他的顏色對比同樣如此。

萬字雄文!移動端 Banner 設計指南(附超多案例)

小結

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

4. 主體物局部打光

人物面部打光

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

物體亮部打光

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

小結

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

5. 主體元素擺放技巧

人物截取範圍

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

萬字雄文!移動端 Banner 設計指南(附超多案例)

萬萬不要切頭部

讓人物完美的呈現在畫面之中,讓畫面能夠看起來舒服些,構圖也相對完整,反之把頭部一刀切,會使畫面負空間變小,構圖擁擠,而觀看者對於人物的識別度也隨之降低,閱讀成本變高。

萬字雄文!移動端 Banner 設計指南(附超多案例)

多人物擺放要求

多人物組合時,整體人物處理要基本保持一致,特別是眼睛視線要儘量保持統一的視覺基準線,不然會顯得雜亂不堪。

萬字雄文!移動端 Banner 設計指南(附超多案例)

多物體的擺放

表現美食產品的時候,文字居中構圖,物體散點擺放要注意,角度的統一,統一俯視角度,不要有俯視有平視,保證統一度。

萬字雄文!移動端 Banner 設計指南(附超多案例)

6. 案例帶練示例

案例分析

這是一個小夥伴做的醫美類的運營 banner,當看到這個設計的時候我的內心是崩潰的,我們分析一下問題。

萬字雄文!移動端 Banner 設計指南(附超多案例)

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

調整改動

萬字雄文!移動端 Banner 設計指南(附超多案例)

前後對比

最後我們來看看對比效果,是不是好很多。

萬字雄文!移動端 Banner 設計指南(附超多案例)

無論什麼樣的設計,加什麼樣的元素,目的只有一個就是要有理有據、有道理,所有的運營設計都是為了輔助主體文案。不要讓你的設計無用,或者減分,把設計元素最大化發揮它的作用才是設計的最終目的,你就說是不是吧!

更多突出主體的平面設計技巧:《背景與主體之如何讓背景突顯主體?》

最後我想說的是,設計沒有絕對的好與壞,能根據不同需求做出符合用戶體驗習慣的設計,才是好的設計。設計師任何不以解決問題為目的的設計,都是設計師的自我意淫。希望這篇文章能給大家帶來幫助!



分享到:


相關文章: