骨頭電商專屬課堂！5個對比案列幫你解決設計的常見誤區

不沉的骨頭：說了那么多理論這次我們就以更直觀的方式來和大家一起看一些案列，希望能給大家一些幫助。 排版可以講100種都可以，可什么才是最有效的。估計就是不斷的做圖吧、不管是工作還是練習。

這次給大家帶來的是，將具體的設計案列進行修改前后的對比，分析設計的誤區以及修改的原因。所以這次不講理論、也沒有案例欣賞。純粹的案列分析對比我想或許這樣更加直接看到效果，易懂一些。

經?？吹揭恍┰O計稿，誤區明顯。所以這里挑選了一些案列分享，希望能對 工作經驗少人有所幫助。

感謝2位朋友貢獻他們的案列，要是被發現了會不會拿刀來打我，還是發個紅包給我，哈哈。

要是大家喜歡這種方式，后面有機會再出。以下分析均是個人觀點，共勉之。

Case 1 ?

Before修改前

▽

案列：女裝海報 ? ? ? ? ? ? ??尺 ? ? ?寸：1920x797px ? ? ? ? ? ? ? 安全區域：990px

亮點：模特不錯 ? ? ? ? ? ? ? 主要誤區：信息層級不清晰

縮略對照圖▽

誤區1

無效的英文裝飾效果

很多人都喜歡用英文去裝飾畫面，包括我以前也是。這是一個誤區、也不是說不可以用。必須在保證主題明確的條件下去裝飾，否則會擾亂信息閱讀。

除非頁面是以英文主題的。

誤區2

信息層級混亂、文案重復

其一在標題的處理上面，我們可以去與運營或產品溝通哪些是重點的。去放大它們區分它們，不要一味的為了排版的對齊。另外每一行的間距沒有細節太緊密了，緊湊的感覺不太妙。你會發現優秀的設計師他們的作品在間距行距上面會把控的很好。在我看來“全場36元起”這個才是最大的利益點，也是運營更加希望突出的，畢竟便宜死王道。

其二文案中有多次重復的信息是無效的、而且是閱讀的累贅。

誤區3

主體與標題過于緊密，沒有呼吸空間

總是有人會提出留白，但就總是有人會覺得空了。

其實恰恰相反，只要你把握在900px的空間，主體和標題之間有一定的空間呼吸。這樣畫面上面才會更加輕松舒適。

誤區4

標簽過于粗糙、信息過多

其一在標簽的處理上比較粗糙、負責化了。

標簽平時可以多關注下韓國電商頁面里面的處理。

其二信息太多，一般來說作為標簽可能它只有4個字或2個字。標簽的用途是快速傳遞信息、而且相對明顯。標簽的顏色和標題顏色完全沒有區分，這樣是錯誤的做法。

誤區5

無效的裝飾、海報高度過高

四個角無效的裝飾、相對于筆記本來說根本看不到。如果你是自適應網頁的，那當然可以有。

另外就是海報高度797px，這個高度相當高了，現在發現電商行業的設計師把頭圖的尺寸做的很高，我也不知道為什么，這是一個挺不好的現象。

做那么大，細節那么差，難的是為了讓我們更容易看到么。偷笑

After修改后

▽

縮略對照圖▽

修改1

信息層級細分、控制好每個單位的行距

其一直接去掉英文，因為根本是無效的。

其二把該放大的放大，該弱化的弱化，另外字體選擇細一些的，更符合女性。

其三控制每個單位之間的行距、#2016秋冬....#為一個單位 ，#全場360元....包郵#為一個單位。那它們之間的行距要大于一個單位里的行距。

修改2

信息層級細分、控制好每個單位的行距

其一直接去掉英文，因為根本是無效的。

其二把該放大的放大，該弱化的弱化，另外字體選擇細一些的，更符合女性。

其三控制每個單位之間的行距、#2016秋冬....#為一個單位 ，#全場360元....包郵#為一個單位。那它們之間的行距要大于一個單位里的行距。

修改4

主體與主題留有一定空間

直接把人物往有移動一定的空間，這個沒有具體的位置只要在視覺上是舒服的即可。但要保證在安全區域內。

修改5

優化功能按鈕

把按鈕放大并且做的是可以點擊的狀態，別用黑色、白色這些。這些更像是不可點擊態，另外可以加上小icon更生動一些。

案列總結：

1、信息層級必須分清楚

2、行距以單位把控好 ? ? ? ? ? ? ? ? ? 3、該區分的區分

Case 2 ?

Before修改前

▽

縮略對照圖▽

案列：飛利浦海報 ? ? ? ? ? ? ? ? ? ? 尺 ? ? ? 寸：1920x700px ? ? ? ? ? ? 安全區域：990px

亮點：背景縱深感強 ? ? ? ? ? ? ? ? 主要誤區：信息層級不清晰、飄絮過于強調

誤區1

商品之間沒有大小對比、商品重復

其一商品之間沒有對比、有2個一樣的只是存在顏色不同，我不建議放上來。對于商品擺放來說，4個商品這樣擺放也會顯得沒有“男豬腳”

其二商品與商品之間有一些松散。

其三逆光和環境色不夠、所以顯得商品還沒有融合到畫面中。

誤區2

標題毫無主體

其一標題沒有一個重要的，而且相對來說很小。極其的靠右這樣是最大的錯誤。其二英文裝飾過重、應當弱化。英文如果是需要，可以多找些英文和中文這樣的標題組合，但還是要分清楚重點。

誤區3

背景上面有點偏白、顏色有些欠缺

其一中間上面有點偏白，沒有內容。顯得畫面有些空洞了。

其二背景的顏色有些過于偏黃了，可以加一些顏色。逆光也同樣有一些欠缺。

誤區4

飄絮過于粗糙、復雜

在添加飄絮裝飾氛圍的時候，我們不要一味的去添加。合適就行，有時候只需要有一些感覺即可。特別是這種碎、細的飄絮。

After修改后

▽

縮略對照圖▽

修改1

拉開“男豬角”和配角直接的大小

其一減少到3個商品擺放，這樣更加具有穩定性。其次拉開他們直接的大小，這樣就有了對比。

其二給商品用中性灰修圖增強明暗對比，效果是很顯著的。

其三商品周邊增加一些環境光，另外他們直接的陰影不能忘記。

修改2

主標題重點化

其一挑出文案的重點作為標題，一般來說不超過8個字

這里我隨便起來一個標題，直接放大它，方法簡單粗暴、但效果顯著明了。其次要注意的是不要干巴巴的直接丟文字上去，給他們分層、動態模糊做一些效果處理，會更精致一些。

其二在商品背后加一層薄薄的英文裝飾一下。

修改3

優化背景顏色

其一在背景的顏色上面增加一些紅色，畫面會更暖一些。其次背景上面增加一些云做背景，避免太白過于空洞。

其二增加一些逆光、逆光可以通過一些光的射線濾色后處理。

修改4

弱化、在弱化飄絮

其一降低透明度，減少飄絮數量。

其二顏色上面也要避免單純的灰白色、可以調一些顏色上去，跟畫面的融合感會更強。

案列總結：

1、頁面需要一個“男豬腳“ ? ? ? ? ?2、環境光、逆光不能少

3、飄絮要做一定的弱化

Case 3 ?

Before修改前

▽

縮略對照圖▽

案列：女裝促銷海報 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 尺 ? ? ?寸：1920x646px ? ? ? ? 安全區域：990px

亮點：流動舒服、模特角度不錯 ? ? ? ? ? 主要誤區：配色不和諧、商品突兀

誤區1

標題細節缺乏

其一標題的處理方法上面是可以加描邊處理的、但一定不能過于突兀，現在的黑色描邊就比較突兀。

其二立體面的顏色不夠深，黑色描邊更加復雜了。

其三標題沒有做陰影層，所以在畫面上面顯得比較尷尬，不夠融合。

誤區2

裝飾元素略散、對比不夠

其一裝飾元素沒有虛和實、大和小的區分，所以就少了對比。

其二位置上面和主要內容偏遠了一點。

誤區3

商品處理不恰當

其一商品處理上顯得突兀，沒有虛實的處理，干巴巴的擺放在哪里。

其二商品也沒有陰影，所以造成了不融合，顯假。

誤區4

背景空間感不足

其一背景的明暗、深淺不夠，所以讓畫面變的比較平。當然也考驗這樣做，但要考慮真個畫面，如果你的需要把背景做的比較平，那字體就不要做立體了。

其二配色比較突兀、紫色和綠色搭配不夠明亮也不舒服。

其三圖案有點過于明顯，因為如果你是想做比較有空間感的畫面，所以要么不加圖案或者弱化。不然圖案的排列會把頁面顯得更平。

After修改后

▽

縮略對照圖▽

修改1

完善標題細節

其一調整描邊顏色跟選擇和背景相近的顏色即可，順便增加一點內陰影，立體感更強一點。

其二去掉里面的描邊，增加陰影。弱化圖案疊加。

修改2

增強元素的對比

其一調整元素的大小，區別大一點，大膽一些。增加虛實關系營造遠近關系。

其二實的元素向中間靠攏一些，虛的元素向外。

修改3

處理商品細節

其一部分商品虛化增強空間感，1-2個做個動態模糊效果增強效果。

其二部分顏色調成和背景相近的顏色和頁面融合，其次需要給商品加上陰影，更加真實。

修改4

大膽的調整配色

其一背景的明暗關系大膽的調整，沒錯在大膽一些，營造空間感。

其二調整利益點的顏色、紫色和黃色搭配是個不錯的選擇，黃色總是一個好選擇。

案列總結：

1、背景空間感大膽的調整明暗關系

2、配色選個明亮的顏色 ? ? ? ? ? ?3、虛化該虛化的

Case 4 ?

Before修改前

▽

縮略對照圖▽

案列：banner ? ? ? ? ? ? ? ? ? ?尺 ? ? ?寸：1125x360px ? ? ? ? ? ? ? ?安全區域：留一定邊距

亮點：模特俏皮可愛、選品不錯 ? ? ? ? ? ? ?主要誤區：信息不突出、元素混亂

誤區1

標題處理效果突兀

其一標題在顏色方面沒有一個很明顯的區分。

其二圖案疊加在文字里面讓文字變得更加不清晰了，太過了。

誤區2

色塊形式復雜

其一條紋排列過于復雜化了，而且在這一塊位置顯得更加沉重了，處理的不夠輕松。

其二陰影處理的比較重，顯然是不是個好主意。

誤區3

標簽粗糙的不像話

其一標簽真的好粗糙，叫我一個設計師怎么看的下去。不行了我的強迫癥要犯了。

其二顏色和背景都融合起來了，啊，好想打人。

其三那個毛邊邊是什么鬼，這個設計你給我粗來。

誤區4

背景顏色深淺不夠、裝飾亂

其一背景比較平了，深淺關系沒有做出來。要么就不要做高光嘛，做了高光為什么不做暗部呢。

其二背景后面的長條形狀比較亂，雖然很淺，但我還是覺得比較亂。多則亂。

誤區5

飄絮元素亂

其一很明顯綠色和粉絲搭配是不和諧的。

其二飄絮多了，有了櫻花就已經足夠了。綠葉純粹就是畫蛇添足。

其三標題上面的那些綠葉簡直了。

After修改后

▽

縮略對照圖▽

修改1

標題信息區分化

其一去掉圖案、顏色調成微漸變，這樣更加輕薄、時尚。

其二全球首發特殊化處理、更類似于一個標簽一樣顏色搭配和粉絲相近的紫色，顏色也是微漸變。

其三增加投影，淺一些。不要太重。

修改2

飄絮簡化

其一直接去掉和頁面不搭的綠葉，另外說句別拿東西當住文字。

其二櫻花大小變化，3-4個即可。多則亂。

修改3

處理標簽細節

其一原本的表情形狀是不錯的，但是還不夠圓滑。處理上也是很粗糙，調整下圓滑度。其次顏色可以為漸變色，這樣會更加時尚化。

其二可以在一個圓點孔類似書簽一樣，這樣看起來更加精致。

修改4

提煉輔助形

直接把長條和圓形拿上來，做一些顏色上的處理。其次需要減少數量。增加氣氛和動感。

修改5

突出信息

其一既然我們的配色要和背景相近，但我們也要把它們區分開來。我建議是直接拉通色塊，這樣形式也有了，商品人物、文字都突出清晰了。

案列總結：

1、元素多則亂 ? ? ? ? ? ? ? 2、千萬別讓信息和背景融合

3、漸變的用色會更加時尚

Case 5 ?

Before修改前

▽

縮略對照圖▽

案列：banner ? ? ? ? ? ? ? 尺 ? ? ?寸：705x305px ? ? 安全區域：留一定邊距

亮點：.................. ? ? ? ?主要誤區：主題不夠明顯

誤區1

標題過于簡單

其一標題之間沒有一個很好的區分，特別是在顏色上面。

其二有點太過簡單了，雖然是要你穿的簡單點。

誤區2

背景紋理復雜

其一背景上面的圖案紋理有一些復雜了，太細了些感覺不夠Men。畢竟是男性。

其二背景略簡單了，純色快?？梢约右恍┣榫?，增加大牌感。

誤區3

多余的東西

其一放個人影在后面是干嘛，這是要分身么

其二還是同一個人，直勾勾的盯著我，我害怕。人一害怕就想抓點什么?(? ???ω??? ?)?

誤區4

突兀的元素

白框在這里形式還好，但是有點太過明顯了。我們需要把不重要的東西弱化，不能喧賓奪主。

After修改后

▽

縮略對照圖▽

修改1

標題層級區分

將標題區分開來，在我看來穿的簡單更像主標題，所以要更加突出。其它都是輔助文案，因為壓根就沒什么利益點。其次給標題增加一些重疊的感覺，更有設計感。

修改2

背景情景化

把背景配上一些男性帥哥的圖片，情景化。這樣更有看點，也更有魅力。還有一點點大牌的感覺呢。

修改3

弱化該弱化的

其一白色的框并不需要那么多出，只是裝飾作用。所以我們需要把它隱藏起來，對就是弱化。

其二弱化顏色。

案列總結：

1、別人背景太過復雜，情景化也是個不錯的選擇

2、標題不要干巴巴，盡量做一些處理

歡迎關注我的個人公眾號“三根設計骨”

往期電商設計好文回顧：

1. 《高效流程！幫你快速做出優秀電商BANNER 的設計三部曲》
2. 《超實用！5個幫你快速進階的電商BANNER 設計技巧（案例多）》
3. 《設計基礎功！聊聊平面構成中的點線面（超多案例）》
4. 《電商好文！超多實戰案例幫你解鎖5種商品擺放姿勢》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com