iAd Inspirations

感谢Kevin Cao为我们带来这么好的内容

iPhone上有一个App叫iAd Gallery。顾名思义,就是用来展示iAd效果的软件。我想只有蛋疼的互动广告人和开发者才会下载来研究。毕竟现在iAd还没有进入国内市场,想研究Apple的广告技术就只能通过这个软件了。

我们知道iAd的核心是Webkit,也就是基于HTML+JS+CSS技术。Apple为此提供了一套JavaScript框架iAd JS。因此制作iAd,除了HTML5技术外也就是和这套框架打交道。其中最值得关注的就是iOS平台原生功能的接口部分,比如保存图片为壁纸、处理摇动(Shake)事件、显示地图等等。完整的的原生功能支持列表如下:

  • 多点触摸和手势
  • 嵌入地图
  • 发起Store购买链接
  • 保存图片和设置壁纸
  • 截屏
  • 增加日历事件
  • 发起电话呼叫
  • 发邮件和短信
  • 响应屏幕方向旋转
  • 响应摇动事件
  • 响应加速计和陀螺仪事件

这些功能为iAd的创意发挥提供了强大支持。后文将介绍的一些案例都很出色的整合了这些特性。

除此之外,Apple还为大家准备了一套图形化的编辑工具iAd Producer。提供了简单便捷的操作方式和多样化的模版,使得制作iAd的门槛降到最低。

前面说了那么多,接下来我们就一起来看看iAd Gallery里有哪些精彩案例吧。

Lynx

这个案例是延续其TVC天使堕落的创意,用触摸手势和摇动事件设计了三种与天使互动的交互方式。此外视频和音频的应用也让整体氛围提升不少。

 

Zync

这个例子中设计的桌面环境让我想起了某段时间很流行的Flash网站风格。各个场景之间的切换动画也提升了整体体验的水准。

 

Nissan Quest

主页的360度+导航颇具匠心。内页的各个产品点的交互创意也很有水准,就算与Flash网站相比也不遑多让,再次证明技术只是用来表现创意的工具。

Renault

柱状图的动画效果和CSS 3D卡片效果是这个案例的亮点。

BMW X3

这个案例的内容丰富堪比一个Minisite,分为梦想(产品价值观传达)、定制和驾驶(产品点体验)三个部分。梦想部分用摇动事件来切换文字内容,个人觉得这个互动结合的很自然,很有看看别人都做了些什么梦的期待感。定制部分设计精良,很好的为我们展示了如何在小屏幕上做复杂功能的交互设计。通过iAd提供的截屏功能支持,还可以把定制的车款保存下来作为壁纸。驾驶部分也很好的利用信息递进的设计层次把内容表现出来,维持了干净高端的整体调性。

 

通过以上这几个案例,我们看到HTML5本身强大的功能(无需考虑跨平台的限制)加iAd原生框架的组合是一套神兵利器,可以帮助我们在iAd平台上尽情施展创意。但是在实际的体验过程中,即使是目前最新的设备(iPhone 4),还是偶尔会有加载缓慢、响应迟钝的问题。这些问题在将来应该会逐步得到解决。现在对于前端设计和开发人员来说,尽快掌握HTML5技术是大势所趋的选择。

原文链接看更大的图片:http://kevincao.com/2011/05/iad-inspirations/

 


2 Comments

Have Your Say »

Required

Required, never published