【設計幫幫忙】第十二期——張欣然電商設計分享

嘉賓：張欣然

本期概要

電商的概況

電商的首頁設計規(guī)范和區(qū)塊安排

電商要設計的幾種形式的頁面

提問】01  老師覺得做電商辛苦嗎？有沒有跳槽的沖動？
張老師】做電商感覺還是東西雜，因為你要做專題啊，還要做各式各樣的小活，哪天修改一個商品啊修改一個小導航啊這種的，就是每天這種活特別特別的多，要說辛苦的話其實差不多吧，除非搞大活動那幾天，比如雙十一，雙十二那幾天，就是雙十一之前將近一個月左右我們就在加班了，有時候就是加到十點，加到后半夜也是很正常的，然后雙十一當天還要通宵在那兒值班，因為商品賣得快什么的可能會涉及到更換商品啊，會做一些圖片啊什么，就是那幾天挺辛苦的。平時的時候其實和做企業(yè)站還是差不了太多的，我是這么感覺的。
 
提問】02  平時休息的時候都做什么呢？你覺得你的性格適合做電商嗎？還是某種性格會比較適合做電商一點？
張老師】休息的的時候我就不想再去做東西。我這個人平時比較懶，我就看一些東西，干自己喜歡干的事唄。我覺得性格的關系不是特別大，其實做電商嘛，說實在的就還是做設計，我覺得什么樣的性格的人都適合做設計吧，跟性格應該沒什么關系。

一  電商發(fā)展情況概述
電商在咱這也開展了沒多少年，就十來年左右，我不是很清楚，但確實發(fā)展的非常迅猛，就拿今年的雙十一，銷售額大概在350個億左右。大家想想這個數(shù)字，一天就能達成350個億的交易額，這是非常了不起的一個事情，很黃很暴力的事情。第一次雙十一應該是09年開始，當時好像只有1億，短短的五年之間已經翻了三百多倍，我覺得這個真的是發(fā)展非常迅猛的一個行業(yè)?，F(xiàn)在的雙十一基本上已經成了咱們全國的一個固定的狂歡節(jié)，然后你去問咱們群里的人說哪個人我沒有在網(wǎng)上購物過，我不知道淘寶我不知道天貓，我覺得這應該都是沒有的。

為什么電商會發(fā)展得這么快呢，我覺得正是因為這些人群的加入吧，我覺得電子商務已經形成了我們的一種生活方式了。就拿淘寶來說，我們基本上是足不出戶，然后我們可以干到任何我們想干的事情。就像買東西交話費啊，基本上什么都可以買到，然后呢還有一部分是大量商家的加入進來，搭上電商這趟車，去發(fā)展他們的電子商務。

我覺得在這樣的環(huán)境下我覺得以后我們的電子商務這一塊的設計肯定也是越來越重要的。大家也發(fā)現(xiàn)了最近在各個平臺也有做電商的設計師們發(fā)他們的作品，大家也都覺得非常不錯，感覺好像是一夜之間電商就突然崛起了。大家只是看到了這么一個表象，其實這個行業(yè)是一直在發(fā)展的。

我是有這么一個感覺，就覺得咱們現(xiàn)在做網(wǎng)頁設計嘛，就覺得自己是特別那種高大上的，像一些互動啊，品牌的這樣一些網(wǎng)站的設計，但是我覺得后來的再發(fā)展，可能五年啊十年啊，這個電商設計的地位可能慢慢的會趕超上來。

舉一個例子，現(xiàn)在有家公司想推廣他們的品牌，然后想推廣他們的商品，然后去找人做一個互動網(wǎng)站，可能得花幾十萬，然后經歷個幾個月，半年，或者更長的時間，然后這其中耗費的人力物力什么的，還有一些溝通成本，就會非常非常多。但是如果他們加入到電商這里面來呢，他可能會發(fā)現(xiàn)這么一個事情，就是他可能花幾千塊錢也可能做一個特別好的一個店鋪的首頁來，然后再傳幾個人，然后就能形成一個電商的團隊，但是他們直接收獲的價值，比如說是一款商品，他馬上就賣出去了，他收獲的價值要比前期投入快得多，然后比他做一個互動網(wǎng)站獲得的收益到多得多。

我覺得作為一個公司來講，他們面對的直接就接觸到收益了，這個肯定會引起越來越多的商家的重視。越來越多的公司會去開展這個電子商務。所以我覺得作為一個電商的設計師應該會有一個很好的發(fā)展。所以不管現(xiàn)在是零基礎的，或者說是已經在企業(yè)站或者互動方面做得很厲害的一些大神，我覺得也是可以了解一下這個情況的，萬一以后要轉型的話也能打下一個比較好的基礎。
 

 
二  天貓的設計趨勢和設計規(guī)范
為什么說天貓呢，是因為我們現(xiàn)在做電子商務的一些公司嘛，他們主要針對的還是天貓。因為天貓它以前不是叫那個淘寶商城嘛，我們管它叫那個淘寶集市，有一個區(qū)別，就是天貓它主要是一些大品牌入駐嘛，所以說可能需要設計的東西多一點，像淘寶集市可能就不需要什么設計，可能好多是個人的嘛，就不需要什么設計，所以說主要針對的是天貓。

天貓他們自己也是有一個UED的，他們這個團隊我覺得還是挺時髦的，他們會根據(jù)現(xiàn)在流行的一些趨勢去規(guī)范一些他們天貓官方出的設計作品，或者設計規(guī)范什么的，會有一個趨勢?，F(xiàn)在是扁平化正流行的時候，好像是剛過完雙十一的時候他們組織了一次講座，就說到了以后可能在未來一年還是多長時間之內就用這個扁平化這個風格。還有就是在今年早些時候，就是年前，好多win8的那種，塊狀的風格，有一段時間也是用那種風格。

我印象比較深的就是今年三四月份的時候他們組織了大型活動，叫什么“新風尚”，要求每一個參加的商家，都提供一個自己的就像專題的頁面給他們，然后就有好多的商家他們就是做了就不過，然后就不讓他們參加那個活動，后來我們就發(fā)現(xiàn)一個原因了，就是他們喜歡那種（扁平化）風格，我們這邊做的也不過，然后后來都改成那種塊狀風格，后來就過了。

所以說了解他們的一些設計趨勢嘛對我們來說還是很有幫助的，要不然的話你花費一些時間做了一版不過也挺耗費時間人力的。

 
這是2012年Kappa官方旗艦店冬季首頁。這里就說一些簡單的小規(guī)范，這個涉及到以后的制作過程切圖什么的。

這 個白色的部分就是店招，店招部分最高的高度是不能超過150px的，接下來是整個頁面的寬度是990px，就是主內容區(qū)的寬度不能超過990px。還有就 是它們每個區(qū)塊之間會有一個10px的間隔，這個也需要注意一下。比如說這是一個banner，下面是幾個小專題入口，它中間最少要留10px的間距。

還有一點，這個也不是天貓的一些規(guī)范，這個是我個人總結的一些經驗，就是banner這塊不要做得太高，因為我們好多用戶去瀏覽你的這個網(wǎng)站的時候，他可能第一眼只能看到你的這個大banner，但是你的這一個大banner的話可能只能轉達這一個信息，然后作為一個買家來說的話他可能想看到更多的信息，我個人的習慣呢就是做到450px到500px之間。

這里我就粗略的講一下。


三  網(wǎng)頁的框架結構
最基本的，這里這幾個模塊的安排，我們去看大多數(shù)的網(wǎng)店，都會發(fā)現(xiàn)必不可少的幾個模塊，少了這幾個模塊我們就會覺得缺了些東西，如果你要是再加其他的模塊呢那也不是不行的，就是說現(xiàn)在這幾個模塊呢是最基礎的。

首先肯定是有一個店招，店招下面是banner，banner下面這一塊可能是專題的入口，或者說是一些活動的入口。這幾個小圖呢不要設計太大。然后接下來呢是產品的展示，它可能必不可少的是新款的上市，一些新品，肯定是主推的放在上面。然后接下來會有一個熱銷的，然后再接下來可能會有一個斷碼清倉啊什么的，但是我這個版式沒有，當時規(guī)劃頁面的時候沒有，但是那個模塊是可以有的。接下來是一個頁中的一個導航，咱們去搜索一些東西什么的，還有一個就是承載這個旺旺嘛，旺旺組會放在這個地方，比較方便大家和商家去交流。然后接下來就是一些商品分類展示就行了。
這個就是最最基礎的一個網(wǎng)頁的框架，可能缺了這些東西缺了哪一樣都不是特別好。這里說一點，就是專題這個部分有的新開店的或者有一些不是特別重要或者是不太適合做專題啊什么的這種店鋪他們可能這塊就沒有，但是一般情況下都會有的。

【問題】01  如何排版和配色可以使網(wǎng)頁合理不亂
關于排版，我把它理解成模塊的一些安排。首先我覺得排版的話，就是模塊的安排一定要是邏輯合理的，就像咱們剛才那個頁面上我的模塊的安排是什么樣的呢，就是（模塊）不多，就安排出最主要的幾樣東西，新品我覺得是最主要的，你去看好多的商家店鋪首頁也是把這個新品安排在最前面的。然后接下來呢可能都是那個熱賣的，就是賣得最好的，大家看了可能都會買嘛。然后是促銷的，就是可能會放在下面一點，就不是特別的吸引人的，雖然它價格便宜，但是都是一些過季的，或者說不怎么時興的一些東西。然后再接下來的話就會是一些分類的展示。

區(qū)塊呢盡量明顯，像我這個呢就很明顯的，因為我都用了一些比較大的間隔給他區(qū)分開。這樣的話就不會說我這個排版亂，我這個東西也不多，給它區(qū)分的更明顯，就不會亂，但是有一個問題，就是稍微顯得單調吧。

顏色配色方面，這個還是根據(jù)你不同的品牌吧，配色不要亂的話還是顏色盡量少一些，比如說就是三種兩種顏色這樣的。

我這個網(wǎng)頁的話就是一個白色，然后深色，還有一個紅色，這是最主要的顏色，如果你再多了的話就會覺得亂。

【問題】02  首頁和用戶傳達的關系怎樣才高效
我的理解就是客戶能從你的網(wǎng)頁上快速地得到他想要的信息。這個首先要確認客戶想要什么。我覺得一般的客戶就是來看商品的，第一個你的商品一定要吸引人，第二個就是你的價格優(yōu)勢比較明顯。所以說這些東西是你需要突出出來，如果確定了這兩個方面是客戶最想要的，那我們就要想辦法給客戶一個最佳的體驗方案，和最完善的一個體驗過程。

這個怎么做出來呢？這個還是和排版有一定關系的。要精確地抓住客戶他想要的點的話，你這個排版上還是要簡潔合理的，如果大多數(shù)頁面都不是像我剛才那么去布局的話，可能客戶找東西找起來就會很（麻煩），還有一個就是你的模塊安排的太多，順序的話也不是那么合理，就聽困難的。還有我發(fā)現(xiàn)有的整個頁面會好長好長，好多模塊糅雜在里面，真的不知道他有的模塊在說什么。

第二點，咱們剛才分析的客戶最想要的信息嘛，把這些特別突出的展示出來。商品的圖片就要做的精美，然后價格啊什么的也要凸顯出來，我覺得做到這樣的話就能夠讓客戶比較高效的去獲取他想要的一些信息。

拿我剛才的案例新品這一塊來說，這一塊雖然商品少，但是我覺得就傳達重要信息來說我覺得這塊做得應該不錯的。圖片是白底，和后面的背景整個的一個對比，它會特別明顯，這個區(qū)域性會特別強。然后在這個白塊上每一個商品的展示，它的價格也是特別明顯的。這個是現(xiàn)價，這個是原價，這個原價呢咱們就讓它稍微的虛一點，讓這個現(xiàn)價凸顯出來。

這個商品呢也不是說咱們隨便找一個商品直接就扔上去。因為大多數(shù)剛拍完的商品大多數(shù)都是沒有經過處理的，你放上去以后它的那個飽和度還有明亮關系什么的特別弱，就顯得很不精致，會大打折扣的。所以說這個商品拿過來以后咱們還是要做一系列的調整的。比如說這個模特他拍的時候人可能站的有點歪，那你不能直接扔上去，咱們給它調正一些，然后找一個符合這個畫面的比較合適的大小，然后把它放上去。要讓畫面看上去很飽滿，我這個邊距留得不是特別大，人物基本上是占了整個畫幅，我們能通過這個畫面充分的了解到這個商品到底是一個什么樣子。這個是第一步，算是把它放進去了。

然后還要加一些修飾和調整。比如說這個模特剛拍出來飽和度對比度不夠的話我們去調一下它的色階啊，曲線啊，讓它明暗關系對比強一些，暗的地方暗下去，該亮的地方亮起來?？梢栽僬{一下飽和度，因為它這里有個橙色嘛，你要是太灰的話整個的衣服顯得沒有什么精神。有的同學可能會問你這樣調的話他這個衣服會不會偏色啊什么的，這里的話就是自己把握一個度吧，我個人覺得你沒有調到特別刺眼，沒有偏色的情況下，一般情況下都是無所謂的。

調完了這個飽和度我們再調一下這個衣服的細節(jié)。比如說一些高光，亮的地方咱們再給他加亮一點，暗的地方再給它暗一些，整個的它的對比關系就強烈起來了，它的這個立體感和質感就會凸顯出來。我的習慣是最后再加一步銳化。

【問題】03  扁平化電商頁面的設計
扁平化大家都在嘗試著去做，首先就是去除一些UI，一切以內容為中心，我覺得這一點的話挺適合做電商的，因為咱們就是要把信息展示給消費者。將最重要的信息都突出表現(xiàn)出來，同時要注意圖片的質量要提高，還是剛才說到的那個問題，因為咱們這個界面要是去除了UI，那么剩下的就是一些顏色，文字，圖片。那這個時候我們怎樣去說我做的這個東西就是比其他人做的要好，可能就是體現(xiàn)在這些細節(jié)上， 比如說圖片的運用，圖片的質量要高一些，就比如我剛才說的模特的調整，你把它調整一下和沒調整完全是兩碼事。然后再增加一些小細節(jié)設計。

這個頁面我是在扁平化出來之前就設計了的，現(xiàn)在看上去也挺扁平的，基本都是在用顏色，那這里我加了哪些細節(jié)呢，就是banner這塊，我加了兩個顏色，像這些小斜條，折線，加進去以后這個畫面就不會顯得特別單調。

原文地址：http://www.uehtml.com/post/2984/