

誤區1 無效的英文裝飾效果 很多人都喜歡用英文去裝飾畫面,包括我以前也是。這是一個誤區、也不是說不可以用。必須在保證主題明確的條件下去裝飾,否則會擾亂信息閱讀。 除非頁面是以英文主題的。
誤區2 信息層級混亂、文案重復 其一在標題的處理上面,我們可以去與運營或產品溝通哪些是重點的。去放大它們區分它們,不要一味的為了排版的對齊。另外每一行的間距沒有細節太緊密了,緊湊的感覺不太妙。你會發現優秀的設計師他們的作品在間距行距上面會把控的很好。在我看來“全場36元起”這個才是最大的利益點,也是運營更加希望突出的,畢竟便宜死王道。 其二文案中有多次重復的信息是無效的、而且是閱讀的累贅。
誤區3 主體與標題過于緊密,沒有呼吸空間 總是有人會提出留白,但就總是有人會覺得空了。 其實恰恰相反,只要你把握在900px的空間,主體和標題之間有一定的空間呼吸。這樣畫面上面才會更加輕松舒適。
誤區4 標簽過于粗糙、信息過多 其一在標簽的處理上比較粗糙、負責化了。 標簽平時可以多關注下韓國電商頁面里面的處理。 其二信息太多,一般來說作為標簽可能它只有4個字或2個字。標簽的用途是快速傳遞信息、而且相對明顯。標簽的顏色和標題顏色完全沒有區分,這樣是錯誤的做法。
誤區5 無效的裝飾、海報高度過高 四個角無效的裝飾、相對于筆記本來說根本看不到。如果你是自適應網頁的,那當然可以有。 另外就是海報高度797px,這個高度相當高了,現在發現電商行業的設計師把頭圖的尺寸做的很高,我也不知道為什么,這是一個挺不好的現象。 做那么大,細節那么差,難的是為了讓我們更容易看到么。偷笑 After修改后 ▽


其一 信息層級細分、控制好每個單位的行距 其一直接去掉英文,因為根本是無效的。
其二把該放大的放大,該弱化的弱化,另外字體選擇細一些的,更符合女性。
其三控制每個單位之間的行距、#2016秋冬….#為一個單位 ,#全場360元….包郵#為一個單位。那它們之間的行距要大于一個單位里的行距。
其四 主體與主題留有一定空間 直接把人物往有移動一定的空間,這個沒有具體的位置只要在視覺上是舒服的即可。但要保證在安全區域內。
其五 優化功能按鈕 把按鈕放大并且做的是可以點擊的狀態,別用黑色、白色這些。這些更像是不可點擊態,另外可以加上小icon更生動一些。
案列總結: 1、信息層級必須分清楚
2、行距以單位把控好
3、該區分的區分 Case
2 Before修改前 ▽


主要誤區:信息層級不清晰、飄絮過于強調
誤區1 商品之間沒有大小對比、商品重復 其一商品之間沒有對比、有2個一樣的只是存在顏色不同,我不建議放上來。對于商品擺放來說,4個商品這樣擺放也會顯得沒有“男豬腳” 其二商品與商品之間有一些松散。 其三逆光和環境色不夠、所以顯得商品還沒有融合到畫面中。
誤區2 標題毫無主體 其一標題沒有一個重要的,而且相對來說很小。極其的靠右這樣是最大的錯誤。其二英文裝飾過重、應當弱化。英文如果是需要,可以多找些英文和中文這樣的標題組合,但還是要分清楚重點。
誤區3 背景上面有點偏白、顏色有些欠缺 其一中間上面有點偏白,沒有內容。顯得畫面有些空洞了。 其二背景的顏色有些過于偏黃了,可以加一些顏色。逆光也同樣有一些欠缺。
誤區4 飄絮過于粗糙、復雜 在添加飄絮裝飾氛圍的時候,我們不要一味的去添加。合適就行,有時候只需要有一些感覺即可。特別是這種碎、細的飄絮。 After修改后 ▽


修改1 拉開“男豬角”和配角直接的大小 其一減少到3個商品擺放,這樣更加具有穩定性。其次拉開他們直接的大小,這樣就有了對比。 其二給商品用中性灰修圖增強明暗對比,效果是很顯著的。 其三商品周邊增加一些環境光,另外他們直接的陰影不能忘記。
修改2 主標題重點化 其一挑出文案的重點作為標題,一般來說不超過8個字 這里我隨便起來一個標題,直接放大它,方法簡單粗暴、但效果顯著明了。其次要注意的是不要干巴巴的直接丟文字上去,給他們分層、動態模糊做一些效果處理,會更精致一些。 其二在商品背后加一層薄薄的英文裝飾一下。
修改3 優化背景顏色 其一在背景的顏色上面增加一些紅色,畫面會更暖一些。其次背景上面增加一些云做背景,避免太白過于空洞。 其二增加一些逆光、逆光可以通過一些光的射線濾色后處理。
修改4 弱化、在弱化飄絮 其一降低透明度,減少飄絮數量。 其二顏色上面也要避免單純的灰白色、可以調一些顏色上去,跟畫面的融合感會更強。
案列總結: 1、頁面需要一個“男豬腳“ 2、環境光、逆光不能少 3、飄絮要做一定的弱化 Case 3 Before修改前 ▽


誤區1 標題細節缺乏 其一標題的處理方法上面是可以加描邊處理的、但一定不能過于突兀,現在的黑色描邊就比較突兀。 其二立體面的顏色不夠深,黑色描邊更加復雜了。 其三標題沒有做陰影層,所以在畫面上面顯得比較尷尬,不夠融合。
誤區2 裝飾元素略散、對比不夠 其一裝飾元素沒有虛和實、大和小的區分,所以就少了對比。 其二位置上面和主要內容偏遠了一點。
誤區3 商品處理不恰當 其一商品處理上顯得突兀,沒有虛實的處理,干巴巴的擺放在哪里。 其二商品也沒有陰影,所以造成了不融合,顯假。
誤區4 背景空間感不足 其一背景的明暗、深淺不夠,所以讓畫面變的比較平。當然也考驗這樣做,但要考慮真個畫面,如果你的需要把背景做的比較平,那字體就不要做立體了。 其二配色比較突兀、紫色和綠色搭配不夠明亮也不舒服。 其三圖案有點過于明顯,因為如果你是想做比較有空間感的畫面,所以要么不加圖案或者弱化。不然圖案的排列會把頁面顯得更平。
After修改后 ▽


修改1 完善標題細節 其一調整描邊顏色跟選擇和背景相近的顏色即可,順便增加一點內陰影,立體感更強一點。 其二去掉里面的描邊,增加陰影。弱化圖案疊加。
修改2 增強元素的對比 其一調整元素的大小,區別大一點,大膽一些。增加虛實關系營造遠近關系。 其二實的元素向中間靠攏一些,虛的元素向外。
修改3 處理商品細節 其一部分商品虛化增強空間感,1-2個做個動態模糊效果增強效果。 其二部分顏色調成和背景相近的顏色和頁面融合,其次需要給商品加上陰影,更加真實。
修改4 大膽的調整配色 其一背景的明暗關系大膽的調整,沒錯在大膽一些,營造空間感。 其二調整利益點的顏色、紫色和黃色搭配是個不錯的選擇,黃色總是一個好選擇。 案列總結: 1、背景空間感大膽的調整明暗關系 2、配色選個明亮的顏色 3、虛化該虛化的