Be For Web - iOS8 http://www.beforweb.com/taxonomy/term/174 en 终极指南 - 怎样为iOS8应用制作预览视频 http://www.beforweb.com/node/581 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-apple-app-store-ux-ui-design-preview-video.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>过去整整一周多的时间,每天到处是刺眼的阳光。天气也真是任性的很,我仍记得今年年初每天期盼出太阳的日子,而如今倒是期望一切不要都这么明晃晃的了。</p> <p>上海的秋冬季节气候无常,但往往是不正常的热到一个峰值,然后温度一夜之间下降个10度左右,且伴有大风;接下来温度又一点点上升起来;如此往复,不亦乐乎。</p> <p>文绉绉的呢。其实在看西游记。孙悟空被骗当了弼马温,还跟玉帝说&ldquo;多谢了&rdquo;。</p> <p>说正经的吧;本周译文相当之推荐,关于iOS 8应用预览视频的话题,从设计、技术规范,到录屏、编辑工具,介绍的都比较详尽;建议收藏,在接下来用的到的时候作以参考。下面进入译文。</p> <p>最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更大的iPhone 6,可穿戴设备Apple Watch,iOS8,以及旨在帮助用户更好的发现应用的App Store改版等等。</p> <p>说到App Store的改版,最值得设计师、开发者和市场人员关注的大概就是视频预览功能了。官方将其称为&ldquo;应用预览(App Previews)&rdquo;,如今已经正式出现在iOS8的App Store当中。自然,已经有一大波设计师和开发者为他们的产品制作了预览视频并通过iTunes Connect上传。坦率的说,如果你也有自己的产品,那么也该开始考虑做这件事了。</p> <!--break--><h3> 来自官方的设计制作规范</h3> <p>与截屏图片一样,苹果针对应用预览视频提供了一些<a href="https://developer.apple.com/app-store/app-previews/">官方的设计制作规范</a>。视频在上传之后同样需要接受苹果的审核,这就意味着如果你在预览视频方面破坏了规则,一样会被拒掉,所以建议你首先仔细阅读一下官方的规范。</p> <h3> 技术规范</h3> <p>当前,我们可以为每个应用上传两段预览视频,其中一段用于iPhone,一段用于iPad。</p> <p>从技术角度讲,你需要遵守以下这些规范:</p> <ul> <li> 长度在15至30秒之间</li> <li> 通过H.264 MPEG或ProRess 422(HQ)压缩</li> <li> 每秒30帧(30p)</li> <li> 最终文件不超过100MB</li> <li> 扩展名可以是.mov、.mp4或.m4v</li> </ul> <p>分辨率规格如下(单位为像素):</p> <p><a class="lightbox" href="/sites/default/files/images/201410-3/01-ios-8-app-store-preview-video-design-development-guideline.png" rel="lightbox"><img alt="01-ios-8-app-store-preview-video-design-development-guideline.png" src="/sites/default/files/images/201410-3/01-ios-8-app-store-preview-video-design-development-guideline.png" style="width: 600px; height: 270px;" /></a></p> <p>此外,上传视频需要基于以下平台及软件:</p> <ul> <li> 安装了OS X Yosemite的iMac或MacBook</li> <li> Safari浏览器</li> </ul> <h3> 设计规范</h3> <p>规范当中的一些内容不大容易解释,因为它们更像是&ldquo;建议&rdquo;,而非&ldquo;规则&rdquo;。不过要记住,苹果官方会将这些&ldquo;建议&rdquo;作为评估的基础;遵守这些规范将能帮你避免遇到那些不必要的麻烦。</p> <p>设计规范内容较多,我们不妨先来看下概要:</p> <ul> <li> 聚焦在最重要的三个卖点上</li> <li> 通过录屏演示产品体验</li> <li> 演示操作时不要让手挡住界面</li> <li> 不要通过编辑视频来造假</li> <li> 内容至少要适合4岁以上的人群</li> <li> 不要使用你不拥有版权的素材</li> <li> 不要依赖于文字介绍</li> <li> 瞄准目标用户群体及其语种</li> <li> 视频中不要涉及价格及运营商信息</li> <li> 不要使用有可能&ldquo;过期&rdquo;的内容或素材</li> <li> 从应用中录制实际音效</li> <li> 使用高品质的背景音乐及画外音</li> <li> 选择一张合适的封面</li> </ul> <h4> 聚焦在最重要的三个卖点上</h4> <p>当然,你不必严格按照字面上的意思强行挑出三个卖点进行演示;重点在于不要试图在30秒的视频中面面俱到,因为用户根本没法理解和记住那么多东西。</p> <p>另一方面,虽然苹果允许你直接使用30秒的实际操作视频,但也不要将这30秒全部用来演示某一个功能流程,因为这会很无聊,而且可能使用户错过其他一些重要的东西。</p> <p>用户通常会因为对产品当中一到三个卖点的关注而下载你的应用。卖点在设计上?或是某种新技术?还是对传统界面模式的优化改良?挑出那些最吸引人的亮点,在一段简单的蒙太奇当中展示出来;要做好这件事,你真的不需要拥有多么专业的视频制作能力。</p> <p>此外,你并不一定需要去展示产品logo,应用图标,或是&ldquo;Download on the App Store&rdquo;标识。如果真的有必要,也尽量试着做出一些风格,例如通过某种形式的动画来展示logo和图标,给用户留下更积极的印象,强化品牌识别效应。甚至有<a href="http://animatid.com">公司</a>是专门提供这方面服务的。</p> <h4> 通过录屏演示产品体验</h4> <p>苹果真心不希望演示视频看上去像赤裸裸的广告。他们希望让你通过应用自身来更加&ldquo;诚实&rdquo;的进行展示。使用实际应用录屏,而不是展示人们拿着手机操作的样子,或是你从手机主屏一路点击进入应用的过程。</p> <p>对于游戏来说,有取巧的可能,例如只放一些过场动画。苹果同样知道这一点,他们建议你还是尽量放些游戏进行过程中的录屏。</p> <h4> 演示操作时不要让手挡住界面</h4> <p>听上去很容易?但对于开发者来说,和苹果打交道就没有什么容易的事。演示视频中的应用界面不要被操作者的手指挡住,尽量通过前面说的录屏来演示;如果确实要展示交互方式,可以在录屏中加入视觉提示元素,例如通过逐渐淡出的圆环代表触摸点。</p> <h4> 不要通过编辑视频来造假</h4> <p>这是很严肃的事。不要通过欺骗的手段让人们觉得你的应用比实际的好。除了道德因素以外,这种手段更会为你的产品带来相当负面的评价,一星就是用户用来发泄愤慨的手段。</p> <p>还要记得按照应用的实际分辨率来显示内容,不要放大。此外,不要把转场效果剪切的让用户误以为实际应用当中有这样的效果。</p> <h4> 内容至少要适合4岁以上的人群</h4> <p>任何人都可以访问App Store。我曾经见过3岁的小孩在iPad上通过各种复杂的手势操作应用,熟练的仿佛他在他妈的肚子里就已经开始使用这设备了一样。一旦了解有这种事情存在,你便知道为什么苹果会担心内容的适用人群了。</p> <p>引用官方的话讲,你应该避免&ldquo;令人反感的内容,暴力或成人主题,以及脏话。&rdquo;</p> <h4> 不要使用你不拥有版权的素材</h4> <p>我猜这很容易理解。无论是在App Store还是其他地方,尊重版权和商标都是必须的。不要在视频中使用你不拥有版权的音乐、视频、商标、形象、人物形象等等。因为这方面的问题被App Store拒掉可是很蠢的。</p> <p>苹果官方举了个例子:&ldquo;如果你的应用可以访问iTunes Library,那么你只能在预览视频中使用自己创作的或是拥有特定授权的音乐。&rdquo;</p> <h4> 不要依赖于文字介绍</h4> <p>至少目前,应用预览视频还不支持本地化,同一个视频会被全球的用户访问到。如果必须阅读视频中的文字才能了解产品功能,那么你就把全世界非英语用户挡在了门外。</p> <p>如果一定要使用文字介绍,也要注意几点。世界上说英语的人不少。除非你的产品锁定在某个特定的国家或语种上,否则还是用英语的好。保持介绍文字的简短、易理解;因为文字是出现视频当中的,所以还要注意可读性,并确保其出现的时间足够长。</p> <h4> 瞄准目标用户群体及其语种</h4> <p>也许你的产品是一款游戏,在全球都有玩家,但最大的玩家群体在中国,而且其中多数是女性。如果这是你要瞄准的目标用户群,那么要对他们所习惯的广告形式及喜爱的功能进行研究,然后制作一段最能为中国女性玩家所接受的预览视频。</p> <h4> 视频中不要涉及价格及运营商信息</h4> <p>苹果希望你通过功能,而不是价格,来吸引用户下载应用。坦诚的说,在如今的App Store当中,单纯的免费或低价策略未必能带来多少关注,因为90%的下载都是集中在免费应用上的。况且,用户在你应用图标的下方就能直接看到价格信息,没必要在视频中累述。</p> <p>你唯一有可能需要在视频中展示价格信息的地方就是关于应用内购买的描述;可以试着在视频中的免责声明部分或是结尾展示这些信息。此外,苹果建议对于包含订阅或账户登录功能的情况也要进行类似的处理。</p> <p>如果不明确的展示这类信息又会怎样?无非是产品有可能被苹果拒掉。即使通过了审核,也很可能导致用户的差评。这些结果显然都不是你希望看到的。</p> <p>不过,如果你家应用里有圣诞大促的话又当如何展示呢?其实多数用户不会因为你家宝贝有五折优惠就下载应用。说到这一点...</p> <h4> 不要使用有可能&ldquo;过期&rdquo;的内容或素材</h4> <p>制作优秀的预览视频是要花不少时间(和钱)的。那么,为什么要给它加上有效期呢?每个人都喜爱圣诞节,但仅限于12月份。如果某些用户在转年2月发现了你的应用,看到了一段圣诞主题的视频,那会有点荒唐吧?不仅如此,这会使用户认为你已经好几个月没有更新产品了。</p> <p>除非你确定自己会在有特定意义的日期之后很快更新应用及视频,否则不要使用任何有可能过期的内容或素材。当然,如果你的应用本身就是关于圣诞或其他节日主题的,那例外。</p> <h4> 从应用中录制实际音效</h4> <p>正如前面所说,要避免在视频中通过手指操作来演示产品的交互特性,而要使用录屏。不过仅凭视觉上的呈现,也许会略显单薄。因此,操作过程中的实际音效对于演示交互反馈特性就变得更加重要了。</p> <h4> 使用高品质的背景音乐及画外音</h4> <p>虽说不是必需,但要找到一个合适的人来帮你做些简短的画外音解说,这也不是很困难的事。不过和前面提到的文字介绍性质相同,不要过分依赖于解说。当然有一点需要承认,如果做的够好,那么画外音可以给用户带来非常不错的第一印象。</p> <p>你也可以自己做这件事,不过要在能够尽量隔绝噪音的地方使用高品质设备进行录制,而不是那种5美元的小麦克风。除非你在录音方面的确内行,否则还是建议你自己写好脚本然后交由外包。记得不要把画外音的风格搞得太像电视广告。</p> <p>无论是否使用画外音进行解说,背景音乐总是你需要考虑的。如果你有原创的或是经过授权的歌曲,不妨一用。使用音乐配合视频,可以为产品奠定一种基调,让用户在下载前就对大致的体验风格有所感知。对于解说和音乐,要进行充分的效果测试,确保音质如水晶般清澈。</p> <p>如果你不拥有原创音乐,那么在选择授权音乐的时候一定要考虑到风格是否适宜自己的产品。毕竟,哪怕拥有版权,<a href="http://www.xiami.com/song/2030077">System of a Down乐队的&ldquo;B.Y.O.B.&rdquo;</a>也无法适用于小清新风格的购物应用。</p> <h4> 选择一张合适的封面</h4> <p>前文都是聚焦在视频本身上面,我们还忘记了一个小细节:视频不会自动播放,用户需要点击封面才可以观看。所以我们要确保他们有愿望去点击封面才是。</p> <p>我们可以把这张图片称作封面,也可以叫做海报。它应当来自于视频当中,看上去就像带有一个播放按钮的截屏图片。</p> <p>上传视频时,iTunes Connect会从视频里自动挑选一帧作为默认的封面,但你也可以自主选择。别忘了做这件事,它对于转化率的提升将起到重要的作用。如果你真的忘记了,而应用已经通过了审核,那么要做好准备重新上传一个新包,哪怕只是为了更换一张封面。</p> <h3> 制作预览视频</h3> <p>看过上面所有这些技术与设计规范,是时候动手制作自己的预览视频了。</p> <p>关于制作方式,苹果官方有做推荐,同时你也有很多其他选择。接下来,我会向各位展示我所探索到的所有的可行方法。无论是个人开发者,还是公司团体,都该试着为自己的产品制作预览视频。继续往下读吧,看看哪种制作方式最符合你们在时间及预算方面的具体情况。</p> <h3> 预算较低</h3> <p>独立开发者和小工作室不该错过这场派对。你可能需要花些时间来学习相关的制作软件,但最终仍然可以凭借自己的力量制作出优秀的应用预览视频。</p> <h4> 使用苹果自家的软件录制屏幕</h4> <p>这大概是制作录屏的最简单的方法了。OS X Yosemite预置了一项全新的设备录制功能,目的就是帮助广大设计师和开发者制作应用预览视频。此外,你需要带有Lighting接口和Retina屏的iOS设备,系统是iOS 8;iPhone 5及之后的iPhone都可以满足条件。</p> <p>下面是来自苹果官方的操作指南:</p> <ol> <li> 使用Lighting连接线将你的iOS设备与Mac连接起来。</li> <li> 在Mac上打开QuickTime播放器。</li> <li> 选择&ldquo;文件&gt;新建屏幕录制&ldquo;。</li> <li> 在接下来出现的窗口中,选择你的iOS设备作为摄像头及麦克风输入源。</li> </ol> <p>然后就可以开始录制了。</p> <h4> 使用第三方软件录制屏幕</h4> <p>另外一个比较简单易行的选择就是<a href="http://appshow.techsmith.com/">TechSmith AppShow</a>。这款新软件也是专门针对应用预览视频的制作需求的,同样要求iOS 8硬件设备以及运行着Yosemite的Mac,当然,还有Lighting连接线。此外,这款软件自带一个简单的视频编辑工具,所以除了像使用Quicktime一样录制屏幕以外,你不需要再使用其它软件来编辑视频了。目前TechSmith AppShow还处于Beta测试阶段,你可以免费参加测试。</p> <p>当然,你也可以使用市面上其它一些比较成熟的录屏软件。从前,它们的主要用途是从其它设备上录制视频,并在电视或网页上进行播放。</p> <p>为什么要用这类工具?<a href="http://www.apptamin.com/blog/app-previews/">Reflector</a>的团队告诉我们,通过AirPlay投射的屏幕视频质量更高,因为&ldquo;通过USB连接的方式录制的视频帧数较低&rdquo;。TechSmish和Apptamin也对此进行了验证,通过AirPlay投到Yosemite上的视频可以录制出更好的效果,包括iPhone 6和Plus都是这样。</p> <p>那么这些第三方软件的工作原理是什么呢?他们本身相当于AirPlay接收器,可以将iOS设备的屏幕直接投到PC、Mac或Android上进行录制。确保这些设备在同一网络中,然后在你的iPhone或iPad中打开控制面板,激活AirPlay即可。</p> <p>下面是一些比较有代表性的第三方软件:</p> <p><img alt="" src="/sites/default/files/images/201410-3/02-ios-8-app-store-preview-video-design-development-guideline.png" style="width: 600px; height: 179px;" /></p> <h4> 在Mac上直接录制iOS模拟器的屏幕</h4> <p>如果以上方法对你都不适用,还有一招:直接录制Mac的屏幕。不过同故宫这种方式录制的视频质量不是最佳的,帧数不够稳定,你可能需要通过后期编辑来改善。</p> <p>具体方法就是在Xcode上加载并运行你的应用,然后通过下列软件录制iOS模拟器中的视频:</p> <p><img alt="03-ios-8-app-store-preview-video-design-development-guideline.png" src="/sites/default/files/images/201410-3/03-ios-8-app-store-preview-video-design-development-guideline.png" style="width: 600px; height: 349px;" /></p> <h4> 编辑录屏视频</h4> <p>完成屏幕录制之后,你还需要进行编辑,剪掉没用的东西,把精华浓缩到30秒当中。在导出方面,要记得参考前文给到的技术规范。</p> <p>你需要一些像样的工具来进行编辑工作,下面这些可供参考:</p> <p><img alt="04-ios-8-app-store-preview-video-design-development-guideline.png" src="/sites/default/files/images/201410-3/04-ios-8-app-store-preview-video-design-development-guideline.png" style="width: 600px; height: 222px;" /></p> <p>如果你使用Final Cut Pro,可以看看苹果官方的教学视频。更多视频编辑工具可以参见<a href="http://mashable.com/2013/07/24/best-video-editing-software/#_">Mashable给出的列表</a>。</p> <p>其中一些软件,例如Camtasia,会内置一些编辑工具套装。如果使用这些软件,你需要留意一下这些工具在导出方面是否符合前文给到的技术规范当中的要求。</p> <h3> 预算较高</h3> <p>如果钱不是问题,而时间和质量是你们最关注的,那么最好的方式就是外包。下面这些公司可以提供一站式服务,包括屏幕录制、视频编辑、解说等等,让你高枕无忧:</p> <p><img alt="05-ios-8-app-store-preview-video-design-development-guideline.png" src="/sites/default/files/images/201410-3/05-ios-8-app-store-preview-video-design-development-guideline.png" style="width: 600px; height: 284px;" /></p> <h3> 小结</h3> <p>预览视频显然比截屏要难制作的多,但成本越高,所能带来的机遇也就越多。制作精良的预览视频可以成为一款优秀应用的又一个标准之一,用户也会越来越多的留意那些提供了预览视频的产品。</p> <p>对于那些纠结于转化率的提升,或是渴望得到更多机会展示功能的产品来说,预览视频将成为好帮手。游戏类的产品很容易通过截屏来吸引用户的目光,因为它们本身就很炫酷;而对于生产力和效率类的应用来说,要做到吸引人就不那么容易了。花些心思打造一段预览视频将能帮你更好的展示产品。</p> <p>接下来会有越来越多的设计师和开发者投入到预览视频的制作工作当中,千万别落后。当然,其他方面例如应用图标和静态截屏的优化也是要考虑到的,这些都是提升下载量的重要手段<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-309" class="node node-related-books" about="/node/309" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS开发指南-从零基础到App-Store上架-关东升/dp/B00E5M072K/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS开发指南:从零基础到App Store上架" src="http://beforweb.com/sites/default/files/images/products/55.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS开发指南-从零基础到App-Store上架-关东升/dp/B00E5M072K/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS开发指南:从零基础到App Store上架</a></h4> <p><a href="http://www.amazon.cn/iOS开发指南-从零基础到App-Store上架-关东升/dp/B00E5M072K/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书共4部分:基础篇,介绍了iOS的一些基础知识;网络篇,介绍了iOS网络开发相关的知识;进阶篇,介绍了iOS高级内容、商业思考等;实战篇,从无到有地介绍了两个真实的iOS应用...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/174" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS8</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/76" typeof="skos:Concept" property="rdfs:label skos:prefLabel">App Store</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/175" typeof="skos:Concept" property="rdfs:label skos:prefLabel">应用预览视频</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 26 Oct 2014 06:57:12 +0000 C7210 581 at http://www.beforweb.com http://www.beforweb.com/node/581#comments