推广专题页面设计 - UCD大社区

首页大屏广告交互设计探讨

大米 — 2011-06-26 11:53:12

一、使用场景

用于大型活动推广，频率控制在一季度或一年度一次为宜。

二、设计目标

1、效果好！尽量让每位用户都注意到这个活动。
2、干扰小！把对活动不感兴趣的用户的干扰降到最小。

三、设计要点

1、是否要遮盖网站内容？

不要遮盖。从我们监测的历次大屏广告点击数据来看，广告的点击在首页总点击的占比分布在2% – 20%之间。这意味着：有至少80%以上的用户对活动并不感兴趣，他们中大部分是带着明确目的来网站使用特定产品的。如果广告内容遮盖了网站内容，将严重干扰这部分用户的正常使用。他们所能做的是无奈地等待广告收起或立即关闭（如果提供了关闭按钮）。不排除有少量用户会因为你的强制遮挡而被迫点击广告，但我们绝不应该为了这几个少量的转化而得罪大部分用户。
2、如何加载？
比较好的一个方式是在页头上方铺开，这样不会破坏页面整体性，可以大胆使用大尺寸的广告，只要不把页头（LOGO和导航）挤出首屏，都是可接受的，用户总是能快速扫描到网站的页头。广告区域在前端样式中声明高度，特别要强调的是不要使用高度伸缩动画展开方式，使得广告下方的网页正文部分能稳定在窗口的固定位置上，避免被广告的加载过程干扰而变换在窗口的位置让用户无法在广告加载完毕之前精确点击正文部分的链接。总之，大一点没关系，但不要乱晃。
3、是否要提供关闭功能？
必须的。还要在cookie中记录下来，用户再次来到这个页面时不要再次出现。
4、是否需要在一段时间后自动关闭？
不需要。因为用户阅读广告所需时间的个体差异很大，我们不能为用户统一设置这个时间的长度。下图是最近一次我们检测用户主动关闭广告的时间，验证了我们的设想。图中x轴表示时间，y轴表示经过对应时间后关闭广告的用户数。

如果某些特殊情况下需要自动关闭，可以考虑在广告上显示倒计时，让用户预知还有几秒会自动关闭广告。
5、被关闭后，是否要提供重新展开功能？
常规交互原则：操作可撤销，状态可恢复。提供重新展开功能可以给部分用户提供在完成主任务后再点回来看看的机会。关闭和重新展开都可以配合动画，以增强页面变动的平滑度。

四、线框图，供参考

相关话题：推广专题页面设计源地址：http://ued.koubei.com/?p=1400

《牛壹周》设计过程揭秘

peng — 2010-08-04 16:16:48

2010年7月30号，《牛壹周》在App Store上架，截止到我写这篇blog，下载量破千，排名位列中国地区免费程序TOP榜第11位，新闻类第2位。

几天前，Shawn写了篇超有爱的blog――《牛壹周》顺产记，从开发的角度跟大家分享了《牛壹周》的生产过程，比较适合程序员和开发者阅读；在这里我想写一写《牛壹周》设计过程，也许设计师和产品经理们看了会更有共鸣。

一、学习

iPad出来不久，我们便觉得这样的神器简直就是为用户体验设计而生——精致的显示，优秀的交互，简单的操作，让使用没有门槛，充满无限可能——于是我们决定进军这个陌生的领域。

学习是第一步，于是有人开始看Stanford的视频教程，有人开始安装xCode，有人开始研究HTML5，而我，则开始学习苹果4月3号出的那份官方指南《iPad Human Interface Guidelines》。
6月27号的成都UCD书友会，官方主题正好是《移动设备的交互和设计》，于是我把前一阵子的学习的心得和领悟做了份演示文稿，跟参会的书友们进行了分享和交流。

iPad用户体验设计指导性原则

在这份文档里，苹果提出了几个重要的设计原则。

首先，在iPad上侧重的是内容和交互，而不是UI。

作为设计师，几乎我们本能的就会醉心于一些华丽的UI界面而忘了用户本身是来干什么的。为了让用户关注内容本身并在交互的过程中尽量受到干扰，所以我们需要淡化程序UI，弱化界面控件、让信息更扁平化（让上下层级可以在同一界面中自如切换），限制一个视图内的任务复杂度、淡化文件管理、使用最少的模态对话框、只有在需要时才提醒用户⋯⋯

然后，是内容形式上富有真实感。

iPad上自带的iBooks、Note以及Google Map都是很好的例子。苹果给出的解释是：程序显示和现实生活越相似，用户就越容易理解、操作并喜欢。可以使用动画进一步增强真实感觉，东纵的真实感比外观更为重要，要符合物理规律。

最后，是充分利用设备性能和特性。

iPad是今年1月27号才发布的全新设备，除了具有普通数码设备的硬件指标和性能参数之外，还具有很多诸如重力和加速度感应、多点触控、手势识别等人机交互新特性。如何把这些交互手段通过设计结合到你的作品中，会是个有趣的挑战。

总之，上帝的归上帝，凯撒的归凯撒。

二、设计

牛博网阅读器的想法，6月初就提出来了，但要做成什么样子，大家脑子里还是一片混沌。

6月12号，竞总出了份iPad牛博网阅读器低保真模型，有横板和竖版两种模式。它看起来有些象网页，又有些象RSS阅读器，还有些象iPad上的 Mail程序——大家都是菜鸟，看到这样的设计，也无法判断这样的设计到底是好，还是坏。后来因为其他项目上的事情一忙，这份原型也就沉没了。

竞总的设计原型概览

6月底的时候，我开始着手设计。因为本身就是设计师，视效上没有障碍，涉及的页面也不是很多，所以一开始就在PS下面画图了。

网站设计多了，一上来还是传统思路在作祟，结果才设计了个开头就茫然了：心想如果设计成这个样子，还不如人家直接在iPad上用Safari浏览器打开牛博网来看呢⋯⋯

用做网站的思路来设计iPad应用完全是死路一条

好吧，摒弃网站思路，做减法后我设计了目录页和内文页，设想应该有按文章索引、按人物索引、RSS订阅和设置这些功能⋯⋯显然，这是个平庸的设计，但其实没关系，很多东西都是这样，刚开始的时候很糗，但至少有了讨论的基础。

第一版目录页

第一版内文页

团队的Daily Meeting上，大家给了很多好的建议。S拿出一本《南方人物周刊》，说其实应该做成这个样子——首先，它应该是一本杂志，阅读习惯上应该象在阅读一本书而不是浏览一个网站；然后，它应该是一本期刊，时效性比书本高，但比网站和blog低；内容质量和阅读体验和书相当，比网站有更多的个性，更少的噪音。

有了这个定位，设计也就有了方向，牛读器从此变成了《牛壹周》，开始有了典型的杂志封面，开始有了内文的两栏设计，交互上也去掉了纵向滚屏而采用了横向翻页。

第二版封面（我们团队简称CCW，于是戏称自己是山寨传媒CCVV）

目录页设计第二版

内文页设计第二版

在视效框架基本定型，代码上的难点也基本突破的时候，我和Shawn就好象分别从两头开始掘进海底隧道的两只工程队，开始合龙——然后，也才尴尬地发现——有些视效在设计的时候忽略了动态时候的效果，有些交互则会消耗太多系统资源导致无法平滑过渡。而且在模拟器中看到的效果和实际真机运行还是存在一定差距。

文章翻页设计中遇到的问题是个典型的例子。现在文章翻页是需要即时loading的，为避免误操作，我们需要用户拖动移动一定长度后才确认这是翻页操作。我早期的设计中，图标翻转的效果下面还有一句作为噱头的话。如果你用手指拖动页面，会先浮现出图标，下面配上提示文字“再拖⋯⋯”；如果你继续拖动页面，图标会完整显示，下面的文字是：“再拖⋯⋯再拖就是下一篇了哦～”，当用户拖到程序设定的长度，图标变红，然后就翻页了。

翻页提示的设计

实际的情况是这个拖动需要滑动的距离设计得太长了⋯⋯如果你紧握iPad边缘用大拇指完成操作，很可能会造成韧带拉伤。当然，经过实际真机调试后我们决定删除那些文字，然后问题就解决了。

在Shawn的博文中也提到过，更有效的设计方法，其实应该是界面的视觉设计有个大概以后就应该和交互仿真同时进行并快速迭代，这个时候做设计的不要考虑太多细节上的修饰；做开发的不要着急实现后面的功能——做一个可以运行在真机上的界面原型可以更早地暴露问题并快速改进。

三、细节

神在细节间，魔鬼也是。

团队奉行37教（我们喜欢37signals.com这种精悍的团队），行事原则就是 Geting Real，不过这也让我们在快速迭代中很难做到细节的尽善尽美。

就拿牛一周的图标来说吧。

7月8号的时候，Shawn说：“妖怪，给我个牛一周的icon吧，我要72X72和256X256两种大小。”

于是我迅速地山寨了一个（好吧，你没猜错，克隆的原型是NBA的芝加哥公牛队LOGO），然后继续其他的设计。

费总说：Ei~看起来怎么这么眼熟呢？

等到7月10号比较空闲的时候，我花了些时间来做icon的精细化设计——在Illustrator下拉渐变网格，并尝试各种造型组合。当大家看到那个魔爪版的时候，Mak说：“牛长的不是蹄子么⋯⋯”小龙替我解释道：“妖总画的其实是大菠萝（Diablo）。”

《牛壹周》icons不同版本尝试

牛壹周icon定妆照

那几天正好在看《独唱团》，用手在封面的牛皮纸和微微泛黄的内文纸上摩挲，感觉很有feel——想到iPad设计指导中所提到的“内容形式上富有真实感”的设计原则，就在封底和内页分别加上了牛皮纸和新闻纸的质感。

Loading页和封底

内文页设计第三版

为了让人有场景代入的真实感，让人觉得这就是一本杂志，我也改进了横屏时的设计——修改前两边多出的部分本来只是个背景平铺；改进后加入了桌面、台布和咖啡杯——就好象在家，用一本杂志，享受一个很惬意的下午。

封面竖屏设计

早期的封面横屏设计，只是简单的旋转缩放然后居中

修改后的设计，增强了场景代入感

如果你在内文页轻轻点击一下，下面会推出一列Preview缩略图。这个部分的设计其实也费了一番思量和讨论，团队内部争论也比较激烈。

最早的想法是拿作者的头像作为索引，一来这样区分度比较明显，二来其实我们最关注的还是人本身。最早的效果，也不过是在下面浮上来一个半透明的层，然后显示人像照片。

第二版的预览模式设计

后来我们觉得对于我们这样的牛博网老用户来说把人和文章对应起来不是问题，但对于一些普通读者来说就是会比较困惑——他要跳转到自己喜欢的文章，先要把人头像翻译成自己对应喜欢的文章或风格，这里面经历了一次逻辑转换，会降低成功率。如果他恰好不认识这位作者，那么失败率更高。而小的缩略图虽然可能看不清标题和内容，但是原样复制了色彩和版式，让人很容易形成视觉上的一一对应。

于是我们改成了整个杂志的界面上推，然后在下面的餐台布上显示预览缩略，为了让你的目光聚焦在这个区域，我们在预览浮出的时候，把上面主体的部分作了暗化——这就象有点物理基础的科幻片，让你感觉真实，但也有点超现实。

改进后的预览设计

如果你再细心一点，会发现不同文章的缩略，厚度是不一样的——有些是单页，有些则叠了一两页——这样的设计是我们想用不同的厚度来提示读者这篇文章的长度——如果你觉得它太长就可以放弃。进入文章后，则会用苹果通用的圆点来表示一共有几页和你当前在第几页。

提示用户不同文章的长度以及现在读到了当前文章的第几页

不管怎么说，简洁是我们设计的第一法则。我们不希望看到任何多余的按钮，也没有教程，希望你一上手通过简单的尝试就知道该怎么做——为了达到这个目标，我们在样本大致出来后也找了身边很多朋友来测试。

它还不够完美，我们正在努力，也期待你的加入

四、定位

最后，我想用FAQ的方式，来谈谈关于《牛壹周》为什么这样设计，以及如何定位。

Q:如果我喜欢那些文章，我可以上牛博网和订阅他们的RSS，为什么你们还要做这样一本电子杂志？

A:首先，它们的阅读体验不同，在iPad上阅读，显然比在电脑上阅读来得更愉快而方便，而且它相当于是一个存档——在纸张时代就已经有很多人喜欢收集全年的旧杂志，网络时代同样有人有此癖好；

其次，这里面是精选的文章，经过了人的过滤，提升了内容质量，同时降低了阅读噪音，降低了你的筛选成本——我们相信编辑，也是有价值的再创造。虽然我们的品味未必你未必完全认同，但其实你如果完全不认同也就天然不是我们的目标用户。

当然，这只是我们的理解。用古灵常说的一句话来作结，那就是：“我说的都是错的。”欢迎提出相反的看法。：）

Q:为什么是期刊而不是南周阅读器或者书的形式？为什么是十篇文章而不是更少或更多？

A:选择做期刊其实是在信息的流动性和质量控制之间作必要的平衡和妥协。Twitter、Blog以及RSS已经解决了信息迅速流动的问题，高质量的、时效性堪比新闻但内在价值比新闻更强的精华信息如何展现和留存？我们认为期刊是不错的选择。

关于为什么是十篇？我承认这受到了爱枣报（www.izaobao.com）的影响。虽然我们身边不乏一觉醒来就要浏览上百个网站，RSS阅读器里躺了一千条未读文章的信息达人，但也有大量的人希望花更少的时间阅读到更有质量的信息，然后迅速离开，干自己该干的其他事情——我们信奉小就是美，少就是多。

Q:《牛壹周》会每周更新么？你们以后会收费么？

A: 会一直出下去，但暂时无法保证每周更新，因为《牛壹周》还只是本实验性的杂志，还没定型，我们还在尝试更好的阅读体验效果，更多的内容格式支持以及更易使用的编辑平台——之所以在设计阶段就开放出来，是因为我们希望和你一起设计，也希望最终你也能轻松地编辑并生成这样的iPad杂志。

牛博网不收费，我们也是。

对于《牛壹周》有任何意见或建议，欢迎在我们的Blog留言，或写信给team+ iPad@mycolorway.com，让我们一起设计，共同来决定它未来的样子。

谢谢。：）

如何优化QQ秀-我的收藏

西贝 — 2010-08-04 21:57:22

“我的收藏”是QQ秀商城购买物品流程中的一个辅助的操作，收藏后，方便再次搭配。就像我们购物一样，把看到喜欢的东西先放入篮子里面，待买单的时候再做筛选。所以，在愉悦的购买体验中，收藏就显得比较重要。

先看看优化前后，收藏页面的差别：

原流程存在的问题：
点击物品收藏后，必须跳转到一个新窗口进行预览或操作。假如用户收藏2件物品，就要点击2*2次。（而且是在不迷路的情况下）。如下图：

交互优化，引出一个临时收藏间的概念。

    1、引出一个临时收藏间的概念，不再打断用户的浏览，在原页面进行预览和收藏。
            a. 临时收藏间出现在商城所有页面（装扮区），方便用户随时浏览。
            b. 只是暂存的功能。不用页面之间的反复跳转。如下图。
原流程：点击收藏按钮》弹出提示框》链接到“我的收藏”中查看》返回浏览原页面
现流程：点击收藏按钮》保存到临时“我的收藏”中》继续浏览页面

2、增加动态展示效果，用户不需要任何操作，就可以查看到存放的结果。同时也方便教育用户，下次可以在那里找到。如上图。

相关话题：推广专题页面设计源地址：http://isd.tencent.com/?p=2180

跟推广专题页面有关de那些事儿（二）

yueyi — 2010-09-28 14:17:50

这次主要拿我们最常接触的“推广页面”来举例。推广页面第一屏就是给用户的肆意印象，一定要抓住用户的心。这就是为什么当我们在做一个页面的时候需求方不停的在强调要热闹，字要大。其实他们想说的是这个页面的视觉要有冲击力，重点的地方应该用抓住眼球的设计元素。现在用户见多识广，什么包邮/免费/搬家/限量这样的词都不足以吸引他们。只有把握住用户的需求点，才有看下的动力。以wonderbra举例来说，这是一个神奇bra的站点，主要是介绍他们家bra的，整个页面营造的是一个封闭但是清爽简洁舒适的室内环境，有点类似更衣室的感觉。使用吊灯/便签/穿衣镜/沙发/等元素来完善整个房间，还有一个诱人的美女穿着bra展现生活中的不同状态（姿势 – -），这样瞬间拉近了用户和产品之间的距离。

氛围营造

个人觉得首先营造一个氛围是必须的，这个氛围要很给力。越是富有意境的图形越能抓住用户的视线并快速传递所携信息。文字是直白的，图片是用线序的方式来抽托主题。我们要把这个活动/产品推广出去就好象我们在给用户秒速一个生动的故事。情节生动才会引人入胜。视觉设计师讲故事的技巧就是我们的表现风格。（眩光/实体/手绘/虚幻空间/平面…）

标题凸显

当一个空间氛围搭建好了，接下来所有的元素都要配合这个空间。标题是一个活动的点睛之笔。主标题一般都是精辟简短，概括了整个活动的专题商业需求。副标题一般是起解释说明的作用，描述该活动的利益点。所以在视觉处理上标题是要重点刻画的，将其拆分做一些形状，色彩，大小，字体，质感，排版的变化和突破是必不可少的。但是切记不要做的太过，以上提到的6种选2～3个即可，不然就脱离了整体的页面。

排版设计

人物等细节的素材的选择是根据最先制定的风格样式来完成的。怎样将这些东西结合在一起就是靠设计师的排版组合。这里会涉及到色调，构图比例，质感搭配的经验。

以这个推广为例子，拿到DEMO的时候，主标题是“清凉一夏，日本流行风”要营造一个夏季的氛围，我首先想到的就是沙滩/美女/夏威夷这样的一个场景，长裙/海浪是必不可少的元素，页面承载的都是服装的产品信息，所以要选一个有长裙的美女，接着就是想到木制/相册/便签/手绘风这样的质朴舒服的感觉。我想营造一个清凉的感觉就选用清新的蓝天白云做背景。为了凸显主题将背景颜色调灰然后整片叠底上一层沙滩，两个图层分界的地方不能很生硬，选用了墨迹的笔刷有一个点点沙粒被剥开的过度。

开始做字体的时候想到的是红色，橙色有夏天烈日的感觉，但是因为是清凉，所以颜色不能过重。用夏威夷的手绘花朵点缀字体，在“一”的处理上放上一个实物的海螺，要这个标题更加的生动。下方的利益点文字比较多，不妨选用了手绘的方式表达。

剩下的事情就是整理和回顾，这是一个必不可少的环节。新人在做推广的时候普偏存在的问题就是脑中没有货？！什么货？那些看过的收集过的素材和表现技法，不知道从何下手。以下列举是一些氛围渲染的比较好的页面，大家可以根据这几张页面总结出一些表现风格，比如前两张的手绘跟实图相结合的方法。下次设计新页面的时候可以有意识的去尝试这个技法。3/4两张空间的立体感营造，对于多文字的排版很容易出效果。

相关话题：推广专题页面设计源地址：http://www.aliued.cn/?p=2898

跟推广专题页面有关de那些事儿（一）

yueyi — 2010-09-26 16:30:03

来公司刚好一年了，接触了不同的视觉需求这里做一个小分享。

首先我说一下阿里巴巴B2B视觉设计的分类,主要分为产品视觉和推广视觉，产品视觉锻炼人的逻辑思维能力／细节的处理／规范执行。推广视觉更加偏向展现层，对视觉表达的能力要求很高／培养色感／有效的提高视觉设计师的表现技巧。个人觉得只有纵向发展到达一定的深度才有基础对横向扩展，所以最基础的是视觉表现力提高。

产品视觉有任务型和浏览型两种，以上2张都属于浏览形页面，如我们经常接触的1688首页，服装／小商品频道页。它们的特点是有很多展示模块，有产品图片有类目有导航和一些banner。承载的内容比较繁杂。

还有就是任务型的页面，这样的页面都是枯燥的操作流程／表单列表等，如我们经常接触到的offter detai和搜索list，还有一个典型的后台页面。到处都是行动点，下一步的操作。这样的页面不能个性化的自由发挥，要求视觉设计有统一的视觉样式，精确的标尺，严格的按照规范来执行。

营销活动专题页面有很多种，包括论坛贴／邮件贴／营销活动推广／营销产品发布。一般都是吸引眼球的活动标题，然后是活动内容和其他相关信息。一个营销活动的成功，个人觉得除了文案精彩视觉占有60％的主导因素。视觉给人继续滑动鼠标看文字的动力，赫赫。因为用户眼中都是没有文字的。基本上看一张活动页面的时候都会自动忽略24号以下的字体，汗|||

设计推广专题页面可以很好的锻炼新人的设计技巧和表现手法。推广视觉有一种是banner＋模板结构，一般第一屏可以看到标题利益点和一部分的产品图片，产品图片运营同学可以自由更替，这样做的好处是用时短，可以快速批量的更新内容信息。第二种是自由排版，这样推广的效果比较好，如右图的“采购龙虎榜”是新年的一个推广页面，整体氛围热闹，喜庆。第一屏是首推的5件产品，下面分别是不同类目的分类，设计师结合“龙虎榜”用了金底红字的剪纸元素／黄色的礼品封／礼花／灯笼／书法等一系列的元素渲染气氛。但是缺点就是耗时很长，改动的成本很高。

+设计师平时的积累（远的）

[ 自发需求 ]用视觉设计师的眼光去看待这个世界，观察生活中的每一个设计细节/自发的改变生活中的不完美/参加一些设计比赛，活动

[ 收集资料 ]收集资料并且共享资源这是一个很重要的积累过程，眼界高了设计出来的东西才会提高/有意识的收集资料/合理的将资料整理分类

[ 技法训练 ]分享设计技法，学习的是方法取其精华/借鉴别人的设计，尝试性创新设计，二次迭代是一个开始

+需求方提供Demo给设计师（近的）

[ 现有文案 ]这次活动的主题是什么/内有有哪些/什么是重点突出的，次要的

[ 设计思考 ]根据主题我联想到什么/用什么视觉元素（氛围，背景）来展现这个活动

[ 一起讨论 ]快速素描出设计师的大致思路/给需求方展示几个跟我设计相近的图例/达成一致开始设计

相关话题：推广专题页面设计源地址：http://www.aliued.cn/?p=2837