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

雖然我以前寫(xiě)過(guò)諸多電商設(shè)計(jì)和Banner設(shè)計(jì)方面的文章，也做過(guò)很多設(shè)計(jì)點(diǎn)評(píng)，但是因?yàn)閼泻蜁r(shí)間精力有限的緣故，我?guī)缀鹾苌儆H自去改稿，畢竟我覺(jué)得自己的時(shí)間也蠻值錢(qián)的，所以我只做自己想做的事情。

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

改稿案例一  

接下來(lái)我給大家分析一下原圖存在的問(wèn)題，以下是改稿前的原圖：

這張圖，說(shuō)實(shí)話(huà)如果是給新手看他估計(jì)覺(jué)得沒(méi)什么問(wèn)題，因?yàn)槌跻豢矗虐嬉采锌?，粉紅粉藍(lán)嫩黃的顏色搭配也還行，比較少女系，只是整體比較常規(guī)罷了。但是內(nèi)行人再稍微深入一些去看待，就會(huì)發(fā)現(xiàn)很多問(wèn)題，（作為一個(gè)內(nèi)行人的）我給大家一一列舉出來(lái)看看你就明白了。

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

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

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

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

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

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

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

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

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

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

改稿案例二   

接下來(lái)我給大家分析一下原圖存在的問(wèn)題，以下是改稿前的原圖：

這張圖新手也是看不出問(wèn)題的，因?yàn)楦杏X(jué)用色挺好看，文字信息也挺突出的，但是它確實(shí)存在很多問(wèn)題，接下來(lái)我把問(wèn)題一層一層剝給大家看。

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

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

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

（2）中間圓形部分看起來(lái)像是由3個(gè)圓形組成，但是因?yàn)椴糠謪^(qū)塊顏色接近，所以圖層融在一起了，看起來(lái)太曖昧不清；

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

（4）所有以上問(wèn)題，使得這張Banner畫(huà)面不平衡，既呆板也凌亂，沒(méi)有美感；

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

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

改稿案例三  

接下來(lái)我給大家分析一下原圖存在的問(wèn)題，以下是改稿前的原圖：

這張?jiān)瓐D，估計(jì)即便是個(gè)新手也能看出來(lái)問(wèn)題了，那就是感覺(jué)看了眼花，都眩暈了，另外還有其他一些問(wèn)題，我統(tǒng)一給大家列舉一下：

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

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

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

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

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

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

改稿案例四   

接下來(lái)我給大家分析一下原圖存在的問(wèn)題，以下是改稿前的原圖：

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

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

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

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

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

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

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

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

改稿案例五   

接下來(lái)我給大家分析一下原圖存在的問(wèn)題，以下是改稿前的原圖：

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

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

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

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

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

基于以上4條問(wèn)題分析，于是我改出了下面這版banner海報(bào)：

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

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

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

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

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

作者：TTTing

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