移动互联网，正在真真切切的改变我们每一个人的生活，对你我正在从事的事业，都不能例外。那么，如何顺势而为，让我们能够在新的时代背景下游刃有余呢。

首先你应当成为移动互联网的应用达人：拥有一款移动设备，并成为重度用户。你得比你的客户或目标受众更加了解这种新的媒介。你要学会观察和分析这些移动设备产品设计背后的精髓，包括但不局限于：用户手持设备的使用习惯；屏幕尺寸限制对设计的影响；多点触摸的操作方式；单窗口应用和多任务的设计方法等。此外还有GPS定位，陀螺仪等特有硬件模块的玩法。

然后你还应当看看Apple的人机交互设计指南，了解那些细节到有些龟毛的设计建议背后的理念。这也保证你在发想创意的时候不至于偏差得太过离谱。

此刻你一定已经有了一个不错的想法（或者靠谱的Brief）。现在到了我们尽情发挥创意和设计才华的时刻。 流行如“下拉刷新”的操作可不是一开始就写在设计指南里的，而是由与我们一样的创作者想出来的绝妙创意。这绝对是重度用户才能发想出来的直觉式设计的最佳范例。还有Instapaper客户端的倾仰翻页，以及前段时间非常流行的Clear式轻扫和捏合操作，也都代表了交互设计的顶尖水平。 虽然在这个领域不乏一些专业的UI设计公司，还有各种互联网企业的UED正规军。但是在如何把移动应用设计得有爱或有范的问题上，我们互动这行的设计师也不甘示弱。我们看看私密照片分享应用Path 2.0中的创新折叠菜单。吸引了不少眼球吧。而我们拿它回过头来对比闪客们N年以前就已经实现的各种动态菜单，其效果不也显得黯然失色吗。用户在iOS应用上已经看了好几年标准界面的产物，难免开始产生审美疲劳。现在进入了重视用户体验的时代，互动从业者们在视觉表现和交互效果上的经验积累在此是一大优势。相比其他行业的转型者们，我们更容易创作出令人惊艳的作品。

但是这里也要提醒大家，我们的这种优势有时候也是一种制约。视觉效果是一把双刃剑，我们不能简单把之前为互联网做设计的经验生搬硬套到移动平台上。我就见过为了展示些好玩的动画效果，却把用户真正需求的东西放在流程的后面的错误做法。移动设备还受到屏幕和电量的限制，在具体设计中我们应当把这些小亮点放在真正需要它们的地方，而把能够提升用户体验的设计放在第一位。

讲完了设计层面，我再来谈谈技术层面。在互动广告从业的前端技术人员大都来自HTML或Flash领域，在面临移动时代的转型时，遇到最实际的是一个难以抉择的问题：要重头开始学习原生开发技术（Objective-C之于iOS，Java之于Android）还是延续现在的知识体系。这个问题没有标准答案，而是需要与自己的职业定位结合来分析。

我们现在面对的是一个碎片化的平台，原先用Flash技术覆盖大部分前端需求的好日子一去不复返。最有希望的明日之星HTML5目前还受限于浏览器普及度和性能制约，尚不足以支撑原先在Flash技术上能够达到的高度。而运用原生语言针对不同平台进行定制开发的结果是成本和周期的成倍增长。Agency在这种达成目标与成本控制的博弈下，只能根据各种内外因素自行权衡。大一点的项目能够继续铺全平台，而预算小的只能舍弃其一。

这里我分享一下自己的经历。去年我初次开发一款移动应用的时候，首先选择了JavaScript+PhoneGap的技术方案。为了模拟原生的UI，在网上搜索对比了不少框架（Zepto.js，JQMobile，Sencha Touch等）。最后选用Sencha Touch，一周之内就把应用做出来了。但是在开发过程中，我渐渐觉得用JavaScript做严谨的面向对象开发比较别扭。别误会，我就是从学习脚本语言来入门编程的，对这类语言只有好感。我认为只有jQuery这种Write Less, Do More的思路才能玩出脚本语言灵活轻便的精髓，而用脚本去搞面向对象再来开发常规UI的软件，还不如直接上原生的面向对象来得爽快。再加上后来遇到了难以解决的Mobile Safari内存限制问题，最终我还是决定转向用Objective-C开发。但必须说的是掌握一款JavaScript移动开发框架也是很有好处的，至少能够很快的验证产品的想法。

另外还有一个朋友与我分享的案例。他用AIR开发一款看美剧的应用。首先尝试用Flex自带的Mobile组件，不出意外的各种卡顿。于是换用纯ActionScript来做，由于缺乏基本组件支持只能基于AsWing来改。据说他已经尽量的优化效能，还是没办法完全达到原生组件的效率，在表格滚动的时候感觉特别明显。这说明虽然语言迁移没花费多少成本，但是在用AIR技术做移动开发，在具体操作上，还是有不少的坑要开发者自己来填。更别提每次上真机调试时候的各种不便了。虽然现在已经有基于Starling的UI控件（GPU加速）和更加方便的USB调试，但是我认为Adobe在移动平台上的作为还是慢了。

接下来谈谈iOS原生开发，很多人对其望而生畏都是被Objective-C怪异的语法给吓到了。就我个人的经验，消除这种恐惧最直接的办法就是找一段代码到Xcode中照着打一遍。通过Xcode的代码辅助功能帮助你理解Objective-C语句的结构（当你亲眼看到Xcode生动的匹配提示，你就会明白我的意思）。

一旦你熟悉了那些怪异的方括号语法以后，其他的就迎刃而解了。Objective-C 2.0以后对属性存取引入了点语法，也缩小了与其他语言在书写上的差异性。为此一些老派的Objective-C程序员还表示抗议呢。实际上大多数人在学会了Objective-C后，都会认同这个语言的优雅设计。

基本语言入门了以后，我们就可以尝试在CocoaTouch框架上做些小例子。在网上的各种教程中最受欢迎的是一套斯坦福的iPhone开发公开课教程。目前最新的是对应iOS5的2011版。授课的老头功底深厚，讲得很好。如果你是现在才刚接触iOS开发的，建议直接学习iOS5以上的版本， 新增的一些高级语言特性会让你的开发转型难度更小一些。 老版本的教程就不要看了，以免在概念还没形成的阶段造成混淆。进展到下一阶段以后还是免不了要和内存引用计数机制等相对比较晦涩难懂的知识点打交道，但在那之前学到的知识至少能够支持你写出一款不错的应用了。

在此之后的修行就看个人了，伴随开发生涯最好的资料还是Apple的官方文档。基本的视图和控制器开发指南，事件处理机制等应该熟读N遍。像我比较关注表现层的绘图和动画技术，就要看Quartz 2D和Core Animation指南。其他的不同框架只要知道是派什么用途的就好，具体知识要靠在项目实战中逐步掌握。全部通关一次至少也要1到2年后了。对游戏比较感兴趣的就要去学习Cocos2D框架，据说和Flash还是挺接近的。

随着技术研究的进一步深入，其实我们遇到的挑战会更大。选择了原生语言开发就意味着与众多传统编程领域转型而来的程序员竞争，而且原生语言开发进阶就不得不接触越来越多的处于底层的技术。但是反过来看，如果没有挑战，不就没意思了，不是吗。

以上观点纯属个人之谈，希望对大家有所帮助，如有不妥之处欢迎留言指正。

Urban Airship

http://urbanairship.com/

Urban Airship是一个提供推送服务的平台。开发者可以用统一的API来完成iOS、Android和BlackBerry三个平台的Push开发。除了基本推送服务外，Urban Airship还提供Rich Push：让Push信息可以带HTML、视频、音频等多媒体信息。此外，Urban Airship还为iOS和Android提供In-App Purchase(IAP)服务，帮助开发者处理内容存放和安全支付等问题。Urban Airship提供了一个管理后台。开发者在这里不仅能用信息编辑界面来发送Push，还可以监测Push消息的传达情况，观察用户是否产生了交互等统计信息。

Urban Airship的Push服务按条计费，每月100万条免费（基本够用了吧）。更高级的Rich Push只有在收费的服务中才有供应。完整的收费方案请点此查看。

Parse

https://parse.com/

相比Urban Airship专注于提供Push服务，Parse的目标则更加远大：包办移动应用的后台开发工作。通过Parse提供的iOS和Android SDK，开发者可以存储云端的数据对象、发送Push通知等。针对大部分应用都需要的用户注册与登录功能，Parse不仅提供了专门的后端支持，还提供了整合Twitter和Facebook的便捷接口。一般没有复杂后端业务逻辑的应用用Parse提供的服务绝对够了，节省下来的可是一笔不少的服务器租用、开发和维护成本。

Parse的收费方案在这里查看，免费的方案可以存储多达5万个数据对象，每月请求数上限为20万，同样可以发送100万条Push消息。

Test Flight

https://testflightapp.com/

应用程序开发完进入测试阶段，通常需要在内部发布一些版本到测试者的机器上安装。一般的流程是获得测试机的唯一标识符，到苹果开发者中心上制作签名文件，然后再打包发布成ipa文件。最后传给测试者用iTunes来同步到iOS设备上，或者是再制作一个安装描述文件，与ipa一同放到网站上，让测试者用iOS设备在线安装。

Test Flight的出现简化了这个复杂的过程。第一个解决的问题是获取测试机的唯一标识符，这对普通的用户来说有点难度。在Test Flight的流程中，开发者只需要发出邀请邮件给到测试者就可以了。而测试者可以很方便的通过邮件中给出的引导把测试必须的信息传回。开发者有一个管理后台收集到所有测试机的信息后，就可以去制作签名文件和完成最终打包的工作。当这一切完成后，再借助Test Flight的文件上传和分享功能，把应用的安装信息发送到测试者的设备上。在Test Flight的后台，开发者能够看到哪些测试者已经安装了哪个版本，还能看到测试者的反馈信息。如果在代码中整合了Test Flight的SDK，甚至还能够实现用户行为统计，收集错误报告等功能。最好的是，这一切都是免费的。

App Annie

http://www.appannie.com/

有过App Store上架经验的朋友都知道，Apple官方提供的管理后台——iTunes Connect提供的统计功能非常有限。只能保留13份日下载与13份周下载的数据更是蛋疼。而App Annie提供的分析服务，正是针对统计问题的一个完美代替方案。

App Annie能自动帮你从iTunes Connect拉回应用的下载数据，并用直观的图表展示出来。更贴心的服务还包括抓取用户评论、查找是否被iTunes推荐、每日邮件提醒等等。使用App Annie的分析服务后就可以基本抛弃iTunes Connect了。现今他们也将分析服务拓展到了Android平台。

作为一家拥有数据挖掘基因的公司，App Annie还提供不同地区的应用排名、历史记录查询，和企业级的数据分析业务。

提供App应用数据下载分析服务的还有http://www.appfigures.com/

提供App信息搜索服务的还有http://xyologic.com/

Flurry

http://www.flurry.com/

光靠App下载数据是分析不出有价值的信息的，为了让应用的持续改进有个明确的指导方向，开发者必须要分析更为详尽的用户使用数据。Flurry正是一个提供移动应用监测服务的平台。通过Flurry提供的SDK，移动应用的监测就像我们以前在网页上所做的一样简单。除了分析用户行为以外，也可以考核我们做的一些推广活动或者选择的一些推广渠道，是否达到了预期的效果。

我们熟知的Google Analytics也有移动版。除此之外比较好的还有Mixpanel。上文提到Test Flight也有推出live服务，好处是和他们的Beta服务使用相同的SDK。

国内的友盟也提供分析服务，只在国内市场上架的应用可以考虑一下。

Bugsense

http://www.bugsense.com/

Flurry SDK中有提供错误报告的简单支持，而Bugsense提供的错误分析则更显专业。通过Bugsense提供的图表化后台，开发者可以实时分析收集到的错误信息。免费版的方案不限制受监测应用数，但是有每月500条错误信息的上限。

后话：作为一个开发者，在实际项目中运用了上述大多数平台提供的服务，觉得相当方便。一个行业的稳健发展离不开一个和谐的生态环境的构建，在这点认识上国外同行比我们超前了不少。提供一些开放的基础服务，避免开发者重复造轮子，既是件有益于行业的好事，兴许也是个能赚钱的生意。希望将来能有更多适合国内应用的服务平台出现。

我的工作室招聘页面上线，近期有想找工作的朋友不妨路过看看：）

http://sumi-sumi.com/hr/

搜索了一下发现官方平台上也有人反馈这个问题。临时的解决方案如下，修改SDK根目录下的flex-sdk-description.xml：

<?xml version="1.0"?>
<flex-sdk-description>
<name>Flex 4.6.0</name>
<version>4.6.0</version>
<build>23201</build>
</flex-sdk-description>

修改为

<?xml version="1.0"?>
<flex-sdk-description>
<name>Flex 4.5.0</name>
<version>4.5.0</version>
<build>23201</build>
</flex-sdk-description>

最好备份一下，等官方出升级补丁的时候再把文件替换回来。

现在应该就能正常编译了，但如果是AIR项目的话还有点问题。Flex SDK 4.6自带的AIR SDK升级到了3.1，配置文件中的命名空间也升级了。而FDT5自动生成的配置文件还是2.6的。如果你在运行过程中出现：

DVFreeThread - CFMachPortCreateWithPort hack = 0x4862f10, fPowerNotifyPort= 0x4866260

错误的话，就是你的配置文件有问题了。

http://pttrns.com/

http://www.patternsofdesign.co.uk/

http://mobile-patterns.com/

专注iPhone的UI分享：

http://tapfancy.com

http://www.tappgala.com/

http://wellplacedpixels.com/

http://www.lovelyui.com/

http://buildingiphoneapps.posterous.com/

专注于iPad UI分享：

http://landingpad.org/

http://stylishipadapps.tumblr.com/

这个网站有一个iPad客户端，设计很精美：http://itunes.apple.com/us/app/stylapps/id444930066

专注于App网站设计的分享：

http://www.appsites.com/

最后推荐一个包括了图标、界面、App网站和设计资源的整合型：

http://iosinspires.me/

ps. 若上面的链接有的打不开，请自备梯子。

• app store：http://itunes.apple.com/cn/app//id495609535?mt=8
• 官网：http://www.qairapp.com/cn/

Q Air空气监测站是我年前开发的最后一个项目，也是Sumi第一个上架销售的app。经过一个多月的制作，终于赶在兔年的最后一天与大家见面了。经过短短不到一周的时间，拿下了中国区天气榜第一的好成绩。很高兴Q Air受到了用户的欢迎，这也说明我们切入的环境指数热点正是大家都非常关心的问题。我们希望把这款软件献给每个热爱生活的人，更希望中国的环境问题能够逐步得到改善。第一步当然是要督促政府从pm2.5信息公开开始做起。一旦有更多的pm2.5数据放出，我们将第一时间更新到Q Air。

附上xcode截图一张：

在此之前，我又好好读了一遍自己写的2010总结。感叹是计划不如变化，但好歹今年没有浪费时间，还是做了一点事的。

上半年大部分时间还是在上海过着深居简出的日子，一边做些小活一边学习iOS开发。期间发了一些博文，把之前积累的一些AS经验都整理了出来。这种状态一直持续到回厦门之前。我在朋友介绍下接了一个上海车展用的急活。在高强度的十几天里把一个iOS项目做完，让我又回到刚毕业时候的打鸡血状态。这个项目的完成让我消除了对iOS开发的恐惧感，并且开始享受掌握另一种面向对象语言所带来的冲击和融合。还好因为去年深入研究AS打下的基础，让我产生了一些融汇贯通的美妙感受。所以接下来我慢慢的把更多的注意力投入到这个方面。回想去年订下的HTML5为主、Objective-C为辅的计划，不禁觉得好笑。事实刚好相反，一切还是以机缘为导向。我想HTML5更多的还是大公司或者牛人的玩具，而iOS开发正是很多人赖以吃饭的技术，至少短期内如此。

下半年除开接了一个Flash开发的项目花了两三个月工作时间，其余时间都泡在Xcode里面。iOS5发布了，新的api随之而来，还有WWDC的各种技术视频，Apple这个创新的公司一点也没让开发者们闲着。再有些空余时间我就继续关注Flash平台的各种口水战。我对Adobe的3D游戏导向的相关技术没太大兴趣，对webgl和canvas绘图的各种实验性作品仍然处于仰慕的阶段。我也很喜欢这些“玩具”，可惜暂时无缘吧。

最后两个月前终于把各个freelance项目都结束了，于是有心思开始折腾自己的东西。和朋友合作了一款天气类的创意app，经过了漫长的设计和开发过程，现在也提交了第一版。这算是给自己做产品的尝试开了一个头，明年还会继续再这上面投入精力。

一直想着要正式跨过freelance，向前迈前一步。终于在2012到来的第一天，把工作室的地儿给定下来。地址选在小资到爆的中山公园一带，与众多文艺青年为伍。名字么就叫Sumi（取我名字的谐音）。明年的基调就定好是在这里奋斗着奔三。我对工作室的想法是做互动，要做慢、做精。做得像厦门的乌糖沙茶面那么跩，就开半天，卖完了关门。在这里也邀请同道中人共襄盛举：），外地的还是本地都没有关系，我向往的是依托于网络协作平台建立的轻公司模式。

在自我管理上，今年丢了两个好习惯：一个是写晨间日记，一个是记账。都因为环境变动的原因没有坚持下来，在2012要重新恢复。5月份买了iPad以来，获取信息的方式有了很大的变化。现在基本上阅读新闻和RSS都会在iPad上，因此连去看FWA的时间都减少了。根据工作和兴趣不断调整工作方式一直是我长期笃信的原则。经过大半年的调整期，终于在新年前把新的学习系统建立起来。希望2012会是更有效率的一年。

噢，其实前面说了这么多事儿都是我今年的副产品。2011年最大的项目成果是11月16日老婆帮我生的一个胖女娃：名叫曹语荞。希望她能快乐健康的成长。

最后祝各位龙年大吉，龙腾虎跃，龙马精神！继续关注Kevin Cao和Sumi^_^

• 类型：体验型
• 创意：4
• 设计：4
• 交互：4

Volvo S60（App Store下载地址）

• 类型：体验型
• 创意：4
• 设计：4
• 交互：4

这是一款产品介绍app，和同门的S80基本是一样的，都支持iPhone。在本次review中，这是唯一一个拥有加载进度条设计的app。可能是为了保障后续内容顺畅运行的原因，但我觉得在互动网站上常见的进度条在这里出现总是不太和谐。好在加载一次以后再重复打开相同的版块就不用再加载一遍，应该是做了缓存。

这堆图片是可以用多点触摸手势任意排列、缩放和旋转的，增加了可玩性。

展开文字内容后，图片自动弹开。

360度展示在交互上做出了新意：双指放大可以从相同角度切进内饰，双指缩小则切回外观。用这种更加直觉的切换方式把内外的展示结合在一起，体验上升了一个等级。

其他产品介绍走的是科技感的路线。

内置的新闻模块，需要连接网络加载，排版向iPad上的阅读软件靠齐。

经销商查询用了世界地图的呈现方式，用户要找到所需的信息非常方便。

VW Magazine（App Store下载地址）

• 类型：杂志型
• 创意：3
• 设计：4
• 交互：2

这是VW推出了一款多媒体杂志，每期会更新不同的内容。

主页完全是杂志化风格。

导航设计：

页面设计：

值得一提的是这个无网络连接的提示画面设计也很用心。

ps.本作在成文后又有所更新，可能有部分内容与截图不符。

Think Blue（App Store下载地址）

• 类型：体验型
• 创意：5
• 设计：5
• 交互：4

这是VW宣传Think Blue品牌战略的一款很有意思的app。主要用了矢量2D图形结合3D视角的设计手法，配合活泼的背景音乐，有效的传达了品牌信息。

镜头的移动用手指拨动来控制，但是程序又做了些限制，确保焦点不离开画面，操作的手感很舒服。探索到的地方2D图形会跳动着竖起来。

结语：

本次review精心挑选了App Store上各大汽车品牌的应用，从创意、设计和交互角度分析了每个应用的特点。我们看到无论是杂志型还是体验型的应用，素质都在逐步提升。随着品牌投入力度的加大，未来肯定还有更多优秀的作品诞生。虽然本次review的主要对象是国外的应用，我也顺便关注了一下国内的情况。虽然整体水平还比较落后，但是也欣喜的发现了一些有诚意的作品。目前在App Store上，来自中国的开发者数量很庞大。我期望在这个平台上看到中国互动力量的雄起。

回到设计本身，在iPhone第一代就伴随的UI标准虽然已经非常完美，但是发展到了今天难免有点过时。特别是在以设计为卖点的app上，将来一定是各种风格的UI百花齐放。Apple也一定认识到这点，为此iOS5专门升级了一系列UI外观定制的api。而在交互开发上，我更加希望看到专门为触屏设计过的体验。不要再把用鼠标的思路带过来，更多的去思考直觉化操作的方式。

最后为大家整理一下按照评分高低顺序排列的app列表，方便没时间的朋友挑选下载和研究。

• 15 CLS（下载）
• 14 A1 eCatalogue（下载）
• 14 BMW Magazine （下载 1、下载2）
• 14 Think Blue（下载）
• 13 A7 Sportback（下载）
• 12 Mercedes-Benz Magazine（下载）
• 12 Chrysler 300 （下载）
• 12 Nissan GT-R（下载）
• 12 Volvo S60（下载）
• 11 Audi 2010 Annual Report（下载）
• 11 Infiniti Models（下载）
• 10 Pure Bentley（下载）
• 10 Dodge Charger （下载）
• 10 Honda CR-Z
• 9 Mercedes-Benz 2012 CLS（下载）
• 9 BMW X3（下载）
• 9 VW Magazine（下载）
• 8 Infiniti杂志（下载）

最后的最后再把本次review所做的233张截图打包供大家下载，欢迎取用。

• 类型：体验型
• 创意：4
• 设计：4
• 交互：4

Dodge Charger（App Store下载地址）

• 类型：体验型
• 创意：3
• 设计：4
• 交互：3

本作与前一个Chrysler 300皆出自同一制作公司，所以大致的结构和一些元素的设计上都是类似的。Dodge这款车主打鲜艳的红色，一开始用了一段启动汽车的动感视频来做Intro。然后就直接进入了外观360的部分，并且把主导航直接放在了车身的对应部分。

产品点的演示和说明还是很详细的。

产品图库设计为一面红色的砖墙，呼应了这款车的整体调性。

Honda CR-Z（已下架）

这种浏览方式对画面的衔接设计提出了更高的要求。用一些标题文字来作为点缀元素成为主要的解决方式，特别是随着滚动位置而改变的文字光影效果更是出彩。

进入车内的视角时做了画面的放大处理，与水平滑动的主体感觉有些区别，但是个人感觉还是有点突兀。

Infiniti杂志（App Store下载地址）

Infiniti Models（App Store下载地址）

• 类型：杂志型
• 创意：3
• 设计：4
• 交互：4

一款介绍Infiniti全系车型的app，采用杂志式的信息组织方式，设计简洁，交互有些亮点。

导航和搜索功能：

信息展示设计：

在展示品牌书法符号的页面提供了一个书法模拟工具：

对于笔触的模拟还是挺真实的。

在撰写此文的时候BMW Magazine一共有四期，从一开始的类PDF式的简单阅读体验，一直到包含了诸多交互细节的2011夏日版。这个系列可以看成是一个新平台互动设计的发展历程，很有学习和分析的价值。同为杂志类应用，大家也可以和上一篇介绍过的Mercedes-Benz Magazine做个对比。

• 类型：杂志型
• 创意：5
• 设计：5
• 交互：4

*此分数为四期的总评分

第一期(已下架)

第一期实现了杂志浏览的基本功能：左右滑动换页和一个页面列表导航。

主浏览方向为竖向，在横向模式下，页面自动放大为屏幕等宽。同时取消了分页，把内容纵向组织在一起成为一个很长的滚动视图。但是由于内容其实都是纵向尺寸下的标准图片，放大后就会变得模糊。

我们看到这一版可以说是非常简陋的，但是它定下了这一系列的基调。在后文中我将带领大家一起感受设计的进化。

在此特别提一下：是否支持四个方向的浏览，在我看来是杂志类应用里面最考设计功夫的地方。设计者应当考虑，除了排版的区别以外，在不同版面下是否可以重新组织内容？是否还能给浏览者意想不到的惊喜？我们将在后面的介绍里找到答案和灵感。

第二期(已下架)

新的缩略图导航，包括了文字简介。可以看到，分享功能也加进来了。

我们通过第二页的操作说明可以了解到：这一版在架构上与前作有着本质不同。除了左右换页以外，新增加了上下翻页的维度。这样组织内容的好处是用户可以自由选择感兴趣的主题深入阅读。别小看这一点点改进，新的维度打破了我们传统阅读纸质杂志的习惯，同时又让我们很自然的适应和依赖电子杂志带来的便捷。我在很多其他的杂志类应用上也看到了这样的设计。

纵向翻页带来了一个问题是：用户不能确定当前页面是否有纵向内容。对此本作的设计师采用了纵向页码的方式来提示用户。当然用一些明显的指向性箭头或者其他提示也是可以的。

这版杂志的程序对不同方向的浏览做了改进：除了设计不同的排版之外，还用一些提示图标引导用户进行旋转查看。

我们再来看看交互细节的设计：

必备的360浏览。

在车身上涂抹彩色线条，笔刷遮罩的细节处理的很不错。

还包括一个物理引擎制作的简单互动：晃动iPad让画面上的物体相互碰撞。

这一版杂志实现了一个多媒体杂志的基本要素，并且用一些精致的互动细节提升了用户体验。但是，设计者并没有止步不前，我们继续来看新一期的创作。

第三期（BMW Magazine 1/2011）

在第二期中我们分析了改进过的页面组织方式带来的好处。但是缩略图导航并没有升级过，反应的还只是一个维度的信息。设计者意识到了这个问题，所以这一次他们进行了改进。于是我们看到了一个能够反应两个维度的页面组织方式的导航系统。

经过这次改进，导航已经能够直观的覆盖到杂志所有内容。

在这个版本中，设计者重新思考了两种方向下的内容组织方式。除了我们前面看到过的版式区别以外，甚至有些内容也分为了两套。一般来说，横屏模式用于欣赏大图，或者是一些交互体验的内容（电脑桌面模式），而竖屏更多用于展现长文本（书籍阅读模式）。不同的内容设计诱使用户在浏览过程中不断地旋转设备进行探索，成为iPad阅读的一种独特的乐趣。

横屏下是一个照片堆叠的交互场景。

竖屏下变为图文混排的页面。

内容的错层滚动也是本作在设计上的一大亮点。具体做法是把原本一整块的内容摆放到不同的关联视图中。滚动其中一块，另外一块也会跟着移动，但是滚动的速度不同，甚至滚动方向完全相反。这样就营造出了有层次的滚动效果。

双错层滚动

三错层滚动

反向错层滚动

和前文在Audi A1中看到的假景深滚动一样，错层滚动也成功的抓住了浏览者的眼球，提升了阅读体验。对设计者来说，滚动视图是个可玩性很高的工具。在iPad上用手指拨动实在是再自然不过的交互手势，如何把这轻轻一拨玩得出彩，就要靠大家多多发挥创意了。

第四期（BMW Magazine Summer 2011）

前一期的框架结构已经相当成熟了，这一期主要在内容上继续加以丰富：更多视频的应用、新增的产品点交互，甚至还内嵌了一个小型的游戏。

本作继续在滚动视图上大作文章，出现了四错层滚动的设计。

另外还有视频和图片为背景的滚动内容。

产品功能点的介绍做得比较精美，也运用了滚动视图来查看长内容。

拖拉操作的图片遮罩

一个加速计控制的赛车游戏。

BMW X3（App Store下载地址）

• 类型：杂志型
• 创意：3
• 设计：3
• 交互：3

BMW X3是以介绍产品为主的杂志型App，提供了基本的缩略图导航和分享等功能。 最大的特点是文字和图片采用了错层滚动的方式。

在竖屏下，原来的横屏内容等比缩小，下面的区域用缩略图导航来填充。如果不能做重新排版，也可以把这种方式作为一种不错的解决方案。

• 类型：体验型
• 创意：5
• 设计：5
• 交互：5

与其他汽车App相比，CTS非常特别。它用了一个叙述故事的方式来体验产品。从这点上看，这个App很像爱丽丝梦游仙境、玩具总动员那种类型的互动故事书：在以文字为主体的阅读体验上加入了大量精心设计过的交互内容。

不仅如此，它还引入了在互动网站上非常流行的个性化定制体验的创意，提升用户的参与感。再加上风格化的插画和流畅酷炫的动画转场，使得这个App成为本次Review中唯一一个全满分的案例。

故事开始的时候，用户可以自己定制男女主角的名字、造型等。甚至还可以用自己的相片来设定形象。这个概念大家是否很熟悉呢？这些定制的数据怎么在故事中产生作用，我们拭目以待。

故事正式开始。画面风格是真实风格的车+插画风格的背景元素。

向右拨动进入下一段场景。场景之间用一段Motion动画衔接。转场动画的制作十分精良。比方说当前场景中的某个关键元素会分离出来，或动画或变形，引领镜头快速运动过渡到下一个场景。在给观众带来视觉享受的同时，还能让用户认知到场景的关联性，从而更顺畅的阅读完整个故事。

大部分场景都包含有互动细节。这个场景用到了iPad的重力感应：左右摇动让画面上的听众们左右摇摆。还有很多场景也用到了这一特性，比如下面这个：

前后摇动iPad让路面上的易拉罐滚动起来。

这个场景则用到了声音交互，发出声响让黄色的布带飘动。

有些场景只是做了简单的点击交互，为静态的画面引入一点生动的元素。比如上图中池塘里的鱼。

前面定制的个人信息在这个场景上得到了体现，应该说还是比较初级的。我们已经在互动网站上看过很多牛B的应用，相信更酷的定制创意来到iPad平台只是一个时间问题。

Mercedes-Benz 2012 CLS（App Store下载地址）

• 类型：体验型
• 创意：3
• 设计：3
• 交互：3

这个系列的App包括了很多奔驰车型，结构和设计都差不多，所以在此我就只挑一个作为代表。

大家可以注意一下它的导航设计，用的是环车的一圈图片墙来表现，选中的时候有一个模拟镜头推近的效果。

Mercedes-Benz Magazine（App Store下载地址）

• 类型：杂志型
• 创意：4
• 设计：4
• 交互：4

Mercedes-Benz Magazine在杂志型App里算是功能比较丰富的：各方向浏览、导航、书签、分享功能一应俱全，甚至还带有一个音乐播放器。从内容上看，有视频、图片、360浏览等多媒体元素，可以看做是品牌多媒体杂志的范本之作。

缩略图导航。

奔驰自己的Mixed tape音乐播放面板。

章节的主页，可以清楚的看到后续提供了哪些内容。

简洁的360度浏览。

横竖浏览方式下的排版设计。

产品点交互。

Pure Bentley（App Store下载地址）

• 类型：杂志型
• 创意：3
• 设计：4
• 交互：3

这个是Mobile FWA上推荐过的案例，特点是设计简洁、大气。交互没什么亮点，但是内容很丰富。

导航设计。

多处用到了“拖动”的交互方式。

浮层设计。

我们知道在广告公司的熏陶下，汽车类的客户一直站在互动行业的潮流尖端。对于当下日益壮大的智能手机和平板电脑群体，客户自然不会视而不见。厂商的重视促进了品牌内容在这些新生平台上的迅速发展。

这次我为大家搜罗了一些在iPad上具有代表性的汽车品牌App，从创意、设计和交互等角度进行分析。希望能够对有志于开发这块市场的个人或公司有所启发，共同提高App的创意水平和执行质量。由于搜集的内容比较多，撰文需要时间，我将分几次发布，欢迎同学们持续关注。

按照字母先后顺序，今天我们先来看看德国三大汽车品牌之一的——Audi奥迪。

A1 eCatalogue（App Store下载地址）

• 类型：杂志型
• 创意：4
• 设计：5
• 交互：5

Audi A1 eCatalogue这个案例主体的内容组织方式是类似杂志式的翻页浏览。但是与一般的翻页滚动效果不同的是，设计者运用了现在非常流行的平行滚动效果。在很多页面上都把素材分出了不同的景别，制造了滚动时的立体效果。

导航上设计了缩略图和文字列表关联滚动，营造出很好的操作手感。另外还提供了一个关键词检索功能。

不管是设计还是程序，圆环菜单都是很考功夫的。做得好不好，看切换的动态效果就知道了。

内嵌了一个3D驾驶体验，用iPad的重力感应来操作，牛的不多说了。

在编排图文内容的时候，如何让文字区域的大小便于阅读又不会遮挡图片是设计者常常要面对的问题。我们在鼠标交互上常用的一种处理方法是设计一个折叠的区域，当用户（1）点击查看更多按钮的时候，（2）鼠标划过热区的时候，再去放大文字区域。然而在触摸设备上是否有更加自然的方式呢？

我们知道用户在触摸设备上拨动手指以滑动内容是一个很基本的操作，这个案例中的巧妙之处就是仅仅利用这样一个基本操作就实现了文本区域展开和关闭的功能：文本区域一开始是缩在角落（图片最大化），当用户想要去阅读更多文字，很自然的就会想要去滚动这块区域。这个时候就看到这块区域向上展开了（文本区域最大化），感觉就像是把一整张纸片抽出来进行阅读一样。整个操作符合用户习惯，过程行云流水，没有让用户思考，也不需要多余的一次点击。

在这里为这么一个小交互多费那么多笔墨，目的是希望各位交互设计师重视不同的平台特性的区别，在设计自然优雅的交互方式上多花点心思。

大灯的交互设计，很简单但很酷，要是能配上震撼的音效就更好了。

双指放大内饰显示出细节产品点。

让用户体验实际操作。

配置表的设计，非常详尽。此处还有一处值得称道的细节。我们知道iOS系统的滚动视图内置了一个闪动滑块的功能，用于提示可滚动的内容。这个案例设计了另一个异曲同工的方法：默认将初始位置置于底端，然后用一段动画回滚到顶部。

越来越多的App都开始设计这样的一个帮助说明，引导用户熟悉操作。对这个主题感兴趣的可以看看这里的一篇引导页面设计技巧总结。

A7 Sportback（App Store下载地址）

• 类型：体验型
• 创意：4
• 设计：5
• 交互：4

几个大的页面层级用一叠纸的方式来呈现，配合手势的翻页效果很好地运用了触摸设备的交互特点。

在用于展示产品功能的下一层级上，设计者用了类似地图的方式来组织信息，并且在一开始就用了一段Intro视频来向用户展示 “产品地图”的全局观。

与一般的查看图片不同的加入了一点交互的元素，玩起来的感觉像是翻看一叠散落在桌上的照片。

这里是一个表现设计线条的小互动：一个定制的画板程序。细节匠心可圈可点。

当画面下方这只壁虎活灵活现的爬进来的时候，我惊艳了。在一个相对静态的浏览体验中精心安排的动态内容，往往会给用户留下深刻的印象。当然我们也不要为了追求效果而生硬的编排动态效果，而是要有理有据：熟悉奥迪品牌的都知道这只壁虎代表的是奥迪看家的quattro技术。

此处还有一处交互也颇具心思。当我们用手指在虚拟的纸张区域拨动的时候，会产生把纸张揉起来的效果。之所以设计这样的交互点，我想是借壁虎在不平整表面的爬行来比喻quattro技术对车身平衡的作用。

Audi 2010 Annual Report（App Store下载地址）

• 类型：体验型
• 创意：4
• 设计：3
• 交互：4

这是一个奥迪品牌的年度报告案例，内容的组织方式比较接近我们在一般的互动网站上所看到的。表现形式上则是采用了程序驱动的大量粒子为主要元素。

一段绚酷的开场视频过后，我们进入这样一个场景。画面上粒子在无序运动。主导航就隐藏在这个空间内。

在屏幕上按下手指，立即对周围的粒子制造了一个吸引力效果。当能量槽蓄满以后，就进入了对应的版块。

第二级页面上，粒子按照新的方式排列，并做环绕运动。再点击画面上的文字则进入了第三级的内容页。以上过程就是本例中最具特色的交互导航方式。

以下是内容页的设计，只能说是中规中矩。

奥迪品牌在iPad上的App还有不少，今天介绍了这三个是我浏览下来觉得不错的。觉得意犹未尽的同学还可以看看奥迪A8L体验，算是国内出品的诚意之作。

Title : KON App
Client : KON Brand
Date : 2011.9.30

Design : KON Brand
Develop : Kevin Cao

Note：App基于之前开发Mooca时所写的框架开发，随着iOS经验值的增长，改进了许多原先设计不够合理的细节。整体执行效率也有所提升。

擦去迷雾来看俊男美女的洗浴时刻，还能上传头像给好友制造惊喜，赶快下载来体验吧。

App Store下载地址

Title : 智造喜悦 App
Client : Siemens 西门子
Agency : MediaV Shanghai
Date : 2011.8.25

Design : MediaV
Develop : Kevin Cao, Lee

说明：有一些图片不能直接缩小，为了追求UI设计像素级精确的美感，设计师应该做好两套Layout。

我们从设计师处拿到的PSD文件通常是这样的：

首先要做些必要的处理，该删除的删除，合并的合并。然后给每个将要导出的图层取好名字。整理完成后的PSD如下：

一层一层裁切导出太麻烦，自动化才是王道。接下来我们执行Files>Scripts>Export Layers to Files...命令，打开如下窗口：

由上至下分别设定几处设置：选择输出的目标文件夹。文件名前缀留空。只输出可见的图层。输出为PNG24格式。最重要的是保持透明区域和裁切图层选项。

注意：经测试，在图层群组内的图层不能正确裁切到图层的实际大小。所以在准备输出之前，要把图层从群组中移出，或者干脆删除群组。

点击Run按钮后我们就得到裁切好的PNG图片。

接下来我们要把图片名字前面的前缀处理掉。这里我用的是Mac上强大的改名工具A Better Finder Rename。设置如下：删除前6个字符。

现在我们得到的图片都是2倍版本，后面将把它缩小一半。在此我们要对每张图片检查一遍，确保裁切出来的尺寸是偶数。这一步我没有找到智能化的处理办法。还是要麻烦PS，手工改canvas大小。

最后一步，选中所有图片文件，执行iOS PNG服务。

缩小一倍，加@2x命名，一次搞定。

等等……为什么我的服务菜单下没有iOS PNG呢？呃，当然没有，因为这个服务你得自己创建。接下来我们有请Mac下自带的Automator工具登场。

选择创建一个服务（我选择服务是因为可以直接在菜单下运行，其他也可以的）：

Automator很强大，也很简单。左边是系统提供的一些操作，我们把这些操作一个个安排到右边的工作区，就能创建我们想要的工作流程。Automator的操作是线性的，上一步操作执行后的结果输入到下一步。

iOS PNG的工作流程设计如下：

首先选择服务的输入源为图像文件。然后执行一个改名操作，把@2x添加到文件名后面。接下来执行复制命令，我们将会得到一个filename@2x副本.png文件。

从左边的照片分类下找到缩放图像的操作拖过来，设置按百分比缩放的参数为50，得到一个缩小后的副本。最后再把文件名改回来。工作流程就结束了。

最后保存这个服务，今后在任何地方选中图像文件，就能使用，是不是很方便呢。大家还可以发挥想象力，看看如何改进更适合自己的工作方式。

如果你在切图上也有什么妙招，欢迎留言探讨。

Update：

适用于Lion的服务文件下载，解压后放到/Users/[Your name]/Library/Services就可以了。