電商活動(dòng)設(shè)計(jì)詳解

紅字重點(diǎn)，黑字詳解&吐槽。
一般活動(dòng)頁(yè)面設(shè)計(jì)的結(jié)構(gòu)

頭部：重點(diǎn)的區(qū)域，直接影響導(dǎo)航、內(nèi)容、底部的設(shè)計(jì)。確定了頭部的設(shè)計(jì)，頁(yè)面的整體風(fēng)格基本就出來(lái)了。

1 很多時(shí)候會(huì)給頭部頂個(gè)規(guī)則比如要多少高以內(nèi)，必須看到產(chǎn)品，這樣的限制過(guò)于局限，每個(gè)人的顯示器大小有別，網(wǎng)購(gòu)的人也基本了解頁(yè)面內(nèi)容的設(shè)置，設(shè)計(jì)完全可以靈活多樣些。

普通頭部

主推產(chǎn)品直接放頭部

頭部活動(dòng)說(shuō)明，營(yíng)造氛圍，不以產(chǎn)品為主

2 頭部的設(shè)計(jì)盡量跟產(chǎn)品相關(guān)或者直接是產(chǎn)品本身，沒(méi)事放個(gè)美女求點(diǎn)擊那是很久以前的事情，且拉低轉(zhuǎn)化率。

3 字體設(shè)計(jì)沒(méi)事情少堆樣式，描邊投影斜面浮雕用不好就把頁(yè)面打回90年代。

導(dǎo)航：除非頁(yè)面只有一到兩屏（600PX一屏）或者只有一個(gè)分類(lèi)，要么這個(gè)是很有必要的東西。必要的原因是，運(yùn)營(yíng)在DEMO里會(huì)經(jīng)常遺忘（多有經(jīng)驗(yàn)的運(yùn)營(yíng)都有可能遺忘），所有都做好之后又尋死覓活讓你補(bǔ)上。設(shè)計(jì)務(wù)必盯緊了，死皮賴臉的讓它們加導(dǎo)航，要不就是它們要你返工加。

普通的固定導(dǎo)航（必須的）

側(cè)邊浮動(dòng)（添加和刪除都比較隨意，問(wèn)題是會(huì)被筆記本一類(lèi)小屏幕電腦遮擋，或者遮擋部分產(chǎn)品）只能做輔助導(dǎo)航使用。

被側(cè)邊遮擋的樣子

底部導(dǎo)航（會(huì)一直存在頁(yè)面底部隨頁(yè)面滾動(dòng)，問(wèn)題是開(kāi)始時(shí)候會(huì)擋住部分圖片，設(shè)計(jì)得花點(diǎn)會(huì)影響頁(yè)面效果呈現(xiàn)，當(dāng)用戶使用導(dǎo)航的時(shí)候會(huì)產(chǎn)生一定尋找的時(shí)間和視線的跳躍，作為輔助可以，不要為主導(dǎo)航。）

頁(yè)面內(nèi)容

一般是文字或產(chǎn)品，特別的活動(dòng)會(huì)有視頻，游戲一類(lèi)。這里以文字和產(chǎn)品為主。

文字的板式：做好區(qū)塊、段落板塊、標(biāo)題文字、詳細(xì)文字、文字與圖片的分隔。主要方式是通過(guò)線條、圖形、留白。

文字主要是通過(guò)讓人閱讀來(lái)了解具體內(nèi)容，圖片以及板式是方便更好了解內(nèi)容的，無(wú)須讓整個(gè)版面過(guò)于花俏，而且要注重留白，滿是花紋圖片的文字區(qū)域，往往更讓人無(wú)法靜下心去閱讀了解文字。

產(chǎn)品內(nèi)容的放置

這個(gè)簡(jiǎn)單又讓我蛋碎很多次的東西。

基本的內(nèi)容：產(chǎn)品圖片、產(chǎn)品名稱、產(chǎn)品價(jià)格、產(chǎn)品折扣價(jià)。

但讓人郁悶的是還會(huì)出現(xiàn)：LOGO、產(chǎn)品描述、產(chǎn)品數(shù)量、產(chǎn)品銷(xiāo)量、限量數(shù)、好評(píng)數(shù)、購(gòu)買(mǎi)人數(shù)、折扣力度、贈(zèng)品圖片、贈(zèng)品名稱、店鋪入口、（抽搐的）按鈕和手、促銷(xiāo)語(yǔ)、各種搶版面搶出頭的裝飾。

這一排東西其實(shí)很多可有可無(wú)的。因?yàn)楹芏鄷r(shí)候分區(qū)已經(jīng)分好了（比如五折區(qū)、3折區(qū)），有些用戶并不關(guān)心，但是孔雀效應(yīng)，很多運(yùn)營(yíng)會(huì)糾結(jié)的讓你排上去擠得密不透風(fēng)。過(guò)多的文字也會(huì)影響購(gòu)物的情緒，甚至放棄瀏覽估計(jì)運(yùn)營(yíng)看到了這里也會(huì)回去跟設(shè)計(jì)師要加這些東西，如果這樣我先跟設(shè)計(jì)師謝罪了。

除了內(nèi)容，這些的排版也會(huì)讓運(yùn)營(yíng)各種無(wú)法拿捏不確定，擔(dān)心這個(gè)怕那個(gè)，我列一些常用的樣式，參考著用。

特別聲明

關(guān)于這個(gè)，特別想聲明下，抽搐抖動(dòng)的按鈕和手指是上個(gè)世紀(jì)的產(chǎn)物，我們用電腦，上面的圖標(biāo)沒(méi)有一群抖動(dòng)的手不一樣點(diǎn)得很歡樂(lè)么，客戶會(huì)去尋找，如IPHONE圖標(biāo)上也有一堆手指，喬布斯會(huì)死得更早的，所以各位親，不要再要求在按鈕上放上抽搐的手了，好不容易快世界末日不用上班，一下又把我們拉到10年前，求死不能啊。這里幫設(shè)計(jì)師拜謝了。