資深UI設(shè)計師的5個bander實例

雖然我以前寫過諸多電商設(shè)計和Banner設(shè)計方面的文章，也做過很多設(shè)計點(diǎn)評，但是因為懶和時間精力有限的緣故，我?guī)缀鹾苌儆H自去改稿，畢竟我覺得自己的時間也蠻值錢的，所以我只做自己想做的事情。

但很多人會覺得如果能看到改稿前后的對比效果以及修改的原因就好了，因為大家平時在做設(shè)計的時候可能經(jīng)常會好無頭緒或者看不出自己的問題在哪里，所以我匯總挑選了5個我近段時間的實操案例給大家看看，相信你們看完今天的改稿對比后，會更加清晰自己平時所存在的問題。

改稿案例一  

接下來我給大家分析一下原圖存在的問題，以下是改稿前的原圖：

這張圖，說實話如果是給新手看他估計覺得沒什么問題，因為初一看，排版也尚可，粉紅粉藍(lán)嫩黃的顏色搭配也還行，比較少女系，只是整體比較常規(guī)罷了。但是內(nèi)行人再稍微深入一些去看待，就會發(fā)現(xiàn)很多問題，（作為一個內(nèi)行人的）我給大家一一列舉出來看看你就明白了。

首先，這個Banner看文案便知是情人節(jié)主題的，而情人節(jié)主題的banner設(shè)計其實有很多種感覺氛圍可以去表現(xiàn)，比如浪漫的、小清新的、華麗的、炫酷的等等，那么這里感覺設(shè)計師是想往粉嫩可愛的方向去發(fā)揮，剪紙風(fēng)格方向，并且是賣一些女性相關(guān)的包包配飾香水之類的產(chǎn)品，整體是想臨摹一種商品陳列的感覺。
基于以上分析，我總結(jié)出了以下問題：

（1）整體顏色偏灰，給人感覺不太干凈，尤其是標(biāo)題文案部分的顏色和陰影處理；

（2）標(biāo)題字體采用了襯線字體，這種字體用于剪紙風(fēng)格會顯得比較復(fù)雜，因為各種小細(xì)碎的筆畫太多了，所以要么更換一些比較簡單的非襯線字體樣式，或者是比較浪漫氣質(zhì)的連體手寫體英文，自然流暢，主要看你想表達(dá)什么感覺；

（3）商品選擇有點(diǎn)問題，比如最中間那款包包的風(fēng)格明顯跟其他產(chǎn)品風(fēng)格不搭，其他都是比較簡潔現(xiàn)代的樣式，而這款包包卻過于實物化以及復(fù)雜，像一件衣服還帶有格紋，并且包包四角還帶有圓潤的圓角，所以為了保持整體風(fēng)格基調(diào)一致應(yīng)該替換掉。

（4）排版布局方面，除了標(biāo)題文案部分的排版節(jié)奏不太優(yōu)美以外（長－短－更長的比例節(jié)奏可以改為短－長－短或長－更長－長等等節(jié)奏樣式），商品部分大比例太過于平均，分布有些散亂，所以看不到重點(diǎn)）；

（5）細(xì)節(jié)方面，比如那些心形的形狀扭曲曲線太多了，看起來就很不現(xiàn)代不簡練，畫面里所有的陰影看起來都非常假，氣球部分的形狀看起來也像泄了氣，長長的橢圓形看起來不夠飽滿有精神氣兒，而且氣球作為一個氛圍點(diǎn)綴物，它的大小居然已經(jīng)趕上商品了，顏色又比較搶眼，所以不太合適；

（6）整體背景部分被一條直線切割開來，使得畫面過于保守，影響了浪漫氛圍的傳遞，所以應(yīng)該靈活變通，通過增加其他物件或調(diào)整設(shè)計形式的方式來打破這種呆板的感覺，讓畫面動起來。

基于以上6條問題分析，于是我改出了下面這版banner：

我改稿和指導(dǎo)人的原則是，只要原設(shè)計師在大的設(shè)計方向上沒什么問題，那就盡量保留原設(shè)計師的想法，然后我會在細(xì)節(jié)、比例、節(jié)奏、色彩、字體、創(chuàng)意方向上對原稿進(jìn)行修正和補(bǔ)充，從而讓畫面更加有感染力，所以對比改稿前和改稿后，你們應(yīng)該可以感受到畫面所傳遞出的情感和信息層級上微妙的變化，因為我讓畫面更加夢幻了，產(chǎn)品也更加突出了。

當(dāng)然這里也需要說明一下，一個小小的banner設(shè)計里面其實蘊(yùn)涵了大量的方向／維度／信息，你可以選擇以突出氛圍為主，你也可以選擇突出文字為主，你也可以選擇突出商品為主，甚至如果你覺得自己夠厲害你可以把他們都突出但是又能做到整體協(xié)調(diào)，這些都是你自己的選擇問題，設(shè)計并沒有唯一答案，主要看你有什么需求方向。

改稿案例二   

接下來我給大家分析一下原圖存在的問題，以下是改稿前的原圖：

這張圖新手也是看不出問題的，因為感覺用色挺好看，文字信息也挺突出的，但是它確實存在很多問題，接下來我把問題一層一層剝給大家看。

首先看文案信息，我們可以得知這張banner其實是屬于低價熱鬧促銷類型的，畫面氛圍可以鬧騰一點(diǎn)，你可以假想它是一個放在銀行或商城自己官網(wǎng)內(nèi)部的一個會員積分兌換活動Banner，所以這個Banner在設(shè)計方向和用色上問題都不大，但是整體視覺效果比較差。

基于以上分析，我總結(jié)出了以下問題：

（1）因為頭部那2片圖層的遮蓋，導(dǎo)致視覺上感覺中間那個圓形主體在往下掉，整體畫面非常不穩(wěn)定，而且那2片圖層的形不好看；

（2）中間圓形部分看起來像是由3個圓形組成，但是因為部分區(qū)塊顏色接近，所以圖層融在一起了，看起來太曖昧不清；

（3）所有的商品看起來都是亂擺的，毫無規(guī)律可言，并且商品全都是小小的跟螞蟻一樣大小，放在這些大圓里面感覺特別奇怪，就像在甜甜圈上胡亂灑了一些各式各樣的不明物體一樣，這一部分的問題最大；

（4）所有以上問題，使得這張Banner畫面不平衡，既呆板也凌亂，沒有美感；

基于以上4條問題分析，于是我改出了下面這版banner：

同樣的，這一張Banner我也是盡量保留了原設(shè)計師的想法，然后在細(xì)節(jié)、比例、節(jié)奏、色彩、字體、創(chuàng)意方向上對原稿進(jìn)行修正和補(bǔ)充：調(diào)整了商品的擺放秩序，去掉了部分商品，底部添加相似的一些圖層托住這個圓形主體，改變部分圖層的前后關(guān)系等等，所以你對比改稿前和改稿后的效果，會發(fā)現(xiàn)一張圖在保證信息傳達(dá)準(zhǔn)確的前提下，從無序變成了有序，同時也不再失衡和呆板了。

改稿案例三  

接下來我給大家分析一下原圖存在的問題，以下是改稿前的原圖：

這張原圖，估計即便是個新手也能看出來問題了，那就是感覺看了眼花，都眩暈了，另外還有其他一些問題，我統(tǒng)一給大家列舉一下：

（1）背景的圓太規(guī)則，讓人感覺眩暈，尤其是紅白的顏色搭配非常搶眼，在這種情況下，你在這個畫面里放入任何東西，都很難得到突出展示，因為背景的視覺干擾太強(qiáng)烈了；

（2）模特沒選好，在背景很眩暈的情況下，模特的表情又是直勾勾冷冷地盯著你的，給人一種不寒而栗的感覺，觀眾看了也會感覺渾身不自在，不友好，而且模特?fù)笀D比較粗糙，頭發(fā)部分很假，模特未做任何處理直接bia在了上面，讓人感覺很突兀

（3）整體場景沒有構(gòu)想好，不知道自己為什么要做這張圖，技術(shù)不到位，實現(xiàn)不了一些效果也是其中一方面的原因；

基于以上3條問題分析，于是我改出了下面這版banner：

在這里雖然我依舊保留了圓形這個特色形狀元素，但是將后面的圓形位置都打亂了，目的是制造一種不規(guī)則的感覺，并且替換了模特和商品，讓她置身于這些圓形漩渦里，一層一層的感覺，這樣既使得模特和商品突出聚焦了，整體畫面也不會太呆板，整體顏色依舊是依據(jù)模特和商品來，無非就是同色系或?qū)Ρ壬实倪\(yùn)用，總之，最后你對比改稿前和改稿后的設(shè)計稿，就能發(fā)現(xiàn)哪個看起來視覺上更舒適產(chǎn)品誰更突出了。

哦對了，這張banner的關(guān)鍵點(diǎn)在于陰影和整體色調(diào)的處理，做設(shè)計雖說很多時候是需要感性思維的，但其實在執(zhí)行環(huán)節(jié)上卻需要強(qiáng)大的理性思維和耐性，越復(fù)雜的圖越是如此，因為圖層多了的話你就要有清晰的思維去理順?biāo)鼈?，耐性地做?xì)節(jié)，這樣出來的畫面才會是有序的耐看的。

改稿案例四   

接下來我給大家分析一下原圖存在的問題，以下是改稿前的原圖：

這張圖也是新手并不覺得會有什么問題，無非就是比較常規(guī)的左右排版樣式而已，但是我認(rèn)為這張圖其實很好發(fā)揮創(chuàng)意但是卻做得很常規(guī)這是我無法接受的，再一個，如果一個人做常規(guī)圖做久了思維肯定是非常固化的，所以要想進(jìn)步的話一定要試著去突破自己。

接下來我給大家分析一下，這張Banner圖其實可以看作是波點(diǎn)主體的賣場banner，說到波點(diǎn)，其實我們很容易想到日本的“波點(diǎn)女王”草間彌生，她就是一個將波點(diǎn)玩出了各種花樣的一位設(shè)計師，腦洞非常大，扯遠(yuǎn)了，我們繼續(xù)聊這個Banner存在的問題：

（1）這個Banner最大的問題在于缺少有趣的感覺，浪費(fèi)了波點(diǎn)這個可發(fā)揮的空間，讓人沒有購買欲望，在這里突出一種氛圍其實比突出商品更為重要；

（2）商品挑選的不好，毛衣皺巴巴的，尤其是搭配這樣的排版看起來非常廉價，這樣毫無品味的商品怎么配得上“經(jīng)典私櫥”幾個字呢？怎么讓人愛的起來呢？所以商品得換；

（3）背景的波點(diǎn)太多太雜碎了，讓人感覺很混亂，很復(fù)雜，所以得精簡；

基于以上3條問題分析，于是我改出了下面這版banner：

這張Banner其實改動還是比較大的，因為整個排版和配色都換了，我僅僅只是保留了幾個商品圖而已，在這里我將標(biāo)題結(jié)合波點(diǎn)這個概念做了一些小改動，將商品弱化到各種圓形里面去成為一種氛圍元素，包括愛心圖形的加入，所有的這些改動其實只有一個目的：那就是把畫面的氛圍調(diào)動起來，讓它看起來有趣好玩一點(diǎn)，將波點(diǎn)這個概念盡可能多地展現(xiàn)出來，因為我就是要讓畫面可愛一點(diǎn)再可愛一點(diǎn)。

當(dāng)然這個Banner設(shè)計其實也是沒有唯一答案的，具體要看你怎么去理解你要表達(dá)的方向了，比如我覺得氛圍更重要，而有人可能覺得商品或文案更重要，總之，它的可發(fā)揮空間的方向是非常多的，不要局限了自己的思維就好。

改稿案例五   

接下來我給大家分析一下原圖存在的問題，以下是改稿前的原圖：

這張banner海報圖其實是情人節(jié)主題的，而且要體現(xiàn)出可愛的感覺，所以采用了模特＋手繪的表現(xiàn)形式，這個整體的設(shè)計方向沒什么問題，顏色也問題不大，問題主要在于以下幾點(diǎn)：

（1）整體畫面太散了，所有的元素之間仿佛沒什么聯(lián)系，像一盤散沙，所以需要重新理順元素之間的關(guān)系；

（2）元素比例存在問題，標(biāo)題太小，模特也太小，其他元素都差不多大小，所以整體看起來沒什么重點(diǎn)；

（3）模特看起來像是剛挖煤回來，又灰又黃，裙擺太搶眼，模特都是這個樣子了，那么誰還有購買欲望呢？所以模特是一定要調(diào)色修圖的；

（4）陰影的處理效果太假了，在這里并不適合這樣的陰影處理方式，所以得換，尤其是模特感覺沒落地，這樣整體一看，畫面就非常粗糙，完全不想多看幾眼，要知道電商設(shè)計的要義就是要讓顧客有購買欲望要吸引用戶的注意力，去點(diǎn)擊去看??；

基于以上4條問題分析，于是我改出了下面這版banner海報：

如果你仔細(xì)對比改稿前和改稿后，你會發(fā)現(xiàn)改稿后的畫面更加明朗／有秩序／有主體了，因為我重組了畫面里的元素，讓它們變成了有意義的存在，而不是隨便丟到畫布里的一種點(diǎn)綴元素而已，比如那些愛心，比如氣球的處理方式等，當(dāng)然最為重要的還是模特修圖調(diào)色和陰影的處理，在這里起到了至關(guān)重要的作用，我想有機(jī)會的話，我們有必要講一講各種陰影的處理方式，因為我發(fā)現(xiàn)這個是很多人的弱項。

其實在我的概念里，任何東西都是活的，我從來不會單一的去看待問題，做設(shè)計也是如此，所以我才可以做到你給我一張圖我就能一眼看出問題所在，并且改出自己想要的效果，并且我發(fā)現(xiàn)，設(shè)計這東西其實是沒有唯一答案的，你處在什么階段你所表達(dá)的就是這個階段的效果和意義，興許再過幾年我還能改得更好，看得更遠(yuǎn)更全面，畢竟持續(xù)不斷的練習(xí)和思考才是進(jìn)步的前提。

好了，今天的Banner實操改稿和講解就到這里吧，你們的收獲和喜歡就是我繼續(xù)更新良心干貨的動力，既然是好東西，也歡迎大家分享出去讓更多人學(xué)習(xí)到哇～

這里是《做設(shè)計的面條》，一個懂生活的良心干貨電商公眾號，我們下期再見！～

原文地址：做設(shè)計的面條（公眾號）

作者：TTTing

相關(guān)文章--《UI設(shè)計小白和大牛是怎么分析需求的》