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

活动页简析

活动专题页面，顾其名称，即为汇集各类庆典促销、宣传推广以及产品营销发布等活动的平台，其呈现的形式和包含的内容同样丰富多变。典型的静态活动页面一般采用页头横幅加上标题，并辅以活动入口的展示开元ky888棋牌官方版，主要通过背景、横幅及标题字体的视觉设计来营造整体氛围；而现在，越来越多的活动页面开始融入游戏等富有趣味性的互动形式，并以flash技术进行呈现，例如今年天猫的喵星球抢红包活动便是一个典型的成功案例。

实际上，无论是对哪一种活动页面进行拆分和深入剖析，我们都会发现，页面上所要呈现的内容最终无不涉及以下七个方面。

活动名称设定、参与通道明确、奖品商品详尽展示、参与者数量统计、活动期限规定、获奖者信息公布

活动页面的设计核心在于如何科学规划布局，确保将所有相关信息以最理想的形式呈现于页面上。

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

作者提出，活动页面应在一开始就呈现关键信息，根据2011年Jakob Nielsen的研究发现，用户在首屏内容上的关注度超过80%开元棋官方正版下载，特别是当call-to-action按钮位于首屏或第二屏时，其转化效果差异显著。对于活动页面来说，关键的核心内容主要包括以下四点：

何为活动？——探寻活动主题；何时举办活动？——锁定活动时间；活动有哪些奖励（优惠/利益）？——激励措施、折扣优惠、奖品一览；如何参与活动？——寻找参与途径。

这是活动页面首页必备的全面信息（当然，鉴于单屏的尺寸限制，奖品和商品通常只能展示其中的一部分）。

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

合理调控信息量，特别是在首屏展示时，应尽量减少文字数量，以降低用户阅读负担。对于那些相对不那么重要的信息，比如获奖名单（这些信息多在活动页面中用于营造氛围）和活动规则等，可以采用倒三角的布局方式来展示。此外，二、活动的主标题和副标题需要明确地表达活动的价值所在。

我们的目标，就是通过主副标题的简短文字，让用户充分感知到我们品牌及活动所蕴含的全部核心价值，是的，全部。（亲爱的朋友们，快醒醒！根本不会有用户愿意阅读那些冗长的活动规则！TOT）

若标题能够独具匠心、别具一格，自是上佳之选；然而，若受限于时间，难以精心策划，仍有一些准则可供遵循，以确保信息传达准确无误，避免出现偏差。

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

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

三、活动页面中的参与通道——其犹如活动页面的灵魂所在，是直接影响活动页面转化率的核心要素。

在WAD的文章《创意呼唤行动按钮，激发灵感》中，对它的设计进行了梳理，其中收录了一些颇具价值的案例，我们亦能从中提炼出关键点：

图5展示了NAVER上Burger King的促销活动页面，该页面设计风格清新简洁，其中的Call-to-action按钮在视觉上十分醒目。

图6展示了支付宝的缴费活动页面，其设计风格采用了温馨清新的手绘手法，页面中的按钮颜色选用了与背景及页面主题形成鲜明对比的橘红色，并且巧妙地置于首屏的正中央。

图7展示了京东商城在双11期间的图书促销页面，首屏上显著位置的大标题和热门书籍的突出陈列做得相当不错，但美中不足的是，活动的入口设计不够引人注目。

图8展示了三星NX系列相机促销活动页面，该页面设计风格颇具文艺气息，显得清新脱俗，然而，购买按钮的设计似乎与视觉焦点有所脱节，其位置显得有些不协调。

依据个人体会，我国用户普遍偏好简洁明了、直击核心的设计风格，对于按钮大小的容忍度也相对国外用户更为宽泛。鉴于此，在面向国内用户设计的网页中，我们常常会对按钮进行更为夸张的设计（换句话说，就是使其更加宽敞且显眼）。

四、特殊情况，怎么办?

并非所有活动都能自然地吸引到用户，实际上在设计活动页面时，我们经常会遇到诸多限制——比如素材短缺、奖品不够丰厚、活动流程复杂、学习成本高昂等问题。因此，设计师需要运用创意思维，确保页面布局清晰明了，重点突出，以充分吸引用户注意。

应用中心的每日抽奖界面中央清晰地标示了三个操作步骤，而界面上的三个显著放大的数字同样有效地指引了用户的操作流程。

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

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

无论是进行横幅广告设计还是策划专题页面，文案都是直接展现活动定位与运营策略的关键信息（其设计职责便是将这一活动定位传递给受众），在我看来，它更是核心要素。那么，文案具体有哪些种类呢？

情绪带入型

以下是我过往撰写的文章中的一小部分内容，我认为将其作为减肥产品宣传语也是十分合适的：

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

我说好啊看你能坚持多久

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

最后却都不了了之了

可是几个月后再看到他

细腰美臀大长腿

显得更加自信了

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

而我只会给自己找借口

也许再这样下去

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

促销型

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

口号型

立志成为行业领军人物，先实现收入突破亿级目标，选择天猫购物，享受优质低价商品，亦或是在京东上挑选性价比高的好物。

通告型

欢庆XXX成立纪念日到来/热烈欢迎XXX领导亲临我公司/祝贺XXX荣膺XXX荣誉称号

价值观型

趁着年华正盛，选择一个舒适的居住环境，Just Do It，我的青春由我主宰，你完全有资格享受这一切。

自嗨型

尺寸超越常规/反复强调/持续增加（看似令人摸不着头脑却颇具吸引力的宣传语，众多顶级品牌都乐于采纳。。）

恶搞型

老板离岗了，美工也离职了，这些情况都值得注意（歪瓜的作品，稍后我会详细提及，它们在电商设计领域犹如一股泥石流一般引人注目。。）。

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

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

买了就是朋友-故宫淘宝

拟人化文案

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

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

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

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

“您好，您的食材到了”

此文案采用拟人化的表述方式，既显得别具一格，令人觉得亲切有趣，同时也让人深刻体会到所用食材的鲜嫩可口。

功能描述型

保湿与护肤功能合二为一，棉质柔软，吸附力卓越，使用时倍感轻松与舒适，不易变形，这些特点常被用在商品详情页中进行介绍。

在掌握了上述文案类型知识之后，若期望我们的设计作品能够独树一帜，我们有两种途径可以选择：一是确保在所属类型（即定位方向）的文案创作中超越他人，二是尝试采用另一种类型（定位方向）的文案进行创作。实际上，后者往往更能够帮助作品脱颖而出，比如：

在同类文案中，若能独树一帜，使其更具吸引力或更能触动人心开yun体育官网入口登录app，从而实现脱颖而出：以促销文案为例，若众多文案均为“XXX周年庆特卖惠”，则“XXX周年庆，全场满100立减50”的表述无疑更具吸引力。为何如此？这是因为针对此类促销文案，你若将优惠内容描述得越详细，用户便越能切实感受到打折的真实性，而非仅仅空洞地宣称进行促销。否则，用户会质疑你能提供多少优惠，心中无把握，便不敢毫不犹豫地购买。

寻求独特的定位策略以实现脱颖而出：例如，卫龙这款原本定位较低的辣条品牌，竟然选择了模仿苹果公司这种高端、时尚的品牌形象。

故宫淘宝竟然将那些原本威严的皇帝和皇后们，塑造成了一种可爱卖萌的模样。

例如，尽管众人都在传播积极向上的信息，但这款咖啡饮品却选择了消极的营销策略。

关于文案的内容，我们已经讨论完毕。简而言之，文案所展现的是你活动的定位与策略。因此，文案的制作需在设计的实施之前完成，其重要性不容忽视，真的非常非常关键。

(2)背景

在背景衬托下，其显著特点在于色彩、形式和纹理等方面的差异化与鲜明对比。

在色彩方面：明快亮丽与深邃暗调相对，暖色调与冷色调形成对比，丰富多彩与单调无彩相区别。

通常人们提及年轻，首先联想到的是充满活力的、色彩斑斓的，但若你选择了暗色调的风格，便能从众人中脱颖而出。

在表现形式上：平面与质感相对，繁复与留白相映，柔美曲线与刚硬棱角互衬，重复与变化交织。

卫龙作为一家辣条品牌，其产品以辣味著称，且基因中就蕴含着热闹的底层风格，理应受到欢迎。然而，它却突然转变风格，开始追求苹果式的简约、高端和留白，这种高冷范儿立刻吸引了众人的目光。

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

例如，某些带有可爱风格的网页，若在背景部分融入一些与之相呼应的元素或图案，便能增添几分吸引力，相较于单纯的空白背景，更具魅力。

相应地，有些场景并不适宜添加纹理，这样做可能会显得繁杂或过剩，因此采用纯色背景反而能带来更强的吸引力，让人感觉更加舒适。

(3)产品或模特

产品或模特之所以能够突出重围，主要表现在品牌影响力、产品质量以及功能上的独特性等方面，这些因素共同作用于人们的感官体验。

品牌影响力：大型品牌与小型品牌相较，有品牌与无品牌之别，众多品牌与单一品牌之对比，线上品牌与线下品牌之分，以及跨品牌间的合作，如吾皇与暴走漫画的联手。大品牌产品相较于小品牌产品，优势更为明显；而有品牌的产品相较于无品牌产品，则更显可信和规范。因此，在品牌这一层面，仅凭外观设计的美观或突出并不能带来显著的优势，这不过是锦上添花；真正决定胜负的是品牌的影响力和良好口碑。然而，一旦两个品牌携手合作，开展跨品牌活动，其影响力将远超单一品牌，实现的效果相当于1加1大于2。以家纺品牌与可口可乐的合作为例，在设计上，双方同样采用了可口可乐标志性的女性曲线瓶身形象。

产品质量：优质与劣质之别，特色与平庸之分，经过加工与未经修饰之对比，知名与不为人知之差异。

例如，对于同一款商品，若你的产品图片显得更为清晰、整洁，或是更具趣味性和档次感，那么无疑将更能吸引目标消费者的关注和购买意愿。这些因素无疑都会对页面设计的优劣产生重要影响。

在功能上存在区别：多功能型与单一功能型相比，差异明显；存在差异的双方，一方具备优势，另一方则相对缺乏。

若专题页针对的是护肤品，而贵公司的产品拥有独特的功能，那么在设计时，可通过文字布局或图形设计巧妙展现这些特性，直观地向消费者传递产品的优势与氛围；相较于简单地将产品陈列在页面上，这样的做法无疑更具吸引力。

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

装饰品：存在装饰品与不存在装饰品之别，或装饰品搭配得当与搭配不当之分。

这种纹理与前面提到的相似，例如，某些具有可爱风格的页面，若在背景中融入一些与之相呼应的元素或纹理进行装饰，相较于纯白的背景，其吸引力会更大一些。

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

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

通常情况下，若在楼层布局中加入趣味游戏、播放视频，或是变换方式向用户派发红包和购物券，这样的楼层展示相较普通商品列表，更能激发人们浏览的兴趣（然而，这并非仅是设计师的责任，运营、交互设计师、产品经理以及策划团队均需参与其中）。

楼层设计：创新型布局对比传统样式，紧扣主题的设计与偏离主题的设计形成鲜明对比。

以服饰搭配推荐为主题的页面布局，大多采用类似左侧的展示手法，将众多衣物有规律地陈列开来；然而，右侧的呈现方式却有所不同，每个模特都摆出了字母形状的姿态，这种独特的造型让人感觉颇为有趣，甚至让人忍不住想要尝试模仿这种造型，对吧？

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

在总体上，我们可从形态、色彩、意境以及技艺四个维度入手，深入分析如何实现独树一帜的目标。

整体上，形式或风格需独树一帜。若想与之前的文案区别开来，要么在同类中力求成为顶尖；要么打破常规，跨足至其他领域或定位，展现不同风采。

举例：反差型(卫龙)

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

逛过这家店铺的设计风格，不禁让人忍俊不禁，简直就像电商界中的一股泥石流，令人捧腹大笑。我必须承认，这家店确实在众多竞争中脱颖而出。然而，我心中不禁产生了一个疑问：这家店的美工如果离开这里，能否在其他地方顺利找到工作呢？除非他打算永远留在这类店铺中，啊哈哈哈哈！！！

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

自2015年天猫双十一活动以来，首次将统一采用猫头图案进行页面设计，立刻赢得了所有人的惊叹。这个形象设计巧妙至极，不仅完美契合了品牌特色，更有助于品牌的拓展。自此，每当页面上出现这个猫头图案，人们便会自然而然地联想到天猫，因其独特性而深入人心。

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

色彩方面：主要涉及色彩的多样性，这与之前所讲述的局部内容有相似之处。

例如：明快亮丽与深邃暗调相对/温馨暖调与清冷色调成对比/斑斓多彩与素净无彩形成鲜明对照/（别人家都采用明快亮丽的色彩，你为何不尝试深邃的暗调呢？别人家都偏好温馨的暖色调，你为何不尝试一些清冷的冷色调呢？别人家都追求夸张多彩的视觉效果，你为何不尝试低调的素净无彩色系呢？）

通常人们提及年轻，首先联想到的是充满活力的色彩斑斓，但若你选择以暗黑风格来展现年轻，从另一维度解读这一概念，那么你便更有可能从众人中脱颖而出。

品牌特性、理念意义以及定位方向等方面，均展现出独特的个性，与其它品牌截然不同。

品牌标识方面，每个品牌所塑造的形象均具独特性；以天猫、三只松鼠、初语等为例，它们各自构筑了鲜明的品牌个性。一旦你的页面展现出这些个性特征，便能够赋予自身一定的竞争优势。

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

提及圣诞节，众人往往想到的是鲜艳的红绿搭配，以及圣诞树、雪地、圣诞老人和长筒袜等元素，对吧？因此，我推测你们的第一直觉可能是尝试一些基础的叠加效果，就如同以下所示：

是否曾考虑过，通过提取一种基础模式，进而巧妙地将其融入自家的产品之中呢？

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

今冬情人节之际，众人纷纷采用温情策略，而我方却另辟蹊径，选择了苦情路线，结果反馈热烈！

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

我们选择了清新风格的路线（实际上，这主要是因为担心侵犯版权，不便使用模特等元素，另外，这次活动是在儿童节、母亲节以及520这个特殊日子举办的，哈哈～）。

技术进步主要体现在创新、跨界合作以及手法革新等方面，这些都能给人带来新鲜感。无论何时，正是由于技术的不断进步，我们才能享受到更优质的体验和更丰富的选择。

在互联网尚未普及的年代，人们仅能通过实体店进行购物；随着互联网的兴起，人们开始在个人电脑上进行网购；随后，伴随着移动互联网的进步以及智能手机的广泛使用和便捷性，购物方式进一步转向移动端；如今，虚拟现实技术的出现预示着购物体验将更加便捷；未来，购物方式可能会发生更多意想不到的变化。率先掌握新技术，便能抢占先机。

曾经风靡一时的双十一邀请函，堪称一例，不妨观看其背后的制作过程视频：

我观察到，该作品融合了脑力激荡的创意构思、精心绘制的手稿草图、专业摄影技术、后期制作、虚拟现实技术、threejs和webGL等多种技术手段，共同构建了3D场景并实现了渲染。其最终效果令人瞩目，成功吸引了众多互联网用户的关注。若你掌握了这项技术，你的作品想要不引起广泛关注都很难（当然，这也仅限于那些如BAT这样的顶级大企业才能承担得起的高额投入）。

在资源相对匮乏的情况下，一些设计师倾向于将最能吸引消费者注意的操作，比如抽奖或领取礼包等，置于首页，即便这些操作并非用户接触的第一步。

在应用中心女生节活动页面，活动规则规定每体验一款应用便有资格参与一次抽奖，然而若遵循常规布局，礼包展示和抽奖按钮很可能被置于第二页，使得首屏仅展示单调的应用列表，显得乏味无趣；因此，我们对页面进行了优化，将领取礼包的操作置于首屏，而当用户没有抽奖机会却尝试领取礼包时，我们会提供引导他们去体验应用的提示。

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

这种操作能在现有条件下提升页面的视觉冲击力和吸引力，然而，它也带来了一定的风险。这可能导致用户的操作步骤与页面的正确步骤不一致，从而提高了用户犯错的几率。在这种情况下，需要借助其他交互方式来弥补这一不足，例如，提供流程图示，或者在用户犯错后给予友好的指导等。我对这种设计方法持有一定的认同感，它能够精准锁定页面的主要任务和关键操作，进而大刀阔斧地削减和淘汰非关键功能。即便最终呈现的效果可能并非最理想，但这样的设计路径在多数情况下却是必需且切实可行的。

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

活动页面一经成功推出，设计师的任务实则尚未告终；每次活动页面投放完毕，我们均能从多角度，尤其是数据反馈中汲取丰富的经验和宝贵的教训。

近期拜读了胖胡斐先生撰写的《说说转化率》一文，文中介绍了一种简便的评估方法，现愿与各位同仁分享：首先，将活动流程细分为转化路径，接着，通过比较各路径节点上的转化率，来衡量活动的成效，以此为基础，为提高转化率提供有益的借鉴。我们可以借鉴这种拆分的理念，将整个活动的流程细分为若干环节——以应用中心的礼包抽取活动页面为例，该活动的主要流程及涉及的页面包括：进入活动（通过广告位）→ 进入活动页面 → 查看应用列表（位于活动页面中）→ 进行礼包抽取 → 转至礼包兑换中心 → 进入可使用礼包的应用内页。

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

对照每阶段的转换效率数据，识别出转化率下降最为显著的环节，然后集中精力探讨和优化相应的解决方案。

概括而言，作者在此主要希望传达给各位的关于活动专题网页设计的要点不外乎以下几点：首先，要重视信息的呈现，充分运用首屏布局来突出核心信息，如标题、参与方式以及奖品展示；其次，要明确页面的主要任务，并强调关键操作，同时提供友好且简洁的流程指引和提示；最后，要关注活动数据，根据数据来识别并改进活动页面的各个方面。这些内容是我入职至今的一些心得体会，虽然还不够成熟，但如果能激发大家的一丝思考或灵感，作者便会感到非常满足。

海淘科技出品，欲下载文章，请点击：专题页面布局的十大策略，助您的网页独树一帜。