電商活動設(shè)計詳解

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

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

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

普通頭部

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

頭部活動說明，營造氛圍，不以產(chǎn)品為主

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

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

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

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

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

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

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

頁面內(nèi)容

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

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

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

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

這個簡單又讓我蛋碎很多次的東西。

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

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

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

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

特別聲明

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