本文作者將給大家分析幾個(gè)電商設(shè)計(jì)作品，并且會(huì)從排版、配色、用戶體驗(yàn)、定位、用戶心理等各個(gè)角度給大家講解分析指出問題所在。

@做設(shè)計(jì)的面條?：這些年找我點(diǎn)評(píng)作品的人不少，但我發(fā)現(xiàn)一個(gè)現(xiàn)象，很多人做的設(shè)計(jì)也許從視覺上看是挺好的，但是卻很難有讓人過目不忘的感覺，總感覺缺少一些靈魂，所以假設(shè)用戶看到這些設(shè)計(jì)的時(shí)候呢？那么他們是無法在最短的時(shí)間內(nèi)明白你這個(gè)設(shè)計(jì)要表達(dá)什么的。

尤其是電商設(shè)計(jì)，是一定不能夠僅僅以視覺層面，比如排版/配色好不好看為主要設(shè)計(jì)方向的，而是要通過合理的設(shè)計(jì)手段把老板或運(yùn)營要展現(xiàn)給用戶的訴求表達(dá)清楚才最重要的，要權(quán)衡他們之間的訴求。

所以接下來我繼續(xù)給大家分析幾個(gè)電商設(shè)計(jì)作品，并且會(huì)從排版、配色、用戶體驗(yàn)、定位、用戶心理等各個(gè)角度給大家講解分析指出問題所在，這樣大家可以有針對(duì)性地去學(xué)習(xí)。

下面我們就開始進(jìn)入正式的點(diǎn)評(píng)環(huán)節(jié)好了，以下所有的作品都是由我的面粉們提供的，感謝。

一、Banner圖

面條點(diǎn)評(píng)：上面這張 Banner 圖大家看第一眼，嗯，整體綠色系配色很舒服，給人清新自然的感覺；再看第二眼，整體左右排版的形式也還行，周圍的氛圍點(diǎn)綴也不突兀，左邊一點(diǎn)右邊一點(diǎn)相呼應(yīng)；再看第三眼，文案特地用顏色和背景色塊區(qū)分，強(qiáng)調(diào)了「母乳」，嗯，沒毛病。

但是回頭一想，總感覺這張 Banner 缺少眼前一亮過目不忘的感覺，那么問題出在哪呢？我想問題就出在這個(gè) Banner 設(shè)計(jì)的定位錯(cuò)了。

之前我就給大家講過一個(gè)設(shè)計(jì)的順序：策劃活動(dòng)的目的決定了文案要怎么去寫，而文案的內(nèi)容又決定了設(shè)計(jì)的畫面應(yīng)該怎么去把握，這個(gè)是一環(huán)扣一環(huán)的才對(duì)，順序別搞反了。

所以一般我們通過文案就最容易明白這個(gè)活動(dòng)的目的是什么了，并且通過文案就可以去檢驗(yàn)這個(gè)設(shè)計(jì)合不合適。

那我們看一下這個(gè) Banner 的文案「母乳般濕潤呵護(hù)」，母乳般意味著安心、健康、天然、柔滑之類的，濕潤呵護(hù)意味著保濕滋潤呵護(hù)寶寶的肌膚，總而言之就是要表達(dá)這款沐浴露用了可以給寶寶安全舒適感，媽媽買了放心。

這是一種情緒上的感受，你得通過設(shè)計(jì)去傳達(dá)出來才對(duì)，但是這個(gè) Banner 設(shè)計(jì)除了顏色是綠色可以給人健康純天然的感覺以外，其他情緒是完全感受不到的，是干癟癟的，就像一些缺少氣質(zhì)或內(nèi)涵的美女，好看是好看，但就是讓人愛不起來。

并且如果我將這里產(chǎn)品替換成任何其他東西，只要顏色類似，好像都是可以的，你會(huì)發(fā)現(xiàn)它就像個(gè)模版一樣的存在。

我給大家舉幾個(gè)例子，看看什么叫通過設(shè)計(jì)畫面一眼就可以讓人感受到那種情緒和靈魂，足以波動(dòng)用戶的心弦。

比如在畫面加入模特笑容：因?yàn)槿魏稳硕嫉挚共涣嗣匀说男θ莸奈Φ模汜槍?duì)的是什么人群的用戶，你就用那個(gè)人群的迷人笑容，我這里找的圖只是給大家舉例。

這笑起來，我作為妹子都完全把持不住啊。（其實(shí)很多母嬰產(chǎn)品喜歡用媽媽或?qū)殞毜男θ荩皇菦]有道理的，非常有感染力）

比如構(gòu)建一個(gè)有趣的或者讓人快樂舒適的場景：一般都是在畫面融入一些手繪元素是比較省事的做法。

可以是全手繪：

可以是半手繪：

比如讓產(chǎn)品噴灑出來活躍下氣氛：這里一般也會(huì)加入一些手繪和合成的手法，不管你的產(chǎn)品是液態(tài)、固態(tài)還是粉末煙霧，其實(shí)都是適用的。

如果我們在里面融入一些小小的手繪元素，那就更打動(dòng)人了，感覺特別無害，寶寶產(chǎn)品、生活百貨品類都適用。

其實(shí)我之前設(shè)計(jì)的幾張手機(jī)照片海報(bào)系列作品，也是同樣的道理，這樣的設(shè)計(jì)很容易打動(dòng)人，總可以給人會(huì)心一笑的感覺：

那么，我們再回頭看看這張 Banner，你可以跟上面那些富有情感的有親和力的設(shè)計(jì)對(duì)比一下，哪個(gè)讓你更有購買的欲望？

因?yàn)檫@個(gè)定位的方向本就應(yīng)該是親和力＋安全方向的，所以對(duì)于這種路線的 Banner 設(shè)計(jì)來說，我想大部分人都應(yīng)該會(huì)被那種可以讓人會(huì)心一笑的設(shè)計(jì)而打動(dòng)而吸引吧。

做合適的設(shè)計(jì)，而不要局限于只是玩玩排版就夠了。

二、海報(bào)

面條點(diǎn)評(píng)：我們分析作品之前，可以先有個(gè)大概的概念，確立他是什么風(fēng)格的，然后再對(duì)比看看他的文案，就可以知道這是不是一個(gè)合適的設(shè)計(jì)了。

在這里我們可以看到，這個(gè)海報(bào)的文案是「潮流X強(qiáng)調(diào)」，這個(gè)海報(bào)要走潮流個(gè)性有情調(diào)的路線，那么大家看，這個(gè)設(shè)計(jì)合適嘛？

我的感覺是，這里模特是合適的，設(shè)計(jì)師要走的設(shè)計(jì)方向也是合適的，但就是設(shè)計(jì)師的思維有點(diǎn)局限，然后執(zhí)行起來有點(diǎn)不到位罷了，主要是排版、配色、細(xì)節(jié)方面的問題，比如配色和那些字體陰影和浮雕都感覺有點(diǎn)臟，右上角的模特切割的位置不合適，模特完全可以破出這個(gè)框架等問題。

那么針對(duì)這種情況和設(shè)計(jì)問題，當(dāng)然就是應(yīng)該多看多練習(xí)啊，我也是可以給大家一些參考方向，你可以看看人家的表現(xiàn)形式和排版配色等等，總之就是到潮、high、帶感就對(duì)了。

說到潮這方面，有貨yoho 和淘寶可都是一把好手。

比如有貨潮流新品節(jié)的潮：

我給大家總結(jié)了一下，大家抓住這些規(guī)律：

• 英文要夠?yàn)t灑，
• 顏色要夠亮瞎，
• 文字要夠大大….大，
• 大小粗細(xì)對(duì)比都用起來，
• 粗糙的黑色描邊是潮流設(shè)計(jì)師最愛，
• 看他模特夸張或玩世不恭的表情，
• 再整點(diǎn)復(fù)古玩意兒做裝飾品，
• 什么拼接風(fēng)或達(dá)達(dá)主義一樣都來點(diǎn)兒，
• 有什么不敢造的呢？
• 就怕你玩的不夠嗨啊！

好了，我總結(jié)完了，大家嗨了嗎？

再比如2018年淘寶新勢力的潮：

不過關(guān)于這個(gè)新勢力周的設(shè)計(jì)分析我之前寫過了，我就不繼續(xù)分析了，詳情→《搞定頁面視覺風(fēng)格統(tǒng)一性，看這篇文章就夠了！》。

當(dāng)然了，在我看來潮并不是一個(gè)固定的設(shè)計(jì)形式，因?yàn)槊總€(gè)人對(duì)于潮的理解不一樣，但潮的人一定都是敢于表現(xiàn)真我，愿意展現(xiàn)自己的那一類人，并且不喜歡一些條條框框束縛住自己，所以你的設(shè)計(jì)如果想要潮起來，就最好是能打破常規(guī)，千萬不要呆板小氣吧啦的。

關(guān)鍵詞：打破規(guī)則、文字或模特要大、模特穿著或表情要酷。

三、中秋海報(bào)

面條點(diǎn)評(píng)：這2張海報(bào)如果非要讓我選的話，我肯定會(huì)選第一張，至少畫面看起來干凈一點(diǎn)，構(gòu)圖也還行，但是也可以看出來設(shè)計(jì)師的執(zhí)行力差了點(diǎn)，比如中間的月球處理的比較粗糙，居然使用了木質(zhì)紋理代替月球表面的紋理細(xì)節(jié)，但因?yàn)榭粘瞿敲创笠粔K，這些粗糙的質(zhì)感就會(huì)特別顯眼，然后旁邊的月餅感覺懸浮了，其他元素之間也感覺銜接的不是很自然，這都是細(xì)節(jié)問題，執(zhí)行力方面的問題。

執(zhí)行方面的問題反應(yīng)的都是基本功不扎實(shí)和練習(xí)看的太少的問題，自己私下需要多花時(shí)間去提升，沒有別的法子，這里我就不做過多解釋了。

另外，我們既然提到了中秋節(jié)，中秋節(jié)也馬上就來了，我們干脆就講一講中秋節(jié)主題的設(shè)計(jì)可以怎么去玩。

關(guān)于中秋節(jié)相關(guān)的設(shè)計(jì)，目前大家最常用的方法就是聯(lián)想法，聯(lián)想法就是發(fā)散思維，去想與中秋相關(guān)的關(guān)鍵詞，比如中秋節(jié)我們會(huì)想到：玉兔、月球、月亮、嫦娥等等，然后中秋按習(xí)俗我們一般會(huì)吃月餅，并且這時(shí)候很多人會(huì)選擇送禮，送螃蟹等等。

那么關(guān)于中秋節(jié)的設(shè)計(jì)其實(shí)跟平時(shí)的設(shè)計(jì)沒啥大的差別，唯一就是要體現(xiàn)這是中秋節(jié)相關(guān)的設(shè)計(jì)，所以需要通過中秋相關(guān)的配色、中秋相關(guān)的元素、中秋相關(guān)的場景搭建等形式，來營造中秋的感覺。

大家可以自己去花瓣搜索「中秋節(jié)海報(bào)」找參考：

四、開學(xué)季專題頁

面條解答：這個(gè)開學(xué)季的頁面細(xì)節(jié)非常豐富，可以看得出來是花了些心思的，但同時(shí)也存在著一些問題，我給大家捋一捋這些問題分別在哪里。

我們從上往下看，首先是頭圖部分：

因?yàn)槭情_學(xué)季主題的頁面，所以設(shè)計(jì)師打造了一個(gè)教室的場景，其實(shí)是可以的，但是整個(gè)教室的比例和構(gòu)圖卻感覺不太合適，因?yàn)楦杏X是站在很遠(yuǎn)的地方去看一樣，距離太遠(yuǎn)了，所有的商品、文案全都堆積在了一起，小小的，這就給人的感覺不太好了。

你說我買個(gè)東西，還要隔那么遠(yuǎn)去買？望塵莫及的感覺，我難受啊。

所以這里的視線距離和商品比例肯定是需要調(diào)整的，我找了個(gè)構(gòu)圖和比例更合適的設(shè)計(jì)參考給大家看看：

這里參考頁面有樓層作前景、中間商品作中景，后面黑板報(bào)做遠(yuǎn)景，信息層級(jí)分明用戶看著就不累，商品和文案都很顯眼，然后整個(gè)教室場景很真實(shí)的感覺，再加點(diǎn)手繪人物和元素做氛圍點(diǎn)綴，整體反映出來的氣質(zhì)是適合開學(xué)季這個(gè)主題的。

再往下看，看樓層部分：這里設(shè)計(jì)師將每個(gè)標(biāo)題部分加入了尺子元素，但是這里太擬物化了，你會(huì)發(fā)現(xiàn)尺子作為點(diǎn)綴元素居然比樓層標(biāo)題和要售賣的商品還要突出顯眼，這個(gè)重要順序是不合理的，標(biāo)題應(yīng)該是主角才對(duì)，所以要么弱化尺子，要么突出標(biāo)題文字。

當(dāng)然尺子最好也不要擬物化的手繪形式，統(tǒng)一用簡筆畫的手繪形式更合適。

這個(gè)頁面其他方面的問題倒還好，不過多看幾眼會(huì)感覺頁面細(xì)節(jié)過多了，頁面略空，思維局限了，其實(shí)有很多其他形式的開學(xué)季啊，大家可以看看。

比如視角可以是俯視不一定是正視：

比如配色也可以多彩一些啊：

比如可以完全拋棄黑板報(bào)這種元素和教室這種場景啊：

好了，時(shí)間不早了，就點(diǎn)評(píng)到這里吧。

另外，我第一眼看這個(gè)頁面就感覺有我工作第2年的影子，然后和這位設(shè)計(jì)師聊了一下，發(fā)現(xiàn)其實(shí)他是半路轉(zhuǎn)行的，做設(shè)計(jì)果然已經(jīng)是2年了，巧了，這說明大家其實(shí)都是這樣過來的。

下面這個(gè)頁面就是我在2012年的時(shí)候設(shè)計(jì)的，那時(shí)候是我剛剛從 UI設(shè)計(jì)轉(zhuǎn)型做了電商設(shè)計(jì)，是我工作的第2個(gè)年頭，那會(huì)兒我也是喜歡用這種手繪簡筆畫＋虛線做背景氛圍點(diǎn)綴……現(xiàn)在看這種虛線的運(yùn)用其實(shí)是感覺有點(diǎn)過時(shí)了。

寫在最后

因?yàn)槲医?jīng)常回答大家的問題，經(jīng)常點(diǎn)評(píng)設(shè)計(jì)的緣故，所以當(dāng)我看到一個(gè)人的設(shè)計(jì)稿我就差不多可以看出 ta 的性格、工作時(shí)長、基礎(chǔ)扎不扎實(shí)了，比如上面那位面粉，我可以看出她思維比較局限，然后果然她性格也是這樣的，做很多事情都是畏畏縮縮的，不敢放開步子大膽去干。

所以如果你也感覺自己的設(shè)計(jì)遇到瓶頸了，沒有想法了，或者做出來的設(shè)計(jì)總感覺特別小家子氣，那很有可能你是需要改變一下自己的內(nèi)心了，放開一點(diǎn)，大膽去嘗試新鮮的事物（非違法的就行），你可能會(huì)有意想不到的收獲。

因?yàn)橛腥さ娜俗龀鰜淼脑O(shè)計(jì)往往也會(huì)是有趣的，但你很難讓一個(gè)無趣的人做出有趣的設(shè)計(jì)，因?yàn)樗芸赡芾斫獠涣耸裁唇杏腥ぐ　?/p>

作家一般為了寫作需要去體驗(yàn)很多種生活尋找靈感，設(shè)計(jì)師何嘗不是呢？多出去走走看看，不要局限了自己啊。

高不高于生活我不知道，反正我是深深地感受到設(shè)計(jì)是來源于生活的。

歡迎關(guān)注作者的微信公眾號(hào)「做設(shè)計(jì)的面條」，一個(gè)干貨與文筆俱佳的美女設(shè)計(jì)師。

微信公眾號(hào)簡介：專注開拓電商設(shè)計(jì)思維，不定期分享一些個(gè)人見解干貨，當(dāng)然也會(huì)分享一些頂級(jí)創(chuàng)意、攝影、人生感悟方面的好文啦。

「干貨超多的改稿案例」

• 《5個(gè)實(shí)操改稿案例，教你做出高質(zhì)量的Banner設(shè)計(jì)！》
• 《5個(gè)電商案例，教你學(xué)會(huì)優(yōu)雅高效地給設(shè)計(jì)師們提修改意見》
• 《設(shè)計(jì)道理誰都懂，為什么換自己就不會(huì)？》