网站设计分析:活动页设计心得二三

  又一年总攻节的硝烟刚散,各大电商网站连通大小门户平台都经历过一轮铺天盖地的促销与各类花色繁多的相关运营推广活动。

  看了好些五彩斑斓的活动页面,结合最近阅读的相关文章和自己参与应用中心活动页设计以来积累的一些不成熟的经验,总结出了关于活动页设计的一些小心得,值此佳节(昂=_=?),希望能抛一些砖并与大家共同寻找玉的存在^^。

  活动页简析

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


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

  1. 活动标题

  2. 活动入口 3. 活动奖品/商品展示

  4. 活动参与人数

  5. 有效时间

  6. 获奖信息

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

  一. 充分利用首屏,展示核心信息

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

  1. 什么活动?——活动主题

  2. 什么时候?——活动时间

  3. 有什么奖品(优惠/利益)——激励,折扣,奖品展示

  4. 如何参加活动?——参与入口

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


  图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-应用中心抵扣券页面(局部)

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

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

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


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

  这样的做法能在当前条件所限下加强页面冲击力和吸引力,但同时存在一定风险,会让用户的操作流程与页面正确操作流程相悖,增加用户犯错概率。

  此时需要通过其他的交互手段进行弥补,如上面提到的提供流程示意图,或者在犯错后进行友好的引导等等。笔者个人还是比较理解这种设计方式的,找准页面核心任务与核心操作,大胆地对非核心的功能进行减法和舍弃,虽然最后输出的可能并非最佳结果,很多时候这也是一种必要且可行的设计思路。

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

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

  前些日子读到胖胡斐的文章《说说转化率》,里面提到了一个简单易行的评估方式,在这里跟大家分享一下:

  将活动按转化路径进行分解,通过对比每个转换路径节点的转化率来评估活动的效果,为进一步提升转化率提供参考。

  我们可以效仿这种拆分的思路,对整个活动的流程进行拆分——以应用中心的礼包抽取活动页为例,整个活动的主要流程与涉及到的页面如下:

  入口(广告位)→ 活动页面 → 应用列表(活动页中)→ 抽取礼包 → 礼包兑换中心 → 可使用礼包的应用内页


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

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

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

  引用:

  ① 瞬间致胜—活动专题页信息表达法则 http://isux.tencent.com/sjzs.html

  ② Scrolling and attention http://www.useit.com/alertbox/scrolling-attention.html

  ③ 瞬间致胜—活动专题页信息表达法则 http://isux.tencent.com/sjzs.html

  参考资料

  [1] Andy Johns http://www.quora.com/What-are-some-top-strategies-for-conversion-optimization

  [2] ISUX官方博客 《情境化——让活动页面击中用户》http://isux.tencent.com/%E6%83%85%E5%A2%83%E5%8C%96-%E8 %AE%A9%E6%B4%BB%E5%8A%A8%E9%A1%B5%E9%9D%A2%E5%87%BB%E4%B8%AD%E7%94%A8%E6%88%B7.html

  [3] 胖胡斐《说说转化率》http://www.panghufei.com/?p=10869

  [4] yueyi《跟推广专题页面有关de那些事儿》 http://www.aliued.cn/2010/09/26/tips-about-promotion-page-design-i.html http://www.aliued.cn/2010/09/28/tips-about-promotion-page-design-ii.html

  [5] WAD <35 creative call-to-action button for inspiration> http://www.webanddesigners.com/35-creative-call-to-action-buttons-for-inspiration

  [6] 佚名(转自alibuybuy)《广告效果分析的3个关键点》http://www.alibuybuy.com/posts/75687.html

  (本文出自Tencent CDC Blog,转载时请注明出处)

时间: 2024-10-25 13:54:18

网站设计分析:活动页设计心得二三的相关文章

活动页设计心得二三

又一年总攻节的硝烟刚散,各大电商网站连通大小门户平台都经历过一轮铺天盖地的促销与各类花色繁多的相关运营推广活动. 看了好些五彩斑斓的活动页面,结合最近阅读的相关文章和自己参与应用中心活动页设计以来积累的一些不成熟的经验,总结出了关于活动页设计的一些小心得,值此佳节(昂=_=?),希望能抛一些砖并与大家共同寻找玉的存在^^. 活动页简析 活动专题页面,顾名思义是承载各种形式的节庆促销.宣传推广.营销产品发布等等活动的页面,形式与内容也多种多样. 典型的静态活动页面通常使用页头banner+标题再配

行业网站设计心得

设计|心得  很多设计师认为做好了企业网站就一定能够做好行业网站的设计,其实对设计来说行业网站和企业网站的设计截然不同,对整个网站的创意.风格.整体框架布局.文字编排.图片的合理利用,空间的合理安排上面等-有着许多诸多的要求,需要考虑的面更广,面对的问题也会更多.对于一名优秀的网站设计师来说不能绝不能放过任何一点小细节,本篇文章简述的是设计师在做行业网站时所需考虑的一些问题. 一.网站风格/创意 风格(style)是抽象的.是指站点的整体形象给浏览者的综合感受.整体形象包括站点的版面布局,色彩,

个人网站设计心得

个人网站|设计|心得 一.不单纯为了做网站而做网站.有明确的做网站的根本目的. 二.网站的内容质量最重要.这个内容是为实现你的做网站的根本的目标而确定的.不为盲目追求点击率而降低内容质量.网站内容应该独特而有价值.价值就是能给别人带来好处.能给哪些群体带来哪些好处是你需要做网站之前考虑清楚的.没有价值就只能成为垃圾和废品,无人问津. 三.网站的美工固然重要,但是最好配合网站本身的目标而确立一种相协调的风格,并非美术感越强越好,要把美工体现在与网站风格的搭配上,突出网站的主题.比如技术性网站要给人

电子商务网站设计分析三:登陆注册页设计

电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情有可能瞬间大打折扣. 电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象.用户之所以如此反感,也不完全因为流程繁琐,网站的表现形式不够友好.人性化也是原因之一,甚至还有网站令用户很直接的感受到一种强迫性. 市场环境让几乎所

电子商务网站设计分析系列之二:首屏设计

屏(above the fold)是指不滚动web网页屏幕就能被用户看到的画面. 世界著名的网页易用性专家尼尔森曾经有报告显示,首屏以上的关注度为80.3%,首屏以下的关注度仅有19.7%.这两个数据足以表明,首屏对每一个需要转化率的网站都很重要,尤其是电商网站. 相关阅读:电子商务网站设计分析系列之一:首页导航 在电子商务网站中,用户最急切需要获得的不外乎两点:吸引人的商品或店铺,以及网站能够给予他的信任感.信任需要积累,因此,各类宣传推广信息就成了电商首屏展示的不二之选. 一个能引人驻足停留

电子商务网站设计分析:登陆注册页设计

  AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的登陆注册页设计,欢迎关注! 电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情有可能瞬间大打折扣. 电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象.用户之所以如此反感,也不完全

网站设计分析:交互设计那些事儿(二)

中介交易 SEO诊断 淘宝客 云主机 技术大厅 <交互设计那些事儿>之一完工后,承蒙各位抬爱,在微博时代被大量转发和分享,也让我收到一些邮件,询问我下篇为何还不出来?请原谅我的惰性,每个周末都给自己找了不少借口一拖再拖,上个周末又在家里养了两天的病--在此提醒朋友们,换季季节,多喝水,多休息,少生病哈. 一. 理论前提 1. 人机交互与人类信息处理机制理论 既然产品设计出来不是给设计师用的,而是给用户用的,他们如何理解.认知.使用产品才是最重要的.因此"定义用户",&quo

网站设计分析:浅谈产品中的引导式设计

想象一下一些人初次去陌生城市旅游,有的人会因为省心.对陌生的不熟悉从而选择会报名团的方式来解决出行问题.还有另外一些人会选择自驾游,但也需要先准备好相关攻略,或通过当地亲朋好友的帮助解决出行的问题.殊不知我们在报团或者咨询的的方式来增加我们对陌生城市了解,这个过程我们称之为引导. 引导式设计在网站的产品设计中的重要程度不言而喻,优秀的引导设计能帮助解决用户实际的问题,使用户尽快完成自己的目标(报团.查攻略).同时也可以满足公司的商业目标.错误的引导设计能让用户在网站中迷失,网站的跳出率居高不下.

Design.Open.Raina—活动页设计经验分享

又一年总攻节的硝烟刚散,各大电商网站连通大小门户平台都经历过一轮铺天盖地的促销与各类花色繁多的相关运营推广活动. 看了好些五彩斑斓的活动页面,结合最近阅读的相关文章和自己参与应用中心活动页设计以来积累的一些不成熟的经验,总结出了关于活动页设计的一些小心得,值此佳节(昂=_=?),希望能抛一些砖并与大家共同寻找玉的存在^^. 活动页简析 活动专题页面,顾名思义是承载各种形式的节庆促销.宣传推广.营销产品发布等等活动的页面,形式与内容也多种多样.%20%20典型的静态活动页面通常使用页头banner