Be For Web - 差异化 http://www.beforweb.com/taxonomy/term/87 en ⌈随笔⌋ 《流浪地球》的体验成功要素 http://www.beforweb.com/node/1021 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-s-ux-sketching-pencil-wireframe-prototype-user-experience-ll.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>本文不含剧透,非影评。</p> <p>今天看到《流浪地球》票房已超30亿。春节前有幸买到大年初一的票,观后的感慨与欣喜也确实是此刻疲惫一天窝在被子里敲字时难以言表的;当即在朋友圈有脑推荐,并在豆瓣打了五星。那些恶意一星都是什么鬼。</p> <p>在刚刚过去的周末完成了二刷。第二遍时对剧情已经了然于胸(原本读过原著,因此已不陌生,但影片相比小说确实有较大程度的放大与改编),加之之前在知乎读到一些细节/彩蛋解析,这次便将注意力更多放在了细节方面。出乎意料的是丝毫没有感到二刷可能会有的乏味,反而更加过瘾和透彻的感觉,甚至产生了三刷的念头,如果接下来仍有排片。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201902/vv1h5uqqppay4636!1200.jpeg" style="width: 600px; height: 333px;" /></p> <p class="figure-caption">图片来自网络</p> <p>即便如此,客观来看,作为一部电影,《流浪地球》仍有着比较显著的体验优劣点对比,且远非&ldquo;极致&rdquo;、&ldquo;完美&rdquo;一类,譬如:</p> <h3> 优</h3> <ul> <li> 以大刘原著作为背书的创造性设定。</li> <li> 够硬够中国情怀的编剧能力。</li> <li> 文化价值观正,尺度适宜,不盲目。</li> <li> 刷新认知的国内团队视效实力。</li> <li> 泪点虽有设计痕迹但依然动情。</li> <li> 等等等等。</li> </ul> <h3> 劣</h3> <ul> <li> 年轻演员表演力度的拿捏有待提升。</li> <li> 节奏控制不稳,或许和档期剪辑有关。</li> <li> 情节/视效的远近景衔接存在断档。</li> <li> 或大或小的逻辑缺陷容易导致出戏。</li> <li> 朵朵的广播。</li> <li> 等等等等。</li> </ul> <p>其实在观影过程中对上述若干缺点的感知还是蛮明显的;仿佛我们时常所说&ldquo;好的交互设计会令人顺滑无感地完成任务,一旦对工具本身产生感知,势必存在体验缺陷&rdquo;。然而客观存在的一系列缺点丝毫不会影响我对这部电影的喜爱,以及自发的推荐、好评、二刷、回顾原著等等,包括此时的随笔;对于精神体验过分挑剔的习惯在这里似乎也在软化与消失着。</p> <p><img alt="" src="/sites/default/files/images/201902/bc5c18a0069f401cb111d76408aebf7a.jpeg" style="width: 600px; height: 234px;" /></p> <p class="figure-caption">图片来自网络</p> <p>为什么会如此?我想试着通过体验设计思维模式来玩味。或无聊,或牵强,但我就是想琢磨那么一会儿。这就是这篇随笔的主题。</p> <h3> 综合体验致胜</h3> <p>电影情节的设计与呈现离不开理性与逻辑的驱动,而观影行为本身则并非完全理性的信息获取与解析过程 - 最终的综合体验决定着&ldquo;产品&rdquo;的成功与否。因而即便存在客观上、逻辑上、表现方式上的大大小小的不足,在一层层体验要素的共同作用下,最终的&ldquo;产品&rdquo;体验依然是出众且令人回味甚至是上瘾的。</p> <p>尝试解构&ldquo;综合体验&rdquo;的层次,或许有很多模型可以套用;我个人首先想到是《破茧成蝶》当中的一段话:</p> <blockquote><p>&ldquo;用户体验设计首先是要解决用户的某个实际问题,其次是让问题变得更容易解决,最后是给用户留下深刻的印象,让他在整个过程中产生美好的体验。&rdquo;</p> </blockquote> <p>尝试将上述三个层次与电影进行跨界类比:</p> <h4> 1.明确的核心价值</h4> <p>影片拥有足够硬核且创意十足的背景设定,世界观价值观明确。虽然原著无论在文学类型还是剧情风格上都属于小众群体的范畴,但经过恰当、适度、充满想象力的改编,原本独特的核心价值得以进一步符合市场环境与大众娱乐需求定位。</p> <p><img alt="" src="/sites/default/files/images/201902/d893a500a4f74dbdae215527d1afc4ba.jpeg" style="width: 600px; height: 234px;" /></p> <p class="figure-caption">图片来自网络</p> <h4> 2.表现层易于传达核心价值</h4> <p>情节框架的整体推进节奏,结合出人预料的成熟的科幻视效表现形式,可以有效地将受众带入到影片所要展示的世界设定当中。世界观价值观的呈现方式易于认知、理解、记忆、共鸣,宏观设定在市场上具有足够的差异性,微观细节的表现和打磨体现着诚意,使人沉浸于观影体验当中。</p> <p><img alt="" src="/sites/default/files/images/201902/f764d615ab924578b48375f8001c3ad4.jpeg" style="width: 600px; height: 233px;" /></p> <p class="figure-caption">图片来自网络</p> <h4> 3.触及情绪、情感、情怀</h4> <p>在情节上,提供了经过文学式设计的情感触发点,诱导受众被一系列真实、冷酷又寄托着人情希望的泪点击中。</p> <p>对于少数高级受众(科幻电影/书迷,原著及作者其他作品的读者),提供了一系列彩蛋式的细节表达,引发情感关联与共鸣。</p> <p>影片本身作为中国科幻电影高调起步/里程碑式的作品,展现了软硬实力,打开了新的市场与更多的可能性,激发了民族/国家层面的情怀寄托;包括&ldquo;流浪地球&rdquo;本身的概念也极具中国式的&ldquo;家庭情节&rdquo;。</p> <p><img alt="" src="/sites/default/files/images/201902/0071BBTwly1fzw3d76j9qj30u01601kx.jpg" style="width: 600px; height: 840px;" /></p> <p class="figure-caption">图片来自网络</p> <p>综合以上三个层面的体验要素,《流浪地球》是一部&ldquo;有的看&rdquo;、&ldquo;好看&rdquo;、&ldquo;印象美好而深刻&rdquo;的影片,即,是一部面向主流市场的综合体验上乘的优秀产品。</p> <h3> 结语</h3> <p>日间工作时间较长,如此一篇短短的随笔也消耗了三个夜间的睡前时光。下笔那天的消息是票房超30亿,而今天已达40亿。纵使电影艺术形式不可完全通过现实收入来衡量伟大程度,但作为一部面向主流市场,且无论题材、创意、风格、领域都没那么主流的硬核产品而言,《流浪地球》无疑是成功的;我仍愿通过本文来同时实现有脑推荐的目标。</p> <p>以上。</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 600px; height: 154px;border:none;" /></p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/87" typeof="skos:Concept" property="rdfs:label skos:prefLabel">差异化</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/116" typeof="skos:Concept" property="rdfs:label skos:prefLabel">情感化设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/253" typeof="skos:Concept" property="rdfs:label skos:prefLabel">随笔</a></li></ul> Wed, 20 Feb 2019 16:17:30 +0000 C7210 1021 at http://www.beforweb.com http://www.beforweb.com/node/1021#comments 移动应用的成功准则 - 从产品概念到市场推广 http://www.beforweb.com/node/129 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-app-store-iphone-ios-application-idea-design-development-marketing-success.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>几天的风风雨雨似乎在这个周日的上午逐渐褪去了,现在整个书房几乎要被阳光铺满了。如果阳光能发出声音,想必满屋子都会是轻盈精巧的小旋律了。</p> <p>又是一篇我自己非常受用的<a href="http://mobile.smashingmagazine.com/2012/11/07/succeed-with-your-app/">文章</a>,长是长了点,拿来把译文做掉,分享给大家。特别是后面关于市场推广的部分,我很喜欢;即使在环境如此恶劣的这片土地上,仍然希望至少能够通过自己的一点努力为大家的生存环境带来一丝正能量。进入正文叭。</p> <p>多数应用产品会走向失败。残酷的现实甚至让很多不抱希望的设计师和开发者们开始认为,只有运气足够好,才能在App Store当中获得成功。</p> <p>这种想法就像用来缓解失败痛苦的麻醉剂,其实蛮危险的。痛苦不是坏事,痛苦才有救,才能让人看到问题所在。如果我(英文原文作者)的应用失败了,我会首先在产品身上找原因,而不是毫无意义的埋怨那些我们控制能力以外的因素。大家所处的环境是相同的,为什么不想想看来自<a href="http://taptaptap.com/">tap tap tap</a>或<a href="http://tapbots.com/">Tapbots</a>的家伙们为什么就能一再获得成功呢?</p> <p>本文所归纳出的&quot;移动应用成功准则&quot;,内容涉及产品概念、设计、开发、市场推广这四个方面。必须承认,在现实当中,我们其实很难完美无暇的将这些准则落实到位,但有一点是肯定的:沿着正确的道路向正确的目标努力前行,你能获得成功的几率将增大很多;我们可以依靠的绝不只有运气。另外,虽然本文当中的相关内容及案例都是以iOS为例的,但其中的道理同样适用于其他平台。</p> <!--break--><h3> 产品概念</h3> <p>任何一款成功的应用都需要以坚实的产品概念作为基础,因为概念决定了产品最终所拥有的潜力。如果你在洗澡时突然冒出个什么想法,要记得抵抗住将它立刻落实成产品的冲动与诱惑&mdash;&mdash;首先做一点前期的研究工作叭,这能帮你在接下来的环节中省去不少麻烦。</p> <h4> 寻找空白点</h4> <p><img alt="01-vacuum-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/01-vacuum-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 500px; height: 432px;" /></p> <p>Phill Ryu(<a href="http://www.twitter.com/phillryu">@phillryu</a>)在一份记录中对App Store里的一些成功应用进行了持续的追踪,包括Clear、The Heist、Classics等等。他验证自己产品概念的方式很简单&mdash;&mdash;通过对这些流行应用的解读来寻找&ldquo;空白点&rdquo;。其实App Store里的应用在产品质量、用户体验、概念创新等方面有太多的空白点有待填补了,简单看几个例子:</p> <p><img alt="02-clear-tweetbot-itranslate-voice-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/02-clear-tweetbot-itranslate-voice-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 500px; height: 120px;" /></p> <ul> <li> <a href="https://itunes.apple.com/us/app/clear/id493136154?mt=8"><strong>Clear</strong></a>:Clear之所以能够在一坨一坨的待办事项应用当中脱颖而出,最重要的一个原因就是它填补了同类产品在交互方式及UI方面的空白点。在一个充满了竞争者的领域中构思新产品概念,这听上去似乎不是一种聪明的做法,但实际上,摊子越大,其中的空白和机遇就可能越多,关键看你能否敏锐的察觉到它们并提出新的解决方案。</li> <li> <a href="https://itunes.apple.com/us/app/tweetbot-for-twitter-iphone/id428851691?mt=8"><strong>Tweetbot</strong></a>:Twitter收购了Tweetie并实施免费政策来取悦大众;而Tweetbot则通过更加强大和高效的功能抓住了大批中高级用户。</li> <li> <a href="https://itunes.apple.com/us/app/itranslate-voice/id522626820?mt=8"><strong>iTranslate Voice</strong></a>:苹果推出了Siri,让整个世界着了迷,同时也在智能语音这个方向上开拓出了一片天空,给iTranslate Voice这样的操作方式类似Siri但功能有所区别的应用带来了不少机遇。每项新技术的诞生总会在一个或多个领域当中制造出有待填补的空白。</li> </ul> <p>随着应用产品数目的不断增加,想轻而易举的找到一个可以迅速切入并有所斩获的领域已经不大可能了,不过如果你足够用心,仍然可以找到不少空白点。试着挖掘一些你有兴趣有能力去填补的空白,做做看。</p> <div class="embed"><article id="node-286" class="node node-related-books" about="/node/286" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="放飞App:移动产品经理实战指南" src="http://beforweb.com/sites/default/files/images/products/31.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">放飞App:移动产品经理实战指南</a></h4> <p><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">本书讲述如何构建出能在Apple Store中引人注目的iPhone和iPad应用。从全局介绍这一构建过程中的每一步,包括预算成本、挑选开发人员并组织最佳团队、搭建工作流程、推销和改进自己的应用产品...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 考虑收入问题<span class="normalFont">(原标题&quot;Show Me the Money&quot;,星际诶)</span></h4> <p>多数应用是不赚钱的。如果产品收入对你来说确实非常重要,那么最好首先花些时间了解一下哪些类型的应用可以帮你赚钱,哪些不能。基于Marco Arment的&ldquo;<a href="http://www.marco.org/2009/10/09/the-two-app-stores">双App Store理论</a>&rdquo;,我将所有应用产品划分为4类,其中的3类可以带来收入。</p> <p><img alt="03-price-revenue-category-profit-per-user-downloads-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/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" style="width: 500px; height: 453px;" /></p> <h5> 大众产品</h5> <ul> <li> 高价值,低价格。</li> <li> 对多数人都具有吸引力,并特别瞄准于那些喜爱浏览排行榜而且会产生购买冲动的用户。</li> <li> 通过大规模的推广活动来带动产品发布。</li> <li> 经由庞大的下载量来提升整体收入。</li> </ul> <p>产品案例:Clear ($3)、iTranslate ($1)</p> <h5> 优质的小众产品</h5> <ul> <li> 低价值,高价格。</li> <li> 瞄准于小众缝隙市场。</li> <li> 目标用户群通常会通过详细周密的调研而最终锁定产品并付费购买。</li> <li> 具有非常高的单个用户利润。</li> </ul> <p>产品案例:OmniFocus ($10)、Proloquo2Go ($190)</p> <h5> 优质的大众产品</h5> <ul> <li> 高价值,较高的单个用户利润。</li> <li> 最适合于那些拥有资金并力图扩大收益的新创团队。</li> </ul> <p>产品案例:TomTom GPS ($50)、Pandora (每月的订阅费用$3.99)、那些需要在应用内购买附加装备或点数的免费应用。</p> <h5> 多数失败的产品</h5> <ul> <li> 低价值、较低的单个用户利润。</li> <li> 即使这类应用获得了一些人气,有限的吸引力和低廉的价格也阻碍着产品取得真正的成功。</li> </ul> <p>开发者们喜欢读一些移动应用百万富翁的励志故事,喜欢关注各种移动设备每天卖出多少多少台的报道,然后对他们极其小众的应用产品的前景做一番乐观的预估。他们认定,只要能够获得庞大市场当中一小部分用户的青睐,他们就能以0.99美金的价格将应用卖出去,并且为自己开创出一个崭新的未来。</p> <p>事情恐怕没这么简单。当他们发现应用上线第一天只有6次下载,而且都是来自家人和朋友,他们才会意识到现实的残酷。也许这款应用可以满足他们自己的需求,但过于小众化的产品确实难以取得真正的成功。</p> <p>想想看你的产品是否属于这一类型。这可不是个小问题。</p> <p>开发一款能够帮你赚钱的应用确实不是易事。正如David Barnard在<a href="http://appcubby.com/blog/the-sparrow-opportunity/">App Cubby的博客</a>中所提出的,也许免费增值模式才是可持续收益的解决之道,也就是以免费的方式尽可能多的吸引用户下载应用,然后通过一些有创造性的方式让那些希望获取更多使用价值的用户进行付费。这种模式在非游戏类的应用当中还没有得到过充分的验证,不过至少在业内引发了一些讨论。</p> <p>相关阅读:<a href="http://beforweb.com/node/42">2012年移动应用发展的五个趋势</a></p> <div class="embed"><article id="node-306" class="node node-related-books" about="/node/306" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/App创富传奇-史蒂文斯/dp/B00BWILBHU/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="App创富传奇" src="http://beforweb.com/sites/default/files/images/products/52.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/App创富传奇-史蒂文斯/dp/B00BWILBHU/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">App创富传奇</a></h4> <p><a href="http://www.amazon.cn/App创富传奇-史蒂文斯/dp/B00BWILBHU/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书以成功掘金的开发人员的经验为基础,展示了如何构建应用开发过程。书中引用了一些堪称经典的成功案例,带你畅游丰富多彩的应用开发世界。你将了解那些成功将梦想变成现实的应用开发人员背后的故事,获得他们成功的第一手资料,挖掘他们一夜暴富的秘密...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 作出价值声明</h4> <p>将产品概念当中最核心的内容写下来,用一句话定义你的应用及它的目标市场。例如:</p> <blockquote><p>Grades应用可以帮助大学生们了解自己下个学期需要修满多少学分。</p> </blockquote> <p>如果你不能通过一句话来清晰的描绘出产品的基础价值,那么它也许过于复杂了。移动应用应该在一个目标任务上做到极致,而不是面面俱到。</p> <p>当你可以准确的定义出产品核心价值的时候,检查一下其他方面的功能是否与之相悖,如果有的话,可以试着做做减法了。</p> <p>相关阅读:<a href="http://beforweb.com/node/105">初创型团队容易在用户体验方面犯的十个错误</a></p> <h3> 设计</h3> <p>设计是苹果文化当中极其关键的组成要素;它对于一款应用能否取得成功所起到的决定作用也是不言而喻的。</p> <h4> 别让我思考(Don&#39;t Make Me Think)</h4> <p>和网站服务相似,大部分移动应用对于用户来说都是随需随用的。用户总是缺乏耐心的,如果一款应用不能在加载之后立刻展示出自身的功能特色及使用方法,用户很有可能放弃使用。本小节的标题引用了Steve Krug的书名,这也正是我们想要表达的:别让用户思考;好的界面应该像门把手那样简单易懂。</p> <div class="embed"><article id="node-272" class="node node-related-books" about="/node/272" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/点石成金-访客至上的网页设计秘笈-Steve-Krug/dp/B0011BTJV8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="点石成金:访客至上的网页设计秘笈(原书第2版)" src="http://beforweb.com/sites/default/files/images/products/16.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/点石成金-访客至上的网页设计秘笈-Steve-Krug/dp/B0011BTJV8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">点石成金:访客至上的网页设计秘笈(原书第2版)</a></h4> <p><a href="http://www.amazon.cn/点石成金-访客至上的网页设计秘笈-Steve-Krug/dp/B0011BTJV8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">有些网站看起来很杂乱,有些网站能让你轻松地找到资料,有些网站让你犹如置身迷宫,为什么网站的可用性会有如此大的反差?用户在访问网站时有怎样的心理?遵循什么样的原则来设计网站才能吸引访客?这本全球Web设计人员的必读经典会给出答案...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h5> 返璞归真</h5> <p>每一个功能都会不可避免的增加应用的复杂度,哪怕这个功能再酷。试着剥除产品当中与核心价值无关的一切元素,让应用呈现出它最本质最精华的面貌。</p> <p>看看下面的截图,同样是待办事项类的应用,左侧的产品中充斥着各种所谓的很&ldquo;酷&rdquo;的功能,实际上已经影响了核心功能的体验;而大获成功的Clear则是如此的简洁直白,所见即是精华。</p> <p><img alt="04-simple-clear-essence-complexity-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/04-simple-clear-essence-complexity-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 500px; height: 375px;" /></p> <p>推荐阅读:<a href="http://beforweb.com/node/66">iOS用户体验解析</a></p> <h5> 考虑用户习惯及界面设计规范</h5> <p>用户会根据已有的使用经验对应用的各类界面元素建立起一套行为预期。记得学习不同平台的界面设计规范(<a href="http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html">iOS人机界面设计规范</a>、<a href="http://developer.android.com/guide/practices/ui_guidelines/index.html">Android用户界面设计规范</a>),在做出突破和创新之前首先了解一下最基本的交互和视觉设计规则。</p> <p>对比下图当中的两款同类产品(帮助学生查看学分),左侧的应用为了追求独特的交互与视觉风格,刻意忽略掉了最基本也是最符合用户习惯的导航及输入机制;右侧的应用(我的Grades)则基于iOS的标准方式进行了适度的定制化,即实现了独特的风格,同时也符合用户的使用习惯。</p> <p><img alt="05-grades-custom-ui-interaction-mode-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/05-grades-custom-ui-interaction-mode-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 500px; height: 375px;" /></p> <p>推荐阅读:<a href="http://beforweb.com/node/119">先了解规则,再寻求创新 - 关于iOS应用界面自定义</a></p> <h5> 像人类一样思考</h5> <p>作为正常的人类,用户会在头脑中对现实世界当中各种事物的运作规律进行建模。设计方案要符合人们对于现实世界的认知,而不是被各种编程技术或数据库解决方案所局限。</p> <p>以条码扫描应用RedLaser为例。在最初的版本中,用户在对准条码后必须点击拍摄按钮才能获取信息,这显然不符合真实的条码扫描器的工作方式。还好,他们后来意识到了这一点并做了改进。</p> <p><img alt="06-redlaser-scanner-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/06-redlaser-scanner-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 500px; height: 376px;" /></p> <h5> 少让用户做点事</h5> <p>用户都比较懒,他们不喜欢阅读使用说明,不喜欢打字,不喜欢翻来覆去的执行操作。好的产品应该将需要用户执行的操作量降低到最小程度。</p> <p><img alt="07-tripit-signin-account-tour-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/07-tripit-signin-account-tour-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 500px; height: 375px;" /></p> <p>Tripit其实是一款不错的应用,不过它在加载之后需要用户首先注册,而这个界面本身没有为用户提供太多的&ldquo;动力&rdquo;去做这件事。如果一个产品可以在不注册登录的情况下工作起来,那么可以试着先让用户玩玩看,到真正需要的环节再执行注册也不晚。另外,也可以像上图右侧的<a href="http://www.tunewiki.com/">TuneWiki</a>那样,首先让用户了解成为注册用户的各种好处,通过这种方式诱导用户自主产生注册的愿望。</p> <p>相关阅读:<a href="http://beforweb.com/node/27">具有引导性的移动应用界面设计模式</a></p> <h5> 进行可用性测试</h5> <p>不要被各种用研名词吓到,事情没那么复杂,尽量做你能做的叭。哪怕只是将交互稿或UI稿拿给潜在用户看一看,也能从中发现一些基本的可用性问题。问问对方对这款应用的理解,设定几个典型任务,让他们将自己的各种想法通过语言表述出来,观察他们对界面的反应。记得在设计流程当中尽量早尽量多的做些这样的测试,哪怕仅仅是非正式的,也会对产品的功能及用户体验设计起到重要的推动作用。</p> <p>相关阅读:<a href="http://beforweb.com/node/24">产品早期的原型设计与用户测试</a></p> <div class="embed"><article id="node-285" class="node node-related-books" about="/node/285" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动互联:用户体验设计指南" src="http://beforweb.com/sites/default/files/images/products/30.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动互联:用户体验设计指南</a></h4> <p><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书阐述如何设计出独一无二的移动体验,展示移动用户体验最重要的要素,介绍各种设计框架和实践。本书首先介绍移动用户体验的关键特点,接着介绍五种广泛使用的移动用户体验模式,然后介绍移动体验设计的设计实践、原型方法以及设计指南,最后讨论移动体验的前沿设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 将情感引入产品</h4> <p><a href="http://tapbots.com/software/weightbot/">Weightbox</a>中滑动面板的动画效果、<a href="http://everyday-app.com/">Everyday</a>里的幽默文案、在Clear里签掉一条事项之后那令人倍感满足排序效果...这些小细节本身并不具备任何实际的功能性,却可以在用户心中引发强大的情感共鸣。蕴藏这些细节的产品是具有&ldquo;人格&rdquo;的,你可以喜欢它,也可以讨厌它,但你多半会因为这些有意思的细节而记住它。</p> <p>如今,&ldquo;可用性&rdquo;已经不再是产品用户体验这个概念当中唯一的组成要素了。要使应用获得成功,你必须在&ldquo;愉悦性&rdquo;方面花更多的心思。</p> <h5> 视觉效果</h5> <p>看上去漂亮、用起来带感的应用通常会卖的更好,而且会让用户觉得物超所值。&ldquo;漂亮&rdquo;不只存在于丰富的渐变、纹理和阴影当中,简洁雅致、可读性强的界面布局同样可以给人带来美的享受。对于&ldquo;拟物化&rdquo;的视觉风格,尽量只在能够强化体验的地方使用,不要为了追求独特的视觉效果而使界面元素反而成为干扰因素。</p> <p><img alt="08-emotional-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/08-emotional-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 500px; height: 375px;" /></p> <h5> 音效</h5> <p>音效在用户界面的表现方式当中属于一种微妙而有力的、尚未被广泛使用的工具。不妨试着在一些交互环节当中将音效融入到动画过渡效果当中,给用户带来更饱满、更愉悦的体验。</p> <p><img alt="09-weightbot-sound-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/09-weightbot-sound-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" style="width: 250px; height: 375px;" /></p> <h5> 触控的魔力</h5> <p>苹果的设计师和工程师们会将产品打造的尽善尽美,所以我们能够在iOS当中感受到光滑的像黄油一样的弹跳滚动效果。如果界面当中的交互对象不能立刻对触摸操作进行响应,那么就算不上是真正意义上的直接操纵了。</p> <p><img alt="10-directly-manipulating-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/10-directly-manipulating-visual-paper-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <p>触控手势可以在用户与应用界面之间建立强有力的关联,不过一旦运用不当,譬如对于用户来说难以发现或掌握,那么手势也会造成非常差劲、甚至是令人沮丧的交互体验。你可以尽情尝试新的交互模式,但最终一定要确保每个操作、每个过渡效果和视觉隐喻都是易懂易用、符合直觉的。</p> <h5> 文案当中的人情味儿</h5> <p>用户不喜欢带有说教性质的使用说明、出错信息或系统提示。你完全可以尝试一些诙谐幽默甚至略显狡黠的文案风格,用户会喜欢这些意想不到的乐趣的。如果你做的足够有趣,人们甚至会在Twitter上谈论这些。</p> <p><img alt="11-copy-message-alert-error-words-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/11-copy-message-alert-error-words-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <h5> 出众的动画效果</h5> <p>无论是交互元素在界面当中移动,还是界面之间的切换过渡,动画效果都可以体现出产品的个性,让用户充分享受连贯平滑的交互体验。</p> <p><img alt="12-transition-animation-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/12-transition-animation-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <h5> 不要忽视图标</h5> <p>应用图标在很大程度上讲就是产品的门面,多数用户都是通过图标对你的应用产生的第一印象,而且在应用被安装到设备上之后,它就是应用的入口。优秀的图标通常是简单而令人印象深刻的,它们身上没有过分绚丽的雕琢,却能从容的脱颖而出。</p> <p><img alt="14-icon-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/14-icon-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <p>对比上图中的两个图标,左侧(Clear)的使用了明亮的配色、简单的形状搭配,而右侧的图标当中,无论配色还是形状都具有强烈的冲突感,整体缺乏吸引力,缩小之后更是难以辨识。</p> <p>推荐阅读:<a href="http://beforweb.com/node/103">为产品赋予人格 - 情感化设计的组成要素及实践案例</a></p> <div class="embed"><article id="node-303" class="node node-related-books" about="/node/303" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="怦然心动:情感化交互设计指南" src="http://beforweb.com/sites/default/files/images/products/49.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">怦然心动:情感化交互设计指南</a></h4> <p><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书精彩地阐述出了当人们访问网站,打开软件,购买实体产品和被某人吸引时的心理状态,并且非常深入地用心理学的方法解释了刺激和触发人类行为的因素。书中提供的众多方法,让我们可以创造出更加持久和深刻的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 开发</h3> <p>对技术方案的选择同样会影响着最终产品的体验,进而决定着应用能否取得成功。</p> <h4> 本地化开发</h4> <p>&ldquo;一次开发,多处部署&rdquo;的理念对于中小型应用来说未必适用,除了游戏。某种程度上讲,这种理念被太多人神话了,毕竟不同的系统平台有着不同的交互模式及UI规范。最终,&ldquo;跨平台&rdquo;的结果很可能就是在任何一个系统当中都无法让用户获得良好的体验。</p> <p><img alt="15-native-web-application-facebook-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/15-native-web-application-facebook-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <p>Facebook在过去的几年中尝试了基于HTML5的混合型应用。但自从最近改为iOS本地应用之后,性能表现提升了200%,产品所获得的用户评价也很快从2星升至4星。</p> <p>不过,采用混合型应用的技术方案也未必就意味着失败,<a href="http://www.zipcar.com/mobile/">Zipcar</a>就是一个不错的范例。要在这种方式中取得陈功,有几点问题必须要考虑:</p> <ul> <li> &ldquo;一次开发,多处部署&rdquo;的理念会对设计工作造成不小的局限。因为要照顾到所有目标平台,所以设计当中不能有任何针对某个特定系统的解决方案。</li> <li> 混合型应用或Web应用所基于的仍是Web前端开发技术,本质上仍存在着比较明显的性能问题。</li> <li> 混合型应用或Web应用缺乏本地化应用的灵活性与健壮型,通常情况下无法访问和利用硬件自身具备的各种自动化功能。</li> </ul> <p>关于移动化策略及技术方案对比等方面的话题,推荐各位继续深入阅读:</p> <ul> <li> <a href="http://beforweb.com/node/12">走出移动互联网的迷宫 - 网站移动化的方法策略</a></li> <li> <a href="http://beforweb.com/node/120">设计师应该了解的iOS应用开发基础知识</a></li> <li> <a href="http://beforweb.com/node/22">前端开发者的跨平台移动应用开发策略及工具</a></li> <li> <a href="http://beforweb.com/node/14">随&ldquo;机&rdquo;应变的用户体验设计</a></li> </ul> <h4> 代码质量的重要性</h4> <p>结构合理、规划清晰、扩展性强的代码不会直接作用在用户的感受当中,但是对产品的可持续发展却起着重要的基础性作用。</p> <p>反之,差劲的代码通常会直接影响产品的体验。用户不关心应用为什么会崩溃,不关心到底是什么原因导致输入内容的丢失,他们会把所有的问题都归结于你的产品和品牌的错误。</p> <p>在技术开发的人力资源方面,即使你刚刚起步,也不要觉得随便找个一般般的开发者并按小时计费是一种划算的方式。在同样的时间内,一名普通码农也许可以马马虎虎的写出一个功能模块,而一名优秀的程序员则可能产出三个更加健壮的模块。一旦你决定更换那个普通的程序员,那么继任者很有可能花很多时间了解之前的代码,甚至需要重新来过;而经验丰富的开发人员所写出的代码通常具有更高的可复用性。</p> <h3> 市场推广</h3> <p>如果你们的团队当中已经有市场部门了,那么不坏,不过草根设计师和开发者们同样可以发起相当有效的市场推广活动。相信我,当我刚刚起步的时候,没人知道我是谁,但现在,我的应用正在得到来自各方面的关注和推荐,包括苹果、Mashable、TechCrunch、The Huffington Post、Fox新闻等等。我没有在所谓的市场活动上花过一分钱,当然,不包括建设相关推广网站所需要的费用。</p> <h4> 尽早启动</h4> <p>多数开发者都认为市场活动应该在应用发布上线之后再开始进行。这种想法并不正确。</p> <p>一个策划周密、准备充分的发布活动是非常关键的,特别是对于那些定价比较低廉的应用来说。如果你的发布活动没能一鼓作气将产品推到排行榜的前列,它就很有可能在短时间内被淹没掉;不在榜里的应用对用户来说几乎是隐形的。</p> <p>应用上线之后,用户在App Store当中留下的评价固然会对产品的口碑起到正面或负面的影响作用,但这并不是决定排名的最主要因素。App Store的排名算法一直在发生着变化,不过总体上来说仍是以一段时间内的下载量作为最主要的参考因素。我们可以将这个&ldquo;一段时间&rdquo;理解为截至当天为止的4天内,所以之前3天的下载量对于排名的影响作用非常关键,而当天所作的推广活动只有在若干天之后才会收到成效。在这种情况下,零星的碎片化的推广并没有太大意义,最有效的还是能持续一段时间的火力全开的推广活动。</p> <p>正如App Savvy一书的作者Ken Yarmosh所指出,市场推广计划应该从产品初期就开始启动,并伴随着产品设计开发的历程而不断完善,直到发布上线时做出全力而完美的一击。</p> <h4> 交些朋友</h4> <p>人脉是不可忽视的因素。没有相关的人际关系,你所失去的也许正是在成百上千的竞争对手当中脱颖而出的重要机遇。</p> <p><img alt="16-twitter-connection-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/16-twitter-connection-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <p>我在Twitter里创建了一个列表,其中包括苹果的员工、媒体从业者和一些著名的iOS开发者。你也可以为自己建立一些这方面的人脉,包括科技博客作者、有影响力的设计师与开发者等,都是不错的关注对象。这些人大都很酷很好打交道,他们通常乐于和那些有好想法好产品的人进行交流。</p> <h5> 找到他们</h5> <ul> <li> Twitter是好去处,业界有影响力的人们基本都在推。(我们就微博叭;记得<a href="http://www.weibo.com/c7210/">找我来玩</a> - 译者C7210注)</li> <li> 在有影响力的博客中发表评论或通过邮件联系作者,进行交流。</li> <li> 面对面的沟通是最有力量的。去参加业内的一些大会,多认识些朋友。</li> </ul> <h5> 注意言行,不要成为垃圾广告发布者</h5> <p>有机会与这些人进行交流,不代表着他们一定会对你的应用保持长久的兴趣。要建立有意义的人脉关系,当你希望展示一些工作成果的时候,试着以一种征求意见建议的姿态来提出,而不要像做广告一样肆无忌惮。</p> <h5> 礼尚往来</h5> <p>在与这些人进行沟通交流的过程中,要想想他们有哪些需求,你能为他们提供怎样的帮助。也许你正好可以回答他们在Twitter里提出的问题,或是对他们在博客里表达的观点有所见解。&ldquo;有所回馈&rdquo;是很重要的,有意义的人脉关系正是通过有来有去的交流互动而建立起来的。</p> <h5> 自己动手</h5> <p>试着自己写写博客,分享一下你在制作应用的过程中都学到了哪些东西。人们喜欢读真实的东西,类似<a href="http://idevblogaday.com">iDevBlogADay</a>这样的网站也有可能将你的文章收录并推荐给大家。</p> <h4> 宣传机器</h4> <p>在应用发布上线之前的几周,就可以启动&ldquo;宣传机器&rdquo;了,核心目的在于创建第一批用户群,确保他们在应用上线当天立刻进行下载。</p> <p><img alt="17-s-hyper-machine-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.png" src="/sites/default/files/images/201211-2/17-s-hyper-machine-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.png" /></p> <p class="figure-caption">通过产品预告页面收集目标用户的邮箱,在应用上线时即刻进行通知</p> <ul> <li> <strong>为你的应用在Twitter和Facebook上创建帐号</strong>:这可以让潜在用户轻松的follow到产品的进展,同时能够在平台当中进行传播。你可以发布一些产品预览、进度日志等方面的内容,当然也可以直接用这个帐号follow那些有可能对你产品感兴趣的人,吸引关注。</li> <li> <strong>建立产品预告页面</strong>:打造一个足够吸引人的页面,对应用进行简要介绍,放置一个表单,让那些有兴趣的潜在用户留下邮箱。在应用发布上线的时候及时通知这些目标用户进行下载。</li> <li> <strong>创建演示视频</strong>:视频的宣传效应是最好的,<a href="http://www.realmacsoftware.com/clear/">Clear的产品视频</a>及其引发的讨论就是不错的案例。而且视频是短时间全方位演示产品特色的最佳手段,传播起来也很轻松快捷。</li> <li> <strong>内部测试</strong>:寻找一些目标用户,让他们成为产品的首批使用者。除了&ldquo;测试&rdquo;方面的目的之外,这种方式可以让他们感受到自己的重要性,从而有可能成为产品的第一批忠实用户及推广者。</li> </ul> <h4> 获得推荐</h4> <p>自从获得了苹果设计奖(Apple Design Award),我的应用就被各种科技媒体争相推荐,但所有这些加在一起的推动效果都不如App Store当中的推荐给力。</p> <p>问题是,怎样才能获得App Store的推荐?每周都有成千上万的应用冒出来,而其中只有几个产品能获此殊荣,登上App Store首页。</p> <p><img alt="18-app-store-features-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/18-app-store-features-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <p>首先,产品要有值得App Store推荐的点,它必须在某些方面引起苹果的兴趣。你的应用在界面设计上是否足够的漂亮雅致?是否能充分展示iOS平台的强大功能?与其他同类应用相比是否有差异化的亮点?这些都是决定你的应用能否获得推荐的重要因素。&ldquo;幸运&rdquo;的是,能真正把这些要点做到位的产品其实不算很多。</p> <p>第二,你要努力吸引到苹果的注意。通常,你需要在苹果采取行动之前通过自己的努力引发关注。苹果有专门的编辑团队,他们负责寻找那些值得推荐的应用,你必须让自己的产品出现在那些他们有可能关注的地方。根据我的个人经验,他们会特别留意那些正在爬榜的产品。另外,想想你自己通常会到哪些网站获取新应用的信息,那同样有可能是苹果的编辑们会保持关注的地方。</p> <h4> 媒体的力量</h4> <p>媒体报道不仅可以起到巨大的推广作用,而且能够帮助你有效的建立产品的可信度,并进一步吸引更多的潜在用户以及具有较高影响力的传播者。如果你有能力与媒体进行合作,那么一定要在产品发布上线的一到两周之前就开始行动,以确保相关报道可以在发布当天出现在读者和观众面前。</p> <p><img alt="19-press-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/19-press-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <p>还记得之前建立的人脉关系吗,这时你可以试着联系这些朋友了。给他们展示一些产品的预览,看看他们是否有兴趣了解更多。要让交流方式尽量平和自然,保持简短和个人化。</p> <h4> 建立用户群</h4> <p>有庞大用户群的产品是真正有力量的。之前与我们合作开发Languages应用的团队<a href="http://sonicomobile.com">Somico Mobile</a>,最近发布了iTranslate Voice。他们几乎几乎没有借助任何来自媒体或苹果官方的推荐助力,但新产品的战绩却相当不错。为什么?因为他家的iTranslate应用本身就拥有千万级别的用户基础,他们要做的只是向这些老用户们发一封新产品邮件。</p> <p><img alt="20-itranslate-voice-user-base-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" src="/sites/default/files/images/201211-2/20-itranslate-voice-user-base-success-mobile-application-ios-iphone-app-product-idea-design-development-marketing.jpg" /></p> <p>当然,用户基础的建立是需要时间的。尽可能将用户引导至产品的Facebook主页或Twitter当中,与他们保持互动,让他们保持关注。另外,也可以考虑发布一款面向大众的免费应用,吸引更多的注意力,然后通过应用内广告的方式将你的主打产品宣传出去。</p> <p>推荐阅读:<a href="http://beforweb.com/node/109">将产品在移动市场中推向成功的十点建议</a></p> <div class="embed"><article id="node-304" class="node node-related-books" about="/node/304" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/苹果应用开发与营销-Dave-Wooldridge-Michael-Schneider/dp/B00817EV5O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="苹果应用开发与营销(第2版)" src="http://beforweb.com/sites/default/files/images/products/50.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/苹果应用开发与营销-Dave-Wooldridge-Michael-Schneider/dp/B00817EV5O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">苹果应用开发与营销(第2版)</a></h4> <p><a href="http://www.amazon.cn/苹果应用开发与营销-Dave-Wooldridge-Michael-Schneider/dp/B00817EV5O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了从应用开发到应用上市销售等各个阶段需要进行的各种工作,包括分析应用创意和竞争力、确定目标受众、评估销售潜力;保护业务和知识产权、避免潜在的法律纠纷;将iOS应用转化为有力的营销工具...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 总结</h3> <p>度量&ldquo;成功&rdquo;的标准有很多。我的Grades应用在第一版的时候大约只产生了不到10000美金的收入,但那是它通往苹果设计奖的第一步,同时也帮助我在业内建立了非常有价值的人脉关系。现在,我们已经将公司定位在了Languages这样的顶级产品上,而我们的目标同样不仅在于它产生的收入能比Grades高出多少。</p> <p>在财富方面获取成功是很困难的,但只要你在努力,它就会变得越来越容易。随着你持续打造着优质的产品,你的品牌终将被各种媒体或苹果官方所留意到,同时你的团队也将获得宝贵的经验,并逐步建立起坚实的用户基础。这确实是一个长期的任务,但回报也是可观的,特别是当你想到自己的产品能够改变成千上万人的生活的时候,那种感觉太妙了。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/37" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性测试</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/116" typeof="skos:Concept" property="rdfs:label skos:prefLabel">情感化设计</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/87" typeof="skos:Concept" property="rdfs:label skos:prefLabel">差异化</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/125" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计规范</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/126" typeof="skos:Concept" property="rdfs:label skos:prefLabel">市场推广</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/76" typeof="skos:Concept" property="rdfs:label skos:prefLabel">App Store</a></li></ul> Sun, 11 Nov 2012 03:18:21 +0000 C7210 129 at http://www.beforweb.com http://www.beforweb.com/node/129#comments 为产品赋予人格 - 情感化设计的组成要素及实践案例 http://www.beforweb.com/node/103 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-smile-face-emotional-deisgn-personality-user-experience.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>又一个宁静的周日。周末的娱乐活动无非就是这些,做做博客,看看书,捣鼓点儿小代码,玩玩琴。最近在准备一些软硬件设备(见<a href="http://www.weibo.com/1833937113/ywENVsMQY">我的微博</a>)以及素材段子,接下来也许会出些demo;蛮久没像样的折腾这些了。</p> <p>说正经的,眼下这篇文章是最近为数不多的让我感到多次触动的东西。之前在微博上说了,&ldquo;全文读下来我有种&hellip;五体投地的感觉。如此用心打造的产品怎会不成功?一个个在情感化设计方面具有代表性的产品罗列在一起,看着这些又开始有那种感动的感觉&rdquo;。我并非希望借助这样的阅读资料让自己立刻掌握相关的技能,其实更重要的是这些东西在头脑中留下的那些印象,那些条件反射般的&ldquo;感觉&rdquo;。不多说了,进入正文。</p> <p>Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀念它们<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p><img alt="personality-layer-user-experience-flickr-detail" src="/sites/default/files/images/201208/personality-layer-user-experience-flickr-detail.jpg" style="width: 500px; height: 207px; " /></p> <p>我(英文原文作者)会特别在意这些细节,因为它们可以触发用户的情感响应。如果运用方式得当,这些细节当中的小魔鬼可以帮助我们打造出更具人格的产品,并使用户在与之进行互动的过程中产生积极的情感响应;而这种积极的态度会有效的促使用户主动传播和拥护你的产品。这种在人格层面与用户建立关联的设计思路也被称作&ldquo;情感化设计&rdquo;。</p> <h3> 一点小理论</h3> <p>&ldquo;情感化设计(Emotional Design)&rdquo;一词由Donald Norman在其<a href="http://book.douban.com/subject/1314262/">同名著作</a>当中提出。而在<a href="http://book.douban.com/subject/6892312/">Designing for Emotion</a>一书中,作者Aarron Walter将情感化设计与马斯洛的人类需求层次理论联系了起来。正如人类的生理、安全、爱与归属、自尊和自我实现这五个层次的需求,产品特质也可以被划分为功能性、可依赖性、可用性和愉悦性这四个从低到高的层面,而情感化设计则处于其中最上层的&ldquo;愉悦性&rdquo;层面当中。</p> <p><img alt="personality-layer-user-experience-maslow-model" src="/sites/default/files/images/201208/personality-layer-user-experience-maslow-model.jpg" style="width: 500px; height: 300px; " /></p> <p>一个有效的情感化设计策略通常包括两个方面:</p> <ol> <li> 你创造出了独特并且优秀的风格理念,令用户产生了积极响应。</li> <li> 你持续的使用该理念打造出一整套具有人格层面的设计方案。</li> </ol> <div class="embed"><article id="node-300" class="node node-related-books" about="/node/300" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/设计心理学3-情感设计-唐纳德•A•诺曼/dp/B007OPIUAQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="设计心理学3:情感设计" src="http://beforweb.com/sites/default/files/images/products/46.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/设计心理学3-情感设计-唐纳德•A•诺曼/dp/B007OPIUAQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">设计心理学3:情感设计</a></h4> <p><a href="http://www.amazon.cn/设计心理学3-情感设计-唐纳德•A•诺曼/dp/B007OPIUAQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书有别于传统设计书籍的内容,以大量的生物学、神经科学与心理学为基础,讨论情绪系统如何改变认知系统的运作,并以此勾勒出反应情感的美学商品在设计中所扮演的角色。深入探讨人类三种处理问题的层次:本能、行为和反思出发...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <p>接下来,我们将一起了解一下情感化设计的组成要素及相关策略,看一看有哪些产品在这些方面做的比较有代表性;另外,我们还会通过几个案例分析来感受一下从整体角度持续使用情感化设计理念所带给产品的&ldquo;人格魅力&rdquo;。</p> <h3> 情感化设计的组成要素</h3> <p>情感化设计的目标是在人格层面与用户建立关联,使用户在与产品互动的过程中产生积极正面的情绪。这种情绪会逐步使用户产生愉悦的记忆,从而更加乐于使用你的产品。另外,在正面情绪的作用下,用户会处于相对愉悦与放松的状态,这使得他们对于使用过程中遇到的小困难与细节问题的容忍能力也变得更强。</p> <p>情感化设计大致由以下这些关键性的要素所组成,我们可以从这些关键点出发,在产品中融入更多的正面情感元素。诚然,用户最终会产生的反应还将取决于他们各自的生活背景、知识技能等方面的因素,但是我们所抽象出的这些组成要素是具有普遍适用性的。</p> <ul> <li> 积极性</li> <li> 惊喜:提供一些用户想不到的东西。</li> <li> 独特性:与其他的同类产品形成差异化。(相关阅读:<a href="http://beforweb.com/node/71">iOS Wow体验 - 用户体验的差异化策略</a>)</li> <li> 注意力:提供鼓励、引导与帮助。</li> <li> 吸引力:在某些方面有吸引力的人总是受欢迎的,产品也一样。</li> <li> 建立预期:向用户透露一些接下来将要发生的事情。</li> <li> 专享:向某个群体的用户提供一些额外的东西。</li> <li> 响应性:对用户的行为进行积极的响应。</li> </ul> <p>下面,我们来看一看这些要素是怎样被细化并运用到实际产品当中的。</p> <h3> 情感化设计的产品实例</h3> <p>在接下来的这些实例当中,我们可以了解到情感化设计的组成要素是怎样以不同的表现形式被运用到互联网产品当中的。要记得,这些实例当中的设计方式未必适合于你的产品所需要的人格气质,你可以把这些当作参考,并结合实际情况思考更加适用的情感化设计方案。</p> <h4> 模仿人类的情绪</h4> <h5> 微笑</h5> <p>彼此欣赏的人会下意识的模仿对方的行为。当你看到自己喜欢的人正在微笑时,你多半也会如此。我们可以将这一点运用在设计当中。图片会在一定程度上左右人的情绪思维,尤其是以人物或事件为主题的图片。我们来看一张同时包含这两方面主题的产品介绍图片:</p> <p><img alt="personality-layer-user-experience-highrise-landing-smile" src="/sites/default/files/images/201208/personality-layer-user-experience-highrise-landing-smile.jpg" style="width: 500px; height: 328px; " /></p> <p>通过这张图片,<a href="http://highrisehq.com/">Highrise</a>向我们展示了一个快乐的人,还有他使用该公司产品的故事。来自实际客户的微笑以及赞许之辞,这是非常正面的、非常容易促使潜在用户认同并期望获取其产品的宣传形式。</p> <h5> 平凡的幸福</h5> <p><a href="http://www.threadless.com/">Threadless</a>的购物车在没有商品放入时会呈现出忧伤的表情,反之则会表现的非常开心。这样的小细节会让你觉得平凡而有趣,甚至会不由自主的笑起来。即使用户最终没有产生购物行为,他们也会记住这个可爱的购物车。</p> <p><img alt="personality-layer-user-experience-threadless-cart" src="/sites/default/files/images/201208/personality-layer-user-experience-threadless-cart.jpg" style="width: 500px; height: 371px; " /></p> <h4> 留住用户</h4> <h5> 福利</h5> <p>曾经有段时间,如果你试着在<a href="http://www.audible.com">Audible</a>取消订阅,并告诉他们你的设备无法享受他们的服务,Audible就会送你一张100美金的Amazon代金券,希望你可以购买到合适的阅读设备并继续使用他家的服务。即使用户最后仍选择取消订阅,他们也会牢牢的记住Audible的诚意。</p> <h5> 音乐</h5> <p><a href="http://www.etsy.com/">Etsy</a>会在用户退订之后播放Paul Young的&quot;Every Time You Go Away&quot;。这种方式无法让用户留下来,但可以给他们留下深刻的印象。当用户再一次在Etsy平台上浏览商品时,多半会想起这个有意思的小环节,或许他们无论在哪里听到这首歌的时候还会想到Etsy呢。</p> <p><img alt="personality-layer-user-experience-unsubscribe-song" src="/sites/default/files/images/201208/personality-layer-user-experience-unsubscribe-song.jpg" style="width: 500px; height: 432px; " /></p> <h5> 锋利的幽默</h5> <p>这方面最经典的案例莫过于Groupon的著名段子,&quot;惩罚Derrick&quot;。虽然这个过场发生在用户确认退订之后,但它通过真实的人物以及锋利而又自嘲的幽默,切实拉近了用户与网站之间的距离。在这个多多少少会使退订用户产生内疚的段子之后,Groupon还会再怂恿用户重新进行订阅。虽然你清楚的知道这是他们玩的小伎俩,但在如此具有代入感的段子面前,多数用户会觉得非常有趣,正面情绪和状态完全被调动起来。</p> <p><img alt="personality-layer-user-experience-groupon-retain" src="/sites/default/files/images/201208/personality-layer-user-experience-groupon-retain.jpg" style="width: 500px; height: 357px; " /></p> <h4> 文案</h4> <p>文案是最容易展现产品个性的途径。无论你希望自己的品牌变的更加好玩、严肃、滑稽或是时髦,文案都可以有效的帮助你向目标迈进。</p> <h5> 恭维</h5> <p>在&quot;Everyday&quot;应用当中,如果你还没有向媒体库中添加照片,那么系统就会非常友好的提示你去给自己&ldquo;漂亮的脸蛋&rdquo;拍些照片放到库中&mdash;&mdash;简单的词汇定义了提示信息甚至是产品的基调,换句话说,就是个性。</p> <p><img alt="personality-layer-user-experience-iphone-application-everyday-copy" src="/sites/default/files/images/201208/personality-layer-user-experience-iphone-application-everyday-copy.jpg" style="width: 500px; height: 482px; " /></p> <h5> 对比</h5> <p><a href="http://skitch.com/">Skitch</a>的隐私提示很简短,但其中运用到了两个方面的对比,一是文案当中模拟警告音效的&quot;Pssst!&quot;,另外还有代表警示的字色。这两者的组合使得提示信息无论在语气还是视觉效果上都与页面当中的其他内容形成了鲜明的对比,在情绪上引起了用户的注意,有效的传达了信息内容。</p> <p><img alt="personality-layer-user-experience-skitch-privacy-warning" src="/sites/default/files/images/201208/personality-layer-user-experience-skitch-privacy-warning.jpg" style="width: 500px; height: 299px; " /></p> <p>类似的,在Cupid中,当用户输入自己所处的地理位置时,系统会很积极的做出回应,一声&quot;Ahh&quot;就表达出了&ldquo;好的!&rdquo;或是&ldquo;我们了解了,欢迎你的到来!&rdquo;这些方面的意味。不要放过这种在细节当中进行&ldquo;真实化&rdquo;交流的机会。</p> <p><img alt="personality-layer-user-experience-ok-cupid-copy" src="/sites/default/files/images/201208/personality-layer-user-experience-ok-cupid-copy.jpg" style="width: 500px; height: 254px; " /></p> <h5> 注释和说明</h5> <p><a href="http://hunch.com/">Hunch</a>注册页面当中的文案与我们通常能够见到的那种有所不同,他们会在输入邮件的文本框旁边告诉你&ldquo;垃圾邮件是魔鬼,我们可不干这事&rdquo;,还会在选择邮件订阅的地方提示你&ldquo;这会是值得一读的邮件,而且来的不会太频繁&rdquo;。在这些很普通的地方稍稍花些心思,制造一些细微的差异化,这会增强产品的代入感,使用户的注意力更集中,跟随设计的指引完成操作目标。</p> <p><img alt="personality-layer-user-experience-hunch-register" src="/sites/default/files/images/201208/personality-layer-user-experience-hunch-register.jpg" style="width: 500px; height: 503px; " /></p> <p>Milk家的细节处理方式会让用户更加乐于订阅他们的新闻邮件。他们的做法与Hunch类似,都是在文案中明确的告诉用户新闻邮件的重要性,而且不会很频繁。</p> <p><img alt="personality-layer-user-experience-milk" src="/sites/default/files/images/201208/personality-layer-user-experience-milk.jpg" style="width: 500px; height: 405px; " /></p> <p>下面的范例来自我的一个个人项目,用户需要邀请码才可以试用这个产品。在提交申请的地方,我使用&ldquo;我要获取邀请!&rdquo;来代替传统的&ldquo;提交&rdquo;作为按钮当中的文案,希望这可以调动起用户的情绪,并使他们感受到一种更加真实、更加有针对性的互动。另外我也起草了一份简单的说明文案,让用户放心,我们绝不会发送垃圾邮件。</p> <p><img alt="personality-layer-user-experience-invite-submit" src="/sites/default/files/images/201208/personality-layer-user-experience-invite-submit.png" style="width: 500px; height: 284px; " /></p> <h4> 出错页面</h4> <p>没有什么比服务无法使用更能让用户觉得烦恼和沮丧的了,尤其当他们特别需要使用你的产品来完成重要事项的时候。如果这种情况因为某些客观因素而难以彻底避免,那么情感化设计至少能够在一定程度上缓解用户的负面情绪。</p> <h5> 有趣的文案提示</h5> <p>用户在Flickr进行系统维护或升级期间会看到&quot;Flickr正在做按摩&quot;的提示,如果有兴趣的话还可以到他们的官方博客或是微博当中查看当前的具体状况。这样的文案比起简单粗暴的出错提示来说更能让用户接受。</p> <p><img alt="personality-layer-user-experience-flickr-downtime." src="/sites/default/files/images/201208/personality-layer-user-experience-flickr-downtime.jpg" style="width: 500px; height: 368px; " /></p> <h5> 说声抱歉并提供有诚意的处理方式</h5> <p>同样来自于Flickr的案例。当系统发生了一些更加严重的问题时,他们会告诉用户:&ldquo;额,我们的管道堵塞了!&rdquo;,然后使用非常口语化的文案表示了歉意。除此之外,他们还为用户设置了一个小任务,也就是将当前页面打印出来,为两个圆环填色,然后拍下来,等到站点恢复正常后传到Flickr上;Flickr团队会挑选出优胜者,向他们赠送一年的高级帐号。</p> <p><img alt="personality-layer-user-experience-flickr-tubes-free-pro-account" src="/sites/default/files/images/201208/personality-layer-user-experience-flickr-tubes-free-pro-account.jpg" style="width: 500px; height: 495px; " /></p> <h5> 很抱歉,不过...</h5> <p>生活中还有其他一些重要的事情要做。之前Tumblr挂掉的时候,他们告诉用户,问题正在紧急处理当中,我们很抱歉;同时还提醒用户,当前还有另外一些更严重的问题(2011年日本9级地震),也许我们可以在这期间一同做点什么。</p> <p><img alt="personality-layer-user-experience-tumblr" src="/sites/default/files/images/201208/personality-layer-user-experience-tumblr.jpg" style="width: 500px; height: 409px; " /></p> <h4> 其他烦恼</h4> <p>漫长的页面加载时间也是十分恼人的,但在某些情况下,页面或其中的某些功能确实需要相对较长的时间来加载。当你的网站或应用正忙着传送和收集数据以备呈现的时候,不妨在界面上放置些临时性的小提示来吸引用户的注意力,减弱他们对响应时间的感知。</p> <p><img alt="personality-layer-user-experience-waiting-tips" src="/sites/default/files/images/201208/personality-layer-user-experience-waiting-tips.jpg" style="width: 500px; height: 325px; " /></p> <p>验证工具Captcha在如今被很多网站所使用,但这不意味着用户真的喜欢这东西,很多时候Captcha确实会令人感到烦恼和挫败。我们暂时无法改变这个工具本身的工作机制,但至少可以像Stack Overflow那样通过一幅有趣的图片搭配说明文案,向用户解释为什么要使用这个烦人的工具,籍此获得用户的理解,减少负面情绪的产生。</p> <p><img alt="personality-layer-user-experience-stack-overflow-captcha" src="/sites/default/files/images/201208/personality-layer-user-experience-stack-overflow-captcha.jpg" style="width: 500px; height: 329px; " /></p> <h4> 智能化</h4> <p>对用户进行智能化的响应式输出,这也是情感化设计策略之一。我喜欢在自己还没有输入个人详细信息之前就能得到系统提供的智能化个性化的服务。</p> <p><a href="http://thermo.me/">Thermo</a>应用的着陆页可以判断用户所处的地理位置,并在左侧以高度拟真的视觉表现形式来告诉用户当地的气温情况。</p> <p><img alt="personality-layer-user-experience-personalization-response." src="/sites/default/files/images/201208/personality-layer-user-experience-personalization-response.jpg" style="width: 500px; height: 342px; " /></p> <p>而37signals则通过左上角的当日问候语来简单而有效的拉近了网站与用户之间的情感距离。</p> <p><img alt="37-signals-personality-layer-user-experience" src="/sites/default/files/images/201208/37-signals-personality-layer-user-experience.jpg" style="width: 500px; height: 308px; " /></p> <h4> Email的设计</h4> <p>邮件是非常有用的工具,但在多数时候,用户会把这些邮件当作干扰,他们希望能够只接收到那些最有价值的产品信息。其实,可以被订阅的对象不仅限于产品信息,我们可以通过其他方面的内容来增强用户对于邮件快报的好感度。</p> <h5> 讲故事</h5> <p>Zaarly在他们的邮件快报中讲了一些具有神秘色彩的小故事,这种方式提升了邮件的吸引力,使用户不由自主的对其中的内容以及这个网站提供服务产生好奇,而不是一味的排斥。</p> <p><img alt="newsletter-personality-layer-user-experience" src="/sites/default/files/images/201208/newsletter-personality-layer-user-experience.jpg" style="width: 500px; height: 647px; " /></p> <h5> 个性化内容</h5> <p>Quora会在邮件当中向用户推荐他可能感兴趣的内容。如果你的网站或应用有足够的数据来支持这样的个性化服务,那么就考虑一下吧。</p> <p><img alt="quora-email-personality-layer-user-experience" src="/sites/default/files/images/201208/quora-email-personality-layer-user-experience.jpg" style="width: 500px; height: 606px; " /></p> <h5> 惊喜</h5> <p>提醒类的邮件通常没有什么花头,只是起到告知的作用。如果能像CD Baby那样在其中添加一些特别的东西,用户的兴致就有可能被带动起来。这封邮件被发送出去之后,&ldquo;CD Baby私人喷气机&rdquo;在Google当中产生了超过2万条记录。</p> <p><img alt="cd-baby-personality-layer-user-experience" src="/sites/default/files/images/201208/cd-baby-personality-layer-user-experience.jpg" style="width: 500px; height: 536px; " /></p> <h4> 故事情节</h4> <p>故事情节可以有效的吸引人们的注意力。有些产品在讲故事方面做的非常引人入胜,<a href="http://benthebodyguard.com/index.php">Ben the Bodyguard</a>就是其中一个不错的范例。这是一款用来保护手机当中隐私数据的iPhone应用,整个产品概念都是围绕着一位名叫Ben的法国私家保镖角色来设计的。其minisite通过非常精彩的交互方式让用户跟随这名私家保镖穿行在街道上,随着故事情节的发展来了解这款应用的特色,让你不由自主的沉浸在其中。</p> <p><img alt="ben-the-bodyguard-story-personality-layer-user-experience" src="/sites/default/files/images/201208/ben-the-bodyguard-story-personality-layer-user-experience.jpg" style="width: 500px; height: 377px; " /></p> <p>而在实际的iPhone环境当中,这款应用也仍然保持着一种故事角色的姿态,它会模仿法式英语的口语习惯与用户进行交流。</p> <p><img alt="ben-the-bodyguard-alert-story-personality-layer-user-experience" src="/sites/default/files/images/201208/ben-the-bodyguard-alert-story-personality-layer-user-experience.jpg" style="width: 500px; height: 480px; " /></p> <h4> 彩蛋</h4> <p>彩蛋通常会令人开心。即使是整体气质相对严肃的Google也会时不时的在产品中加上那么一两个有意思的彩蛋,例如著名的Let it snow下雪效果。</p> <p><img alt="google-let-it-snow-personality-layer-user-experience" src="/sites/default/files/images/201208/google-let-it-snow-personality-layer-user-experience.jpg" style="width: 500px; height: 269px; " /></p> <p>彩蛋通常与产品服务没有直接的关联,它的主要目的就是让用户觉得惊喜和快乐,激发他们积极的情绪状态,而处于这种状态的用户是非常乐于将他们的发现分享给其他人的。</p> <h4> 吉祥物</h4> <p><a href="http://mailchimp.com">MailChimp</a>在情感化设计方面的一个特色之处就是他家的吉祥物,猩猩Freddie。这家伙会在你的个人资料页打开之后为你欢呼,而且每次刷新页面之后都会冒出一些随机的笑话或链接。</p> <p><img alt="mailchimp-personality-layer-user-experience" src="/sites/default/files/images/201208/mailchimp-personality-layer-user-experience.jpg" style="width: 500px; height: 233px; " /></p> <p>不过这种情感化的表现方式也有失败的前例。还记得Microsoft Office里那位每当你要做些什么的时候都会跳出来的曲别针君吗?与之相比,Freddie不会干扰你与服务之间的交互流程。</p> <h4> 登录页面</h4> <p>是的,登录页面同样可以被设计的很有趣。仍以MailChimp为例,每逢一些特定的日子,他家的登录页面会发生相应的变化。<a href="http://www.flickr.com/photos/freddievonchimp/sets/72157623138750445/with/4541691544/">这个Flickr相片集</a>专门收录了MailChimp的各种特殊登录页。真心赞。</p> <p><img alt="mailchimp-login-personality-layer-user-experience" src="/sites/default/files/images/201208/mailchimp-login-personality-layer-user-experience.jpg" style="width: 500px; height: 319px; " /></p> <p>在很多时候你未必需要做的如此特别。以<a href="http://getpocket.com">Pocket</a>为例,他们的登录页面具有很强的&ldquo;欢迎&rdquo;色彩,一幅巨大的背景图片烘托出了该应用的使用场景,让用户觉得身临其境,在情绪上产生共鸣。</p> <p><img alt="pocket-personality-layer-user-experience" src="/sites/default/files/images/201208/pocket-personality-layer-user-experience.jpg" style="width: 500px; height: 512px; " /></p> <h4> 细节当中的吸引力</h4> <p>对界面元素细节的雕琢可以体现出你对产品的信念以及对用户的尊重。来看看Quip的动态loading图标。</p> <p><img alt="quip-loading-icon-personality-layer-user-experience" src="/sites/default/files/images/201208/quip-loading-icon-personality-layer-user-experience.gif" style="width: 500px; height: 300px; " /></p> <p>这张图片当中的动画效果是循环的,但在实际站点中,它只会在加载数据的那段时间当中出现。为了看这个动画效果,我甚至会反复加载页面。这样的图标也会让用户在等待加载的时间段里将注意力集中在很酷的动画效果上,使他们对于加载时间的感知有所减弱。当然,对于这类能够吸引注意力的元素,如果运用不当,也会造成负面影响,干扰用户的正常阅读与使用流程。</p> <p>Dropbox刚刚起步的时候曾经在Digg中发布了一段demo视频,并宣称自己的产品是&ldquo;来自麻省理工学院的Google Drive杀手&rdquo;。虽然口气很大,但他们在视频中精心打造了各种有意思的细节,牢牢的抓住了观众的视线与情绪,例如在演示上传文件的功能时使用了名为&ldquo;Keira Knightley有够热辣!!&rdquo;的图片。</p> <p><img alt="dropbox-personality-layer-user-experience" src="/sites/default/files/images/201208/dropbox-personality-layer-user-experience.jpg" style="width: 500px; height: 300px; " /></p> <div class="embed"><article id="node-303" class="node node-related-books" about="/node/303" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="怦然心动:情感化交互设计指南" src="http://beforweb.com/sites/default/files/images/products/49.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">怦然心动:情感化交互设计指南</a></h4> <p><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书精彩地阐述出了当人们访问网站,打开软件,购买实体产品和被某人吸引时的心理状态,并且非常深入地用心理学的方法解释了刺激和触发人类行为的因素。书中提供的众多方法,让我们可以创造出更加持久和深刻的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 情感化设计的综合案例</h3> <p>到目前为止,我们已经了解了一些情感化设计要素在不同产品当中的各种具有代表性的表现形式。下面我们来看三个更具综合性的产品案例。</p> <h4> 案例一:Gidsy</h4> <p>在<a href="http://gidsy.com/">Gidsy</a>中,用户可以自发的组织探索观光、购物、讨论会一类的本地化活动。鉴于这个产品的性质,设计师自然要考虑怎样使网站具有更广泛的吸引力。</p> <p>在配色方面,Gidsy的页面以蓝色与白色为主,这样的组合使网站整体风格清晰简洁,让人容易接受并产生信任。所以说Facebook、Twitter、Linkedin以及其他众多站点都会使用类似的配色方案并不是巧合。</p> <p>Gidsy的产品人格是由一系列复古风格的图片、从容自然的文案以及惊喜等方面的情感化设计元素所构成的。</p> <p><strong>感觉的传达</strong>:Gidsy里到处都是复古风格的图片,他们通过反复使用同种风格视觉元素的方式来着重强调产品的人格气质。</p> <p><img alt="gidsy-vintage-personality-layer-user-experience" src="/sites/default/files/images/201208/gidsy-vintage-personality-layer-user-experience.jpg" style="width: 500px; height: 317px; " /></p> <p><strong>惊喜</strong>:浏览到页脚,你会发现鼓励你免费创建活动的图标与文案,当鼠标悬停在图标上的时候,一道绚丽的彩虹会突然冒出来,它的动画效果所指向的正是引导用户这个操作的按钮。</p> <p><img alt="gidsy-rainbow-personality-layer-user-experience" src="/sites/default/files/images/201208/gidsy-rainbow-personality-layer-user-experience.jpg" style="width: 500px; height: 438px; " /></p> <p><strong>文案</strong>:网站当中随处可见简短而幽默的文案,譬如&ldquo;你好啊靓人!&rdquo;、&ldquo;嘭!你的照片被删除了&rdquo;等等。</p> <p><img alt="gidsy-choose-avatar-personality-layer-user-experience" src="/sites/default/files/images/201208/gidsy-choose-avatar-personality-layer-user-experience.jpg" style="width: 500px; height: 423px; " /></p> <p><img alt="gidsy-delete-image-personality-layer-user-experience" src="/sites/default/files/images/201208/gidsy-delete-image-personality-layer-user-experience.jpg" style="width: 500px; height: 469px; " /></p> <p>这些细节有效的为产品塑造了友好的人格气质。另外值得一提的是,Gidsy同样在其使用手册当中运用了情感化的设计方式。住所周知,类似说明文档和用户手册这样的东西通常是单调乏味的,但Gidsy的方式改变了人们的看法。</p> <p><img alt="gidsy-handbook-personality-layer-user-experience" src="/sites/default/files/images/201208/gidsy-handbook-personality-layer-user-experience.jpg" style="width: 500px; height: 478px; " /></p> <p>最后来看看Gidsy的新闻邮件,这封邮件恰巧在这个时候出现在我的邮箱当中。</p> <p><img alt="gidsy-email-launch-personality-layer-user-experience" src="/sites/default/files/images/201208/gidsy-email-launch-personality-layer-user-experience.jpg" style="width: 500px; height: 365px; " /></p> <p>同样是一幅与其站点风格相一致的复古照片。另外,注意到他们用来发送邮件的邮箱名称没?与常见的做法不同,Gidsy在这里使用了&quot;please-reply&quot;,以此向用户表达自己乐于倾听意见的姿态。</p> <h4> 案例2:Automattic</h4> <p><a href="http://automattic.com/">Automattic</a>(产品包括WordPress等)将幽默感融入到了一个缺乏幽默感的领域&mdash;&mdash;代码编写,并尽其最大可能去秉承Matt Mullenweg的&ldquo;代码如诗&rdquo;的精神。</p> <p><img alt="automattic-personality-layer-user-experience" src="/sites/default/files/images/201208/automattic-personality-layer-user-experience.jpg" style="width: 500px; height: 435px; " /></p> <p><strong>幽默</strong>:在Automattic的&ldquo;关于&rdquo;页面中充满了和善幽默的自我介绍,感兴趣的用户在阅读时就能感受到他们那种充满乐趣的工作环境。</p> <p><strong>标语</strong>:Automattic的标语之一是&ldquo;比起俳句,我们更擅长写代码&rdquo;。正是这种看似严肃认真的幽默感,或者说看似幽默的认真,奠定了他们的产品基调。</p> <p><img alt="automattic-slogan-personality-layer-user-experience" src="/sites/default/files/images/201208/automattic-slogan-personality-layer-user-experience.jpg" style="width: 500px; height: 276px; " /></p> <p><strong>文案</strong>:在wordpress.com首页的页脚当中有一段每次加载页面都会发生变化的签名语,有时是&ldquo;来自Automattic的产品&rdquo;,有时变为&ldquo;来自Automattic的乐章&rdquo;。这种细节体现了他们对于自己产品的热爱。</p> <p><img alt="automattic-medley-personality-layer-user-experience" src="/sites/default/files/images/201208/automattic-medley-personality-layer-user-experience.jpg" style="width: 500px; height: 275px; " /></p> <p><strong>惊喜</strong>:在Automattic另外一个产品<a href="http://jetpack.me">Jetpack</a>的站点中,每次打开首页都会看到三个背着喷射背包的家伙向天际飞去的动画。这种用心和幽默既能给用户带来有趣的感受,同时还加深了其产品名称所关联的含义在用户头脑中的印象。</p> <p><img alt="automattic-jetpack-personality-layer-user-experience" src="/sites/default/files/images/201208/automattic-jetpack-personality-layer-user-experience.jpg" style="width: 500px; height: 300px; " /></p> <p><strong>彩蛋</strong>:在WordPress的self-comparison当中有个彩蛋。为了防止相同版本的文章进行自我比较,Automattic创建了一个小机制,无论是其中的文案还是视觉风格都模仿了黑客帝国当中的段子。<a href="http://techfleece.com/2011/08/15/how-to-find-the-hidden-matrix-easter-egg-in-wordpress/">这篇文章</a>会教你怎样在WordPress当中找到这个彩蛋。</p> <p><img alt="automattic-matrix-personality-layer-user-experience" src="/sites/default/files/images/201208/automattic-matrix-personality-layer-user-experience.jpg" style="width: 500px; height: 513px; " /></p> <p>在一个技术色彩如此浓重的产品领域中,Automattic通过对情感化设计的有效运用,为自己的产品赋予了充满个性的人格特质。</p> <h4> 案例3:Clear</h4> <p>良好的情感化设计可以将用户转变为产品的传播者,他们会与其他人分享自己的良好体验,帮助你的产品建立口碑。人们喜欢口口相传那些有意思的故事,而你要做的就是给他们讲一个这样的故事。</p> <p>前一段时间,来自Realmac的待办事项类应用<a href="http://www.realmacsoftware.com/clear/">Clear</a>非常火爆。它固然不是市面上的第一款待办事项应用,但他们很聪明的瞄准了iPhone用户,特别是其中那些追求个性的设计师们。最小化的界面设计(参考阅读:<a href="http://beforweb.com/node/85">最小化可用性设计</a>)以及独特的交互方式、视觉效果都使它与市面上的其他同类应用形成了明显的差异化。这正是它所针对的用户群体所追寻的。</p> <p><strong>建立预期</strong>:Realmac在Clear正式发布之前推出了一段充满创意和惊奇色彩产品演示视频,有效的吊起了用户的胃口,使他们充满期待,并提前帮助产品进行了传播。</p> <p><strong>好玩</strong>:Clear的一个重要卖点就是新鲜有趣的交互方式。&ldquo;好玩&rdquo;成为了这个产品的一个基调。在应用内的引导视图中(参考阅读:<a href="http://beforweb.com/node/27">具有引导性的移动应用界面设计模式</a>),设计者也强调了&quot;Play&quot;的概念。</p> <p><img alt="clear-play-personality-layer-user-experience" src="/sites/default/files/images/201208/clear-play-personality-layer-user-experience.jpg" style="width: 500px; height: 480px; " /></p> <p><strong>惊喜、专享</strong>:在应用中打开主题设置界面后,安装了Tweetbod的用户会收到一条消息,恭喜他们获得了专享的额外主题。这些用户很可能因为受到了特殊照顾而感到开心,另外,这个群体在口碑传播方面的作用是相当大的。</p> <p><img alt="clear-theme-tweetbot-personality-layer-user-experience" src="/sites/default/files/images/201208/clear-theme-tweetbot-personality-layer-user-experience.jpg" style="width: 500px; height: 480px; " /></p> <p>另外,如果你follow了Clear开发者的Twitter帐号,那么还能获取另外一款奖励主题。这个彩蛋的作用依然在于传播。人们会分享他们的热忱,甚至谈论他们获得或是错过了哪些主题。</p> <p><img alt="clear-social-personality-layer-user-experienc" src="/sites/default/files/images/201208/clear-social-personality-layer-user-experience.jpg" style="width: 500px; height: 480px; " /></p> <p>这是情感化设计所产生的重要效应之一。这些惊喜、专享一类的元素不仅会让人们更加喜欢你的产品,而且他们会分享自己的愉悦体验。看看人们在Twitter当中的表现:</p> <p><img alt="clear-response-twitter-personality-layer-user-experience" src="/sites/default/files/images/201208/clear-response-twitter-personality-layer-user-experience.jpg" style="width: 500px; height: 499px; " /></p> <p><strong>细节</strong>:如果当前的待办事项为空,Clear会提醒你进行创建。</p> <p><img alt="clear-tip-personality-layer-user-experience" src="/sites/default/files/images/201208/clear-tip-personality-layer-user-experience.jpg" style="width: 500px; height: 480px; " /></p> <p>而再次清空之后,提示语会发生变化,这里引用的是一段来自爱迪生的励志名言。</p> <p><img alt="clear-quote-personality-layer-user-experience" src="/sites/default/files/images/201208/clear-quote-personality-layer-user-experience.jpg" style="width: 500px; height: 480px; " /></p> <div class="embed"><article id="node-301" class="node node-related-books" about="/node/301" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="亲爱的界面:让用户乐于使用、爱不释手" src="http://beforweb.com/sites/default/files/images/products/47.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">亲爱的界面:让用户乐于使用、爱不释手</a></h4> <p><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书主要介绍如何设计出具有可用性的应用程序和网站,不但让用户乐于使用,而且令其爱不释手。作者详细介绍了如何将可用性融入设计、测试及开发的各个流程,如何优化设计过程、把握设计重点、提高设计效率...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 收益与风险</h3> <p>凡事都具有两面性,情感化设计同样存在风险。当你在为系统错误而道歉的时候,过于轻松愉悦的文案未必会让用户所有感到舒服。时刻记得自己的产品所面向的用户群体特质,并有针对性的充分展示产品个性。</p> <p>我们在本文中并没有谈论到那些相对失败的案例,不过在此我有一点小小的建议:如果你希望产品表现出一种风趣狡黠的个性,那么要记得观察用户的反应。如果某些设计元素没有起到正面效果,一定要及时主动的道歉并改进,以此表现你的诚意,展示愿意聆听意见并改正错误的态度。这可以保证你的产品处于正确的人格位置。</p> <p>再次以MailChimp为例,他们提供了一种&ldquo;party扫兴模式&rdquo;,那些对幽默风格不感冒的用户可以在这里禁用那些有意思的设计元素。</p> <p><img alt="mailchimp-pooper-personality-layer-user-experience" src="/sites/default/files/images/201208/mailchimp-pooper-personality-layer-user-experience.jpg" style="width: 500px; height: 221px; " /></p> <p>或者也可以采用相反的做法,例如Facebook提供了一种&ldquo;海盗&rdquo;模式,可以将传统风格的文案变为海盗风格的用语<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="facebook-pirate-style-personality-layer-user-experience" src="/sites/default/files/images/201208/facebook-pirate-style-personality-layer-user-experience.jpg" style="width: 500px; height: 130px; " /></p> <p>这一切的核心就在于:<strong>让用户更好的使用产品,获得更愉悦的体验,并主动向他人分享和推广这些正面的经验。</strong></p> <div class="embed"><article id="node-302" class="node node-related-books" about="/node/302" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门:抓住访客心理的网页设计" src="http://beforweb.com/sites/default/files/images/products/48.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:抓住访客心理的网页设计</a></h4> <p><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了主要的Web设计心理学知识和理论成果,结合实例介绍了目前主要的可用性指导原则,分享了设计师如何在初创型企业更好地体现自身价值,介绍了色彩理论,并结合实例介绍了具体的配色方案...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/116" typeof="skos:Concept" property="rdfs:label skos:prefLabel">情感化设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/87" typeof="skos:Concept" property="rdfs:label skos:prefLabel">差异化</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/114" typeof="skos:Concept" property="rdfs:label skos:prefLabel">反馈</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 12 Aug 2012 08:05:29 +0000 C7210 103 at http://www.beforweb.com http://www.beforweb.com/node/103#comments iOS Wow体验 - 第六章 - 交互模型与创新的产品概念(2) http://www.beforweb.com/node/87 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-ios-iphone-ipad-wow-factor-app-ux-design-techniques-2.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章译文精选的第二部分,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/86">Wow体验 - 第六章 - 交互模型与创新的产品概念(1)</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>面对竞争对手的产品,积极主动地寻求具有差异化的用户体验设计之道&mdash;&mdash;这个过程会顺理成章地引出&ldquo;标志性的交互模式&rdquo;这一话题。所谓&ldquo;标志性的交互模式&rdquo;,就是指那些能够帮助用户对你的应用产品及公司品牌产生辨识和认知效应的独特交互模式。</p> <p>这项工作并不意味着要在现有的产品设计开发流程当中做出某种额外的技术投入,它所关系到的是一种能够在设计方案当中体现出来的观念模式和设计目标。其实,打造具有差异化的用户体验这个过程本身就是对标志性的交互模式的定义,只不过我们一直以来所讨论的对象都是单一的应用产品<a class="eLink" href="http://beforweb.com">。</a>如果你所在的公司或团队同时拥有数款系列化的应用产品,那么你在系统层面的全局化设计思路就必须同时扩展到其他产品及相关功能当中。这也意味着你需要扩展交互模型设计方案的作用范围;其中的每一个设计决策都有可能影响到产品家族当中的其他成员。</p> <!--break--><h3 id="a1"> 打造标志性的交互模式</h3> <p>回顾一下我们在<a href="http://beforweb.com/node/86">前文中</a>探索的网状列表交互模型,其中,网格单元的展开浏览方式以及相应的操作手势的运用,其实算得上是一种标志性的交互模式了。当时,我们的主要目的还是解决文字内容无法完整显示的问题;现在,站在产品全局的角度进行思考,我们还可以将这样的交互模式通过怎样的方式运用在哪些地方呢?不妨在导航方面试试它的可行性。假设这个网状列表其实是应用中的导航结构,其中每一个单元格都对应着一个导航项,那么这种展开并浏览的交互方式用在这里是否得当呢?答案是肯定的。</p> <p><img alt="iphone grid expand navigation prototype" src="/sites/default/files/images/201206/figure-6-11.png" style="width: 530px; height: 283px;" /></p> <p class="figure-caption">图 6-11 通过双指张开的方式展开一个导航项,超过一定程度之后,格子自动扩展为全屏</p> <p>这次,我们对网状列表交互模型进行了适当地改造,不过其中的基础模式仍然是展开浏览。用户可以通过双指张开的方式展开网格单元,阅读其中的导航文字内容。如果展开的程度没有超过某个预设值,那么当用户的手指离开屏幕时,格子就会自动恢复到默认的尺寸;一旦展开的程度超过了预设阈值,那么单元格就会自动扩展至全屏,这个导航项所对应的下级界面就会完整地呈现出来。另外也必须考虑到,用户有可能更加习惯于直接点击单元格来进行导航操作,所以我们不妨将这种方式也加入到当前的模型当中,用户可以根据自己的习惯或是喜好来进行操作。</p> <p>我们正在打造一种与常规做法截然不同的交互模型。传统的线形空间模型通常会给我们带来一种&ldquo;节点化&rdquo;体验,而在我们当前所打造的这个交互模型当中,用户不再需要通过&ldquo;从A点到B点&rdquo;的方式在信息结构中行进,他们可以在任何需要的时候直接触发相应的内容与功能。从工作流的角度来说,这两类交互方式没有本质区别,因为它们所实现的需求目标是相同的;而站在体验差异化的角度来看,这两种模式带给用户的感知几乎是完全不同的。</p> <div class="embed"><article id="node-263" class="node node-related-books" about="/node/263" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动应用UI设计模式-尼尔/dp/B00AMAI1AO/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="移动应用UI设计模式" src="http://beforweb.com/sites/default/files/images/products/07.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/移动应用UI设计模式-尼尔/dp/B00AMAI1AO/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">移动应用UI设计模式</a></h4> <p><a href="http://www.amazon.cn/移动应用UI设计模式-尼尔/dp/B00AMAI1AO/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">这是一本移动应用UI设计模式参考书,分10大类介绍了70个移动应用设计模式(包括反模式),用400多个屏幕截图和图解帮助读者理解和利用UI设计模式,以解决常见的设计难题,同时提供了&ldquo;即学即用&rdquo;式的技巧和经验...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a2"> 文档化</h3> <p>撰写交互模型文档同样是一件非常重要的工作。你需要抓住头脑中的模型概念,将这些信息落实到文档中,并在设计开发团队当中与大家进行分享和交流。这样做可以帮助你对自己的想法进行验证,确保由这些概念所演化出的实际应用界面可以被用户很好的理解和使用。</p> <p>你可以采用任何你喜欢的形式来创建文档,只要确保在其中落实以下两个方面的基本要素即可:</p> <ul> <li> 以一种简洁而清晰的方式,可视化地将交互模型的本质描绘出来。</li> <li> 为那些难以通过可视化的方式准确表达出来的交互模式提供附加描述。</li> </ul> <p>请记住一点,交互模型文档并不是用来描述用户界面的设计方案或是像线框原型那样对交互对象进行布局规划的。在制定文档的过程中,要尽量避开这些细节层面的问题。因为交互模型本身的作用是描述产品整体或局部当中的交互行为模式,以便为后续的交互及视觉设计相关工作提供明确的目标方向。</p> <p>下图所展示的是一个可视化的交互模型文档范例,它描述了我们之前创建的网状导航结构。</p> <p><img alt="iphone interactive model documents" src="/sites/default/files/images/201206/figure-6-12.png" style="width: 528px; height: 723px;" /></p> <p class="figure-caption">图 6-12 将交互模型文档化</p> <h3 id="a3"> 案例学习</h3> <p>接下来,我们将通过一个虚拟案例来进一步理解这些理论知识在实际工作中的运用方法,并籍此梳理出一套具有普遍适用性的工作模型。案例中的客户和产品都是虚构出来的,我们将通过完整的交互模型设计过程来了解实战中的设计思路和问题解决方式。</p> <h4 id="a4"> X公司</h4> <p>首先,让我们假设出一个客户,也就是X公司。该公司目前有一款桌面软件产品,并且已经在相关市场中取得了一定的成功。X公司最近意识到,他们必须通过一款iPhone应用来打入移动市场,以保持公司业绩的增长。另外,来自用户的呼声以及投资方的压力也迫使着他们必须尽快地做出这方面的决策。</p> <p>X公司了解到你是一名出色的移动应用交互设计师,所以决定把这个项目外包给你做。他们希望最终的产品可以在应用商店中一鸣惊人,并一举战胜他们的竞争对手刚刚推出的一款同类应用。</p> <p>X公司的主要业务方向是文化娱乐。在他们的桌面应用中,用户可以浏览那些来自各方面内容源的文娱信息。内容形式以视频为主,音频和图片也会占一定的比重。这款桌面应用能够很好地组织和管理大量的内容,使用户可以很轻松地检索到自己感兴趣的信息。比起竞争对手而言,这也是X公司所具有的优势。</p> <p>现在,X公司面临着新的挑战:虽然他们的桌面应用很棒,但要对其进行移动化改造,使之成为一款同样成功的iPhone应用,却不是一件很容易的事。桌面应用的用户界面当中有大量按钮一类的控制元素,而且它们显然都是针对键鼠输入方式而设计的。在内容的组织与浏览方面,导航结构多数都超过了三层。</p> <h4 id="a5"> X公司的需求</h4> <p>了解了这些背景情况之后,你就可以着手准备实际的设计工作了。首先,你要根据客户的实际需求来定义产品的核心功能。经过了与X公司相关决策者的访谈交流,并对其桌面应用做了进一步的了解之后,你认识到,他们的iPhone应用需要满足以下几个方面的需求:</p> <ul> <li> 帮助用户访问内容库当中的全部信息。</li> <li> 为用户提供一种机制,帮助他们快速高效地发现新内容。</li> <li> 用户可以将内容分享给朋友。</li> <li> 用户可以对内容发表评论。</li> <li> 用户可以发布他们在iPhone上创作或拍摄到的内容,并通过内容库分享给全部用户。</li> </ul> <p>这些需求目标已经得到了X公司相关团队及决策人员的确认。虽然其桌面应用的很多功能并没有体现在这个列表中,但是根据移动应用上下文环境中的用户实际需求来看,目前的这些功能已经足够了。</p> <p>明确了产品需求,我们就可以对工作流的组织方式进行构思了。在这方面,最好多花些时间和心思,从细节层面对工作流进行深入地挖掘与定义,这样做可以使接下来所创建的交互模型能够最大程度地发挥出自身的潜力和价值。</p> <p>这份需求列表可以帮我们看出这款应用的本质。其中,绝大部分需求与内容有着直接的关联,而类似分享和评论这样的辅助功能也是依托于内容的基础之上的。所以我们可以得出结论,内容是这款应用在功能与用户体验等方面的核心。当你与客户进行沟通交流的时候,还会对一些将要在后续工作当中面对的关键问题有所预见。例如,我们可以了解到,对于这款以内容检索和浏览为核心的应用来说,用户所做出的交互行为多数是为了获取内容而在层级化的信息结构中进行的导航操作。</p> <p>要将这一点体现在工作流文档中,有两种方式供我们选择。一是在文档中准确地反映出涉及内容浏览和导航的层级结构;另外还可以将这方面的工作流简化成为文档中的一个节点。让我们通过一张流程图来看看这两种方式之间的区别(见图 6-13):</p> <p><img alt="iphone application work flow" src="/sites/default/files/images/201206/figure-6-13.png" style="width: 531px; height: 518px;" /></p> <p class="figure-caption">图 6-13流程图被简化前后的信息结构对比</p> <p>这给我们带来了一个值得思考的问题:究竟是否有必要将工作流完整无缺地体现在文档中? 这个问题的答案还要视具体情况而定。对于那些会对用户界面设计方案产生直接影响的交互流程&nbsp;,你需要在文档中将它们尽可能完整而详细地体现出来。而对于那些有可能在用户界面设计过程中得到一定程度简化的交互流程,不妨直接在工作流文档中将它们打包成为一个节点,避免工作流的组织方式被复杂化。</p> <p>在当前的案例中,我们需要为用户提供一种机制,帮助他们在移动应用的上下文环境中快速高效地发现并浏览内容。可以预见的是,为了实现这个需求,我们必须在将来的某个设计环节当中将桌面版应用原有的信息结构进行最大程度地简化,例如可以在构建交互模型时,将内容的导航与浏览整合到同一个交互过程当中。在这种情况下,我们完全可以选择简化版的流程图来指导我们接下来的工作(见图 6-14)。</p> <p><img alt="iphone info work flow" src="/sites/default/files/images/201206/figure-6-14.png" style="width: 518px; height: 380px;" /></p> <p class="figure-caption">图 6-14 做出了信息结构会被简化的预见之后,采用简化版本的流程图</p> <p>随着核心需求的基本工作流被逐步确定,我们也能越发清晰地看到,这个案例带给我们的一个很大的挑战,就是能否找到一种与移动应用上下文环境的关联更加紧密的方式,来帮助用户获取内容。接下来,我们将带着这个问题进入到交互模型的构建阶段。</p> <h4 id="a6"> 应用的细节</h4> <p>为了能够在X公司的iPhone应用中实现更加合理的内容浏览机制,你决定首先从他们的桌面应用入手,进行更加细致的分析。经过一番实际的使用,你发现,在桌面应用当中,内容被划分为十个主类别,其中每个类别之下都有十个左右的子类,而每一个子类当中又包含着若干独立的内容对象。整个系统当中大约有几千个内容节点。</p> <p>桌面应用中的交互模型是很容易理解的。它会向用户呈现一个网格状的选项列表,其中每个单元格都对应着一个内容主类别。选择了其中的某个主类之后,整个列表会被刷新,这个主类所包含的子类会依次填充到每个单元格当中。继续选择其中的某个子类,整个列表会再次刷新,并且被这个子类所对应的内容对象重新填充。这些内容对象通常可以填满多个界面,你可以不同的界面中切换浏览。</p> <p>另外,这款桌面应用在导航方面做的不是很理想。用户必须至少进入到子类列表界面之后才能发现一个所谓的全局导航,而且当你深入到内容层面之后,会发现这个导航只能帮你回到顶级的主类列表界面。另外,在内容层面当中缺乏必要的上下文指示,用户很难发现当前的内容对象从属于哪个子类。</p> <p>在你对这些流程进行实际体验的时候,要记得将自己的观察和想法及时地记录下来。这些记录也许会对交互模型的创建起到重要的指导作用。正像我们在列表模型改造练习当中了解到的,某些在表面看来无关紧要的零星想法,却有可能被扩展成为很有价值的交互概念。在某些情况下,你完全可以将那些从观察记录里归纳出的想法加入到交互模型文档当中。</p> <p>根据当前案例的实际情况,你有针对性地在内容层级结构这方面做了特别的记录与分析;这些信息将对交互模型的构建方案产生决定性的影响。目前,我们对于内容结构的理解大致是这样的(见图 6-15):</p> <p><img alt="iphone application content structure" src="/sites/default/files/images/201206/figure-6-15.png" style="width: 519px; height: 138px;" /></p> <p class="figure-caption">图 6-15 X公司桌面应用当中的内容结构</p> <p>桌面应用的交互模型当中有一个很严重的问题。正如我们在前文当中了解到的,当用户处于内容层面的时候,必须首先通过全局导航回到主类列表界面,才能再次进入子类列表界面或是某个子类当中的内容对象列表界面。而这只是众多问题当中的一个。你现在还不清楚桌面应用当中的这种网状模型能否适用于iPhone的用户体验模式。</p> <p>既然我们已经在之前的练习中打造过一个网状模型,那么不妨试着对这个概念进行再利用,并且将我们先前定义好的交互机制运用到当前案例的信息结构当中。(见图 6-16)。</p> <p><img alt="iphone grid model view subview" src="/sites/default/files/images/201206/figure-6-16.png" style="width: 516px; height: 349px;" /></p> <p class="figure-caption">图 6-16 在网状模型中,从主类列表界面导航至子类列表界面</p> <p>由于具有几乎相同的网格结构,这个交互模型与X公司的桌面应用在体验方面是具有很大相似之处的。对于那些已经熟悉了桌面应用的用户来说,这是好事。不过毕竟,这种模型在小屏幕设备当中受到的空间局限还是很大的。在iPhone当中,我们最多只能使用3行3列的网格,而在桌面应用中,网格可以达到10行15列,具体的列数还会随着显示器的规格不同而变化。</p> <p>正像我们之前在模型改造练习当中定义过的,用户可以通过双指张开的方式展开网格单元,也可以直接点击单元格进入下层结构。不过在当前的案例中,我们要降低第一种方式当中的那个状态阈值,使系统在接收到双指张开的手势之后,能够立刻将单元格进行扩展,直至全屏状态。</p> <p>这个交互过程中的关键要素就是单元格在展开时所表现出的过渡动画效果。我们希望给用户带来一种感觉,仿佛每一层界面都是嵌套在上一层界面当中的一个网格单元里的;当用户使用双指对某个单元格进行展开操作的时候,可以看到下层界面正在从格子当中呈现出来,并随着单元格的扩展而填满全屏。这种视觉交互效果可以准确地体现出这款应用的信息组织方式,而且对用户来说,这种交互模式也是非常直观的。</p> <p>遗憾的是,这个模型当中还存在一些弊端,例如回到上层结构的导航方式问题。使用相反的操作手势,也就是双指捏合的方式进行回退操作是具有一定的可行性的,但是对于内容较为复杂的界面来说,这种交互方式的视觉效果缺乏干净利落的感觉。所以,网格模型的概念也许可以在某些特定的需求当中发挥其真正的潜力,但它似乎不适合当前案例中的应用。可以说,这种交互模型的扩展性并不是很强,我们无法将它很好地运用到一些常见的需求当中。</p> <p>另外,这个交互模型是一种典型的双手解决方案,用户必须一手持机,同时使用另外一只手进行相关操作。这种交互方式本身谈不上不好,但是考虑到最终产品所处的移动上下文环境,这并不是一个很理想的模式。</p> <p>对于当前的案例,有没有其他更加适用的交互模型呢?让我们回过头来重新思考一下常规列表的可能性。传统的单列纵向列表非常便于单手操作,而且很适合用来展现层级化的信息结构。这种特性几乎使其成为了iPhone当中最具普遍适用性的导航方案。不过也正是因为它的适用性太强,所以通过这种方式打造的交互方案通常会缺乏足够的创新性。有什么办法可以帮助我们以全新的方式来使用传统的列表模型呢?</p> <p>在之前的练习中,我们曾经对单列纵向列表进行过天马行空般的改造,这次,我们不妨在保持标准列表原貌的基础上寻求一些局部当中的改进方法。在实际产品中,我们不能仅仅为了标新立异而刻意吹捧差异化的原则,尤其是不能在还有相关问题没有得到解决的情况下片面地采用并不适宜的方案。在当前的案例中,网格模型不能很好地帮助用户实现回退方面的导航功能,而且不便于单手操作。另外,正像我们在前文当中提到的,目前的桌面应用当中还存在着其他方面的问题,例如在内容层面当中缺乏必要的上下文指示,用户很难发现当前的内容对象从属于哪个子类,而且当你深入到内容层面之后,只能通过现有的导航机制回到顶级的主类列表界面等等。接下来,我们将致力于打造一个能够解决所有这些问题的新模型。</p> <p><img alt="iphone application slide list subview" src="/sites/default/files/images/201206/figure-6-17.png" style="width: 521px; height: 346px;" /></p> <p class="figure-caption">图 6-17 拥有独特交互方式的传统单列纵向列表。用户可以在某个列表项中向左轻扫,使原本处于隐藏状态的二级列表结构呈现在这个列表项当中。</p> <p>这个解决方案第一眼看上去很普通,也很容易理解,它似乎就是一个内容类别列表。然而这个模型在很多方面都与iOS当中的标准列表有所区别。用户在前两层信息结构当中进行导航操作的时候,整个列表的视图模式是不会发生变化的。当用户选择了某个主类之后,对应的子类列表会直接出现在这个主类所在的列表项当中。这个过程所涉及到的状态变化只会发生在当前列表项的可视区域里。用户可以在这个列表项区域当中通过上下滚动的方式来浏览子类列表,而当前区域以外的部分则始终保持不变,也就是说,用户无需离开当前界面就能随时访问其他主类当中的子级分类。</p> <p>我们可以让用户通过向左轻扫的方式将子类列表&ldquo;拖入&rdquo;主类所在的列表项可视区域当中,也可以让他们对某个其他位置上的目标对象进行相关操作,来触发某种动画效果,使子类列表移入可视区域。你可以对各种方式进行构思和尝试,并从中找到一种操作体验最自然的、误操作几率最低的来加以使用。</p> <p>这种交互模型在导航和浏览方面的效率很高,用户可以在同一个界面当中同时查看两个层面的信息。不过这里同样存在一些很明显的问题,例如子类列表会被局限在一个非常有限的可视区域当中,用户一次最多能完整看到一到两个条目。另外,这种模式本身只支持两个类别层面之间的导航,要查看最终的内容对象,我们还需要使用另外一个模型将内容完整的呈现在屏幕当中。所以,这种模式也难以很好地适用于当前的案例。</p> <p>我们希望找到一种新的方式,它即可以沿用上面这种模型在导航方面的灵活性,同时又能使内容具有更好的可读性。另外,在上面的模型当中,主类条目的表现形式以及对有效空间的占用率也可以得到适当的优化。需要记住,这款应用的核心需求当中要求我们提供一种快速高效的机制,以帮助用户更好的浏览内容。我们对于交互模式的思考必须围绕着这个中心思想进行展开。</p> <p>我们继续在列表的概念上做文章,不过这次,我们可以试着为列表增加一些不同的属性,使阅读方式更具流动性。如下图所示,这种模型当中不存在彼此分离的视图状态变化,它是一种连贯的、更具动态化的解决方案,而且对用户的交互行为具有更好的响应性。</p> <p><img alt="iphone application list browsing model" src="/sites/default/files/images/201206/figure-6-18.png" style="width: 541px; height: 284px;" /></p> <p class="figure-caption">图 6-18 该模型将主类与子类列表整合到同一个层面中,使浏览更加迅速。用户可以通过纵向滚动来浏览主类列表,在某个主类当中通过横向滚动来浏览子类列表。</p> <p>这个交互模型与之前的那些有所不同。初始状态下,界面为导航结构和其他功能保留了一定的空间。说到这款应用当中的其他功能,我们并没有进行过相关的描述,因为对于当前的案例练习来说,那些细节问题并不重要,我们的主要目的是站在一个较高的层面上,构筑整个产品的核心体验模式。所以目前,我们只需要将注意力放在与内容的导航与浏览相关的交互模型上就可以了,因为这些方面才是整个产品的基础与核心。</p> <p>最初,这个模型只会呈现出一部分主类导航项。每个主类都以文字标签的形式出现,用户无需任何操作即可直接获得子类列表当中的分类信息。这种二维导航结构可以帮助用户以非线型的方式在同一个层面中浏览原本属于不同层面的信息。</p> <p>要查看更多的主类以及它们对应的子类列表,用户只需执行纵向滚屏操作。当主类列表接触到屏幕的上边缘时,排在最前面的几个主类条目就会自动收起,以便为后面的留出显示空间。在这个过程中,用户不需要进行任何控制,纵向滚屏这个操作本身就会触发这种类似手风琴风箱折叠一样的效果。</p> <p>要查看某个子类当中所包含的内容对象也是很容易的。当用户在默认视图中选择了某个子类时,界面会过渡成为一个新的网格内容模型,这个模型即可以像默认视图那样对内容进行分类呈现,同时也支持没有文字标签的单列网格单元(见图 6-19)。要查看某个内容对象,用户只需要点击横向列表当中的某个单元格,内容对象就会扩展至全屏。</p> <p><img alt="iphone application subview grid prototype" src="/sites/default/files/images/201206/figure-6-19.png" style="width: 515px; height: 354px;" /></p> <p class="figure-caption">图 6-19 子类列表视图。在横向的内容对象列表当中点击某个单元格,内容对象就会扩展至全屏。</p> <p>在这个模型当中,我们可以将用于回退的导航控制元素放在界面顶部。这个控制元素既可以是一个简单的返回按钮,也可以是相对复杂的类似面包屑的形式。最重要的是,相比于之前的几个模型,这次我们终于能够以一种比较合理的方式来实现导航控制机制了。</p> <p>可以说,这是到目前为止我们能够找到的最佳解决方案了。你可以将这套方案落实在交互文档当中,并直接通过这个文档向X公司的相关决策人员及团队做以讲解,引导他们站在用户的角度去理解这款模型的出色之处。从这个交互模型当中,他们也能很直观地体会到这款应用与竞争对手的产品相比所具有的创新性。你完全不用花费时间去打造线框原型、视觉稿或是高保真原型来完成这项工作<a class="eLink" href="http://beforweb.com">。</a></p> <p>对交互模型的创建过程进行了完整的了解之后,你还可以沿用在这个案例当中学到的方法,继续通过其他产品概念进行练习和尝试,看看能否从中得到一些新的感悟。</p> <div class="embed"><article id="node-264" class="node node-related-books" about="/node/264" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone应用用户体验设计实践与案例" src="http://beforweb.com/sites/default/files/images/products/08.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone应用用户体验设计实践与案例</a></h4> <p><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书简述了iPhone硬件和应用风格,逐步介绍了如何进行前期的用户研究和竞争性分析,以及提升iPhone应用用户界面和视觉设计的最佳实践。全书通过13个案例分析展示了知名设计师的实践过程,为读者了解应用背后的设计过程提供了第一手资料...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a7"> 总结</h3> <h4> <a href="http://beforweb.com/node/86#a1">令人惊叹的设计要素</a></h4> <p>&ldquo;令人惊叹&rdquo;的设计要素是指那些给用户带来的体验感受可以达到其心中某个&ldquo;情感阈值&rdquo;的产品表现层元素。要使应用产品达到令人惊叹的效果,你必须让用户对于设计方案产生某种特别的反应。以下三个方面的因素将决定着产品带来的体验感受能否跨越用户心中的&ldquo;情感阈值&rdquo;:</p> <ul> <li> <strong>符合直觉</strong>:设计方案必须能够引导用户做出最符合直觉的反应行为。</li> <li> <strong>差异化创新特征</strong>:设计方案中要有明显的创新特征,至少要让用户感受到某些不同寻常的产品体验。</li> <li> <strong>积极响应</strong>:设计方案本身要能以积极的姿态去缓解那些由于差异化所导致的与用户预期或旧有习惯不符的陌生感。</li> </ul> <div class="embed"><article id="node-301" class="node node-related-books" about="/node/301" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="亲爱的界面:让用户乐于使用、爱不释手" src="http://beforweb.com/sites/default/files/images/products/47.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">亲爱的界面:让用户乐于使用、爱不释手</a></h4> <p><a href="http://www.amazon.cn/图灵交互设计丛书-亲爱的界面•让用户乐于使用-爱不释手-Lukas-Mathis/dp/B00A6MIPNG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书主要介绍如何设计出具有可用性的应用程序和网站,不但让用户乐于使用,而且令其爱不释手。作者详细介绍了如何将可用性融入设计、测试及开发的各个流程,如何优化设计过程、把握设计重点、提高设计效率...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <p>而&ldquo;令人惊叹&rdquo;的体验效应以及上述三点推动因素又会受到设计方案自身所具有的一些属性的影响:</p> <ul> <li> <strong>界面外观</strong>:也就是设计方案所呈现出来的界面布局结构、渲染方式以及所有相关的静态视觉组成元素。</li> <li> <strong>交互方式</strong>:包括人机物理交互、手势以及其他常规的用户界面输入方式。</li> <li> <strong>视觉交互效果</strong>:包括那些能够为设计方案赋予生机的动态的界面元素及视觉效果。这些交互效果通常与某些特定的响应行为相关,对设计方案的整体质量也会起到重要的影响作用,甚至包括那些与交互行为没有直接关联的临时状态。</li> </ul> <p>如果我们能够在这其中的某一方面做到出类拔萃,那么产品体验就完全有可能达到令人惊叹的程度。当然,这种做法是相当有风险的,要更加有效地提升产品整体的感知效应,这三个方面的良好表现是缺一不可的。</p> <h4> <a href="http://beforweb.com/node/86#a2">交互模型</a></h4> <p>通过构建交互模型,我们可以对产品的基本交互方式及视觉交互效果进行规划。构建交互模型的过程通常包括四个步骤,其中前三步是必要的前期工作,而最后一步则是建模工作本身。这四个步骤包括:</p> <ul> <li> 确定需求</li> <li> 定义需求用例与测试脚本</li> <li> 规划产品工作流</li> <li> 构建交互模型</li> </ul> <p>在打造具有高度差异化的交互模型的过程中,我们会遇到很多挑战。有一些基本的设计思路和方法可以帮助我们将这项工作进行的更加卓有成效:</p> <ul> <li> <strong>抽象</strong>:试着将用户界面当中的交互对象抽象成为基础的逻辑形态,抛开表现层的干扰,对其本质进行思考。</li> <li> <strong>改造与重组</strong>:以交互对象的基础逻辑形态作为组件来构造交互模式。结合产品的实际需求,在必要的时候对交互组件进行合理的改造和重组。</li> <li> <strong>可行性验证</strong>:将这些交互模式放到已经规划好的工作流当中检验其可行性。</li> <li> <strong>解决方案</strong>:通过以空间、时间或状态变化等概念为主导的方案来解决交互模型当中的问题。</li> <li> <strong>扩展</strong>:提升交互模型的普遍适用性,使其能够运用到产品当中的其他功能领域。</li> <li> <strong>记录</strong>:详细记录下自己在交互模型构建工作当中的各种感受和想法。</li> <li> <strong>文档化</strong>:通过可视化的文档对交互模型进行直观的描述。</li> </ul> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了如何突破基础、打破常规,从而提供“超赞”的用户体验。通过学习,读者将会学到如何使用标准控件,如何创建非标准控件和具备较高影响力的用户交互,以实现真正夺人眼球的应用设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/84" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模型</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/87" typeof="skos:Concept" property="rdfs:label skos:prefLabel">差异化</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/110" typeof="skos:Concept" property="rdfs:label skos:prefLabel">流程图</a></li></ul> Sun, 24 Jun 2012 03:00:40 +0000 C7210 87 at http://www.beforweb.com http://www.beforweb.com/node/87#comments iOS Wow体验 - 第六章 - 交互模型与创新的产品概念(1) http://www.beforweb.com/node/86 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-ios-iphone-ipad-wow-factor-app-ux-design-techniques-2.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章译文精选,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/81">Wow体验 - 第五章 - 利用iOS技术特性打造最佳体验</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>到目前为止,我们已经了解了足够多的基础理论,这些内容可以帮助你更好的理解那些决定着产品用户体验的设计决策。现在,我们所面临的问题是,在实际项目当中,怎样做出能够与竞争对手的产品形成鲜明差异化的设计决策?怎样才能实现具有突破性的产品概念?本章中,我们将对这些话题进行探讨。</p> <p>我们将要介绍的并非是某种能够立竿见影的快速指南,你无法在看过这部分内容之后就立刻掌握了其中的&ldquo;秘诀&rdquo;。要打造出令人惊叹的应用,我们仍然要进行大量扎实的工作和不懈的思考,以及在这个过程中对于创造力的探索。你必须下决心在这些方面做到必要的付出,才有可能使自己的产品真正脱颖而出,取得成功。</p> <!--break--><h3 id="a1"> &ldquo;令人惊叹&rdquo;究竟指什么?</h3> <p>本书一直会提到的&ldquo;令人惊叹&rdquo;究竟是指什么呢?很显然,这个说法并不是一种可执行的设计概念,它是用户对于那些独特而具有吸引力的产品所表达出的具有赞许色彩的反馈。</p> <p>具体到iOS应用的设计当中,&ldquo;令人惊叹&rdquo;的设计要素主要是指那些给用户带来的体验感受可以达到其心中某个&ldquo;情感阀值&rdquo;的表现层元素。这个阀值的高低取决于用户自身,因此,如果对产品的目标用户人格缺乏清晰的认知,便难以对这个阀值进行准确地预估与判断。以下三个方面的因素将决定着产品带来的体验感受能否跨越用户心中的&ldquo;情感阀值&rdquo;:</p> <ul> <li> <strong>符合直觉</strong>:设计方案必须能够引导用户做出最符合直觉的反应行为。</li> <li> <strong>差异化创新特征</strong>:设计方案中要有明显的创新特征,至少要让用户感受到某些不同寻常的产品体验。</li> <li> <strong>积极响应</strong>:设计方案本身要能以积极的姿态去缓解那些由于差异化所导致的与用户预期或旧有习惯不符的陌生感。</li> </ul> <p>而&ldquo;令人惊叹&rdquo;的体验效应以及上述三点推动因素又会受到设计方案自身所具有的一些属性的影响:</p> <ul> <li> <strong>界面外观</strong>:也就是设计方案所呈现出来的界面布局结构、渲染方式以及所有相关的静态视觉组成元素。</li> <li> <strong>交互方式</strong>:包括人机物理交互、手势以及其他常规的用户界面输入方式。</li> <li> <strong>视觉交互效果</strong>:包括那些能够为设计方案赋予生机的动态的界面元素及视觉效果。这些交互效果通常与某些特定的响应行为相关,对设计方案的整体质量也会起到重要的影响作用,甚至包括那些与交互行为没有直接关联的临时状态。</li> </ul> <p>可以说,如果我们能够在这其中的某一方面做到出类拔萃,那么产品体验就完全有可能达到令人惊叹的程度。其实现实当中有不少这方面的例子。你会发现,某些应用在交互方式和视觉交互效果方面缺乏足够的创新性与吸引力,但它们的界面外观却相当出彩,以至于变相地降低了前两方面因素在用户感知当中所造成的负面影响。相反,某些应用也许会采用一种几乎没有经过任何修饰加工的<a href="http://beforweb.com/node/85">最小化设计</a>方案,但在交互方式和视觉交互效果方面却打造的非常到位,这也同样会给用户带来良好的体验感知。</p> <p>当然,仅仅依靠其中某个方面的表现来提升产品整体感知效应的做法是相当有风险的。特别是在iOS当中,这三方面属性所具有的影响力并不是均等的。漂亮的界面外观对于多数iOS应用来说几乎是一个既定命题,用户已经很难在这方面产生真正具有突破性的体验感知了。</p> <p>所以,能够对产品体验的提升产生最大推进作用的仍是交互方式及相关的交互响应行为。正像我们在<a href="http://beforweb.com/node/71">第三章</a>里了解到的,如今的用户对于那些能够带来创新体验的应用有着强烈的渴望;要在这方面满足用户对于差异化的渴求,我们必须在设计阶段对产品的交互方式进行更加深入的探索与分析。</p> <h3 id="a2"> 构建交互模型的流程概览</h3> <p>通过构建交互模型,我们可以对产品的基本交互方式及视觉交互效果进行规划。构建交互模型的过程通常包括四个步骤,其中前三步是必要的前期工作,而最后一步则是建模工作本身。听上去有些费解,不过没关系,接下来我将对这个流程进行简要的介绍;在对它们有了大致的了解之后,我们还将对其中每一个步骤进行深入而全面的分析。</p> <h4 id="a3"> 1.明确需求</h4> <p>首先,我们要对产品的基本需求有初步的了解。具体的需求内容可以在用户体验策略或是正式的需求分析报告当中体现出来。这些信息是所有后续设计工作的根基,所以我们必须确保需求是足够明确并且稳定的,同时,它还要得到团队的一致认可。如果你们更加习惯于敏捷开发,那么需求发生变动的可能性是相对较大的,不过你至少需要对那些定义了产品基本功能的核心需求进行确认,才可以继续接下来的流程。一旦需求确定,我们就可以进入交互建模的下一个环节,需求用例与使用场景的构建。</p> <h4 id="a4"> 2.定义需求用例与测试脚本</h4> <p>需求用例,特别是那些更具脚本驱动性的需求用例,是整个交互建模过程的重要组成部分。一个好的用例能够帮助团队了解到用户在使用产品时所经历的大致流程,并对各种需求在这个过程中的实现方式有所认知。有的用例会直接将那些涉及到关键交互环节的测试脚本叙述出来,并通过这种方式来为我们提供明确的需求指导。不过,无论是否以测试脚本的形式出现,需求用例本身的性质及其在产品概念前期工作当中的作用并不会发生变化。如果你对自己产品的概念已经有了比较明确的认知,并且清楚它与用户之间的互动模式,那么你可以在需求用例当中对这些进行详细地描述,从而为交互建模流程中的其他环节提供必要的信息。即便你在当前阶段对产品概念的细节还不能做到心知肚明,那么也不成问题,只要将用户在使用过程中有可能进行的常见行为描述出来即可。</p> <h4 id="a5"> 3.规划产品工作流</h4> <p>关于以怎样的方式规划产品工作流的问题,从不同的角度出发会得到各种不同的答案;其中,每种方式都有各自的目标与价值。站在设计的立场上,我们最关心的是产品的工作流是否符合用户的决策逻辑,它能否体现出交互过程中的关键环节,与之相关的功能结构在用户友好性等方面的表现又如何。这是一种以用户为中心的规划方式,它可以帮助我们通过确立产品的特性与功能这两者之间的关联来定义整个应用的架构。一个经过良好规划的产品工作流可以为你的应用提供精准的路线图,但它不会对任何具体的功能或交互机制做出假设。</p> <h4 id="a6"> 4.构建交互模型</h4> <p>这显然是交互建模流程当中最核心和本质的环节。当你明确了应用的基本工作流及各功能之间的关联后,就可以进一步去思考应该通过怎样的交互方式向用户呈现产品了。</p> <p>用户必须通过某些关键交互行为,来完成工作流中所定义的典型需求任务,而交互建模正是以这些关键交互行为作为基础,对应用整体的交互模式进行定义的。这其中涉及在不同的用户界面视觉模态下对屏幕的实际可用面积进行的管理 (例如应用的布局与功能随着屏幕方向的调转而进行相应的调整)、导航结构的呈现方式、基本的操作手势等等。换句话说,交互建模的过程定义了应用的操作方式,但它不会决定应用具体会做哪些事情。</p> <p>一套产品工作流往往能衍生出若干数量的交互模型,它们能够表现出的交互体验模式大有不同。关于这一点,我们会在本章后面的内容当中看到一些具体的例子。</p> <div class="embed"><article id="node-265" class="node node-related-books" about="/node/265" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone用户界面设计典型实例" src="http://beforweb.com/sites/default/files/images/products/09.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone用户界面设计典型实例</a></h4> <p><a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书通过10名在Apple Store中名列前茅的应用设计师和开发者的现身说法,为我们揭开了应用设计开发的神秘面纱。从本书中,读者不仅能学习到设计过程中的许多经验,更重要的是能够对应用成功的关键因素有全新的理解&mdash;&mdash;其最终取决于创意、人性化的界面带来的用户体验...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a7"> 对建模流程的深入分析</h3> <p>对建模流程当中的每个环节进行了大致的了解之后,我们将要对整个流程进行更加细致和深入的分析,包括对工作流的思考、交互模型的构建方法、相关问题的解决方案,以及怎样通过具有标志性的交互方式使整个产品的用户体验在同类应用当中脱颖而出。</p> <h4 id="a8"> 对工作流的思考</h4> <p>对于工作流的规划与定义,是产品交互设计工作的精髓之一。我们正是在这个过程中制定了用户与产品的互动规则的。很多时候,你只需要在抽象的层面对其进行定义,而不必在意功能细节或是某些特定的交互方式;而在另外一些情况下,你必须对所有的交互方式、行为事件、状态变化等方面的逻辑进行详细地定义,才能为产品的人机交互方式规划出一个最清晰的画面。</p> <h4 id="a9"> 交互模型的构建方法</h4> <p>正如我们在前文中提到的,交互建模用来对应用当中的交互模式进行定义,它同时还诠释了这些交互模式是以怎样的方式被整合成为具有高度一致性的、容易被用户理解的交互模型的。我们曾经在第二章里对<a href="http://beforweb.com/node/69">iOS交互环境的概念模型和空间模型</a>进行了解析。其中,交互空间及其三个组成层面的概念共同构成了iOS中的基础交互模型 (见图 6-1)。这个例子充分地体现出了交互建模的设计思想所具有的强大力量。</p> <p><a href="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-interface-planes.png" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-iphone-interface-planes" src="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-interface-planes.png" style="width: 500px; height: 163px;" /></a></p> <p class="figure-caption">图6-1 &nbsp;iOS空间模型及它的三个层面</p> <p>在构建交互模型的工作中,要尽量保持一种抽象化的思维方式。我们需要在不触及具体功能和内容的前提下,对产品有可能涉及到的交互行为进行思考,了解它们是怎样被用于控制界面交互对象的。在这方面,iOS为我们提供了大量的候选方案。诸如缩放、拖移、滑动、轻扫、滚动等基本手势都可以被赋予很多有意思的功能;无论是各自为战,还是协同配合,这些操作行为通常可以帮助我们创建出具有差异化的交互方式。</p> <p>你可以对各种模式进行自由的尝试,并思考它们能够以怎样的方式帮助你解决在设计方案当中遇到的问题。除此之外,能否使设计方案具有足够的弹性及扩展性,并且能够被用户很好地理解,这同样是需要我们思考和解决的问题。</p> <p>我们来做一组小练习。首先,想象出一个简单的用户界面,譬如一个列表视图。列表是一种最常见的用户界面对象,它具有很广泛的用途。传统意义上的列表通常由多个文本对象在纵向上排列而成。</p> <p><img alt="ios-standard-navigation-list" src="/sites/default/files/images/201206/figure-6-2.png" style="width: 519px; height: 338px;" /></p> <p class="figure-caption">图6-2 &nbsp;一个典型的列表</p> <p>从抽象的层面来说,列表到底是什么呢?列表的基本概念,就是一个由若干可选择对象所组成的队列。进一步思考,你还会发现,其实列表项并非一定要以纵向的方式进行排列,而且每一行也未必只能包含一个列表项。所以我们可以问问自己,对于在实际设计方案当中需要解决的具体问题来说,是否有更好的列表形式可以胜任?关于这个问题的答案通常不是显而易见的,我们需要思考并尝试一些不同的方案,看看它们能否带来有一些意思的变化。如果典型的单列纵向列表无法满足我们的需求,那么横向的方案又如何呢?(见图 6-3)</p> <p><img alt="ios-horizontal-list" src="/sites/default/files/images/201206/figure-6-3.png" style="width: 528px; height: 329px;" /></p> <p class="figure-caption">图6-3 &nbsp;横向列表</p> <p>看上去很有趣,不过也许你已经注意到了,在这种模式里,屏幕可视区域当中的列表项数量是非常有限的,特别是在竖屏状态下。如果不考虑任何上下文环境,那么这也算不上是很大的问题;但在实际使用当中,如果没办法一次看到很多列表项,那么要对整个列表进行快速浏览的话,用户必须频繁的执行滚屏操作。很显然,这种方式在效率方面存在很大问题。在横屏状态下,情况会相对好些,但仍然不是很理想。</p> <p>让我们继续扩展思路,看看是否还有其他更加合理的差异化解决方案。如果说单列形式的列表无法令人满意,那么如果我们将其中的每一行扩展为一个队列,使整个列表变成网格形式,情况又会如何呢?(见图 6-4)</p> <p><img alt="ios-grid-list" src="/sites/default/files/images/201206/figure-6-4.png" style="width: 522px; height: 327px;" /></p> <p class="figure-caption">图6-4 &nbsp;网格状的列表模式</p> <p>事情开始变得有趣了。在这种模式下,我们可以同时看到更多的列表项,相比于传统的单列纵向列表,这确实是一个不错的改进。但它所带来的弊端也是很明显的,那就是每个列表项的实际尺寸都变小了,这给其中的文本对象造成了很大的局限。不过我们还是可以通过控制文本对象的字号来从一定程度上解决这个问题。</p> <p>在这组小练习当中,我们仅仅对一个简单的列表进行了差异化的思考与扩展性的尝试,就几乎已经彻底改变了这个对象的基本概念及呈现方式。而实际上,对于这个列表来说,我们能做的还远不止这些。接下来,让我们换一个角度,对涉及到列表对象的交互行为进行探索。在iOS当中,我们可以通过上下滚屏来浏览一个典型的单列纵向列表,那么这种方式同样适用于网格状的列表吗?(见图 6-5)</p> <p><img alt="ios-list-scroll" src="/sites/default/files/images/201206/figure-6-5.png" style="width: 518px; height: 320px;" /></p> <p class="figure-caption">图6-5 &nbsp;纵向滚屏的浏览方式应用在两种列表方案中</p> <p>完全没问题。不过必须记得,滚屏浏览的方式虽然适合于我们当前的这个特定的案例,但它未必在所有的情况下都适用。要在某种新的界面对象模型当中使用现有的交互方式,你必须做好充分的评估工作。</p> <p>回到这个例子当中。接下来让我们对这个网格形式的列表进行一些抽象化的分析。标准的iOS单列纵向列表对象通常是支持滚动操作的,而且滚动的方向仅限于y轴上,因为列表项都是纵向排列在同一列当中的。那么对于拥有两个维度的网格状列表来说,滚动的方式能否得到相应的扩展呢?</p> <p><img alt="ios-grid-list-scroll" src="/sites/default/files/images/201206/figure-6-6.png" style="width: 530px; height: 321px;" /></p> <p class="figure-caption">图6-6 &nbsp;多维滚动与行内滚动</p> <p>如图所示,我们可以通过多种方式将滚动行为运用到网格状的列表当中(见图 6-6)。通过这一系列的实例,我们可以看出,基于已有的对象模型及交互方式来构建新的概念其实并不是非常困难的事情。列表的例子只是一个起点,你还可以对很多模型和元素进行差异化的改造。这种设计思路可以帮助我们在产品当中打造各种丰富的交互方式。</p> <h4 id="a10"> 相关问题的解决方案</h4> <p>我们已经大致了解了应该怎样从现有的基本概念出发,来定义全新的交互对象。不过在实际项目当中,我们有可能会在这方面遇到一些潜在的问题,这些问题甚至会导致设计开发工作进入死胡同。在你的设计方案当中,一些高度定制化的交互模型也许很难被准确地实现出来,而另一方面,你也有可能发现它们无法很好地被用在产品的其他地方。面对这些情况,你必须掌握一些最基本的解决方法,才能让自己摆脱困境。</p> <p>我们曾经在<a href="http://beforweb.com/node/81">前一章</a>当中了解了一些能够帮助设计师实现设计方案的相关开发技术。其中,核心动画 (Core Animation)为开发者们提供了一系列强大的工具,用于将高度定制化的动画效果整合到交互元素当中。动画的概念,不仅仅是随便为一些元素添加有趣的视觉效果这么简单;对于交互设计来说,它更是一种用来与用户进行互动沟通的强大工具。</p> <p>在最基础的层面,动画是一种能够使交互对象的某种属性随着时间而发生变化的机制。&ldquo;时间&rdquo;是这个概念当中的核心,它可以帮助我们解决交互设计当中的一些关键性的问题。</p> <p>当你发现交互环境当中的空间过于有限的时候,以时间概念为主导的解决方案往往可以发挥巨大作用。要在狭小的界面当中内呈现大量的信息是很困难的,通常只会出现两种情况,要么是通过缩减字号来提高单位面积当中的内容密度,要么保持字号不变而对内容进行截断处理。这两种方式都是有很大弊端的。高密度的信息很难被用户良好的阅读和理解,而经过截断处理的内容又是不完整的,难以保证信息的准确传达。</p> <p>我们可以通过之前列表练习当中的实例来直观地理解这一点。当我们以网格的形式改造了单列纵向列表之后,如果列表项的标题文字变长,我们就必须对字号进行必要的调整,才能使内容完整地呈现给用户,正如我们可以在下图左侧屏幕当中看到的。反之,如果不缩减字号,只进行截字处理,那么最终的效果就会是下图右侧屏幕所展示的样子:</p> <p><img alt="ios-list-scaled-text" src="/sites/default/files/images/201206/figure-6-7.png" style="width: 519px; height: 325px;" /></p> <p class="figure-caption">图6-7 &nbsp;缩减字号与截断文字的效果对比</p> <p>那么,以时间概念为主导的方案能否帮助我们解决这个问题呢?我们不妨在这里回忆一下,过去那些小屏幕手机在这方面通常是怎么做的,也许我们可以从它们身上找到一些答案。</p> <p><img alt="ios-list-marquee-text" src="/sites/default/files/images/201206/figure-6-8.png" style="width: 526px; height: 336px;" /></p> <p class="figure-caption">图6-8 &nbsp;将被截断的文字以跑马灯的形式完整的呈现出来</p> <p>跑马灯效果在过去的那些设备当中是非常流行的。在这种解决方案里,&ldquo;时间&rdquo;扮演着重要的角色,因为文字会以动画的方式逐步进入可视区域当中,随着文字从右向左的行进,用户最终会阅读到完整的信息(见图 6-8)。在这个实例当中,&ldquo;时间&rdquo;作为一个额外的维度,可以在某种程度上帮助我们解决问题。</p> <p>这种方式确实适用于一些特定的情况,但出于某些原因,它依然无法彻底解决网格布局当中文字空间限制问题。不妨设想,当这个界面加载完成的时候,每一个格子当中的标题文字都在滚动,这种高度密集的文字动画效果对于用户来说是难以接受的。你很难将注意力集中在某个单独的格子当中,而且必须对时间进行准确的把握,才能在最短的时间内,也就是一个循环周期当中完整的阅读一串文字,否则你所能看到的仍然是一些被截断的内容。我们已经在解决方案里加入了以时间概念为主导的动画效果,那么这个模型当中还缺少哪些关键元素呢?答案就是用户控制。</p> <p>用户控制的概念是很显而易见的。当前话题的重点在于怎样创建交互设计解决方案,而所谓&ldquo;交互&rdquo;,自然离不开来自用户的某种控制行为。不过在这里,我们需要从&ldquo;状态&rdquo;的角度来思考用户控制这个概念。</p> <p>对于交互模型来说,&ldquo;状态&rdquo;是一个非常重要的概念,它同样可以帮助我们解决在设计过程中遇到的一些棘手的问题。与&ldquo;时间&rdquo;类似,以状态概念为主导的解决方案通常可以完成那些对于静态方案来说几乎是不可能实现的任务。从某种程度上讲,它们都可以从另外一个维度上改变交互模型当中的界面元素及信息内容。</p> <p>状态究竟是什么呢?它所指代的是当某个交互对象正在被用户观察或是被某种控制机制管理的时候所体现出来的属性和特征。</p> <p>到目前为止,我们所创建出的网格列表交互模型只拥有唯一的一种状态。也就是说,它只有一个形态,目前还不会发生变化。如果我们可以控制它的状态,在必要的时候对交互模型的结构进行调整,那么就可以真正地解决掉我们之前所遇到的问题。</p> <p>现在可以将状态的概念与用户控制行为联系起来了。前文当中之所以会提到要从&ldquo;状态&rdquo;的角度来思考用户控制,是因为我们可以通过用户输入机制来改变界面交互对象的状态。</p> <p>那么,我们应该怎样从用户控制与状态调整的角度来解决网格列表交互模型当中的问题呢?当前的状况是,我们认为网格状的列表非常符合差异化的交互体验设计思路,而且在这种模式下,用户可以同时看到很多列表项;但同时,每个列表项的尺寸都变小了,狭小的空间无法完整地将其中的文本对象呈现出来。我们试着通过以时间概念为主导的方案,即跑马灯的动画效果来解决这个问题。虽然这种方法确实使文字内容摆脱了空间的限制,但从界面整体的角度来看,动画效果的密度过大,视觉体验非常糟糕。那么接下来,就让我们一同看一看,当用户控制及状态的概念被整合进当前的交互模型之后,事情又会发生怎样的变化。</p> <p><img alt="ios-list-swipe-to-reveal" src="/sites/default/files/images/201206/figure-6-9.png" style="width: 517px; height: 342px;" /></p> <p class="figure-caption">图6-9 &nbsp;通过轻扫操作,将被遮挡住的文字拖出</p> <p>如图所示(图 6-9),我们可以保持格子当中的文字静止不动,由用户通过轻扫操作将所需的文字对象拖出被遮挡的区域。这种方式将直接操纵的理念融入到了交互模型当中,我们就不必让用户面对着充满文字动画效果的界面了。他们可以在觉得需要的时候对任意一个格子进行交互操作,浏览其中的完整内容。</p> <p>在这种解决方案当中,我们为文本对象赋予了一定的交互行为,这是相对简单的一种方式。我们还可以扩展一下思路,去尝试一些更具创意的方式。除了文本对象以外,我们其实还可以通过用户的控制行为使整个格子单元的状态发生变化。</p> <p><img alt="ios-grid-pinch-expand" src="/sites/default/files/images/201206/figure-6-10.png" style="width: 554px; height: 290px;" /></p> <p class="figure-caption">图6-10 &nbsp;通过双指张开的操作来扩展格子,以获取完整信息;结束操作后格子自动收回</p> <p>我们可以让用户通过双指张开的操作将网格单元进行扩展,从而获取完整的文字信息;当手指离开屏幕之后,格子便会自动恢复到默认的状态。只需要一个简单的手势,我们就可以人为地创造出更大的空间,这使得整个交互模型具有了高度的动态性 (见图 6-10)。通过这种方式,不仅文字内容变得完整可读,而且由于整个格子的空间都被扩大,我们甚至可以在其中加入更多有价值的信息。</p> <p>曾经一个最普通的单列纵向列表,到目前俨然已经成为在用户体验方面具有高度潜力的交互模型了。交互模型在这方面所体现出的扩展性具有很高的实际运用价值。那么,除了能够在某种特定的需求上下文当中提升对象的交互体验以外,这种扩展性如何帮助我们实现更高层次的设计目标呢?</p> <p>首先我们需要知道一点,在打造交互模型的过程中,我们不能对其进行子虚乌有的构想。交互模型永远是一个完整系统当中的一部分,产品最终带给用户的交互体验必然是一种整体效应的体现。如果你相信设计方案当中的某个交互模型所具有的强健性足以驱动一款产品,那么你考虑清楚应该以怎样的方式将它整合到产品的其它地方,才能在整体层面上实现最佳的体验效应。这也正是我们在前文当中提到交互模型的弹性与扩展性时所要表达的意思。如果你所打造的各种交互模型确实只能适用于各自的功能情景,而无法很好的运用在产品当中的其他地方,那么你至少要在头脑中建立一个更庞大完整的产品级别的交互模型,其中包含着局部当中的各个独立的交互模型;这个大模型必须为用户提供清晰并且一致的交互体验。然而另一方面,一个拥有太多独特交互模型的应用最终只会导致用户产生迷惑和挫败的感觉,这更是完全地背离了我们的初衷。在这种情况下,其实谈不上任何模型的概念了,整个产品只是一堆怪异交互模式的组合。</p> <p>要避免这种情况的发生,我们在设计工作中必须始终站在全局的角度对每一个交互模型的适应能力进行考虑。这是一种系统化的设计思路,你需要让自己的思维模式上升到抽象的层面,才能对某个交互模型在上下文环境当中的适应能力进行充分地认知。不要只看某个交互模型能够解决眼下的哪些局部问题,而是要判断它所勾画出的交互模式能否在应用中的其他地方同样适用,有没有可能成为某种具有普遍适用性的多用途交互行为模板。</p> <p>一款应用产品当中使用到的交互类型越少,其交互模型的健壮性就越强。少即是多的原则在移动应用的设计工作当中是绝对适用的。要以降低用户的认知负荷为目标,尽可能使用那些用户已经在你的产品中接触过并理解了的交互模式。</p> <p>当然,你也不必为了减少交互类型而将某些模式强加在那些确实不适用的地方。简单一致的交互方式固然是我们所追求的,但同时,你也要了解产品中的哪些地方的确需要相对独特的解决方案,否则在这些地方尝试通过具有普遍性的交互模式进行处理的话只能是浪费时间。可以说,如果某种交互方案在你看来并不是非常明确和易用的,那么在用户看来多半也会如此。</p> <p>也许你已经注意到了,我们一直在不同的地方反复使用着&ldquo;交互&rdquo;、&ldquo;行为&rdquo;和&ldquo;模式&rdquo;这三个概念。在本书所讨论的话题当中,这些概念各自包含哪些含义,它们之间又具有怎样的关联呢?我们在这里简要地了解一下:</p> <ul> <li> <strong>交互</strong>:单元级的人机互动行为,例如点击一个按钮或是轻扫屏幕当中的某个区域。它的本质是用户在系统的某种提示下所做出的输入操作。</li> <li> <strong>行为</strong>:包括用户的输入操作以及相应的系统回馈方式。它是&ldquo;交互&rdquo;的一种整体化可感知效应,由系统环境呈现出来。</li> <li> <strong>模式</strong>:若干&ldquo;行为&rdquo;在某种特定的组织方式下共同作用所产生的累加效应。</li> </ul> <p>你可以在其中任意一个层面上对交互模型的一致性进行规划。你可以从宏观的角度出发,首先思考具有全局性的交互模式,也可以从细处入手,定义那些相对独立的局部交互模型,并对它们的交互体验一致性进行持续的考量。你在交互模型相关工作当中所做的规划,将决定着最终的产品能否以正确的方式解决某些特定的需求。</p> <p>本章未完待续,<a href="http://weibo.com/c7210">博主C7210</a>出去溜达几日先。</p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了如何突破基础、打破常规,从而提供“超赞”的用户体验。通过学习,读者将会学到如何使用标准控件,如何创建非标准控件和具备较高影响力的用户交互,以实现真正夺人眼球的应用设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/84" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模型</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/106" typeof="skos:Concept" property="rdfs:label skos:prefLabel">动画效果</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/107" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户控制</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/87" typeof="skos:Concept" property="rdfs:label skos:prefLabel">差异化</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 10 Jun 2012 03:41:21 +0000 C7210 86 at http://www.beforweb.com http://www.beforweb.com/node/86#comments iOS Wow体验 - 第三章 - 用户体验的差异化策略 http://www.beforweb.com/node/71 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-ios-iphone-ipad-wow-factor-app-ux-design-techniques-3-b.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第三章译文精选,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/69">Wow体验 - 第二章 - iOS用户体验解析(2)</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>在前两章当中,我们从细节层面对iOS用户体验的本质进行了分析,包括<a href="http://beforweb.com/node/61">对iOS用户界面设计规范的概览</a>,以及<a href="http://beforweb.com/node/66">对其用户体验构成要素的解析</a>。界面设计规范体现了苹果对于iOS应用在设计与开发质量方面的重视,使第三方开发者们必须努力满足用户的高期望高要求。</p> <p>不过,在某些情况下,我们的设计方案是否可以与规范的要求有所背离呢?如果可以,那么走多远才算合适?本书的主要目的之一,就是帮助你掌握&ldquo;差异化&rdquo;的方法原则,做出正确的设计决策,让你的应用可以鹤立鸡群,成为让用户惊叹的成功产品。</p> <p>让我们来做一个简单的设想,假如你现在需要创建一款iPhone或iPad应用,你是否会对自己说:&ldquo;嘿,我现在有个很棒的想法!我们可以把它打造成我们的竞争对手所做的那个样子!&rdquo;? 当然不会。站在这个角度进行思考,我们就会明白,差异化的原则是商业模式、市场规划和用户体验策略等方面的重要组成部分<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3 id="a1"> 关于体验与期望的变革</h3> <p>我们必须意识到,自己即将进入的是一个高度竞争化的市场环境;能让自己的应用在众多同类产品中被用户发现,就已经是不小的成就了。即使用户已经注意到你的产品,过不了多久,他们也会将目光投向其他新问世的应用。随着技术的进步以及体验模式的不断革新,这种情况还会愈演愈烈。</p> <p>在过去的几年中,我们看到了一些全新的交互方式被迅速地普及,基于这些交互理念的产品很快就成为了市场中的主流。iPhone和iPad就是很好的例子。在它们问世之前,公众对于电容触摸屏技术并没有广泛的认知与需求。没有需求,就没有将新技术转化为实际产品的推动力,我们最多只能看到一些实验性的原型,或是市场极其有限的商业化产品。而iPhone进入市场之后,立刻展示了电容触摸屏技术与简单易用的交互模式相结合所产生的强大力量,多点触摸的操作方式从一开始就使消费者为之震撼。四年多的时间过去了,该技术以及与之相关的交互方式依然保持着绝对流行的势头。</p> <p>另一个经典的例子是任天堂的Wii以及配套的游戏控制器(通常被叫作&ldquo;WiiMote&rdquo;)。通过对加速计等感应技术的运用,任天堂创造了一种全新的游戏玩法,使得Wii在销量上迅速超越了当时市场上的其他游戏主机。包括索尼和微软在内的竞争对手们不得不立刻着手研发类似的技术和产品,以应对消费者在对于游戏方式的期望和需求上所产生的变化。</p> <p><img alt="ios-application-User-Experience-Differentiation-and-Strategy-nintendo-wii" src="/sites/default/files/images/201204/ios-application-User-Experience-Differentiation-and-Strategy-nintendo-wii.jpg" style="width: 500px; height: 500px;" /></p> <p>这些案例中的产品有一个共同之处,那就是它们都极大的改变了当时的大众市场对于人机交互方式的认知与期望。而这些变化得以产生的主要驱动力,就是电容触摸屏和加速计等众多新技术的出现及运用。其中,一些技术本身就可以对产品的设计和交互方式造成深远的影响,而另外一些则需要与其他现有的技术结合起来,共同制造出全新的体验类型。消费者们开始期盼着产品能够不断地带给他们全新的体验;这方面的需求能否被满足,会在很大程度上影响他们的购买决策。</p> <p>在数码产品(消费性电子产品、软件等)市场中,无论是我们的设计理念与开发技术,还是消费者自身的需求与期望,一场关于&ldquo;体验&rdquo;的变革正在迅速而全方位的展开。从本质上讲,这就是一个互相推动和促进的循环过程。随着各种新设备的推出,迷人并且独特的交互方式会不断地涌现,而用户在这方面的期望也会持续地提高。从个人角度讲,我希望这种趋势能够逐渐趋于缓和,但是鉴于当前的社会文化依然属于消费者导向型,我们不妨让这个循环再继续保持一段时间;底线是,不断推出的新技术与交互方式必须是消费者所真正需要的,并且仍然有助于实现不同层面的市场差异化战略目标。</p> <h3 id="a2"> 可用性与用户的渴望</h3> <p>随着大环境的不断发展,我们对于交互设计方案的评判标准也会发生变化。曾经,交互方案的成功与否是由它在可用性方面的表现所衡量的,特别是在数码技术和相关产品刚刚进入大众市场的时候,这种判断依据是非常合理的。人们在现实中的行为习惯是根深蒂固的,怎样有效地引导他们去适应高度抽象化的数码虚拟环境,这在当时是一个非常有挑战性的课题。然而在1980至2000年这20年的时间里,消费市场中的技术革新程度是非常巨大的,数码产品在用户体验方面的提升也反映出了科技水平的进步,但在当时,&ldquo;用户体验&rdquo;的概念仍在被&ldquo;可用性&rdquo;这个词所片面的代替着。</p> <p>与现在相比,那时的&ldquo;可用性&rdquo;还属于一种工程技术方面的理念;一个系统的可用性,是通过对多种不同的设计与开发技术进行比较之后,以量化的方式来确定的。这其实不坏,但随着数码产品市场在本世纪初的爆发性增长,竞争变得愈发激烈,各厂商需要探索新的方法来确保自己的产品在市场中占有优势。这种局面也促使&ldquo;用户体验&rdquo;的概念向着更加综合全面的角度进行发展,并逐渐融入到产品设计的方方面面。完整意义上的&ldquo;用户体验&rdquo;应该包括可用性、视觉外观、可感知性、与用户的情感化接触等诸多方面。</p> <h4 id="a3"> 用户的渴望</h4> <p>如今,用户体验的观念意识已经被良好的确立起来,我们不会再片面的将注意力放在&ldquo;可用性&rdquo;这一个方面上了。可用性只是用户体验这个整体概念中最基础的组成要素,我们必须假设市场中那些竞争对手的产品在功能上都具有良好的可用性,在此基础上,思考更加适合自己产品的用户体验提升策略,让你的应用更加符合用户的渴望。为此,我们需要对以下几个方面的要点有清楚的认知:</p> <ul> <li> 了解用户习惯的发展与变化,包括他们对当前的主流操作方式的期望与感知。</li> <li> 与其他同类产品相比,你的应用可以提供哪些不同的用户体验?</li> <li> 只有唤起用户在某些方面的渴望,你的应用才有可能被他们真正的接纳。</li> <li> 在如今的市场环境下,要使应用能够唤起用户的渴望,满足他们的诉求,我们也许需要采用一些传统方式以外的解决方案。</li> </ul> <div class="embed"><article id="node-286" class="node node-related-books" about="/node/286" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="放飞App:移动产品经理实战指南" src="http://beforweb.com/sites/default/files/images/products/31.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">放飞App:移动产品经理实战指南</a></h4> <p><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">本书讲述如何构建出能在Apple Store中引人注目的iPhone和iPad应用。从全局介绍这一构建过程中的每一步,包括预算成本、挑选开发人员并组织最佳团队、搭建工作流程、推销和改进自己的应用产品...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a4"> 用户体验策略</h3> <p>了解你的设计决策所处的上下文环境是很重要的,但这只是整个用户体验策略规划的一个开始。完整而明确的产品体验策略可以让你的公司或团队的视野更加清晰,目标计划更加合理。在初期,对产品体验策略的理解和定义,要远比具体的设计细节问题重要的多。好的策略更像是一种指导方法,它能够为接下来的设计流程提供一个坚实的框架,指导你做出正确的设计决策。科技水平、市场需求、用户渴望等方面的因素会始终处于一种不断变化的状态当中,我们必须有足够清晰的规划方案来应对这些变化。</p> <p>一套有效的用户体验策略会为我们带来诸多好处:</p> <ul> <li> 它可以使参与设计开发的各个团队在产品决策层面保持战略统一。</li> <li> 它可以持续的帮助团队将注意力放在用户身上,以确保产品的用户满意度。</li> <li> 它能使产品在其生命周期内保持用户体验的一致性,并在需要的时候使体验方式得到改变和发展,以适应不断变化的用户期望。</li> <li> 它可以有效的提升产品质量,降低部署过程中的风险。</li> </ul> <h4 id="a5"> 为自己的产品制定用户体验策略</h4> <p>用户体验策略应该包括哪些方面的内容呢?宏观的说,我们需要确立一系列目标,这些目标所面向的是一个或几个特定的用户群体。我们还应该知道,为了实现这些目标,自己的应用应该在哪些方面提供正确和良好的体验。在这些目标的指引下,我们可以为产品赋予某些特定的功能,从而使用户更好地感受到产品的使用价值;这些功能应该满足用户的典型需求,并符合他们的日常习惯与生活风格。</p> <p>一套好的策略必须对目标、用户、市场状况等方面的因素进行定期的重估,以提供成熟的、经得起时间考验的用户体验模式。如果你的技术团队正在进行敏捷开发,那么这种设计思想将会被很容易的整合进去,流程中每个批次的产品订单都可以加入用户体验方面的修正。</p> <p>用户体验不是一种可以孤立存在的事物,我们对于它的思考不能与应用产品本身相脱离。要站在用户的角度,对应用在产品生命周期中的每个环节都保持敏感,从怎样通过搜索引擎、应用商店或是产品页面让用户发现你的应用,到安装与升级的相关流程,甚至到最终以怎样的方式使产品光荣下岗。</p> <p>另外,对于用来发布应用产品的平台环境,我们也需要保持一定的关注;在本书中,我们所指的就是苹果的应用商店。虽然我们无法掌控应用商店本身的工作流程,但是对于产品介绍页面中的内容,以及其他细节方面的呈现方式,我们还是有一定的控制权的。要充分运用苹果在这方面赋予我们的权利,寻找机会,尽最大可能的去推动用户体验策略的落实。首先,我们可以在应用图标的设计上花些心思,一方面要让它看上去足够诱人,另一方面还要使图标所表达的内容与应用本身的功能具有一定的关联。另外,对于用来展示在介绍页面中的应用截屏图片的选择也是很重要的,所选用的图片应该能够体现产品在功能及交互方式上的特色。对于介绍页面中的文案内容,要仔细斟酌字里行间的措辞方式和语气口吻。</p> <h4 id="a6"> 对差异化的思考</h4> <p>&ldquo;差异化&rdquo;的概念可以被看作一个连续统一体。你可以对&ldquo;连续统一体&rdquo;一词做出不同的理解,但它的本质应该是位于两个端点之间的、由各种可能性所组成的空间范畴,其中一个端点代表&ldquo;相似&rdquo;,另一个端点代表&ldquo;分化&rdquo;(见图 3-1)。我们可以在这两个抽象概念所定义的框架空间中确定自己的产品所处的位置。其中,&ldquo;相似&rdquo;所代表的是更加传统与常规的设计开发思路;在这里,产品的模仿性更强,相应的风险也更低。而标尺另一端的&ldquo;分化&rdquo;则代表着非传统非常规的设计思路与方式,相应的产品具有更强的创新性,但同时也具有较高的市场风险。</p> <p><a href="/sites/default/files/images/201204/ios-application-User-Experience-Differentiation-and-Strategy-Continuum.png" rel="lightbox"><img alt="ios-application-User-Experience-Differentiation-and-Strategy-Continuum" src="/sites/default/files/images/201204/ios-application-User-Experience-Differentiation-and-Strategy-Continuum.png" style="width: 500px; height: 141px;" /></a></p> <p class="figure-caption">图 3-1</p> <p>这种思路同样可以被运用到涉及用户体验的其他方面。很多时候,我们不需要或是无法在产品功能上做出很大程度的创新;在这种情况下,就要把&ldquo;差异化&rdquo;的重点放在交互体验等方面。试着将交互模型作为一个整体放到上面的标尺体系中,根据产品的用户体验目标,权衡出一个最理想的定位,为接下来的具体交互设计工作提供方向。</p> <h4 id="a7"> 了解你的用户</h4> <p>产品的设计开发走向,在很大程度上取决于你对用户的认知程度,包括老用户以及新产品所面向的潜在用户。对于他们,你了解的越多,就越清楚应该怎样对用户体验策略中的各种细节进行把握。</p> <p>在着手进行实际的设计和开发工作之前,做好基础性的用户研究是极其必要的。通常,我们可以从定义用户角色入手,展开这项工作。基于你对产品的目标用户在期望与诉求方面的假想,创造一个虚拟的用户角色,并为他赋予一些基本信息,包括年龄、性别、收入水平、工作职能、家庭情况等。而对于生活习惯、兴趣爱好、社交行为等方面的信息,我们定义的越完整,这个角色就越真实,越具有代表性。用户角色还应该具有动机与目标,在这方面,我们最好通过一些具体的用例将其体现出来。如果觉得这一系列凭空捏造的方式有些困难,那么可以试着从你认识的人身上汲取灵感,将他作为用户角色的蓝本;不必将这个人复制的非常精确,因为你随时都可以对细节进行润色和增补,我们的主要目的是创造一个能够在一些关键方面充分代表产品目标用户的虚拟角色。</p> <p>你创建的用户角色应该能够准确的代表目标用户的各方面特征。如果你对这个角色不是很满意,或是觉得赋予给他的信息还不够完整,那么你也许需要对他进行一定程度的验证。验证的方法有很多,你可以采用一些&ldquo;非正规&rdquo;的做法,比如叫上你的团队成员一起对这个角色进行评估,补充有可能遗漏掉的信息。而在相对正规的验证方式中,你需要募集一些具有代表性的真实用户个体,对他们进行调研访谈,并将整个过程记录下来留作分析。访谈的话题一定要有针对性,通过问答所获取到的反馈信息应该有助于你对之前创造的用户角色的准确性进行判断。很多时候,你会发现,自己确实可以从这些真实用户身上了解到很多之前未曾留意到的重要信息。</p> <p>接下来,我们可以通过已经创建好的用户角色,对应用的各种需求用例进行建模。将用户角色放到某些假想的需求情景中,控制他完成一系列的任务;这种方式就像角色扮演游戏,使我们能够站在目标用户的角度,对仍处于概念阶段的产品进行&ldquo;实际的&rdquo;体验。为了使这项工作更加卓有成效,你要确保用户角色的思维与行为方式符合你在创建角色的过程中对这个&ldquo;人&rdquo;的定义。这并非一件易事,如果对用户角色没有全面而充分的了解,你就很难弄清楚怎样的功能和体验才是目标用户所真正需要的。另外,最好将各种假想的需求情景详细地记录到文档中;可以采用叙事短文的形式,也可以通过可视化的方式描绘在故事板上。</p> <h4 id="a8"> 研究竞争对手的产品</h4> <p>对用户进行了基础性的研究之后,我们需要将注意力转向市场,了解一下竞争对手们都做了些什么。对竞争对手的产品进行评估是一件相对容易的事情,因为你已经对自己产品的概念有了一定程度的认知,这样就不难与同类应用进行比较,对它们的优劣势进行判断。当然,这一切的前提是你必须知道所谓的竞争对手究竟有哪些,否则你首先需要花点时间在这方面做些功课。最简单的方法进入苹果的应用商店,使用恰当的关键词进行搜索,然后在搜索结果中对那些相关的应用进行考察。同类竞争对手的数量取决于你自己产品的方向与特性,通常,你并不需要对全部的同类应用进行分析和评估,只挑选那些最优秀的最具代表性的就好。在应用商店的搜索结果中,按照星级评价对搜索结果进行筛选排序,找出用户评价最高的几个应用作为评估对象;通常三到五个就足够了。</p> <p>知道了竞争对手都有哪些之后,就该对这些同类应用进行研究了。在这个过程中,记录下你使用它们完成假想目标任务时的切身感受。有些应用的功能非常强大,而另外一些则侧重于提供高质量的交互体验,无论怎样,不要放过任何对于你自己的产品有重要参考价值的细节,详细记录下你观察到的那些正面与负面的关键要素。积累了一定数量的观察报告之后,可以将它们按照不同的主题进行分类,留作进一步分析,并在自己产品的规划与设计中加以借鉴。</p> <h4 id="a9"> 引领市场</h4> <p>市场中有哪些同类应用,它们的流行程度如何,所有这些都会影响着用户对于你的产品的体验感知。你在差异化和独特的交互方式等方面所做的努力,有可能会因为竞争对手推出了一款能够带来类似体验的产品而很快的变为无用功。类似这样的状况有些复杂和棘手,虽然我们可以在相关方面做好精确而周密的计划工作,以尽量避免这类情况的发生,但这始终是一种被动的姿态与方式。有没有更加主动的方法有助于解决这样的问题呢?一套有效的用户体验策略,对于市场定位以及怎样满足用户的体验需求等方面的规划,应该是面向未来的。与其费尽心思去权衡各种外在因素,不如努力成为市场中的领跑者,通过具有前瞻性的独特功能与体验,开创新的时代。</p> <p>要达到这样的目标,成熟而富有创造力的团队自然是不可或缺的;同时,产品及用户体验策略中也必须清晰的体现出团队领导者的判断力与决策思路。我们可以通过用户测试来判断自己的设计方案是否符合产品策略中所规划的目标方向;对于以&ldquo;引领市场&rdquo;为目标的产品来说,最好选择那些自认为在人群中很具有很高影响力的用户作为测试对象,因为这类人通常更乐于创造流行,而非附庸某种趋势,他们认为自己是文化的创造者与监管者。将产品的概念原型拿给他们进行测试与交流,会在很大程度上避免主流市场中的传统意识观念对产品走向的束缚<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-285" class="node node-related-books" about="/node/285" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动互联:用户体验设计指南" src="http://beforweb.com/sites/default/files/images/products/30.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动互联:用户体验设计指南</a></h4> <p><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书阐述如何设计出独一无二的移动体验,展示移动用户体验最重要的要素,介绍各种设计框架和实践。本书首先介绍移动用户体验的关键特点,接着介绍五种广泛使用的移动用户体验模式,然后介绍移动体验设计的设计实践、原型方法以及设计指南,最后讨论移动体验的前沿设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a10"> 第三章总结</h3> <p>在过去的20多年里,产品的设计开发理念以及用户自身都发生了巨大的变化。用户更乐于使用与众不同的、具有创新色彩的功能和界面,而且往往会全心全意的拥抱那些在用户体验方面被用心雕琢过的产品。</p> <p>过去,可用性方面的因素会在很大程度上决定一款交互设计方案的成功与否。在那个时候,可用性是一个工程技术方面的理念,它旨在减少用户的输入次数、提升操作效率,进而达到改善产品的目的。随着市场的发展,要保证产品在市场中具有足够的竞争能力,我们必须对用户体验进行更加综合与全面的理解,使产品在可用性、视觉外观、可感知性、与用户的情感化接触等诸多方面都能满足用户的需求与渴望。产品的可用性固然是重要的,但能否在综合体验的层面上使用户的渴望得到满足,将是决定一个应用产品能否成功的关键因素。</p> <p>完整而明确的用户体验策略可以帮助我们在产品设计的过程中做出正确的决策与判断。</p> <ul> <li> 它可以使参与设计开发的各个团队在产品决策层面保持战略统一。</li> <li> 它可以持续的帮助团队将注意力放在用户身上,以确保产品的用户满意度。</li> <li> 它能使产品在其生命周期内保持用户体验的一致性,并在需要的时候使体验方式得到改变和发展,以适应不断变化的用户期望。</li> <li> 它可以有效的提升产品质量,降低部署过程中的风险。</li> </ul> <p>用户体验策略通常由以下几个方面组成:</p> <ul> <li> 定义具有代表性的、便于识别的用户角色,为他们赋予必要的信息,并使其具有明确的动机与目标。</li> <li> 站在用户的角度,理解他们对于产品价值的感知方式与需求渴望,在此基础上规划产品的功能及体验方式。</li> <li> 构想产品的需求用例,规划功能流程,理解它们与目标用户的行为特征、动机、目标等方面的关联性。</li> <li> 规划一套成熟的、经得起时间考验的用户体验模式。除了常规的功能路线图以外,更要对产品的核心交互模型的发展做好计划。</li> <li> 以更加广阔的视角来看待用户体验与产品本身的统一关联性,尤其是对于应用在产品生命周期内的各个环节,以及产品家族成员之间的整合关系等方面。</li> <li> 对竞争对手的产品做好充分的调研与分析,在自己产品的规划与设计中加以借鉴。</li> </ul> <p>这些方法策略可以为你的产品设计思路提供正确的指导方向,使你逐渐明确应该怎样去塑造最适合自己产品的、能够让用户为之惊叹的用户体验模式。</p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动设计" src="http://beforweb.com/sites/default/files/images/products/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动设计</a></h4> <p><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者从人-机-环的角度出发来阐述移动应用的设计,并建立了移动应用设计的基本原则;然后,根据移动端的情境、移动设备的特征,以及触摸的交互方式,总结了移动导航和框架设计的主要形式,并给出了导航设计的原则和思路...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/76" typeof="skos:Concept" property="rdfs:label skos:prefLabel">App Store</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/87" typeof="skos:Concept" property="rdfs:label skos:prefLabel">差异化</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户研究</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/88" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户角色</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Tue, 17 Apr 2012 15:55:45 +0000 C7210 71 at http://www.beforweb.com http://www.beforweb.com/node/71#comments