﻿<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:xg="http://ucdchina.com/schemas/rss">	
 		<channel>
 			<title>移动设备的手机设计 - UCD大社区</title>
 			<link>http://ucdchina.com/rss/topic_posts?id=369</link>
 			<description>移动设备的手机设计 - UCD大社区</description>
 			<webMaster>qingping.hu@gmail.com</webMaster>
			<pubDate>2026-05-16 06:30:33</pubDate>			<item>
				<title>移动应用的成功准则 - 从产品概念到市场推广</title>
				<link>http://ucdchina.com/snap/12470</link>
				<description>&lt;div&gt;
&lt;div class=&quot;article-entry&quot; style=&quot;margin: 0px 0px 22px; padding: 0px; font-size: 1.2em; line-height: 1.8; color: #333333; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;&quot;&gt;
&lt;div class=&quot;field field-name-body field-type-text-with-summary field-label-hidden&quot; style=&quot;margin: 0px; padding: 0px;&quot;&gt;
&lt;div class=&quot;field-items&quot; style=&quot;margin: 0px; padding: 0px;&quot;&gt;
&lt;div class=&quot;field-item even&quot; style=&quot;margin: 0px; padding: 0px;&quot;&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;多数应用产品会走向失败。残酷的现实甚至让很多不抱希望的设计师和开发者们开始认为，只有运气足够好，才能在App Store当中获得成功。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;这种想法就像用来缓解失败痛苦的麻醉剂，其实蛮危险的。痛苦不是坏事，痛苦才有救，才能让人看到问题所在。如果我(英文原文作者)的应用失败了，我会首先在产品身上找原因，而不是毫无意义的埋怨那些我们控制能力以外的因素。大家所处的环境是相同的，为什么不想想看来自&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://taptaptap.com/&quot; target=&quot;_blank&quot;&gt;tap tap tap&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;或&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://tapbots.com/&quot; target=&quot;_blank&quot;&gt;Tapbots&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;的家伙们为什么就能一再获得成功呢？&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;本文所归纳出的&quot;移动应用成功准则&quot;，内容涉及产品概念、设计、开发、市场推广这四个方面。必须承认，在现实当中，我们其实很难完美无暇的将这些准则落实到位，但有一点是肯定的：沿着正确的道路向正确的目标努力前行，你能获得成功的几率将增大很多；我们可以依靠的绝不只有运气。另外，虽然本文当中的相关内容及案例都是以iOS为例的，但其中的道理同样适用于其他平台。&lt;/p&gt;
&lt;h3 style=&quot;margin: 1.2em 0px 0.8em; font-size: 1.3em; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif; padding-bottom: 0.05em; color: #111111; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #ececec;&quot;&gt;产品概念&lt;/h3&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;任何一款成功的应用都需要以坚实的产品概念作为基础，因为概念决定了产品最终所拥有的潜力。如果你在洗澡时突然冒出个什么想法，要记得抵抗住将它立刻落实成产品的冲动与诱惑&amp;mdash;&amp;mdash;首先做一点前期的研究工作叭，这能帮你在接下来的环节中省去不少麻烦。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;寻找空白点&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 432px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/01-vacuum-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;01-vacuum-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;Phill Ryu(&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://www.twitter.com/phillryu&quot; target=&quot;_blank&quot;&gt;@phillryu&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;)在一份记录中对App Store里的一些成功应用进行了持续的追踪，包括Clear、The Heist、Classics等等。他验证自己产品概念的方式很简单&amp;mdash;&amp;mdash;通过对这些流行应用的解读来寻找&amp;ldquo;空白点&amp;rdquo;。其实App Store里的应用在产品质量、用户体验、概念创新等方面有太多的空白点有待填补了，简单看几个例子：&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 120px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/02-clear-tweetbot-itranslate-voice-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;02-clear-tweetbot-itranslate-voice-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;https://itunes.apple.com/us/app/clear/id493136154?mt=8&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;Clear&lt;/strong&gt;&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;：Clear之所以能够在一坨一坨的待办事项应用当中脱颖而出，最重要的一个原因就是它填补了同类产品在交互方式及UI方面的空白点。在一个充满了竞争者的领域中构思新产品概念，这听上去似乎不是一种聪明的做法，但实际上，摊子越大，其中的空白和机遇就可能越多，关键看你能否敏锐的察觉到它们并提出新的解决方案。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;https://itunes.apple.com/us/app/tweetbot-for-twitter-iphone/id428851691?mt=8&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;Tweetbot&lt;/strong&gt;&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;：Twitter收购了Tweetie并实施免费政策来取悦大众；而Tweetbot则通过更加强大和高效的功能抓住了大批中高级用户。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;https://itunes.apple.com/us/app/itranslate-voice/id522626820?mt=8&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;iTranslate Voice&lt;/strong&gt;&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;：苹果推出了Siri，让整个世界着了迷，同时也在智能语音这个方向上开拓出了一片天空，给iTranslate Voice这样的操作方式类似Siri但功能有所区别的应用带来了不少机遇。每项新技术的诞生总会在一个或多个领域当中制造出有待填补的空白。&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;随着应用产品数目的不断增加，想轻而易举的找到一个可以迅速切入并有所斩获的领域已经不大可能了，不过如果你足够用心，仍然可以找到不少空白点。试着挖掘一些你有兴趣有能力去填补的空白，做做看。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;考虑收入问题&lt;span class=&quot;normalFont&quot; style=&quot;font-weight: normal;&quot;&gt;(原标题&quot;Show Me the Money&quot;,星际诶)&lt;/span&gt;&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;多数应用是不赚钱的。如果产品收入对你来说确实非常重要，那么最好首先花些时间了解一下哪些类型的应用可以帮你赚钱，哪些不能。基于Marco Arment的&amp;ldquo;&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://www.marco.org/2009/10/09/the-two-app-stores&quot; target=&quot;_blank&quot;&gt;双App Store理论&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;&amp;rdquo;，我将所有应用产品划分为4类，其中的3类可以带来收入。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 453px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/03-price-revenue-category-profit-per-user-downloads-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;03-price-revenue-category-profit-per-user-downloads-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;大众产品&lt;/h5&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;高价值，低价格。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;对多数人都具有吸引力，并特别瞄准于那些喜爱浏览排行榜而且会产生购买冲动的用户。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;通过大规模的推广活动来带动产品发布。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;经由庞大的下载量来提升整体收入。&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;产品案例：Clear ($3)、iTranslate ($1)&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;优质的小众产品&lt;/h5&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;低价值，高价格。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;瞄准于小众缝隙市场。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;目标用户群通常会通过详细周密的调研而最终锁定产品并付费购买。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;具有非常高的单个用户利润。&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;产品案例：OmniFocus ($10)、Proloquo2Go ($190)&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;优质的大众产品&lt;/h5&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;高价值，较高的单个用户利润。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;最适合于那些拥有资金并力图扩大收益的新创团队。&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;产品案例：TomTom GPS ($50)、Pandora (每月的订阅费用$3.99)、那些需要在应用内购买附加装备或点数的免费应用。&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;多数失败的产品&lt;/h5&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;低价值、较低的单个用户利润。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;即使这类应用获得了一些人气，有限的吸引力和低廉的价格也阻碍着产品取得真正的成功。&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;开发者们喜欢读一些移动应用百万富翁的励志故事，喜欢关注各种移动设备每天卖出多少多少台的报道，然后对他们极其小众的应用产品的前景做一番乐观的预估。他们认定，只要能够获得庞大市场当中一小部分用户的青睐，他们就能以0.99美金的价格将应用卖出去，并且为自己开创出一个崭新的未来。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;事情恐怕没这么简单。当他们发现应用上线第一天只有6次下载，而且都是来自家人和朋友，他们才会意识到现实的残酷。也许这款应用可以满足他们自己的需求，但过于小众化的产品确实难以取得真正的成功。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;想想看你的产品是否属于这一类型。这可不是个小问题。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;开发一款能够帮你赚钱的应用确实不是易事。正如David Barnard在&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://appcubby.com/blog/the-sparrow-opportunity/&quot; target=&quot;_blank&quot;&gt;App Cubby的博客&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;中所提出的，也许免费增值模式才是可持续收益的解决之道，也就是以免费的方式尽可能多的吸引用户下载应用，然后通过一些有创造性的方式让那些希望获取更多使用价值的用户进行付费。这种模式在非游戏类的应用当中还没有得到过充分的验证，不过至少在业内引发了一些讨论。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;相关阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/42&quot;&gt;2012年移动应用发展的五个趋势&lt;/a&gt;&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;作出价值声明&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;将产品概念当中最核心的内容写下来，用一句话定义你的应用及它的目标市场。例如：&lt;/p&gt;
&lt;blockquote style=&quot;margin: 0px; padding: 0px 0px 0px 1em; color: #777777; border-left-width: 10px; border-left-style: solid; border-left-color: #efefef;&quot;&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;Grades应用可以帮助大学生们了解自己下个学期需要修满多少学分。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;如果你不能通过一句话来清晰的描绘出产品的基础价值，那么它也许过于复杂了。移动应用应该在一个目标任务上做到极致，而不是面面俱到。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;当你可以准确的定义出产品核心价值的时候，检查一下其他方面的功能是否与之相悖，如果有的话，可以试着做做减法了。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;相关阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/105&quot;&gt;初创型团队容易在用户体验方面犯的十个错误&lt;/a&gt;&lt;/p&gt;
&lt;h3 style=&quot;margin: 1.2em 0px 0.8em; font-size: 1.3em; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif; padding-bottom: 0.05em; color: #111111; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #ececec;&quot;&gt;设计&lt;/h3&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;设计是苹果文化当中极其关键的组成要素；它对于一款应用能否取得成功所起到的决定作用也是不言而喻的。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;别让我思考(Don't Make Me Think)&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;和网站服务相似，大部分移动应用对于用户来说都是随需随用的。用户总是缺乏耐心的，如果一款应用不能在加载之后立刻展示出自身的功能特色及使用方法，用户很有可能放弃使用。本小节的标题引用了Steve Krug的书名，这也正是我们想要表达的：别让用户思考；好的界面应该像门把手那样简单易懂。&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;返璞归真&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;每一个功能都会不可避免的增加应用的复杂度，哪怕这个功能再酷。试着剥除产品当中与核心价值无关的一切元素，让应用呈现出它最本质最精华的面貌。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;看看下面的截图，同样是待办事项类的应用，左侧的产品中充斥着各种所谓的很&amp;ldquo;酷&amp;rdquo;的功能，实际上已经影响了核心功能的体验；而大获成功的Clear则是如此的简洁直白，所见即是精华。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 375px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/04-simple-clear-essence-complexity-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;04-simple-clear-essence-complexity-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;推荐阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/66&quot;&gt;iOS用户体验解析&lt;/a&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;考虑用户习惯及界面设计规范&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;用户会根据已有的使用经验对应用的各类界面元素建立起一套行为预期。记得学习不同平台的界面设计规范(&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html&quot; target=&quot;_blank&quot;&gt;iOS人机界面设计规范&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;、&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://developer.android.com/guide/practices/ui_guidelines/index.html&quot; target=&quot;_blank&quot;&gt;Android用户界面设计规范&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;)，在做出突破和创新之前首先了解一下最基本的交互和视觉设计规则。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;对比下图当中的两款同类产品(帮助学生查看学分)，左侧的应用为了追求独特的交互与视觉风格，刻意忽略掉了最基本也是最符合用户习惯的导航及输入机制；右侧的应用(我的Grades)则基于iOS的标准方式进行了适度的定制化，即实现了独特的风格，同时也符合用户的使用习惯。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 375px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/05-grades-custom-ui-interaction-mode-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;05-grades-custom-ui-interaction-mode-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;推荐阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/119&quot;&gt;先了解规则，再寻求创新 - 关于iOS应用界面自定义&lt;/a&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;像人类一样思考&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;作为正常的人类，用户会在头脑中对现实世界当中各种事物的运作规律进行建模。设计方案要符合人们对于现实世界的认知，而不是被各种编程技术或数据库解决方案所局限。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;以条码扫描应用RedLaser为例。在最初的版本中，用户在对准条码后必须点击拍摄按钮才能获取信息，这显然不符合真实的条码扫描器的工作方式。还好，他们后来意识到了这一点并做了改进。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 376px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/06-redlaser-scanner-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;06-redlaser-scanner-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;少让用户做点事&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;用户都比较懒，他们不喜欢阅读使用说明，不喜欢打字，不喜欢翻来覆去的执行操作。好的产品应该将需要用户执行的操作量降低到最小程度。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 375px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/07-tripit-signin-account-tour-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;07-tripit-signin-account-tour-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;Tripit其实是一款不错的应用，不过它在加载之后需要用户首先注册，而这个界面本身没有为用户提供太多的&amp;ldquo;动力&amp;rdquo;去做这件事。如果一个产品可以在不注册登录的情况下工作起来，那么可以试着先让用户玩玩看，到真正需要的环节再执行注册也不晚。另外，也可以像上图右侧的&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://www.tunewiki.com/&quot; target=&quot;_blank&quot;&gt;TuneWiki&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;那样，首先让用户了解成为注册用户的各种好处，通过这种方式诱导用户自主产生注册的愿望。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;相关阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/27&quot;&gt;具有引导性的移动应用界面设计模式&lt;/a&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;进行可用性测试&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;不要被各种用研名词吓到，事情没那么复杂，尽量做你能做的叭。哪怕只是将交互稿或UI稿拿给潜在用户看一看，也能从中发现一些基本的可用性问题。问问对方对这款应用的理解，设定几个典型任务，让他们将自己的各种想法通过语言表述出来，观察他们对界面的反应。记得在设计流程当中尽量早尽量多的做些这样的测试，哪怕仅仅是非正式的，也会对产品的功能及用户体验设计起到重要的推动作用。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;相关阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/24&quot;&gt;产品早期的原型设计与用户测试&lt;/a&gt;&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;将情感引入产品&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://tapbots.com/software/weightbot/&quot; target=&quot;_blank&quot;&gt;Weightbox&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;中滑动面板的动画效果、&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://everyday-app.com/&quot; target=&quot;_blank&quot;&gt;Everyday&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;里的幽默文案、在Clear里签掉一条事项之后那令人倍感满足排序效果...这些小细节本身并不具备任何实际的功能性，却可以在用户心中引发强大的情感共鸣。蕴藏这些细节的产品是具有&amp;ldquo;人格&amp;rdquo;的，你可以喜欢它，也可以讨厌它，但你多半会因为这些有意思的细节而记住它。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;如今，&amp;ldquo;可用性&amp;rdquo;已经不再是产品用户体验这个概念当中唯一的组成要素了。要使应用获得成功，你必须在&amp;ldquo;愉悦性&amp;rdquo;方面花更多的心思。&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;视觉效果&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;看上去漂亮、用起来带感的应用通常会卖的更好，而且会让用户觉得物超所值。&amp;ldquo;漂亮&amp;rdquo;不只存在于丰富的渐变、纹理和阴影当中，简洁雅致、可读性强的界面布局同样可以给人带来美的享受。对于&amp;ldquo;拟物化&amp;rdquo;的视觉风格，尽量只在能够强化体验的地方使用，不要为了追求独特的视觉效果而使界面元素反而成为干扰因素。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 500px; height: 375px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/08-emotional-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;08-emotional-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;音效&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;音效在用户界面的表现方式当中属于一种微妙而有力的、尚未被广泛使用的工具。不妨试着在一些交互环节当中将音效融入到动画过渡效果当中，给用户带来更饱满、更愉悦的体验。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec; width: 250px; height: 375px;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/09-weightbot-sound-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;09-weightbot-sound-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;触控的魔力&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;苹果的设计师和工程师们会将产品打造的尽善尽美，所以我们能够在iOS当中感受到光滑的像黄油一样的弹跳滚动效果。如果界面当中的交互对象不能立刻对触摸操作进行响应，那么就算不上是真正意义上的直接操纵了。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/10-directly-manipulating-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;10-directly-manipulating-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;触控手势可以在用户与应用界面之间建立强有力的关联，不过一旦运用不当，譬如对于用户来说难以发现或掌握，那么手势也会造成非常差劲、甚至是令人沮丧的交互体验。你可以尽情尝试新的交互模式，但最终一定要确保每个操作、每个过渡效果和视觉隐喻都是易懂易用、符合直觉的。&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;文案当中的人情味儿&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;用户不喜欢带有说教性质的使用说明、出错信息或系统提示。你完全可以尝试一些诙谐幽默甚至略显狡黠的文案风格，用户会喜欢这些意想不到的乐趣的。如果你做的足够有趣，人们甚至会在Twitter上谈论这些。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/11-copy-message-alert-error-words-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;11-copy-message-alert-error-words-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;出众的动画效果&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;无论是交互元素在界面当中移动，还是界面之间的切换过渡，动画效果都可以体现出产品的个性，让用户充分享受连贯平滑的交互体验。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/12-transition-animation-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;12-transition-animation-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;不要忽视图标&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;应用图标在很大程度上讲就是产品的门面，多数用户都是通过图标对你的应用产生的第一印象，而且在应用被安装到设备上之后，它就是应用的入口。优秀的图标通常是简单而令人印象深刻的，它们身上没有过分绚丽的雕琢，却能从容的脱颖而出。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/14-icon-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;14-icon-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;对比上图中的两个图标，左侧(Clear)的使用了明亮的配色、简单的形状搭配，而右侧的图标当中，无论配色还是形状都具有强烈的冲突感，整体缺乏吸引力，缩小之后更是难以辨识。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;推荐阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/103&quot;&gt;为产品赋予人格 - 情感化设计的组成要素及实践案例&lt;/a&gt;&lt;/p&gt;
&lt;h3 style=&quot;margin: 1.2em 0px 0.8em; font-size: 1.3em; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif; padding-bottom: 0.05em; color: #111111; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #ececec;&quot;&gt;开发&lt;/h3&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;对技术方案的选择同样会影响着最终产品的体验，进而决定着应用能否取得成功。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;本地化开发&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&amp;ldquo;一次开发，多处部署&amp;rdquo;的理念对于中小型应用来说未必适用，除了游戏。某种程度上讲，这种理念被太多人神话了，毕竟不同的系统平台有着不同的交互模式及UI规范。最终，&amp;ldquo;跨平台&amp;rdquo;的结果很可能就是在任何一个系统当中都无法让用户获得良好的体验。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/15-native-web-application-facebook-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;15-native-web-application-facebook-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;Facebook在过去的几年中尝试了基于HTML5的混合型应用。但自从最近改为iOS本地应用之后，性能表现提升了200%，产品所获得的用户评价也很快从2星升至4星。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;不过，采用混合型应用的技术方案也未必就意味着失败，&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://www.zipcar.com/mobile/&quot; target=&quot;_blank&quot;&gt;Zipcar&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;就是一个不错的范例。要在这种方式中取得陈功，有几点问题必须要考虑：&lt;/p&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&amp;ldquo;一次开发，多处部署&amp;rdquo;的理念会对设计工作造成不小的局限。因为要照顾到所有目标平台，所以设计当中不能有任何针对某个特定系统的解决方案。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;混合型应用或Web应用所基于的仍是Web前端开发技术，本质上仍存在着比较明显的性能问题。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;混合型应用或Web应用缺乏本地化应用的灵活性与健壮型，通常情况下无法访问和利用硬件自身具备的各种自动化功能。&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;关于移动化策略及技术方案对比等方面的话题，推荐各位继续深入阅读：&lt;/p&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/12&quot;&gt;走出移动互联网的迷宫 - 网站移动化的方法策略&lt;/a&gt;&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/120&quot;&gt;设计师应该了解的iOS应用开发基础知识&lt;/a&gt;&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/22&quot;&gt;前端开发者的跨平台移动应用开发策略及工具&lt;/a&gt;&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/14&quot;&gt;随&amp;ldquo;机&amp;rdquo;应变的用户体验设计&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;代码质量的重要性&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;结构合理、规划清晰、扩展性强的代码不会直接作用在用户的感受当中，但是对产品的可持续发展却起着重要的基础性作用。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;反之，差劲的代码通常会直接影响产品的体验。用户不关心应用为什么会崩溃，不关心到底是什么原因导致输入内容的丢失，他们会把所有的问题都归结于你的产品和品牌的错误。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;在技术开发的人力资源方面，即使你刚刚起步，也不要觉得随便找个一般般的开发者并按小时计费是一种划算的方式。在同样的时间内，一名普通码农也许可以马马虎虎的写出一个功能模块，而一名优秀的程序员则可能产出三个更加健壮的模块。一旦你决定更换那个普通的程序员，那么继任者很有可能花很多时间了解之前的代码，甚至需要重新来过；而经验丰富的开发人员所写出的代码通常具有更高的可复用性。&lt;/p&gt;
&lt;h3 style=&quot;margin: 1.2em 0px 0.8em; font-size: 1.3em; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif; padding-bottom: 0.05em; color: #111111; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #ececec;&quot;&gt;市场推广&lt;/h3&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;如果你们的团队当中已经有市场部门了，那么不坏，不过草根设计师和开发者们同样可以发起相当有效的市场推广活动。相信我，当我刚刚起步的时候，没人知道我是谁，但现在，我的应用正在得到来自各方面的关注和推荐，包括苹果、Mashable、TechCrunch、The Huffington Post、Fox新闻等等。我没有在所谓的市场活动上花过一分钱，当然，不包括建设相关推广网站所需要的费用。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;尽早启动&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;多数开发者都认为市场活动应该在应用发布上线之后再开始进行。这种想法并不正确。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;一个策划周密、准备充分的发布活动是非常关键的，特别是对于那些定价比较低廉的应用来说。如果你的发布活动没能一鼓作气将产品推到排行榜的前列，它就很有可能在短时间内被淹没掉；不在榜里的应用对用户来说几乎是隐形的。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;应用上线之后，用户在App Store当中留下的评价固然会对产品的口碑起到正面或负面的影响作用，但这并不是决定排名的最主要因素。App Store的排名算法一直在发生着变化，不过总体上来说仍是以一段时间内的下载量作为最主要的参考因素。我们可以将这个&amp;ldquo;一段时间&amp;rdquo;理解为截至当天为止的4天内，所以之前3天的下载量对于排名的影响作用非常关键，而当天所作的推广活动只有在若干天之后才会收到成效。在这种情况下，零星的碎片化的推广并没有太大意义，最有效的还是能持续一段时间的火力全开的推广活动。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;正如App Savvy一书的作者Ken Yarmosh所指出，市场推广计划应该从产品初期就开始启动，并伴随着产品设计开发的历程而不断完善，直到发布上线时做出全力而完美的一击。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;交些朋友&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;人脉是不可忽视的因素。没有相关的人际关系，你所失去的也许正是在成百上千的竞争对手当中脱颖而出的重要机遇。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/16-twitter-connection-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;16-twitter-connection-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;我在Twitter里创建了一个列表，其中包括苹果的员工、媒体从业者和一些著名的iOS开发者。你也可以为自己建立一些这方面的人脉，包括科技博客作者、有影响力的设计师与开发者等，都是不错的关注对象。这些人大都很酷很好打交道，他们通常乐于和那些有好想法好产品的人进行交流。&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;找到他们&lt;/h5&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;Twitter是好去处，业界有影响力的人们基本都在推。(我们就微博叭；记得&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://www.weibo.com/c7210/&quot; target=&quot;_blank&quot;&gt;找我来玩&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;&amp;nbsp;- 译者C7210注)&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;在有影响力的博客中发表评论或通过邮件联系作者，进行交流。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;面对面的沟通是最有力量的。去参加业内的一些大会，多认识些朋友。&lt;/li&gt;
&lt;/ul&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;注意言行，不要成为垃圾广告发布者&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;有机会与这些人进行交流，不代表着他们一定会对你的应用保持长久的兴趣。要建立有意义的人脉关系，当你希望展示一些工作成果的时候，试着以一种征求意见建议的姿态来提出，而不要像做广告一样肆无忌惮。&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;礼尚往来&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;在与这些人进行沟通交流的过程中，要想想他们有哪些需求，你能为他们提供怎样的帮助。也许你正好可以回答他们在Twitter里提出的问题，或是对他们在博客里表达的观点有所见解。&amp;ldquo;有所回馈&amp;rdquo;是很重要的，有意义的人脉关系正是通过有来有去的交流互动而建立起来的。&lt;/p&gt;
&lt;h5 style=&quot;margin-top: 0px; font-size: 14px; margin-bottom: 0.5em;&quot;&gt;自己动手&lt;/h5&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;试着自己写写博客，分享一下你在制作应用的过程中都学到了哪些东西。人们喜欢读真实的东西，类似&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://idevblogaday.com/&quot; target=&quot;_blank&quot;&gt;iDevBlogADay&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;这样的网站也有可能将你的文章收录并推荐给大家。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;宣传机器&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;在应用发布上线之前的几周，就可以启动&amp;ldquo;宣传机器&amp;rdquo;了，核心目的在于创建第一批用户群，确保他们在应用上线当天立刻进行下载。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/17-s-hyper-machine-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.png&quot; alt=&quot;17-s-hyper-machine-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.png&quot; /&gt;&lt;/p&gt;
&lt;p class=&quot;figure-caption&quot; style=&quot;margin-top: -15px; margin-bottom: 1.5em; font-size: 12px;&quot;&gt;通过产品预告页面收集目标用户的邮箱，在应用上线时即刻进行通知&lt;/p&gt;
&lt;ul style=&quot;margin: 0px 0px 1em; padding: 0px 0px 0px 1em;&quot;&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;strong&gt;为你的应用在Twitter和Facebook上创建帐号&lt;/strong&gt;：这可以让潜在用户轻松的follow到产品的进展，同时能够在平台当中进行传播。你可以发布一些产品预览、进度日志等方面的内容，当然也可以直接用这个帐号follow那些有可能对你产品感兴趣的人，吸引关注。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;strong&gt;建立产品预告页面&lt;/strong&gt;：打造一个足够吸引人的页面，对应用进行简要介绍，放置一个表单，让那些有兴趣的潜在用户留下邮箱。在应用发布上线的时候及时通知这些目标用户进行下载。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;strong&gt;创建演示视频&lt;/strong&gt;：视频的宣传效应是最好的，&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://www.realmacsoftware.com/clear/&quot; target=&quot;_blank&quot;&gt;Clear的产品视频&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;及其引发的讨论就是不错的案例。而且视频是短时间全方位演示产品特色的最佳手段，传播起来也很轻松快捷。&lt;/li&gt;
&lt;li style=&quot;margin: 0px; padding: 0px; list-style: disc inside;&quot;&gt;&lt;strong&gt;内部测试&lt;/strong&gt;：寻找一些目标用户，让他们成为产品的首批使用者。除了&amp;ldquo;测试&amp;rdquo;方面的目的之外，这种方式可以让他们感受到自己的重要性，从而有可能成为产品的第一批忠实用户及推广者。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;获得推荐&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;自从获得了苹果设计奖(Apple Design Award)，我的应用就被各种科技媒体争相推荐，但所有这些加在一起的推动效果都不如App Store当中的推荐给力。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;问题是，怎样才能获得App Store的推荐？每周都有成千上万的应用冒出来，而其中只有几个产品能获此殊荣，登上App Store首页。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/18-app-store-features-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;18-app-store-features-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;首先，产品要有值得App Store推荐的点，它必须在某些方面引起苹果的兴趣。你的应用在界面设计上是否足够的漂亮雅致？是否能充分展示iOS平台的强大功能？与其他同类应用相比是否有差异化的亮点？这些都是决定你的应用能否获得推荐的重要因素。&amp;ldquo;幸运&amp;rdquo;的是，能真正把这些要点做到位的产品其实不算很多。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;第二，你要努力吸引到苹果的注意。通常，你需要在苹果采取行动之前通过自己的努力引发关注。苹果有专门的编辑团队，他们负责寻找那些值得推荐的应用，你必须让自己的产品出现在那些他们有可能关注的地方。根据我的个人经验，他们会特别留意那些正在爬榜的产品。另外，想想你自己通常会到哪些网站获取新应用的信息，那同样有可能是苹果的编辑们会保持关注的地方。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;媒体的力量&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;媒体报道不仅可以起到巨大的推广作用，而且能够帮助你有效的建立产品的可信度，并进一步吸引更多的潜在用户以及具有较高影响力的传播者。如果你有能力与媒体进行合作，那么一定要在产品发布上线的一到两周之前就开始行动，以确保相关报道可以在发布当天出现在读者和观众面前。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/19-press-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;19-press-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;还记得之前建立的人脉关系吗，这时你可以试着联系这些朋友了。给他们展示一些产品的预览，看看他们是否有兴趣了解更多。要让交流方式尽量平和自然，保持简短和个人化。&lt;/p&gt;
&lt;h4 style=&quot;margin: 1.15em 0px 0.55em; font-size: 17px; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif;&quot;&gt;建立用户群&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;有庞大用户群的产品是真正有力量的。之前与我们合作开发Languages应用的团队&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://sonicomobile.com/&quot; target=&quot;_blank&quot;&gt;Somico Mobile&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;，最近发布了iTranslate Voice。他们几乎几乎没有借助任何来自媒体或苹果官方的推荐助力，但新产品的战绩却相当不错。为什么？因为他家的iTranslate应用本身就拥有千万级别的用户基础，他们要做的只是向这些老用户们发一封新产品邮件。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;&lt;img style=&quot;border: 1px solid #ececec;&quot; src=&quot;http://beforweb.com/sites/default/files/images/201211-2/20-itranslate-voice-user-base-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; alt=&quot;20-itranslate-voice-user-base-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg&quot; /&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;当然，用户基础的建立是需要时间的。尽可能将用户引导至产品的Facebook主页或Twitter当中，与他们保持互动，让他们保持关注。另外，也可以考虑发布一款面向大众的免费应用，吸引更多的注意力，然后通过应用内广告的方式将你的主打产品宣传出去。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;推荐阅读：&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/109&quot;&gt;将产品在移动市场中推向成功的十点建议&lt;/a&gt;&lt;/p&gt;
&lt;h3 style=&quot;margin: 1.2em 0px 0.8em; font-size: 1.3em; font-family: 微软雅黑, 黑体, 'Trebuchet MS', Arial, sans-serif; padding-bottom: 0.05em; color: #111111; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #ececec;&quot;&gt;总结&lt;/h3&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;度量&amp;ldquo;成功&amp;rdquo;的标准有很多。我的Grades应用在第一版的时候大约只产生了不到10000美金的收入，但那是它通往苹果设计奖的第一步，同时也帮助我在业内建立了非常有价值的人脉关系。现在，我们已经将公司定位在了Languages这样的顶级产品上，而我们的目标同样不仅在于它产生的收入能比Grades高出多少。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px;&quot;&gt;在财富方面获取成功是很困难的，但只要你在努力，它就会变得越来越容易。随着你持续打造着优质的产品，你的品牌终将被各种媒体或苹果官方所留意到，同时你的团队也将获得宝贵的经验，并逐步建立起坚实的用户基础。这确实是一个长期的任务，但回报也是可观的，特别是当你想到自己的产品能够改变成千上万人的生活的时候，那种感觉太妙了。&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p style=&quot;margin-top: 0px; color: #333333; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px;&quot;&gt;译文代表原作者观点。欢迎&lt;a style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://beforweb.com/node/129#comments&quot;&gt;发表评论&lt;/a&gt;，或到&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #0099cc;&quot; href=&quot;http://weibo.com/c7210/&quot; target=&quot;_blank&quot;&gt;译者微博&lt;/a&gt;&lt;span class=&quot;ext&quot; style=&quot;background-image: url(http://beforweb.com/sites/all/themes/beforweb/images/comm.png); padding-right: 13px; background-position: -27px 4px; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/span&gt;进一步交流探讨。&lt;br /&gt;&lt;/p&gt;
&lt;div class=&quot;article-source&quot; style=&quot;margin: 0px 0px 30px; padding: 0px; color: #9f9f9f; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px;&quot;&gt;
&lt;div class=&quot;field f-declare&quot; style=&quot;margin: 0px 0px 10px; padding: 0px;&quot;&gt;本站原创编译文章。如需转载，请注明：本文来自&lt;a style=&quot;text-decoration: initial; color: #9f9f9f;&quot; href=&quot;http://beforweb.com/node/129&quot;&gt;Be For Web&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;field field-name-field-en-source field-type-link-field field-label-inline clearfix&quot; style=&quot;margin: 0px 0px 10px; padding: 0px;&quot;&gt;
&lt;div class=&quot;field-label&quot; style=&quot;margin: 0px; padding: 0px; float: left;&quot;&gt;英文原文:&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;field-items&quot; style=&quot;margin: 0px; padding: 0px; float: left;&quot;&gt;
&lt;div class=&quot;field-item even&quot; style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;a class=&quot;ext&quot; style=&quot;text-decoration: initial; color: #9f9f9f;&quot; rel=&quot;nofollow&quot; href=&quot;http://mobile.smashingmagazine.com/2012/11/07/succeed-with-your-app/&quot; target=&quot;_blank&quot;&gt;http://mobile.smashingmagazine.com/2012/11/07/succeed-with-your-app/&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://beforweb.com/node/129&quot; target=&quot;_blank&quot;&gt;http://beforweb.com/node/129&lt;/a&gt;&lt;/p&gt;</description>
				<author>c7210</author>
				<pubDate>2012-11-14 09:37:22</pubDate>
			</item>			<item>
				<title>移动应用设计中应避免的10种错误</title>
				<link>http://ucdchina.com/snap/11799</link>
				<description>&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;em style=&quot;margin: 0px; padding: 0px;&quot;&gt;导读：本文是来自移动应用开发公司&lt;em style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://www.sourcebits.com/&quot; target=&quot;_blank&quot;&gt;Sourcebits&lt;/a&gt;&lt;/em&gt;系列文章&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://mashable.com/follow/topics/mobile-app-trends-series&quot; target=&quot;_blank&quot;&gt;Mobile App Trends Series&lt;/a&gt;&lt;span style=&quot;margin: 0px; padding: 0px; color: #808080;&quot;&gt;（译者：此网站要梯子）&lt;/span&gt;中的一篇，文章内容适合初涉此领域的读者，现翻译如下。&lt;/em&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;在了解了&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://mashable.com/2012/02/16/cross-platform-app-design-pros-cons/&quot; target=&quot;_blank&quot;&gt;跨平台移动应用设计的利弊&lt;/a&gt;和&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://mashable.com/2012/03/28/mobile-app-development-advice/&quot; target=&quot;_blank&quot;&gt;移动应用开发常见错误&lt;/a&gt;&lt;span style=&quot;margin: 0px; padding: 0px; color: #808080;&quot;&gt;&lt;em style=&quot;margin: 0px; padding: 0px;&quot;&gt;（译者：此两篇翻译中）&lt;/em&gt;&lt;/span&gt;之后，你想到了一个不错的应用创意，你甚至连应用的名字都想好了，接下来该干什么？&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;现在，我们要谈谈设计了。你需要考虑移动应用的功能结构、用户流程等问题，而这些并不是那么容易。考虑到进入开发阶段我们会涉及到诸如需求变动、项目管理等棘手的问题，所以在设计阶段，我们需要给自己制定一些原则，并且要切合实际的开展工作。这样我们才能开发出一款好用又有趣的应用。忽略这些潜在的问题而盲目瞎干，你很有可能在此后的开发阶段陷入灾难。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;本文试图帮助移动应用设计者在工作中避免一些难缠的麻烦，希望你的应用以及你的设计思路均能因此受益。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误1. 在弄清用户流程之前匆忙开始界面（草图）设计&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;a class=&quot;cboxElement&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; title=&quot;Wireframe_640&quot; rel=&quot;lightbox[17688]&quot; href=&quot;http://blog.jobbole.com/wp-content/uploads/2012/04/Wireframe_640.jpg&quot;&gt;&lt;img class=&quot;aligncenter&quot; style=&quot;margin-top: 5px ! important; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 5px; border: 1px solid #d4d4d4; clear: both; display: block; background-color: #ffffff;&quot; title=&quot;Wireframe_640&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/4364e07e3fd0d09ea0dc9a973cde7cc6.jpeg&quot; alt=&quot;&quot; width=&quot;576&quot; height=&quot;366&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; display: inline ! important; float: none;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;在开始界面设计前，我们要先把完整的用户流程详细的走通顺走清楚。哪怕是再简单的应用，为了确保用户流程逻辑正确、界面布局合理，我们需要反复推敲用户流程并绘制类似上面的流程图。另外值得注意的是，最好把关键功能绘制在流程图靠近顶部的地方，而不是被层层分支淹没在底部。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;跳过此环节而草率的开始界面设计，最终开发出的应用很可能在使用流程上不够清晰合理，用户上手后不得其解，兴趣索然。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误2. 低估开发成本&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;设计师在Photoshop中画出的任何东西，最终都需要通过开发人员的代码在屏幕上表现。原本只需几小时开发的功能，由于设计师的一个看似细微的改动，可能会多耗费几天的开发时间。所以，在设计过程中要避免画蛇添足。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;换句话说，如果设计师主导了移动应用功能的取舍，那后果会很严重。举个搜索框的例子，原本相对简单的一个功能，设计师灵光乍现&amp;mdash;&amp;mdash;在用户输入关键词的同时不断给出实时的搜索结果。这个看似细节的改动，很可能让开发人员当场吐血。像这种的功能改动最好经过多方讨论后做出决策，而不是任由设计师自说自话。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误3. 在低分辨率下设计，使用位图文件&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;始终坚持为Retina屏幕的高分辨率绘制设计图，然后以此输出低分辨率版本图片。这对于老手来说是常识，我们在这里再啰嗦几句。大家都知道，移动设备的&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://mashable.com/2012/03/16/retina-display-examples/&quot; target=&quot;_blank&quot;&gt;常见屏幕尺寸&lt;/a&gt;是越来越五花八门（以&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://www.mashable.com/follow/topics/ios&quot; target=&quot;_blank&quot;&gt;iOS平台&lt;/a&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;为例，迄今需要考虑的就有4种分辨率)。所以，绘制高分辨率版本的图片，甚至是使用矢量图而不是位图，这些有助于设计师效率最大化，以及更好的应对未来的新硬件。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误4. 触摸区域太小&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;普通人的食指触摸面积在1.6至2厘米见方，而且在使用移动应用的大多数时间里，他们的手指飞快的掠过屏幕。设计移动应用界面需要时刻提醒自己这一点，用户的触摸并不能像鼠标点击一样精确。看看你的设计是不是在一屏里包含了太多的按钮等功能触发点，按钮是不是足够大，间距是不是足够宽，会不会发生用户点选不到或者误按其它按钮的问题？&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误5. 滥用开场动画&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;在启动时播放一段精致的动画似乎是个不错的想法，但切忌不要为了动画而动画。&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;https://path.com/&quot; target=&quot;_blank&quot;&gt;Path&lt;/a&gt;和&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://www.jackthreads.com/mobile&quot; target=&quot;_blank&quot;&gt;Thrillist&amp;rsquo;s JackThreads&lt;/a&gt;使用很酷的开场动画是因为这些应用启动需要一些时间，在程序完成加载之前用户什么也不能做&lt;span style=&quot;margin: 0px; padding: 0px; color: #888888;&quot;&gt;（译者：Path启动貌似没有啥动画，难道是针对老版本说的？）&lt;/span&gt;。这种情况下，为用户准备一段简短愉悦的动画以消除等待的焦虑就显得很合时宜了。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;由于应用启动时必须首先显示一张静待图片&lt;span style=&quot;margin: 0px; padding: 0px; color: #888888;&quot;&gt;（译者：如iOS应用的Default.png）&lt;/span&gt;，然后才能切换到动画，所以务必确保这个切换看起来天衣无缝。一些不好的例子在处理这个环节的时候产生了不协调的跳转或者闪屏，这都是需要避免的。&lt;span style=&quot;margin: 0px; padding: 0px; color: #888888;&quot;&gt;（译者：优酷iPad应用的早期版本存在这种切换，处理中有一闪而过的黑屏，现在的版本把动画直接去掉了）&lt;/span&gt;&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误6. 让用户不知所措的原地等待&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;在程序加载、处理数据、或者等待网络反馈时不给用户及时的反馈，会让用户误认为应用挂了，这也是一种不好的用户体验。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;举例来说：通过网络加载数据的同时，不要让用户傻傻的盯着一个空白的屏幕等待，显示一个转菊花或者动画特效什么的，让用户明白应用运行正常，只不过是在等待网络数据。如果能显示数据读取的进度条那就更好了，不过事先和开发人员商量一下开发难度（参考本文第二点）。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误7. 盲目借鉴其它移动平台风格&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;img style=&quot;margin-top: 5px ! important; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 5px; border: 1px solid #d4d4d4; background-color: #ffffff;&quot; title=&quot;verizon_phones&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/425c572312384695375b9a0c80d29161.jpeg&quot; alt=&quot;&quot; width=&quot;576&quot; height=&quot;252&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; display: inline ! important; float: none;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;糟糕的抄袭只会让用户感到疑惑和愤怒。每一个移动平台都有自己的风格，平台厂商也已经依据其平台自身的审美诉求撰写类似苹果的&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html&quot; target=&quot;_blank&quot;&gt;Human Interface Guidelines&lt;/a&gt;之类的指导性文档（译者：Android现在也有&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://developer.android.com/design/index.html&quot; target=&quot;_blank&quot;&gt;类似的文档&lt;/a&gt;）。在iPhone上开发类似Windows Phone 7的Metro风格应用就很可能让习惯了iOS的用户感到无从下手。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;我想说的是，你的应用并不一定要和官方应用一模一样，但也不能看起来另类到像不属于这个平台一样。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误8. 过分拥挤的界面&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;在高PPI下设计移动应用界面，你可能不知不觉中就在一个屏幕里放了太多的东西。在27&amp;Prime;的iMac屏幕上看设计图，你的设计是那么的赏心悦目。请在移动设备上再多看一眼（哪怕仅仅是把设计图导入手机相册看），可能就不是那么回事了。在一个屏幕内塞太多的元素，会让用户操作起来费力，甚至淹没了最重要的信息。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误9. 认为所有用户都和你一样的使用应用&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;无论你的应用界面看起来有多赞，都要做可用性测试。你可以在熟人圈内开展小规模的beta测试，记住让一些资深的设计师也参加。根据他们的反馈，在最终发布前调整界面。你也可以在&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://www.craigslist.org/&quot; target=&quot;_blank&quot;&gt;Craigslist&lt;/a&gt;上发布广告，邀请一些学生来试用新产品，记得提供比萨或者一点报酬什么的。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;错误10. 忘记使用或者滥用手势操作&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;记住并不是所有界面元素都必须直观的被用户看到，有时我们可以隐藏一些惊喜。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;拿iPhone上面的官方邮件应用&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;margin: 0px; padding: 0px; color: #808080;&quot;&gt;(译者：又是老生常谈的例子)&lt;/span&gt;，用户可以在收件箱中通过横扫邮件标题激活删除功能，这就免去了用户点击&amp;ldquo;编辑&amp;rdquo;、选择邮件、选择删除的麻烦。这里我们发现有个平衡点：老用户可能发觉出用手势完成快速删除，同时保留&amp;ldquo;编辑&amp;rdquo;按钮以便不熟悉的用户完成删除、标记等其它操作。所以，善用手势但不能过分倚重手势，一般来说要最好不要用手势操作替代菜单等需要点选操作的界面元素。&lt;br style=&quot;margin: 0px; padding: 0px;&quot; /&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&lt;strong style=&quot;margin: 0px; padding: 0px;&quot;&gt;总结&lt;/strong&gt;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;如果要用一句话概括文本提到的点点滴滴，那就是：好的设计是经过深思熟虑的。带着审慎的态度全面的考察你的设计，真正的从用户的角度出发想问题。不要试图走走捷径，也不要跳过测试，不要设计出连你自己都拿不出手的东西。&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p style=&quot;margin: 0px; padding: 0px 0px 10px; display: block; text-indent: 2em; line-height: 22px; color: #383838; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;英文原文：&lt;a class=&quot;external&quot; style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; rel=&quot;nofollow&quot; href=&quot;http://mashable.com/2012/04/11/mobile-app-design-tips/&quot; target=&quot;_blank&quot;&gt;mashable&lt;/a&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; 编译：&lt;span class=&quot;wp_keywordlink&quot; style=&quot;margin: 0px; padding: 0px;&quot;&gt;&lt;a style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; title=&quot;伯乐&quot; href=&quot;http://www.jobbole.com/&quot;&gt;伯乐&lt;/a&gt;&lt;/span&gt;在线 -&lt;a style=&quot;margin: 0px; padding: 0px; color: #0b5c77; outline-style: none; border-style: none; text-decoration: none;&quot; href=&quot;http://blog.jobbole.com/17688/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;陈远&lt;/a&gt;&lt;span style=&quot;text-indent: 2em;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://blog.jobbole.com/17688/&quot; target=&quot;_blank&quot;&gt;http://blog.jobbole.com/17688/&lt;/a&gt;&lt;/p&gt;</description>
				<author>陈远</author>
				<pubDate>2012-04-26 10:16:58</pubDate>
			</item>			<item>
				<title>浅析iPhone平台三种应用类型的布局方式</title>
				<link>http://ucdchina.com/snap/11641</link>
				<description>&lt;div&gt;在手机这样一个小小的有限的屏幕尺寸里，要使界面保持清晰合理、简洁美观，就涉及到产品&amp;ldquo;框架布局&amp;rdquo;的设计问题，我们需要根据不同的产品需求及应用场景来设计合理的界面布局。&lt;/div&gt;
 
&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;div&gt;iPhone平台的标准界面布局为顶部标题栏、中部内容区、底部工具栏/标签栏，设计师们根据不同的应用类型以及不同的使用情境进行着巧妙的布局，其中不乏很多勇于打破常规，精巧合理的布局设计。今天就一起来看看iPhone平台多样化的界面布局方式。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;div&gt;iPhone平台有三种类型的应用：&lt;/div&gt;
 
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;效率型应用（Productivity Applications）&lt;/li&gt;
 
&lt;li&gt;实用型应用（Utility Applications）&lt;/li&gt;
 
&lt;li&gt;沉浸型应用（Immersive Applications）&lt;/li&gt;
 
&lt;/ul&gt;
&lt;/div&gt;
 
&lt;div&gt;每一种类型都有各自不同的特点和应用场景。设计之前要清楚产品的目标、特点以及用户使用产品的动机，以选择合适的应用类型。下面我们分别通过这三种应用来总结一下界面的布局方式。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h2&gt;&lt;strong&gt;1.效率型应用（Productivity Applications）&lt;/strong&gt;&lt;/h2&gt;
 
&lt;div&gt;效率型应用几乎包含了从社交网络到手机银行的所有应用。此类应用具有组织和操作具体信息的功能，需要比较精简的用户体验，从而不会阻碍用户的工作，要将用户体验的重点放在任务上，用户可以快速地找到需要的目标，轻松地完成操作。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;1)如何设计效率型应用&lt;/strong&gt;&lt;/h3&gt;
 
&lt;div&gt;以任务为导向的设计理念。建立准确的任务模型，将用户可能的任务进行拆解，并逐一设计优化流程。要让用户快速开始，快速找到信息，快速离开。建立清晰的层级关系，便捷准确的检索方式，以便于用户迅速定位需要的信息。&lt;/div&gt;
 
&lt;div&gt;要降低用户的学习成本，尽可能的使用系统的控件和操作。降低噪音，保证高级的功能在用户需要时能够找到即可，在不需要的时候也不会造成困扰。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;2)效率型应用的界面布局&lt;/strong&gt;&lt;/h3&gt;
 
&lt;h4&gt;&lt;strong&gt;A. 九宫格&lt;/strong&gt;&lt;/h4&gt;
 
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/b3db69388d717dc9ceafb65e5be29a13.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;此类界面通常是用户进入产品后的首屏，为用户提供分类入口，入口通常以图表加文字的形式展现。以格子的形式排列，可以让用户快速地找到入口。此类布局适合用于丰富的内容展现，且内容适合分类聚合。&lt;/div&gt;
 
&lt;h4&gt;&lt;strong&gt;B.&amp;nbsp;折叠列表&lt;/strong&gt;&lt;/h4&gt;
&lt;/div&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/f2ac1a1b46af4d08f49bfe4aa9c4be1e.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;折叠折表是为避免页面内过长的滚动而做的布局设计，通常需要在同一页面内展示大幅内容时可考虑使用此类布局。内容以两级列表的形式进行分组，每组可以分别展开显示它的子项目。&lt;/div&gt;
 
&lt;h4&gt;&lt;strong&gt;C. 图片列表&lt;/strong&gt;&lt;/h4&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/ddbdc9bac14ae16828d275ed4dbd62f1.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;图片列表可以直观地将图片的全图显示出来，方便用户快速检索查看，大幅的图片也为用户带来视觉上的愉悦体验。&lt;/div&gt;
 
&lt;h4&gt;&lt;strong&gt;D. 旋转木马&lt;/strong&gt;&lt;/h4&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/78ef4cc9b92349978242d305c71b096a.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;
&lt;div&gt;旋转木马的布局适用于内容以线性或者循环的形式进行组织，充分利用有限的屏幕空间，更好的来展示一系列图形图像，从而让用户获得更好的聚焦体验，正如欢快奔腾的木马，不停的旋转展示，让每个独立个体都得到表现的机会。这种布局特别适用于屏幕空间有限而又需要展示大量内容。&lt;/div&gt;
 
&lt;div&gt;常用的旋转木马式布局有两种，一种是如上图的全屏的展示，一般多用于首页，用作各个内容的入口。另一种是如下图的应用，带有多个项目的通常用于页面的顶部。&lt;/div&gt;
&lt;/div&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/ebba963d831cbc01129d8e6bdb9767ed.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;h4&gt;&lt;strong&gt;E . 侧滑分屏&lt;/strong&gt;&lt;/h4&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/379e9eed6f785353cc73c4790698546c.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;侧滑分屏的界面布局是采用三屏模式（左屏、主屏、右屏），此架构具有极好的扩展性。path2.0完全颠覆了iOS guild line的模式，采用这种三屏模式，极简了主页面，主屏仅留下feed展示和添加功能。将导航放入左侧的屏幕，增加了未来的可扩展性，同时也保证了主屏幕清晰的内容。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h2&gt;&lt;strong&gt;2.&lt;span&gt; &lt;/span&gt;实用型应用（Utility Applications）&lt;/strong&gt;&lt;/h2&gt;
 
&lt;div&gt;实用型应用完成的任务对用户输入要求很低。用户打开实用型应用程序，是为了快速查看信息摘要或是在少数对象上执行简单任务 。实用型应用的特点是最小化安装、简单的流程及布局、标准化的界面元素。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;1)&lt;span&gt; &lt;/span&gt;如何设计实用型应用&lt;/strong&gt;&lt;/h3&gt;
 
&lt;div&gt;专注做好一个功能，使其一目了然，将需要的信息展示在一个层级里，让用户快速地获取某类特定的信息或者执行某一具体的任务，因此在开启后无需操作就能解决问题是最完美的。力争使界面简洁，并尽量使用简单的、标准的视图和控件。设置通常在主视图背面，可以设置不同的数据源。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;2)&lt;span&gt; &lt;/span&gt;实用型应用的界面布局&lt;/strong&gt;&lt;/h3&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/5d0e2feb024aba80c8b35e106479dd1d.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;界面以平面列表的方式显示信息；易于浏览，只包含了最必要的信息，没有深入的信息层次结构。每一个视图都提供同样的数据组织结构和细节深度。在界面下方显示打开的视图数量，用户可以按顺序浏览，在一个视图后选择另一个视图。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/ff49fd7a25ed7086a142156e20478baa.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;通常一个实用型应用只解决某一个方面的问题，如上图的指南针和温度计，通过拟物化的设计，全屏布局突出应用功能，一目了然。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/57f137a2345972d3df96f875ab60d229.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;
&lt;div&gt;界面简明地突出了主要功能，没有多余的操作和设置，以使用户快速完成操作。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h2&gt;&lt;strong&gt;3.&lt;span&gt; &lt;/span&gt;沉浸型应用（Immersive Applications）&lt;/strong&gt;&lt;/h2&gt;
 
&lt;div&gt;沉浸型应用可以为用户带来极致的娱乐和游戏体验，这类应用和标准的系统界面不同，用户希望这类应用能够给他们带来最大的娱乐。此类应用的特点是聚焦于主要内容及完全个性化的用户体验。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;1)&lt;span&gt; &lt;/span&gt;如何设计沉浸型应用&lt;/strong&gt;&lt;/h3&gt;
 
&lt;div&gt;富媒体的表现形式，声，光，色，效，通过丰富的表现力让用户沉浸其中。不拘泥于系统的控件和表现方式，因此，界面设计的自由发挥度比较高，仿真的、可爱的设计风格往往容易出彩。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;2)&lt;span&gt; &lt;/span&gt;沉浸型应用的界面布局&lt;/strong&gt;&lt;/h3&gt;
 
&lt;h4&gt;&lt;strong&gt;A. 游戏类的全屏布局&lt;/strong&gt;&lt;/h4&gt;
&lt;/div&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/e36d9f24a97311942f56d8ce8efa055b.jpeg&quot; alt=&quot;&quot; width=&quot;480&quot; height=&quot;319&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;
&lt;div&gt;沉浸式应用通常会占据整个屏幕，包括电池和网络信息的状态栏，让用户聚集于主要内容，以增强用户的参与感。这种全屏界面布局没有多余的任务导向和元素干扰，让用户探索，并在探索中得到发现和奖励，不拘泥于系统的控件和表现方式。此类应用多为以横屏方向进行布局。&lt;/div&gt;
 
&lt;h4&gt;B. 媒体类的全屏布局&lt;/h4&gt;
&lt;/div&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/0f82c5e33d373c25f307b41f1a4bb198.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;
&lt;div&gt;媒体类最常见的是电子阅读和视频播放，特写内容会占据整个屏幕，界面只显示内容，让用户沉浸其中，当用户点击屏幕时会在浮动层上显示控件。&lt;/div&gt;
 
&lt;h4&gt;&lt;strong&gt;C. 特定任务类的全屏布局&lt;/strong&gt;&lt;/h4&gt;
&lt;/div&gt;
 
&lt;div&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/9604e830a2e88471c780683b48d63fcc.jpeg&quot; alt=&quot;&quot; width=&quot;560&quot; height=&quot;368&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;
&lt;div&gt;特定任务类常见的有录音、拍照、图片处理等，界面布局以突出特定任务为主，在界面的下方辅以任务的操作按键，通常使用自定义的界面以配合环境。此类应用程序运行时可能会涉及到大量数据的处理，但是通常不显示这些数据，无须让用户查看。&lt;/div&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h2&gt;&lt;strong&gt;写在后面&lt;/strong&gt;&lt;/h2&gt;
 
&lt;div&gt;在手机的交互设计中，我们要思考如何在有限的空间内合理布局，更好的展现内容，无论是文字还是图片，都要让内容看上去优雅得体。我们需要根据不同的应用类型、产品定位、用户目标来选择合适的界面布局，还要勇于尝试，敢于打破常规，设计出让用户赏心悦目的产品。&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;br /&gt; &lt;span style=&quot;color:#ff0000&quot;&gt;转载请注明出自&amp;rdquo;百度MUX&amp;rdquo;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://mux.baidu.com/?p=2950&quot; target=&quot;_blank&quot;&gt;http://mux.baidu.com/?p=2950&lt;/a&gt;&lt;/p&gt;</description>
				<author>limengran</author>
				<pubDate>2012-03-16 09:30:46</pubDate>
			</item>			<item>
				<title>触屏手机点击区域的小秘密</title>
				<link>http://ucdchina.com/snap/11591</link>
				<description>&lt;p&gt;做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。&lt;/p&gt;
 
&lt;p&gt;这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。&lt;/p&gt;
 
&lt;h3&gt;一、扩大操作焦点&lt;/h3&gt;
 
&lt;p&gt;iPhone自带的控件NavigationBar上的Button、TabBar上的Item、ToolBar上的ButtonItem，实际的点触区域都是被放大了的。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2012/03/navigationbar.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;navigationbar&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/94206ff2e4fb0192f9900c5f54f9e910.png&quot; alt=&quot;navigationbar 触屏手机点击区域的小秘密&quot; width=&quot;320&quot; height=&quot;61&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;/span&gt;虽然iPhone导航栏上的操作按钮仅有29px高，但是它的实际点触区域比整个导航栏的高度还要高出5px左右，大概能达到44px+5px，这样用户就不用小心翼翼的去点击返回按钮了，按钮点起来比看起来要大的多。&lt;/p&gt;
 
&lt;p&gt;如果导航栏下边区域还有按钮，或者输入区域，点击下边的按钮经常会触发导航栏上的按钮，这点很多开发人员都可能遭遇过，我看到Cocochina上就有不少类似问题，比如&lt;a href=&quot;http://www.cocoachina.com/bbs/read.php?tid=80992&quot; target=&quot;_blank&quot;&gt;wyx遇到的问题&lt;/a&gt;，比如&lt;a href=&quot;http://stackoverflow.com/questions/2271945/uinavigationbar-uibarbuttonitems-much-larger-click-area-than-required&quot; target=&quot;_blank&quot;&gt;dave遇到的问题&lt;/a&gt;。&lt;/p&gt;
 
&lt;p&gt;类似的，新浪微博的撰写微博界面也是个列子，当用户想编辑第一行的文字的时候，点击文字经常会误触顶部操作栏的取消或发送。随享微博客户端也是，顶部导航栏下边有一排操作图标，还是比较容易引发误操作的。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2012/03/4.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;实际焦点&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/828317cd834d400ce59107933f3b170d.png&quot; alt=&quot;4 触屏手机点击区域的小秘密&quot; width=&quot;320&quot; height=&quot;70&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;底部标签栏的可点击区域也比视觉焦点要多出5个像素左右，标签切换是比较常见的操作，这样一个小改动帮用户提升了标签切换的准确率。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2012/03/5.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;5&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/d45b9ecefe7c0d0ae7ab45bd791e18cb.png&quot; alt=&quot;5 触屏手机点击区域的小秘密&quot; width=&quot;320&quot; height=&quot;84&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;但是正因为iPhone标准的TabBar的点击区域是有扩张的，所以如果你在TabBar上方放置可操作区域，都比较难以点击，Foursquare和USA today等应用最后都是采用自定义TabBar的方式规避问题的。&lt;/p&gt;
 
&lt;p&gt;关于和设置往往被做成半透明图标，浮动在界面上，如果操作焦点=视觉焦点，那么用户就只能杯具的削尖指头去点了，还好这两个按钮的实际操作焦点要比视觉焦点大的多，保证了足够准确的点击。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2012/03/1.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;1&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/f12096ae375bb5ff47fb393c48548de5.jpeg&quot; alt=&quot;1 触屏手机点击区域的小秘密&quot; width=&quot;369&quot; height=&quot;110&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;Android4.0规定的有效可触摸的UI元素标准是48dp，一般来说，48dp转化为一个物理尺寸，约为9毫米。建议的目标大小为7~10毫米，这一点与iPhone一致，这是一个用户手指能准确并且舒适触摸的区域。&lt;br /&gt; 如果所示，你的UI元素可能小于48dp，图标仅有32dp，按钮仅有40dp，但是他们的实际可操作焦点都达到了48dp的大小。&lt;/p&gt;
 
&lt;h3&gt;二、下移操作焦点&lt;/h3&gt;
 
&lt;p&gt;由于用户在进行各种操作的时候，需要确保自己准确的点击到了相应的元素，所以一般情况下，右手持机的用户，落点会偏右偏下，见下图：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2012/03/%E8%90%BD%E7%82%B9%E7%9B%91%E6%B5%8B.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;落点监测&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/655addbce3dbadb82748e81200392dbc.png&quot; alt=&quot;落点监测 触屏手机点击区域的小秘密&quot; width=&quot;273&quot; height=&quot;393&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;我们的UER把手机屏幕分成6*12个可点击的焦点，从用户的点击落点监测可以看到，右手持机的用户有很大一部分点击落点和视觉焦点是有很大偏差的，偏差具有一定的规律性。屏幕右下方格外明显。&lt;/p&gt;
 
&lt;p&gt;如果你的应用是操作密集型，可以考虑调整有效点击区域，整体往右往下偏移几像素，准确率会有所提升。&lt;/p&gt;
 
&lt;p&gt;&lt;em&gt;&lt;span style=&quot;color:#808080&quot;&gt;##此部分内容希望有过类似研究的同学可以共同探讨##&lt;/span&gt;&lt;/em&gt;&lt;/p&gt;
 
&lt;h3&gt;三、留白以规避误点击&lt;/h3&gt;
 
&lt;p&gt;当然，仍然有很多情况，我们是无法用放大操作焦点或偏移操作焦点的方式来解决的，那就是当两个可操作元素确实离得比较近的时候。这时候，iPhone内置的应用会巧妙的采用留白排版方式以规避误点击。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2012/03/liubai.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;输入框的留白&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/2d9212e5980902da479ba3bb9bacf1ef.png&quot; alt=&quot;liubai 触屏手机点击区域的小秘密&quot; width=&quot;320&quot; height=&quot;96&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;比如iPhone系统的输入框，如果框右边有发送按钮的话，我们可以发现右侧是有个明显的留白的，由于中英文字体差异，中文的留白略大于英文。这个留白，一方面是为了规避跟发送按钮焦点太近的误操作问题，一方面是为了给滚动条留足够的空间。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2012/03/liubai2.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;留白2&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/c7f27e9c299f967121f22b1b73e6e9de.png&quot; alt=&quot;liubai2 触屏手机点击区域的小秘密&quot; width=&quot;320&quot; height=&quot;104&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;而带有全部删除按钮的输入框，文字离全部删除按钮也会有适当留白，规避切换光标时可能引发的误操作。&lt;/p&gt;
 
&lt;p&gt;当遇到焦点密集的问题的时候，我们都是可以利用增加行间距、元素间距和留白的方式来解决可点击区域问题。&lt;/p&gt;
 
&lt;p&gt;最后再啰嗦一句小图标元素大点击区域的实现方式，方法1：UI提供带透明点击区域的图标，就是一张透明的图，上面一个小图标；方法2：UI提供一个大点的透明的图，覆盖到图标上面，点到上面就执行操作；方法3：程序人员自己去实现，方法请问他们，嘿嘿。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/322&quot; target=&quot;_blank&quot;&gt;移动设备的交互和设计&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://elya.cc/2012/03/06/design-focus/&quot; target=&quot;_blank&quot;&gt;http://elya.cc/2012/03/06/design-focus/&lt;/a&gt;&lt;/p&gt;</description>
				<author>elya妞</author>
				<pubDate>2012-03-07 17:38:37</pubDate>
			</item>			<item>
				<title>手机产品设计禁忌</title>
				<link>http://ucdchina.com/snap/11543</link>
				<description>&lt;p&gt;在做手机产品设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的产品心生怨念。刚出道的朋友没有经过实战，对细节注意不多，往往都会遇到类似的问题，强调多次后，觉得不如写下来，给新人共勉。&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;1、没有不可点击的效果&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态，那么一定要灰掉，或者拿掉按钮，否则会给用户误导。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;2、菜单层次太深&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;菜单项以5~7个为宜，如果有二级菜单，就要注意合理的菜单分类，不能有太多层级的菜单，否则很难预期，也很难找到，寻找和返回都会变得很麻烦。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;3、文字长度不加以限制&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;手机界面很小，寸土寸金，一页只能显示下6~10个列表，一行只能显示下10~16个字，标题栏的字数以5个以内为宜，标签栏也以2~3个为宜，那么这时候出现文字过长的情况，一定要定义一下处理方式，如果是选择型的，一般是截断或者打点缩略；如果是内容阅读型的，可以折行。但最合理的方式还是精简文字内容，缩短文字长度。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣ 4、文字表意不明&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;由于手机是碎片时间、片段式阅读，所以手机界面上的文字表意性要求的更高，更苛刻，一定要在用户瞟到的瞬间，准确的传达信息。除了表意清晰之外，还要求语言精简，避免啰嗦；使用用户的语言而不是程序的语言；产品文案体现产品性格。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;5、交互流程分支太多&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;做交互的时候一定要有一个任务流程的概念贯穿始终，用户是为了完成某个任务而使用软件的，交互设计师除了关注界面元素、跳转逻辑和交互反馈之外，还要关注用户任务，分得清主要任务和次要人物，给主要任务一个畅通无阻的清晰流程，不要给予太多可能的分支，干扰主要流程。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;6、相关的选项离的很远&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;相关选项一定要具有操作上的延续性，虽然手机屏幕看起来比电脑屏幕要小的多，但是手机在屏幕上移动的代价，却要比鼠标在电脑上移动的代价大的多，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;7、一次载入太多的数据&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;流量、电量、速度和稳定性是手机产品的四个硬指标，如果你的应用不能合理的帮助用户节约流量、电量，提升浏览速度和浏览体验，保证应用的稳定性能，就不要谈什么用户体验。你可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式来保证省、快、稳基础体验。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;8、按钮可点击范围比看起来小&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;我们都知道移动端有个神奇的数字&amp;ldquo;44&amp;rdquo;，根据食指最小点触距离7mm、拇指最小点触距离9mm，可以推导出做设计的时候，最小的点触距离是44*32 px。你可以设计一个精美的小图标，但是在定义它的点触大小的时候，却可以做放大处理，但你千万不要设计一个傻大的图标，点触范围却比图标要小，这样会给用户带来明显的误操作挫败感。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;9、标签页跟内容没有从属关系&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;标签页跟内容需要有很好的联动关系，一般一个界面内有二级标签就足够复杂了，千万不要再有三级标签、四级标签。每个标签页都有自己特有的内容，当切换标签的时候，内容跟着切换。标签页如果是点击切换，内容部分可以整体刷新，标签页如果是滑动切换，内容页也要跟着滑动切换，千万不要一个点、一个滑。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;10、把所有的操作都暴露出来&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;手机产品交互设计要经历缩减、隐藏、附加、组织的过程，千万不要妄图把什么功能、什么操作都暴露出来，以彰显强大。你需要把自己应用的所有功能所有操作做个优先级设定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理归类组织后，隐藏起来就可以了。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;11、没有空数据界面设计&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;我们在做设计的时候，往往是提供理想化的场景，用户都已经进来了，我们怎么玩。但是，往往应用刚推出的时候，是没有用户的，甚至当应用有了一定用户基础的时候，新进来的用户打开应用的时候，应用仍然可能是一种没有数据的状态，再或者当用户清楚了全部数据，这三种情况下，用户都可能遇到空数据的界面。新手设计师往往不加设计，这时候用户就会看到一个空白界面，茫然失措。有经验的做法就是，提供一个情感化的界面，告诉用户当前没有内容；更具引导性的做法，就是引导用户去执行操作。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;12、用户引导的滥用&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;去年就预言用户引导将要泛滥，很明显设计部门都喜欢用漂亮的引导界面告诉用户新增的功能或隐藏的应用，但不是所有的应用、所有的功能都需要花哨的引导的。如果是通用的功能、非重点的模块，根本就不需要引导；如果是功能告知，只需呀轻量级的引导；如果是版本更新说明，说明书式的引导可以采用，但是要言简意赅。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;13、无加载中状态&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;手机产品只要是需要联网，需要交换数据，都需要提供一个加载中状态的，无论是菊花转还是Toast还是对话框，你需要给开发人员一个全局的定义，并且要告知加载中是模态（前台加载）的还是非模态的（后台加载）。且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;14、未定义Back的逻辑&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;在为Android做设计的时候，会涉及到硬件交互，其中Back键的使用，是一门学问，Android官方有一些指导原则可以借鉴，但是具体开发的时候，还是会有很多特殊情况，比如单一实例的替换、键盘及一些中间状态，这种情况下，Back可能需要被定义一下，该回到前一个实例（那就需要变成多实例了）还是该回到初始状态（清空输入内容或恢复初始状态）。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;▣&amp;nbsp;15、无横屏模式的设计&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;由于横屏模式下，纵向空间变得格外宝贵，导航栏、标签栏、键盘都需要被压扁，横盘模式一定要考虑是简单拉伸适配还是重新设计，如果你的应用不适合在横屏模式下使用，就屏蔽横盘，如果你的应用包括应用widget都需要支持横盘模式（甚至是带侧滑键盘的横屏机器），就需要提供设计方案。如果是S60V5这种竖高的机器，甚至需要重新设计。&lt;/p&gt;
 
&lt;p&gt;作为手机产品交互设计师，利用设计规避问题，提升产品用户体验，把体验转化成价值，是我们所追求的境界。手机产品设计禁忌，是笔者遇到的一些设计问题，欢迎各路高手协同补充遇到的问题，共同避免重复发明轮子。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://elya.cc/2012/02/26/taboo/&quot; target=&quot;_blank&quot;&gt;http://elya.cc/2012/02/26/taboo/&lt;/a&gt;&lt;/p&gt;</description>
				<author>elya妞</author>
				<pubDate>2012-02-27 20:07:38</pubDate>
			</item>			<item>
				<title>为iOS5设计消息通知</title>
				<link>http://ucdchina.com/snap/11451</link>
				<description>&lt;p style=&quot;text-align:center&quot;&gt;通知中心作为iOS5的重大更新内容之一，可以将用户的iOS设备里的所有的通知集中放在一个地方，大大方便用户查看和管理。如果用户收到一封新邮件、一条短信，或者是一个添加好友的请求，无论在任何界面下（包括游戏等全屏应用），用户都可以通过从屏幕顶部向下滑，将通知中心&amp;ldquo;拉下来&amp;rdquo;，用户可以在这里查看到所有的通知。所以苹果在iOS5的介绍中说到通知中心是你随时掌握最新生活资讯的绝佳途径。&lt;/p&gt;
&lt;p style=&quot;text-align:left&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/7a8e0ad49e7f743bb27d9945d7d6c6a4.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;可能出现通知的场景&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;一般在下面的场景中iOS应用程序会通知用户有有意思的事情发生了：&lt;/p&gt;
 
&lt;p&gt;1. 收到一条消息&lt;/p&gt;
 
&lt;p&gt;2. 即将发生某件事&lt;/p&gt;
 
&lt;p&gt;3. 有新的数据可供下载&lt;/p&gt;
 
&lt;p&gt;4.&amp;nbsp;某些事物的状态发生了变化&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;iOS5的四种通知类型&lt;/strong&gt;&lt;/h3&gt;
 
&lt;h3&gt;&lt;strong&gt;1. 横幅（Banner）&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;横幅通知是在iOS5中出现的新特性，是显示在屏幕顶部的横条，几秒钟后会自动消失。一条横幅通知会显示程序的小图标（低分屏下显示29&amp;times;29的图标，高分屏显示58&amp;times;58的图标），程序的名字和通知的内容。小图标可以帮助用户一眼就看清楚是哪一个应用程序在提醒他们。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/f8145037260db12dd42c8fa659c877a3.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;&lt;span style=&quot;font-weight:bold&quot;&gt;2. 提醒（Alert）&lt;/span&gt;&lt;/h3&gt;
 
&lt;p&gt;提醒通知不会自动消失，需要用户与之交互才能关闭。设计师需要设计通知的具体内容，有时还要action button（后面会谈到）设计title。整个提醒通知的背景样式，包括里面的按钮的样式都是不可变的，所以设计师和开发者就不要在这里发挥创意了。Android由于其开放性，我们是可以使用自己设计的控件的，而iOS这样做可能是为了保持UI风格一致性。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/046ecf94c68316bf807dbe6fc0c123bd.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;&lt;span style=&quot;font-weight:bold&quot;&gt;3. 标记（Badge）&lt;/span&gt;&lt;/h3&gt;
 
&lt;p&gt;标记通知是显示在程序图标的右上角的红色椭圆形标记，里面显示的数字表示需要用户处理的通知的数量。同样地，标记的颜色和形状、大小也是不可以更改的。App Store中有更新的应用程序的数量，Mail中收到的未读邮件的数量都是用标记通知用户的。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/bc50cd2e45ffbfd2bcdeb14601dfa3a8.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;&lt;span style=&quot;font-weight:bold&quot;&gt;4. 声音（Sound）&lt;/span&gt;&lt;/h3&gt;
 
&lt;p&gt;声音提示也是iOS的一种通知方式，支持自定义，可以与前面三种通知类型搭配使用。&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;本地通知和推送通知&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;iOS应用程序会使用本地通知或推送通知来提醒用户：&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;1. 本地通知&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;应用程序的本地通知是由用户的iOS设备生成并发布的，无论这个应用程序是否运行在前台。就像一个日历应用，或者是一个to-do list应用，可以发出一条本地通知提醒用户马上有一个会议要开始了。&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;2. 推送通知&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;应用程序的推送通知是这样发布的：该应用的远程服务器(Provider)先发出一条通知给苹果的推送通知服务(Apple Push Notification service, APNS)，苹果的通知服务器再把这个通知推送给所有安装了这个应用的iOS设备。&lt;/p&gt;
 &lt;ol&gt; 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/6374d02cb05f05b0154cd4956e6b3889.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 &lt;/ol&gt; 
&lt;p&gt;&lt;span style=&quot;text-align:left&quot;&gt;如果要使用推送通知，必须先在苹果的推送通知服务里注册你要使用哪几种类型的通知，就比如下面的一段代码就表示同时注册了标记和声音两种类型的通知：&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;- (void)applicationDidFinishLaunching:(UIApplication *)app {&lt;/p&gt;
 
&lt;p&gt;// other setup tasks here....&lt;/p&gt;
 
&lt;p&gt;[[UIApplication sharedApplication] registerForRemoteNotificationTypes:(UIRemoteNotificationType&lt;span style=&quot;color:#ff0000&quot;&gt;Badge&lt;/span&gt;|UIRemoteNotificationType&lt;span style=&quot;color:#ff0000&quot;&gt;Sound&lt;/span&gt;)];&lt;/p&gt;
 
&lt;p&gt;&lt;/p&gt;
 
&lt;p&gt;}&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;如何使用各种通知&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;使用本地通知的应用程序可以使用横幅、提醒、标记、声音，但是使用推送通知的应用程序需要先注册要使用的通知类型。&lt;/p&gt;
 
&lt;p&gt;在使用通知的时候需要注意以下几点：&lt;/p&gt;
 
&lt;p&gt;1. 保证标记的内容是最新的&lt;/p&gt;
 
&lt;p&gt;2. 对同一事件不要发出多个通知&lt;/p&gt;
 
&lt;p&gt;3. 通知内容不用包含应用程序的名称&lt;/p&gt;
 
&lt;p&gt;对于标记型通知，当所有的事项都解决后，标记会自动消失。&lt;/p&gt;
 
&lt;p&gt;在横幅和提醒中，以及顶部的通知中心里，iOS系统会自动在消息里显示应用程序的名称，所以在设计通知的内容时，就无需包含app的名称了。&lt;/p&gt;
 
&lt;p&gt;在设计通知的内容时，还需要注意：&lt;/p&gt;
 
&lt;p&gt;1. 关注于信息的表达，而不是用户的动作。避免提示用户去点哪一个按钮或者是怎样打开app&lt;/p&gt;
 
&lt;p&gt;2.&amp;nbsp;简短，最好不超过两行。长信息难以快速阅读，而且必然会有滚动条&lt;/p&gt;
 
&lt;p&gt;3. 使用句式大写（sentence-style capitalization，第一个单词的首字母大写）和合适的标点符号，结尾一般使用句号&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;关于&amp;ldquo;提醒&amp;rdquo;&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;一条提醒可能会包含一到两个按钮。对于有两个按钮的提醒，需要把关闭提醒的按钮放在左边，把action button放在右边。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/3f7b714bab00c44b0acf5f8982e302ee.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align:left&quot;&gt;点左边的按钮会关闭提醒，点右边的按钮会关闭这条提醒并打开应用。&lt;/p&gt;
 
&lt;p&gt;如果只有一个按钮，这个按钮应该是一个确定按钮。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/0c6f3db95a5e274eb1d2e80712ba23cb.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align:left&quot;&gt;点击这个确定按钮也只会关闭提醒，而不会打开应用。&lt;/p&gt;
 
&lt;p&gt;对于提醒通知，在设计action button的title的时候需要注意：&lt;/p&gt;
 
&lt;p&gt;1. title能准确描述打开应用的动作。比如点击Play按钮，就能够打开这个游戏，用户能够立刻玩&lt;/p&gt;
 
&lt;p&gt;2. 使用标题式大写（title-style capitalization，每个单词的首字母都大写）&lt;/p&gt;
 
&lt;p&gt;3. 足够简短&lt;/p&gt;
 
&lt;p&gt;在锁屏状态的时候收到新提醒通知，会把action button的title显示到&amp;ldquo;slide to view&amp;rdquo;的信息里，替换掉&amp;ldquo;view&amp;rdquo;这个词，并且将所有字母都转化为小写。&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;关于&amp;ldquo;声音&amp;rdquo;&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;对于声音提示，用户没有使用手机的时候声音可以吸引他们的注意力，这可以避免用户遗漏重要信息。&lt;/p&gt;
 
&lt;p&gt;我们可以使用系统内置的声音，也可以自定义声音。如果使用自定义的声音，应该保证它足够简短，而且是精心制作的。&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;关于&amp;ldquo;通知栏&amp;rdquo;&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;只要不是锁屏状态，都可以从屏幕顶部向下滑打开通知中心。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/3064533deb537e1ee744daabc2059b6f.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align:left&quot;&gt;如果是在游戏里面，比如水果忍者这种游戏，为了避免手指不小心滑到屏幕外而打开了通知中心，iOS5提高了打开通知中心的难度：先从屏幕顶部下拉出现有类似防滑纹的下拉条，出现下拉条后再次向下拖拽，才可打开通知中心，否则几秒钟后下拉条会自动收起。此处带防滑纹下拉条的设计可以帮助新用户迅速建立下拉打开通知中心的心智模型。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/0f7d85a89c9c36856f676680b3a3f476.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align:left&quot;&gt;iOS5对下拉通知栏里的通知进行了组织，同一个app的通知根据时间先后顺序组合在一起。删除某个app的通知消息需要先点右边的&amp;ldquo;X&amp;rdquo;按钮，&amp;ldquo;X&amp;rdquo;按钮变为&amp;ldquo;清除&amp;rdquo;，用户再次点击清除才能移除这个app下的所有通知。两步操作降低误删几率，而且其交互形式也比常见的弹出二次确认的模态窗口友好得多。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img style=&quot;text-align:left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/59a05e9840d23eb0b36d745eda7754e5.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;其它平台通知系统&lt;/strong&gt;&lt;/h3&gt;
 
&lt;ul&gt;
&lt;h3&gt;&lt;strong&gt;1. Android 4.0&lt;/strong&gt;&lt;/h3&gt;
 
&lt;/ul&gt;
&lt;p&gt;Android4.0的通知栏与前几代Android系统一样，也是从屏幕顶部向下拉出，与iOS和前代Android通知栏的区别在于可以将某条通知按住向左拖动移除该通知。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/d415d553110003972f42483f84baa53e.jpeg&quot; alt=&quot;&quot; /&gt; &lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/bb58e1aabbfcb90677e909b07879dea7.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align:left&quot;&gt;Android的Dialog Notification与iOS的Alert类似，都需要用户立刻处理才能移除该通知。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img style=&quot;text-align:left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/33b44079dc4e7dcaf87102347ac778bd.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;h3&gt;&lt;strong&gt;2. webOS&lt;/strong&gt;&lt;/h3&gt;
 
&lt;/ul&gt;
&lt;p&gt;webOS的通知栏位于屏幕底部，收到新通知的时候会在通知栏显示对应的应用程序的icon。用户可以点击通知栏，查看所有通知的摘要，长按某条摘要往左或者往右滑即可从通知栏移除该通知。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/9521e0e5dc7cb2a2063db3775fdb7de1.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;h3&gt;&lt;strong&gt;3. Windows Phone&lt;/strong&gt;&lt;/h3&gt;
 
&lt;/ul&gt;
&lt;p&gt;由于Windows Phone使用了独特的Metro UI，每个Tile（权且叫它小瓷片吧）能够承受更多的信息。小瓷片的标题、背景和提示数是可以改变的，以此达到提醒用户的目的。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2013-01/dc5df2209c46c16751e1b27effc20503.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align:left&quot;&gt;Windows Phone的Toast Notificatoin与iOS的Banner通知类似，也是显示在屏幕顶部，显示一段时间后消失。&lt;/p&gt;
 
&lt;p style=&quot;text-align:center&quot;&gt;&lt;img style=&quot;text-align:left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2013-01/3071ec62a9a4507ad5ee8df0241fb75e.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
 
&lt;h3&gt;&lt;strong&gt;总结&lt;/strong&gt;&lt;/h3&gt;
 
&lt;p&gt;在iOS5以前的iOS系统中，由于只有Alert、Banner、Sound三种消息提醒的方式，所以经常出现在使用一个app的时候出现一条通知，直接打断用户的操作，这种做法非常粗暴，伤害用户的情感。&lt;/p&gt;
 
&lt;p&gt;iOS5新增的Banner通知解决了这一问题，使iOS在消息提醒的处理上拉近了与Android的差距。此外，为了弥补无法在首页放置插件的缺陷，iOS5也将天气、股票等信息放到了通知中心里。这或许可以视作未来苹果将赋予通知中心更多更强大功能的预兆。&lt;/p&gt;
 
&lt;p&gt;合理地选择本地通知和推送通知，选择正确的通知类型，设计规范的通知内容将是所有用户体验设计师必须掌握的知识。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://mux.baidu.com/?p=2728&quot; target=&quot;_blank&quot;&gt;http://mux.baidu.com/?p=2728&lt;/a&gt;&lt;/p&gt;</description>
				<author>千年牛皮糖</author>
				<pubDate>2012-02-07 12:17:07</pubDate>
			</item>			<item>
				<title>手机产品设计之用户引导</title>
				<link>http://ucdchina.com/snap/10811</link>
				<description>&lt;p&gt;在手机产品的设计过程中，由于手机界面的承载能力有限，产品功能的不断膨胀，必须要在用户打开应用之后告知他某些新奇的功能，引导他完成某些主要任务流程，让用户不至于迷失在陌生应用中不知所措。帮助用户快速掌握应用的使用方法，体验到应用的乐趣，新手引导成了一个必须考虑的设计环节。&lt;/p&gt;
 
&lt;p&gt;用户引导的直接目标是帮助用户更好的使用产品，终极目标是提升用户满意度。虽然，大多数情况下，我们可以通过合理的设计，尽可能的简化功能，让用户无需引导和帮助，就可以完成必要的任务。但是实际上，手机产品的限制和对强大功能的追求，导致这个目标很难达到，因此越来越多的应用开始使用用户引导来帮助用户快速熟悉产品。&lt;/p&gt;
 
&lt;h3&gt;&lt;span&gt;&lt;/span&gt;一、文字说明类&lt;/h3&gt;
 
&lt;p&gt;第一类最简单的用户引导方式，就是文字说明类。用文字描述的方式，帮助用户理解产品的功能和所需要执行的操作。文字说明类用户引导如下图的几个例子：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/Jamie.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;Memento Instapaper Jamie&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/64562fc49d74fbf2b3f4126ba825a7c9.jpeg&quot; alt=&quot;Jamie 手机产品设计之用户引导&quot; width=&quot;714&quot; height=&quot;360&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;从左到右依次是Memento、Instapaper和Jamie Oliver&lt;/p&gt;
 
&lt;p&gt;Menento是一个日记程序，当你没有给日记增加tag的时候，这里就会有文字说明，告诉你tag是用来浏览和搜索的，可以在创建和编辑日记的时候创建。告诉你可以把好友加为tag，可以把地理位置加为tag，可以把事件加为tag，可以创建自定义tag；Instapaper是一个阅读工具，当你首次打开应用，没有文章的时候，这个页面会有文字说明，告诉你你可以通过朋友、作者、浏览器找到可阅读的文章。当你通过浏览器书签或者Email发送的方式增加文章到Instapaper后，文章会显示在这里；Jamie Oliver是一个美食工具，如果你没有创建美食购物清单的时候，这个页面会文字提醒你改如何增加Shopping list。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;适用情况：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;聪明如你，肯定已经发现了，这里提到的例子都是出现在无数据的时候。无数据的时候，是文字说明一个很重要的出现场景。很多设计师会忽略无数据时的界面设计，产品人员也会忽略无数据的时候，该怎样引导用户使用产品，导致用户看到空空的面板，拂尘而去。&lt;/p&gt;
 
&lt;p&gt;其实，文字说明也可以用在超过5s的启动界面(Splash Screens)上 ，也可以用在某个操作按钮的下面，也可以用在某段数据加载的弹出框中。它可以用在你能想到的任何地方，只要是合情合理的设计需求。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;缺点：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;当然，文字说明的劣势也显而易见，长篇累牍的赘述功能，很少有人能耐心的看完，何况枯燥的说明书一向是Apple产品所反感的东西，所以文字说明要慎重，不要滥用。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;设计指南：&lt;/strong&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;要使用用户语言而不是程序语言&lt;/li&gt;
 
&lt;li&gt;在无数据的时候可以给出文字说明&lt;/li&gt;
 
&lt;li&gt;不要长篇累牍，要简明扼要&lt;/li&gt;
 
&lt;li&gt;可以利用等待的时间用文字说明功能&lt;/li&gt;
 
&lt;li&gt;可以用文字说明描述复杂的功能操作&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;二、功能提醒类&lt;/h3&gt;
 
&lt;p&gt;因为某些功能设计成ICON不利于识别，某些功能隐藏在手势操作之后不易察觉，某些功能是产品主打功能需要用户知晓，在这种情况下，越来越多的应用采用功能提醒类的浮层做用户引导，如：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/Talkbox.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;Tweetbot QQ通讯录 Talkbox&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/727e3ac150b7ab81dadfb6d43b78002d.jpeg&quot; alt=&quot;Talkbox 手机产品设计之用户引导&quot; width=&quot;712&quot; height=&quot;356&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;从做到右依次是Tweetbot、QQ通讯录和Talkbox&lt;/p&gt;
 
&lt;p&gt;Tweet用带箭头的小浮层告知用户，点击navigation bar可以切换关注列表；QQ通讯录用带用动效的小浮层提醒用户，向左滑动可以展现右侧隐藏的屏幕内容；Talkbox用带Gif小动画的浮层告诉用户，把收集放到耳朵旁可以从耳机收听。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;使用场景：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;用来告知重要功能、不易识别的功能图标、不易察觉的隐藏操作&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;缺点：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;有时候需要提醒的太多了，往往无从下手。如果你的应用没有清晰的重要功能，还是小心设计，慎用提醒的好。因为你提醒的可能不是用户需要的，让新手用户无所适从，老手用户觉得你太过肤浅。不过还好这类提醒不会打断用户的操作，也不会强迫用户一定看完，但是也正是因为这类提醒稍纵即逝，也很容易不小心错过，导致之后再也无法查看，所以要谨慎的设置一个重复频率，避免被漏看。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;设计指南：&lt;/strong&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;不要打断正在进行的操作&lt;/li&gt;
 
&lt;li&gt;判断需要提醒的时机&lt;/li&gt;
 
&lt;li&gt;持续3~5s自动消失&lt;/li&gt;
 
&lt;li&gt;可以重复出现3次左右&lt;/li&gt;
 
&lt;li&gt;用来提醒隐藏的操作或重要的功能&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;三、操作引导类&lt;/h3&gt;
 
&lt;p&gt;操作引导类的用户引导方式被大量应用与游戏和SNS产品中，如果是设置项很多的复杂产品，也必须有合理的操作引导。操作引导分为强制性的和非强制性的。强制性的主要是注册、验证、激活相关流程，不满足条件无法满足安全性；非强制性的则多是鼓励填写完善的资料或者鼓励完成某个任务的，这类引导最好给予一定的激励，如积分、徽章、等级等等，至少要有一个&amp;ldquo;恭喜你，成功了&amp;rdquo;之类的心里满足暗示。具体案例见下图：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/With.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;Albumphoto\Gowalla\With&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/eaf7037706e43c3ef8d0886c202b765d.jpeg&quot; alt=&quot;With 手机产品设计之用户引导&quot; width=&quot;712&quot; height=&quot;355&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;从左到右依次是Albumphoto、Gowalla和With。&lt;/p&gt;
 
&lt;p&gt;Albumphoto引导新用户新建一个相册；Gowalla引导新用户创建一个签到信息并分享图片给好友；With引导用户绑定Twitter账号用以分享照片。如果是复杂的任务流程，每一步都要给新用户讲清楚，这一步处于哪一个环节，该怎么操作，有什么作用。&lt;/p&gt;
 
&lt;p&gt;操作引导需要一定的操作激发，在一定的时机出现，有一定的重复频率，并定义一定的引导样式。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/qq.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;新手引导&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/6a2d93be1ec21b61636d2ec206b5ff13.jpeg&quot; alt=&quot;qq 手机产品设计之用户引导&quot; width=&quot;512&quot; height=&quot;161&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;使用场景：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;引导用户执行操作、引导用户登录注册绑定账号、引导用户完善资料、引导用户导入关系、引导用户分享应用给好友等等&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;缺点：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;有时候有点过于强势的嫌疑，用户不一定真的需要这种程度的引导，不如只有一个聚光灯聚焦在重要操作上来的直接，否则所有的App都像游戏客户端发展了。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;设计指南：&lt;/strong&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;可以引导用户执行主要操作&lt;/li&gt;
 
&lt;li&gt;不要强迫用户执行操作&lt;/li&gt;
 
&lt;li&gt;如果任务是多步骤要关注每一步的设计&lt;/li&gt;
 
&lt;li&gt;主要功能可以在设计上区别于其他&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;四、操作示意型&lt;/h3&gt;
 
&lt;p&gt;操作示意型新手引导，往往是采用一段简单的动画，或是把功能显示出来，然后在平滑的移动到屏幕外边；或是把可点击的按钮做一个点击后的效果动画出来，或是把某些用户预期要执行的操作提前演示出来。我第一次见到不错的操作示意型新手引导是在Nokia N900上，Maemo操作系统，用一个小亮点模拟手指点击在一个操作按钮上的效果。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/naver_bump_weibo.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;naver_bump_weibo&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/731a72c14d7b7c2e5edcdf13dba784e3.png&quot; alt=&quot;naver bump weibo 手机产品设计之用户引导&quot; width=&quot;684&quot; height=&quot;338&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;上图从左到右依次是Naver、Bump和新浪微博。&lt;/p&gt;
 
&lt;p&gt;Naver的搜索类型切换是下拉搜索框就会出现的，首次启动的时候，搜索框处于下拉状态，提醒用户下拉就可以看到这些功能，然后自动隐藏；Bump则是在起始界面上，用动画的形式告知用户，碰一碰手机就可以传输数据了；而新浪微博在首次加载数据的时候，会给出一个手势+下拉的引导，告知用户下拉就可以刷新数据了。&lt;/p&gt;
 
&lt;p&gt;这些示意，用轻松浅显的手法，就传达给用户新鲜的功能好趣味的用法，比生硬的文字或者不合时宜的弹层都来得体贴，鼓励设计师多多尝试这种方式。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;使用场景：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;复杂或重要操作的动画告知&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;劣势：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;设计实现麻烦，成本略高&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;设计指南：&lt;/strong&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;注意动画持续的时间和出现的时机&lt;/li&gt;
 
&lt;li&gt;多用来说明隐藏操作或功能&lt;/li&gt;
 
&lt;li&gt;不要影响主要任务流程&lt;/li&gt;
 
&lt;/ul&gt;
&lt;h3&gt;五、说明书类&lt;/h3&gt;
 
&lt;p&gt;不知道从什么时候开始，说明书式的用户引导用开始流行起来了，这种貌似比较传统的手段，能更全面的展示产品的功能和使用方法，尤其是适用于产品的更新说明，本次版本迭代了哪些功能，进行了哪些改进，让用户一进来就知晓，知道自己所耗费流量耗费时间更新应用是物有所值的。单页的说明书类引导案例如下：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/google_pulltime_today.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;google_pulltime_today&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/f98729f2a58128994db90f8f4eea401c.png&quot; alt=&quot;google pulltime today 手机产品设计之用户引导&quot; width=&quot;702&quot; height=&quot;342&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;从左到右依次是Google客户端、Pull Time和today&lt;/p&gt;
 
&lt;p&gt;Google会在一页内给出多个问号，点击问号查看该区域所承载的操作及执行方法；Pull Time用更直观的方法来表示这款交互出类拔萃的产品到底该怎样使用；而Today则用一页图配文的说明来告知本版本更新了哪些内容。&lt;/p&gt;
 
&lt;p&gt;显而易见，一页能承载的内容有限，重点也不是特别突出，为了更立体的讲述产品，出现了一种演示型的新手引导，见下面一个案例：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/Layar.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;Layar&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/a562d0fc181e71c6821b2e0df9cdb810.png&quot; alt=&quot;Layar 手机产品设计之用户引导&quot; width=&quot;702&quot; height=&quot;259&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;Layar用一系列动画+文字的方式，即交代了产品能做什么，有交代了使用场景和使用方法。&lt;/p&gt;
 
&lt;p&gt;为了每次更新版本都能对用户有个更好的交代，很多应用开始采用多页的更新说明或使用介绍，见下面一个案例：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/Weico.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;Weico&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/9dffae74f2025f005ff96f84da805eba.png&quot; alt=&quot;Weico 手机产品设计之用户引导&quot; width=&quot;702&quot; height=&quot;700&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;Weico的这次改版所采用的新手引导方式，绝对是称得上让人惊艳级别的，用了6页，详细的介绍了虚拟形象功能，简单的提到了微博晒心情、Gif直接播放、图片进度提醒等等次级功能。虽然从功能上来讲，我并不一定认同虚拟形象，但是从引导上来讲，实在是太有爱了，不愧是设计公司。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;使用场景：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;产品更新说明、复杂产品用户教育&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;劣势：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;成本略高、具有强迫性&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;设计指南：&lt;/strong&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;告诉用户现在处于指南的哪个位置&lt;/li&gt;
 
&lt;li&gt;每个页面只讲清楚一个功能&lt;/li&gt;
 
&lt;li&gt;最好可以选择性的跳过&lt;/li&gt;
 
&lt;li&gt;只能出现一次&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;也许纷繁复杂的各种引导，在帮助新用户快速熟悉应用的同时，也让老用户不厌其烦的反复瞻仰一些已经耳熟能详的功能，尤其是某些应用还在应用内教育用户怎样使用系统级别的功能，就更显得累赘。曾经电脑软件的帮助文档也许是一个很好的思路，当你有不明确的地方的时候，点一下帮助，快速查阅遇到障碍的问题，一切迎刃而解。iPhone里也有预设的帮助图标，可是被利用的情况不是很好。&lt;/p&gt;
 
&lt;p&gt;当然，我更崇尚的，不是以上那些简单直白的引导，而是一种更简单更直白的引导，类似于深泽直人的无意识设计，让用户不知不觉间受到了某种操控，不自觉的产生某些行为。这就需要设计者懂一些心理学或营销学的东西了。&lt;/p&gt;
 
&lt;h3&gt;&amp;nbsp;一、数字引导&lt;/h3&gt;
 
&lt;p&gt;数字引导设计几乎都是在利用和发掘用户的心理影响用户行为。在很多时候，这种数字的激励方式确实对用户产生好的引导，让用户按照设计的轨迹行动。但是数字引导并不是万能的，在一些情景下这种引导设计如果不当的话，很可能会产生负面效果。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/jiepang-juhuasuan-qqyouxiang.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;jiepang-juhuasuan-qqyouxiang&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/ac15559674218dc4c4f5ce0b1522038a.png&quot; alt=&quot;jiepang juhuasuan qqyouxiang 手机产品设计之用户引导&quot; width=&quot;702&quot; height=&quot;347&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;从左到右依次是街旁、淘宝和QQ邮箱Wap版&lt;/p&gt;
 
&lt;p&gt;街旁用几条未读消息、几个好友请求来引导用户去查看新消息；聚划算采用了一个非常有紧迫感的倒计时的设计，旁边紧跟在一个参团按钮，同时还刻意把价格和折扣标红，显示出多少人已购买，这些数字共同营造了一种，时间紧迫、折扣低廉、多挣争抢的假象，让用户快速抉择去购买一个商品；QQ邮箱用很多红色气泡的设计，一下子把焦点聚集在你有未读消息的模块上。&lt;/p&gt;
 
&lt;h3&gt;二、小秘书类&lt;/h3&gt;
 
&lt;p&gt;不知道源头是哪里，越来越多的应用开始增加小秘书、XX客服、XX产品团队之类的官方账号用于用户引导了。这种方式有明显的好处就是把冷冰冰的机械引导变成了有血有肉的拟人化引导。小秘书会在你开启应用后第一时间告诉你，你可以做一些什么，非常体贴。如下面这些应用：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://elya.cc/wp-content/uploads/2011/10/weixin-miliao-talkbox.png&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;weixin-miliao-talkbox&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-07/05e3d9fc92358cd644bb8f16c034491d.png&quot; alt=&quot;weixin miliao talkbox 手机产品设计之用户引导&quot; width=&quot;702&quot; height=&quot;346&quot; /&gt;&lt;br /&gt; &lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;从左到右依次是微信、米聊、TalkBox&lt;/p&gt;
 
&lt;p&gt;这三个应用都属于IM类的，在你的好友里，多出一个系统账号来，用来跟你沟通，教你使用应用。当然都还不够智能，沦为广告发布渠道，而不是真的答疑解惑的小秘书。&lt;/p&gt;
 
&lt;h3&gt;&amp;nbsp;三、内容教育&lt;/h3&gt;
 
&lt;p&gt;内容教育的意思是，在用户使用应用之初，应用内可能没有数据也没有用户，用户不知道应用能带给自己什么好处。这时候，阅读类的客户端就会增加基本预设的书籍，比如产品说明书；GTD类的客户端就会增加几个待办事项，用待办事项的方式告知你可以做什么，怎么做；社交类的就会给你预设几个好友，你看着他们都做了什么，就知道自己该干什么了；搜索类的可能会给出搜索热词，你看到他们怎么去搜索，自己就知道该输入什么样的内容了。&lt;/p&gt;
 
&lt;h3&gt;四、文字口号&lt;/h3&gt;
 
&lt;p&gt;不要以为这种方式老土或者过时，这种方式是最行之有效的办法。如果你告诉用户&amp;ldquo;好的主厨最爱做的菜&amp;rdquo;，他就会选择那个菜；如果你告诉用户&amp;ldquo;优秀的人都会管理自己的消费计划&amp;rdquo;，他就会给自己制定消费计划；如果你告诉用户&amp;ldquo;优秀的相册至少有10张照片&amp;rdquo;，那么用户就会凑够十张照片上传，他们渴望被承认，你如果在他的潜意识里植入这种优秀的意识，他会为此买单的。&lt;/p&gt;
 
&lt;h3&gt;五、激励机制&lt;/h3&gt;
 
&lt;p&gt;好的引导是让用户自己探索发现，获得乐趣。乐趣哪里来呢？一方面是用户发现了隐藏操作，自我成就感膨胀，一方面可能是，用户完成了某项任务，系统赠与用户某些奖励。如Foursquare当初的积分、市长和徽章。&lt;/p&gt;
 
&lt;p&gt;记得米聊有一个页面做的特别的好，就是个人名片页，当你资料填写不完善的时候，它没有强硬的引导你去填写，而是在界面上放了一个进度条&amp;ldquo;完成度 10%&amp;rdquo;，并且告诉你，完成度越高，越容易找到更多朋友，于是在那个沮丧的10%面前，我不得不为了让它好看一点，添加了更多的资料，直到它显示100%为止，就像完成了一项伟大的任务。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://elya.cc/blog/2011/10/09/user-guide/&quot; target=&quot;_blank&quot;&gt;http://elya.cc/blog/2011/10/09/user-guide/&lt;/a&gt;&lt;/p&gt;</description>
				<author>elya妞</author>
				<pubDate>2011-10-09 19:31:57</pubDate>
			</item>			<item>
				<title>探索滑动手势</title>
				<link>http://ucdchina.com/snap/10010</link>
				<description>&lt;p&gt;Nokia N9刚刚发布，滑动手势承担了更多的功能性操作。从按键手机到iPhone的Home键，让人不禁联想，实现全触摸屏手机已经指日可待了。&lt;/p&gt;
 
&lt;p&gt;iPhone Home键已经承担的过多的操作，单击退出程序，双击进入多任务，自定义三击显示辅助操作，组合开机键截屏，恐怕这是所有手机中使用率最频繁的按键了。但是功能越来越多，要么继续压榨按键，要么挖掘新的手势操，责任自然落在点击和滑动这两个最基础的手势操作。&lt;/p&gt;
 
&lt;p&gt;比起电脑鼠标，触摸点击存在问题，但同时交互设计上可在采取各种优化措施。&lt;/p&gt;
 
&lt;p&gt;触摸屏点击形式本身单一，没有左右键点击之分。对于手机系统，可以获取触摸区域和时间，由此根据触摸目标和时间长短衍生出长按操作，相当于鼠标右键点击；根据触摸的时间间隔衍生出双击，但与鼠标的双击有区别。以鼠标在桌面上打开应用程序为例，鼠标停留效果之后第一击选择目标焦点，第二击相当于确认目标，触摸屏点击没有鼠标停留效果和选择目标焦点的概念，相比之下简化了操作，但是少了必要的富交互效果，比如查看图标属性。&lt;/p&gt;
 
&lt;p&gt;鼠标可以精确到1像素，触摸屏点击区域推荐为29像素，而且用户在点击触摸屏目标区域时并没有真正点中，存在一定偏差。这种缺陷在按键密集的输入法上体现尤为明显，频繁的误点击会影响用户的操作流。&lt;/p&gt;
 
&lt;p&gt;滑动手势可以和长按组合出拖动，除此之外仅仅停留在滑动页面显示区域。滑动模拟物理运动规律，慢速滑动时页面滚动的范围等于手指运动的区域，快速滑动时滚动的范围要计算手指移动的惯性，页面移动速度由快变慢。手机得到的参数有：触摸点坐标和时间，但坐标点和时间关系并不是一维的， 触摸点坐标随着时间变化也会发生变化，由此可以分析出手指移动的起始点、终点、移动速度、加速度和滑动曲线等。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;m&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-05/33c1d68ecdffc65d54d28067267de0c2.jpeg&quot; alt=&quot;&quot; width=&quot;480&quot; height=&quot;360&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;与点击和操作按键相比，滑动优势存在不少优势：&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;1.没有明确的目标区域。&lt;/strong&gt;比如浏览器页面中任何位置都可以执行滑动操作。N9解锁屏向上滑可以显示多任务，向右滑动显示消息推送和功能列表， iPad版Maven浏览器将页面滚动限制在特定区域，反而会影响页面的操作效率，书签和else-mobile一样将原本层级点击操作转变为滑动操作，用户手持设备的方式各不相同，同样会遇到操作效率和单级中显现的功能有限的问题，优点在于其形式占用的空间小。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;2.小区域内可以容纳更多的选项。&lt;/strong&gt;百度手机输入法的拼音拇指输入，&amp;ldquo;2abc&amp;rdquo;同时显示在一个按键，在按键上上滑数字&amp;ldquo;2&amp;rdquo;，利用滑动的方向选择不同的字母或者数字。还有MIUI最新的百变解锁屏，同样是在利用同样的起点但方向不同的滑动区分操作。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;3.比连续点击更快速。&lt;/strong&gt;Swype输入法之所以快捷，把点击变为滑动操作，省去连续输入过程中的手指重复的抬起和按下。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;4.弥补点击难以精确的缺陷。&lt;/strong&gt;iPhone和wp7使用滑动操作调节文本光标，以滑动的位移代替点击插入光标。&lt;/p&gt;
 
&lt;p&gt;N9屏外的触摸区只是全触摸屏手机发展过程中的过渡方案，其实没有触摸区也能胜任已有的滑动，&lt;strong&gt;猜想&lt;/strong&gt;系统在判断滑动起始点可以用屏幕内的边缘为基准，增加触摸区的概念纯粹是&amp;ldquo;欺骗&amp;rdquo;用户，减少误操作。滑动操作并不像点击那样立即响应，当中途发现误操作也是可以取消。从屏幕内滑向屏幕外应该可以执行页面内滑动，因为在滑动的开始时系统无法预知终点是否会在屏幕外。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;ifanr&quot; src=&quot;http://img.ucdchina.com/upload/snap/2012-05/673148b52cb704f5ba1bf9a603274925.jpeg&quot; alt=&quot;&quot; width=&quot;441&quot; height=&quot;327&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;em&gt;（图片来自&lt;a href=&quot;http://www.ifanr.com/44440&quot; target=&quot;_blank&quot;&gt;ifanr&lt;/a&gt;）&lt;/em&gt;&lt;/p&gt;
 
&lt;p&gt;三主屏左右滑动切换，形式和操作效果符合物理规律。在应用程序，如果之前是从多任务进入的，从触摸区四个方向滑动都可以返回多任务，从应用程序返回多任务时边界的阴影可以看出是前后两个界面，应用程序在三主屏的前方。在多任务进入应用程序时，应用程序从右边向左滑进显示区域，而不是放大之后覆盖多任务界面，界面之间的位置关系缺乏方向感。&lt;/p&gt;
 
&lt;p&gt;也许受iPhone的影响，这种操作需要时间去适应，在看到视频时本以为从屏幕上方滑进会显示消息通知栏，从底部滑进是返回或者显示多任务。把N9的多任务误以为是safari的多窗口，把多任务作也作为三主屏并显示应用程序的缩略图，比起图标式多任务除了增加点击区域，没有优点。Safari使用网页缩略图显示多窗口，因为缩略图比网站标题操作的效率更高，还可以显示网页的加载状况。N9多任务界面长按操作调出&amp;ldquo;删除&amp;rdquo;按钮，为什么要多次一举，不直接在缩略图上显示&amp;ldquo;删除&amp;rdquo;图标。&lt;/p&gt;
 
&lt;p&gt;N9的滑动操作确实有创新之处，比iPhone更进一步，但不完美。&lt;/p&gt;
 
&lt;p&gt;试想下iPhone去掉Home键会怎么样?现有的系统界面结构完全符合条件。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/322&quot; target=&quot;_blank&quot;&gt;移动设备的交互和设计&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/376&quot; target=&quot;_blank&quot;&gt;移动设备的手势设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://daichuanqing.com/index.php/archives/2706?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=%25e4%25b8%258d%25e5%25ae%258c%25e7%25be%258e%25e7%259a%2584%25e6%25bb%2591%25e5%258a%25a8%25e6%2589%258b%25e5%258a%25bf&quot; target=&quot;_blank&quot;&gt;http://daichuanqing.com/index.php/archives/2706?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=%25e4%25b8%258d%25e5%25ae%258c%25e7%25be%258e%25e7%259a%2584%25e6%25bb%2591%25e5%258a%25a8%25e6%2589%258b%25e5%258a%25bf&lt;/a&gt;&lt;/p&gt;</description>
				<author>晓生</author>
				<pubDate>2011-06-26 12:00:16</pubDate>
			</item>			<item>
				<title>移动设备手势设计初探</title>
				<link>http://ucdchina.com/snap/10632</link>
				<description>&lt;p&gt;嘿~最近在做各种移动端的产品，设计啊体验啊操作啊，用的手都起茧，工作之余也思考了&amp;ldquo;手&amp;rdquo;这种较新的交互方式，以及它与界面的关系。本文从手势的种类，应用场景，存在的可用性问题以及如何设计四个大的部分谈起，在此抛砖引玉供大家思考和学习。&lt;/p&gt;
&lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color:#808080&quot;&gt;&lt;a rel=&quot;attachment wp-att-4244&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4244&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/bf5660db975c818fb7f1b11611736234.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;25&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/strong&gt;&lt;br /&gt; 移动设备大行其道的今天，手势是一个流行词汇，那手势是什么呢？手，是人类各种创造性活动的天然工具，人们天生就会使用手的动作去表达情感，比如人们会使用握手来表示友好，聋哑人使用一套用手语来代替语言交流，这些都是手势在生活中的应用。可见自古以来手势就是一套特定的语言系统，在人的交流中发挥重要的作用。从交互上看，手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。&lt;/p&gt;
 
&lt;p&gt;然而交互设计领域，大家普遍探讨的手势概念，是区别于传统的键盘操作和鼠标操作的。后面会着重研究移动设备的手势操作，主要从手势存在的问题、应用场景以及设计时应注意什么说起。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4245&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4245&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/35aeab522f46bfb440ee302805f50b92.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;25&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 1. 利用鼠标、光标的轨迹模拟手势&lt;br /&gt; &lt;a rel=&quot;attachment wp-att-4228&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4228&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/dc715185d9561c359297375b0907d5a4.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;网站&lt;a href=&quot;http://www.kakarod.com/&quot; target=&quot;_blank&quot;&gt;www.kakarod.com&lt;/a&gt;，采用了大量的屏幕模拟手势交互，点击、拖拽等动作，生动活泼让人眼前一亮。&lt;/p&gt;
 
&lt;p&gt;2. 在物理硬件上的手势&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4229&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4229&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/b4c8593c1f88995ea9bd7d01e0977dee.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;苹果Magic Mouse鼠标, 。macbook触摸板均支持单指多指滑动等多种手势。&lt;/p&gt;
 
&lt;p&gt;3. 在触摸屏上的手势&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4230&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4230&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/f4681eb96b6d85582e2ce70f0d5e38b6.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;主要有长按、轻触、滑动、拖动、旋转、缩放、摇动这八种手势。&lt;/p&gt;
 
&lt;p&gt;4. 远距离体感&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4231&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4231&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/1db2d95c346b7dde21feab024bd5563e.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;通过摄像头，传感器等捕捉手甚至整个身体的姿势，来进行控制。&lt;/p&gt;
 
&lt;p&gt;5. 未来的手势&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4232&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4232&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/1e11e72a6fdd9172fd6ab3537cf112d5.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;利用全息投影以及传感器，在空间或者投影上直接操作，这个已经应用在某些领域，相信不久的将来一定会广泛服务于我们的生活。PS：在苹果最新申请的专利中就提到了&amp;ldquo;投影手势操作&amp;rdquo;的技术，乔帮主这次又会带来什么革命性的产品就让我们拭目以待吧。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4233&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4233&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/6e500cf1f7f2562b2fe0adb5fd383f46.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;345&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;当然在生活中也还有其他的手势操作，这里就不再赘述。本文主要研究的是目前爆发式增长的移动设备上的触摸屏手势操作，以ios，android系统为主。触屏上的手势是指，将一系列多点触摸事件综合为一个单独事件。分析触摸屏上的手势使用现状，发现相对于传统鼠标键盘，手势交互操作一些明显的特点。下图是从时间和空间两个维度总结出的手势概览。为读者在手势设计时提供参考。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4234&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4234&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/f37d8d0973d3caaddcf4c4bb2a973a68.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;458&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4248&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4248&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/3c386756c6e0bb091f74f92398655032.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;25&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 可用性研究的专家Don Norma在最新一期的《Interaction》杂志中也对手势交互界面进行了质疑和抨击，认为新的手势交互界面有很多地方没有遵循已经建立好的交互设计原则，使得经过良好测试和业内已被理解的交互设计标准正在被推翻、忽略和违背。&lt;/p&gt;
 
&lt;p&gt;笔者通过分析现有的app 应用，以及多产品的设计经验，发现此质疑不无道理，主要有以下几个问题：&lt;/p&gt;
 
&lt;p&gt;1.精确性降低&lt;br /&gt; 以 ios为例，相比光标1像素的精度，手势的精确性要低很多。适合手指点击区域需要做到44*44px（iphone4以下设备），配合手势的轻重有0~20px的偏差，所以触屏界面需要使用更大尺寸的控件响应面积。iPhone 3GS、iPad和iPhone4屏幕分辨率密度分别为163 ppi 、132 ppi和326ppi，可以看到3GS和iPad的控件响应像素接近，单边应达到44px的标准，而iPhone4则需要再扩大几倍。&lt;/p&gt;
 
&lt;p&gt;2.缺乏可见性和一致性&lt;br /&gt; 以iPad Pages这个App为例，比如文稿中有2个对象，你想要使它大小一样，有以下两个方法：你可以通过双指拖拽利用边缘参考线让它们大小一样，当然这种放大缩小的方式在很多App中都很常见，因此很容易想到。另外你也可以这样做，用一只手指拖拽其中一个对象的同时，用另一直手指触碰你想要与之相同的对象，当出现符合大小提示时先抬起第一个手指再抬起第二个手指，那么这两个对象的尺寸就完全一样了（这两种方式在app中没有任何帮助和说明）。那么很显然，没有人会轻易发现第二种手势方式。即使发现了也不会很快知道如何使用。再比如android的长按操作也是如此。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4235&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4235&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/a0ff59c3ce5d5a3fd750611d0e942eb2.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;543&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 造成这个问题的重要原因是手势界面通常没有代表动作的可视元素，手势即动作。若是通用自然的手势就没问题，若是罕见的组合手势那用户就很难发现它，并有可能带来可用性问题。&lt;/p&gt;
 
&lt;p&gt;3.增加操作成本以及误操作&lt;br /&gt; &lt;span style=&quot;color:#00ccff&quot;&gt;在位移上&lt;/span&gt;&lt;br /&gt; 手势操作相比于呆板的鼠标点击的确生动有趣了许多，但一些操作，比如放大缩小和下拉却增加了操作成本，在鼠标上滚轮就能完成的事，触屏上就需要手指上下拖动许多下。&lt;br /&gt; &lt;span style=&quot;color:#00ccff&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color:#00ccff&quot;&gt;在力度上&lt;/span&gt;&lt;br /&gt; 手势操作没有鼠标按下的物理反馈，因为力度也难以掌握，有时糟糕的设计会让用户误以为是自己操作的问题，从而反复尝试。&lt;br /&gt; &lt;span style=&quot;color:#00ccff&quot;&gt;在灵敏度上&lt;/span&gt;&lt;br /&gt; ios的触屏都很灵敏，轻触和长按的操作界限很模糊，并且除了固定的Button，很多操作的响应区都很大，不受Button大小限制。因此常常会不小心碰到使某个操作响应，例如在通话记录播出一个号码以及备忘录的右滑的删除。&lt;/p&gt;
 
&lt;p&gt;4.受限于物理因素&lt;br /&gt; &lt;span style=&quot;color:#00ccff&quot;&gt;物理按键&lt;/span&gt;&lt;br /&gt; 带来真实的触感和一定的操作中断感，后期的手机逐渐弱化物理按键，手势与屏幕结合的更紧凑。Android用硬件按钮触发菜单，意味着你无法预知什么程序以及在什么情况下会有菜单选项。因为硬件按钮始终在那里，无论程序是否需要它。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4236&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4236&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/52e81d762d7740ab6c527b5724552948.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color:#808080&quot;&gt;上图从左往右依次是Plam pre、palm pre2、palm pre3，返回按钮与手机屏幕融合得越来越紧凑&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color:#00ccff&quot;&gt; 横竖方向&lt;/span&gt;&lt;br /&gt; 直接受限于物理按键，android设备的物理按键位置不统一，横竖屏切换时不便于快速辨认，手势的连贯操作会受到比较大的影响。如果app支持水平方向，考虑将返回按钮和常用的菜单直接显示在软件界面上。因此app应考虑直接提供&amp;ldquo;返回&amp;rdquo;按钮。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4237&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4237&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/8357a96d1352fc9af610d17d73bc15fd.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;br /&gt; &amp;nbsp;&lt;br /&gt; &lt;span style=&quot;color:#00ccff&quot;&gt;设备尺寸&lt;/span&gt;&lt;br /&gt; 大屏幕的Pad支持更多的多指复杂手势，手机大多单指操作。&lt;br /&gt; &lt;span style=&quot;color:#00ccff&quot;&gt;控件形态&lt;/span&gt;&lt;br /&gt; 按钮的大小控制（不同分辨率下大小的转换）、拖动时的反馈提示、滑动选择与点击的转化。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4238&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4238&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/7f6ee52a25b3c92a19e42fdaae5c403a.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;467&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4239&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4239&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/2c473809929e550e8cc9c6ec2a8f5937.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;477&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4241&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4241&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/613b782d2b952608bcb3bcf4f22131a5.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;464&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4249&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4249&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/86146004d5e47b62253e06edeff7056a.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;25&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 基于上述可用性问题，总结出手势操作设计时应该注意以下几点：&lt;br /&gt; 1.操作引导&lt;br /&gt; 这里可以是详细的帮助界面也可以是隐喻图形化的引导（隐喻要符合用户的心智模型），例如分页的圆点标识，或者切换页面露出一部分内容，可长按的系统icon，翻起的页脚升，甚至动画等等。这里的提示程度自己拿捏，效率型应用，尽量做到清晰可见，即看即点。沉浸型应用可以适当预留探索的空间，让用户自己去发现，带来预期之外的惊喜。比如QQLiveHD首页拉绳的晃动。但是，要注意的是隐藏手势和快捷手势不能影响主操作流程，可以作为辅助手势来使用。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4242&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4242&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/dceb8431a8ea32d3951a207993c58bc9.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;2.操作反馈&lt;br /&gt; 手势操作快速轻便，但没有鼠标按下时didadida声的安全感，也十分受限于设备屏幕的灵敏度，所以操作反馈的作用至关重要。例如icon按下时的响应，这里除了没有mouse over的效果，其他三态和PC端是一致的，缺一不可。除此之外还要考虑的是操作区太小被手指遮挡住的情况，反馈一定要明显，并呈现在可视范围内。比如QQ通讯录的姓名检索操作。除了视觉反馈声音也是一种有效的反馈方式，比如iPhone发送SMS发送成功的声音。新浪微博的feed拉取，tweetbot等，都巧妙的运用了声音反馈。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4243&quot; href=&quot;http://cdc.tencent.com/?attachment_id=4243&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2012-07/45e180c6ef3524b820a7a36b469db805.png&quot; alt=&quot;&quot; width=&quot;720&quot; height=&quot;350&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;3.误操作&lt;br /&gt; 手势操作相比鼠标更灵活，如果你的程序非常复杂，承载的信息很多，大部分区域都是响应区，那么发生误操作的几率也会大大增加。因此要让用户可以及时撤销操作，时刻知道现在发生了什么，而不是仅仅当发生后给出一个警告。常用于较重要或隐晦的手势，例如删除，一键清除，长按等等，二次确认操作就显得至关重要。&lt;/p&gt;
 
&lt;p&gt;OMG，不知不觉讲了这么多⊙﹏⊙b，以上只是手势交互的初探，对于这个应用领域，还有很多值得研究和探索的地方，欢迎大家一起来探讨和学习。&lt;/p&gt;
 
&lt;p&gt;最后，感谢&amp;ldquo;弹指之间&amp;rdquo;小组成员此次研究上的给力贡献！撒花~最后奉上之前在TED看到的由Jeff Han带来的一则关于手势交互的精彩演讲：&lt;a href=&quot;http://www.ted.com/talks/lang/eng/jeff_han_demos_his_breakthrough_touchscreen.html&quot; target=&quot;_blank&quot;&gt; http://www.ted.com/talks/lang/eng/jeff_han_demos_his_breakthrough_touchscreen.html&lt;/a&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/322&quot; target=&quot;_blank&quot;&gt;移动设备的交互和设计&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/369&quot; target=&quot;_blank&quot;&gt;移动设备的手机设计&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/376&quot; target=&quot;_blank&quot;&gt;移动设备的手势设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://cdc.tencent.com/?p=4226&quot; target=&quot;_blank&quot;&gt;http://cdc.tencent.com/?p=4226&lt;/a&gt;&lt;/p&gt;</description>
				<author>CDCer</author>
				<pubDate>2011-09-05 14:58:49</pubDate>
			</item></channel></rss>