Be For Web - 可用性 http://www.beforweb.com/taxonomy/term/55 en 极简主义意味着全部吗? http://www.beforweb.com/node/958 <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/icon-clean-simple-web-design-element-tips-techniques.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>编者按:把自己藏在编者按里还挺有意思,像模像样的&ldquo;编者&rdquo;两个字。这里想发个捂脸笑哭的表情。是的既然写编者按了,则又是一篇来自合作作者的文章 - 不是转载或投稿,是&ldquo;合作作者&rdquo;。我就不多说了,把舞台交出 - 今天的译文来自SL,和之前一篇&ldquo;<a href="http://beforweb.com/node/953" target="_blank">模糊设计说</a>&rdquo;的作者Shuya一样是我在鹅厂时的前同事,很棒的交互设计师。&nbsp; - C7210</p> </div> <p>首先,交代一些背景:</p> <p>我正在读一本由Brian Christian和Tom Griffiths合著的书&mdash;&mdash;《指导生活的算法》。书的内容旨在展示计算机算法是如何在日常生活中发挥重要作用的,例如:在决定租哪间公寓之前需要考虑多少备选项(顺便说一下,答案是你计划去实地参观的公寓总数的37%);或者如何快速配对混合在洗衣机里的袜子。</p> <p>这是一本有趣的、信息量丰富且极具启发性的书,绝对值得一读,特别是从事产品设计、行为设计、用户体验设计&hellip;&hellip;或是任何类型设计的设计师们。</p> <!--break--><h3> 缓存(Caching)</h3> <p>当我读到&ldquo;缓存算法&rdquo;这部分内容的时候,对&ldquo;可用性&rdquo;、&ldquo;设计&rdquo;以及它们与&ldquo;极简化&rdquo;(Minimization)之间的关联产生了一系列想法。</p> <p>简单来讲,&ldquo;缓存&rdquo;是指将(超大数量的)事物通过层级结构组织起来,以便我们始终能够以最小的成本找到所需的信息。举例来说,这就像是你将最近所学相关的书籍放在书桌上,而将其余的放在书架上。对于计算机来说,书桌相当于缓存,书架则是内存。</p> <p>书的第88页引用了 Laszlo Belady 1966年发表的论文中的一句话,这篇论文被誉为近15年来计算机科学领域最重要的文章之一。</p> <p>Belady 写道:</p> <blockquote><p>&ldquo;缓存管理的目的,是将由于在缓存中无法找到所需内容而转去更慢的内存中进行查找的次数将至最低。&rdquo;</p> </blockquote> <p>客观来讲,当谈论起极简化的重要性时,我会想起我们在定义一款产品的可用性时所遇到的一些问题。</p> <h3> 可用性意味着极简化吗?</h3> <p>极简化本质上与数字有关,而数字本身是客观的(你如何理解它们完全是另一回事,在这一点上《指导生活的算法》再次变得非常有帮助)。所以,与其笼统地谈论产品可用性的问题,也许我们更应该首先对&ldquo;要简化哪些东西&rdquo;进行明确地定义。</p> <p><img alt="" src="/sites/default/files/images/201803-5/0_TcZegedjex-xSAkf.jpg" style="width: 600px; height: 375px;" /></p> <p class="figure-caption">日本人是终极的极简主义者</p> <p>由此我开始思考所有那些我们为了最大限度地提高可用性而简化了的东西:完成一个任务花费的时间,用户遇到的报错数量(防错原理 *1),表单字段的数量,完成订单所需的步骤数等等。然后我列出了以下联想:</p> <ul> <li> 更快(极简化时间)的页面转化率更高。</li> <li> 留白(极简化内容密度)感觉更好。</li> <li> 少即是多(极简化任何事都更好)。</li> <li> 为什么斯堪的纳维亚人更快乐而日本人活得更久(极简主义的生活和饮食)。</li> <li> 做到简单(极简的概念、想法、产品等)是困难的,因为它非常有价值。</li> <li> 极简化认知负荷对产品的可用性至关重要。</li> <li> 极简主义是包豪斯成功的一个重要因素。</li> <li> 语音交互(Siri, Google Now, Alexa 等)在 VR/AR(至少在初期)场景中具有优势,因为它们的交互成本更低(极简化成本)。</li> </ul> <p>正如你所见,这只是一系列想法的罗列,并没有经过深思熟虑;不过,我觉得这些想法至少表明了可用性与极简化的深度交织。</p> <h3> 设计就是做到极简化吗?并不是。</h3> <p>为什么呢?因为设计是可以解决问题的,而极简主义并不总能解决手头的问题。</p> <p><strong>证据1</strong>:当事物的耗时比我们预期的要短时,反而会导致我们失去对它的信任或者降低感知到的价值。比如这条 Hacker News 的新闻 *2以及引发了这条新闻的 Dan Ariely 的视频 *3。</p> <p><strong>证据2</strong>:要求同时留下姓名和邮箱地址比只要求留邮箱地址的转化率更高。(我找不到在哪里读到这一点了,也许是Nick Kolenda 或者 CXL 博客。)原因是什么?这背后最主要的驱动力就是 Cialdini提出的一致性原则*4。输入自己的名字是最简单的任务,所以这不算什么。相比于仅需填写邮箱,我们在先输入名字之后,会在不经意间更有动力去输入邮箱,进而完成转化。</p> <p>综上,我关于可用性、极简主义和设计的观点是:</p> <p>极简主义是提升可用性的关键。然而,对于&ldquo;设计&rdquo;&mdash;&mdash;这一我们称之为伟大的、复杂的、时而令人恐慌但又充满乐趣的事物,可用性仅仅是其诸多组成要素之一。</p> <p><span style="color:#a9a9a9;">英文原文:https://uxdesign.cc/is-minimalism-everything-bbdbfe8dac15,作者:Akar Sumse</span></p> <p>&nbsp;</p> <p class="rtecenter" style="text-align: center;"><img alt="" src="/sites/default/files/images/s/Avatar-guess.png" style="width: 140px; height: 140px; border: none;" /></p> <p class="rtecenter" style="text-align: center;"><strong>SL</strong></p> <p class="rtecenter" style="text-align: center;">&lceil; 习惯旁观和自言自语的设计师,涉猎广泛不挑食,打怪升级中 :P &rfloor;</p> <p><span style="color:#a9a9a9;">*1<br /> 防错原理:Error Prevention Principle<br /> https://www.nngroup.com/articles/slips/<br /> https://www.nngroup.com/articles/ten-usability-heuristics/</span></p> <p><span style="color:#a9a9a9;">*2<br /> Link:https://news.ycombinator.com/item?id=2007385<br /> 锁匠们因为开锁太快反而小费变少甚至收到更多关于价格的抱怨。</span></p> <p><span style="color:#a9a9a9;">Hacker News 是一家关于计算机黑客和创业公司的社会化新闻网站,由保罗&middot;格雷厄姆的创业孵化器Y Combinator 创建。&mdash;&mdash;维基百科</span></p> <p><span style="color:#a9a9a9;">*3<br /> Dan Ariely 的视频: http://danariely.com/2010/12/15/locksmiths/</span></p> <p><span style="color:#a9a9a9;">*4<br /> 一致性原则:https://www.referralcandy.com/blog/persuasion-marketing-examples/</span></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></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/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel">简约设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Tue, 27 Mar 2018 08:52:19 +0000 C7210 958 at http://www.beforweb.com http://www.beforweb.com/node/958#comments “简洁”究竟意味着什么? http://www.beforweb.com/node/394 <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-clean-simple-web-design-element-tips-techniques.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周末两天都没有太阳出来,整个一周就像是白过了,也不能在博客里写&ldquo;阳光明媚的周末&rdquo;一类的了,人生的意义在哪里啊。</p> <p>于是我把电视打开并放着阿拉蕾,屋子里就好像洒满了阳光,像是个好时代。上周花了不少时间在医院,一周下来就感觉没做出什么事的样子,周末蛮吃紧的噜。突然峰回路转,来看今次的更新吧,关于简洁什么的。</p> <p>这里进入译文。每个设计师都知道&ldquo;简洁&rdquo;很重要,但所谓的&ldquo;简洁&rdquo;到底指什么?多数时候我们觉得&ldquo;少&rdquo;就是简洁,通过&ldquo;减法&rdquo;即可实现。我们认为将内容限定在折线之上,就可以帮助用户更好的聚焦;我们认为项目符号列表比文字段落更容易阅读;我们认为将文案精简一半就会使其言简意赅。</p> <p>但实际上,&ldquo;简洁&rdquo;并不是简单的意味着&ldquo;少&rdquo;。准确的说,&ldquo;简洁&rdquo;应该是&ldquo;正好&rdquo;。</p> <!--break--><p>不过也许这种说法本身就过简了。在某些情况下,我们可能需要通过更多一些的东西来实现设计上的简洁。所以,更准确些的定义应该是&ldquo;正好足够使人产生正确的理解,并通过相应的行为来完成目标&rdquo;。通过以下三条原则,我们可以设计出更加有意义的简洁,而不仅仅是将界面元素隐藏或移除:</p> <ul> <li> <strong>表达唯一并且完整的核心概念</strong>(不要表达多重的或是不完整的含义)</li> <li> <strong>持续改善内容的清晰性</strong>(减少无关的细节)</li> <li> <strong>保持一致性</strong>(避免不必要的特殊模式)</li> </ul> <h3> 表达唯一并且完整的核心概念</h3> <p>要想让用户做出任何行为,你首先要对那些能够吸引用户关注的东西进行挖掘。核心概念唯一且完整的信息能够在短时间内有效抓住用户的注意力,让用户立刻做出二元化的抉择:&ldquo;我有兴趣还是没有?&rdquo;。通过一种能够让人们立刻看到所期望的结果的方式来介绍功能,这可以帮助他们确定下一步行动的优先级,并减少顾虑。</p> <p>表达唯一并且完整的核心概念,这个原则要从产品大局层面一直贯彻到最小的细节分支当中。</p> <blockquote><p>&ldquo;没什么比&lsquo;发送消息&rsquo;一词更能有效表达&lsquo;发送消息&rsquo;的含义。&rdquo; - Des Treynor</p> </blockquote> <p>我们拿&ldquo;发送消息&rdquo;这个小功能作为例子来看一看。这里的文字可以是&rdquo;Go&ldquo;,或者&rdquo;立刻提交&ldquo;,或是更简单的&rdquo;发送&ldquo;。不过这些说法都没有做到足够的清晰,很难让用户直接产生二元化的决策;而&ldquo;发送消息&rdquo;则通过两个单词(&ldquo;Send Message&rdquo;)表达了最准确最完整的含义,让人们能够非常有把握的决定是否要执行该功能。对于很多更加复杂的功能来说,要保持表意的唯一性及决策的二元化将不那么容易,但我们的目标依然是相同的:<strong>通过一个核心概念引导用户,帮助他们建立正确的预期。</strong>如果做不到这一点,那么在用户的感知当中,系统的复杂度将不断攀升。</p> <p>一个&ldquo;核心概念&rdquo;应该具有以下这些特点:</p> <ul> <li> <strong>二元性</strong>:含义简单到只有&ldquo;两面&rdquo;,让用户决定做或是不做。</li> <li> <strong>语言清晰平实</strong>:表达方式要尽可能的显而易见。</li> <li> <strong>保持一致</strong>:每个界面都应该以相同的方式呈现相同的信息。</li> <li> <strong>揭示结果</strong>:让用户清楚的知道行为将会产生的结果。</li> </ul> <div class="embed"><article id="node-298" class="node node-related-books" about="/node/298" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="一目了然:Web和移动应用设计通识方法(第2版)" src="http://beforweb.com/sites/default/files/images/products/44.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">一目了然:Web和移动应用设计通识方法(第2版)</a></h4> <p><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_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> <h3> 持续改善内容的清晰性</h3> <p>用户了解概念并产生决策之后,就该投入更多的时间成本与认知能力来进行接下来的行动了。在此过程中,用户也许还会遇到很多阻力。过多的阻力会使用户逐渐产生恐惧和抵触,并很有可能放弃使用。你必须通过持续的努力让用户知道他们可以顺利的完成目标。</p> <blockquote><p>&ldquo;关于界面上的文案:如果写的太少,含义将很难被清晰的表达。而太多的文字又会被用户跳过,因为厚重的文字块很难被视线快速扫描。&rdquo; - Ryan Singer</p> </blockquote> <p>交流需要被精炼,在恰当的地方出现的恰当的信息能够有效的推动流程的进行,增大用户完成目标的几率。试着移除那些虽然相关但在此时此处并不适宜的细节信息,保持用户行为的流畅度,减少会使他们分心的东西。要记住,<strong>如果用户付出了时间成本以及认知上的努力,却没有得到有意义的或是符合预期的结果,那么在他们的感知中,系统的复杂度就会变高</strong>。</p> <p>试着在以下几个方面入手,来持续改善内容的清晰性:</p> <ul> <li> <strong>阐明行为的起点和终点</strong>:要确保界面能告诉用户怎样去做一些事,这些事的价值在哪里。</li> <li> <strong>渐进呈现</strong>:通过最恰当的内容帮助用户将注意力集中在与当前目标最为相关的信息上。(相关阅读:<a href="http://www.beforweb.com/node/78" target="_blank">渐进呈现 - 通过合理的指示元素引导用户发现隐藏内容</a>)</li> <li> <strong>清晰的路径:</strong>使行进到下一步或进入下一层信息的触发方式更明显,过渡效果更清晰。</li> </ul> <h3> 保持一致性</h3> <p>新用户与老用户之间时常有着相当巨大的差异。如果你想让新用户留下来,那么就需要尽快让他们感觉到自己已经掌握了产品当中每一部分的使用方式,而不必担心会有什么新东西是无法搞定的。每一处功能都要具有足够的亲和力,看上去舒服,用起来可以让用户觉得自己付出的时间和精力很值得。</p> <blockquote><p>&ldquo;随风飘扬的旗子、熙熙攘攘的火车站台、散落着足迹的沙滩...我们总会在生活当中寻找某种指引和标记。&ldquo; - Don Norman</p> </blockquote> <p>具有亲和力的界面可以让人们感到舒适甚至是开心。亲和力,同样可以通过使用人们所熟悉和了解的界面模式来构建。如果问题本身确实很复杂,那么界面上的复杂也是无可厚非的,但你没有理由为用户提供会使他们感到茫然陌生的界面模式,同时又不给到必要的指引。</p> <p>要保持良好的一致性,需要做到以下几点:</p> <ul> <li> <strong>分类与整合</strong>:识别相似的功能流程,使用相似或相同的方式来展现。</li> <li> <strong>创建模式</strong>:在不同的界面中,将相似的元素放置在相似的位置,使用户可以逐渐根据直觉与位置记忆来进行操作。</li> <li> <strong>偶尔打破规则</strong>:知道界面何时真正需要体现出独特性;这种需求不像你通常想象的那么常见。(相关阅读:<a href="http://www.beforweb.com/node/119" target="_blank">先了解规则,再寻求创新 - 关于iOS应用界面自定义</a>)</li> </ul> <h3> 小结 - 何时&ldquo;多即是少&rdquo;?</h3> <p>我们平时听到最多的就是&ldquo;少即是多&rdquo;,也就是关于简化与移除。但真正的简洁更关乎于正确的理解与清晰的目的,关乎于我们能否将界面设计的让人们在最短时间内了解到最重要的信息并作出最恰当的决策。(相关阅读:<a href="http://www.beforweb.com/node/325" target="_blank">设计师与&ldquo;少即是多&rdquo;</a>)</p> <p>要在实践当中打造出更加合理的简洁设计,我们需要让界面元素表达出唯一并且完整的核心概念,持续改善内容的清晰性,并保持设计的一致性。如果能做到这些,那么&ldquo;多即是少&rdquo;也是可以实现的。在恰当的地方通过恰当的方式添加恰当的东西,这能让用户会觉得整个流程变简单了。太久以来我们都认为&ldquo;简洁&rdquo;就是&ldquo;少&rdquo;,但它其实更意味着&ldquo;正好&rdquo;<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-395" class="node node-related-books" about="/node/395" 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/B00H3VQHEW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="乔纳森传" src="/sites/default/files/images/products/69.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/苹果首席设计师-乔纳森传-利恩德·卡尼/dp/B00H3VQHEW/?_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/B00H3VQHEW/?_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="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel">简约设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 12 Jan 2014 03:21:15 +0000 C7210 394 at http://www.beforweb.com http://www.beforweb.com/node/394#comments 设计师与"少即是多" http://www.beforweb.com/node/325 <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-clean-simple-web-design-element-tips-techniques.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>各位在看到这篇的时候,有没正在听歌的?我正在听The Rolling Stones的《Sticky Fingers》,这是滚石的专辑当中我最喜欢的一张(封面是一个穿着牛仔裤的下半身形象;据说上世纪70年代早期版本的封面上,裤链是真的可以拉开的)。你在听些什么呗?</p> <p>这个周末可以用来做事的时间非常有限,于是找来一篇较短的文章;读下来觉得是一篇很棒的小文,是我很喜欢的那类篇幅不长却高度聚焦于一个主题的东西。关于简化、关于动机、关于设计与功能的关系、关于片面的扁平化风潮;分享给各位,希望能带来一些共鸣。</p> <p>这里进入译文。过去几个月当中,我一直在马德里的一家创业公司的设计团队当中任职。我的主要工作是为他们的一款主要应用产品进行重设计,这其中确实遇到了不少挑战。我们每天都会问自己同样一个问题,那就是怎样在保证功能性与吸引力的同时尽可能的对产品进行简化。</p> <p>每轮迭代,我们都会解决掉一些矛盾,然后再回头看看以前的版本,就会觉得从前的体验真是噩梦,看上去也不怎么漂亮。不错,我们是在进步。</p> <p>作为设计师,我们不断的寻找着能够简化产品的创新方式。我们希望自己的设计方案能使产品用起来更有效率,更具功能性,当然,也要更顺眼。毕竟,我们是设计师。</p> <!--break--><p>扁平化设计的爆发将极简风格推到了设计领域的最前线。让事物保持简洁自然是好的,我绝对是简洁风格的粉丝。清晰、符合直觉的界面总是可以赢得用户的青睐。</p> <h3> 为用户设计,而不是为你的身份</h3> <p>然而有时,我们会沉迷于为自己的&ldquo;设计师&rdquo;身份进行设计,而用户却成为次要的了;我们倾向于让同行拍手称赞,却忽视了能否让用户竖起拇指称赞产品。那些现实世界中的产品设计师们会告诉你,漂亮的外观并非你需要考虑的最首要的问题。</p> <p>除非你是个超级赶时髦的人,否则你肯定会使用一些看上去不那么好看的应用。为什么会这样?你不也是设计师吗?实际上,我们会使用这样的产品,正是因为它的功能可以体现出自身的价值。同样,我们自己的产品也应该能良好的表现出它的功能性,而不仅仅是漂亮的外观。</p> <p>我自己用的记账应用肯定不是同类产品中UI最漂亮的,它也不扁平,但确实非常好用,非常有用,帮我节省了大量的时间。</p> <h3> 观念:设计优先于功能</h3> <p>我们在很多地方都可以看到这种设计理念的体现,尤其是在Dribbble上。那简直就是UI忍者们的技能秀。我并不觉得这里有什么不妥,但当这些美妙的颜料被涂抹在实际产品上的时候,就会产生一些问题。你在Dribbble里看到的那些令人馋涎欲滴的界面有多少是真正可用的?现实当中有多少实际用户会像设计师所预料的那样对界面产生剧烈的反应?</p> <h3> 观念:功能优先于设计</h3> <p>对于设计师来说,&ldquo;功能优先于设计&rdquo;的言论必定是失礼的。我们会对丑陋的字体大喊着&ldquo;不!&rdquo;,却可以为很多看上去很漂亮但有悖于诸多可用性原则的iPhone应用拍手叫好。</p> <p>很多新手设计师,从入行开始就一直身处扁平化的世界里。他们会认为扁平风格才是真正的设计,任何有悖于扁平原则的东西都是错的。实际上,从视觉角度来讲,扁平风格正是现实世界当中的物体概念在数码界面中的抽象体现方式;而如今的很多设计师似乎越发偏离了这一要领,错误的认为某种设计要么是对要么就是错,错误的认为我们的工作只是落实某种图像风格而已。</p> <p>然而实际上,我们的工作是创造服务与产品来帮助众人;我们的工作是把东西做的稍微好一些,用起来更有意思、更有效率一些。实现这些目标的方法涉及到很多方面,虽然我不愿这样讲,但相比于坚实的整体用户体验及功能性而言,界面的漂亮程度确实是相对次要的。不然我们为什么还要提倡通过MVP来验证假设并进一步雕琢产品?(相关阅读:<a href="http://www.beforweb.com/node/125">精益创业 - 用户体验设计的新包装</a>)</p> <div class="embed"><article id="node-267" class="node node-related-books" about="/node/267" 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/B00EQC29KC/?_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/11.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/精益设计-设计团队如何改善用户体验-戈塞尔夫/dp/B00EQC29KC/?_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/B00EQC29KC/?_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>如今人们都知道&ldquo;内容优先&rdquo;的重要性了,这没错。没了内容,我们的设计就只是一层空洞的外壳而已。</p> <p>我个人的顾虑在于,作为设计师,我们的一些工作也许会对内容优先的原则起到一定的破坏作用。那些力求极简的界面很容易让用户失掉重要的视觉线索。</p> <p>一个比较常见的例子就是移动应用当中的&ldquo;汉堡包菜单&rdquo;(抽屉式的侧边菜单,其图标形式类似于三层汉堡),这种设计模式也慢慢的在桌面端的网页设计领域普及开了(例如<a href="https://www.uber.com">Uber的网站</a>)。一个曾经属于移动端的、用于在极其有限的屏幕规格下体现&ldquo;内容优先&rdquo;的解决方案,现在被越来越多的用在了它的作用域之外。(例如Uber的网站,无论浏览器窗口的尺寸怎样调整,导航元素都是被隐藏在汉堡包图标背后的,所以这并非是某种响应式设计策略的体现,我想这也是原作者提出质疑的主要原因 - 译者<a href="http://weibo.com">C7210</a>注)</p> <p>在桌面端网页当中使用汉堡包菜单会显得很时尚吗?在如此广阔的可视界面当中刻意隐藏重要的导航元素,这种方式是经过验证的吗?这样的设计方案就是在强迫用户:</p> <ul> <li> 必须到某个地方去寻找一些他知道本该在这里看到的东西(导航)。</li> <li> 必须花时间绕路才能完成一个本该相当简单的任务。</li> </ul> <p>这样做无异于在不需要设置障碍的地方立起一道门(想想过去那些炫酷的Flash动画加载页面)。</p> <p>这种刻意隐藏重要界面元素以突出&ldquo;更重要的内容&rdquo;的方式,所破坏的却是&ldquo;用户优先&rdquo;的原则。内容再重要,界面再漂亮,如果没人愿意再来使用和浏览,那么又有什么意义呢<a class="eLink" href="http://beforweb.com">?</a></p> <p>当我们努力想要移除界面中的一些元素以降低复杂度时,最好认真的想一想自己的理由究竟是什么。我们真的是为了增强用户体验吗?或者只是为了迎合潮流,削尖脑袋希望能够成为&ldquo;扁平化&rdquo;、&ldquo;极简化&rdquo;大潮当中的一分子?</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> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/55" 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/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/105" typeof="skos:Concept" property="rdfs:label skos:prefLabel">MVP</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 10 Nov 2013 04:30:01 +0000 C7210 325 at http://www.beforweb.com http://www.beforweb.com/node/325#comments 交互成本的定义及案例分析 http://www.beforweb.com/node/252 <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-mobile-touch-gesture-interaction-cost-design-ui-ux-app.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>平时生活和工作中,与他人之间的互动成本,总是能够被自己很敏感的体察到。往往到最后,互动所产生的收益甚至要被自己忽略掉了,而互动成本几乎要成为决定是否继续保持互动的根本要素;归根结底,也许还是因为自己预期当中的或是实际当中的收益没有高到能够让自己接受那样的成本;生活本身就像产品,而我们自己一方面是产品的组成部分,一方面又是它的用户。如此莫名其妙不着边际的言语,其实是这篇译文做下来之后结合自己的生活工作而产生的结论。挺好的一篇文章,来自Nielsen Norman Group,结合具体案例诠释了一个比较理论化的概念。然后我就举一反三发散思维了么。说正事儿吧。</p> <p>这里进入译文。交互成本指的是用户在网站或应用中为了完成目标而产生的费力度总和,包括心智与肢体操作两个方面。</p> <p>理论上讲,我们都希望用户在打开网站或应用后能够立刻看到他们所需的信息。这种情况下,交互成本为零&mdash;&mdash;简直是可用性领域中的圣杯。</p> <p>不幸的是,零交互成本在现实当中是相当罕见的,因为绝大多数网站和应用都会为用户带来很多他们有可能需要的东西。很多时候,用户必须四处观察,阅读,可能还要滚屏,然后找到一个链接,点击它,等待页面加载,如此往复很多次。有时可能还会有新窗口弹出来覆盖在之前的内容上面,然后用户就必须将注意力切换到新窗口上,可能还需要重新回到原来的页面上,以便将两个窗口中的内容关联到一起。有些情况下,用户还需要记住一个页面上的内容,然后再提交到另一个页面当中。所有这些行为都需要认知成本,相应的提升了交互成本。</p> <!--break--><p>可用性高的网站和应用可以将用户在完成任务的过程中需要付出的交互成本最小化,包括以下这些方面:</p> <ul> <li> 阅读</li> <li> 滚屏</li> <li> 四处观察以寻找相关信息</li> <li> 理解信息的含义</li> <li> 准确无误的点击或触摸</li> <li> 打字</li> <li> 页面加载和等待时间</li> <li> 注意力切换</li> <li> 记忆负荷,也就是用户为了完成目标而必须记住的信息量。</li> </ul> <p>这些行为会不同程度的提高总交互成本,具体情况还取决于用户自身。举个例子,对于具有阅读障碍的用户来说,阅读内容比点击操作要费力的多,而运动肌肉受过损伤的用户则更难进行点击操作。</p> <p>另外,不同行为所产生的交互成本还与设备类型有关。在拥有高速网络连接的台式设备上加载一个页面所需的时间几乎是微乎其微的,但在蜂窝网络速度较慢的移动设备上就是另外一种情况了。</p> <p>很多可用性方面的设计规范或文章都会讲到怎样通过最小化其中某个方面的行为来降低整体交互成本,例如参照<a href="http://www.nngroup.com/topic/writing-web/">网页内容撰写规范</a>,通过言简意赅、层次分明的信息使用户更容易阅读。</p> <h3> 关于交互成本的案例分析</h3> <p>我们来看一个简单的案例。假设我们想通过Dictionary的iPhone应用来了解&ldquo;ceremony&rdquo;一词的来历。忽略掉寻找并安装这个应用所需的成本,我们从打开这个应用开始进行分析。</p> <p>打开应用之后,我们首先看到的是启动图片:</p> <p><img alt="01-spalsh-screen-interaction-cost-ux-ui-design-website-mobile-app.png" src="/sites/default/files/images/201309-2/01-spalsh-screen-interaction-cost-ux-ui-design-website-mobile-app.png" style="height: 369px; width: 246px;" /></p> <p>这个过程中,交互成本包含着为了等待启动图片消失而花费的几秒钟时间。接下来,应用的实际首屏呈现出来:</p> <p><img alt="02-home-screen-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/02-home-screen-interaction-cost-ux-ui-design-website-mobile-app.jpg" /></p> <p>在这个界面中,交互成本主要来自定位搜索栏的过程。幸运的是,搜索栏就放在顶部最突出的位置,所以我们可以安全的假设这个过程所需要的费力度是非常低的。</p> <p>定位到搜索栏之后,用户需要点击其中的区域,使搜索框得到输入焦点。搜索栏本身的尺寸还是很大的,便于点击,所以这个过程里产生的交互成本也很低。</p> <p>接下来,用户需要编辑搜索关键词。当搜索栏获得焦点时,默认的关键词和搜索建议会自动显示出来:</p> <p><img alt="03-search-suggestion-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/03-search-suggestion-interaction-cost-ux-ui-design-website-mobile-app.jpg" /></p> <p>用户必须检视默认的关键词和搜索建议列表,确定其是否与自己的目标相关,然后删除默认关键词。既可以点击输入框右侧的x按钮(如果用户了解该按钮的含义),也可以按退格键,将字母一个个删掉。</p> <p>将&ldquo;plaid&rdquo;删掉之后,用户开始输入目标单词&ldquo;ceremony&rdquo;。随着他们的输入,不同的搜索建议也会列在下面。用户需要检视这些建议,以决定他们是否还需要继续输入,或是可以直接从建议当中进行选择。多数情况下,用户会持续输入,直到符合目标的搜索建议出现,然后点选它。</p> <p><img alt="04-a-search-suggestion-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/04-a-search-suggestion-interaction-cost-ux-ui-design-website-mobile-app.jpg" />&nbsp; &nbsp; &nbsp;<img alt="04-search-suggestion-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/04-search-suggestion-interaction-cost-ux-ui-design-website-mobile-app.jpg" /></p> <p>一旦用户选中搜索建议中的&ldquo;ceremony&rdquo;,或手动完成输入,他们需要点击键盘中的搜索按键来进入详情界面。加载新界面的过程需要花费一定的时间。</p> <p><img alt="05-result-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/05-result-interaction-cost-ux-ui-design-website-mobile-app.jpg" /></p> <p>在这个界面中,一部分用户可能会在内容中滚屏寻找词源信息,另外一部分用户则会注意到底部的选项卡,然后意识到可以横向滚动这些选项卡来发现更多选项。当他们试着滚动这些选项卡时,&ldquo;起源(Orign)&rdquo;选项会呈现出来。这时,用户必须推断出&ldquo;起源&rdquo;当中的内容包含了单词起源方面的信息。对于多数用户来说这个含义是可以被发现的,所以这个环节的交互成本较低;然而,如果这个选项的标题是&ldquo;词源学(etymology)&rdquo;,那么一些用户在阅读和理解的时候多半要遇到困难了。所以在这里,&ldquo;起源&rdquo;一词确实是更好的选择,所产生的交互成本也更低。</p> <p><img alt="06-origin-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/06-origin-interaction-cost-ux-ui-design-website-mobile-app.jpg" /></p> <p>最后,用户要点击&ldquo;起源&rdquo;选项卡,进入词源信息界面,阅读其中的内容。</p> <p><img alt="07-detail-content-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/07-detail-content-interaction-cost-ux-ui-design-website-mobile-app.jpg" /></p> <p>让我们总结一下用户查看&ldquo;ceremony&rdquo;一词的词源信息所需要付出的各种交互成本:</p> <ol> <li> 等待启动图片消失</li> <li> 搜索</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> 找到搜索栏,点击聚焦</li> <li> 检视默认关键词及搜索建议</li> <li> 确定默认关键词与自己的目标不相关</li> <li> 删除搜索栏中的默认关键词</li> <li> 输入或选择目标关键词及搜索建议</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> 输入部分字母</li> <li> 扫描搜索建议列表,查看目标单词是否在其中</li> <li> 如果不在,继续输入字母,直到目标单词出现</li> <li> 如果在,停止输入,直接点选</li> </ul> </li> <li> 点击&ldquo;搜索&rdquo;</li> </ul> </li> <li> 等待结果详情界面加载</li> <li> 寻找词源信息在结果详情界面中的位置</p> <p>&nbsp;</p> <p>&nbsp;</p> <ul> <li> 向下滚屏,在内容中寻找词源信息</li> <li> 发现选项卡,阅读其标题</li> <li> 注意到右侧还隐藏着更多的选项卡</li> <li> 推测出词源信息可能就在右侧隐藏着的某个选项卡当中</li> <li> 想起横向滚动操作可以查看右侧更多的隐藏内容</li> <li> 向左滑动选项卡列表</li> <li> 看到&ldquo;起源&rdquo;选项卡,推测出这个词与&rdquo;词源信息&ldquo;之间的关联</li> <li> 点击&rdquo;起源&ldquo;选项卡</li> </ul> </li> <li> 阅读关于&rdquo;ceremony&ldquo;一词的词源信息</li> </ol> <p>我们可以看到,哪怕是看上去很简单很容易完成的流程,其中也有可能包含很多的子流程;每个子流程都会产生交互成本。其中一部分的成本较低,例如&ldquo;想起横向滚动操作&rdquo;,因为多数用户已经具有这样的操作经验。而另外一些步骤的交互成本则具有比较大的优化空间,例如搜索栏右侧的x按钮就可以极大的降低删除关键词所需花费的成本。类似的,将其他按钮设计的更大,点击起来就更容易些。</p> <p>详情界面中的选项卡的布局和视觉呈现方式也会对用户能否快速轻松的找到这些选项起到重要的影响作用。当然,在这里使用选项卡还是是其他形式的内容导航结构,这个选择本身也会影响到用户获取信息的交互成本。</p> <h3> 预期效用(Expected Utility)</h3> <p>上面总结出的一系列操作步骤当中,有些是允许用户在多个行为中进行选择的,例如在清除关键词时,可以通过x按钮或是多次点击键盘上的回退按键。另外他们既可以从搜索建议中进行选取,也可以手动输入完整的单词。</p> <p>那么,用户在这些环节当中是怎样进行选择的?答案就在&ldquo;预期效用&rdquo;的概念当中:</p> <p><strong>预期效用 = 预期收益 - 预期交互成本</strong></p> <p>用户会试着让自己行为的预期效用最大化,换句话说,他们会衡量每个交互行为所产生的收益与成本,然后选择性价比最高的。</p> <p>当通往相同目标、获得相同收益的路线不止一条时,用户通常会选择能够让预估交互成本最小化的行为。比如,很多人不会为了找到自己的目标关键词而在搜索建议列表中向下滚动,他们宁愿再多打一个或几个字母,直到目标关键词出现在建议列表当中,因为相比于上下滚屏同时集中注意力扫描搜索建议列表中的单词,多敲一个或几个字母的成本要低很多。</p> <p><img alt="08-scan-content-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/08-scan-content-interaction-cost-ux-ui-design-website-mobile-app.jpg" style="height: 369px; width: 246px;" />&nbsp; &nbsp; &nbsp;<img alt="09-scan-content-interaction-cost-ux-ui-design-website-mobile-app.jpg" src="/sites/default/files/images/201309-2/09-scan-content-interaction-cost-ux-ui-design-website-mobile-app.jpg" style="height: 369px; width: 246px;" /></p> <p>这种思维模式也会作用在用户对产品的选择当中。如果用户认为某个网站或应用看上去很难帮他们完成目标,那么除非这个网站或应用真的能带来非常高的预期收益,否则他们多数将会选择另外一个预估成本较低的产品。</p> <p>举个例子,如果一个人很想买一台苹果电脑,那么他通常只能在苹果的官网当中进行了解和挑选,因为他几乎无法在其他网站当中买到,哪怕那些网站更好用更易用;这个人的购买动机如此之高,以至于可以忽略较高的交互成本。另一方面,如果一个人只是想买一台烧烤架,那么他们可能根本不会在意到底是从Home Depot买还是从Lowes买,他们在遇到交互成本较高的购物网站时会很无所谓的直接离开,然后转到其他家继续购物。</p> <p>这里,市场和品牌方面的职能就是提升用户的动机以及对产品预期收益的认知,而可用性设计的工作则是以降低交互成本为目标。这两方面的努力综合起来就可以有效的提升网站和应用产品的预期效用。</p> <h3> 为什么你应该在意交互成本</h3> <p>交互成本是可用性的<strong>直接量化体现</strong>。实际上,交互成本的概念在早期人机交互学科当中被引入的主要目的,就是评估一个软件系统的可用性。所有的可用性探索都旨在帮助用户将交互成本最小化。</p> <p>从长期的角度来看,对产品设计方案在交互成本方面的快速评估将帮你节省大量开支,因为你能尽早的明确了解到界面对于用户来说到底有多难用,以寻求最快最有效的优化调整。</p> <p>此外,交互成本的概念也可以用来作为一种比较工具,帮你在不同的设计方案之间进行决策:通常,能够最有效的降低交互成本的设计方案更有可能帮助你的产品取得成功<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-291" class="node node-related-books" about="/node/291" 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/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_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/36.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">贴心设计:打造高可用性的移动产品</a></h4> <p><a href="http://www.amazon.cn/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点关注移动设备上的可用性,并涵盖了构建移动战略、为小屏幕设计、移动写作、可用性对比和展望未来等主题。书中内含228张高清全彩图片以表明观点...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/147" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互成本</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 08 Sep 2013 03:02:14 +0000 C7210 252 at http://www.beforweb.com http://www.beforweb.com/node/252#comments 最小化可用性设计(Minimum Usable Design) http://www.beforweb.com/node/85 <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-mvp-Minimum-Usable-Design-Viable-Product-gear-ch.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>似乎是蛮久没有这样周末独自在家安静的做做博客了。生活终归需要张力,一周一周的忙碌,到了周末哪怕会寂静的有些无聊,感觉上也蛮有趣的。</p> <p>今天这篇小短文有点儿意思,英文原文一遍读下来觉得没有什么不显而易见的东西;翻译了一遍,然后回过头又看一遍原文以及评论当中的观点,才尝出一些味道。就当作引子吧,有兴趣的朋友不妨再去看看原文及评论。敏捷,迭代,最小化可行产品,虽然这些概念在现实中极容易被很多人相当没节操的当作借口和托辞,但作为设计师,我们自己心里还是应该有数。正文走起。</p> <p>有一个很著名的悖论一直在生活中困扰着我(英文原文作者),它似乎可以适用于很多领域,包括Web及移动应用设计。我所指的就是<a href="http://zh.wikipedia.org/wiki/%E8%8A%9D%E8%AF%BA%E6%82%96%E8%AE%BA">芝诺悖论</a>。</p> <p>人们会使用各种版本的示例来诠释芝诺悖论,我们来看其中的一个:</p> <blockquote><p>要步行穿过一片森林,你首先要走过全部路程的一半。当你到达中点时,接下来还需要走过剩下路程的一半,然后又是剩下路程的一半,以此类推,你就会发现自己永远无法穿过这片森林了我去。</p> </blockquote> <p>在实际工作中,我时常会觉得,无论手头这摊子事情处于哪个设计阶段,我似乎永远还有一半的事情没有搞定。也许正是因为这种状况,我们才总是会说&ldquo;要把所有细节都完成的话还需要两个礼拜&rdquo;,结果就是无论事情做到哪一步,似乎总是无法真正的完成目标,中间总会有一段距离需要更多的工作来填补。</p> <p>这事儿仔细想想的话是会凌乱的,不过换个角度来看,它也有可能成为一种能够帮助我们实现成功设计方案的动机与思路<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 彻底的人造理论</h3> <p>以我们的老伙计Google为例。假如你即将设计的是Google史上的第一款首页,而且你有大量的时间来琢磨其中任何一部分有可能产生的问题。任何项目都会有deadline,你要明确设计的最终目标&mdash;&mdash;你需要知道当你&ldquo;穿过森丽&rdquo;之后,产品看上去应该是怎样的。首先,你需要走完一半的路程。</p> <p>假设在全部工期的中间点所完成的设计方案,在可用性方面至少要达到最终产品的50%,那么你会从哪些东西入手,Logo?页脚?答案显然应该是搜索文本框与搜索按钮。实际上,这一步完成了之后,对于Google这样的站点来说,它已经算是基本可用了。现在我们距离目标还有一半的路程要走。</p> <p>接下来,我们还是要先走掉剩下路程的头一半。看上去我们需要为页面增加必要的品牌标识,也就是Logo,否则人们下次想来搜点儿什么的时候都不知道何去何从了。Logo搞定之后,我们就完成了整体目标的四分之三。想想看如果Google首页只有Logo、搜索文本框和搜索按钮的话,全世界的互联网用户当中会有多少人觉得足够用了?我相信绝不在少数,怎么也能达到75%,虽然我们只完成了设计目标的四分之三。我们应该可以做的更好。</p> <p>如果持续这样抽取剩余任务的一半来落实,那么我们的设计方案最终将变得&ldquo;足够好&rdquo;。我知道人们会觉得这三个字不太实在,但事实是如果已经完成了整体任务目标的99%,那么&ldquo;足够好&rdquo;就是足够好。</p> <h3> 最小化可用性设计(MUD)</h3> <p>眼下,圈子里有个说法叫&ldquo;最小化可行产品(MVP,Minimum Viable Product)&rdquo;。</p> <blockquote><p>&ldquo;最小化可行产品是指那些只拥有最基本的功能以保证自身可用的产品。&rdquo;</p> <p>Minimum Viable Product,来自<a href="http://en.wikipedia.org/wiki/Minimum_viable_product">Wikipedia</a></p> </blockquote> <p>而&ldquo;最小化可用性设计(MUD,Minimum Usable Design)&rdquo;这个词则是我自己杜撰的,它的核心意义在于设计阶段进行到一半时的产出应该能够满足产品的最小可行化。如果你觉得已经完成了整体目标的50%,而当前的设计方案仍不能保证至少50%的可用性,那么实际上你并没有走完全程的一半。</p> <p>不过这并不意味着产品的设计方案做到50%就足够了,我们需要的是通过这个概念来评估设计的进度。有时你仍然必须等到方案进行到99%的时候才能真正拿出手。追求完美是没错的,关键取决于产品自身的实际情况以及相应的用户需求特质。苹果很善于做的一件事,就是打造功能相当有限的最小化可行产品,并通过<strong>最大化可用性设计</strong>对其进行完美的包装。又一个新词儿。</p> <h3> 示例</h3> <p>让我们以博客设计为例来更加直观的了解一下最小化可用性设计的思路与方式。</p> <p>我(英文原文作者)希望人们愿意来我的博客<a href="http://drawar.com/">Drawar</a>阅读内容(我也希望人们愿意来我的博客<a href="http://beforweb.com">Beforweb</a>阅读内容&mdash;&mdash;<a href="http://weibo.com/c7210">译者C7210</a>乱入注)。如果设计方案能够做到这一点,那么我就完成了设计目标,我的多数观众也会很happy。因此,我首先希望博客当中的文章内容可以很直接清晰的被用户获取到,这是首要任务,也就是整体设计目标的前50%所在。</p> <p><img alt="mud-Minimum-Usable-Design-Viable-Product-blog-1" src="/sites/default/files/images/201206/mud-Minimum-Usable-Design-Viable-Product-blog-1.jpg" style="width: 500px; height: 349px;" /></p> <p class="figure-caption">50%,不多,但已经完成了首要任务</p> <p>这样的方案已然可以保证人们能够在博客中良好的阅读内容了,首要任务搞定,整体目标已经完成掉50%的样子。接下来,我们再为剩余的工作设置一个中间点,将品牌建设作为当前的目标,设计一个Logo,这样可以让人们记住我的博客,以后再来看。这项任务完成之后,整体进度就会达到75%了。</p> <p><img alt="mud-Minimum-Usable-Design-Viable-Product-blog-2-logo" src="/sites/default/files/images/201206/mud-Minimum-Usable-Design-Viable-Product-blog-2-logo.jpg" style="width: 498px; height: 296px;" /></p> <p class="figure-caption">75%了诶</p> <p>现在人们进来之后就会很明确的知道他们在什么地方了。接下来再为剩余进度设置一个中间点,这次的目标是添加导航链接,以及一小撮关于博客的介绍文字。</p> <p><img alt="mud-Minimum-Usable-Design-Viable-Product-blog-3-navigation" src="/sites/default/files/images/201206/mud-Minimum-Usable-Design-Viable-Product-blog-3-navigation.jpg" style="width: 500px; height: 292px;" /></p> <p class="figure-caption">87.5%了...</p> <p>下一个中间点的目标是添加广告位,使我有可能通过博客获取一些微博的收入。在这之后,我就要把这个博客网站发布上线了。是的,进行到这里对我来说就足够了。</p> <p><img alt="mud-Minimum-Usable-Design-Viable-Product-blog-4" src="/sites/default/files/images/201206/mud-Minimum-Usable-Design-Viable-Product-blog-4.jpg" style="width: 500px; height: 305px;" /></p> <p class="figure-caption">93.75%,够了,完成</p> <p>从最小化的角度来说,我的博客设计方案已经完成。当然我还可以将很多其他元素添加进去,使它对于某些访客来说更加完整,例如搜索、社会化媒体挂件、链接表等。但这些并不在我最初设定的设计目标之内,所以我的博客就是你所看到的这个样子。</p> <h3> 设计永无止境</h3> <p>虽然我自己对这套设计方案很满意,但是很显然,如此简化的博客无法另每个人都happy。总会有人希望从设计当中得到更多,这也就是芝诺悖论&ldquo;发扬光大&rdquo;的地方&mdash;&mdash;作为设计师,我们永远也没法走出这片森林。不过,我们在最小化可用性设计的过程中设定的目标点越多,产品的覆盖面就会越大。但是要当心,在后面50%当中添加的东西越多,用于保证产品最小可行性的核心设计目标被干扰的可能性就越大<a class="eLink" href="http://beforweb.com">。</a></p> <p>没有一成不变的产品。对于设计师来说,始终要在确保产品最小可行性的基础上,根据实际需求,不断向下一个阶段的目标迈进,逐渐接近森林的边缘;但我们永远也不会走到终点,因为变化和改进是永恒的话题。</p> <div class="embed"><article id="node-297" class="node node-related-books" about="/node/297" 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/B004I91HCY/?_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/43.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_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/B004I91HCY/?_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/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/103" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/104" typeof="skos:Concept" property="rdfs:label skos:prefLabel">最小化可行产品</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/105" typeof="skos:Concept" property="rdfs:label skos:prefLabel">MVP</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 02 Jun 2012 08:01:22 +0000 C7210 85 at http://www.beforweb.com http://www.beforweb.com/node/85#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 iPad应用的十大用户体验设计准则 http://www.beforweb.com/node/48 <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-ipad-application-user-experience-interactive-design-guidelines.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>咱先祝各位情人节快乐吧,宅基腐都没太大所谓,2012了,图个乐呵。话说今次上新与之前一篇的间隔稍微长了些,不过也确实尽力而为了;天天梦里都在翻译东西,满脑子的iOS、交互设计、用户体验...希望事情都能快快的顺利搞定。</p> <p>闲话不多说了,今天的这篇译文同样是移动方面的话题。有人说了你这不叫&ldquo;为网而生&rdquo;么,哪来这么多移动的东西呢?这事儿也不奇怪,首先这是我个人目前最关注的方向,也是除了工作时间以外花费精力最多的地方;其次,正像我们在&ldquo;<a href="http://beforweb.com/node/14">从网站到移动客户端应用 - 随机应变的用户体验设计</a>&nbsp;&rdquo;一文中提到的,我相信很多同行朋友们无论一直以来主攻哪个方向,也许现在都已经开始琢磨着探索移动应用的相关领域了;其实这是个生态问题。OK我们果断进入正文。</p> <p>与众多优秀的产品相同,iPad应用的成功也取决于产品核心价值以及用户体验模式等诸多方面的因素。除了游戏之外,多数类型的应用都必需能够在一定的上下文环境中帮助用户解决某些特定的问题。它应该足够的简单易用,使用户不需要进行复杂的设置和学习就可以顺利上手。而产品在视觉外观、交互方式、情感联接等方面的表现更会直接影响到用户对于应用的体验满意度。</p> <p>在本文中,我们将共同了解一些你在设计工作中需要认真考虑与贯彻的指导准则。我们不会对创建iPad应用的完整设计流程进行讲解,也不会将时间花费在几乎任何一篇移动应用设计文章都会提到的那些细节当中的小方法小窍门上。本文的主要目的是帮助你在实际的iPad应用项目中制定更加合理与正确的产品设计决策<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 1.瞄准核心需求,简化产品功能</h3> <p>优秀的iPad应用通常可以让用户以最简单的操作方式完成一个或多个非常明确的任务目标。你需要在产品的概念阶段对功能模式进行有针对性的选择与摒弃。不妨试着以一种面向目标的思路来判断功能在产品中的存在价值:针对自己产品的方向及概念模式,设想用户会在哪些典型的需求用例中进行使用,将任何能够想到的需求与任务目标都记录下来。接下来,与你的团队进行头脑风暴,尽量全面的罗列出用户在完成这些任务目标的过程中有可能会用到的功能。然后,在这份功能清单当中提炼出一套能够确保实现需求目标的最精简的功能集合。最后,还可以向这个最小化的功能蓝图当中增加一些有助于提升产品用户体验的特色功能。</p> <p>来看些实例。<a href="http://itunes.apple.com/us/app/epicurious-recipes-shopping/id312101965?mt=8">Epicurious</a>这款食谱应用在核心功能的集约方面做的相当到位&mdash;&mdash;没有复杂的界面与操作方式,用户完全可以边学习边实际操作,享受烹饪的乐趣。特别是在横屏状态下,左侧是很清晰的原料配置清单,而右侧的主要内容区是详细的烹饪操作流程。用户还可以很轻松的通过一个可拖动定位的标记来记录下当前的烹饪流程进行到了哪一步。另外,关于当前这道食谱的评论及技术提示等相关内容都被集成到了下方的tab视图中,这样即保证了界面的简约清晰,又可以让用户在需要的时候能够很轻松的查看到这些内容。</p> <p><img alt="ipad-app-product-user-experience-design-epicurious" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-epicurious.jpg" style="width: 498px; height: 373px; " /></p> <p><a href="http://itunes.apple.com/us/app/whole-foods-market-recipes/id320029256?mt=8">Whole Foods</a>也是一款烹饪辅助类型的应用,如果用户希望对某些菜谱进行尝试,它可以帮助用户将那些所需的食材配料生成为购物清单。不过很遗憾的是,这款应用忽略了不同菜谱之间包含着相同配料的问题,使得最终生成的购物清单往往会在某些项目上产生重复的现象。我们可以在下面的截图中看到,香蕉桑出现了三次:</p> <p><img alt="ipad-app-product-user-experience-design-whole-foods" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-whole-foods.jpg" style="width: 498px; height: 377px; " /></p> <p>另外,不要到处使用按钮一类的视觉交互元素;在很多情况下,操作控制行为完全可以通过手势来完成。例如,iOS自带的备忘录并没有常规的编辑模式入口,用户只要轻按界面就可以进入编辑状态;内容也会被自动保存,不需要用户执行相关操作。而iOS原生的选择、剪切、复制、粘帖等编辑功能都只需要简单的基本手势即可完成。撤销操作相对特殊一些,需要摇晃机身;记得hold住先。</p> <p><img alt="ipad-app-product-user-experience-design-ios-note" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-ios-note.jpg" style="width: 450px; height: 600px; " /></p> <h3> 2.打造更加智能化与个性化的产品体验</h3> <p>没人喜欢花钱买回一款应用还必须首先进行复杂的设置才能正常使用。要尽量充分地利用iPad及相关Web端服务的技术能力,对用户在上下文环境中的各方面特征进行更加细微准确的了解与分析。考虑一下有没可能对用户的地理位置信息、行事历、微博feed、Gmail账户中的订阅或是通讯录等进行合理合法的利用,使你的应用能够为用户提供更加智能、更加个性化的内容及功能。</p> <p><a href="http://itunes.apple.com/cn/app/zite-personalized-magazine/id419752338?mt=8">Zite</a>是一款令人叫绝的内容阅读类应用,它会读取用户在Google Reader、Twitter和Delicious账户中的内容信息, 分析用户的个人喜好,并在此基础上向用户推荐其他内容源当中的相关文章 。我(英文原文作者)试着在这款应用中授权我的Delicious账户,五秒钟之内,它就完成了对我曾经收藏过的文章的分析,并基于我的兴趣方向生成了一本完全个性化的杂志,让我可以阅读到更多自己感兴趣的新文章。这类应用与Pandora等服务类似,你用的越多,它们就越了解你,相应的内容输出也就越发的个性化。虽然很多人认为,相比于Zite来说,Flipboard的UI设计及相关的交互体验更加诱人,但Zite依然可以在智能化与个性化等方面占有优势。</p> <p><img alt="ipad-app-product-user-experience-design-zite" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-zite.jpg" style="width: 500px; height: 460px; " /></p> <p>下图是Zite自动生成的杂志界面:</p> <p><img alt="ipad-app-product-user-experience-design-zite-mag" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-zite-mag.jpg" style="width: 448px; height: 600px; " /></p> <h3> 3.注意应用产品的上下文环境</h3> <p>根据你的产品所面向的核心需求,考虑用户会在哪些典型的情景环境中进行使用。iPad的常见使用环境包括餐厅、机场、行车途,或是家中的厨房、卧室、书房等。在你对产品的功能及体验模式进行规划的过程当中,是否有必要考虑使用场景方面的因素对现有设计模式的影响作用?举个例子,对于食谱类的应用来说,用户在厨房中使用时的需求目标与在卧室中使用时的状况也许会存在很大差异。</p> <p><a href="http://www.opentable.com">OpenTable</a>主要提供订餐方面的服务。在它的Web端,餐厅搜索结果的展示形式就是很传统的信息列表。而它的iPad客户端应用的产品概念则体现出了移动应用上下文环境与功能需求之间的高度关联性。其默认视图下的用户界面主要由地图与餐厅列表组成,用户可以直接搜索自己当前位置附近的餐厅。相比于Web端的产品模式,iPad应用中的这些功能特色都更加符合用户在使用移动设备完成相关任务时的实际需求。</p> <p><img alt="ipad-app-product-user-experience-design-opentable" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-opentable.jpg" style="width: 497px; height: 372px; " /></p> <p><a href="http://itunes.apple.com/us/app/awesome-note-hd-to-do-diary/id406750496?mt=8">Awesome Note</a>也是个不错的例子。它所提供的默认分类方式很准确的反映出了人们使用iPad的常见环境及需求用例。</p> <p><img alt="ipad-app-product-user-experience-design-awesome-note" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-awesome-note.jpg" style="width: 500px; height: 375px; " /></p> <p><a href="http://itunes.apple.com/us/app/grocery-iq/id290591617?mt=8">GroceryIQ</a>是一款购物清单类型的应用,它的一个重要特色是允许用户按照不同商店来归纳与筛选自己需要购买的商品,非常符合人们在实际购物需求中的心智模型。</p> <p><img alt="ipad-app-product-user-experience-design-groceryiq" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-groceryiq.jpg" style="width: 500px; height: 375px; " /></p> <h3> 4.考虑多用户与多设备的情况</h3> <p>家庭成员之间通常会使用同一部iPad来完成各自的需求目标;另外,全家人围坐在一起共同使用的场景也是很常见的。与手机或个人电脑不同,iPad的个人色彩相对较弱,它更像是咖啡桌上的杂志,具有很强的共享性。在很多类型的iPad应用当中,账户管理方面的功能是不可或缺的,包括最基本的账户切换,以及对于当前处于登录状态的账户提示等。对于某些拥有多设备版本的内容类应用来说,账户管理的一个重要作用就是在iPad和iPhone等设备之间保持内容的同步更新。</p> <p>举个例子,<a href="http://itunes.apple.com/us/app/flipboard/id358801284?mt=8">Flipboard</a>允许多个用户通过不同的账户登录,并会在首页当中显示当前登录账户的名称。</p> <p><img alt="ipad-app-product-user-experience-design-flipboard" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-flipboard.jpg" style="width: 500px; height: 375px; " /></p> <p>再来看<a href="http://itunes.apple.com/us/app/fedex-mobile/id304462049?mt=8">FedEx</a>的iPad应用,虽然其界面整体风格非常灰暗,但登录账户的信息仍然可以很明显的被辨识出来。</p> <p><img alt="ipad-app-product-user-experience-design-fedex" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-fedex.jpg" style="width: 490px; height: 365px; " /></p> <p>而<a href="http://itunes.apple.com/us/app/ebay/id282614216?mt=8">eBay</a>的客户端在这方面就略显不足,用户必须点击左上方的&ldquo;我的eBay&rdquo;才能浏览当前的账户信息。</p> <p><img alt="ipad-app-product-user-experience-design-ebay" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-ebay.jpg" style="width: 499px; height: 374px; " /></p> <h3> 5.打造合理的交互模式</h3> <p>你可以在游戏或是其他娱乐类型的产品中尝试各种复杂炫目的交互效果,不过对于那些时常会被用到的其他类型的应用来说,在导航结构、浏览方式及相应的视觉交互形式等方面还是尽量保持常规与简洁的好。交互模式的创新固然是推动一款应用取得成功的重要因素,但绝不能为了追求具有差异化的体验方式而对产品本身的可用性造成负面影响。</p> <p><a href="http://itunes.apple.com/us/app/martha-stewart-living-magazine/id399094624?mt=8">Martha Stewart Living</a>杂志的浏览方式很好的将创意与可用性结合在了一起。其中,x轴方向的滚屏操作用于查看不同的文章页面,而y轴上的滚屏则用来在某篇文章当中进行浏览阅读。针对当前文章页面的内容简介会出现在页面队列的上方,用户不需要进入单篇文章就可以对大致内容做以了解。而队列底部的滚动条则可以很明显的反映出当前焦点所指向的页面在全书当中的位置。这些看似简洁平实的操作方式却可以给用户带来简单易用、符合感知的良好交互体验。</p> <p><img alt="ipad-app-product-user-experience-design-martha-stewart-living" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-martha-stewart-living.jpg" style="width: 497px; height: 373px; " /></p> <p>建议你对各种iPad应用进行体验和尝试,观察它们在交互方面的优缺点。实际上,你可以在不少具有普遍适用性的细节功能当中发现很多能够体现出交互设计思路的地方。举个最典型的例子,我们可以在下面几张截图中看到一些内容阅读类应用(依次为Huffington Post、New York Times、Zite)在文章关闭方式上的区别:</p> <p><img alt="ipad-app-product-user-experience-design-Huffington-Post" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-Huffington-Post.jpg" style="width: 497px; height: 106px; " /></p> <p><img alt="ipad-app-product-user-experience-design-newyork-times" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-newyork-times.jpg" style="width: 498px; height: 93px; " /></p> <p><img alt="ipad-app-product-user-experience-design-zite-article" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-zite-article.jpg" style="width: 498px; height: 93px; " /></p> <p>很多人会在平端iPad时将左手拇指停靠在屏幕的左上角附近,Zite的设计方案使他们在关闭当前文章时可以很轻松的进行操作。另外,用户还可以在屏幕上点击文章容器之外的任何地方来关闭文章界面。这种方案具有很强的弹性,习惯于以其他姿势使用iPad的用户也可以毫不费力的进行操作。而纽约时报的iPad应用则允许用户通过双指捏合的方式来关闭文章;另外,文章底部的工具栏中也包含可以回到首页的按钮,而且当文章界面保持打开状态几秒钟之后,这个工具栏还会自动隐藏。相对于关闭按钮来说,捏合的方式更加自由一些,不需要用户针对某个交互元素进行操作;但其弊端也是很明显的:用户有可能需要临时改变双手的位置和姿势,来保证其中一只手可以自如的执行手势操作。</p> <p>在对各种应用进行尝试和体验的过程中,要注意观察自己在细节中的感受,特别要记录下那些会让你觉得很赞的地方,或是那些让你感到操作起来很不顺手、甚至会对操作流程产生干扰作用的交互方式。找到那些与你的产品属于相同领域的应用,分析他们的功能及体验模式,并考虑怎样在自己的产品中实现差异化。在很多方面,iPad应用仍然具有一定的前沿性,应用市场中会不断涌现出各种新奇炫目的功能及交互方式;在这种情况下,更需要以务实的心态来规划自己产品的用户体验设计方案,避免盲目的标新立异。</p> <h3> 6.提供首页视图</h3> <p>人们习惯于首页的概念。首页视图通常可以帮助用户对产品的功能进行纵览,并为他们提供常用操作的快捷入口。首页可以为用户带来安全感,让他们在探索功能和浏览内容的时候不必担心在应用软件中迷失方向。</p> <p>我们一起看看来自NASA的<a href="http://itunes.apple.com/us/app/nasa-visualization-explorer/id448700202?mt=8">Visualization Explorer</a>,这款应用没有首页视图模式,用户打开它之后会被直接带进最新的一篇内容当中。要浏览其他文章,用户可以点击文章左右两端的箭头来按照顺序逐一查看,或是通过点击左下角的图标来调出文章列表,在其中进行选择。通过文章列表进行查看的自由度要比第一种方式高一些,但仍会受到容器尺寸规格的限制,列表中的每一个文章条目只能包含一个很小的缩略图以及简短的文章标题,用户无法在这里直接获取关于文章本身的简介内容。</p> <p><img alt="ipad-app-product-user-experience-design-nasa" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-nasa.jpg" style="width: 500px; height: 375px; " /></p> <p>相比之下,<a href="http://itunes.apple.com/us/app/pulse-news-for-ipad/id371088673?mt=8">Pulse</a>的体验就好了很多。它的首页视图是一个内容导航,用户可以在其中以列表的形式直接查看不同内容源中的最新文章;每个内容条目中都包括大尺寸的缩略图、文章标题及简介内容(具体情况取决于文章本身),用户可以很清楚的判断出哪些内容是他们感兴趣的。在横屏状态下,当用户选择了某篇文章之后,整个首页导航界面会向左移开,完整的文章内容会随之从右侧展开。这是一种非常连贯的交互体验,用户并不会觉得索引与内容处于两个互不相干的界面当中。而竖屏时,导航结构会在单篇文章当中收拢到界面底部;虽然这种方式与NASA的做法类似,但Pulse始终可以让用户通过更大更清晰的文章条目列表来查看队列中的文章概况。</p> <p><img alt="ipad-app-product-user-experience-design-pulse-1" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-pulse-1.jpg" style="width: 500px; height: 375px; " /></p> <p><img alt="ipad-app-product-user-experience-design-pulse-2" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-pulse-2.jpg" style="width: 497px; height: 373px; " /></p> <p><img alt="ipad-app-product-user-experience-design-pulse-3" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-pulse-3.jpg" style="width: 498px; height: 668px; " /></p> <h3> 7.谨慎使用弹出效果</h3> <p>iPad当中,用来帮助用户访问相关内容和导航结构的弹出层效果还是蛮赞的。但是,如果使用不善,这种交互模式也会在操作流程中造成不小的麻烦。在设计方案中,一定要为弹出层做好高度与宽度上的限制,尽量避免将太多的信息放在其中。我们再次以Awesome Note为例,不过这次的角度相对负面一些。虽然我们在前面提到过,它默认的文件夹分类方式很符合用户的需求,不过要对这些文件夹进行相关的编辑操作,却需要在一个弹出层当中进行。其中文件夹的呈现方式与主界面中的几乎完全一致,只是尺寸略有区别;对于这种重要的交互对象集合,如果在同一个界面中以相同的视觉表现形式重复地出现,那么在很大程度上会对使用户产生迷惑。而且对于文件夹的视觉样式以及相关的编辑操作来说,这样一个弹出层显得有些狭小了。</p> <p><img alt="ipad-app-product-user-experience-design-awesome-note-popover" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-awesome-note-popover.jpg" style="width: 502px; height: 377px; " /></p> <p>其实,从容器尺寸与空间利用率的角度讲,我们之前看到的NASA的文章列表弹出层也具有相同的问题。</p> <p>在某些情况下,单独打开一个新界面比弹出层更加合理。除非弹出层中的相关操作与当前界面中的内容具有难以阻断的上下文相关性,否则完全可以它们放到一个新的界面当中&mdash;&mdash;可用空间更大,布局结构更合理,阅读和操作都更加容易,为什么不呢。</p> <p>当然,对屏幕进行纵向分割,将导航结构或是相关功能放在左侧边栏中的做法也是很常见的一种解决方案。</p> <p><a href="http://itunes.apple.com/us/app/houzz-interior-design-ideas/id399563465?mt=8">Houzz</a>:</p> <p><img alt="ipad-app-product-user-experience-design-houzz" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-houzz.jpg" style="width: 498px; height: 373px; " /></p> <p><a href="http://itunes.apple.com/us/app/martha-stewart-living-magazine/id399094624?mt=8">Martha Stewart Living</a>:</p> <p><img alt="ipad-app-product-user-experience-design-Martha-Stewart-Living-2" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-Martha-Stewart-Living-2.jpg" style="width: 500px; height: 375px; " /></p> <p><a href="http://itunes.apple.com/us/app/flipboard/id358801284?mt=8">Flipboard</a>&nbsp;:</p> <p><img alt="ipad-app-product-user-experience-design-flipboard-2" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-flipboard-2.jpg" style="width: 447px; height: 597px; " /></p> <h3> 8.避免使用不必要的启动画面</h3> <p>在传统Web领域,不少网站都会使用基于Flash或其他技术打造的&ldquo;启动画面&rdquo;,它们多数是没有任何意义的,而且要花费大量的时间进行加载,用户很容易失去耐心并转身离开。对于运行在iPad这类移动设备上的应用来说,毫无意义的启动画面会更加令人崩溃。如果你的应用在启动的时候需要加载很多内容,而你决定在此期间展示一个启动画面,从而让用户对等待行为的感知程度有所降低,那么至少不要让它保持太久。最好可以在启动画面当中展示一些已经加载好的简要内容,使用户即使在等待过程中也能保持一种相对连贯的交互感知。</p> <p>Zite在这方面的表现依然很赞,它会在启动画面当中显示一些已经加载好的文章缩略图,以吸引用户的注意力,而同时,更多的其他内容仍在进行加载。</p> <p><img alt="ipad-app-product-user-experience-design-zite-3" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-zite-3.jpg" style="width: 498px; height: 324px; " /></p> <h3> 9.正确合理的使用手势操作</h3> <p>炫酷而实用的手势操作是iPad当中的重要交互方式,不过一定要确保在产品当中以合理的密度在正确的地方使用这种方式。举个例子,如果当前界面中的主要交互对象是需要通过横扫手势来触发滚动的旋转木马形式的列表视图,那么就不应该再为该界面绑定其他具有全局性的横扫手势了。</p> <p>如果需要通过手势来触发的交互行为难以被用户轻易的洞察,那么最好在显眼的地方给予提示。Zite在这方面做的同样很棒,在内容分类列表视图中,右下角的提示可以让用户很容易了解到接下来可以通过轻扫来实现翻页。</p> <p><img alt="ipad-app-product-user-experience-design-zite-4" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-zite-4.jpg" style="width: 498px; height: 373px; " /></p> <p><a href="http://itunes.apple.com/us/app/discovr-apps-discover-new/id440101665?mt=8">Discovr</a>是一款音乐探索类型的应用,它将手势操作的提示信息直接整合到了交互对象当中,也就是那个标注着&ldquo;Tap me&rdquo;的红圈。</p> <p><img alt="ipad-app-product-user-experience-design-discovr" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-discovr.jpg" style="width: 499px; height: 386px; " /></p> <p>当获取了足够的信息之后,红圈中的文字会变为&ldquo;Tap and hold me&rdquo;,提示用户通过长按来完成接下来的操作。这种引导方式可以让用户不必离开当前的交互流程就能快速直接的对关键操作方式进行掌握。</p> <p><img alt="ipad-app-product-user-experience-design-discovr-2" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-discovr-2.jpg" style="width: 500px; height: 388px; " /></p> <h3> 10.让可触控的界面元素易于识别、方便触摸</h3> <p>Jakob Nielsen老师在iPad可用性报告当中指出的&ldquo;阅读-触控不对等&rdquo;的问题在iPad应用当中其实是蛮普遍的。(话说这已经是Nielsen老师第三次在我们的文章当中露面了。前面两次分别涉及到<a href="http://beforweb.com/node/24">产品早期的原型设计与用户测试</a>以及<a href="http://beforweb.com/node/32">移动化用户体验设计</a>相关方面的话题)</p> <p>所谓&ldquo;阅读-触控不对等&rdquo;,即是指界面中的文字字号可以保证清晰易读,但对于触控操作来说依然显得过小,用户在很多时候很难准确的触摸到,或是压根不知道哪里可以进行触摸操作。下面的截图来自Martha Stewart Living的广告界面,中间一列带有箭头图标的标题列表其实是可点击的,但用户确实很难察觉到这一点,因为箭头并不是一种常见的用来表示可点击操作的图标,况且它还被放在了左边。在你的设计方案中,一定要将可点击触控的交互元素很明显的标示出来,最好可以做到醒目而美观,让用户不必寻找与思考就能了解到它们的作用。</p> <p><img alt="ipad-app-product-user-experience-design-Martha-Stewart-Living-3m" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-Martha-Stewart-Living-3m.jpg" style="width: 498px; height: 374px; " /></p> <p><a href="http://itunes.apple.com/us/app/cool-hunting/id363585832?mt=8">Cool Hunting</a>界面上方的图片区域实际上是一组可以进行横扫操作的图片集,但你真的很难发现这一点。其实,不妨在右侧露出下一张图片的一小部分,让用户明白这是一组可以连续浏览的图片集合<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="ipad-app-product-user-experience-design-cool-hunting" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-cool-hunting.jpg" style="width: 498px; height: 372px; " /></p> <p>另外,iOS本身在这方面也有做的不好的地方,我们必须果断吐槽。大家知道,双击Home按键即可从当前界面下方调出多任务栏,但其实在它的左侧还有一组用于音乐播放的控制面板;另外在默认情况下,锁定屏幕旋转的开关也在这里。这实在是太隐蔽了有木有,为什么不能提供一些可视化的提示呢?</p> <p><img alt="ipad-app-product-user-experience-design-task" src="/sites/default/files/images/201202/ipad-app-product-user-experience-design-task.jpg" style="width: 498px; height: 148px; " /></p> <div class="embed"><article id="node-296" class="node node-related-books" about="/node/296" 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/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="为iPad而设计:打造畅销App" src="http://beforweb.com/sites/default/files/images/products/42.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">为iPad而设计:打造畅销App</a></h4> <p><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书强调实际可行的操作步骤,而非模棱两可的建议,包括如何产生创意、手绘App、做出原型设计、组织协作项目,以及App营销方面独家并且内行的建议。作者还向读者展示了用来做出超棒App的最新代码库、讨论了界面设计方面的抉择...</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/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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/47" typeof="skos:Concept" property="rdfs:label skos:prefLabel">心智模型</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Mon, 13 Feb 2012 12:05:02 +0000 C7210 48 at http://www.beforweb.com http://www.beforweb.com/node/48#comments 怎样通过更好的用户体验促进网站转化率的提升 http://www.beforweb.com/node/18 <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-user-experience-usabil.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>若干年下来发现一规律:无论周末还是节假,只要是可以从头到尾在家休息的日子,起床未必会比平日晚许久,做事的强度与密度也不一定次于平日的工作。这是一种纯粹的主动。平日早上那种对懒觉和闲适的迫切的渴望,一旦可以实现,其实反而不在乎了;这些渴望,大概只是对无法按照主观意愿自由安排时间的一种无奈和反感吧。</p> <p>说是这样说,但貌似蛮久没有周末两天都可以完整在家休息和做做事了,培训、贷款、装修一类公事私事绵延不绝的;也说不好眼下是疲劳呢,还是一种兴奋与憧憬。总之整体感觉还不算坏。</p> <p>废话不多说了。本次的译文回归到传统Web方面,涉及可用性、用户体验及转化率的话题。走着。</p> <p>对电子商务网站来说,可用性和用户体验的改善,对转化率的提高是有显著效果的。所谓的改善,不仅包括更好的视觉效果与内容架构,更重要的是,怎样以更专业化的、让人信赖的方式在正确的时间传达正确的信息,与潜在客户进行有效的沟通<a class="eLink" href="http://beforweb.com">。</a></p> <p>通过本文,你将了解到,为产品创建着陆页面时需要注意哪些涉及用户体验和可用性方面的因素,包括怎样使用户的注意力集中在最重要的信息上,以及怎样通过视频、用户打分等方式,有效提升转化率<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 专业化、可信赖的视觉风格及体验</h3> <p>&ldquo;保持简单&rdquo;确实是良好可用性的重要体现。有些方法原则是我们已经熟悉的,比如通过合理的设计与正确的文案,使链接能在最短的时间内向用户展示最准确的含义;保持网站结构的可预见性;针对用户的操作,提供清晰明确的状态回馈信息等。简单且有效的体验,可以使用户感到愉悦,并减少误操作。</p> <p>这些方法固然可以帮助用户更好的浏览和使用网站,但对提升转化率、扩大销量等方面来说,并没有很直接的推动作用。而且在很多时候,&ldquo;简化&rdquo;的设计思路会与销售和市场等方面的因素产生冲突。所以,对于电子商务方面的网站,还有一些更&ldquo;专业&rdquo;化的指导原则需要我们去理解和遵循。</p> <h4> 树立信任,注重信誉的打造</h4> <p>专业化的、让人信赖的视觉设计风格,对网站信誉的打造起着至关重要的作用。通常情况下,人们会对&ldquo;在线购物&rdquo;持有谨慎态度,尤其是在他们所不熟悉的购物网站中。所以首先要保证的就是让我们的网站看上去足够可信。以<a href="http://inkd.com/" rel="nofollow">inkd.com</a>为例,在视觉方面,通过对网格布局及其他一些设计原则的正确使用,即保持了内容的简洁可读,又塑造了专业可信的形象。</p> <p><a href="/sites/default/files/images/201110/inkd-design-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="inkd-design-conversion-user-experience-usability" src="/sites/default/files/images/201110/inkd-design-conversion-user-experience-usability.jpg" style="width: 500px; height: 478px; " /></a></p> <p>符合用户心智模型的功能及信息架构,也是提升可信度的重要因素。一定要确保用户在使用网站的过程中有充分的控制权。对于有经验的用户来说,他们可能会更多的使用搜索功能来快速寻找想要的产品,并且,通常还会对搜索结果做进一步的筛选和排序。而相对新手一些的用户可能更喜欢直接在首页就能看到产品的简介,或是更倾向于使用网站提供的导航菜单来寻找商品。</p> <p>要保证流程的连贯性,并符合用户预期。当用户在商品索引页面点击某商品时,接下要来进入的必须是商品详情页;除非用户主动从详情页面中跳出,否则接下来的流程将是购物车或结算相关页面。顺便说一句,最好同时向用户提供&ldquo;放入购物车&rdquo;和&ldquo;购买并结算&rdquo;这两种功能,因为当用户只买一种商品的时候,&ldquo;放入购物车&rdquo;的功能只会增加一步没有必要的操作,而且会增大用户取消购买的几率。</p> <h4> 在正确的地方传递正确的信息</h4> <p>在网购流程中,有大量的相关信息需要向用户呈现,通常包括商品本身、物流、支付方式及风险提示、隐私声明等方面。必须按照优先级对这些信息进行合理的排序,并在合理的步骤中显示。</p> <p>例如,在用户进行购买行为之前,要向他们提供支付方式、隐私声明等相关的信息,确保用户不会因为信息的缺失而产生顾虑,甚至取消购买。在网购流程中的每个环节里面,用户都有可能产生各种疑虑和问题。要做好用户研究,在有可能产生问题的地方,以尽量突出的方式提供准确的答案或辅助信息<a class="eLink" href="http://beforweb.com">。</a></p> <p><a href="/sites/default/files/images/201110/pruchase-scribbles-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="pruchase-scribbles-conversion-user-experience-usability" src="/sites/default/files/images/201110/pruchase-scribbles-conversion-user-experience-usability.jpg" style="width: 500px; height: 375px; " /></a></p> <div class="embed"><article id="node-278" class="node node-related-books" about="/node/278" 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/B00DSQZBP2/?_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/22.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/众妙之门-电子商务网站设计指南-德-Smashing-Magazine/dp/B00DSQZBP2/?_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/B00DSQZBP2/?_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> <p>对于产品特色展示一类的内容性质的图片,可以试着将它做的很大,甚至大到全屏的程度。也可以在介绍中放一张在宽度上与内容等宽的缩略图,用户点击之后可以看到大图。通常情况下,用户点击被文字内容环绕的图片,主要的初衷就是希望可以查看大图;这种动机下,即使加载大图需要较长时间,这种延迟也是符合他们预期的。</p> <p>下图中的页面,在布局和图片风格等方面做的都不错,但却忽视了怎样通过图片将用户的注意力集中在重要的地方,比如注册。注册按钮的位置虽然在大图中,布局也还算便于用户点击,但配色和尺寸规格都使它在页面中太过含糊,不够显眼。</p> <p><a href="/sites/default/files/images/201110/wrong-sign-up-design-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="wrong-sign-up-design-conversion-user-experience-usability" src="/sites/default/files/images/201110/wrong-sign-up-design-conversion-user-experience-usability.jpg" style="width: 500px; height: 291px; " /></a></p> <p>下面的页面截图来自<a href="http://www.fivesimplesteps.co.uk/">Five Simple Steps</a>,他们做的不错,重要操作的功能按钮很显眼,封面介绍的图片也更像是组成内容的一部分,而非广告。</p> <p><a href="/sites/default/files/images/201110/design-for-web-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="design-for-web-conversion-user-experience-usability" src="/sites/default/files/images/201110/design-for-web-conversion-user-experience-usability.jpg" style="width: 500px; height: 436px; " /></a></p> <h4> 使用突出的、合适的文案引导用户执行操作</h4> <p>现在,多数购物网站中,用来提供购买功能的按钮文案,通常都是&ldquo;立刻购买&rdquo;一类&mdash;&mdash;简单,准确,有鼓动性。而多年以前,这样的文案会被Web设计行业认为不够艺术化,不够隐喻化,不够酷,不够个性。显然,我们现在做的是对的。</p> <p>要清楚的告诉用户他们接下来应该做些什么,并在页面中以最精确的语言、最突出的方式让用户看到,比如用很大的按钮形式呈现的&ldquo;放入购物车&rdquo;、&ldquo;立刻结算&rdquo;等。同时,另外一些必要的但重要性略低的内容链接,如&ldquo;更多信息&rdquo;、&ldquo;查看详情&rdquo;、&ldquo;技术规格&rdquo;等,则应该使用相对较小的字号或较弱的字色来呈现。</p> <p><a href="http://www.marketingexperiments.com/" rel="nofollow">MarketingExperiments</a>曾经研究过文案用词会对转化率产生怎样的影响。他们通过电子邮件的方式来检验有多少读者可以被转化为付费订阅用户。邮件中的每个UI元素都是测试对象。最初,用来提示读者进行订阅以便阅读全文的按钮的文案是&ldquo;从这里继续(Continue here)&rdquo;。看上还去不坏。不过第二版的文案&ldquo;继续全文(Continue to article)&rdquo;使转化率提高了3.3%,而第三版的&ldquo;点击这里继续(Click to continue)&rdquo;的效果,高出了第二版将近10%.</p> <p>coolest-gadgets.com在为<a href="http://www.coolest-gadgets.com/20070606/dreamate-sleep-inducer/" rel="nofollow">商品详情页面</a>增加了亚马逊风格的&ldquo;立刻购买&rdquo;按钮后,销量翻了一倍。</p> <p><img alt="amazon-button-conversion-user-experience-usability" src="/sites/default/files/images/201110/amazon-button-conversion-user-experience-usability.jpg" style="width: 423px; height: 223px; " /></p> <h3> 视频 - 绝妙的武器</h3> <p>越来越多的购物网站开始在商品详情页面中添加视频,比起精致的照片图片,视频可以从更加实际的角度向用户展示商品,让用户感受商品的使用情景,或是了解其使用方法。</p> <p>德国的自行车零售商<a href="http://www.fahrrad.de/" rel="nofollow">Fahrrad.de</a>在他们那个专门用来拍摄商品视频的工作室中邀请了各个品牌的销售代理,并请他们在视频中讲述各自品牌的优势。有些公司甚至派来了代言他们品牌的世界冠军。最后,他们将录制好的视频放在对应的产品详情页面中供用户观看参考,效果很棒。</p> <p>视频未必需要达到工作室制作的专业级别。完全可以使用个人摄像设备进行拍摄,而且在效果上会比制作精良的广告片一样的视频让人觉得更加亲切真实,值得信赖。</p> <p>可以尝试些新奇的概念和主意。<a href="http://www.ebags.com" rel="nofollow">eBags.com</a>甚至为他们的商品视频建立了一个社区,用户可以为自己喜欢的视频投票。</p> <h3> 用户评分与点评</h3> <p>在旅游方面,60%的用户会基于他们在线上了解的信息做出决策。他们会访问点评类型的网站,查找最合适的目的地及酒店。类似的站点还可以在电子消费及美食等方面看到。</p> <p>这向我们提出了两个问题:</p> <ol> <li> 普通零售商的购物网站需要建立自己的评分系统吗?</li> <li> 怎样处理负面评价?</li> </ol> <p>第一个问题的答案很简单。通常情况下的答案是&ldquo;不&rdquo;。原因有很多,首先,如果这样做,那么没有哪家零售商是可信的,消费者会认为那些评价和推荐都是商业手段。只有很大的能吸引足够多用户的购物网站才能建立起真正有价值的评分系统。足够多的用户可以保证评分与点评的客观性,同时评分也可以成为商品排序的方式之一。</p> <p>第二个问题所能产生的后果是难以评估的。当负面评价出现时,比较明智的做法是将它保留在系统中,只要它不涉及违法的内容,就不要做删除一类的处理。这是个比较敏感的问题,涉及从零售商到供给商等一条商业链条上的共同利益。你可以将负面评价转达给客户或相关合作伙伴,在协商后共同处理或由相关环节的代表进行回应<a class="eLink" href="http://beforweb.com">。</a></p> <p><a href="/sites/default/files/images/201110/pricegrabber-conversion-user-experience-usability.jpg" rel="lightbox"><img alt="pricegrabber-conversion-user-experience-usability" src="/sites/default/files/images/201110/pricegrabber-conversion-user-experience-usability.jpg" style="width: 500px; height: 427px; " /></a></p> <div class="embed"><article id="node-279" class="node node-related-books" about="/node/279" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="深入理解网站优化:提升网站转化率的艺术与科学" src="http://beforweb.com/sites/default/files/images/products/23.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">深入理解网站优化:提升网站转化率的艺术与科学</a></h4> <p><a href="http://www.amazon.cn/深入理解网站优化-提升网站转化率的艺术与科学-培基/dp/B00E11HG2O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书揭示了改进任何类型网站所需的工具、测试思路、优化策略及其实现方法,以及最佳实践,使你的网站更有吸引力,能大大提升它的转化率。它结合网站分析、网站测试、网站易用性、在线营销4大方面的最佳实践,帮助你最大限度地从优化工作中获益...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/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/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/56" typeof="skos:Concept" property="rdfs:label skos:prefLabel">转化率</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/47" typeof="skos:Concept" property="rdfs:label skos:prefLabel">心智模型</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/57" typeof="skos:Concept" property="rdfs:label skos:prefLabel">电子商务</a></li></ul> Sat, 22 Oct 2011 12:11:56 +0000 C7210 18 at http://www.beforweb.com http://www.beforweb.com/node/18#comments