本文將具體案例進(jìn)行修改后，進(jìn)行前后對(duì)比，分析設(shè)計(jì)誤區(qū)以及修改的原因。所以，文章里沒有理論，也不是案例欣賞。純粹的案例分析對(duì)比這樣更能直接看到效果，更易懂。

說了那么多理論，這次我們就以更直觀的方式來和大家一起看一些案例，希望能給大家一些幫助。

排版可以講100種都可以，但什么才是最有效的？估計(jì)就是不斷地做圖，不管是工作還是練習(xí)。

這次給大家?guī)淼氖?，將具體的設(shè)計(jì)案例進(jìn)行修改前后的對(duì)比，分析設(shè)計(jì)的誤區(qū)以及修改的原因。所以，這次不講理論、也沒有案例欣賞。純粹的案例分析對(duì)比，我想或許這樣更加直接看到效果，易懂一些。

經(jīng)?？吹揭恍┰O(shè)計(jì)稿，誤區(qū)明顯。所以這里挑選了一些案例分享，希望能對(duì)工作經(jīng)驗(yàn)少人有所幫助。

感謝2位朋友貢獻(xiàn)他們的案例，要是被發(fā)現(xiàn)了會(huì)不會(huì)拿刀來打我？還是發(fā)個(gè)紅包給我，哈哈。

要是大家喜歡這種方式，后面有機(jī)會(huì)再出。以下分析均是個(gè)人觀點(diǎn)，共勉之。

? Case 1

Before修改前

誤區(qū)1：無效的英文裝飾效果

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

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

誤區(qū)2：信息層級(jí)混亂、文案重復(fù)

1. 在標(biāo)題的處理上面，我們可以去和運(yùn)營(yíng)或產(chǎn)品溝通哪些是重點(diǎn)的。去放大它們區(qū)分它們，不要一味地為了排版的對(duì)齊。另外每一行的間距沒有細(xì)節(jié)太緊密了，緊湊的感覺不太妙。你會(huì)發(fā)現(xiàn)優(yōu)秀設(shè)計(jì)師們的作品在間距行距上面會(huì)把控得很好。在我看來“全場(chǎng)36元起”這個(gè)才是最大的利益點(diǎn)，也是運(yùn)營(yíng)更加希望突出的，畢竟便宜死王道。
2. 文案中有多次重復(fù)的信息是無效的、而且是閱讀的累贅。

誤區(qū)3：主體與標(biāo)題過于緊密，沒有呼吸空間

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

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

誤區(qū)4：標(biāo)簽過于粗糙、信息過多

1. 在標(biāo)簽的處理上比較粗糙、負(fù)責(zé)化了。標(biāo)簽平時(shí)可以多關(guān)注下韓國(guó)電商頁面里面的處理。
2. 信息太多，一般來說作為標(biāo)簽可能它只有4個(gè)字或2個(gè)字。標(biāo)簽的用途是快速傳遞信息、而且相對(duì)明顯。標(biāo)簽的顏色和標(biāo)題顏色完全沒有區(qū)分，這樣是錯(cuò)誤的做法。

誤區(qū)5：無效的裝飾、海報(bào)高度過高

四個(gè)角無效的裝飾、相對(duì)于筆記本來說根本看不到。如果你是自適應(yīng)網(wǎng)頁的，那當(dāng)然可以有。

另外就是海報(bào)高度797px，這個(gè)高度相當(dāng)高了，現(xiàn)在發(fā)現(xiàn)電商行業(yè)的設(shè)計(jì)師把頭圖的尺寸做的很高，我也不知道為什么，這是一個(gè)挺不好的現(xiàn)象。

做那么大，細(xì)節(jié)那么差，難道是為了讓我們更容易看到么？

After修改后

縮略對(duì)照?qǐng)D：

修改1：信息層級(jí)細(xì)分、控制好每個(gè)單位的行距

1. 直接去掉英文，因?yàn)楦臼菬o效的。
2. 把該放大的放大，該弱化的弱化，另外字體選擇細(xì)一些的，更符合女性。
3. 控制每個(gè)單位之間的行距、#2016秋冬……#為一個(gè)單位 ，#全場(chǎng)360元……包郵#為一個(gè)單位。那它們之間的行距要大于一個(gè)單位里的行距。

修改2：信息層級(jí)細(xì)分、控制好每個(gè)單位的行距

1. 直接去掉英文，因?yàn)楦臼菬o效的。
2. 把該放大的放大，該弱化的弱化，另外字體選擇細(xì)一些的，更符合女性。
3. 控制每個(gè)單位之間的行距、#2016秋冬…..#為一個(gè)單位 ，#全場(chǎng)360元…..包郵#為一個(gè)單位。那它們之間的行距要大于一個(gè)單位里的行距。

修改3：主體與主題留有一定空間

直接把人物往有移動(dòng)一定的空間，這個(gè)沒有具體的位置只要在視覺上是舒服的即可。但要保證在安全區(qū)域內(nèi)。

修改4：優(yōu)化功能按鈕

把按鈕放大并且做的是可以點(diǎn)擊的狀態(tài)，別用黑色、白色這些。這些更像是不可點(diǎn)擊態(tài)，另外可以加上小icon更生動(dòng)一些。

案例總結(jié)

1. 信息層級(jí)必須分清楚；
2. 行距以單位把控好；
3. 該區(qū)分的區(qū)分。

?Case 2 ?

Before修改前

縮略對(duì)照?qǐng)D：

誤區(qū)1：商品之間沒有大小對(duì)比、商品重復(fù)

1. 商品之間沒有對(duì)比、有2個(gè)一樣的只是存在顏色不同，我不建議放上來。對(duì)于商品擺放來說，4個(gè)商品這樣擺放也會(huì)顯得沒有“男豬腳”。
2. 商品與商品之間有一些松散。
3. 逆光和環(huán)境色不夠、所以顯得商品還沒有融合到畫面中。

誤區(qū)2：標(biāo)題毫無主體

1. 標(biāo)題沒有一個(gè)重要的，而且相對(duì)來說很小。極其的靠右這樣是最大的錯(cuò)誤。
2. 英文裝飾過重、應(yīng)當(dāng)弱化。英文如果是需要，可以多找些英文和中文這樣的標(biāo)題組合，但還是要分清楚重點(diǎn)。

誤區(qū)3：背景上面有點(diǎn)偏白、顏色有些欠缺

1. 中間上面有點(diǎn)偏白，沒有內(nèi)容。顯得畫面有些空洞了。
2. 背景的顏色有些過于偏黃了，可以加一些顏色。逆光也同樣有一些欠缺。

誤區(qū)4：飄絮過于粗糙、復(fù)雜

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

After修改后

縮略對(duì)照?qǐng)D：

修改1：拉開“男豬角”和配角直接的大小

1. 減少到3個(gè)商品擺放，這樣更加具有穩(wěn)定性。其次拉開他們直接的大小，這樣就有了對(duì)比。
2. 給商品用中性灰修圖增強(qiáng)明暗對(duì)比，效果是很顯著的。
3. 商品周邊增加一些環(huán)境光，另外他們直接的陰影不能忘記。

修改2：主標(biāo)題重點(diǎn)化

1. 挑出文案的重點(diǎn)作為標(biāo)題，一般來說不超過8個(gè)字。這里我隨便起來一個(gè)標(biāo)題，直接放大它，方法簡(jiǎn)單粗暴、但效果顯著明了。其次要注意的是不要干巴巴的直接丟文字上去，給他們分層、動(dòng)態(tài)模糊做一些效果處理，會(huì)更精致一些。
2. 在商品背后加一層薄薄的英文裝飾一下。

修改3：優(yōu)化背景顏色

1. 在背景的顏色上面增加一些紅色，畫面會(huì)更暖一些。其次背景上面增加一些云做背景，避免太白過于空洞。
2. 增加一些逆光、逆光可以通過一些光的射線濾色后處理。

修改4：弱化、在弱化飄絮

1. 降低透明度，減少飄絮數(shù)量。
2. 顏色上面也要避免單純的灰白色、可以調(diào)一些顏色上去，跟畫面的融合感會(huì)更強(qiáng)。

案例總結(jié)

1. 頁面需要一個(gè)“男豬腳“；
2. 環(huán)境光、逆光不能少；
3. 飄絮要做一定的弱化。

? Case 3

Before修改前

縮略對(duì)照?qǐng)D：

誤區(qū)1：標(biāo)題細(xì)節(jié)缺乏

1. 標(biāo)題的處理方法上面是可以加描邊處理的、但一定不能過于突兀，現(xiàn)在的黑色描邊就比較突兀。
2. 立體面的顏色不夠深，黑色描邊更加復(fù)雜了。
3. 標(biāo)題沒有做陰影層，所以在畫面上面顯得比較尷尬，不夠融合。

誤區(qū)2：裝飾元素略散、對(duì)比不夠

1. 裝飾元素沒有虛和實(shí)、大和小的區(qū)分，所以就少了對(duì)比。
2. 位置上面和主要內(nèi)容偏遠(yuǎn)了一點(diǎn)。

誤區(qū)3：商品處理不恰當(dāng)

1. 商品處理上顯得突兀，沒有虛實(shí)的處理，干巴巴地?cái)[放在那里。
2. 商品也沒有陰影，所以造成了不融合，顯假。

誤區(qū)4：背景空間感不足

1. 背景的明暗、深淺不夠，所以讓畫面變的比較平。當(dāng)然也考驗(yàn)這樣做，但要考慮真?zhèn)€畫面，如果你的需要把背景做的比較平，那字體就不要做立體了。
2. 配色比較突兀、紫色和綠色搭配不夠明亮也不舒服。
3. 圖案有點(diǎn)過于明顯，因?yàn)槿绻闶窍胱霰容^有空間感的畫面，所以要么不加圖案或者弱化。不然圖案的排列會(huì)把頁面顯得更平。

After修改后

縮略對(duì)照?qǐng)D：

修改1：完善標(biāo)題細(xì)節(jié)

1. 調(diào)整描邊顏色跟選擇和背景相近的顏色即可，順便增加一點(diǎn)內(nèi)陰影，立體感更強(qiáng)一點(diǎn)。
2. 去掉里面的描邊，增加陰影。弱化圖案疊加。

修改2：增強(qiáng)元素的對(duì)比

1. 調(diào)整元素的大小，區(qū)別大一點(diǎn)，大膽一些。增加虛實(shí)關(guān)系營(yíng)造遠(yuǎn)近關(guān)系。
2. 實(shí)的元素向中間靠攏一些，虛的元素向外。

修改3：處理商品細(xì)節(jié)

1. 部分商品虛化增強(qiáng)空間感，1-2個(gè)做個(gè)動(dòng)態(tài)模糊效果增強(qiáng)效果。
2. 部分顏色調(diào)成和背景相近的顏色和頁面融合，其次需要給商品加上陰影，更加真實(shí)。

修改4：大膽的調(diào)整配色

1. 背景的明暗關(guān)系大膽的調(diào)整，沒錯(cuò)在大膽一些，營(yíng)造空間感。
2. 調(diào)整利益點(diǎn)的顏色、紫色和黃色搭配是個(gè)不錯(cuò)的選擇，黃色總是一個(gè)好選擇。

案例總結(jié)

1. 背景空間感大膽的調(diào)整明暗關(guān)系；
2. 配色選個(gè)明亮的顏色；
3. 虛化該虛化的。

?Case 4

Before修改前

縮略對(duì)照?qǐng)D：

誤區(qū)1：標(biāo)題處理效果突兀

1. 標(biāo)題在顏色方面沒有一個(gè)很明顯的區(qū)分。
2. 圖案疊加在文字里面讓文字變得更加不清晰了，太過了。

誤區(qū)2：色塊形式復(fù)雜

1. 條紋排列過于復(fù)雜化了，而且在這一塊位置顯得更加沉重了，處理的不夠輕松。
2. 陰影處理的比較重，顯然是不是個(gè)好主意。

誤區(qū)3：標(biāo)簽粗糙的不像話

1. 標(biāo)簽真的好粗糙，叫我一個(gè)設(shè)計(jì)師怎么看的下去？（不行了，我的強(qiáng)迫癥要犯了。）
2. 顏色和背景都融合起來了（啊，好想打人）。
3. 那個(gè)毛邊邊是什么鬼（這個(gè)設(shè)計(jì)你給我粗來）？

誤區(qū)4：背景顏色深淺不夠、裝飾亂

1. 背景比較平了，深淺關(guān)系沒有做出來。要么就不要做高光嘛！做了高光為什么不做暗部呢？
2. 背景后面的長(zhǎng)條形狀比較亂，雖然很淺，但我還是覺得比較亂，多則亂。

誤區(qū)5：飄絮元素亂

1. 很明顯綠色和粉絲搭配是不和諧的。
2. 飄絮多了，有了櫻花就已經(jīng)足夠了。綠葉純粹就是畫蛇添足。
3. 標(biāo)題上面的那些綠葉簡(jiǎn)直了。

After修改后

縮略對(duì)照?qǐng)D：

修改1：標(biāo)題信息區(qū)分化

• 去掉圖案、顏色調(diào)成微漸變，這樣更加輕薄、時(shí)尚。
• 全球首發(fā)特殊化處理、更類似于一個(gè)標(biāo)簽一樣顏色搭配和粉絲相近的紫色，顏色也是微漸變。
• 增加投影，淺一些，不要太重。

修改2：飄絮簡(jiǎn)化

1. 直接去掉和頁面不搭的綠葉，另外說句別拿東西擋住文字。
2. 櫻花大小變化，3-4個(gè)即可。多則亂。

修改3：處理標(biāo)簽細(xì)節(jié)

1. 原本的表情形狀是不錯(cuò)的，但是還不夠圓滑。處理上也是很粗糙，調(diào)整下圓滑度。其次顏色可以為漸變色，這樣會(huì)更加時(shí)尚化。
2. 可以在一個(gè)圓點(diǎn)孔類似書簽一樣，這樣看起來更加精致。

修改4：提煉輔助形

直接把長(zhǎng)條和圓形拿上來，做一些顏色上的處理。其次需要減少數(shù)量。增加氣氛和動(dòng)感。

修改5：突出信息

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

案例總結(jié)

1. 元素多則亂；
2. 千萬別讓信息和背景融合；
3. 漸變的用色會(huì)更加時(shí)尚。

Case 5

Before修改前

縮略對(duì)照?qǐng)D：

誤區(qū)1：標(biāo)題過于簡(jiǎn)單

1. 標(biāo)題之間沒有一個(gè)很好的區(qū)分，特別是在顏色上面。
2. 有點(diǎn)太過簡(jiǎn)單了，雖然是要你穿的簡(jiǎn)單點(diǎn)。

誤區(qū)2：背景紋理復(fù)雜

1. 背景上面的圖案紋理有一些復(fù)雜了，太細(xì)了些感覺不夠Men。畢竟是男性。
2. 背景略簡(jiǎn)單了，純色快?？梢约右恍┣榫埃黾哟笈聘?。

誤區(qū)3：多余的東西

1. 放個(gè)人影在后面是干嘛，這是要分身么？
2. 還是同一個(gè)人，直勾勾地盯著我，我害怕。（人一害怕就想抓點(diǎn)）

誤區(qū)4：突兀的元素

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

After修改后

縮略對(duì)照?qǐng)D：

修改1：標(biāo)題層級(jí)區(qū)分

將標(biāo)題區(qū)分開來，在我看來穿的簡(jiǎn)單更像主標(biāo)題，所以要更加突出。其它都是輔助文案，因?yàn)閴焊蜎]什么利益點(diǎn)。其次給標(biāo)題增加一些重疊的感覺，更有設(shè)計(jì)感。

修改2：背景情景化

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

修改3：弱化該弱化的

1. 白色的框并不需要那么多出，只是裝飾作用。所以我們需要把它隱藏起來，對(duì)就是弱化。
2. 弱化顏色。

案例總結(jié)

1. 別人背景太過復(fù)雜，情景化也是個(gè)不錯(cuò)的選擇；
2. 標(biāo)題不要干巴巴，盡量做一些處理。

作者：不沉的骨頭

來源：微信公眾號(hào)【三根設(shè)計(jì)骨】

本文由 @不沉的骨頭 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。