专题网页设计十大技巧让网页脱颖而出

活动页简析

活动专题页面，顾名思义是承载各种形式的节庆促销、宣传推广、营销产品发布等等活动的页面，形式与内容也多种多样。 典型的静态活动页面通常使用页头banner+标题再配以活动入口的展示形式，主要以背景、banner和标题字体的视觉处理来烘托整体氛围;如今也越来 越多的活动页会加入游戏等趣味性强的互动方式，采用flash形式展现，今年TMALL的喵星球抢红包活动就是好例子。

其实无论哪种活动页，当我们对其进行拆解分析后会发现页面中要展示的信息最终都逃不开以下七种

1. 活动标题
2. 活动入口
3. 活动奖品/商品展示
4. 活动参与人数
5. 有效时间
6. 获奖信息

活动规则 如何合理布局，将以上所有信息以最优方式展现在页面中，是活动页设计的关键。

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

笔者的建议是第一屏就将活动的核心内容传达给用户，2011年Jakob Neilsen一项研究结果表明用户将80%以上的注意力花在对首屏内容的浏览上,尤其是call-to-action按钮放在首屏或者第二屏，其转化率 差异巨大。 对于活动页而言，最重要的核心内容有四个：

1. 什么活动?——活动主题
2. 什么时候?——活动时间
3. 有什么奖品(优惠/利益)——激励，折扣，奖品展示
4. 如何参加活动?——参与入口

这是活动页面首屏应当完整包含的内容(当然考虑到一屏的大小，奖品商品大多情况下只能展示一部分)。

图2-首屏中包含页面标题，奖品/优惠，参与入口

1. 适当控制内容分量，尤其是首屏中，限制文字字数以减轻用户压力。
2. 稍显次要的信息如获奖名单(多数在活动页面中起到烘托气氛的作用)、活动规则等内容可考虑以倒三角结构呈现。

二、主标题与副标题阐明活动价值

我们要做的，是在主标题与副标题的寥寥数语中让用户了解我们的品牌与活动带给他们的所有核心价值，对，所有。(亲泥醒醒!永远不会有用户去看那些长篇大论的活动规则的!TOT)

标题若能做到别出心裁、新颖别致自然好，但若时间所限无法精巧构思，还是有一些原则可以保证至少准确传达信息不出差池：

• 精辟简短——用户浏览标题往往一扫而过，文字会提高用户的理解成本
• 使用用户熟悉的语言——在标题内抛出陌生概念往往不是个好主意，用户看不懂很可能会直接关闭页面
• 主标题或副标题其一要直接告知用户利益点与价值所在，简单熟悉如“免费”“礼包”“立减”等词语都能起到良好效果
• 一个稍显粗暴保守但往往有用的方法，动词+名词概括活动核心操作或流程，如“玩应用，得礼包”“每日签到抽奖”等等。

图3-QQ网购抢福袋活动(局部)

图4-腾讯游戏活动页(局部)

三、参与入口——活动页的眼睛 参与入口是活动页转化率的关键。

关于它的设计，WAD的文章Creative call to action buttons for inspiration里整理过一些不错的范例，我们从中也能总结出要点：

• 足够醒目却又不显得突兀的按钮尺寸
• 位于首屏，处于视觉中心区域的位置
• 视觉表现——按钮采用对比色，渐变，投影等特殊质感;采用特别设计的字体，但需要特别注意字体可读性。

图5-NAVER的Burger King促销活动页，界面清爽简洁，Call-to-action按钮视觉效果突出;

图6-支付宝缴费活动页，可爱清淡的手绘风，按钮选择了与背景和页面主体对比的橘红色，并处在首屏的中心位置;

图7-京东商城双11图书活动页(首屏)，大标题，畅销书目突出展示都不错，缺陷就是活动入口不够醒目;

图8-三星NX系列买相机送机票活动页，页面处理得文艺清新，但购买按钮与视觉主体脱离，位置略显尴尬;

根据笔者个人的经验，国内用户大多倾向于简单而直切要点的设计，对按钮尺寸接受程度也相较国外宽松。因此在设计受众为国内用户的页面的时候我们往往会对按钮进行更夸张的处理(说白了，就是可以更大更醒目)。

四、特殊情况，怎么办?

不是所有的活动都天生对用户存在吸引力，实际上我们设计活动页时常常遭遇各种局限——素材不足，奖品不丰富，活动流程繁琐，学习成本高等等，这就需要设计师发挥巧思以保证页面布局清晰，重点突出，足够吸引用户。

• 承载多步操作的活动页，在首屏提供简易的示意，让用户扫一眼即可了解活动流程;

应用中心的每日抽奖页面，将三个步骤列于页面中间，同时页面中三个放大的数字也起到了很好的引导提示效果。

图9-应用中心抵扣券页面(局部)

专题网页设计之局部设计从如何脱颖而出：

(1)文案：不管是做Banner设计还是做专题页设计，文案才是最直观表达活动的定位和运营策略的信息(而设计的作用就是把这个活动定位给传达出来)，在我看来也是最重要的组成部分，那么文案有哪些类型呢?

情绪带入型

下面是截取的我以前写的一篇文章里的一小段文字，我觉得拿来当做减肥产品的广告文案也是可以的：

“以前有个同事她说要减肥要健身

我说好啊看你能坚持多久

因为我也好几次喊过这种话

最后却都不了了之了

可是几个月后再看到他

细腰美臀大长腿

显得更加自信了

是啊她总可以做到付诸行动

而我只会给自己找借口

也许再这样下去

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

促销型

全场5折起/全场买三免一/1元秒杀0元抢购/周年钜惠等等

口号型

争做行业领跑者/先赚它1个亿/上天猫就购了/好物低价上京东等等

通告型

热烈庆祝XXX成立几周年/欢迎XXX领导莅临我司/恭喜XXX荣获XXX称号

价值观型

趁年轻，住好点/Just Do It/我的青春我做主/你值得拥有

自嗨型

bigger than bigger/again and again/more and more(完全不知所云但是看起来很厉害的样子的文案，超级大牌都爱用。。)

恶搞型

老板跑路了/美工甩手不干了等(歪瓜出品，我后面会再提到，因为它简直是电商设计界的一股泥石流。。)

反差型文案(后面我会解释举例为什么反差)

改变食界，条条是道-卫龙

买了就是朋友-故宫淘宝

拟人化文案

下面是一则日本烤鸡肉串的广告文案：

“那么，我去当香葱烤鸡肉串去了”

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

“我可不能在这种地方被吃掉”

“您好，您的食材到了”

这则文案就是通过拟人化的口吻，即让人觉得新颖可爱，又让人感受到其食材的新鲜。

功能描述型

保湿护肤一步到位/棉柔舒适超强吸附力/轻松舒适不变形等等，常用于详情页里

了解完以上文案类型后，所以当我们想要自己的设计能够脱颖而出，要么做到在同一个类型(定位方向)的文案里比别人写的更出彩，要么就换一种类型(定位方向)的文案去写，而后者其实更容易起到脱颖而出的效果，举例：

在同一个类型里，但是文案写得比别人出彩或者内容更能打动用户而达到脱颖而出的目的：比如如果都是促销型文案，你写“XXX周年庆特卖惠”肯定不如“XXX周年庆，全场满100减50”这种文案有吸引力。为什么呢?因为对于这种促销类型的文案你把实惠写的越具体就越能让用户感受到真的是在打折，而不是干瘪瘪的说你在做促销活动，因为这样用户会很疑惑你到底能给他多少优惠，他心里没底就不敢放心大胆的买了。

换一种定位方向达到脱颖而出的目的：比如卫龙作为一款屌丝辣条居然走苹果这种高富帅的路线;

再比如故宫淘宝居然把那些高高在上的皇帝娘娘们塑造成一种卖萌的形象;

再比如大家都在宣扬正能量的时候，这个品牌的咖啡饮料却走负能量路线;

以上关于文案部分，我们就讲到这里了，总之文案体现的是你的活动定位和策略，所以文案先于设计执行，并且它很重要很重要很重要。

(2)背景

背景上的脱颖而出，主要体现在色彩/形式/纹理等上面的一种差异化和对比。

色彩上：明亮鲜艳VS暗黑系/暖色VS冷色/多彩色VS无彩色。

比如，同样是表达年轻，大部分人想到的应该是活力多彩的，而如果你用的是暗黑系的，那你就脱颖而出了。

形式上：扁平VS质感/繁杂VS留白/柔美曲线VS刚硬棱角/重复VS变化。

比如，卫龙作为一个卖辣条的品牌，无论是从产品的辣这个特性，还是它产品本身的基因来看，都应该走红红火火热闹低端路线的风格设计对不对?但他突然有一天开始走苹果这种高富帅的大量留白高冷路线，大家的眼球立马就被它吸引了。

纹理上：有纹理VS无纹理/无规律VS有规律/重复VS变化。

比如，有些比较卡哇伊风格的页面，如果能在背景上有一些相关元素或纹理的点缀，起到相互呼应的作用，就会比空白的背景有吸引力一些。

反之亦然，有些背景不适合放纹理，会显得累赘或多余，那么空白背景就会显得更有吸引力更舒服一些。

(3)产品或模特

产品或模特的脱颖而出主要体现在品牌效应/产品品质/功能差异等给人的感官感受。

品牌效应：大品牌VS小品牌/有品牌VS无品牌/多品牌VS单一品牌/线上品牌/线下品牌/跨品牌合作(吾皇/暴走漫画)。比如，大品牌的产品比小品牌的产品占据更多优势，有品牌的产品比无品牌的产品显得更可信更正规等，所以如果上升到品牌这个层面，仅仅只是设计的好看或突出并不会起到很大的优势作用，只是锦上添花而已，品牌的影响力和口碑才是最主要的因素。但是当2个品牌一起联合，跨品牌做活动，就会比单一品牌产生更强的效应，达到1+1大于2的作用，比如家纺品牌和可口可乐的合作，在设计上也是沿用了可口可乐的经典女人曲线般的瓶身形象：

产品品质：好品质VS差品质/有特点VS无特点/有后期修饰VS无后期修饰/有人知晓VS无人知晓。

比如，同样一款产品，你的产品图看起来更清晰更干净或更有趣好玩更高档肯定就会更吸引到相应的人群的注意力和购买欲望，这些都是会影响到你的页面设计好坏的因素。

功能差异：多功能VS单一功能/有差异VS无差异/有优势VS无优势

比如如果都是护肤产品的专题页设计，但是你的这款产品是有别人不具备的功能特性的，那么就可以在你的设计里通过文字排版或图形描绘的方式表现出来，直观的传达给别人你的这些优势和氛围，就比干瘪瘪的将产品往页面上一摆更具吸引力：

当然这个情况更适合单个产品的宣传或者放在详情页里。

(4)点缀物：有点缀物VS没有点缀物/点缀物合适VS点缀物不合适。

这个同上面讲的纹理类似，比如，有些比较卡哇伊风格的页面，如果能在背景上有一些相关元素或纹理的点缀，起到相互呼应的作用，就会比空白的背景有吸引力一些。

(5)楼层：这里主要包含楼层内容和楼层形式2个方面。

楼层内容：内容新颖VS内容常规/内容丰富VS内容单调：

一般来说，在楼层内容里如果插入一些好玩的游戏，或者有一些视频播放，再或者变着花样给用户发红包和购物券，会比常规的商品列表展示的楼层更有让人逛的欲望(不过这个都不止是设计师的事情了，而是运营/交互设计师/产品经理/策划要去做的事情)。

楼层形式：形式新颖VS形式常规/形式贴合主题VS不贴合主题。

比如以穿搭建议的方式卖货的专题页楼层设计，大多数都是像左边这样，将一堆衣服按一定秩序堆放好，但是右边这种形式呢?每个模特摆出一个字母的造型，让人觉得有点搞怪，都忍不住想要跟着模仿造型了对不对?

专题网页设计之整体设计从如何脱颖而出

整体上我们可以从型/色/意/技四个方面来探讨如何做到脱颖而出这个问题：

(1)型：主要是指整体的形式/风格等方面要与众不同，那么跟前面的文案一样，要想脱颖而出话，要么就是在同一个类型里你能做到你是最优秀的;要么是跳出这个类型，或者跨界到不同的领域或定位类型里去表现。

举例：反差型(卫龙)

举例：恶搞型(歪瓜出品)

(看完这家店的设计风格，整个人都要笑屎......简直是电商界的一股泥石流，哈哈。我也承认这家店成功的脱颖而出了，但是......我有点好奇这家店的美工走出了这家店铺能不能顺利找到工作......除非他打算一辈子呆在这种同类型的店铺里，啊哈哈哈哈!!!)

举例：独一无二型(天猫猫头形象)

自从2015年的天猫双十一，第一次将所有的页面都沿用猫头的这个造型，就惊艳了全场，因为这个形象太讨巧了，不仅成功地与他的品牌形象挂钩，还非常有利于品牌延伸，这以后，但凡页面里出现这猫头造型，就一定会联想到天猫，因为他是独一无二的。

当你拥有了某种独一无二的东西，也就很容易脱颖而出了。

(2)色：主要是指色彩上的差异化，这个跟前面讲局部的内容类似

比如：明亮鲜艳VS暗黑系/暖色VS冷色/多彩色VS无彩色(别人家都是明亮色系你可不可以尝试暗黑色系呢?别人家都是暖色系，你可不可以尝试一些冷色系呢?别人家都是夸张多彩绚丽，你能不能尝试低调无彩色系呢?)

比如，同样是表达年轻，大部分人想到的应该是活力多彩的，而如果你用的是暗黑系的，从另一个角度去诠释年轻，那你比较容易就脱颖而出了。

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

品牌符号：从品牌这个角度来说，每一个品牌形象都是独一无二的，比如，天猫/三只松鼠/初语等都已经形成了自己的形象特征，当你的页面上出现了这些形象特征的时候，也就有了自己的优势：

理念意义：图形代表的含义，灵感来源等

比如，提到圣诞节，大家都会联想到红配绿，也会联想到圣诞树/雪地/圣诞老人/长筒袜对不对，所以我猜想你们的第一反应应该是搞比较基础的堆叠效果吧?像下面这样：

但有没有想过像下面这样提取一种基本型，然后巧妙地与自己的产品相结合呢?

定位方向：促销VS趣味VS温情VS苦情VS情怀

(比如别人都走促销路线你可以走趣味路线，别人走趣味路线你可以走温情路线，别人走温情路线你可以走苦情路线，别人走苦情路线你就走情怀路线，当别人都走情怀路线了，你走促销路线，哈哈哈哈!!)比如，今冬情人节那次，别人都走温情路线，我们走了苦情路线，反响很不错！

再比如，儿童节的活动设计，别人可能都走手绘可爱卡哇伊路线

而我们走了小清新路线(其实也是因为怕侵权不好用模特之类的，再一个我们是儿童节/母亲节/520一起做的活动，哈哈～)

(4)技：主要是指技术创新/跨界合作/手法创新等让人感到新奇，任何时候，都是因为有了技术的进步才使得我们有了更好的体验和更多的选择。

比如以前没有互联网的时候，大家只能在线下购物，有了互联网之后大家开始在PC上购物，后来移动个互联网的发展和智能手机的普及和便利，大家又开始转向移动端购物，现在Vr又出来了，以后指不定购物有多便利了。你抢先运用了新技术，你就占有优势。

举例：前度时间很火的双十一邀请函，就是一个活生生的例子，可以看下它的幕后制作视频：

我在里面看到，它分别涉及到脑爆+前期构思+手绘草图+摄影+后期合成+Vr技术+threejs+webGL的组合绘制3D场景+渲染等技术环节。最终达到了刷屏的效果，吸引了几乎所有互联网人的注意力。如果你也有这个技术，你的作品想不脱颖而出也难了(不过也只有BAT这个级别的大金主才花得起这个钱了)。

• 大胆凸显页面中的核心操作(如放在首屏，加大展示区域或使用特殊视觉处理等等)以吸引用户

在素材有限条件下，部分设计师会尝试将最能吸引用户的操作放在首屏中，如抽奖、领取礼包等等，尽管有时候它们并不是第一步;

应用中心女生节活动页，活动规则是每玩一款应用即可获得一次抽奖机会，但若是按照常规思路 来排布页面，礼包展示与抽奖按钮必然会被挤到第二屏，首屏只有平铺的应用列表，平淡无趣，;于是我们将页面进行了调整，将领取礼包放到第一屏，当用户没有 抽奖机会却点击了领取礼包时，再给予用户去玩应用的相应引导。

图10-应用中心女生节活动页(局部)

这样的做法能在当前条件所限下加强页面冲击力和吸引力，但同时存在一定风险，会让用户的操作流程与页面正确操作流程相悖，增加用户犯错概率。此时需要通过其他的交互手段进行弥补，如上面提到的提供流程示意图，或者在犯错后进行友好 的引导等等。笔者个人还是比较理解这种设计方式的，找准页面核心任务与核心操作，大胆地对非核心的功能进行减法和舍弃，虽然最后输出的可能并非好结果， 很多时候这也是一种必要且可行的设计思路。

五、关注后续——活动效果的评估

活动页面成功上线后设计师的工作其实并未结束，每一次活动页面的投放结束后，我们都能从各不同方面，尤其是数据反馈中得到很多经验和教训。

前些日子读到胖胡斐的文章《说说转化率》，里面提到了一个简单易行的评估方式，在这里跟大家分享一下：将活动按转化路径进行分解，通过对比每个转换路径节点的转化率来评估活动的效果，为进一步提升转化率提供参考。我们可以效仿这种拆分的思路，对整个活动的流程进行拆分——以应用中心的礼包抽取活动页为例，整个活动的主要流程与涉及到的页面如下：入口(广告位)→ 活动页面 → 应用列表(活动页中)→ 抽取礼包 → 礼包兑换中心 → 可使用礼包的应用内页

图11-礼包类活动流程与涉及页面拆分

提取每一步的转化率数据进行对照，锁定转化率流失最严重的节点，集中思考解决和改善之道。

总结一下，其实对于活动专题网页设计，笔者想与大家分享的也不过就是以下几句话：注重信息表 达，充分利用首屏布局核心信息(标题，参与入口，奖品展示);找准页面核心任务并凸显核心操作，给予友好简明的的流程引导与提示;关注活动数据，参照数据 找出活动页面的相关改进点。以上都是入职以来一些经验总结，尚显稚嫩，若能给大家带来那么一点点思考和启发，笔者就十分满足了。

本文题目：专题网页设计十大技巧让网页脱颖而出
分享路径：https://www.cdcxhl.com/news28/169128.html

成都网站建设公司_创新互联，为您提供软件开发、电子商务、网站设计、小程序开发、关键词优化、用户体验

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联