中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

? Case 1

Before修改前

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

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

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

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

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

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

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

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

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

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

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

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

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

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

After修改后

縮略對照圖：

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

1. 直接去掉英文，因為根本是無效的。
2. 把該放大的放大，該弱化的弱化，另外字體選擇細一些的，更符合女性。
3. 控制每個單位之間的行距、#2016秋冬……#為一個單位 ，#全場360元……包郵#為一個單位。那它們之間的行距要大于一個單位里的行距。

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

1. 直接去掉英文，因為根本是無效的。
2. 把該放大的放大，該弱化的弱化，另外字體選擇細一些的，更符合女性。
3. 控制每個單位之間的行距、#2016秋冬…..#為一個單位 ，#全場360元…..包郵#為一個單位。那它們之間的行距要大于一個單位里的行距。

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

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

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

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

案例總結(jié)

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

?Case 2 ?

Before修改前

縮略對照圖：

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

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

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

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

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

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

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

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

After修改后

縮略對照圖：

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

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

修改2：主標題重點化

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

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

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

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

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

案例總結(jié)

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

? Case 3

Before修改前

縮略對照圖：

誤區(qū)1：標題細節(jié)缺乏

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

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

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

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

1. 商品處理上顯得突兀，沒有虛實的處理，干巴巴地擺放在那里。
2. 商品也沒有陰影，所以造成了不融合，顯假。

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

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

After修改后

縮略對照圖：

修改1：完善標題細節(jié)

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

修改2：增強元素的對比

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

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

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

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

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

案例總結(jié)

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

?Case 4

Before修改前

縮略對照圖：

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

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

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

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

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

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

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

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

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

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

After修改后

縮略對照圖：

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

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

修改2：飄絮簡化

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

修改3：處理標簽細節(jié)

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

修改4：提煉輔助形

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

修改5：突出信息

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

案例總結(jié)

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

Case 5

Before修改前

縮略對照圖：

誤區(qū)1：標題過于簡單

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

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

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

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

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

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

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

After修改后

縮略對照圖：

修改1：標題層級區(qū)分

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

修改2：背景情景化

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

修改3：弱化該弱化的

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

案例總結(jié)

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

作者：不沉的骨頭

來源：微信公眾號【三根設(shè)計骨】

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