活動頁簡析

活動專題頁面，顧名思義是承載各種形式的節(jié)慶促銷、宣傳推廣、營銷產(chǎn)品發(fā)布等等活動的頁面，形式與內(nèi)容也多種多樣。 典型的靜態(tài)活動頁面通常使用頁頭banner+標(biāo)題再配以活動入口的展示形式，主要以背景、banner和標(biāo)題字體的視覺處理來烘托整體氛圍;如今也越來 越多的活動頁會加入游戲等趣味性強(qiáng)的互動方式，采用flash形式展現(xiàn)，今年TMALL的喵星球搶紅包活動就是好例子。

其實無論哪種活動頁，當(dāng)我們對其進(jìn)行拆解分析后會發(fā)現(xiàn)頁面中要展示的信息最終都逃不開以下七種

1. 活動標(biāo)題
2. 活動入口
3. 活動獎品/商品展示
4. 活動參與人數(shù)
5. 有效時間
6. 獲獎信息

活動規(guī)則 如何合理布局，將以上所有信息以最優(yōu)方式展現(xiàn)在頁面中，是活動頁設(shè)計的關(guān)鍵。

一、 充分利用首屏，展示核心信息

筆者的建議是第一屏就將活動的核心內(nèi)容傳達(dá)給用戶，2011年Jakob Neilsen一項研究結(jié)果表明用戶將80%以上的注意力花在對首屏內(nèi)容的瀏覽上,尤其是call-to-action按鈕放在首屏或者第二屏，其轉(zhuǎn)化率 差異巨大。 對于活動頁而言，最重要的核心內(nèi)容有四個：

1. 什么活動?——活動主題
2. 什么時候?——活動時間
3. 有什么獎品(優(yōu)惠/利益)——激勵，折扣，獎品展示
4. 如何參加活動?——參與入口

這是活動頁面首屏應(yīng)當(dāng)完整包含的內(nèi)容(當(dāng)然考慮到一屏的大小，獎品商品大多情況下只能展示一部分)。

圖2-首屏中包含頁面標(biāo)題，獎品/優(yōu)惠，參與入口

1. 適當(dāng)控制內(nèi)容分量，尤其是首屏中，限制文字字?jǐn)?shù)以減輕用戶壓力。
2. 稍顯次要的信息如獲獎名單(多數(shù)在活動頁面中起到烘托氣氛的作用)、活動規(guī)則等內(nèi)容可考慮以倒三角結(jié)構(gòu)呈現(xiàn)。

二、主標(biāo)題與副標(biāo)題闡明活動價值

我們要做的，是在主標(biāo)題與副標(biāo)題的寥寥數(shù)語中讓用戶了解我們的品牌與活動帶給他們的所有核心價值，對，所有。(親泥醒醒!永遠(yuǎn)不會有用戶去看那些長篇大論的活動規(guī)則的!TOT)

標(biāo)題若能做到別出心裁、新穎別致自然好，但若時間所限無法精巧構(gòu)思，還是有一些原則可以保證至少準(zhǔn)確傳達(dá)信息不出差池：

• 精辟簡短——用戶瀏覽標(biāo)題往往一掃而過，文字會提高用戶的理解成本
• 使用用戶熟悉的語言——在標(biāo)題內(nèi)拋出陌生概念往往不是個好主意，用戶看不懂很可能會直接關(guān)閉頁面
• 主標(biāo)題或副標(biāo)題其一要直接告知用戶利益點與價值所在，簡單熟悉如“免費(fèi)”“禮包”“立減”等詞語都能起到良好效果
• 一個稍顯粗暴保守但往往有用的方法，動詞+名詞概括活動核心操作或流程，如“玩應(yīng)用，得禮包”“每日簽到抽獎”等等。

圖3-QQ網(wǎng)購搶福袋活動(局部)

圖4-騰訊游戲活動頁(局部)

三、參與入口——活動頁的眼睛 參與入口是活動頁轉(zhuǎn)化率的關(guān)鍵。

關(guān)于它的設(shè)計，WAD的文章Creative call to action buttons for inspiration里整理過一些不錯的范例，我們從中也能總結(jié)出要點：

• 足夠醒目卻又不顯得突兀的按鈕尺寸
• 位于首屏，處于視覺中心區(qū)域的位置
• 視覺表現(xiàn)——按鈕采用對比色，漸變，投影等特殊質(zhì)感;采用特別設(shè)計的字體，但需要特別注意字體可讀性。

圖5-NAVER的Burger King促銷活動頁，界面清爽簡潔，Call-to-action按鈕視覺效果突出;

圖6-支付寶繳費(fèi)活動頁，可愛清淡的手繪風(fēng)，按鈕選擇了與背景和頁面主體對比的橘紅色，并處在首屏的中心位置;

圖7-京東商城雙11圖書活動頁(首屏)，大標(biāo)題，暢銷書目突出展示都不錯，缺陷就是活動入口不夠醒目;

圖8-三星NX系列買相機(jī)送機(jī)票活動頁，頁面處理得文藝清新，但購買按鈕與視覺主體脫離，位置略顯尷尬;

根據(jù)筆者個人的經(jīng)驗，國內(nèi)用戶大多傾向于簡單而直切要點的設(shè)計，對按鈕尺寸接受程度也相較國外寬松。因此在設(shè)計受眾為國內(nèi)用戶的頁面的時候我們往往會對按鈕進(jìn)行更夸張的處理(說白了，就是可以更大更醒目)。

四、特殊情況，怎么辦?

不是所有的活動都天生對用戶存在吸引力，實際上我們設(shè)計活動頁時常常遭遇各種局限——素材不足，獎品不豐富，活動流程繁瑣，學(xué)習(xí)成本高等等，這就需要設(shè)計師發(fā)揮巧思以保證頁面布局清晰，重點突出，足夠吸引用戶。

• 承載多步操作的活動頁，在首屏提供簡易的示意，讓用戶掃一眼即可了解活動流程;

應(yīng)用中心的每日抽獎頁面，將三個步驟列于頁面中間，同時頁面中三個放大的數(shù)字也起到了很好的引導(dǎo)提示效果。

圖9-應(yīng)用中心抵扣券頁面(局部)

專題網(wǎng)頁設(shè)計之局部設(shè)計從如何脫穎而出：

(1)文案：不管是做Banner設(shè)計還是做專題頁設(shè)計，文案才是最直觀表達(dá)活動的定位和運(yùn)營策略的信息(而設(shè)計的作用就是把這個活動定位給傳達(dá)出來)，在我看來也是最重要的組成部分，那么文案有哪些類型呢?

情緒帶入型

下面是截取的我以前寫的一篇文章里的一小段文字，我覺得拿來當(dāng)做減肥產(chǎn)品的廣告文案也是可以的：

“以前有個同事她說要減肥要健身

我說好啊看你能堅持多久

因為我也好幾次喊過這種話

最后卻都不了了之了

可是幾個月后再看到他

細(xì)腰美臀大長腿

顯得更加自信了

是啊她總可以做到付諸行動

而我只會給自己找借口

也許再這樣下去

我都配不上和她做朋友了吧”

促銷型

全場5折起/全場買三免一/1元秒殺0元搶購/周年鉅惠等等

口號型

爭做行業(yè)領(lǐng)跑者/先賺它1個億/上天貓就購了/好物低價上京東等等

通告型

熱烈慶祝XXX成立幾周年/歡迎XXX領(lǐng)導(dǎo)蒞臨我司/恭喜XXX榮獲XXX稱號

價值觀型

趁年輕，住好點/Just Do It/我的青春我做主/你值得擁有

自嗨型

bigger than bigger/again and again/more and more(完全不知所云但是看起來很厲害的樣子的文案，超級大牌都愛用。。)

惡搞型

老板跑路了/美工甩手不干了等(歪瓜出品，我后面會再提到，因為它簡直是電商設(shè)計界的一股泥石流。。)

反差型文案(后面我會解釋舉例為什么反差)

改變食界，條條是道-衛(wèi)龍

買了就是朋友-故宮淘寶

擬人化文案

下面是一則日本烤雞肉串的廣告文案：

“那么，我去當(dāng)香蔥烤雞肉串去了”

“啊!要是把早上下的蛋也帶來就好了”

“我可不能在這種地方被吃掉”

“您好，您的食材到了”

這則文案就是通過擬人化的口吻，即讓人覺得新穎可愛，又讓人感受到其食材的新鮮。

功能描述型

保濕護(hù)膚一步到位/棉柔舒適超強(qiáng)吸附力/輕松舒適不變形等等，常用于詳情頁里

了解完以上文案類型后，所以當(dāng)我們想要自己的設(shè)計能夠脫穎而出，要么做到在同一個類型(定位方向)的文案里比別人寫的更出彩，要么就換一種類型(定位方向)的文案去寫，而后者其實更容易起到脫穎而出的效果，舉例：

在同一個類型里，但是文案寫得比別人出彩或者內(nèi)容更能打動用戶而達(dá)到脫穎而出的目的：比如如果都是促銷型文案，你寫“XXX周年慶特賣惠”肯定不如“XXX周年慶，全場滿100減50”這種文案有吸引力。為什么呢?因為對于這種促銷類型的文案你把實惠寫的越具體就越能讓用戶感受到真的是在打折，而不是干癟癟的說你在做促銷活動，因為這樣用戶會很疑惑你到底能給他多少優(yōu)惠，他心里沒底就不敢放心大膽的買了。

換一種定位方向達(dá)到脫穎而出的目的：比如衛(wèi)龍作為一款屌絲辣條居然走蘋果這種高富帥的路線;

再比如故宮淘寶居然把那些高高在上的皇帝娘娘們塑造成一種賣萌的形象;

再比如大家都在宣揚(yáng)正能量的時候，這個品牌的咖啡飲料卻走負(fù)能量路線;

以上關(guān)于文案部分，我們就講到這里了，總之文案體現(xiàn)的是你的活動定位和策略，所以文案先于設(shè)計執(zhí)行，并且它很重要很重要很重要。

(2)背景

背景上的脫穎而出，主要體現(xiàn)在色彩/形式/紋理等上面的一種差異化和對比。

色彩上：明亮鮮艷VS暗黑系/暖色VS冷色/多彩色VS無彩色。

比如，同樣是表達(dá)年輕，大部分人想到的應(yīng)該是活力多彩的，而如果你用的是暗黑系的，那你就脫穎而出了。

形式上：扁平VS質(zhì)感/繁雜VS留白/柔美曲線VS剛硬棱角/重復(fù)VS變化。

比如，衛(wèi)龍作為一個賣辣條的品牌，無論是從產(chǎn)品的辣這個特性，還是它產(chǎn)品本身的基因來看，都應(yīng)該走紅紅火火熱鬧低端路線的風(fēng)格設(shè)計對不對?但他突然有一天開始走蘋果這種高富帥的大量留白高冷路線，大家的眼球立馬就被它吸引了。

紋理上：有紋理VS無紋理/無規(guī)律VS有規(guī)律/重復(fù)VS變化。

比如，有些比較卡哇伊風(fēng)格的頁面，如果能在背景上有一些相關(guān)元素或紋理的點綴，起到相互呼應(yīng)的作用，就會比空白的背景有吸引力一些。

反之亦然，有些背景不適合放紋理，會顯得累贅或多余，那么空白背景就會顯得更有吸引力更舒服一些。

(3)產(chǎn)品或模特

產(chǎn)品或模特的脫穎而出主要體現(xiàn)在品牌效應(yīng)/產(chǎn)品品質(zhì)/功能差異等給人的感官感受。

品牌效應(yīng)：大品牌VS小品牌/有品牌VS無品牌/多品牌VS單一品牌/線上品牌/線下品牌/跨品牌合作(吾皇/暴走漫畫)。比如，大品牌的產(chǎn)品比小品牌的產(chǎn)品占據(jù)更多優(yōu)勢，有品牌的產(chǎn)品比無品牌的產(chǎn)品顯得更可信更正規(guī)等，所以如果上升到品牌這個層面，僅僅只是設(shè)計的好看或突出并不會起到很大的優(yōu)勢作用，只是錦上添花而已，品牌的影響力和口碑才是最主要的因素。但是當(dāng)2個品牌一起聯(lián)合，跨品牌做活動，就會比單一品牌產(chǎn)生更強(qiáng)的效應(yīng)，達(dá)到1+1大于2的作用，比如家紡品牌和可口可樂的合作，在設(shè)計上也是沿用了可口可樂的經(jīng)典女人曲線般的瓶身形象：

產(chǎn)品品質(zhì)：好品質(zhì)VS差品質(zhì)/有特點VS無特點/有后期修飾VS無后期修飾/有人知曉VS無人知曉。

比如，同樣一款產(chǎn)品，你的產(chǎn)品圖看起來更清晰更干凈或更有趣好玩更高檔肯定就會更吸引到相應(yīng)的人群的注意力和購買欲望，這些都是會影響到你的頁面設(shè)計好壞的因素。

功能差異：多功能VS單一功能/有差異VS無差異/有優(yōu)勢VS無優(yōu)勢

比如如果都是護(hù)膚產(chǎn)品的專題頁設(shè)計，但是你的這款產(chǎn)品是有別人不具備的功能特性的，那么就可以在你的設(shè)計里通過文字排版或圖形描繪的方式表現(xiàn)出來，直觀的傳達(dá)給別人你的這些優(yōu)勢和氛圍，就比干癟癟的將產(chǎn)品往頁面上一擺更具吸引力：

當(dāng)然這個情況更適合單個產(chǎn)品的宣傳或者放在詳情頁里。

(4)點綴物：有點綴物VS沒有點綴物/點綴物合適VS點綴物不合適。

這個同上面講的紋理類似，比如，有些比較卡哇伊風(fēng)格的頁面，如果能在背景上有一些相關(guān)元素或紋理的點綴，起到相互呼應(yīng)的作用，就會比空白的背景有吸引力一些。

(5)樓層：這里主要包含樓層內(nèi)容和樓層形式2個方面。

樓層內(nèi)容：內(nèi)容新穎VS內(nèi)容常規(guī)/內(nèi)容豐富VS內(nèi)容單調(diào)：

一般來說，在樓層內(nèi)容里如果插入一些好玩的游戲，或者有一些視頻播放，再或者變著花樣給用戶發(fā)紅包和購物券，會比常規(guī)的商品列表展示的樓層更有讓人逛的欲望(不過這個都不止是設(shè)計師的事情了，而是運(yùn)營/交互設(shè)計師/產(chǎn)品經(jīng)理/策劃要去做的事情)。

樓層形式：形式新穎VS形式常規(guī)/形式貼合主題VS不貼合主題。

比如以穿搭建議的方式賣貨的專題頁樓層設(shè)計，大多數(shù)都是像左邊這樣，將一堆衣服按一定秩序堆放好，但是右邊這種形式呢?每個模特擺出一個字母的造型，讓人覺得有點搞怪，都忍不住想要跟著模仿造型了對不對?

專題網(wǎng)頁設(shè)計之整體設(shè)計從如何脫穎而出

整體上我們可以從型/色/意/技四個方面來探討如何做到脫穎而出這個問題：

(1)型：主要是指整體的形式/風(fēng)格等方面要與眾不同，那么跟前面的文案一樣，要想脫穎而出話，要么就是在同一個類型里你能做到你是最優(yōu)秀的;要么是跳出這個類型，或者跨界到不同的領(lǐng)域或定位類型里去表現(xiàn)。

舉例：反差型(衛(wèi)龍)

舉例：惡搞型(歪瓜出品)

(看完這家店的設(shè)計風(fēng)格，整個人都要笑屎......簡直是電商界的一股泥石流，哈哈。我也承認(rèn)這家店成功的脫穎而出了，但是......我有點好奇這家店的美工走出了這家店鋪能不能順利找到工作......除非他打算一輩子呆在這種同類型的店鋪里，啊哈哈哈哈!!!)

舉例：獨一無二型(天貓貓頭形象)

自從2015年的天貓雙十一，第一次將所有的頁面都沿用貓頭的這個造型，就驚艷了全場，因為這個形象太討巧了，不僅成功地與他的品牌形象掛鉤，還非常有利于品牌延伸，這以后，但凡頁面里出現(xiàn)這貓頭造型，就一定會聯(lián)想到天貓，因為他是獨一無二的。

當(dāng)你擁有了某種獨一無二的東西，也就很容易脫穎而出了。

(2)色：主要是指色彩上的差異化，這個跟前面講局部的內(nèi)容類似

比如：明亮鮮艷VS暗黑系/暖色VS冷色/多彩色VS無彩色(別人家都是明亮色系你可不可以嘗試暗黑色系呢?別人家都是暖色系，你可不可以嘗試一些冷色系呢?別人家都是夸張多彩絢麗，你能不能嘗試低調(diào)無彩色系呢?)

比如，同樣是表達(dá)年輕，大部分人想到的應(yīng)該是活力多彩的，而如果你用的是暗黑系的，從另一個角度去詮釋年輕，那你比較容易就脫穎而出了。

(3)意：主要是指品牌特性/理念意義/定位方向等，與眾不同。

品牌符號：從品牌這個角度來說，每一個品牌形象都是獨一無二的，比如，天貓/三只松鼠/初語等都已經(jīng)形成了自己的形象特征，當(dāng)你的頁面上出現(xiàn)了這些形象特征的時候，也就有了自己的優(yōu)勢：

理念意義：圖形代表的含義，靈感來源等

比如，提到圣誕節(jié)，大家都會聯(lián)想到紅配綠，也會聯(lián)想到圣誕樹/雪地/圣誕老人/長筒襪對不對，所以我猜想你們的第一反應(yīng)應(yīng)該是搞比較基礎(chǔ)的堆疊效果吧?像下面這樣：

但有沒有想過像下面這樣提取一種基本型，然后巧妙地與自己的產(chǎn)品相結(jié)合呢?

定位方向：促銷VS趣味VS溫情VS苦情VS情懷

(比如別人都走促銷路線你可以走趣味路線，別人走趣味路線你可以走溫情路線，別人走溫情路線你可以走苦情路線，別人走苦情路線你就走情懷路線，當(dāng)別人都走情懷路線了，你走促銷路線，哈哈哈哈!!)比如，今冬情人節(jié)那次，別人都走溫情路線，我們走了苦情路線，反響很不錯！

再比如，兒童節(jié)的活動設(shè)計，別人可能都走手繪可愛卡哇伊路線

而我們走了小清新路線(其實也是因為怕侵權(quán)不好用模特之類的，再一個我們是兒童節(jié)/母親節(jié)/520一起做的活動，哈哈～)

(4)技：主要是指技術(shù)創(chuàng)新/跨界合作/手法創(chuàng)新等讓人感到新奇，任何時候，都是因為有了技術(shù)的進(jìn)步才使得我們有了更好的體驗和更多的選擇。

比如以前沒有互聯(lián)網(wǎng)的時候，大家只能在線下購物，有了互聯(lián)網(wǎng)之后大家開始在PC上購物，后來移動個互聯(lián)網(wǎng)的發(fā)展和智能手機(jī)的普及和便利，大家又開始轉(zhuǎn)向移動端購物，現(xiàn)在Vr又出來了，以后指不定購物有多便利了。你搶先運(yùn)用了新技術(shù)，你就占有優(yōu)勢。

舉例：前度時間很火的雙十一邀請函，就是一個活生生的例子，可以看下它的幕后制作視頻：

我在里面看到，它分別涉及到腦爆+前期構(gòu)思+手繪草圖+攝影+后期合成+Vr技術(shù)+threejs+webGL的組合繪制3D場景+渲染等技術(shù)環(huán)節(jié)。最終達(dá)到了刷屏的效果，吸引了幾乎所有互聯(lián)網(wǎng)人的注意力。如果你也有這個技術(shù)，你的作品想不脫穎而出也難了(不過也只有BAT這個級別的大金主才花得起這個錢了)。

• 大膽凸顯頁面中的核心操作(如放在首屏，加大展示區(qū)域或使用特殊視覺處理等等)以吸引用戶

在素材有限條件下，部分設(shè)計師會嘗試將最能吸引用戶的操作放在首屏中，如抽獎、領(lǐng)取禮包等等，盡管有時候它們并不是第一步;

應(yīng)用中心女生節(jié)活動頁，活動規(guī)則是每玩一款應(yīng)用即可獲得一次抽獎機(jī)會，但若是按照常規(guī)思路 來排布頁面，禮包展示與抽獎按鈕必然會被擠到第二屏，首屏只有平鋪的應(yīng)用列表，平淡無趣，;于是我們將頁面進(jìn)行了調(diào)整，將領(lǐng)取禮包放到第一屏，當(dāng)用戶沒有 抽獎機(jī)會卻點擊了領(lǐng)取禮包時，再給予用戶去玩應(yīng)用的相應(yīng)引導(dǎo)。

圖10-應(yīng)用中心女生節(jié)活動頁(局部)

這樣的做法能在當(dāng)前條件所限下加強(qiáng)頁面沖擊力和吸引力，但同時存在一定風(fēng)險，會讓用戶的操作流程與頁面正確操作流程相悖，增加用戶犯錯概率。此時需要通過其他的交互手段進(jìn)行彌補(bǔ)，如上面提到的提供流程示意圖，或者在犯錯后進(jìn)行友好 的引導(dǎo)等等。筆者個人還是比較理解這種設(shè)計方式的，找準(zhǔn)頁面核心任務(wù)與核心操作，大膽地對非核心的功能進(jìn)行減法和舍棄，雖然最后輸出的可能并非好結(jié)果， 很多時候這也是一種必要且可行的設(shè)計思路。

五、關(guān)注后續(xù)——活動效果的評估

活動頁面成功上線后設(shè)計師的工作其實并未結(jié)束，每一次活動頁面的投放結(jié)束后，我們都能從各不同方面，尤其是數(shù)據(jù)反饋中得到很多經(jīng)驗和教訓(xùn)。

前些日子讀到胖胡斐的文章《說說轉(zhuǎn)化率》，里面提到了一個簡單易行的評估方式，在這里跟大家分享一下：將活動按轉(zhuǎn)化路徑進(jìn)行分解，通過對比每個轉(zhuǎn)換路徑節(jié)點的轉(zhuǎn)化率來評估活動的效果，為進(jìn)一步提升轉(zhuǎn)化率提供參考。我們可以效仿這種拆分的思路，對整個活動的流程進(jìn)行拆分——以應(yīng)用中心的禮包抽取活動頁為例，整個活動的主要流程與涉及到的頁面如下：入口(廣告位)→ 活動頁面 → 應(yīng)用列表(活動頁中)→ 抽取禮包 → 禮包兌換中心 → 可使用禮包的應(yīng)用內(nèi)頁

圖11-禮包類活動流程與涉及頁面拆分

提取每一步的轉(zhuǎn)化率數(shù)據(jù)進(jìn)行對照，鎖定轉(zhuǎn)化率流失最嚴(yán)重的節(jié)點，集中思考解決和改善之道。

總結(jié)一下，其實對于活動專題網(wǎng)頁設(shè)計，筆者想與大家分享的也不過就是以下幾句話：注重信息表 達(dá)，充分利用首屏布局核心信息(標(biāo)題，參與入口，獎品展示);找準(zhǔn)頁面核心任務(wù)并凸顯核心操作，給予友好簡明的的流程引導(dǎo)與提示;關(guān)注活動數(shù)據(jù)，參照數(shù)據(jù) 找出活動頁面的相關(guān)改進(jìn)點。以上都是入職以來一些經(jīng)驗總結(jié)，尚顯稚嫩，若能給大家?guī)砟敲匆稽c點思考和啟發(fā)，筆者就十分滿足了。

本文題目：專題網(wǎng)頁設(shè)計十大技巧讓網(wǎng)頁脫穎而出
分享路徑：http://jinyejixie.com/news28/169128.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、電子商務(wù)、網(wǎng)站設(shè)計、小程序開發(fā)、關(guān)鍵詞優(yōu)化、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)