【設(shè)計(jì)幫幫忙】第十二期——張欣然電商設(shè)計(jì)分享

嘉賓：張欣然

本期概要

電商的概況

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

電商要設(shè)計(jì)的幾種形式的頁(yè)面

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

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

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

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

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

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

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

 
二  天貓的設(shè)計(jì)趨勢(shì)和設(shè)計(jì)規(guī)范
為什么說(shuō)天貓呢，是因?yàn)槲覀儸F(xiàn)在做電子商務(wù)的一些公司嘛，他們主要針對(duì)的還是天貓。因?yàn)樘熵埶郧安皇墙心莻€(gè)淘寶商城嘛，我們管它叫那個(gè)淘寶集市，有一個(gè)區(qū)別，就是天貓它主要是一些大品牌入駐嘛，所以說(shuō)可能需要設(shè)計(jì)的東西多一點(diǎn)，像淘寶集市可能就不需要什么設(shè)計(jì)，可能好多是個(gè)人的嘛，就不需要什么設(shè)計(jì)，所以說(shuō)主要針對(duì)的是天貓。

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

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

所以說(shuō)了解他們的一些設(shè)計(jì)趨勢(shì)嘛對(duì)我們來(lái)說(shuō)還是很有幫助的，要不然的話你花費(fèi)一些時(shí)間做了一版不過(guò)也挺耗費(fèi)時(shí)間人力的。

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

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

還有一點(diǎn)，這個(gè)也不是天貓的一些規(guī)范，這個(gè)是我個(gè)人總結(jié)的一些經(jīng)驗(yàn)，就是banner這塊不要做得太高，因?yàn)槲覀兒枚嘤脩羧g覽你的這個(gè)網(wǎng)站的時(shí)候，他可能第一眼只能看到你的這個(gè)大banner，但是你的這一個(gè)大banner的話可能只能轉(zhuǎn)達(dá)這一個(gè)信息，然后作為一個(gè)買家來(lái)說(shuō)的話他可能想看到更多的信息，我個(gè)人的習(xí)慣呢就是做到450px到500px之間。

這里我就粗略的講一下。


三  網(wǎng)頁(yè)的框架結(jié)構(gòu)
最基本的，這里這幾個(gè)模塊的安排，我們?nèi)タ创蠖鄶?shù)的網(wǎng)店，都會(huì)發(fā)現(xiàn)必不可少的幾個(gè)模塊，少了這幾個(gè)模塊我們就會(huì)覺(jué)得缺了些東西，如果你要是再加其他的模塊呢那也不是不行的，就是說(shuō)現(xiàn)在這幾個(gè)模塊呢是最基礎(chǔ)的。

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

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

區(qū)塊呢盡量明顯，像我這個(gè)呢就很明顯的，因?yàn)槲叶加昧艘恍┍容^大的間隔給他區(qū)分開(kāi)。這樣的話就不會(huì)說(shuō)我這個(gè)排版亂，我這個(gè)東西也不多，給它區(qū)分的更明顯，就不會(huì)亂，但是有一個(gè)問(wèn)題，就是稍微顯得單調(diào)吧。

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

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

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

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

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

拿我剛才的案例新品這一塊來(lái)說(shuō)，這一塊雖然商品少，但是我覺(jué)得就傳達(dá)重要信息來(lái)說(shuō)我覺(jué)得這塊做得應(yīng)該不錯(cuò)的。圖片是白底，和后面的背景整個(gè)的一個(gè)對(duì)比，它會(huì)特別明顯，這個(gè)區(qū)域性會(huì)特別強(qiáng)。然后在這個(gè)白塊上每一個(gè)商品的展示，它的價(jià)格也是特別明顯的。這個(gè)是現(xiàn)價(jià)，這個(gè)是原價(jià)，這個(gè)原價(jià)呢咱們就讓它稍微的虛一點(diǎn)，讓這個(gè)現(xiàn)價(jià)凸顯出來(lái)。

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

然后還要加一些修飾和調(diào)整。比如說(shuō)這個(gè)模特剛拍出來(lái)飽和度對(duì)比度不夠的話我們?nèi)フ{(diào)一下它的色階啊，曲線啊，讓它明暗關(guān)系對(duì)比強(qiáng)一些，暗的地方暗下去，該亮的地方亮起來(lái)?？梢栽僬{(diào)一下飽和度，因?yàn)樗@里有個(gè)橙色嘛，你要是太灰的話整個(gè)的衣服顯得沒(méi)有什么精神。有的同學(xué)可能會(huì)問(wèn)你這樣調(diào)的話他這個(gè)衣服會(huì)不會(huì)偏色啊什么的，這里的話就是自己把握一個(gè)度吧，我個(gè)人覺(jué)得你沒(méi)有調(diào)到特別刺眼，沒(méi)有偏色的情況下，一般情況下都是無(wú)所謂的。

調(diào)完了這個(gè)飽和度我們?cè)僬{(diào)一下這個(gè)衣服的細(xì)節(jié)。比如說(shuō)一些高光，亮的地方咱們?cè)俳o他加亮一點(diǎn)，暗的地方再給它暗一些，整個(gè)的它的對(duì)比關(guān)系就強(qiáng)烈起來(lái)了，它的這個(gè)立體感和質(zhì)感就會(huì)凸顯出來(lái)。我的習(xí)慣是最后再加一步銳化。

【問(wèn)題】03  扁平化電商頁(yè)面的設(shè)計(jì)
扁平化大家都在嘗試著去做，首先就是去除一些UI，一切以內(nèi)容為中心，我覺(jué)得這一點(diǎn)的話挺適合做電商的，因?yàn)樵蹅兙褪且研畔⒄故窘o消費(fèi)者。將最重要的信息都突出表現(xiàn)出來(lái)，同時(shí)要注意圖片的質(zhì)量要提高，還是剛才說(shuō)到的那個(gè)問(wèn)題，因?yàn)樵蹅冞@個(gè)界面要是去除了UI，那么剩下的就是一些顏色，文字，圖片。那這個(gè)時(shí)候我們?cè)鯓尤フf(shuō)我做的這個(gè)東西就是比其他人做的要好，可能就是體現(xiàn)在這些細(xì)節(jié)上， 比如說(shuō)圖片的運(yùn)用，圖片的質(zhì)量要高一些，就比如我剛才說(shuō)的模特的調(diào)整，你把它調(diào)整一下和沒(méi)調(diào)整完全是兩碼事。然后再增加一些小細(xì)節(jié)設(shè)計(jì)。

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

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