Be For Web - Web应用 http://www.beforweb.com/taxonomy/term/44 en 渐进式吸引 - 让潜在用户在实践中了解产品、完成转化 http://www.beforweb.com/node/156 <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-user-engagement-website-iphone-application-convert.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>阳光明媚的周六午后,窝在沙发里做做博客,微困。下载了一包&ldquo;我爱我家&rdquo;,搁电视里在旁边放着;多少有点不和谐的赶脚。这半年,编辑部的故事、过把瘾、封神榜、西游记、我爱我家轮着来,还真有点欲罢不能了,就差看渴望了。年龄暴露的一览无余。</p> <p>悄悄打个小广告,最近上了个新博客,<a href="http://beforapps.com">Be For Apps</a>,平时有的没的随便写几个字,主要用来从设计的角度记录自己平时试用试玩各种应用过程中的体验感受;一直在其微博上做应用设计点评的<a href="http://www.weibo.com/chibicat2012">Chibi猫</a>同学也会在这里一起念叨,比如这篇&ldquo;<a href="http://beforapps.com/?p=60">美丽说你这是要干嘛</a>&rdquo;,欢迎有兴趣的朋友们围观呗。</p> <p>接下来进入本周译文。所谓&ldquo;渐进式吸引&rdquo;,也不是什么前无古人后无来者的新鲜东西,作者将这个概念从一些实践案例中提取出来,归纳为一种产品设计和推广思路,蛮值得参考借鉴的。走起叭。</p> <p>用户访问你的产品推广页面时可以看到些什么内容?通常也就是功能特色啊截屏啊口碑评价啊这些,外加一个或多个行为召唤(call to action)操作。这类传统的产品介绍页面一般都会面临两个挑战:首先,它必须让潜在用户对你的产品产生足够的兴趣,并进行注册或下载;第二,它需要在一定程度上让这些潜在用户对产品的运作方式及使用方法有一个大致的了解,使他们在正式使用产品的时候更容易上手。</p> <p>不妨试着将这两方面结合起来,引导潜在用户直接在产品介绍页面中通过某种方式试用产品,让他们逐渐对产品的功能特色及使用方法产生认知,从而激发他们自主的执行下一步动作,例如注册或下载&mdash;&mdash;我(英文原文作者)将这个过程称为&ldquo;渐进式吸引&rdquo;。</p> <!--break--><h3> 产品实例</h3> <p>我们来看一个实际案例叭:我设计了一款iPhone上的抽认卡应用,名字叫作<a href="http://itunes.apple.com/us/app/fluent/id464042331?mt=8">Fluent</a>,它的特点就是可以根据用户的实际水平,帮助他们重点记忆那些相对生疏的词汇。用户不需要做复杂的学习目标设置,打开应用就可以开始学习单词。其中的具体原理不在这里多做解释了,这本是一个非常简单易用的产品概念,但它在投放市场后并没有很好的引起用户的关注。(插一句,我们曾经发过这位作者的另外一篇文章,&ldquo;<a href="http://beforweb.com/node/109">将产品在移动应用市场中推向成功的十点建议</a>&rdquo;,他在其中也谈到了推广这款Fluent时遇到的一些问题;非常不错的一篇文章,再次推荐。另外,这种结合自己的产品案例撰写经验心得文章的做法,也不失为一种推广技巧 - 译者<a href="http://weibo.com/c7210">C7210</a>)。</p> <p>为此,我专门制作了一个小站点,用来对Fluent进行介绍和推广。大家可以在下图中看到,这个页面当中没有任何功能介绍或是推广方面的内容,它只是询问用户希望学习哪种语言,包括法语、意大利语、西班牙语和拉丁语。</p> <p><img alt="01-website-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" src="/sites/default/files/images/201301-2/01-website-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" style="width: 531px; height: 329px;" /></p> <p>当用户选择了某种语言,譬如拉丁语,界面会通过动画效果滑入一张卡片,上面写有一个拉丁语的单词,同时在卡片旁边输出很简短的介绍文案,引导用户点击卡片,查看这个单词的解释。</p> <p><img alt="02-choice-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" src="/sites/default/files/images/201301-2/02-choice-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" style="width: 531px; height: 329px;" /></p> <p>卡片被点击之后会翻转过来,这样用户就可以看到背面的单词解释了。同样,这里也会有提示文案,告诉用户在他们真正记住了这个词之前,系统还会再输出几次,以增强记忆。</p> <p><img alt="03-answer-note-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" src="/sites/default/files/images/201301-2/03-answer-note-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" style="width: 531px; height: 329px;" /></p> <p>用户需要对这个答案是否符合自己的记忆做出确认,即点击&ldquo;正确&rdquo;或&ldquo;错误&rdquo;;然后一张新的记忆卡会出现,同时,提示文案会告诉用户,如果他对之前那张卡片上的单词记忆有误,那么这个单词会在下一轮复习当中再次出现。</p> <p><img alt="04-session-review-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" src="/sites/default/files/images/201301-2/04-session-review-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" style="width: 531px; height: 329px;" /></p> <p>就这样循环下去...用户成功的记住了三个单词之后,就可以看到一个新的界面,标题是&ldquo;恭喜!你已经走上拉丁语的学习之路了&rdquo;,下面则是注册表单。</p> <p><img alt="05-register-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" src="/sites/default/files/images/201301-2/05-register-homepage-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" style="width: 531px; height: 329px;" /></p> <p>这里有个细节需要注意。你可以看到,我并没有在这个界面里显性的怂恿用户立刻去下载应用,而是提示他们通过创建账户的方式保存之前的学习进度。这样做可以让这些潜在用户了解到之前在试用和学习的过程里花费的时间与精力不是没有意义的&mdash;&mdash;让用户感觉到他们的付出是能产生回馈与回报的,这很重要;这种&ldquo;替用户考虑&rdquo;的方式可以更加有效的提升<a class="eLink" href="http://beforweb.com">转化率</a>。(相关阅读:<a href="http://beforweb.com/node/143">表单设计与转化率的提升</a>)</p> <p>这就是我对&ldquo;渐进式吸引&rdquo;这个概念的实践方式&mdash;&mdash;创建一个与自己产品相关的简易Web应用,在首页通过简单直白而符合目标用户核心需求的文案引导他们直接&ldquo;试用&rdquo;,在这个过程中&ldquo;随需随到&rdquo;的对产品功能特色及使用方式进行简要介绍;在这些潜在用户通过亲身实践对产品产生了渐进式的认知之后,再引导他们进行转化。</p> <div class="embed"><article id="node-279" class="node node-related-books" about="/node/279" 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/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="深入理解网站优化:提升网站转化率的艺术与科学" src="http://beforweb.com/sites/default/files/images/products/23.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">深入理解网站优化:提升网站转化率的艺术与科学</a></h4> <p><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书揭示了改进任何类型网站所需的工具、测试思路、优化策略及其实现方法,以及最佳实践,使你的网站更有吸引力,能大大提升它的转化率。它结合网站分析、网站测试、网站易用性、在线营销4大方面的最佳实践,帮助你最大限度地从优化工作中获益...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 其它实践案例</h3> <p>相比于传统的产品介绍方式,&ldquo;渐进式吸引&rdquo;可以使访问者立刻进入&ldquo;用户&rdquo;角色,直接试用产品,而无需首先注册登录或是花时间了解足够多的产品信息。接下来我们再看两个相关的实例,然后简单探讨一下怎样在你的产品中运用这种方式。</p> <p>首先来看<a href="http://www.netvibes.com/">Netvibes</a>,他们鼓励匿名访问者直接尝试着创建订制化的新闻面板,在这个过程中一点点的进行提示帮助,使访问者在实际操作的过程中逐渐了解该产品。当他们进行了一定程度的订制化操作之后,Netvibes会提醒访问者创建帐户,藉此保存之前的设定。</p> <p>对于已经对产品功能及操作方式有了一定程度了解的潜在用户来说,更加容易做出转化为正式用户的决定。</p> <p><img alt="06-netvibes-customize-dashboard-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" src="/sites/default/files/images/201301-2/06-netvibes-customize-dashboard-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" /></p> <p>再来看另外一个例子。<a href="http://pandora.com">Pandora</a>会直接向访客询问他们喜欢的音乐艺术家或风格,并根据他们的输入创建一个电台,播放这些访客喜欢的音乐,这个过程完全不需要访客进行登录注册。相比于创建一个产品介绍推广页面,向访客天花乱坠的描述产品的强大功能,然后撺掇他们注册登录,Pandora只是简单的与访客进行了一次关键的互动,但实际转化效果却是传统方式无法比拟的。</p> <p><img alt="07-pandora-station-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" src="/sites/default/files/images/201301-2/07-pandora-station-gradual-engagement-iphone-web-application-ux-design-user-experience.jpg" /></p> <h3> 通过&ldquo;渐进式吸引&rdquo;推广你的产品</h3> <p>也许你已经开始琢磨能否运用这种方式推广自己的产品了。开始之前,最好先问自己两个问题:</p> <ul> <li> 产品的核心功能是什么?</li> <li> 有哪些功能相对复杂,需要花时间向潜在用户进行解释说明?</li> </ul> <p>Pandora有很多功能,不过最核心最基础的还是为用户播放推荐曲目,所以他们通过渐进式吸引将这一点直接推到了访客面前,让他们在最短的时间内了解到产品的核心价值;而其他方面的功能则随着访客转化为用户而逐渐围绕着核心价值体现出来。</p> <p>而对于Fluent来说,最大的障碍在于怎样让潜在用户理解学习单词的流程,理解系统向他们输出单词的频率与其记忆程度之间的关联。通过渐进式吸引,让潜在用户直接进入角色,在学习过程中理解产品的功能,这比通过文字和图片内容向他们解释产品机制要有效的多。</p> <div class="embed"><article id="node-286" class="node node-related-books" about="/node/286" 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/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="放飞App:移动产品经理实战指南" src="http://beforweb.com/sites/default/files/images/products/31.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">放飞App:移动产品经理实战指南</a></h4> <p><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">本书讲述如何构建出能在Apple Store中引人注目的iPhone和iPad应用。从全局介绍这一构建过程中的每一步,包括预算成本、挑选开发人员并组织最佳团队、搭建工作流程、推销和改进自己的应用产品...</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="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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><li class=" taxonomy-term-reference-1"><a href="/point" 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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/56" typeof="skos:Concept" property="rdfs:label skos:prefLabel">转化率</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/73" typeof="skos:Concept" property="rdfs:label skos:prefLabel">引导</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 19 Jan 2013 06:24:02 +0000 C7210 156 at http://www.beforweb.com http://www.beforweb.com/node/156#comments 设计师应该了解的iOS应用开发基础知识 http://www.beforweb.com/node/120 <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-xcode-ios-iphone-development-developer-sdk.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>先祝各位假期愉快喽。不知有多少同学和我一样计划把这8天当中的多数时间花在&ldquo;宅&rdquo;上;做做博客和小项目,看看live视频,录点demo出来,太赞了这日子。</p> <p>话说这里我要长出口气先。今次选做的译文蛮科普的,也真是蛮长的,还好之前几天就开始着手来做,也在<a href="http://weibo.com/1833937113/yDp4RueTx">微博</a>上做了预告;搞到这两天觉得简直是没有尽头的样子。</p> <p>我之前几个月花了蛮多时间在iOS应用开发的学习上,到目前为止感觉也仍只是入门而已,所以真心觉得这一篇文章即使再长,也无法让人从零开始学会怎样开发一款应用。但之所以建议和我一样的交互或视觉设计师同学们来阅读,主要目的是让我们自己在头脑里建立开发意识,了解这摊子事情大体是怎么一回事。如果你有兴趣,以此为起点,通过学习逐渐掌握了开发技能,这自然不坏;但更实际的效用,我个人看来还是在平时的工作当中,在打造设计方案的过程中,可以结合具体的开发可行性进行考虑和评估。另外,当程序员同学告诉你哪些不能做的时候,我们自己心里也可以有个底;这事不用说太细,大家都明白。OK废话不多说,进入正文。</p> <p>作为一名交互或视觉设计师,你希望顺应当前大环境的发展趋势,向移动领域拓展自己的视野和能力,于是决定挽起袖子学习iOS应用开发。兴奋之余,你开始做一些初步的研究,但是很快发现,除非自己有足够丰富的编程经验,否则要实现目标还真不是件易事。</p> <p>确实是这样。苹果提供的开发文档主要是面向技术人员的,市面上多数iOS开发书籍都会一上来就问你是否掌握了足够的Objective-C知识,而网上各种教程的质量又参差不齐,其中有不少还是面向着很旧版本的iOS系统及开发工具的。</p> <p>本文的目的就是帮助各位设计师在最短的时间内,以实战的方式探索iOS应用开发工具及相关的基础知识。我们将一同了解应用开发流程中的一些重要环节,包括理论讲解及方法演示,即使你没什么编程经验也没问题。</p> <!--break--><p>我们的实战案例是一款非常简单的、用来展示设计作品的应用,如下图所示:</p> <p><img alt="01-showcase-portfolio-app-end-result-designer-ios-development.jpg" src="/sites/default/files/images/201209-2/01-showcase-portfolio-app-end-result-designer-ios-development.jpg" /></p> <h3> 本地(原生)开发方式</h3> <p>所谓&ldquo;本地&rdquo;,即是指通过苹果原生的开发工具(SDK)及Objective-C语言开发iPhone和iPad应用的方式。在我们对这套方法进行探索之前,最好稍微花点时间了解一下还有哪些替代方案,以及我们之所以选择原生开发方式的原因。</p> <p>也许很多人已经听说过Web App及&ldquo;混合型应用&rdquo;这样的说法,这些就是所谓的&ldquo;替代方案&rdquo;。我们确实可以使用基于HTML5、CSS、JavaScript的Web前端开发技术打造应用,这其中最为常见的解决方案包括<a href="http://www.appcelerator.com/products/titanium-mobile-application-development/">Titanium Mobile</a>、<a href="http://www.phonegap.com/">PhoneGap</a>、<a href="http://jquerymobile.com/">jQuery Mobile</a>、<a href="http://www.sencha.com/products/touch/">Sencha Touch</a>等框架。通过这种方式开发的应用通常具有很好的跨平台特性。(推荐阅读:<a href="http://beforweb.com/node/22/page/0/3">前端开发者的跨平台移动应用开发策略及工具</a>)</p> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" 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-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <p>不过,通过这种非原生方式开发的应用有着明显的弊端。基于浏览器(Web App)或&ldquo;原生应用壳&rdquo;(混合型应用)的运作方式使它们的效率无法与本地应用媲美,而且对硬件功能的访问及利用能力也是非常有限的。此外,代码框架本身也是需要学习的,它们有着各自不同的使用方式,在框架之外还有各种扩展库需要摸索。另外,框架本身的质量和成熟程度也是必须考虑的因素。</p> <p>还有其他一些第三方开发方案可以考虑,例如<a href="http://www.cocos2d-iphone.org/about">Cocos 2D for iPhone</a>和<a href="http://pugpig.com/">PugPig</a>。这类方案允许你将框架文件与Objective-C对象建立关联,以达到特定的目标,例如创建游戏或杂志类应用等。要使用这类技术,你最好也要对苹果本地开发工具包具有基本程度的了解。</p> <h3> 准备工作</h3> <p>正式起步前的准备工作包括两方面:</p> <ul> <li> 硬件:一台运行着最新或新近版本OS X系统的Mac机,包括MacBook(Pro/Air)、Mac mini、iMac或是Mac Pro均可。</li> <li> 软件:苹果的Xcode应用。</li> </ul> <p>Xcode可以从Mac应用商店(Mac App Store)或是<a href="https://developer.apple.com/xcode/">苹果的开发者站点</a>中免费下载到,大约1.5GB的样子。</p> <p><img alt="apple-developer-xcode-4-download.png" src="/sites/default/files/images/201209-2/01b-apple-developer-xcode-4-download.png" /></p> <h3> 图片资源</h3> <p>在等待Xcode下载完成的过程中,我们可以同步开始图片方面的工作。</p> <p>由于要为普通屏幕(320&times;480)和Retina屏幕(640&times;960)各自准备一套图像资源(最新的iPhone5规格为640&times;1136),我们应该在Photoshop中尽量多的使用矢量图形(vector shape)、图层样式(layer style)以及智能对象(smart object)等技术,以确保图像的无损缩放。比较合理的流程是从Retina版本入手进行构建,然后等比缩放到普通版本的规格。在缩放过程中,一些元素的细节有可能发生变形,记得做好手动调整。</p> <p>另外,我们还可以在网上找到很多原生风格的iPhone界面PSD模板,其中比较著名的一款是来自<a href="http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/">Teehan和Lax的iPhone 4 GUI PSD</a>。如果要打造的应用在界面方面以iOS原生风格为主,那么这类模板可以帮助我们节省掉很多时间。即使你更倾向于定制化的用户界面,这些模板同样可以在控件规格、布局规则等方面提供精确的参考。(相关阅读:<a href="http://beforweb.com/node/119">先了解规则,再寻求创新 - 关于iOS应用界面自定义</a>)</p> <p>在Photoshop或是你更习惯的图像编辑工具中创建一个新文档,规格如下:</p> <ul> <li> 尺寸:640&times;960(pixels)</li> <li> DPI:72</li> <li> 色彩模式:RGB</li> </ul> <p>由于本文的焦点主要将集中在开发的基础知识上,所以在视觉设计方面不做深入探讨。更多关于iOS界面设计技术及流程方面的信息,可以参考Marc Edwards的<a href="http://www.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/">Designing for iPhone 4 Retina Display</a>一文。</p> <h3> 关于图片导出的小贴士</h3> <ul> <li> 虽然你可以在应用中使用多种格式的图片,不过鉴于alpha通道及无损压缩等方面的考虑,我们最为推荐的仍是PNG格式。</li> <li> 多数情况下,要将按钮导出为不包含文案的背景图片,以便更加灵活的在开发环境中调整文字属性,或是对多语种进行支持。</li> <li> 对于按钮的背景图片,要确保实际按钮的部分(不包括阴影或外发光等效果的区域)处于背景图片的正中,因为我们在Xcode的Interface Builder当中很难对背景图片及前景文字之间的位置关系进行精密的调整。很多时候,我们需要在制作背景图片的过程中,在按钮的另外一侧添加一块空白的区域,以弥补阴影效果所占据的空间,确保按钮自身处于正中央。</li> <li> 在设计方案允许的情况下,尽可能将那些在视觉上叠加在一起的元素直接保存在一张背景图片当中,而不要留到开发环节里再进行层叠处理,否则成本将会变的很高。另外,这样做也有助于减少资源文件的数量,提高应用运行的效率,减少内存占用。只有那些需要对用户行为进行交互响应的界面元素需要独立的背景图片或是动画效果。</li> <li> 在所有适用于Retina屏的图片文件名中增加特殊的后缀&ldquo;@2x&rdquo;作为标示,使系统能够进行识别:</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> image.png:适用于普通屏幕。</li> <li> <a href="mailto:image@2x.png">image@2x.png</a>:适用于Retina屏幕。</li> </ul> </li> <li> 可以尝试使用<a href="http://www.mightymeta.co.uk/superslicr-ditch-the-slice-tool/">SuperSlicr</a>这样的自动化批处理脚本对PSD中的UI元素进行格式化及导出。</li> <li> 所有的资源文件都会保存在app包(app bundle)的同一个路径当中,所以文件名不能有重复的情况。</li> <li> Photoshop不大擅长对PNG图片进行压缩。可以试着使用imageOptim这样的工具减小图片尺寸,然后再导入到Xcode当中。另外,Xcode本身也会对导入过来的图片进行一定程度的压缩,不过有时反而会增加图片的尺寸。</li> </ul> <h3> Xcode概览</h3> <p>Xcode已经安装好了叭?</p> <p>接下来我们去下载一套用于本次案例学习的<a href="https://github.com/JamesBrocklehurst/Portfolio-iOS-App/downloads">模板文件</a>,其中包括一些PSD、PNG资源,还有一些用来起步的代码文件。进入里面的Begin Here文件夹,找到<strong>Portfolio.xcodeproj</strong>文件,双击打开。</p> <p>文件加载成功之后,点击左侧导航栏(Navigator)中的项目(Portfolio,1 target,iOS SDK),这时我们就可以在编辑区中看到这个项目的概况信息了,如下图所示。关于这些概况信息的用处,我们稍后解释。</p> <p><img alt="xcode-overview-iphone-ios-application-development.jpg" src="/sites/default/files/images/201209-2/03-xcode-overview-iphone-ios-application-development.jpg" /></p> <p>点击左侧导航栏当中项目名称旁边的箭头,我们可以看到一个资源列表,里面包含了当前项目所涉及到的所有资源文件,例如代码和图片等。我们把注意力放在Portfolio路径当中,其中有三个类型的文件:</p> <ul> <li> .h文件:头文件(header,也可称为interface文件)。</li> <li> .m文件:消息文件(message,也可称为implementation文件)。</li> <li> .xib文件:在Interface Builder中进行界面可视化编辑的XML文件,出于历史原因,通常也被称为NIB文件。</li> </ul> <p>中间编辑区(Editor)所呈现的内容会根据当前正在执行的任务而发生变化。当我们像之前那样点击了导航栏中的项目名称时,这里展示的就是目标概况(Target Summary),其中包括当前应用的一些基本信息,例如设备类型、iOS版本、屏幕定向方案等等。此外,应用的图标及加载图片也是在这里进行设置的;我们将会在后文中进行演示。</p> <p>在导航栏中单击Portfolio路径中的AppDelegate.m文件,编辑区就会相应的进入代码编辑状态。</p> <p>接下来单击Portfolio路径中的MainWindow.xib文件,这时编辑区所呈现的就是用于编辑用户界面的Interface Builder,如下图所示。我们通常会在这里对应用界面做最基本的构建。</p> <p><img alt="interface-builder-overview-xcode-ios-iphone-application-development.jpg" src="/sites/default/files/images/201209-2/04-interface-builder-overview-xcode-ios-iphone-application-development.jpg" /></p> <p>右侧的检查器(Inspector)当中共有6组工具,其中后面4组是开发工作当中最常用的,从右到左依次为连接检查器(Connection Inspector)、规格检查器(Size Inspector)、属性检查器(Attributes Inspector)、识别检查器(Identity Inspector)。</p> <p><img alt="inspector-bar-connection-size-attributes-identity.jpg" src="/sites/default/files/images/201209-2/05-inspector-bar-connection-size-attributes-identity.jpg" /></p> <p>另外一个最常用的操作莫过于Xcode左上角的&ldquo;运行(Run)&rdquo;按钮了。这个操作会将项目代码编译成为应用,并在iOS设备模拟器中运行,以便我们直接查看程序的工作情况,而不必每次都部署到实际设备中。</p> <p>不妨现在就点击&ldquo;运行&rdquo;按钮或使用快捷键Command+R,来看看我们的模板项目打包成应用之后的样子:</p> <p><img alt="ios-simulator-iphone-application-development-xcode-interface-builder.jpg" src="/sites/default/files/images/201209-2/06-ios-simulator-iphone-application-development-xcode-interface-builder.jpg" /></p> <p>什么也没有。iPhone模拟器的工作机制与实际设备差不多,Home按键是可以点击的,其他的一些内置应用也都是可以正常工作的,包括Safari、照片、联系人、Game Center、最新的Passbook等等,有兴趣的话可以玩玩看。另外,我们还可以在&ldquo;Stop&rdquo;按钮右侧的下拉列表中选择iPad作为模拟设备。</p> <p>更多关于Xcode的使用方法,可以参考苹果官方的&ldquo;<a href="http://developer.apple.com/library/mac/#documentation/ToolsLanguages/Conceptual/Xcode4UserGuide/000-About_Xcode/about.html">Xcode 4 User Guide</a>&rdquo;。</p> <h3> 将图片导入Xcode</h3> <p>我们下载的模板包当中是包括图片文件的,不过项目默认是不会将这些资源文件加载进来的,我们必须手动导入。方法有两种:你可以在左侧导航栏当中Control单击Images文件夹,选择&ldquo;Add Files to &#39;Portfolio&#39;&rdquo;,然后找到模板包当中PNGs路径下的全部文件,执行添加(Add);或者也可以首先在Finder中找到这些文件,然后全部拖到Xcode导航栏的Images文件夹中。</p> <p><img alt="add-images-import-to-xcode-ios-iphone-development.jpg" src="/sites/default/files/images/201209-2/07-add-images-import-to-xcode-ios-iphone-development.jpg" /></p> <p>如果采用第二种方式,在执行导入的时候,Xcode会提供一些操作选项,记得勾选其中的&ldquo;Copy items into destination group&#39;s folder&rdquo;,确保资源文件最终会被打包到应用项目当中。</p> <h3> 应用界面的可视化编辑</h3> <p>iOS开发的圈子当中始终存在一个争论&mdash;&mdash;是完全通过代码的方式创建应用更好,还是使用Interface Builder更加直观的构建界面来的更好些。两种方式都是可行的,而且它们在本质上可以说是互补而不是矛盾的关系,具体的开发策略还是由实际项目的特点所决定。</p> <p>倾向于纯代码方式的开发者们也许真的忽视了可视化编辑工具在界面创建过程中所体现出的高效与直观。对于我们这些习惯了Adobe系列工具的设计师来说,可视化编辑的方式无疑是最好的切入点;而且我们的案例是很典型的基于视图(view)的应用,在这里使用Interface Builder进行界面构建也是最合理的。</p> <p>首先,我们来看看怎样创建一些可以通过标签栏(Tab Bar)进行切换的界面,或者说视图(view)。在Xcode左侧的导航栏中点击MainWindow.xib,进入Interface Builder编辑模式。在右下角的库(Library)中选择&ldquo;Show the Object Library&rdquo;图标(看上去像个立方体的那个),在下面的列表中找到&ldquo;View Controller&rdquo;。</p> <p><img alt="view-controller-object-xcode-ios-iphone-application-development.jpg" src="/sites/default/files/images/201209-2/08-view-controller-object-xcode-ios-iphone-application-development.jpg" /></p> <p>拖拽一个View Controller对象到编辑区左侧的文档结构列表(Document Outline)当中,并在&quot;Tab Bar Controller&quot;上面放开。此时后者会展开,一个View Controller嵌套在里面。</p> <p>重复执行两次这样的操作,使Tab Bar Controller当中包含3个View Controller,此时我们也可以在编辑区当中看到,默认的View Controller的标签栏里已经有了3个未命名的Tab,如下图所示:</p> <p><img alt="view-controllers-added-to-tab-bar-xcode.jpg" src="/sites/default/files/images/201209-2/09-view-controllers-added-to-tab-bar-xcode.jpg" /></p> <h3> 什么是View Controller?</h3> <p>View(视图)和Controller(控制器)都是MVC开发模式(Model View Controller)的组成部分。这种开发模式旨在将程序的数据、业务逻辑与表现进行分离(类似前端的&ldquo;内容、样式、行为分离&rdquo;)。其中&quot;Model&quot;包括数据和算法等方面,&ldquo;View&rdquo;涉及软件的人机交互界面,而&ldquo;Controller&rdquo;负责将这两者衔接起来,对用户行为进行处理;而View Controller即是指专门负责某个特定View的Controller。</p> <p>关于MVC的概念,可以参考<a href="http://zh.wikipedia.org/wiki/MVC">维基百科</a>了解更多。</p> <h3> 创建类(Class)</h3> <p>我们需要创建一些&ldquo;类&rdquo;来生成视图。在Objective-C这样的面向对象编程语言当中,&ldquo;类&rdquo;用来定义对象(Object)所共有的属性与方法。通过&ldquo;类&rdquo;,我们可以实例化出更多的同类对象。</p> <p>在我们的案例当中,每个视图都是一个对象,它们有各自的内容与行为特征。所以我们需要创建3个不同的类,以便对每个视图的属性和方法进行定义。这些类所扮演的就是View Controller的角色。</p> <p>要创建新的类,使用快捷键Command+N,在左侧的列表中选择&ldquo;Cocoa Touch&rdquo;中的&ldquo;Objective-C class&rdquo;,如下图所示:</p> <p><img alt="new-objective-c-class-xcode-ios-iphone-development.png" src="/sites/default/files/images/201209-2/10-new-objective-c-class-xcode-ios-iphone-development.png" /></p> <p>点击&ldquo;Next&rdquo;,在&ldquo;Class&rdquo;文本框中将这个类命名为&ldquo;HomeViewController&rdquo;,在下面的&ldquo;Subclass of&rdquo;列表中选择&ldquo;UIViewController&rdquo;,并勾选&ldquo;With XIB for user interface&rdquo;。</p> <p><img alt="naming-new-view-controller.jpg" src="/sites/default/files/images/201209-2/11-naming-new-view-controller.jpg" /></p> <p>继续点击&ldquo;Next&rdquo;,在接下来的对话窗中,将类文件的保存路径设置为&ldquo;Begin Here&gt;Portfolio&rdquo;,点击&ldquo;Create&rdquo;。</p> <p>以相同的方法再创建两个类,分别命名为&ldquo;PortfolioViewController&rdquo;和&ldquo;ContactViewController&rdquo;。之后,你可以手动在导航栏中对文件进行拖放排序,使它们看上去更符合逻辑:</p> <p><img alt="view-controllers-added-to-navigator1.jpg" src="/sites/default/files/images/201209-2/12-view-controllers-added-to-navigator1.jpg" /></p> <div class="embed"><article id="node-308" class="node node-related-books" about="/node/308" 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-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS 6应用开发入门经典(第4版)" src="http://beforweb.com/sites/default/files/images/products/54.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS 6应用开发入门经典(第4版)</a></h4> <p><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书循序渐进地介绍了从事iOS开发所需的基本知识,包括使用Xcode、Objective-C和Cocoa Touch等开发工具,设计及美化用户界面,利用多场景故事板、切换、弹出框、导航控制器和选项卡栏控制器...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 为Tab与视图建立关联</h3> <p>回到MainWindow.xib当中,在文档结构列表里选中我们之前添加的第一个View Controller,在右侧的识别检查器(Identity Inspector)中,展开&ldquo;Class&rdquo;下拉列表,选择其中的&ldquo;HomeViewController&rdquo;。</p> <p><img alt="connecting-home-viewcontrolle-xcode-ios-iphone-development.jpg" src="/sites/default/files/images/201209-2/13-connecting-home-viewcontrolle-xcode-ios-iphone-development.jpg" /></p> <p>接下来切换到属性检查器(Attributes inspector),在&ldquo;Title&rdquo;中输入&ldquo;Home&rdquo;,并在&ldquo;NIB Name&rdquo;中选择&ldquo;HomeViewController&rdquo;。</p> <p><img alt="connecting-homeviewcontroller-xib.jpg" src="/sites/default/files/images/201209-2/14-connecting-homeviewcontroller-xib.jpg" /></p> <p>在文档结构列表中展开这个View Controller,选中其中的&ldquo;Tab Bar Item&rdquo;,然后到属性检查器当中将&ldquo;Title&rdquo;设置为&ldquo;Home&rdquo;,并在&ldquo;Image&rdquo;下拉列表中选择我们之前导入的图片文件之一,tab-icon-home.png,这里你并不需要特别为Retina屏幕指定带有@2x后缀的文件,应用会在运行的时候自动识别。</p> <p><img alt="customise-tab-name-and-icon-xcode-ios-iphone-development.jpg" src="/sites/default/files/images/201209-2/15-customise-tab-name-and-icon-xcode-ios-iphone-development.jpg" /></p> <p>以同样的方法对另外两个View Controller进行操作,将它们分别与&ldquo;PortfolioViewController&rdquo;、&ldquo;ContactViewController&rdquo;建立关联、挂上NIB文件,并为它们各自的Tab Bar Item设置相应的Title(Portfolio、Contact)与图标(tab-icon-portfolio.png、tab-icon-contact.png)。</p> <p>Tab在高亮状态时的颜色也是可以定义的。在文档结构列表中选中&ldquo;Tab Bar&rdquo;对象,然后在右侧的属性检查器中找到&ldquo;Image Tint&rdquo;,在其中设置我们所需要的配色方案。不过这里所做的设置只有在iOS 5以上的系统中才会有效,对于iOS 4以及更低版本的系统来说,高亮状态仍然时默认的蓝色。</p> <p>我们已经为Tab与视图建立了关联,要检视它们能否正常工作,我们还需要在每个视图当中添加一些范例内容。</p> <p>在Xcode左侧的导航栏中选择HomeViewController.xib,然后从右侧的对象库中拖拽一个Label控件到编辑区当中的空白View上面。双击该控件,将文案更改为&ldquo;Home&rdquo;。</p> <p><img alt="adding-label-to-home-view-xcode-ios-iphone-application.jpg" src="/sites/default/files/images/201209-2/16-adding-label-to-home-view-xcode-ios-iphone-application.jpg" /></p> <p>在PortfolioViewController.xib与ContactViewController.xib当中也执行同样的操作,Label的文案相应的更改为&ldquo;Portfolio&rdquo;和&ldquo;Contact&rdquo;。</p> <p>现在点击&ldquo;Run&rdquo;按钮,或使用快捷键Command+R来运行一下叭。我们可以在iPhone模拟器中看到,应用的标签栏已经可以正常的切换界面了。不赖!</p> <p><img alt="app-test-with-labels-simulator-tab-bar-views.jpg" src="/sites/default/files/images/201209-2/17-app-test-with-labels-simulator-tab-bar-views.jpg" /></p> <h3> 向视图中添加图片和文字</h3> <p>要通过Interface Builder向视图当中添加图片和文字,我们首先需要创建一些对应着不同类型内容的&ldquo;容器&rdquo;,也就是&ldquo;Image View&rdquo;与&ldquo;Text View&rdquo;。与添加View Controller的方式相同,我们也需要将这两类View从右侧的对象库当中拖拽出来放到界面当中。我们还可以在规格检查器(Size inspector)中对这些容器进行精准的定制,包括布局位置、尺寸等。</p> <p>而在属性检查器(Attributes inspector)中,我们可以为图片容器指定其中所要显示的图片,也可以控制文字容器的各种属性。</p> <p>接下来我们要向HomeViewController.xib当中添加图片。首先删除之前的Label控件,从库中拖拽一个Image View到界面当中,在属性检查器当中的&ldquo;Image&rdquo;下拉列表里选择&ldquo;home-bg.png&rdquo;,然后将&ldquo;Mode&rdquo;设置为&ldquo;Top Left&rdquo;。</p> <p><img alt="attributes-select-image-view-xcode-interface-builder-ios-iphone-development.png" src="/sites/default/files/images/201209-2/18-attributes-select-image-view-xcode-interface-builder-ios-iphone-development.png" /></p> <p>到规格检查器(Size inspector)中,确保其中的4个属性值分别为&ldquo;0&rdquo;、&ldquo;-20&rdquo;、&ldquo;320&rdquo;、&ldquo;480&rdquo;,如下图所示:</p> <p><img alt="size-inspector-interface-builder-xcode.png" src="/sites/default/files/images/201209-2/19-size-inspector-interface-builder-xcode.png" /></p> <p>接下来,拖拽一个Text View到界面中,双击编辑其中的文案,例如更改为&ldquo;A Catchy Slogan Here&rdquo;,在属性检查器中设置为居中对齐,将字色设置为白色,并禁用背景色,然后将Font类型更改为&ldquo;Custom&rdquo;,将其他属性设置为&ldquo;Snell Roundhand,Regular,24&rdquo;。</p> <p><img alt="attributes-inspector-text-view-controls.png" src="/sites/default/files/images/201209-2/20-attributes-inspector-text-view-controls.png" /></p> <p>现在我们的HomeViewController.xib看上去大致是这样的:</p> <p><img alt="adding-graphics-to-home.jpg" src="/sites/default/files/images/201209-2/18-b-adding-graphics-to-home.jpg" /></p> <p>因为这三个界面都是被放置在Tab Bar Controller体系当中的,也就是说我们在设计这些单独界面的时候必须考虑到底部标签栏的占位。Xcode可以帮助我们在界面当中模拟这类全局元素的占位情况。确保在Xcode左侧的导航栏里选中HomeViewController.xib文件,在文档结构列表中选择&ldquo;View&rdquo;对象,然后在右侧的属性检查器(Attributes inspector)中找到最上面的&ldquo;Simulate Metrics&rdquo;一栏,在&ldquo;Bottom Bar&rdquo;中选择&ldquo;Tab Bar&rdquo;,如下图所示:</p> <p><img alt="simulated-metrics-xcode-view.jpg" src="/sites/default/files/images/201209-2/19-b-simulated-metrics-xcode-view.jpg" /></p> <p>这个功能并不会向实际应用里又添加一个标签栏,它只是为我们提供一个可视化的设计指引,帮助我们对界面元素进行更精准的定位。</p> <p>接下来,我们可以向Portfolio及Contact界面中添加图片和文字内容了。具体的样式可以参考本文开始时的目标演示图片,或参考模板包当中提供的PSD文件。</p> <p>在Portfolio界面当中创建案例缩略图,以及在Contact界面中创建联系方式按钮时,我们需要使用对象库中的Round Rect Button控件,而不是之前那样使用Image View;因为这些地方都是需要响应用户的操作并由此触发相关行为的,按钮类的控件可以帮我们实现这个目标。将Round Rect Button拖拽到界面内,到右侧的属性检查器当中,将按钮类型(Type)设置为&ldquo;Custom&rdquo;,然后就可以通过下面的&ldquo;Image&rdquo;属性为其设置具体的背景图片了;如果需要的话,还可以进入规格检查器(Size inspector)当中对按钮的尺寸进行设置,使其符合按钮图片的大小。</p> <p>3个界面都打造完毕后,点击&ldquo;Run&rdquo;按钮或使用快捷键Command+R来运行应用,通过iPhone模拟器来检视当前的工作成果。</p> <div class="embed"><article id="node-295" class="node node-related-books" about="/node/295" 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开发-马克/dp/B00EXGR1DG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="精通iOS开发" src="http://beforweb.com/sites/default/files/images/products/41.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/精通iOS开发-马克/dp/B00EXGR1DG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">精通iOS开发</a></h4> <p><a href="http://www.amazon.cn/精通iOS开发-马克/dp/B00EXGR1DG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书是一部关于iOS应用开发的基础教程,几位作者结合大量实例,循序渐进地讲解了适用于iPhone、iPad开发的基本流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 其他技巧</h3> <p>在iPhone模拟器中点击Home按键回到首屏,你会发现我们的App图标只是一个干巴巴的白板,在应用被打开的时候也没有任何额外的加载图像。</p> <p>回到Xcode中,点击导航栏中的Portfolio项目图标,此时内容区会呈现出应用的信息概况。在其中找到&ldquo;App Icons&rdquo;和&ldquo;Launch Images&rdquo;,这里就是我们为应用添加图标和加载图像的地方了。</p> <p>设置的方法很简单,在Finder里面找到模板包App Icons路径下的相关图片文件,直接拖拽到那4个空位当中就OK了。</p> <p><img alt="app-icon-launch-image-wells-xcode-development-ios-iphone.jpg" src="/sites/default/files/images/201209-2/20-b-app-icon-launch-image-wells-xcode-development-ios-iphone.jpg" /></p> <p>如果要自己制作应用图标,在尺寸方面要符合以下规格(以像素计):</p> <ul> <li> 标准:57&times;57</li> <li> Retina:114&times;114</li> </ul> <p>加载图像的尺寸则与屏幕一致:</p> <ul> <li> 标准:480&times;320</li> <li> Retina:960&times;640</li> </ul> <p>除了在iPhone当中显示以外,应用图标的使用环境还有很多,例如两种规格的iPad、系统设置(Settings)、Spotlight搜索结果、iTunes等等。<a href="http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes">这篇文章</a>很详细的给出了这些上下文环境中所需的图标规格,另外也可以参考<a href="http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html">iOS Human Interface Guidelines对于图标规格及使用方法的说明</a>。</p> <p>值得一提的是,iOS会自动为你的图标添加圆角和高光,所以在制作的时候你并不需要自己处理这些效果。如果不希望系统为图标添加高光效果,可以在之前设置图标的地方勾选&ldquo;Prerendered&rdquo;。下图演示的是勾选&ldquo;Prerendered&rdquo;前后的效果对比:</p> <p><img alt="icon-gloss-effect-ios-xcode-prerendered.png" src="/sites/default/files/images/201209-2/23-icon-gloss-effect-ios-xcode-prerendered.png" /></p> <p>要改变图标下面显示的应用名称,点击应用概况中的&ldquo;info&rdquo;选项卡,这里所呈现的就是应用的.plist文件当中的内容。.plist是一个XML文件,里面包含了应用的主要设置信息:</p> <p><img alt="info-plist-app-xcode-ios-iphone-development.jpg" src="/sites/default/files/images/201209-2/21-info-plist-app-xcode-ios-iphone-development.jpg" /></p> <p>其中的一些信息,例如&ldquo;Main nib file base name&rdquo;,所指向的是应用在第一次打开时需要加载的资源文件。其他信息,例如&ldquo;Bundle Identifier&rdquo;,则与通过iTunes Connect向App Store提交应用时的相关环节有关。</p> <p>在这些信息中找到&ldquo;Bundle display name&rdquo;一项,将右侧的&ldquo;${PRODUCT_NAME}&rdquo;修改为你想要的名称即可。</p> <h3> 辅助编辑器(Assistand Editor)</h3> <p>到目前为止,我们的自定义按钮是可以对点击动作作出响应的,不过也仅此而已,它们还不会做任何其他事情。为了使它们能够工作起来,我们需要借助辅助编辑器的帮助来写一些代码。</p> <p>在Xcode左侧的导航栏当中选择ContactViewController.xib,然后到Xcode界面的右上角找到辅助编辑器按钮,选中它:</p> <p><img alt="assistant-editor-toggle-xcode-ios-iphone-development.jpg" src="/sites/default/files/images/201209-2/24-assistant-editor-toggle-xcode-ios-iphone-development.jpg" /></p> <p>在这种模式下,编辑界面会被分割为两部分,其中左侧是ContactViewController.xib的可视化编辑界面,右侧是与其对应的头文件,即ContactViewController.h。我们可以在下图中看到,文档结构列表和右侧边栏已经被收起了,以便为两个编辑视图提供更多的空间。你可以到Xcode菜单中的&ldquo;View&rdquo;一项中找到相关的切换操作。另外你大概也发现了,图中代码编辑区的样式风格与你的有所不同,这是因为我(英文原文作者)使用了&ldquo;Dusk&rdquo;主题;你可以在Xcode&rarr;Preferences的&ldquo;Fonts and Colors&rdquo;更改代码编辑区的主题。</p> <p><img alt="assistant-editor-in-action-xcode.jpg" src="/sites/default/files/images/201209-2/25-assistant-editor-in-action-xcode.jpg" /></p> <h4> 声明属性(Property)与方法(Method)</h4> <p>一个&ldquo;类&rdquo;通常包含特定的&ldquo;属性&rdquo;和&ldquo;方法&rdquo;。我们可以将&ldquo;属性&rdquo;理解为&ldquo;类&rdquo;所拥有的特性特征,而&ldquo;方法&rdquo;则是指&ldquo;类&rdquo;能做些什么。</p> <p>当我们向ContactViewController中添加按钮时,我们需要将这个按钮声明为ContactViewController类的属性,并通过&ldquo;方法&rdquo;告诉按钮在被点击时应该做怎样的反应。</p> <p>在ContactViewController.h文件中,我们可以看到如下代码:</p> <pre class="brush:cpp;first-line:09;"> #import &lt;UIKit/UIKit.h&gt; @interface ContactViewController : UIViewController @end</pre><p>其中,第一行代码的作用是让我们的类可以访问UIKit框架当中的各种预置的UI类。</p> <p>接下来一行(@interface)的作用是将ContactViewController声明为UIViewController的一个子类。UIViewController是在UIKit库中预先定义的,它的子类可以继承它的所有特性(包括属性和方法)。</p> <p>我们可以在@interface与@end之间声明各种自定义的属性和方法。按住control键,从ContactViewController.xib里的&ldquo;WWW&rdquo;按钮上拖出一条导线,一直拉到.h文件的代码中@interface与@end之间的部分,释放。这时会出现一个对话窗:</p> <p><img alt="outlet-dialogue.jpg" src="/sites/default/files/images/201209-2/26-outlet-dialogue.jpg" /></p> <p>确保&ldquo;Connection&rdquo;当中所选的是&ldquo;Outlet&rdquo;,并在&ldquo;Name&rdquo;里输入&ldquo;websiteButton&rdquo;,点击&ldquo;Connect&rdquo;,Xcode会自动生成一段代码。</p> <p>接下来再执行一次相同的拖放操作,这次,在对话窗中为&ldquo;Connection&rdquo;选择&ldquo;Action&rdquo;,并在&ldquo;Name&rdquo;中输入&ldquo;openWebsite&rdquo;,点击&ldquo;Connect&rdquo;,Xcode同样会自动生成一段代码。</p> <p><img alt="action-dialogue-xcode-outlet-action.jpg" src="/sites/default/files/images/201209-2/27-action-dialogue-xcode-outlet-action.jpg" /></p> <p>到目前为止ContactViewController.h中的代码看上去应该是这样的:</p> <pre class="brush:cpp;first-line:09;"> #import &lt;UIKit/UIKit.h&gt; @interface ContactViewController : UIViewController @property (retain, nonatomic) IBOutlet UIButton *websiteButton; - (IBAction) openWebsite:(id)sender; @end </pre><p>还不赖,不过这些代码都是什么意思?</p> <p>@property用来声明一个新的属性,括号中是两个参数,其中&ldquo;retain&rdquo;涉及内存管理,我们将在后文中讲到;而&ldquo;nonatomic&rdquo;则与多线程管理相关,多数的属性都要声明为nonatomic,禁用多线程。接下来是关于返回类型的声明,其中&ldquo;IBOutlet&rdquo;代表这个属性是绑定于用户界面中某个特定的控件的;&ldquo;UIButton *websiteButton&rdquo;的作用是将当前属性命名为&ldquo;websiteButton&rdquo;,并使其继承UIKit中定义的UIButton类。</p> <p>接下来一行代码用来声明新的方法。其中的&ldquo;- (IBAction)&rdquo;同样用来将方法与.xib文件中的界面控件绑定起来。&ldquo;openWebsite&rdquo;是这个方法的名称,冒号后面的&ldquo;(id)sender&rdquo;是参数,用来传递产生动作的对象信息,不过我们现在用不到它。</p> <p>也许你已经注意到了,我们在创建View Controller类的时候,名称都是以大写字母开头的,但属性和方法的名称却不是这样。这是面向对象编程语言的一种公约,即&ldquo;类的命名以大写字母开头,属性(变量)和方法(函数)的命名以小写字母开头&rdquo;。</p> <p>我们之前演示的&ldquo;拖动+自动生成代码&rdquo;的方法是很方便的。我们当然也可以自己手动编码,只是使用辅助编辑器会更加快捷一些。</p> <h4> 属性合成(Synthesis)与内存管理</h4> <p>现在,我们将编辑器切换回标准模式(Standard Editor),弹击选中ContactViewController.m,在大约12行的地方,你可以看到系统帮我们自动生成的代码:</p> <pre class="brush:cpp;first-line:12;"> @synthesize websiteButton;</pre><p>这会告诉编译器在构建应用的时候为属性生成设置器(setter)与访问器(getter),我们不需要手动编写代码就可以使程序具有访问和设置属性值的能力。</p> <p>再下面,找到这两行代码:</p> <pre class="brush:cpp;first-line:58;"> - (IBAction)openWebsite:(id)sender { }</pre><p>觉得眼熟?之前在ContactViewController.h当中,系统确实自动生成了类似的代码,不过在.h文件中的代码只是一种&ldquo;声明&rdquo;,真正编写方法函数还是要在.m文件中进行。具体来说,我们需要将按钮的反映行为编写到这里。</p> <p>你还可以在.m文件中找到类似下面这样的代码:</p> <pre class="brush:cpp;first-line:53;"> - (void) dealloc { [websiteButton release]; [super dealloc]; }</pre><p>这段代码与内存管理有关。内存管理对于移动应用编程来说是非常重要的,因为移动设备在内存方面的资源确实很有限。当websiteButton属性被定义时,通过&ldquo;retain&rdquo;参数,系统会将一部分内存分配给这个属性。&ldquo;retain&rdquo;的具体作用是告诉系统分配出一定的内存,并且在我们进一步下达命令之前不要将这部分内存收回。</p> <p>而&ldquo;dealloc&rdquo;方法只会在当前View的实例被销毁时执行,所以在这个方法中添加&ldquo;websiteButton release&rdquo;就相当于告诉系统:&ldquo;你可以在这里收回这部分内存资源了,我们不再需要它了&rdquo;。如果没有这行代码,那么即使界面已经切换、websiteButton不再存在,这部分内存依然在被占用;这种情况就叫做&ldquo;内存泄漏(memory leak)&rdquo;。如果在开发过程中不做相关处理,那么这种情况就会逐渐累加起来,导致程序运行效率低下甚至崩溃,或是造成系统电量损耗等其他不良后果。</p> <p>幸运的是,对应着iOS 5以上版本的SDK当中增加了ARC机制(Automatic Reference Counting),它可以帮助我们进行自动化的内存管理。在创建新项目的时候,你可以选择是否启用ARC。在当前案例中,我们并没有用到它,因为我们要在这里对相关知识进行简要的介绍。</p> <h4> 代码绑定</h4> <p>之前使用辅助编辑器为按钮自动创建属性和方法的时候,系统不仅帮我们生成了相关的代码,而且还对按钮控件与相关代码进行了绑定。</p> <p>选择ContactViewController.xib,展开文档结构列表,在&ldquo;Placeholders&rdquo;下,选择&ldquo;File&#39;s Owner&rdquo;,它所代表的就是整个ContactViewController类。现在到Xcode右侧,打开连接检查器(Connections inspector),看上去应该是这样的:</p> <p><img alt="connections-inspector-xcode-ios-development-interface-builder.jpg" src="/sites/default/files/images/201209-2/28-connections-inspector-xcode-ios-development-interface-builder.jpg" /></p> <p>在&ldquo;Outlets&rdquo;当中,我们可以看到,websiteButton属性已经被关联到了.xib文件的按钮控件上。</p> <p>而在&ldquo;Received Actions&rdquo;里,openWebsite方法也已经与该按钮的&ldquo;Touch Up Inside&rdquo;事件建立了关联。这个事件所代表的就是用户在界面中轻触按钮并抬起手指的整个动作,它是按钮控件的默认事件。</p> <h3> 手动编写Objective-C代码</h3> <p>接下来我们要告诉按钮在被点击之后应该做些什么。</p> <p>在ContactViewController.m中,将定义openWebsite方法的代码更新为:</p> <pre class="brush:cpp;first-line:58;"> - (IBAction)openWebsite:(id)sender { NSURL *webAddress = [NSURL URLWithString:@&quot;http:www.apple.com&quot;]; [[UIApplication sharedApplication] openURL:webAddress]; }</pre><p>在这段代码中,我们做了两件事。</p> <p>首先,我们在第59行的代码中创建了一个临时变量&ldquo;webAddress&rdquo;,用来存储一段包含特定URL(http:&#39;&#39;<a href="http://www.apple.com&quot;">www.apple.com&quot;</a>)的字符串。这里的写法是一种比较快捷的方式,系统可以自动为NSURL实例分配内存,也会在需要的时候自动释放。</p> <p>而后面的代码则告诉系统可以使用相关的应用(例如Safari)来打开这个链接。</p> <p>对于Contact界面中的其他按钮,我们也可以通过类似的步骤来设定响应规则。将上面代码中的&ldquo;openURL:&rdquo;替换为&ldquo;mailto:&rdquo;,可以使应用触发默认邮件客户端执行相关的邮件工作,而&ldquo;tel:&rdquo;则可调出系统的拨号键盘界面,直接拨打预设好的电话号码。</p> <h3> 使界面以模态的方式呈现</h3> <p>当前的Portfolio界面中有一些作品的缩略图,我们希望用户在点击它们的时候,对应的大图可以弹出。</p> <p>要实现这一点,我们可以创造模态视图,使新界面以动画过渡的方式呈现出来,并覆盖在其他界面之上。</p> <h4> 创建模态视图</h4> <p>要创建模态视图并不难。首先,我们要创建一个新的类,名字叫做BigImageViewController,具体方式与我们之前创建3个自定义类是相同的。</p> <p>然后打开BigImageViewController.xib文件,向界面中添加一个Image View作为图片容器,并将它的&ldquo;Image&rdquo;设置为portfolio-modal-bg.png图片文件。接下来,在左上角添加一个类型为&ldquo;Custom&rdquo;的圆角按钮控件,使用button-close.png作为其背景,并将字色设置为白色,文案为&ldquo;Close&rdquo;。</p> <p>然后在现有界面基础上再添加一个Image View,大致尺寸和位置如下图所示:</p> <p><img alt="creating-modal-view-xcode-interface-builder.jpg" src="/sites/default/files/images/201209-2/29-creating-modal-view-xcode-interface-builder.jpg" /></p> <p>切换至辅助编辑器模式,在新添加的空白Image View上执行Control+拖拽,并指向BigImageViewController.h代码当中@interface与@end之间的部分,以此方法分别建立名为&ldquo;imageFrame&rdquo;的Outlet,以及名为&ldquo;closeView&rdquo;的Action。系统将在.h文件中自动添加如下代码:</p> <pre class="brush:css;first-line:13;"> @property (retain, nonatomic) IBOutlet UIImageView *imageFrame; - (IBAction)closeView:(id)sender;</pre><p>而具体的closeView代码还需要我们手动添加到.m文件当中:</p> <pre class="brush:cpp;first-line:57;"> - (IBAction)closeView:(id)sender { [self dismissModalViewControllerAnimated:YES]; }</pre><p>这段代码的作用是关闭当前已经激活的模态视图界面。</p> <h4> 加载模态界面的代码</h4> <p>回到标准编辑器模式,打开PortfolioViewController.h文件,将代码手动更新为:</p> <pre class="brush:cpp;first-line:9;"> #import &lt;UIKit/UIKit.h&gt; #import &quot;BigImageViewController.h&quot; @interface PortfolioViewController : UIViewController @property (nonatomic, retain) UIImage *bigImage; - (IBAction) selectImage1; - (void) openBigImageView; @end</pre><p>我们新写了一行#import代码,用来将之前新建的BigImageViewController类引入到PortfolioViewController当中,这样我们就可以在Portfolio界面中与之通讯,在需要的时候告诉BigImageViewController为自己创建一个实例。</p> <p>我们还为PortfolioViewController创建了一个属性和两个方法,其中第二个方法openBigImage并不需要与.xib文件中的任何控件建立关联,所以它的返回类型是&ldquo;void&rdquo;,而非&ldquo;IBAction&rdquo;。</p> <p>你也许会觉得奇怪,为什么在这里创建属性和方法的时候,我们没有使用副主编辑模式,通过拖拽方法来实现。其实结果是相同的,只是我们在这里刻意使用手动编码的方式来练习一下。所以接下来,我们还要到.m文件中手动输入那些与&ldquo;属性合成&rdquo;以及内存释放相关的代码:</p> <pre class="brush:cpp;first-line:11;"> @implementation PortfolioViewController @synthesize bigImage; - (void) dealloc { [bigImage release]; [super dealloc]; }</pre><p>在dealloc函数的后面,我们要为两个新建的方法编写具体的代码:</p> <pre class="brush:cpp;first-line:20;"> - (IBAction) selectImage1 { self.bigImage = [UIImage imageNamed: @&quot;image1-big.png&quot;]; [self openBigImageView]; } - (void) openBigImageView { BigImageViewController *bigImageView = [[[BigImageViewController alloc] initWithNibName:@&quot;BigImageViewController&quot; bundle:nil] autorelease]; bigImageView.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal; [self presentModalViewController:bigImageView animated:YES]; [bigImageView.imageFrame setImage:bigImage]; }</pre><p>这次还真是输入了不少东西,我们来看看这些代码的作用是什么。</p> <p>selectImage1方法为bigImage属性指定了具体的图片,即image1-big.png文件。同时该方法还调用执行了openBigImageView方法。</p> <p>在openBigImageView中,我们首先创建了一个BigImageViewController类的实例,并将其命名为&ldquo;bigImageView&rdquo;。这个实例自身就是一个模态界面,它会以&ldquo;翻转(flip)&rdquo;的动画效果出现,并将bigImage作为具体的图片放到其imageFrame容器当中。</p> <p>因为我们通过代码手动为BigImageViewController的实例分配了内存,所以我们还要在适当的时候将这部分内存释放。问题在于,我们并不知道这些资源会被使用多久,因为大图模态界面会打开多长时间是取决于用户的。要解决这个问题,我们需要使用autorelease命令,它会告诉iOS系统一直保持内存资源的分配状况,直到确认&ldquo;安全&rdquo;的时候再进行释放。</p> <h4> 模态视图的代码绑定</h4> <p>现在我们需要将代码绑定到XIB当中的控件上。选择PortfolioViewController.xib文件,点击文档结构列表当中的&ldquo;File&#39;s Owner&rdquo;,然后打开右侧的连接检查器(Connections inspector)。</p> <p>在&ldquo;Received Action&rdquo;中,我们可以看到之前编写的selectImage1方法,它的右侧是一个圆环。点击这个圆环并进行拖拽,一直拖到界面当中的第一个缩略图上面释放,如下图所示:</p> <p><img alt="binding-button.jpg" src="/sites/default/files/images/201209-2/30-binding-button.jpg" /></p> <p>在弹出的列表当中选择&ldquo;Touch Up Inside&rdquo;事件。</p> <p>试着运行一下我们的应用叭,如果之前的工作没有出现问题的话,现在我们应该可以在Portfolio界面中点击第一个缩略图并查看相应的大图了。</p> <p>接下来,你可以自己试着对另外三个缩略图进行处理了。你需要创建selectImage2,selectImage3,selectImage4这三个新的方法,不过对于openBigImage方法来说就不需要重复创建了,它是可以被共用的。另外你也可以尝试为模态界面使用不同的动画过渡效果,包括</p> <ul class="ul1"> <li class="li1"> UIModalTransitionStyleCoverVertical</li> <li class="li1"> UIModalTransitionStyleCrossDissolve</li> <li class="li1"> UIModalTransitionStyleFlipHorizontal</li> <li class="li1"> UIModalTransitionStylePartialCurl</li> </ul> <p>如果你在这个过程中遇到麻烦,也可以打开模板包,在End Result路径中找到最终完成版的文件进行参考。</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> <h3> 总结</h3> <p>本文确实涵盖了不少方面的内容,从Xcode的界面介绍、基本操作,到在Interface Builder中创建界面,以及实际代码的编写。我们通过一个简单而具有代表性的案例了解了iOS应用开发当中的一些关键概念,包括类、属性、方法、内存管理等。</p> <p>本文只是引领你入门的一个小小的起点。在此基础上,你可以通过更多的资源进一步深入学习iOS开发的相关知识与技能了。好运叭!</p> </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><li class="front-end taxonomy-term-reference-1"><a href="/front-end" 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/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/120" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Objective-C</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel">框架</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/121" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS开发</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/122" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Xcode</a></li></ul> Mon, 01 Oct 2012 08:36:52 +0000 C7210 120 at http://www.beforweb.com http://www.beforweb.com/node/120#comments iOS Wow体验 - 第五章 - 利用iOS技术特性打造最佳体验 http://www.beforweb.com/node/81 <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-ios-iphone-ipad-wow-factor-app-ux-design-techniques-3-b.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"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第五章译文精选,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/80">Wow体验 - 第四章 - 为应用的上下文环境而设计</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>iOS是设计师们得以施展技能的绝佳舞台。同时,苹果也向开发者们提供了一系列专业化的技术方法,帮助他们从容应对各种复杂的设计方案所带来的挑战。</p> <p>伴随着技术的革新与发展,越来越多的交互体验模式正在孕育而生。设计师的创作思路得以扩展,技术开发人员也拥有了更多高效的方法和工具来准确的实现设计方案。设计与开发之间的障碍正在被各种新技术不断的突破,项目中一些职能角色的性质也在发生着变化,越来越多的设计师超越了相对传统的专职领域,开始直接进行开发方面的工作<a class="eLink" href="http://beforweb.com">。</a></p> <p>对于团队来说,那些同时掌握着设计与开发技能的人员是非常有价值的。我们所说的这种&ldquo;掌握&rdquo;不单单是指对于技术概念或术语有基本程度的了解,更重要的是,设计师需要对开发技术在各方面的特性及优缺点做到心中有数,并能针对这些特性来创造最合理的设计方案。</p> <!--break--><p>当然,要设计人员或团队完全精通某种开发技能,并且在相关平台中有过大量实战经验,这是不现实的,也没有必要。不过,如果设计师曾经切身实践过开发方面的工作,或是参加过相关的内部培训,那么这些经历通常可以有效地帮助他们打造出更具可行性的设计方案。另外一方面,不妨向更加专业的技术人员进行请教,让他们帮忙找出那些有可能对设计方案的实现与还原造成影响的潜在因素。</p> <p>接下来,我们将一同了解一些在iOS当中负责实现各种视觉交互表现形式的核心技术,并对它们各自的功能进行分析。这些技术知识会帮助你对设计方案的可行性及相关的开发方式做到心中有数。</p> <p>除此之外,我们还将了解一些其他方面的话题,包括界面外观的自定义、通用型应用、原生应用与Web应用的差异等。</p> <h3 id="a1"> 关键性的图形技术</h3> <p>作为设计人员,你需要对四种关键性的图形技术有所了解。它们可以被分为两大类,第一类是用于支持iOS本地渲染的苹果专有技术,而第二类涉及到OpenGL,这种第三方技术可以有效地利用硬件加速功能渲染复杂的图形。怎样从设计的角度来理解这些概念呢?简单的说,第一类技术用于打造用户界面及相关交互元素的视觉表现形式,而与OpenGL相关的第二类技术的主要作用,则是在游戏或类似的上下文环境中对各种极端复杂的图形和动画效果进行即时渲染。</p> <p>需要注意的一点是,这些技术虽然各司其职,但并非只能专门用作各自的上下文领域。通过对这些技术的作用加以理解,你就可以对设计方案的实现方式做到心知肚明。特别是当你正在尝试一些独特的交互形式的时候,对于相关实现技术的了解就显得尤为重要了。</p> <h4 id="a2"> UIKit</h4> <p>UIkit是用来打造iOS应用的最重要的图形技术框架,它提供了用于构造触屏设备用户界面的全部工具和资源,并在整个交互体验的塑造过程中扮演着至关重要的角色。</p> <p>设计方案中的绝大部分内容都需要通过UIKit来实现,因为用户在iOS中所接触到的任何一种用户界面控件都由它来负责定义和输出,包括基本的按钮、滑块、文本域、切换开关等。除了这些标准控件之外,UIKit还提供了很多方法来帮助我们对控件的外观进行自定义。所以在界面元素的视觉表现形式上,我们不必受制于各种控件的默认样式。外观自定义工作还会涉及到我们将要在后文中了解到的其他图形技术,但是相关的解决方案都是由UIKit在整体上控制的。</p> <p>除了能够使用你所指定的图形文件(例如PNG图片)对界面控件的外观进行自定义之外,UIKit还能够程序化的渲染图形对象,换句话说,它可以按照我们设定好的规则来绘制图形。UIKit在这方面的能力与一些常见的矢量图形绘制技术很相似。在类似的方法中,我们通常需要定义最基础的几何图形或路径,然后为这些路径赋予具体的视觉属性,以实现设计中的目标样式。不过有一点需要提醒一下:这种程序化的绘图方式确实可以对生产效率起到一定的提升作用,然而另外一方面,你却需要花费更多的时间与精力去跟进到接下来开发流程当中,以确保技术人员所定义的图形属性可以精确的还原你的设计方案。在实际项目中,最好能够在开发流程之前与相关的技术人员一同对设计方案中的每一个细节进行充分的评估,确定一套最合理的图形技术方案。</p> <p><a href="/sites/default/files/images/201205/uikit_classes.jpg" rel="lightbox"><img alt="uikit_classes" src="/sites/default/files/images/201205/uikit_classes.jpg" style="width: 300px; height: 352px;" /></a></p> <h4 id="a3"> 核心图形 (Core Graphics)</h4> <p>核心图形是用来实现用户界面视觉设计方案的重要技术框架。这套框架的核心是名为Quartz 2D的二维图形渲染引擎,它不仅可以动态地渲染很多不同种类的图形,而且还可以使应用具有创建和编辑图像的能力。</p> <p>你可以将核心图形理解成一种能够帮助你扩展产品功能的技术框架。相比于UIKit,它更擅长于处理那些较为复杂的图形;不过在必要的时候,也可以用来对普通用户界面元素进行渲染。相比之下,UIKit在界面外观自定义方面的支持能力更强。所以,只有当设计方案涉及到相对复杂的图形变换、队列处理和即时合成等方面的需求时,核心图形技术框架才能真正体现出它的优势与价值。</p> <h4 id="a4"> 核心动画(Core Animation)</h4> <p>核心动画向开发者们提供了一套用于创建和渲染动态交互效果的简单易行的解决方案。换句话说,这项技术可以让你的设计方案真正动起来。通过与UIKit的紧密配合,核心动画可以将界面交互对象与动画过渡效果进行完美地整合。</p> <p>作为一种强大的技术工具,核心动画的能力范围是非常广泛的,它能使开发者在很多不同的层面上创建并控制交互对象的动画属性,而这对于设计师来说,则意味着能够实现的独特而高度定制化的动画效果的可能性几乎是无限的。</p> <h4 id="a5"> OpenGL ES</h4> <p>OpenGL ES与前面几项技术有所不同,它并非苹果所创造并独有的。OpenGL ES是面向嵌入式设备的OpenGL 3D图形应用程序接口(API),它必须与核心动画协同配合,完成2D或3D图形内容的渲染输出。</p> <p>OpenGL ES可以通过硬件加速功能来渲染那些极端复杂的图形,所以这项技术通常被用来在游戏当中绘制那些需要进行即时渲染的3D图形。不过它的能力不限于此,通过与我们在前面了解到的那些技术的整合,它同样可以被用来渲染普通的元素,甚至还能以全3D的方式打造整个应用的界面环境。</p> <p>是否有必要在应用的开发中使用这项技术,最终还是取决于设计方案所要求的视觉表现形式。对于那些没有必要通过硬件加速功能来即时快速渲染的2D或3D图形,其他技术同样可以胜任。不过,如果你希望借助强大而复杂的技术工具对那些具有实验性质的视觉交互形式进行探索和挖掘,那么OpenGL ES的强大能力将不会让你失望。</p> <p><img alt="logo-opengl-es" src="/sites/default/files/images/201205/logo-opengl-es.png" style="width: 300px; height: 115px;" /></p> <div class="embed"><article id="node-308" class="node node-related-books" about="/node/308" 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-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS 6应用开发入门经典(第4版)" src="http://beforweb.com/sites/default/files/images/products/54.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS 6应用开发入门经典(第4版)</a></h4> <p><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书循序渐进地介绍了从事iOS开发所需的基本知识,包括使用Xcode、Objective-C和Cocoa Touch等开发工具,设计及美化用户界面,利用多场景故事板、切换、弹出框、导航控制器和选项卡栏控制器...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a6"> 界面外观的自定义</h3> <p>究竟有没有必要对应用的界面外观进行自定义?在打造设计方案的时候,我们通常会在这个问题上产生纠结。特别是在苹果刚刚推出应用商店的时候,这个问题显得尤其普遍与突出。为了能够尽快地将应用发布出去,以占领市场先机,产品决策者们宁愿放弃掉很多至关重要的设计流程,以达到压缩产品开发进度的目的。如今,从整个应用市场的角度来说,这种局面有所改善,人们再也不能忽视设计的重要性了,但是对于一些刚刚试水iOS应用的团队来说,类似的问题依然存在。</p> <p>很多公司和产品团队总是无法意识到高度定制化的界面外观对于一款应用产品的重要价值。其实道理很简单,如果只使用SDK(开发工具包)提供的默认控件来构筑用户界面,你的应用就会完全处于iOS原生的视觉识别体系当中,在用户体验方面也无法超越苹果制定的范围框架。虽然从本质上讲,这并不是一件坏事,但这种方式显然无法将具有品牌特色的用户体验效应整合到产品当中;无论是视觉表现形式还是交互方式,都难以满足用户对于差异化的渴望。</p> <p>抛开产品策略方面的因素,界面外观的自定义工作在技术层面不存在任何障碍。正如我们在前文中看到的,苹果在这方面有针对性的为开发者们提供了很多强大的图形技术。从某种程度上说,这项工作本应该成为整个设计开发流程中的一个重要且必要的组成部分。</p> <p><img alt="ios-iphone-UI-Appearance-Customization" src="/sites/default/files/images/201205/ios-iphone-UI-Appearance-Customization.jpg" style="width: 250px; height: 236px;" /></p> <p>有一点需要说明的是,界面外观自定义的设计原则并非是泾渭分明的,实际上你确实不需要对所有的界面组成要素都进行定制化的处理,在很多情况下,使用SDK提供的原生控件反而更加合理。作为设计师,你要做的就是处理好原生控件与自定义样式之间的关系,将它们协调的整合在一起,确保用户不会对这两类元素产生彼此孤立与分化的感知。</p> <p>除了使用新的图形样式对各种常规界面元素的外观进行自定义之外,你还可以创造出全新类型的的界面交互对象,并为它们赋予独特的交互方式。不过,对于这种明显超出了&ldquo;换肤&rdquo;范畴的做法,苹果在用户界面设计规范当中所体现出的态度并不是具有鼓励性的,因为全新类型的交互对象会对用户的认知造成很大的障碍。作为规范,持有相对谨慎的态度是合乎情理的,不过这种具有极高创新性质的做法究竟能否成功,在很大程度上还取决于设计方案本身。过于隐晦的表现形式必然会使用户产生迷惑与挫败的感觉,无论它看上去有多酷;而简单直白、易于理解的方案则具有相当高的可行性。</p> <div class="embed"><article id="node-265" class="node node-related-books" about="/node/265" 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/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone用户界面设计典型实例" src="http://beforweb.com/sites/default/files/images/products/09.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone用户界面设计典型实例</a></h4> <p><a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书通过10名在Apple Store中名列前茅的应用设计师和开发者的现身说法,为我们揭开了应用设计开发的神秘面纱。从本书中,读者不仅能学习到设计过程中的许多经验,更重要的是能够对应用成功的关键因素有全新的理解&mdash;&mdash;其最终取决于创意、人性化的界面带来的用户体验...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a7"> 通用型应用</h3> <p>在过去的几年中,iOS设备种类及规格的扩大发展为应用设计师与开发者带来了不少挑战。从前,我们只需要为一种设备规格打造设计方案;随着iPad的到来,事情开始变得复杂起来,我们必须针对新设备的特性考虑另外一个版本的设计方案。而开发团队也面临着同样的问题,他们必须同时开发和维护两个版本的应用,工作量几乎翻倍。</p> <p>不久之前,通用型应用的概念出现在了应用商店当中,这种应用可以运行在任何类型的iOS设备当中。它会自动判断当前的设备环境,并在用户体验形式上作出相应的调整,例如可以通过不同的方式对用户界面进行渲染,在功能方面也会根据当前平台的具体情况发生相应的改变。</p> <p>对技术开发人员来说,通用型应用是个好消息,它可以避免不同版本所带来的重复性工作,极大地提高开发流程的生产效率。不过站在设计师的角度,你仍然需要准确的把握不同设备在用户行为及体验模式上的差异,确保设计方案可以适用于它们各自的系统平台。而这种方式带来的进步也是显而易见的。在必须针对不同设备打造两个独立版本的情况下,你需要对已有的一套设计方案进行改造,在界面元素和交互形式等方面进行全方位的调整,以适应新的设备平台,这必然会导致两个版本的应用在界面外观和操作方式等方面存在显著的差异;而对于通用型应用,你可以在设计过程中预先考虑到两种设备的不同特性,并且能够在同一套设计方案中针对这些差异来定义局部样式或功能的响应式调整规则,从最大程度上确保用户体验的一致性。很多同时拥有两款设备的用户会在不同的需求情景中使用不同的设备来操作同一款应用,在这种情况下,具有高度一致性的界面外观及交互方式就显得尤为重要了。</p> <p><img alt="" src="/sites/default/files/images/201205/ios-iphone-ipad-universal-apps-s.png" style="width: 400px; height: 202px;" /></p> <h3 id="a8"> 原生应用与Web应用</h3> <p>如今,关于是否真正有必要开发iOS原生应用的问题,行业中还存在一些争论。在当前复杂纷乱的移动市场中,除非你有足够的资源,否则为每一种设备平台都单独打造一套原生应用确实是不大现实的。在很多情况下,移动版本的网站或是Web应用都可以很好的满足需求。不过,在你着手于Web方向的解决方案之前,有一些重要的问题必须事先了解清楚。</p> <p>在用户体验方面,Web应用与原生应用之间的差距还是很明显的。如今,有很多<a href="http://beforweb.com/node/22">前端开发技术框架</a>可以帮助我们打造基于浏览器运行的Web应用。这些应用无论在界面外观还是交互方式上都与原生应用非常相似。然而,在实际的移动设备上下文环境中,它们仍然无法与原生的方式相提并论。正像我们在前文中了解到的,苹果为开发者们提供了很多强大的图形技术工具,作为设计师,我们不仅可以在设计方案中打造高度定制化的界面外观及交互效果,更重要的是,这些视觉表现形式都是在系统级别甚至硬件级别的功的支持下高性能的展现出来的。相比之下,基于浏览器运行的Web应用解决方案通常只能提供数量非常有限的交互效果,而且在性能方面更是无法与原生应用相比。所以,如果你正在考虑使用Web应用的方式来打造产品,至少要确保你的设计方案当中不会涉及到过多的视觉交互效果。</p> <p>其实,对于这两类应用,我们并不需要争论出一个非此即彼的结果,因为iOS允许这两种形式在同一款应用中兼容并包的存在,一款原生应用当中完全可以同时包括本地化的界面控件与基于Web的页面元素。这种混合型应用可以将两者的优势淋漓尽致地发挥出来,使其自身即能拥有原生应用高性能的表现力以及对硬件功能的访问能力,同时又具备Web应用的动态性与灵活性,并且更加易于维护。</p> <p>最终,对于解决方案的选择仍然取决于产品自身的功能及用户体验需求。任何关于产品实现方式的讨论都必须从这个角度出发<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" 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-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a9"> 总结</h3> <p>苹果为开发者们提供了四种用于渲染界面对象和视觉交互效果的关键性图形技术:</p> <ul> <li> <strong>UIKit</strong>:用于绘制界面元素的最重要的图形技术框架,在整个交互体验的塑造过程中扮演着至关重要的角色。</li> <li> <strong>核心图形(Core Graphics)</strong>:二维图形渲染引擎, 可以动态地渲染很多不同种类的图形,并能使应用具有创建和编辑图像的能力。在必要的时候,也可以用来对普通用户界面元素进行渲染。</li> <li> <strong>核心动画(Core Animation)</strong>:可以在UIKit的配合下,为用户界面中的交互对象创建动态的视觉效果。</li> <li> <strong>OpenGL ES</strong>:面向嵌入式设备的OpenGL 3D图形应用程序接口(API),可以通过硬件加速功能来渲染具有高性能表现的2D或3D图像。</li> </ul> <p>以这些图形技术为后盾,我们可以在设计中大胆地尝试高度定制化的用户界面外观与独特的交互表现形式,甚至可以对交互对象的视觉行为属性进行实验性的探索。</p> <p>通用型应用的概念可以帮助我们有效的降低开发与维护成本,将iPhone与iPad两种版本的产品需求整合到同一款应用当中。不过,作为设计师,你仍然需要准确的把握两款设备在用户行为及体验模式上的差异,确保设计方案可以适用于它们各自的系统平台。这种方式所带来的进步是,你可以在设计过程中预先考虑到两种设备的不同特性,并在同一套设计方案中针对这些差异来定义局部样式或功能的响应式调整规则,从最大程度上确保用户体验的一致性。</p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" 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用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了如何突破基础、打破常规,从而提供“超赞”的用户体验。通过学习,读者将会学到如何使用标准控件,如何创建非标准控件和具备较高影响力的用户交互,以实现真正夺人眼球的应用设计...</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="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" 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><li class=" taxonomy-term-reference-1"><a href="/point" 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/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/98" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UIKit</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/99" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Core Graphics</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/100" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Core Animation</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/101" typeof="skos:Concept" property="rdfs:label skos:prefLabel">OpenGL ES</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 12 May 2012 14:43:56 +0000 C7210 81 at http://www.beforweb.com http://www.beforweb.com/node/81#comments 新年展望 - 2012年移动应用发展的五个趋势 http://www.beforweb.com/node/42 <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-mobile-application-2012-market-ios-android-l.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>这还没眨眼呢,春节假期就只剩下最后一天了,接受不能。整个七天几乎完全宅在家里,做书,做博客,偶尔玩玩现代战争3和Rage;话说后者推出之后被喷的是真够可以的了,但在我心里,John Carmack和id Software的产品依然是最具质感的。赶紧打住,这方面太容易扯远了。我们来看今次的译文。主题关键词:移动应用、货币化、安全性、HTML5、目标定位、个性化。</p> <p>每一天,世界各地的消费者会使用笔记本、平板电脑、电子阅读器、智能电视和手机等设备下载数以百万计的应用。时下的开发者们大多处于着一种相似的状态:他们清楚在不同的情况下,究竟应该为不同的系统分别打造本地应用,还是开发跨平台性更强的基于HTML5的Web应用;他们也知道通过怎样的渠道去发布自己的产品;而当前最大的挑战,似乎就是怎样保持对不断变化的市场需求的跟进。</p> <p>面对这样的挑战,让头脑与目光保持一定的前瞻性是很重要的。要想使自己的产品在占有率及收入等方面取得持续性的成功,产品设计与开发的策略必须符合移动应用的未来发展趋势。</p> <p>在过去的几年中,各地的应用开发者与发布商都看到了一个对科技产品消费市场产生了极大影响作用的行业发展趋势:消费者的自主权与决策权的与日俱增。消费者有权对一款应用发表正面或负面的评价,他们可以通过自己喜欢的渠道获取应用产品。Android用户可以在任何一个他们喜欢的应用发布平台中下载产品或浏览内容,这些平台包括Android市场、移动网络提供商自己的应用商店,或是<a href="http://getjar.com">getjar.com</a>这样的地方;即使苹果设备的用户,也可以在App Store所提供的本地应用与各服务商提供的Web应用之间进行选择<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p>那么,就让我们在新年伊始共同展望未来,看看在2012年里,移动应用的设计师、开发者与发布商们在这样一个消费者导向型的市场环境中,应该对行业中的哪些发展趋势保持认知与关注,才能确保自己的应用产品是真正符合用户需求的,并且能给自己带来一定的收益回报。</p> <h3> 1.移动应用的货币化</h3> <p>所谓货币化,是指应用在进驻用户的设备之后持续创造生产收益的能力。应用开发者和发布商们已经充分理解了各个应用发布平台的相关规则与条款,接下来,应用的货币化必然会成为他们所关注的一个焦点。这不是没有道理的:如今,65%的&ldquo;免费&rdquo;游戏都会通过应用内支付机制(in-app purchase)获取收益;其总量占据整个苹果应用收益总和的72%。可以预计,在接下来的一年中,这类应用的开发者和发布商们将会以更高的姿态在整个市场中起到不小的支配作用。</p> <p>怎样有效的将应用货币化呢?简单的说,我们首先需要判断当前用户群的客户终身价值,然后通过一系列方法使该价值得到持续的提升;这些方法包括&ldquo;应用内&rdquo;的普通广告、产品体验广告、来自相同发布商的其他应用信息、相关增值产品与服务等。下图所示的就是在应用中推销另一款产品的典型案例。</p> <p><img alt="iphone-ios-app-sparkle-free-purchase" src="/sites/default/files/images/201201/iphone-ios-app-sparkle-free-purchase.jpg" style="width: 320px; height: 480px;" /></p> <h3> 2.安全性</h3> <p>最近一段时间,频繁曝光的互联网及相关产品的安全问题让消费者在这方面的忧患意识大幅度提升。很多iPhone用户不再希望越狱,因为他们相信类似这样的软硬件改动会对他们的设备安全性造成威胁。他们认为单点登录(single sign-on)和社会化登录(social sign-on)可以带来更高的安全性。总而言之,用户希望他们的在线体验能够得到最高程度的安全保障。</p> <p>在这种情况下,开发者和发布商们有责任将他们的产品打造的更加安全可信,并且对那些恶意软件的威胁有足够的抵御能力。特别是对于涉及到信用卡、银行账户、个人识别信息等方面业务的应用来说,安全因素将更为敏感。下大力气提升产品的安全性,所换来的将是用户的充分信任与肯定。</p> <h3> 3.目标市场定位与个性化服务</h3> <p>如今的应用设计师、开发者和发布商们,对于用户的认知都越来越清晰。接下来的一年中,在目标市场定位和用户体验个性化服务等方面,势必会出现一些行业领军力量。根据目标用户群的需求与行为特征,将特定的应用投放在特定的发布推广平台,这种方式将成为重要的趋势。</p> <p>这不是什么新思路新手段,搜索引擎广告市场中的类似做法早已被大家司空见惯了。例如,你本来打算在Google投放广告,因为与你产品相关的关键词在他家的搜索结果中表现不错;但在实际中,你的目标用户也许要相对小众一些,他们通常使用其他家的搜索引擎。那么在这种情况下,你显然应该将广告投放在这些用户更加偏爱的地方。</p> <p>对于应用发布平台来说也是同样的道理。我们要判断出哪些平台可以帮我们带来最高的收益回报,或是可以针对某个特定类型的用户群产生最持久的客户终身价值,然后进行精准的投放与发布。</p> <p>另外一个相关的趋势,或是说机遇,就是个性化的内容与服务。HTML5正在日渐火爆,与之相关的混合型应用的发展也在不断成熟(关于混合型应用的更多信息,可以参考我们之前的文章&ldquo;<a href="http://beforweb.com/node/14">从网站到移动客户端应用 - 随机应变的用户体验设计</a>&rdquo;),通过这类技术方案,我们可以有效的增强应用内容的动态性与可定制性,进而满足用户越发显著的对于个性化内容及服务体验的需求。</p> <h3> 4.HTML5</h3> <p>也许有些人会对这项技术持有怀疑的论调,认为它只是一时的流行与火爆。但应用开发者和发行商们却应该对它保持一定程度的关注,毕竟,这项技术有可能帮你把那30%的收入节省下来(否则需要上供到App Store)。</p> <p>苹果的生态圈是封闭的,它不允许任何应用绕过App Store的环节而直接进入相关的iOS设备,除非你越狱了。对于收费应用,苹果会从每一笔交易中抽取30%,包括应用内支付、订阅付费等。而对于HTML5打造的Web应用,用户可以直接通过浏览器访问,并下载到本地。虽说这种方式的本质其实就是将一个网页保存为书签,但市面上已经有越来越多的技术手段可以帮助开发者们将Web应用打造得更像是本地应用(可以参考我们之前的文章&ldquo;<a href="http://beforweb.com/node/22">前端开发者的跨平台移动应用开发策略及工具</a>&rdquo;);而用户保存到本地的&ldquo;书签&rdquo;图标,从形式上来说也和普通本地应用的图标没有任何区别。</p> <p>不过这种方式所面临的挑战也不小,比如,绕过App Store的做法虽然可以变相的提高收益,但同时也失去了这样一个平台所提供的展示机会,你必须付出额外的成本去推广自己的产品。不过,也许接下来的市场中会出现可以让用户瞩目的Web应用商店或类似的平台,以专门推广这类应用产品。</p> <h3> 5.应用内的统计分析</h3> <p>移动应用市场中,同类产品之间的竞争正在变得越发激烈,而同时,用户的自主权也在与日俱增。在这种情况下,怎样保持自己产品的吸引力,怎样构建产品与用户的长久关系,这些都是设计师和开发者们在接下来的日子里所要面对的巨大挑战。统计分析,可以使用户与应用产生更密切的关系,提升产品的客户终身价值。</p> <p>道理何在呢?正如我们在前文中提到的,越来越多的开发者与发布商会在接下来的日子里将注意力放在应用的货币化、目标市场定位与个性化服务等方面,而应用内的统计分析,则是能够将这些方面的努力转化为持续稳定的收入的重要因素。众所周知,相关的统计分析工具已经成为互联网行业中的标配,而在移动应用领域,开发者和发布商们同样需要类似的工具来获得各方面的数据;尤其对于那些能够反映出产品用户体验表现及用户行为的各种数据来说,应用内的统计分析是最直接、深入和全面的方式。</p> <p>下图展示了一个具有综合性的实例:应用内的统计分析机制根据用户的浏览行为,判断出他当前所浏览的唱片中包含了&ldquo;婚礼&rdquo;方面的内容,于是在下面的应用内广告中个性化的向其推荐了婚礼DJ方面的服务<a class="eLink" href="http://beforweb.com">。</a></p> <p><a href="/sites/default/files/images/201201/mobile-trends-2012-iphone-ios-app-thumb-in-app-analyse.jpg"><img alt="mobile-trends-2012-iphone-ios-app-thumb-in-app-analyse" src="/sites/default/files/images/201201/mobile-trends-2012-iphone-ios-app-thumb-in-app-analyse.jpg" style="width: 500px; height: 749px;" /></a></p> <p>无论怎样分析与预测,移动领域中的趋势依然是难以准确把握的;放下远的不说,即使对于很多已经摆在眼前的&ldquo;新&rdquo;需求,要保持跟进的步伐也不是一件很容易的事。不过,最重要的是一点就是在头脑中时刻牢记,行业与市场中的任何潮流与走向,从最根本的角度讲,都是由用户的需求来驱动的。在设计、开发、推广等方面的工作中,始终将用户放在最优先的位置进行考虑,这可以保证我们的产品能够应对绝大多数的市场状况。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" 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/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/74" typeof="skos:Concept" property="rdfs:label skos:prefLabel">客户终身价值</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/65" typeof="skos:Concept" property="rdfs:label skos:prefLabel">统计分析</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/75" typeof="skos:Concept" property="rdfs:label skos:prefLabel">应用内支付</a></li><li class=" taxonomy-term-reference-7" 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-8" rel="dc:subject"><a href="/taxonomy/term/77" typeof="skos:Concept" property="rdfs:label skos:prefLabel">安全性</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Fri, 27 Jan 2012 13:36:35 +0000 C7210 42 at http://www.beforweb.com http://www.beforweb.com/node/42#comments 网站产品移动化的用户体验设计思路浅析 http://www.beforweb.com/node/32 <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-mobile-website-application-user-experience-ux-design-m.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>又是到处流淌着阳光的周末。让人忙碌和揪心的一件件事依然在继续。想到之前在微博上看到的一句话,大致是这么说的:&ldquo;最终一切都会好的;如果还没好起来,那就是还没有到最后...&rdquo;。今天的内容发掉之后,继续收拾家当;最好呢,这两天可以再抽时间搞些字出来,接下来的几篇候选文章还是不错的样子。大约10天之后搬家,所以下个周末能否如期更新就看前面几天的造化了。</p> <p>说正事儿,今天的小译文相对务虚,原文作者浅谈了一些关于移动化产品在用户体验设计方面需要注意的问题,值得思考和借鉴;话题中有待深入探讨的空间还不小,全当抛砖引玉,强烈欢迎各位朋友通过<a href="http://beforweb.com/node/32#comment-form">评论</a>提出您的看法。走着。</p> <p>对于移动化产品(移动版本的站点、Web应用等)的用户体验设计,我们会习惯性的将更多注意力放在&ldquo;动&rdquo;的方面。回想一下自己是否经常会幻想这样的情景:用户正走在上下班的路上,或是在等车,或是挤在地铁上...他们掏出手机很匆忙的上上网或是摆弄摆弄app,然后继续奔波。</p> <p>现实中,用户对移动产品的使用情景以及体验需求,其实早已超出简单的&ldquo;动&rdquo;的范畴;另外,随着平板电脑的普及,需求的种类也在不断的扩大和发展。作为用户体验设计相关人员,我们会发现,曾经惯用的一些小伎俩,比如简单的缩放功能或是更容易触控的大按钮等,已经无法满足用户更深层次的体验需求了<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p>移动设备、应用及移动互联网的发展脚步仍在日益加快,在这种局面中,我们怎样才能让自己的Web产品在移动化方面的表现更好的满足用户的诉求与期望呢?</p> <h3> 了解用户的实际需求</h3> <p>不能否认,设想用户在一种繁忙的状态下尽量抽时间访问网站或使用应用的做法并不是没有意义的;&ldquo;高效&rdquo;和&ldquo;易用&rdquo;仍然是移动产品的重要成功要素。不过,&ldquo;动&rdquo;只是一个方面;一个越发明显的趋势是,用户会越来越多的像使用台式机或笔记本那样,在家中或是其他相对安静稳定的环境中使用移动设备。随着移动互联网和移动应用在功能、设计、体验等方面的日渐成熟和易用,人们会越发习惯于使用移动设备完成目标,解决需求。</p> <p>从应用软件,到用户需求,到市场发展,整个移动领域已经打破了几年前那种单调乏味的束缚。移动产品的用户体验设计工作的重要程度已经和传统桌面设备领域中的不分伯仲;我们势必要更加用心的了解用户,理解他们在不同情景中的行为习惯,以及对应的多种方面的需求。</p> <h3> 了解设备的功能特性</h3> <p>在进行移动产品相关的用户体验设计工作时,我们需要时刻牢记在头脑中的,就是用来运行该应用的设备平台本身的功能特性。通常,屏幕类型是第一个需要关注的方面;通过用户调研,我们可以事先对产品的目标用户群的设备使用情况做到预估。举例说,黑莓用户更习惯鼠标风格的控制方式,对于这种交互方式来说,按钮或链接的悬停状态样式是有意义的,而iPhone类的触屏手机则不然。</p> <p>设备的性能与速度也是与用户体验相关的重要功能要素。大家都知道,在传统的Web行业中,页面加载速度会在很大程度上影响产品的用户体验与SEO;对于移动设备来说,这方面的因素变的更加重要,因为用户对于移动设备的性能与速度的敏感度要高于桌面设备。如果一个移动版站点或是Web应用的加载和响应速度过于迟缓,用户会很容易&ldquo;武断&rdquo;的认为该产品根本无法正常的工作,或是归罪于自己的网络链接方面的问题而放弃。页面或应用界面中过于丰满的内容和功能会导致设备在内存等方面的资源吃紧,加载时间也会相应增加。然而,这些显而易见的问题往往会在实际的产品设计过程中被忽视或搁置。</p> <h3> 对内容结构和页面长度的控制</h3> <p>传统桌面版的网站,绝大多数仍是通过不同的页面来体现网站结构。相比之下,移动设备则比较欢迎内容更集中、页面更少更长的结构与呈现方式;尤其是对于触屏手机来说,滚动页面的操作方式比基于键鼠的桌面设备来的要容易的多。</p> <p>不过这并不意味着所有的内容都应该被一股脑的呈现在一个页面中,否则对用户来说,体验将会变得非常糟糕&mdash;&mdash;用手指拖拽页面进行滚屏的交互方式虽然很来感,但过于频繁的话,则会挑战用户的耐心。我们应该花些心思考虑一下怎样以更巧妙的、交互性和控制性更强方式来进行输出,例如采用下拉菜单或手风琴风格的&ldquo;展开 / 收起&rdquo;列表等UI模式,通过JavaScript的配合,将内容按照合理的优先级组织起来。</p> <h3> 清晰、简洁、易跟随的功能流程</h3> <p><a href="http://www.useit.com/jakob/">Jakob Nielsen老师</a>一直站在信息架构革新的最前沿。他在2008年提出的<a href="http://www.useit.com/alertbox/interaction-elasticity.html">弹性交互理论</a>(interaction elasticity theory)对移动领域的用户体验设计产生了重要的影响。</p> <p><!--简单的说,该理论认为,清晰、简洁、易跟随的功能流程会对用户体验带来最大的优化作用;操作步骤并非越少越好,对流程的刻意简化,反而会使产品功能变的难以理解,甚至增加操作的复杂度。--></p> <p>简单的说,该理论认为,清晰、简洁、易跟随的功能流程会对用户体验带来最大的优化作用。如今,传统Web用户似乎已经习惯了复杂的网站架构、导航系统以及操作流程,但这些并不适用于移动版本站点或Web应用。对于用户体验设计人员来说,要在移动化产品的设计中时刻遵循并实践这一理论,以保持功能流程尽量简短,并且易于聚焦和跟随,让用户快捷的获取信息、完成目标&mdash;&mdash;这些远没有理论本身看上去那么简单。整个&ldquo;简化&rdquo;过程也许需要很多相关部门的参与配合,尤其对于已有产品的移动化重设计项目而言。</p> <h3> 避免功能和内容的缩水</h3> <p>移动版的站点或应用,绝不应该是普通桌面版产品的缩水版,无论在是功能还是用户体验等方面。但是我们可以在不少移动版产品中发现,为了减小文件尺寸,加快下载速度,内容中的很多图片、视频、甚至文案本身都被删除或简化了,只剩下一些最基本的信息。</p> <p>对于那些经过认真调研和设计的桌面版网站产品来说,有很多&ldquo;非必要&rdquo;的内容或页面元素,往往是出于增进内容多样性或提升易用性等方面的原因而存在的;在移动版的产品中,这些元素是否有必要存在,还要视具体情况而定。更加合理的做法是基于自己的产品对这些内容和视觉元素进行优先级判断,并在尺寸规格、布局结构等方面重新规划,专门针对移动设备进行响应式的调整,而不是一味的将它们抹掉。</p> <p>在这方面的一些具体的实施策略和方法,可以参考我们之前关于<a href="http://beforweb.com/node/6">响应式设计的概念、组成要素、基本实现思路</a>以及<a href="http://beforweb.com/node/7">怎样通过CSS3 Media Query实现响应式Web设计</a>的文章。</p> <h3> 移动化的未来</h3> <p>在移动领域,无论是用户的数量与成熟度,还是设备本身拥有的技术和功能,都在持续快速的增长和发展。市面上出现了越来越多类似<a href="http://jquerymobile.com/">jQuery Mobile</a>这样的前端开发框架,用以帮助传统Web领域的设计师和开发者打造与本地客户端在UI与交互风格上非常接近的Web应用或混合型应用。(相关话题,可以参考阅读我们之前的文章,包括<a href="http://beforweb.com/node/22">前端开发者的跨平台移动应用开发策略及工具</a>和<a href="http://beforweb.com/node/12">走出移动互联网的迷宫 - 网站移动化的方法策略</a>)</p> <p>如今的用户,多数已经脱离了&ldquo;我用移动设备,因为这很酷&rdquo;的幼稚阶段,他们在设备和应用方面的见解以及对技术的了解程度越来越高,同时,对糟糕的用户体验的容忍程度也越来越低。我们曾经了解和习惯的那些用于提升传统Web产品用户体验的原则方法,有很多同样适用于移动领域<a class="eLink" href="http://beforweb.com">。</a>对于移动版的网站产品,不可以仅仅从&ldquo;移动&rdquo;的角度进行简单而盲目的&ldquo;优化&rdquo;&mdash;&mdash;站在用户体验的角度,移动版需要我们思考和投入的,甚至会超过桌面版产品。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" 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/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</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="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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><li class=" taxonomy-term-reference-1"><a href="/point" 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/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 17 Dec 2011 04:23:33 +0000 C7210 32 at http://www.beforweb.com http://www.beforweb.com/node/32#comments Web应用的成功之路 - 产品早期的原型设计与用户测试 http://www.beforweb.com/node/24 <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-web-app-product-prototype-user-experience-test-m.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>关于本文,其实在标题上犹豫了蛮久。这篇内容是新书<a href="http://webapplicationbook.com/">A Practical Guide to Web App Success</a>的第15章;主题显然应该在Web应用方面,但是本章单独拎出来看的话,却又适用于各种常见类型的Web产品。whatever,不矛盾。作者Dan Zambonini在本文中将向我们阐述Web应用在原型阶段的设计与测试工作的重要性,并从实际执行的角度出发,介绍一些经验方法和常用工具。走着。</p> <p>产品在原型阶段的设计与测试工作,是决定一款移动应用能否成功的重要因素。提到原型设计和用户测试,人们往往容易产生厌倦与回避的感觉。这也不奇怪,在很多实际项目中,这方面的工作似乎就是&ldquo;随意性强&rdquo;,&ldquo;耗时&rdquo;,&ldquo;高成本&rdquo;一类的代名词。</p> <p>不过在我看来,它们其实是整个设计流程里最重要的环节。无论你或你的团队在用户界面视觉设计等方面有多高的造诣,我都建议各位对原型环节的相关工作提高重视。基于高保真原型的用户测试,可以让很多关于需求、功能、界面设计等方面的潜在问题尽早暴露出来;这类问题往往直接关乎着产品的成败<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p>另外,原型阶段的工作非但不代表&ldquo;耗时&rdquo;与&ldquo;高成本&rdquo;,实际上正相反。从整个项目的角度讲,在原型的设计与测试过程中发现问题并加以解决,比将问题留到视觉设计和开发流程中再处理,要省时省力的多。</p> <h3> 原型设计</h3> <p><!--这里我们主要指线框原型。--></p> <p>原型设计工作需要相关人员具备交互设计、构图、网格系统、风格继承等方面的知识技能。如果你在一个小团队内工作,尽量让相关同事也参与到原型设计的工作中,从每个职能角度提出意见和建议。如果你们在为客户开发移动应用,那么在这个阶段要与他们尽可能多的进行需求沟通,保证及时有效的反馈与迭代。</p> <p>不过有一点需要注意,在参与原型设计的人员范围方面要做好把握。参与者应该包括与产品功能决策相关的产品及设计等上下游职能人员。我在实际项目中碰到过很多次这样的情况,就是开发部门的技术人员在原型设计阶段进行了过多的介入,除了常规的技术评审之外,还提出了很多以技术开发为中心的原型设计建议,这显然是本末倒置的。</p> <h4> 1.选择最重要的视图界面</h4> <p>如果你有足够多的时间及技术资源去为每个视图界面都创建对应的线框原型,这也不坏。不过通常情况下,你只需要搞几个最重要的、最具代表性的界面就OK了;其他多数可以通过同一张原型图去代表。</p> <p>举例说,Twitter和Facebook的首页动态与用户个人界面在形式上是很相似的,用一个原型就可以解决了。对这两个应用来说,真正必要的关键视图界面原型只有大约4个的样子,包括用户注册、动态列表、用户搜索和用户搜索结果等。</p> <p>对于&ldquo;最小可用产品&rdquo;(Minimum Viable Product,MVP),那么4到5个关键屏已经足够多了。在后续的功能开发和迭代的过程中,可以再继续为那些相对独立的、非最简化核心的功能界面设计新的原型。</p> <h4> 2.列出视觉元素</h4> <p>接下来,列出所有需要用到的视觉元素,包括文本、按钮、表单、图形、菜单等;不要忘记那些默认不会显示出来的元素,比如警告和出错信息、状态提示、操作反馈等。对于简单的项目,使用纸和笔来完成这步工作就够了。</p> <p>由于这些UI元素是需要被复用的,所以在使用它们构建原型的时候,我们可以从最重要的视图界面入手,也就是包含了最多内容结构和功能的、用户会花很多时间进行浏览和操作的界面。这样可以尽早确保UI元素的功能合理性。</p> <p>回到我们的烹调app上(贯穿本书前几章的演示案例),从&ldquo;最小可用产品&rdquo;的角度,我们只需要一个主要功能:查找食材。在主界面中,包含的视觉元素及模块大致有:</p> <ul> <li> 搜索框</li> <li> 搜索失败的提示</li> <li> 热门搜索关键词</li> <li> 随用户输入而显示的搜索建议</li> <li> 饮食分类,包括素食、健康、低糖等</li> <li> app的功能服务简述</li> <li> 添加食材的入口链接</li> <li> 用户的最近搜索关键词</li> <li> logo</li> </ul> <h4> 3.将视觉元素分组并进行优先级排序</h4> <p>从功能及内容的角度,将上面列表中的元素条目进行分组,并按照优先级从高到低的顺序排列:</p> <ul> <li> 搜索框、搜索失败提示、搜索建议</li> <li> 热门关键词、饮食分类、最近搜索关键词</li> <li> logo、app的功能服务简述</li> <li> 添加食材的入口链接</li> </ul> <p>对于最简化可实行产品来说,分组和排序的工作会很容易进行。如果app的功能比较复杂,视觉元素和模块过多,你可以尝试卡片排序的方式。将每个元素条目写在卡片上,使形式更加实体化、独立化,便于操作。让团队相关人员参与进来,征询分组建议,最终达成一种统一的模式。</p> <h4> 4.为每组视觉元素制作低保真原型</h4> <p>草图时间,开始动手吧。低保真阶段,不需要任何艺术美化方面的因素介入。</p> <p>不必介意能否一开始就把所有元素画的得当和到位,这是一个创作的过程,完全可以多尝试尝试你头脑中不同的方案。而且我们之前的分组方案也不是绝对的,在制作草稿的过程里,如果你觉得最近&ldquo;搜索关键词&rdquo;在逻辑上与搜索框更加贴近,那么就修改一下分组,没问题。要记得,在原型设计的整个过程里,我们有一个大原则,就是让迭代与更新发生的尽量早些。</p> <p>目前还不用考虑各元素在&ldquo;一致性&rdquo;方面的问题,不必为他们之间的位置和尺寸关系牵扯精力;现在我们只要关注每个元素独立的个体。</p> <p><a href="/sites/default/files/images/201111/web-app-prototype-user-test-low-fidelity-mockup.jpg"><img alt="web-app-prototype-user-test-low-fidelity-mockup" src="/sites/default/files/images/201111/web-app-prototype-user-test-low-fidelity-mockup.jpg" style="width: 500px; height: 375px; " /></a></p> <h4> 5.线框图</h4> <p>是时候把这些UI元素的低保真原型撮合到线框原型中了;不要忘记我们之前对它们进行分组时的优先级排序。在这期间仍然会频繁的发生迭代,所以不必过多考虑精确的网格对齐、配色或字体一类。线框原型的设计制作过程,就是评估UI元素之间的平衡性、优先级和互动关系的过程。(可以参考阅读我们之前关于<a href="http://beforweb.com/node/20">线框原型的本质及实践应用</a>方面的文章)</p> <p>在之前的低保真原型阶段,纸和笔就足够了;但是在线框原型的制作过程中,我们通常需要对模块化、可复用的UI元素集合进行布局规划和调整。这时,我们可以使用一些工具来提高效率;试试看下面这些:</p> <p><strong class="eLessStrong">便签贴纸</strong></p> <p>恩,最基本的方法,并且仍然没有脱离纸笔,但不失灵活性与可行性。在每张便签贴纸上画一个UI元素,或是一组已经模块化的UI元素集合,根据需求随意调整组合方案及布局位置。如果某元素或模块本身需要调整,重新画一枚即可,无需调整全局。</p> <p><strong class="eLessStrong">PowerPoint(PPT)或Keynote</strong></p> <p>首先说明,我个人很讨厌使用此类作演示用的软件工具进行设计方面的工作,不过必须承认,在快速草图和分组归类设计元素等方面,它们还算好用。</p> <p><strong class="eLessStrong">Google文档的绘图工具</strong></p> <p>Google文档工具套装中的绘图应用也不错。虽然它并非专为Web设计而打造,但它的基本功能可以满足我们制作线框图的需求,而且远程多人协作等方面的功能特色也相当实用。</p> <p><strong class="eLessStrong">独立Web应用</strong></p> <p>可以试试那些专门用来制作线框图的基于浏览器的Web应用。有的还不错,比如<a href="http://gomockingbird.com/">Mockingbird</a>,很容易上手,基本功能一应俱全。<a href="http://pencil.evolus.vn">Pencil Project</a>也是一个选择,它是一款Firefox扩展。</p> <p><a href="/sites/default/files/images/201111/screenshot-wireframe-tool-web-app-mockingbird-firefox.png"><img alt="screenshot-wireframe-tool-web-app-mockingbird-firefox" src="/sites/default/files/images/201111/screenshot-wireframe-tool-web-app-mockingbird-firefox.png" style="width: 500px; height: 313px; " /></a></p> <p><strong class="eLessStrong">桌面应用软件</strong></p> <p><a href="http://www.balsamiq.com/products/mockups">Balsamiq Mockups</a>是一款不错的线框原型设计工具,它是商业软件。当然,如果你已经有Microsoft Visio或是OmniGraffle的话,也可以使用它们提供的网页线框模板。</p> <p>我个人比较喜欢那些提供了低保真草图风格的软件,这种风格的线框图可以显得更加原始和自然,避免掺杂过多的视觉美化方面的因素。下图左侧为手绘草图,右侧为OmniGraffle的线框原型输出。</p> <p><img alt="screenshot-wireframe-tool-web-app-sketch-omnigraffle" src="/sites/default/files/images/201111/screenshot-wireframe-tool-web-app-sketch-omnigraffle.png" style="width: 355px; height: 199px; " /></p> <p>对于以上几种类型的工具,我倾向于Web应用或是桌面应用软件,因为它们多数都内置了很全面的GUI组件库。</p> <p>低保真原型可以用于产品相关部门内部进行小规模的评审和测试。</p> <h4> 6.高保真原型</h4> <p>该创建用于测试的高保真原型了。虽然高保真原型中的界面在接下来的流程中还需要被多次迭代,但是目前我们已经可以尽量加入视觉风格及涉及用户体验的相关要素了。</p> <p>高保真原型通常分为两类,一类是可以通过Photoshop、Fireworks等设计工具来创建的图片文件,纯粹用以展示界面效果。另外一类是真正意义上的交互原型。在使用高保真交互原型进行测试的过程中,不必加入人工解说或行为路径引导,对于被测试者来说,体验更加流畅,操作感更接近于实际产品。</p> <p>高保真原型的交互功能并不需要基于真正生产级别的代码,我们只要保证页面元素可以根据用户行为进行必要的反馈即可。这种反馈可以通过硬编码或脚本来实现。</p> <p>通常,我们可以通过以下几种方法来创建高保真交互原型:</p> <ul> <li> 将界面效果图嵌入HTML,通过map和area标签,在图片上添加热点链接,用以响应用户的点击。</li> <li> 使用Photoshop或Fireworks将界面效果图快速切片,并直接生成HTML静态页面,实现简单的响应功能。</li> <li> 如果你的前端能力OK,手头够快,不妨代码伺候,直接上HTML、CSS、JavaScript,或使用<a href="http://www.blueprintcss.org/">Blueprint CSS</a>和<a href="http://ixedit.com/">IxEdit</a>这样的前端框架。</li> <li> 使用更专业的原型工具软件,如<a href="http://www.axure.com/">Axure RP</a>或<a href="http://www.serena.com/products/prototype-composer/">Serena Prototype Composer</a>等,创建原型并导出成为可交互的页面集合。</li> <li> 最后一种,希望不会与你的价值观产生冲突...我们可以直接使用Dreamweaver、Microsoft Expression Web或Adobe Muse等软件的所见即所得(WYSIWYG)设计模式来快速创建原型。反正目的在于快速制作并测试原型的交互方式;再说高保真原型的代码通常也不会被用作接下来的前端或后台开发<a class="eLink" href="http://beforweb.com">。</a></li> </ul> <div class="embed"><article id="node-277" class="node node-related-books" about="/node/277" 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/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="原型设计:实践者指南" src="http://beforweb.com/sites/default/files/images/products/21.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">原型设计:实践者指南</a></h4> <p><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">原型设计是用于沟通设计意图的清楚而高效的理想方式,可以帮助设计师洞察设计想法,测试产品预设条件和收集用户反馈意见。本书向我们表明一点:“原型不只是一种设计工具,它还可能帮助我们进行产品推广,赢得更多内部支持,并有机会和开发团队一起测试产品的可行性。”...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 用户测试</h3> <p>通过用户测试,我们可以直接和有效的洞察到产品在用户行为、界面可用性、用户期望与功能契合程度等方面的表现。本文所侧重的原型阶段的测试,更是可以帮助我们在项目初期就能达到以下几方面的目标:</p> <ul> <li> 在产品进入开发流程之前,发现并解决那些需求和功能设计合理性方面的问题。</li> <li> 辨识并去除那些多余的功能,节省接下来的开发成本。</li> <li> 尽早发现结构布局和交互方式等方面的问题,在接下来的迭代过程中,有针对性的优化用户体验,提升最终产品的用户满意度,推动产品在市场中口碑的树立。</li> </ul> <p>用户测试的大致方式及流程其实并不复杂:选择合适的用户作为测试对象,向他们提出一系列需要使用app原型来完成的目标,记录他们的行为及口头陈述反馈。需要花些时间和心思去琢磨的的是整个测试工作的计划与执行过程中的细节问题。</p> <p>当然,你可以雇用那些可用性测试方面的专业代理,由他们打包搞定所有的问题,比如用户选择、任务设计、会话时长的规划、调查结果分析等;只要你的团队有足够多的经费预算用来支付外包费用。</p> <p>幸运的是,有一些实践性强、成本低廉的方法和原则可供我们参考借鉴,自己解决问题。另外,虽然多数的第三方代理在专业水准方面值得信赖(并且价格昂贵),但他们毕竟无法像我们自己一样可以从头到尾的了解我们的产品和需求,他们最终提供的分析报告往往无法达到能够指引我们立刻采取反应措施的程度。</p> <h4> 测试规模</h4> <p>每轮会话的时常最好不要超过45分钟,目标任务保持在5个以内;否则,疲劳因素会导致用户希望结束测试,进而影响其行为。</p> <p>如果测试会持续一整天,那么每轮测试会话之间要留有20到30分钟的间隔,让你和团队相关人员有时间对前一轮的测试情况进行讨论。</p> <p>参与测试的用户数量取决于你的应用产品的规模级别。对于一些最小可用产品的原型,测试用户的行为上有很强的关联性,重要的问题基本都可以在前面两轮测试中很清楚的呈现出来。对于复杂的应用,test subjects are more likely to identify unique issues, with diminishing returns as the total number of test users increases. <a href="http://www.useit.com/alertbox/20000319.html">Jakob Nielsen</a> suggests that five users offer the best insight before diminishing returns kick in significantly.(&ldquo;...随着测试用户数量的增多而产生收益递减的现象。Jakob Nielsen建议,在收益递减的效应变的显著之前,5名测试用户可以带来最好的测试效果。&rdquo; 不敢断译,求各位观众的帮助和指正。)</p> <p>/*--------------------更新 2011-12-04 17:26--------------------*/</p> <p>对于复杂的应用,</p> <blockquote><p>由于每位用户在测试中都可以有她独特的发现,那么随着用户数量的增加,这种独特性会降低,重复的发现会增加,这样我们花的时间,金钱和精力就用在发掘重复的issue上了,这不是理想的效果,经过研究5个人的数量刚好。</p> </blockquote> <p>来自<a href="http://yingyingz.com/">yingying</a>同学的指正,thanx!</p> <p>/*--------------------/更新 2011-12-04 17:26--------------------*/</p> <h4> 计划筹备</h4> <p><strong class="eLessStrong">选择测试任务</strong></p> <p>我们未必可以测试到app的方方面面,在时间和各种资源条件有限的情况下,可以尽量选择最重要的、使用最频繁的功能,来设计测试任务。</p> <p>好的任务描述文案读起来应该更像剧情脚本,而不是简单的引导说明;对比下面两种风格:</p> <ul> <li> &ldquo;查找一种沙爹酱的替代品&rdquo;&mdash;&mdash;不是非常给力。</li> <li> &ldquo;今晚,有位朋友会来你家用餐,他对坚果过敏。看看有什么方法可以相应的调整一下食谱?&rdquo;&mdash;&mdash;很好,具有很真实的情景感和带入感。</li> </ul> <p>记得自己先把这些任务过一遍,确保在正式开始测试之前,原型本身不会出现明显的错误和问题。</p> <p><strong class="eLessStrong">制定考量标准</strong></p> <p>测试结果通常会反映出大量可用性方面的问题;量化的标准可以帮我们很直观的比较出每轮测试之后产品在设计和功能方面的迭代成果。有以下几方面的考量标准需要特别留意:</p> <ul> <li> 任务完成度:用户成功的完成任务了没?</li> <li> 完成任务的时长:用户花了多长时间来完成任务?</li> <li> 所需的步骤:用户在完成任务的过程里,需要访问多少页面,会产生多少次触摸或点击?</li> <li> 用户在完成任务的过程中犯了多少错误,严重程度如何?</li> <li> 用户满意度如何?(5分制)</li> </ul> <p><strong class="eLessStrong">选择用户</strong></p> <p>必须选择&ldquo;有价值&rdquo;的用户进行测试。对于烹饪类的应用来说,找那些一周多数时间里以冷批萨为主食的用户来参与测试,将是一件即无厘头又坑爹的事。</p> <p>可以基于早期的用户人格与市场方面的调研来描述你希望寻找的目标用户。寻找的范围和方式大致包括:</p> <ul> <li> 亲朋好友以及业界相关的联系人</li> <li> 通过你的网站或博客发布招募信息</li> <li> 在社交媒体中寻找与当前产品领域相关的用户</li> <li> 使用公告板、邮件列表等</li> </ul> <p><strong class="eLessStrong">酬谢回馈</strong></p> <p>如果你觉得很难找到测试对象,那么除了思考招募途径方式以外,也可以考虑为参与测试的用户提供一些酬谢回馈。大致的形式包括:</p> <ul> <li> 产品推出之后优先或免费使用的特权</li> <li> 酬金</li> <li> 代金券(网购优惠券或实体票券等)</li> <li> 吃吃喝喝</li> </ul> <p><strong class="eLessStrong">选择测试工具</strong></p> <p>有很多现成的工具服务可以对用户测试工作起到推动和辅助作用。</p> <p><a href="http://www.feedbackarmy.com/">Feedback Army</a>会随机邀请一些用户来回答你的测试任务问题,并以文本的形式进行回馈。如果你的产品受众面很大,那么这种方式还不坏,否则你将很难得到你所需要的方向性很强的回馈。</p> <p><a href="http://www.usertesting.com/">UserTesting</a>则更加高端些,他们会帮你选择合适的用户群,并通过视频记录下用户完成测试任务的过程,然后将结果发送给你,而且成本还算廉价。一个弊端是,他们对用户的筛选是基于统计数据的,所以如果你希望参与测试的用户应该是那些每周至少5天会在家做饭的人,那么你能依靠的就只有用户的诚实了。另外,你也无法在测试过程中针对重要的交互环节向用户提出具体问题。</p> <p>如果你需要与用户进行远程交流互动,那么屏幕录制和分享等功能是必不可少的。<a href="http://www.adobe.com/acom/connectnow/">Adobe ConnectNow</a>和<a href="http://www.skype.com/intl/en-us/features/allfeatures/screensharing/">Skype</a>在这方面都很给力,<a href="http://www.shinywhitebox.com/ishowu-hd/">iShowU</a>(Mac)和<a href="http://www.techsmith.com/camtasia/">Camtasia Studio</a>(Windows)也是不错的选择。</p> <p>当然,最好的测试方式,还是在面对面的互动中对用户微妙的反应进行观察和分析。最好摄像头和麦克风来记录下整个会话过程,并在测试结束后使用<a href="http://silverbackapp.com/">Silverback</a>(Mac)或<a href="http://www.techsmith.com/morae.asp">Morae</a>(Windows)这类工具回放,进行分析。</p> <p><strong class="eLessStrong">引导测试进行</strong></p> <p>在测试的当天,做好一切准备,对测试所需的软硬件进行最后的测试。欢迎参与者的到来,对他们花时间参与测试表示感谢。</p> <p>尽量让用户觉得轻松自在,以保证测试可以自然的进行。预先将酬劳支付给他们,避免他们会担心&ldquo;只有正确的完成测试才能拿到报酬&rdquo;。向参与者解释清楚测试的目的,要让他们明白真正的测试对象是app产品,而不是他们自身。告诉他们对接下来的任务尽力而为就好,完全不必顾虑是否会犯错。</p> <p>最好事先签订一份简单的授权协议,告知用户接下来的测试过程会被影音记录,并用于今后的内部分析。要确保用户的隐私得到充分的保护,影音资料不会被在外部公开。</p> <p>最重要的一点,要鼓励参与者大胆的思考及表述,不要担心什么;不过同时要让他们知道,你不会回答任何关于怎样使用app完成任务方面的问题。你要尽量营造出一种参与者正在独自使用产品完成任务的情景。</p> <p>作为测试的主持者,你的责任是保持客观,认真倾听。一开始可以设置一些简单的任务,让参与者可以比较从容的进入角色。切记,在布置任务和提问的过程中,要避免引导出你希望得到的答复。多对参与者进行鼓励,给予一些非承诺性的回馈;如果他们在操作过程中犯了错误,首先给出一定的时间让他们自己思考和修正,只有在确实无法进行下去的时候再进行必要的干预。</p> <p>向用户提问的时候,不要加入&ldquo;选项&rdquo;的因素。下面几种问法比较得当:</p> <ul> <li> &ldquo;你可以描述一下你正在做什么吗?&rdquo;</li> <li> &ldquo;你正在思考什么?&rdquo;</li> <li> &ldquo;这和你的预期一致吗?&rdquo;</li> </ul> <p><strong class="eLessStrong">测试之后</strong></p> <p>测试结束之后,记得要再次向参与者表示感谢;他们很有可能成为产品的第一批口碑传播者,尤其是当他们正好属于产品的目标用户群的话。在测试任务全部结束后,可以让他们对产品满意度进行简单的打分。</p> <p>测试结束后,立刻记录你在测试过程中洞察到的各种细节问题,越详尽越好。即使其中一些想法是没什么价值的,也可以在接下来的分析过程中剔除掉。</p> <p>和你的团队一起回顾整个测试过程,对发现的问题进行归纳和总结,理清优先级,并尽快在下一轮的产品原型迭代中做出相应的改进和调整<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-289" class="node node-related-books" about="/node/289" 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/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="妙手回春:网站可用性测试及优化指南" src="http://beforweb.com/sites/default/files/images/products/34.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">妙手回春:网站可用性测试及优化指南</a></h4> <p><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者Steve Krug继畅销书Don't Make Me Think后推出的又一力作。书中详细阐述了一种简化的网站可用性测试方法,让任何人都能够尽早并频繁地对其网站、应用程序和其他产品进行可用性测试,从而将最严重的可用性问题消灭在萌芽状态...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 总结</h3> <p>最后,我们来归纳一下本文中关于Web应用原型设计及相关测试的内容要点:</p> <ul> <li> 列出原型所需的视觉元素,按照功能优先级排序分组。</li> <li> 使用纸和笔简单的勾画低保真原型。</li> <li> 对应用的关键界面视图,使用辅助工具设计制作线框图和高保真原型。</li> <li> 在邀请用户进行原型测试之前首先进行内部测试评审。</li> <li> 在用户测试前,充分制定好考量标准。</li> <li> 使用情景脚本风格的测试引导。</li> <li> 参与测试的用户应该与app的目标市场有契合点。</li> <li> 对参与者给予适当的酬劳。</li> <li> 使用影音设备记录下测试过程。</li> <li> 作为测试的主持者,要保持客观,在布置任务和提问的过程中,避免引导性的问题。</li> <li> 测试结束后立刻记录过程中发现的问题,及时分析测试结果,对原型进行迭代。</li> </ul> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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><li class=" taxonomy-term-reference-1"><a href="/point" 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/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/66" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户测试</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/67" typeof="skos:Concept" property="rdfs:label skos:prefLabel">高保真原型</a></li></ul> Sun, 04 Dec 2011 02:43:01 +0000 C7210 24 at http://www.beforweb.com http://www.beforweb.com/node/24#comments 台式机、iPhone还是iPad - 不同设备上网时间的统计分析 http://www.beforweb.com/node/25 <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-chart-desktop-mobile-iphone-ipad-web-devices.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>又是一周过去了。想想两年前每天早上做<a href="http://viiiix.com">CMS方面博客</a>译文的时候,最多念叨一下当天的天气啊路上的事情啊一类;如今每周搞这么一次,想对过去一周总结些什么,却发现记忆这东西真的不靠谱了。虽然只有几天,但是各种猫事、装修事、工作事、家庭事统统在头脑中纠缠在一起,只觉得自己好像一周一周的都在打仗。</p> <p>之前有朋友提到过文章风格问题,觉得每篇开头的废话偏多;其实我也觉得。不过还希望各位谅解啦,怎么说呢,&ldquo;为网而生&rdquo;毕竟不是那些专门发布技术时讯文章的知名大站;这里只是我自己的个人博客之一,页头slogan里面提到的确实是核心内容,但是作为我个人来说,还是会随便念叨些有的没的。</p> <p>那今次废话就到此为止了。本文中,作者汇总了一些具有代表性的网站(包括Read it Later、Financial Times、Linkedin等)的统计数据,图形化的向我们展示并分析了一天当中,用户使用不同类型的设备进行上网访问的时间分布情况<a class="eLink" href="http://beforweb.com">。</a>希望本文可以对涉及移动互联网领域的产品同学有些参考价值。走着。</p> <!--本来这周开始做的是一篇关于Web应用的原型设计与用户测试方面的文章;不过自己及时的预计到了这些天将有蛮多事情要折腾和花心思,所以临时改做本篇,相对精干一些。--><!--break--><h3> Read it Later的台式机用户</h3> <p>下图所显示的,是Read it Later的用户在一天24小时内使用台式机阅读文章的数量统计。 可以看到,白天的阅读高峰出现在午时,而且前后两个小时内的数据也不错。在经历了傍晚的低谷之后,统计数字在晚上9点前后达到一天内的最高峰。</p> <p><img alt="user-device-mobile-readitlater-computer" src="/sites/default/files/images/201111/user-device-mobile-readitlater-computer.gif" style="width: 500px; height: 260px; " /></p> <h3> Read it Later的iPhone用户</h3> <p>再来看第二张统计图,它显示了Read it Later的用户在一天内使用iPhone阅读文章的数量统计。可以看到4个主要的峰值:早上6点(早饭或早阅读时间),上午9点(上班途中的时间),傍晚5点到6点(下班途中的时间),晚上8点到10点(晚上休息、卧床阅读时间)。</p> <p><img alt="user-device-mobile-readitlater-iphone" src="/sites/default/files/images/201111/user-device-mobile-readitlater-iphone.gif" style="width: 500px; height: 260px; " /></p> <p>可以看出,台式机与移动设备(手机)的统计情况之间的差异非常显著。</p> <h3> Read it Later的iPad用户</h3> <p>没悬念,接下来的图片所展示的,是Read it Later的用户在一天内使用iPad阅读文章的数量统计;可以看出,统计结果与iPhone的有些许相似之处。其中,早上6点左右出现了白天的峰值。上班途中的时间点上,情况一般;下班路途上的阅读量达到甚至超过了早饭和早阅读的时间。全天的最高峰很突兀的出现在晚上8点到11点之间的时间段里,正如前面提到的,基本是晚上睡前的放松阅读时间。显然,至少在阅读文章的用例中,iPad用户在晚间非常活跃。</p> <p><img alt="user-device-mobile-readitlater-ipad" src="/sites/default/files/images/201111/user-device-mobile-readitlater-ipad.gif" style="width: 500px; height: 260px; " /></p> <h3> 新闻资讯类网站的访问设备统计</h3> <p>在<a href="http://blog.comscore.com/2011/11/the_rise_of_digital_omnivores.html">comScore的统计报告</a>中,也可以看到类似的特征。下图显示了用户使用台式机与平板电脑阅读新闻内容的时间分布情况。在白天工作时间,台式机的使用量占有绝对优势,而平板电脑的访问量在晚间休息时间达到峰值,甚至超出白天台式机的最高点。</p> <p><img alt="user-device-mobile-news-tablet-pc" src="/sites/default/files/images/201111/user-device-mobile-news-tablet-pc.gif" style="width: 500px; height: 260px; " /></p> <p>TechCrunch里有一篇<a href="http://techcrunch.com/2011/11/18/financial-times-mobile/">关于Financial Times的报道</a>。FT是英国老牌报纸,最近,他们为移动设备用户专门打造了基于HTML5的Web应用(Web App)。下图反映了其智能手机与台式机用户的访问量分布;可以看出,即使对于新上线的网站和服务,统计结果依然符合我们在前面看到的模式。</p> <p><img alt="user-device-mobile-financial-times-smartphone-pc" src="/sites/default/files/images/201111/user-device-mobile-financial-times-smartphone-pc.gif" style="width: 500px; height: 260px; " /></p> <h3> 社交类网站(Linkedin)的访问设备统计</h3> <p>这里有一张很漂亮的<a href="http://8.mshcdn.com/wp-content/uploads/2011/03/linkedin-infographic-640.png">关于Linkedin的信息图</a>,我们将其中关于访问设备统计的部分拿出来。其中,第一张图不区分设备,展示的是一天24小时内全部用户的访问量统计;第二张图则锁定移动设备的用户。可以看出,访问量的高峰出现在上午9点至下午2点之间,在这期间,设备类型主要是台式机。即使晚间移动设备的访问量达到了峰值,它还是没有超过白天的统计数字。</p> <p>至少对于Linkedin来说,我们可以得出大致的结论:人们更多是在工作时间进行访问。估计大伙对自己的工作都不怎么满意。</p> <p><img alt="user-device-mobile-linkedin-overall" src="/sites/default/files/images/201111/user-device-mobile-linkedin-overall.gif" style="width: 500px; height: 260px; " /></p> <p><img alt="user-device-mobile-linkedin" src="/sites/default/files/images/201111/user-device-mobile-linkedin.gif" style="width: 500px; height: 260px; " /></p> <p>抛开网站及服务,不同设备类型的联网行为也是有各自的显著特征的。下图显示了笔记本、平板电脑和智能手机在3G网络链接的时长与会话数方面的统计结果。</p> <p><img alt="user-device-mobile-3g-connection-traffic-patterns" src="/sites/default/files/images/201111/user-device-mobile-3g-connection-traffic-patterns.gif" style="width: 500px; height: 260px; " /></p> <h3> 使用环境</h3> <p>对于以上这些统计结果,有一种观点,认为起到决定作用的实际上是设备的使用环境。例如,对于新闻资讯类的网站,移动设备访问量在早上达到峰值,是因为人们在当时必然在路上;或者,对于平板电脑来说,晚上的访问量峰值证明人们必然是在家中。固然,这种假设具有一定的参考价值,但毕竟我们所能看到的统计数据,是以时间为考量的,环境及地理因素并没有包含在其中。我们无法肯定这种关于使用环境的假设是100%正确的<a class="eLink" href="http://beforweb.com">。</a></p> <p>如果时间足够充裕,人们完全可以在起床之后使用手机来阅读Financial Times,因为它就在枕边的床头柜上。类似这样的假设,你还能想到很多。通过这些统计数据,我们唯一可以确认的,是不同设备在一天当中不同时段的上网情况。</p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" 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/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动设计" src="http://beforweb.com/sites/default/files/images/products/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动设计</a></h4> <p><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者从人-机-环的角度出发来阐述移动应用的设计,并建立了移动应用设计的基本原则;然后,根据移动端的情境、移动设备的特征,以及触摸的交互方式,总结了移动导航和框架设计的主要形式,并给出了导航设计的原则和思路...</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="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" 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/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/65" typeof="skos:Concept" property="rdfs:label skos:prefLabel">统计分析</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li></ul> Sat, 26 Nov 2011 08:55:37 +0000 C7210 25 at http://www.beforweb.com http://www.beforweb.com/node/25#comments 前端开发者的跨平台移动应用开发策略及工具 http://www.beforweb.com/node/22 <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-developers-coder-coding-mobile-framework.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>在之前的一篇文章中,我们曾经讨论过,对于交互和视觉设计相关职能的从业人员来说,<a href="/node/14">从传统Web行业向移动应用领域转型的过程中需要学习和注意的问题</a>。这篇文章中提到过&ldquo;混合型应用&rdquo;的概念,以及与之相关的两本开发指导书籍。今天这篇文章的英文原文,就是来自这两本书的作者&mdash;&mdash;移动应用开发者Jonathan Stark。</p> <p>本文中,他将站在传统Web前端开发人员的角度,为我们介绍一些在实际项目案例中总结出来的移动应用开发方法策略,以及几类具有代表性的用于打造跨平台移动应用的前端开发工具。</p> <p>各位前端开发相关职能的同行们,扩展视野、提升技能、随&ldquo;机&rdquo;应变的时机已然成熟;衷心希望本文可以成为推动大家事业进步发展的一个催化点<a class="eLink" href="http://beforweb.com">。</a>不多说了,我们来看正文。</p> <!--break--><p>无论站在怎样的角度去衡量,移动互联网及客户端应用的发展势头都是非常迅猛的。日均使用量、智能手机的普及率、来自移动设备的订阅量、搜索引擎流量、广告呈现、应用售卖...所有这些都处于迅速上升的状态。可以预计,在不久的将来,移动设备将拥有足够的成熟度与普及率,并跻身于传统桌面电脑、笔记本等硬件平台的行列,成为我们日常生活的主要设备。</p> <p>巨大的移动市场为传统Web设计开发人员带来了新的机遇与挑战。各类移动设备在爆发式增长的同时,也带来了前所未有的分裂与混乱的状况。如果需要同时为多平台设备进行客户端应用的开发、测试和维护,势必会消耗大量的资源与成本。</p> <p>本文中,我们首先会对几种移动化解决方案进行比较和分析,然后将重点放在一些常见的用于跨平台移动应用开发的前端框架工具上;不过我不会在最后选出一个所谓的最优方案&mdash;&mdash;开发方式的选择最终会取决于你的项目本身,包括业务模式、需求、目标市场、开发资源等多方面因素。本文的主要目标是提供一些有用的信息,帮助各位读者在实际项目中选择最合适的方法与工具。</p> <h3> Web应用(Web App)与原生客户端应用(Native App)</h3> <p>关于这两种移动化方案孰优孰劣的辩论已然有不少了。</p> <p>我相信,如果你能以Web应用的方式打造移动化产品,那么你确实应该这样做;反之则不应该...另外一种情况则介于两者之间,即通过HTML、CSS、JavaScript等前端技术,结合移动设备原生开发方式,打造所谓的混合型应用。</p> <p>看似废话,但重点在于&ldquo;能&rdquo;或&ldquo;不能&rdquo;。这里我们主要指具体的项目需求,而非技术开发能力。我所在的团队,做过的多数案例,都来自于企业级的客户。大公司,顾名思义,在人员、产品及服务等方面都具有相当的规模,他们所需要的移动化解决方案在跨平台方面的需求都很高。</p> <p>当接手一个新的企业级移动化项目时,我会将Web App作为默认的首选方式,同时结合以下三个问题进行进一步评估:</p> <ol> <li> <strong class="eTitle">功能方面,是否涉及那些只有本地应用才能利用的设备硬件资源?</strong></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>比如,一款有条形码扫描功能的应用,必须配合设备的摄像头进行工作,而摄像头是浏览器无法获取的硬件资源,所以这款应用不能以Web App的形式存在;类似的功能还包括影像音频的录制传输、后台运行、消息推送等。如果该产品确实必须基于这些功能才能被正常使用,那么原生客户端应用便是不二之选。</p> </li> <li> <strong class="eTitle">该产品的用户是谁?</strong></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>如果产品拥有大规模的公众用户群,那么原生或Web应用的方式都是可选的,前者可以通过平台官方的App Store或应用市场进行推广,后者的跨平台性更好。如果产品属于公司或组织内部使用的管理信息系统等类型,那么Ad hoc、类似<a href="http://www.apperian.com/">Apperian</a>这样的第三方App Store或Web App都是可选的。</p> </li> <li> <strong class="eTitle">该应用在系统资源消耗等方面的敏感度如何?</strong></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>很多方面的因素会使移动设备浏览器占用过多的内存资源,从而影响Web App的执行效率及用户体验。这些因素包括半透明视觉效果及动画效果、大量的内容数据、文件加密和解码、基于地图的复杂交互方式等。</p> </li> </ol> <p>回答了这三个问题之后,对解决方案的选择便容易多了。举例说,比如我收到的需求是为企业员工设计开发一款B2E应用,用来管理他们的个人信息及收益情况,并且不需要使用移动设备提供的高级硬件功能,那么Web App的方式是最恰当的选择。另外一方面,如果需求是开发一款面向大众的虚拟地图应用,并需要配合手机的陀螺仪功能才可以工作,那么我们必须选择本地客户端的方式进行开发<a href="http://beforweb.com" rel="eLink">。</a></p> <p>不过,正如我们之前提到的,在这两者之间,还有另外一种混血方案可以去考虑,也就是混合型客户端应用。</p> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" 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-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 原生客户端应用(Native App)与混合型客户端应用(Hybrid App)</h3> <p>所谓混合型应用,就是在原生客户端中嵌入基于前端技术构建的页面视图;这种方式其实已经很常见了。本质上讲,页面视图就是HTML页面,但它不需要另外调用移动设备中的浏览器进行查看和操作。</p> <p>混合型应用的典型实例其实是我们非常熟悉的:iPhone、iPad等iOS设备的本地App Store或iTunes,以及Twitter和Facebook的客户端等。</p> <p>在混合型应用中,原生的部分其实只相当于一个架子或容器,应用的核心是基于HTML、CSS、JavaScrit或前端框架打造的页面视图。页面的静态文件资源可以存储在服务器端,动态数据通过Ajax的方式在页面视图与移动应用中传输。</p> <p>所以,虽然从技术上讲,混合型应用是设备本地化的,但它们显然拥有两种不同的运作方式。下面是两个很常见的问题,在需求评估时经常会遇到。</p> <h4> Q:如果我有技术及资源去开发一套纯粹的原生客户端应用,那么有什么必要使用HTML等Web前端开发方式去打造混合型应用呢?</h4> <p>A:混合性应用的解决方案最主要的目的是解决跨平台的问题;对于每个平台,只需开发和维护&ldquo;容器&rdquo;性质的本地应用部分,而实际的内容功能则可以统一由一套页面视图来担当。</p> <h4> Q:那么干脆只做一套Web App好了,为什么还要使用原生客户端作为容器呢?</h4> <p>A:这个问题的答案包括两方面:</p> <ol> <li> 商业需求:对于很多客户案例来说,将应用通过App Store或Market推广出去,是一种商业方面的需求。比如,客户也许会希望自己的产品是付费应用,或者开发前的用户研究表明他们的用户多数是通过App Store安装本地客户端的。</li> <li> 硬件功能需求:混合型应用的一个优势在于,虽然本地化的框架只是作为页面视图的容器,但它毕竟是本地化的,在需要的时候,仍可提供访问硬件设备及相关功能的权限;这是单一的Web App所无法做到的。技术方面,可以通过JavaScript经由本地应用框架,与硬件功能进行通讯,例如控制摄像头等。</li> </ol> <p>我确信,通过这种需求梳理,多数人会倾向于混合型应用的方式。其实这也正是本文接下来的主线&mdash;&mdash;我们一起来看看有哪些前端开发工具是可以帮助我们进行混合型应用的开发的。我将它们分为四大类,接下来会分别进行介绍,并对它们的适用情况进行简单的对比<a href="http://beforweb.com" rel="eLink">。</a></p> <h3> 跨平台的前端开发工具</h3> <p>这是第一大类,主要包括一些在传统Web前端开发方面比较常见的JS框架。它们在混合型应用的页面视图中可以起到同样重要的作用。</p> <h4> jQuery</h4> <p><a href="http://jquery.com/">jQuery</a>显然是最有群众基础的JS库之一,为各种常见的JS功能需求提供了统一的API,包括DOM操作、Ajax、事件绑定等。它通过了A、B、C全部三个级别浏览器(包括桌面与移动版本)的严格测试,拥有庞大的开发者社区以及优质的文档资源,并且是完全开源的。</p> <p>凡事有利必有弊,jQuery在浏览器方面的优异表现,一定程度上取决于它包含了大量用于修正桌面浏览器兼容性问题的代码;对于移动应用方面的开发来说,这方面的代码是没什么意义的。这让jQuery看起来有些重了。</p> <p>对我个人来说,如果需要开发一个传统的、主要用于桌面设备浏览的网站,那么jQuery会是我的主要选择。但是对于网站移动化方面的项目或是混合型应用的开发,我不会选择它。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-jquery.jpg" rel="lightbox"><img alt="developers-guide-mobile-frameworks-jquery" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-jquery.jpg" style="width: 500px; height: 354px; " /></a></p> <h4> Zepto</h4> <p>在移动化开发方面,作为一款更轻量的框架,<a href="http://zeptojs.com/">Zepto</a>是jQuery的一个不错的替代品。Zepto并没有被声明可以兼容旧浏览器,包括IE6等,同时,它在功能方面却几乎可以与jQuery媲美。如果你习惯于使用jQuery,那么你完全可以通过Zepto进行网站移动化或是混合型应用的开发。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-zepto.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-zepto" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-zepto.jpg" style="width: 500px; height: 405px; " /></a></p> <h4> XUI</h4> <p>作为一款轻量级JavaScript框架,<a href="http://xuijs.com">XUI</a>是特别为移动版本的浏览器打造的。XUI的侧重点是移动浏览器中最常见的功能需求,以最少的代码量实现最基本的功能。语法方面也很简单,不过与jQuery的风格有所区别,需要加以习惯。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-xui.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-xui" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-xui.jpg" style="width: 500px; height: 282px; " /></a></p> <h4> Lawnchair</h4> <p><a href="http://westcoastlogic.com/lawnchair">Lawnchair</a>也是一款轻量级JS库,它最大的特色是,可以将客户端抽象为持久化的&ldquo;无SQL&rdquo;风格的数据存储空间。它采用适配器模式,支持多重回调机制。语法风格非常简单直白,支持简单的query查询。</p> <p>在开发混合型应用或传统网站时,出于客户端持久化存储功能的需求,或是性能等方面的考虑,我会选择Lawnchair作为框架<a href="http://beforweb.com" rel="eLink">。</a></p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-lawnchair.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-lawnchair" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-lawnchair.jpg" style="width: 500px; height: 292px; " /></a></p> <h4> 其他</h4> <p>可以辅助移动应用开发的JS框架还有不少,并且会时不时的冒出一些新的。值得一提的还有<a href="http://nowjs.com/">now.js</a>、<a href="http://documentcloud.github.com/backbone/">backbone.js</a>和<a href="http://documentcloud.github.com/underscore/">underscore.js</a>等。</p> <h3> 专门用于打造移动客户端的JavaScript UI 框架</h3> <h4> jQuery Mobile</h4> <p>某种程度上说,<a href="http://jquerymobile.com/">jQuery Mobile</a>就相当于移动应用版本的jQuery UI;它是一个挂件库,用来将语义化的HTML标记语言转化成无论UI样式还是交互行为都更贴近移动设备原生风格的模式。</p> <p>继承了jQuery的优点,jQuery Mobile对A、B、C三个等级的移动浏览器保持了全面兼容。它推出的时间不长,但目标很明确&mdash;&mdash;为尽量多的移动浏览器打造用户体验最棒的移动应用。虽然略重了些,但jQuery Mobile绝对是打造移动应用的最佳框架之一。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jquery-mobile.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-jquery-mobile" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jquery-mobile.jpg" style="width: 500px; height: 383px; " /></a></p> <div class="embed"><article id="node-280" class="node node-related-books" about="/node/280" 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/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="jQuery Mobile即学即用" src="http://beforweb.com/sites/default/files/images/products/24.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">jQuery Mobile即学即用</a></h4> <p><a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书着眼于移动Web应用开发实战,从应用结构和导航开始,介绍了jQuery Mobile的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,以及事件、配置及响应式布局API,最后向读者展示了一个完整的Web应用开发示例...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <div class="embed"><article id="node-281" class="node node-related-books" about="/node/281" 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/jQuery-Mobile快速入门-布鲁林克/dp/B007TLW3KS/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="jQuery Mobile快速入门" src="http://beforweb.com/sites/default/files/images/products/25.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/jQuery-Mobile快速入门-布鲁林克/dp/B007TLW3KS/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">jQuery Mobile快速入门</a></h4> <p><a href="http://www.amazon.cn/jQuery-Mobile快速入门-布鲁林克/dp/B007TLW3KS/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面。读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> jQTouch</h4> <p>与jQuery Mobile类似,<a href="http://jqtouch.com/">jQTouch</a>同样是一款将语义化HTML标记转化为移动设备原生风格页面视图的挂件库。这两者之间的区别是,jQTouch是特别为A级WebKit内核的移动浏览器打造的。这意味着jQTouch可以使用WebKit内核浏览器的专有功能渲染页面,相比于JM,所需的代码更少。所以,当我手头项目的目标用户多数为WebKit内核浏览器使用者的时候,我会选择jQTouch进行开发。</p> <p>很快,jQTouch将支持Zepto,届时,jQuery就不再是打造页面视图本身功能的唯一选项了。这个改变将会有效的减小文件尺寸,降低运算处理时的系统资源开销。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jqtouch.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-jqtouch" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-jqtouch.jpg" style="width: 500px; height: 342px; " /></a></p> <h4> Sencha Touch</h4> <p><a href="http://www.sencha.com/products/touch/">Sencha Touch</a>是一个基于ExtJS的全功能挂件库。与jQTouch相同,Sencha Touch也是面向A级WebKit内核的移动浏览器的。基于ST打造的移动应用具有很强的健壮性,在UI方面的自适应性也很出色,例如,在平板电脑中,页面视图会切换至大屏幕规格,包括结构和元素的布局等。</p> <p>与jQuery Mobile或jQTouch不同的是,Sencha Touch不是基于HTML标记语言的,开发者必须采用客户端MVC风格直接书写JS代码,所以学习曲线略微陡峭。</p> <p>Sencha Touch比较适合开发那些主要运行在WebKit内核移动浏览器里的中到大型的Web应用<a href="http://beforweb" rel="eLink">。</a></p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sencha-touch.jpg" rel="lightbox"><img alt="developers-guide-mobile-javascript-frameworks-sencha-touch" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sencha-touch.jpg" style="width: 500px; height: 301px; " /></a></p> <div class="embed"><article id="node-283" class="node node-related-books" about="/node/283" 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/Sencha-Touch权威指南-陆凌牛/dp/B0090CM6HE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="Sencha Touch权威指南" src="http://beforweb.com/sites/default/files/images/products/28.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/Sencha-Touch权威指南-陆凌牛/dp/B0090CM6HE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">Sencha Touch权威指南</a></h4> <p><a href="http://www.amazon.cn/Sencha-Touch权威指南-陆凌牛/dp/B0090CM6HE/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书讲解了Sencha Touch的所有功能、特性、使用方法、开发技巧,让读者能做到对Sencha Touch了如指掌;它实战性强,不仅每个知识点都配有精心设计的小案例,而且还有综合性的案例,能让读者迅速获得实战经验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> SproutCore</h4> <p><a href="http://www.sproutcore.com/">SproutCore</a>同样是一款开源JS框架,最初的目的是帮助Web开发人员创建运行在桌面浏览器中的Web应用。实际上,它的功能太强大了,以至于苹果公司使用它来构建了最初版本的MobileMe.</p> <p>不过,源于它桌面应用的初始需求,SproutCore在尺寸方面对于真正的移动化解决方案来说还是略大了些,至少我最后一次用到它的时候是这样的情况。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sproutcore.jpg"><img alt="developers-guide-mobile-javascript-frameworks-sproutcore" src="/sites/default/files/images/201111/developers-guide-mobile-javascript-frameworks-sproutcore.jpg" style="width: 500px; height: 331px; " /></a></p> <h3> 跨平台的本地应用开发工具</h3> <h4> PhoneGap</h4> <p><a href="http://www.phonegap.com/">PhoneGap</a>可以将基于标准HTML、CSS和JS打造的页面视图封装为本地客户端应用,目前支持10种移动平台。在数据资源传输方面,可以采用普通Web App所使用的Ajax等方式。PhoneGap在页面视图与本地应用之间提供了一个桥梁,允许开发者通过JavaScript访问并使用移动设备的硬件功能,比如摄像头、联系人信息、麦克风等;这是单纯依靠移动浏览器运行的Web App类应用所无法实现的。</p> <p>PhoneGap不属于挂件库,它也不会将HTML编译为原生客户端代码。通过PhoneGap封装的移动应用,只能在运行的过程中即时执行JavaScript,所以它无法像前面介绍的几种JS UI框架那样提供一套完整的移动化UI方案。但是PhoneGap的侧重点很显然是在本地化封装这方面;我开发过的每一个混合型应用都会用到PhoneGap。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-phonegap.jpg" rel="lightbox"><img alt="developers-guide-mobile-frameworks-native-phonegap" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-phonegap.jpg" style="width: 500px; height: 332px; " /></a></p> <div class="embed"><article id="node-282" class="node node-related-books" about="/node/282" 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/PhoneGap开发指南-鲁尼/dp/B009AQ2XJG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="PhoneGap开发指南" src="http://beforweb.com/sites/default/files/images/products/26.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/PhoneGap开发指南-鲁尼/dp/B009AQ2XJG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">PhoneGap开发指南</a></h4> <p><a href="http://www.amazon.cn/PhoneGap开发指南-鲁尼/dp/B009AQ2XJG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书结合大量实例和代码对PhoneGap进行了详解,内容包括如何在不同平台上安装PhoneGap、构建以及调试应用程序,如何将移动Web转换为应用程序,如何管理跨平台代码库等。此外,本书介绍了移动JS库、CSS3的转场、变形和动画,以及如何使用PhoneGap访问设备感应器、使用摄像头、读写通讯录...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> Titanium Mobile</h4> <p><a href="http://www.appcelerator.com/products/titanium-mobile-application-development/">Titanium Mobile</a>可以直接将JavaScript编译为iOS或Android平台的本地应用代码。开发者们经常将它与PhoneGap做比较,其实它们的机制是截然不同的。在Titanium中,开发者需要按照它规定的语法书写应用代码,而无法使用原生JS;从这个角度讲,Titanium与前面提到的的Sencha Touch类似。对于资深JS开发者来说,这种方式不会带来很大困难,而新手则需要学习和适应。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-titanium-mobile.jpg" rel="lightbox"><img alt="developers-guide-mobile-frameworks-native-titanium-mobile" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-titanium-mobile.jpg" style="width: 500px; height: 387px; " /></a></p> <h4> Corona</h4> <p><a href="http://www.anscamobile.com/corona/">Corona</a>是一款商业SDK,使用Lua构建。开发者可以通过Corona为iOS和Android两大平台开发原生UI效果真实饱满的移动应用<a href="http://beforweb.com" rel="eLink">。</a>它拥有一个完整的图形和动画库,渲染引擎可以充分利用GPU的功能。这让Corana非常适合移动游戏的开发,不过它在普通移动应用开发方面的表现同样不错。</p> <p><a href="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-corona.jpg"><img alt="developers-guide-mobile-frameworks-native-corona" src="/sites/default/files/images/201111/developers-guide-mobile-frameworks-native-corona.jpg" style="width: 500px; height: 297px; " /></a></p> <h3> 企业级移动应用开发平台(Mobile Enterprise Application Platforms,MEAPs&nbsp;)</h3> <p>MEAP一种整合性的开发平台,通过一个后台,对跨平台移动应用的开发项目进行全周期的管理;涉及到的细节已经超出本文范围。之所以把这类放进来,是因为其中<a href="http://rhomobile.com/">RhoMobile</a>曾经被视为PhoneGap的竞争对手,但实际上它们根本不是一回事。典型的MEAPs平台有:</p> <ul> <li> <a href="http://www.antennasoftware.com/">Antenna Softwware</a></li> <li> <a href="http://pyxismobile.com/">Pyxis Mobile</a></li> <li> <a href="http://rhomobile.com/">RhoMobile</a></li> <li> <a href="http://www.sybase.co.uk/products/mobileenterprise/sybaseunwiredplatform">Sybase Unwired Platform(SUP)</a></li> </ul> <h3> 总结</h3> <p>我个人从不会将Web应用与本地原生应用看作非此即彼的两个独立命题,它们更像是一个范围的两个极值。很多时候,要考虑的不是选择哪种方式的问题,而是要根据需求,评估基于HTML、CSS和JS打造的Web App页面视图部分与原生应用的比例问题。</p> <p>使用前文提到的一些方法对需求进行评估,确认可以使用混合型应用的模式开发产品项目,接下来,我建议将目标放在对页面视图部分的比例控制上。根据产品的具体需求和设计情况,在保证不会对用户体验等方面起到负面影响的前提下,可以尽量多的使用基于HTML的前端页面视图,以增大跨平台功能的比例。你需要担心的跨平台方面的问题越少,用来打造优秀产品的精力及资源就相对越多。</p> </div></div></div><ul class="field_categories"><li class="front-end taxonomy-term-reference-0"><a href="/front-end" 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><li class=" taxonomy-term-reference-1"><a href="/point" 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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/9" typeof="skos:Concept" property="rdfs:label skos:prefLabel">JavaScript</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/58" typeof="skos:Concept" property="rdfs:label skos:prefLabel">jQuery Mobile</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/59" typeof="skos:Concept" property="rdfs:label skos:prefLabel">jQTouch</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/60" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Sencha Touch</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/61" typeof="skos:Concept" property="rdfs:label skos:prefLabel">PhoneGap</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel">框架</a></li></ul> Fri, 11 Nov 2011 14:08:02 +0000 C7210 22 at http://www.beforweb.com http://www.beforweb.com/node/22#comments 从网站到移动客户端应用 - 随"机"应变的用户体验设计 http://www.beforweb.com/node/14 <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-web-mobile-app-design-user-experience.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>话说,又是以移动应用为主线的文章,这是闹哪样呢。但也不至于和本小博客的主旨相悖;网站产品移动化,设计思路移动化...在移动互联网汹涌的大潮面前,这是合情合理的趋势,也是我们在用户体验设计相关的日常工作中越来越多需要面对和学习的。</p> <p>如果你一直以来从事着相对传统的交互、视觉等方面的Web设计工作,而如今开始打算扩展视野、提升技能、随&ldquo;机&rdquo;应变,做一名移动互联网的弄潮儿...那么本文很适合你阅读。相关领域中的几位牛人会在接下来的时间里带给我们一些很实在的经验之谈。全文大致分为三个主题:</p> <ul> <li> Web设计师需要学习哪些知识和技能,才能进入移动应用的设计和开发领域?</li> <li> 从设计的角度讲,移动客户端应用与传统网站页面之间的主要区别在哪里?</li> <li> 怎样提升移动客户端应用的用户体验?设计师需要特别注意哪些?</li> </ul> <p>开始进入正题。现如今,到处都有人在谈论移动应用方面的话题,从视觉外观到交互体验,这个那个的不亦乐乎<a class="eLink" href="http://beforweb.com">。</a>实际的统计数字也是蛮惊人的。最近,一份<a href="http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-Rear-view-Mirror">来自Flurry的研究报告</a>显示,用户(美国地区)每天使用移动应用的时间,平均下来是81分钟,已经超过了平均74分钟的上网时间<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p><a href="/sites/default/files/images/201110/chart-mobile-app-vs-web-consumption-2011.png" rel="lightbox"><img alt="chart-mobile-app-vs-web-consumption-2011" src="/sites/default/files/images/201110/chart-mobile-app-vs-web-consumption-2011.png" style="width: 500px; height: 333px; " /></a></p> <p>在这个世道里,身为用户体验设计相关从业人员的你,无论一直以来的主攻方向是交互、视觉还是前端,也许现在都已经开始琢磨着探索移动应用的相关领域了。</p> <p>本文中,我们将从三个主要问题入手,与几位业内专家进行探讨,看看他们在&ldquo;转型&rdquo;方面有哪些看法和建议。</p> <h3> Web设计师需要学习哪些知识和技能,才能进入移动应用的设计和开发领域?</h3> <h4> Josh Clark <span class="note">(设计师、开发人员,著有《<a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心 - 设计优秀的iPhone应用</a>》一书,译者老包)</span></h4> <p>说到正经八本的设计技术能力,在入门阶段其实没太多新东西需要学。我们完全可以使用已经轻车熟路的HTML、CSS和 JavaScript创建出用户界面非常优秀的客户端应用。别误会,我不是在谈论Web App形式(什么是Web App?请参考我们之前<a href="/node/12">关于网站移动化方法的文章</a>),我是指所谓的&ldquo;混合型应用(hybrid apps)&rdquo;,这是一种将基于HTML等前端技术实现的用户界面搭载在原生客户端上的方式,相当于为Web App穿上了原生客户端的外衣,并放到App Store当中。对于希望转型的传统Web设计和开发人员,这种方式是个不错的起点。</p> <p>关于&ldquo;混合型应用&rdquo;,Jonathan Stark写了两本很棒的书,分别是《<a href="http://www.amazon.cn/构建iPhone企业级应用-基于HTML-CSS-和JavaScript-斯塔克/dp/B0050381QC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">构建iPhone企业级应用&mdash;基于HTML, CSS 和JavaScript</a>》以及《<a href="http://www.amazon.cn/使用HTML-CSS和JavaScript开发Android程序-申林/dp/B005468TWQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">使用HTML、CSS和JavaScript开发Android程序</a>》,书中展示了怎样使用开源框架PhoneGap创建这种混合形式的客户端应用。</p> <p>作为入门是不错,但混合型应用在太多方面无法与原生客户端应用相提并论。如果你想打造在视觉及动画效果等方面都更加原汁原味的、特别是需要发挥设备硬件本身各种功能的应用的话,原生客户端应用仍然是不二之选。这就意味着你需要学习使用面向对象C语言(Objective-C)去写iOS应用,或是使用JAVA来打造Android版本。这些都是实实在在的编程语言,对于我们这样的Web设计相关人员来说,学习的难度会骤增;通常,我们可以与经验丰富的开发人员搭档,由他们将设计思路和方案通过代码实现出来。</p> <p>即使这样,我们也无需扔掉HTML、CSS、JavaScript或是相关的Web App前端开发框架&mdash;&mdash;这些工具可以帮助我们在开发原生应用的过程中创建快速原型&mdash;&mdash;无论视觉还是交互方面都相当高保真的快速原型。</p> <p>说到设计工作本身,特别在用户体验方面,移动应用与传统网页之间还是有着显著差异的。有两点需要特别注意:人机交互方式与使用场景。</p> <ul> <li> 对于移动设备来说,你需要面对和解决的交互设计方面的问题会有很多,和以往不同,你现在是在为手指做设计。你必须考虑的一个问题是,怎样的页面元素布局可 以让拇指自由的操作并充分的休息。另外,当用户在进行操作时,界面的一部分必然会被拇指遮挡住,所以要尽量保证控制元件的布局不会干扰到实际内容。类似这 样的问题还有很多,多数可以归纳到&ldquo;舒适度&rdquo;与&ldquo;可视性&rdquo;这两方面。这也是多数触屏智能手机会将主要控制元件或导航一类放在屏幕底部的原因&mdash;&mdash;而这些与传 统Web设计的习惯正好相反。</li> <li> 你需要知道用户多数会在怎样的环境下以怎样的方式使用客户端应用。对于这个问题,我们通常有个误解,就是觉得用户都会在很忙很赶、无法集中注意力的情况下使用应用。其实这只是实际情况的一部分,&ldquo;移动应用&rdquo;并非只在移动的状态下被使用;很多时候,人们会在沙发上、在厨房中、在机场候机时进行操作。在这些场景里,用户拥有足够多的操作时间,注意力也可以非常集中。另外,移动设备在很多方面的功能是超越桌面计算机的,譬如GPS、内置麦克风及摄像头、触控、陀螺仪、罗盘等;基于这些功能打造的不同类型的客户端应用,它们所对应的使用场景也各有不同<a class="eLink" href="http://beforweb.com">。</a></li> </ul> <p>不要过于自信的假设用户的意图。移动应用未必代表功能的简化,当你告诉自己&ldquo;用户并不需要在移动版本中使用这个功能&rdquo;时,你也许是错的。回忆一下你是否有这样的经历:在移动设备的浏览器中打开一个你所熟悉的网站,却发现页面跳转到了所谓的移动版本,不仅在视觉和操作上与你的习惯不符,更糟的是也许它所简化掉的功能正是你所需要的。虽然用户正在使用小屏幕设备,但这不代表他们需要获取的信息、需要使用的功能变少了<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-262" class="node node-related-books" about="/node/262" 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/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="触动人心:设计优秀的iPhone应用" src="http://beforweb.com/sites/default/files/images/products/06.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心:设计优秀的iPhone应用</a></h4> <p><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何从iPhone的角度来思考和理解应用设计,使你明白怎样去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计实例和思考过程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <p>我想说的是,我相信在多数情况下,无论移动应用还是所谓的移动版页面,它们都应该与桌面版的网站及产品具有相似的内容与功能。当然,正如我们在前面提到的,在呈现及交互方式等方面,它们需要基于设备自身的特点而区别对待,但在内容方面应当尽可能保持一致。有些时候,移动应用甚至需要做的更多,拿亚马逊(Amazon)举例子,他们的移动客户端应用还具有条码扫描功能;这是充分利用移动设备特有功能的典型案例。</p> <p>从网站移动化这个角度来说,作为Web设计和开发人员,需要把思路锻炼的更加具有弹性。在过去超过15年的时间里,我们只是为桌面浏览器设计网站。真正的Web设计不该是这样的,它应该中立于平台之间的差异,在任何设备、任何尺寸的屏幕中都保证可访问性及可用性。</p> <p>当然,在移动设备大规模普及之前,我们确实很难看到这一点;现在,我们开始了解到自己的网站和产品会被各种类型的设备访问及使用。这并不是说我们要为所有类型的设备都单独打造一个版本&mdash;&mdash;真正需要的是让网站有足够的适应性和响应性。</p> <p>关于响应式Web设计,可以参考我们之前的两篇文章:&ldquo;<a href="/node/6">什么是响应式Web设计?怎样进行?</a>&rdquo; 以及 &ldquo;<a href="/node/7">通过CSS3 Media Query实现响应式Web设计</a>&rdquo;。</p> <h4> Robin Nixon <span class="note">(Web开发人员、科技文章作者,著有<a href="http://www.amazon.com/HTML5-iOS-Android-Beginners-McGraw/dp/0071756337/ref=sr_1_1?ie=UTF8&amp;qid=1318865483&amp;sr=8-1">HTML5 for iOS and Android: A beginner&#39;s Guide</a>一书)</span></h4> <p>在我看来,对于传统Web设计及开发人员来说,进行扩展或转型的最佳入门方式,就是保持手头技术的先进性,包括HTML(5)、CSS(3)和JavaScript;目前,将Web App整合成为原生客户端应用的解决方案正在日趋成熟,要实现产品的移动应用化,我们并不一定需要花时间学会那些复杂的编程语言,比如面向对象C语言、JAVA、.NET等。只要你拥有足够扎实的前端设计和开发能力,你就可以很轻松的创建Web App。</p> <h4> Aaron Maxwell <span class="note">(Mobile Web Up创始人)</span></h4> <p>从设计的角度讲,多数概念和技能依然适用。作为一名设计师,你要清楚自己希望用户在使用移动应用的过程中做出怎样的行为,你希望自己的产品能够提供怎样的用户体验。这种说法虽然有些务虚,但是将注意力集中在这些问题上并延伸思考下去,确实是一个良好的开端。</p> <p>菜单是一种可以带来高效率的UI组件,除非你提供的菜单项过多。试着以逐层滑入作为呈现方式,将菜单项以合理的继承关系组织起来,确保每层里面的菜单项不要过多。另外,标签(tab)形式的导航也是移动应用中的重要元素。</p> <p>和传统Web页面一样,移动应用界面中的留白也是一门学问。怎样使用留白来表达视觉元素之间的关联及分组关系,是需要认真琢磨和尝试的。尤其受移动设备屏幕的可视区域尺寸所限,在对元素之间距离的控制方面,我们并没有太多像素可用,所以对像素级细节的把握能力就显得越发重要了。</p> <p>要记得在适当的时候舍弃一些元素。比如,在设置菜单中,每添加一个菜单项都会增加操作的复杂度,使用户多花费一份时间和注意力在他们未必需要的功能里面。对于你的产品所涉及到的使用场景,要做到充分的了解,并在此基础上判断功能元素的优先级,做好取舍。</p> <h4> Sarah Lynn <span class="note">(Web设计师、创意设计师)</span></h4> <p>在向移动领域转型这方面,我个人认为最棒的、最切实可行的入门方式,就是研究学习市面上的各种移动应用。观察它们,分析它们的功能,学习它们对原生控件的利用方式;去实际使用这些应用,熟悉并理解各种控件的交互方式,并将不同的应用加以对比。另外,不少公司和团队都做过大范围的用户研究,你可以通过他们的研究报告学到很多东西,尤其是在用户体验等方面<a class="eLink" href="http://beforweb.com">。</a></p> <p>另外,有些不错的书也可以帮助你入门。我最推荐的一本,是Suzanne Ginsburg的《<a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone应用用户体验设计实战与案例</a>》。</p> <p>有些工作需要花时间和心思去执行,比如,要学会获取用户的反馈,另外一点是在进入实际设计开发流程之前,做好充分的计划工作;在初期可以制作纸质原型,并尽早与用户或有经验的移动应用设计开发人员进行交流<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-264" class="node node-related-books" about="/node/264" 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/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone应用用户体验设计实践与案例" src="http://beforweb.com/sites/default/files/images/products/08.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone应用用户体验设计实践与案例</a></h4> <p><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书简述了iPhone硬件和应用风格,逐步介绍了如何进行前期的用户研究和竞争性分析,以及提升iPhone应用用户界面和视觉设计的最佳实践。全书通过13个案例分析展示了知名设计师的实践过程,为读者了解应用背后的设计过程提供了第一手资料...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 从设计的角度讲,移动客户端应用与传统网站页面之间的主要区别在哪里?</h3> <h4> Sarah Lynn</h4> <p>我认为最大的区别还是在于交互设计方面。</p> <p>比起传统的Web设计,你要考虑的东西有很多不同,比如移动设备的屏幕尺寸、不同系统平台之间的差异、使用场景和用户习惯等。移动应用的使用场景其实有很多,包括最常见的在&ldquo;移动&rdquo;中使用;另外一个常见的但是往往被忽视的场景,就是用户身处稳定的环境中,但因为没有条件或懒于使用台式机或笔记本,所以使用移动设备应用代替执行。所以,要清楚你的应用最适宜的使用场景,针对这些场景中的用户习惯进行相应的设计。以目标用户为中心,这个原则无论对移动应用设计还是网站页面设计,都是必须贯彻的。</p> <p>从传统Web向移动应用转型的过程里,怎样很自然的把设计对象想的更小更弹性,这是个不小的挑战。屏幕定向也是必须考虑的问题,你必须让你的应用在横竖两种模式下都可以很好的工作,并充分发挥每种定向方式的优势。</p> <p>在入门阶段,建议首先选定一个平台,把它的优点和缺点都吃透,对该平台的设备可以提供的原生功能做到充分了解。做选择时需要考虑的因素是多方面的,包括对自己的应用所需提供的功能的充分规划,以及对目标用户群的研究等。</p> <h3> 怎样提升移动客户端应用的用户体验?设计师需要特别注意哪些?</h3> <h4> Mike Gualtieri <span class="note">(精算分析师,报告书<a href="http://www.forrester.com/rb/Research/mobile_app_design_best_practices/q/id/59132/t/2">Mobile App Design Best Practices</a>的作者)</span></h4> <p>相比于普通的Web站点,用户对移动应用的期望值更高。苹果的iPhone等产品为移动应用树立了很高的威望,尤其是在设计方面;多点触摸和手势等功能为移动应用带来了全新的革命性的交互方式。想要在移动应用中实现优秀的用户体验设计,你必须对用户有充分的了解,甚至超过他们对自身的了解。传统的用户研究方式仍可以有效的帮助我们创建人物角色,了解他们的实际需求、对应用的使用场景等。</p> <p>通常情况下,对于移动应用,设计师要尽量考虑到以下5点因素,以指导交互和视觉设计流程:</p> <ul> <li> 地点:用户会在任何地方使用移动应用。</li> <li> 移动:用户会在移动的状态下使用应用,比如走路、慢跑,或是在汽车等交通工具里。</li> <li> 即时:用户会随时拿出设备使用应用。</li> <li> 偏好:有条件的情况下,用户会根据不同的需求使用不同的移动设备;有些用户会对设备产生数码依赖感,有些则是根据实际需求偶尔使用,情况因人而异。</li> <li> 设备:移动设备只是个笼统的概念,对于某些应用,必须全面的考虑到各种设备,比如智能手机、平板电脑、电子阅读器等<a class="eLink" href="http://beforweb.com">。</a></li> </ul> <p><a href="/sites/default/files/images/201110/mobile-app-user-experience-consideration.jpg" rel="lightbox"><img alt="mobile-app-user-experience-consideration" src="/sites/default/files/images/201110/mobile-app-user-experience-consideration.jpg" style="width: 500px; height: 242px;" /></a></p> <h4> J.D.Biersdorfer <span class="note">(科技产品记者,著有<a href="http://www.amazon.com/Best-iPhone-Apps/dp/1449394140/ref=sr_1_29?ie=UTF8&amp;qid=1311339073&amp;sr=8-29">Best iPhone Apps</a>)</span></h4> <p>在写Best iPhone Apps的过程里,我观察并尝试了400到500种iPhone应用,总结下来,我认为,能够带来很好的用户体验的,多数是那些针对移动设备特性而在视觉与交互方式等方面专门进行打造的应用。而那些很明显在沿用传统Web设计思路的、对屏幕尺寸和触控操作方式都缺乏考虑的应用,无论是元素的视觉风格,还是布局的组织、空间的控制等方面,多数会产生不尽如人意,甚至是很糟的体验<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-285" class="node node-related-books" about="/node/285" 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/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动互联:用户体验设计指南" src="http://beforweb.com/sites/default/files/images/products/30.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动互联:用户体验设计指南</a></h4> <p><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书阐述如何设计出独一无二的移动体验,展示移动用户体验最重要的要素,介绍各种设计框架和实践。本书首先介绍移动用户体验的关键特点,接着介绍五种广泛使用的移动用户体验模式,然后介绍移动体验设计的设计实践、原型方法以及设计指南,最后讨论移动体验的前沿设计...</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="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" 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><li class=" taxonomy-term-reference-1"><a href="/point" 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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户研究</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li></ul> Thu, 20 Oct 2011 14:36:27 +0000 C7210 14 at http://www.beforweb.com http://www.beforweb.com/node/14#comments 走出移动互联网的迷宫 - 网站移动化的方法策略 http://www.beforweb.com/node/12 <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/iphone-android-mobile-web-icon.png" width="70" height="80" /></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>继两篇关于<a href="/taxonomy/term/7">响应式Web设计</a>的译文之后,再来搞一篇&ldquo;网站移动化&rdquo;方面的。琢磨着自己大概是无论穿着什么鞋都打算趟趟这摊浑水的样子了。</p> <p>今次篇幅不长,在我看来,本文更像是当老板或产品决策者无论穿着什么鞋都打算趟趟这摊浑水时,作为项目执行者,尤其是用户体验设计团队,所能给到的建议和方法参考。正像前面那篇&ldquo;<a href="/node/9">步步为营的用户体验设计 - 团队、影响力、协作与策略</a>&rdquo; 一文中提到的:&ldquo;其实,&lsquo;用户体验设计&rsquo;并非用来获取答案,它应该为项目执行方式的选择提供建议,或是为更好的设计开发流程创建架构。&rdquo;OK走着吧。</p> <p>眼下,移动互联网正扮演着越来越重要的角色,无论开发者还是普通用户,几乎所有人都在谈论它。传统互联网用户所习惯的那些访问内容、使用服务的交互方式正在被智能手机、平板电脑等设备迅猛的改变。作为线上内容及服务的提供者,我们必须尽快进入这个新兴市场,学习新的游戏规则<a class="eLink" href="http://beforweb.com">。</a></p> <p>愿望是好的,&ldquo;移动化&rdquo;的方式却会时常让人找不着北。究竟应该怎么做?开发一款iPhone或Android应用吗?还是为网站专门搞一套或N套适用于不同移动设备的设计方案?最重要的莫过于首先对自己产品的内容及功能进行正确定位,对移动化需求的程度进行合理的评估;在此基础上,尝试最适合自己的移动化方式。目前,有一些比较常见的思路可以供我们参考选择:</p> <!--break--><h3> 什么也不做...</h3> <p>这确实是一种选择,而且没有听上去那么让人沮丧。</p> <p>使网站在桌面浏览器与移动设备中的渲染方式保持一致&mdash;&mdash;这种处理方式并非不可行,尤其是在缺乏各方面开发资源的情况下。对于iPhone或iPad一类拥有多点触摸等功能的相对高端的设备来说,用户多数已经习惯了、甚至乐于进行转屏及双指放大操作。何苦为了移动而移动的去为这些用户提供一个缩水版本的网站呢?</p> <p>这自然是再廉价不过的方案了。不过,平板电脑毕竟不是小型PC,智能手机也并非小型平板电脑,在很多方面,它们自身的特点都决定了独特的交互方式。如果想切实提升网站内容或功能在不同设备上的适应能力,单独开发移动版本显然是一条必经之路。</p> <h3> 响应式页面设计</h3> <p>响应式页面设计的主要思路是,页面对浏览环境的尺寸所处的规格范围进行判断,并加载对应的预设样式方案,从而响应式的调整布局结构、内容元素的尺寸等。</p> <p>如果页面的内容结构与样式分离的足够好,那么这种方式是具有长远保证的,我们不需要为任何现有或将来的、拥有不同屏幕分辨率的设备面面俱到的进行单独设计开发。这种方式无论从交互设计还是UI视觉等方面,其实仍属于相对传统的页面设计开发模式,并不会增加太多的成本,可以说是一种性价比很高的选择<a class="eLink" href="http://beforweb.com">。</a></p> <p>关于响应式Web设计的概念、组成要素、基本实现思路和开发方式等,可以参考我们之前的两篇文章:&ldquo;<a href="/node/6">什么是响应式Web设计?怎样进行?</a>&rdquo; 以及 &ldquo;<a href="/node/7">通过CSS3 Media Query实现响应式Web设计</a>&rdquo;。</p> <p><a href="/sites/default/files/images/201110/showcase-of-responsive-web-design-for-mobile-website-2.png" rel="lightbox"><img alt="showcase-of-responsive-web-design-for-mobile-website" src="/sites/default/files/images/201110/showcase-of-responsive-web-design-for-mobile-website-2.png" style="width: 500px; height: 171px; " /></a></p> <div class="embed"><article id="node-259" class="node node-related-books" about="/node/259" 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/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计实践" src="http://beforweb.com/sites/default/files/images/products/02.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">响应式Web设计实践</a></h4> <p><a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"> 本书结合理论与实践,辅以大量配图、注释和引用,详尽介绍了如何结合使用流动布局、媒介查询和流动媒介来构建响应式网页;如何从项目一开始就采用响应式的工作流程;如何为不同的设备强化内容;如何使用功能检测和服务器端检测来提供更好的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> Web应用(Web App)</h3> <p>通过对HTML5、CSS3、JavaScript或相关前端开发框架(<a href="http://www.sencha.com/products/touch/">Sencha</a>、<a href="http://jquerymobile.com/">jQuery Mobile</a>等)的配合使用,我们可以创建出一种独特的页面内容呈现及功能使用模式,无论是视觉风格还是交互方式,它都更像应用程序,而非我们习惯于在桌面浏览器中看到的页面。</p> <p>任何安装了现代浏览器的设备都可以浏览使用Web应用,从这个角度讲,它具有一定的跨平台性。根据资源条件,你可以只做一款Web应用,也可以使用不同的UI元素风格为iOS、Android或是Windows打造不同的皮肤及相应的行为触发方式。</p> <p>然而,Web应用的本质仍然是页面,它依赖于浏览器环境。所以,虽然在外观和行为方面可以做到与原生客户端应用很相似,但从功能和用户体验的角度来说,它仍然是一种局限很大的方式。</p> <p><img alt="jquery-mobile-framework-html5-css3-javascript" src="/sites/default/files/images/201110/jquery-mobile-framework-html5-css3-javascript.png" style="width: 380px; height: 377px; " /></p> <div class="embed"><article id="node-280" class="node node-related-books" about="/node/280" 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/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="jQuery Mobile即学即用" src="http://beforweb.com/sites/default/files/images/products/24.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">jQuery Mobile即学即用</a></h4> <p><a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书着眼于移动Web应用开发实战,从应用结构和导航开始,介绍了jQuery Mobile的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,以及事件、配置及响应式布局API,最后向读者展示了一个完整的Web应用开发示例...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 原生客户端应用(Native App)</h3> <p>在内容呈现方式与操作行为方面,原生客户端应用与网站网页有着巨大的差异。这种方式可以挖掘移动设备的硬件与系统所蕴藏的各种技术功能,比如罗盘、陀螺仪、摄像头、存储介质(包括离线存储或云端)、NFC(什么是NFC?Near Field Communication,近距离无线通信、近场通信)等。</p> <p>原生客户端还可以给用户带来最流畅的操作体验,因为有一整套标准的原生UI组件和交互方式供开发者使用和遵循。</p> <p>相应的,这种方式的开发成本也是以上几种方案中最高的,无论技术能力还是开发时间等方面。而且,我们需要针对每种系统环境及设备类型进行独立开发。原生客户端基本不具备跨平台性。</p> <p><img alt="iphone-ios-app-store-application" src="/sites/default/files/images/201110/iphone-ios-app-store-application.jpg" style="width: 500px; height: 330px; " /></p> <div class="embed"><article id="node-308" class="node node-related-books" about="/node/308" 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-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS 6应用开发入门经典(第4版)" src="http://beforweb.com/sites/default/files/images/products/54.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS 6应用开发入门经典(第4版)</a></h4> <p><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书循序渐进地介绍了从事iOS开发所需的基本知识,包括使用Xcode、Objective-C和Cocoa Touch等开发工具,设计及美化用户界面,利用多场景故事板、切换、弹出框、导航控制器和选项卡栏控制器...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 应该选择哪种方式?</h3> <p>在制定网站产品移动化策略的时候,我们需要考虑以下几点因素:</p> <h4> 我需要客户端应用吗?</h4> <p>无论Web应用还是本地原生客户端,它们主要适用于提供一种特定的功能,帮助用户完成特定的任务。如果需求是将企业站点或同类型的网站整体移动化,那么客户端应用并不是合适的选择。如果目标网站属于客户服务、电子商务、在线工具等类型,那么客户端的形式是值得考虑的。</p> <h4> 我需要客户端应用,但用户是否真的需要呢?</h4> <p>我们必须了解我们的网站及产品的目标用户群,并且做切实的调研,了解主要用户群是否会通过移动客户端的方式使用我们的服务。</p> <p>不同的群体倾向于不同类型的设备,使用同类型设备的用户群体又需要根据不同的设备系统环境做进一步的划分,譬如iOS用户对App Store的使用频率会高于Android用户使用安桌市场的频率。</p> <p>如果产品的目标用户群范围过大,那么除非我们有足够的资源来支持几条战线上的、长期的开发和维护工作,否则原生客户端未必是最好的选择。这种情况下,Web应用的方式是值得尝试的。虽然在用户体验等方面赶不上原生客户端,但是从平台适应性及开发成本的角度来说,整体性价比却不错<a class="eLink" href="http://beforweb.com">。</a></p> <h4> 我不需要客户端应用</h4> <p>除非决定什么也不做,否则响应式Web设计就是我们的最佳实践方式了。不过虽然问题表面是关于样式和呈现方面的,但是在页面代码结构上,也许需要进行很多的重构工作。当然,如果你的网站在结构和表现分离等Web标准化方面已经做到了足够的无懈可击,那么可以相对轻松很多。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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="/point" 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/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/8" typeof="skos:Concept" property="rdfs:label skos:prefLabel">CSS3</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li></ul> Thu, 13 Oct 2011 13:20:04 +0000 C7210 12 at http://www.beforweb.com http://www.beforweb.com/node/12#comments