Be For Web - 交互模式 https://www.beforweb.c7210.info/taxonomy/term/113 en “理所当然”的设计 https://www.beforweb.c7210.info/node/372 <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="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-ui-ux-interaction-design-user-interface-ipod.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>想这篇想的不是一两天了,我也不知道为什么,反正是很喜欢作者想表达的东西;但是我不大确定翻译过来之后是否足够准确的把信息传达过来了。&ldquo;理所当然&rdquo;的设计,原文标题是<a href="https://medium.com/what-i-learned-building/ed6d5298ae0e">&ldquo;Of Course&rdquo; Design</a>,总之是很务虚很简短的一篇,很务虚很简短;也算茶余饭后那种类型吧。看看。</p> <p>这里进入译文。当我们试图设计出犹如魔法一般出彩的界面时,总会渴望找到某种令人&ldquo;Wow&rdquo;出来的元素;这种关注点未必是正确的。设计师们更应该关注那些&ldquo;理所当然&rdquo;的实现方式,让人觉得&ldquo;它自然应该是这样工作的&rdquo;。优秀的产品设计应该是高度显性而无形的,自然从容到不会引发任何异样的反应与感知。</p> <!--break--><p>寻求惊叹效应的问题在于,当你试图创新时,你的设计探索必然会聚焦在异于常规的交互模式上。而&ldquo;异于常规&rdquo;通常是不为人们所熟知、不符合直觉的;一旦把握不好,设计就会变得难于使用。</p> <p>而另一方面,Nest恒温器、iPod的转盘、iOS的双指放大手势、Wii的控制器、Google Map、下拉刷新,还有很多很多近年来大获成功的设计案例,它们身上都有一种非常强烈的&ldquo;理所当然&rdquo;的味道。回想一下你第一次使用这些产品时的情景,你可能根本就没有产生任何别扭的感觉,虽然它们带来的是&ldquo;全新&rdquo;的交互模式;而这才是它们在设计上最成功的地方。</p> <p>优秀的设计,其工作方式是显而易见的,同时能将有可能产生的困惑降低到最小程度,并且不会让用户注意到它的实现方式有多巧妙多聪明。这就是&ldquo;理所当然&rdquo;的设计,它不会在设计圈子之外引发话题,但用户就是需要它。</p> <p>很多时候,设计师们会由于希望自己在创新能力方面得到认同而去追求让人&ldquo;Wow&rdquo;出来的设计。但是当你在追求&ldquo;理所当然&rdquo;的设计时,则会真诚的希望自己的设计会悄然融入到&ldquo;背景&rdquo;当中;你会希望自己的设计看上去从来就应该在那、一贯在那,而且不会有任何其他更合适的方案。</p> <p>忘掉&ldquo;Wow&rdquo;吧,你不会无中生有的变出那样的东西。试着在你的产品中融入那些&ldquo;理所当然&rdquo;的东西,你的用户会喜欢的,纵使他们自己都不知道自己为什么会喜欢。</p> <div class="embed"><article id="node-269" class="node node-related-books" about="/node/269" 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/启示录-打造用户喜爱的产品-Marty-Cagan/dp/B004Y4QWMS/?_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/13.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/启示录-打造用户喜爱的产品-Marty-Cagan/dp/B004Y4QWMS/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">启示录:打造用户喜爱的产品</a></h4> <p><a href="http://www.amazon.cn/启示录-打造用户喜爱的产品-Marty-Cagan/dp/B004Y4QWMS/?_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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/113" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模式</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Mon, 09 Dec 2013 09:16:16 +0000 C7210 372 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/372#comments 浮动式表单标签(Label)的设计模式 https://www.beforweb.c7210.info/node/337 <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="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-form-label-redesign-mobile-app-interaction-design.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>正在听滚石的Miss You,够骚的歌;Slash有句名言,好歌要么让你想fight,要么让你想fuck;必须的啊。</p> <p>有点闹了,说正经的了。简短的一篇小文,介绍了一种有点意思的表单标签设计模式。</p> <p>这里进入译文。表单当中比较常见的内联标签(inline label,将label直接置于输入框中的模式)容易引起不少麻烦,但与此同时,移动设备屏幕的局限又迫使设计师不得不紧缩空间。这种局面比较尴尬。我们首先来分析一下传统内联标签的优缺点:</p> <!--break--><h4> 内联标签的优点</h4> <ul> <li> <strong>节省空间</strong>。这是内联标签最大的优势了。使用内联标签,设计师可以让标签与输入框保持在同一行,极大的节省空间,尽可能减少用户必须滚屏的次数。</li> <li> <strong>交互暗示</strong>。内联标签使输入框看上去更像是按钮一类的对象,有助于用户在进行触控操作时产生更直观的认知。</li> <li> <strong>更简洁</strong>。过去几年当中,我和很多设计师就内联标签的可访问性问题产生过争执。他们认为内联标签可以创造出一种更简洁的体验。</li> </ul> <h4> 内联标签的缺点</h4> <ul> <li> <strong>用户会失去上下文</strong>。内联标签最大的问题就是,一旦用户通过触摸或点击来聚焦到某个输入框上,那么内联标签就会消失,或是在用户进行输入之后消失,从而无法继续为用户提供上下文。</li> <li> <strong>占位符(Placeholder)并不能作为标签的替代品</strong>。从表现上看,内联形式的标签占用了本该属于占位符的位置,有些<a href="http://jsbin.com/aCUvOnI/18">demo</a>甚至为此而去掉了label标签,直接使用placeholder作为标签提示。这会引起极大的可用性问题。</li> <li> <strong>无法同时使用label和placeholder元素</strong>。与上一条的情况类似,当使用内联标签时,你便无法再使用placeholder,而placeholder原本的作用是为用户提供更多的提示信息。对于&ldquo;姓名&rdquo;这类字段来说,这不会产生什么问题,但对于那些需要特定格式的信息,例如日期或电话号码来说,无法使用placeholder便是一种损失。</li> </ul> <div class="embed"><article id="node-339" class="node node-related-books" about="/node/339" 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/B003XT6NS8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="Web表单设计:点石成金的艺术" src="http://beforweb.com/sites/default/files/images/products/66.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/Web表单设计-点石成金的艺术-罗博乌斯基/dp/B003XT6NS8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">Web表单设计:点石成金的艺术</a></h4> <p><a href="http://www.amazon.cn/Web表单设计-点石成金的艺术-罗博乌斯基/dp/B003XT6NS8/?_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>设计师<a href="http://studiomds.co/">Matt D Smith</a>分享了一种新颖的表单交互模式,也就是我们所说的浮动式标签。在这种模式中,当用户聚焦于某个输入框并输入内容之后,原有的内联标签就会&ldquo;浮&rdquo;到已输入的内容之上。见下图的演示:</p> <p><img alt="" src="/sites/default/files/images/201310-6/form-animation-label-ios-ios7.gif" style="height: 465px; width: 620px;" /></p> <h4> 浮动标签的优点</h4> <ul> <li> <strong>保持用户所处的上下文</strong>。这种模式最主要的优点就是当用户聚焦于字段并输入内容之后,仍可保持上下文信息可见。这带来了更好的可访问性,减少用户的负面体验。</li> <li> <strong>默认情况下可以保持简洁,便于视线扫描</strong>。这种模式在默认情况下就是原来的内联标签,只有当用户产生交互行为后才会成为浮动样式。</li> <li> <strong>优雅</strong>。这种模式很性感。这很难用语言描述,但它看上去很棒,动效也很细腻。</li> </ul> <h4> 浮动标签的缺点</h4> <ul> <li> <strong>仍然没有足够的空间来同时输出label与placeholder</strong>。因为在默认状态下,label仍然处于placeholder的位置,且没有额外的空间来放置placeholder了。</li> <li> <strong>浮动状态时的字号</strong>。标签处于浮动状态时,字号比较小,有时会难以阅读,不过从另外一个角度讲这也不算是问题,因为一旦用户开始与输入框进行交互,标签本身更多的是提供参考作用,而不是默认状态时的介绍引导作用。</li> <li> <strong>代码滥用</strong>。到目前为止,我所见过的一些demo当中,与浮动标签相关的代码对原有代码的可访问性和语义化都有一定程度的损害。</li> </ul> <div class="embed"><article id="node-340" class="node node-related-books" about="/node/340" 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/B004QWSS3O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="Web表单设计:创建高可用性的网页表单" src="http://beforweb.com/sites/default/files/images/products/67.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/Web表单设计-创建高可用性的网页表单-贾勒特/dp/B004QWSS3O/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">Web表单设计:创建高可用性的网页表单</a></h4> <p><a href="http://www.amazon.cn/Web表单设计-创建高可用性的网页表单-贾勒特/dp/B004QWSS3O/?_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> <ul> <li> <strong>渐进增强</strong>。浮动标签的模式看上去不错,不过在编写HTML代码时,记得要保证默认状态时的可访问性和可用性,例如在label的代码中使用for和tabindex一类属性,并注意其他所有的<a href="http://www.lukew.com/presos/preso.asp?19">表单设计最佳实践</a>。另外还可以使用Modernizr这样的工具来探测用户浏览器环境对于JS、动效和其他特性的支持程度,基于探测结果进行必要的渐进增强。</li> <li> <strong>可用性胜于简洁</strong>。placeholder属性的缺失会造成一种模棱两可的体验。需要记住的是,我们设计表单的目的是让人们尽可能轻松的填写信息。很多时候,设计师会为了追求简洁而牺牲掉必要的提示信息(想想看有多少次你在输入密码之后才知道它需要包含三个数字、两个惊叹号、12个大写字母...);有时提示是非常必要的。</li> <li> <strong>留意空间和尺寸</strong>。我见过的一些页面demo在移动设备上表现的很不好,因为输入框以及其中的标签、内容距离太近了。一定要考虑到手指触摸操作时的情况。</li> <li> <strong>易读性</strong>。浮动标签的字号较小,一定要确保用户可以读到。同时,要为默认状态时的内联标签提供适当的对比度。设计师们很喜欢白色背景上的浅灰色文字,如果过浅的话确实会引起问题。</li> </ul> <p>最后,我个人觉得浮动标签是一种很棒的模式,它可以克服内联标签的诸多缺点;我等不及想看看这个概念会如何发展下去了<a href="beforweb.com" class="eLink">。</a></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="/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/113" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模式</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/127" typeof="skos:Concept" property="rdfs:label skos:prefLabel">表单</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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Fri, 01 Nov 2013 08:02:16 +0000 C7210 337 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/337#comments 50个小时的可用性测试带给我的启示 https://www.beforweb.c7210.info/node/149 <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="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-usability-test-user-experience-design-research.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>今天下了好大的雪。上海这地方要积雪不是很容易,印象里只有2008年初的那次;更多时候即使漫天飞扬着雪花,最终还是好像下了场雨一样的到处是水。</p> <p>所以每到冬天的这种时日,就会想到小时候在北方的样子。高三那年入冬之后,喜欢在每个周六的晚上花一个小时左右的时间在外面骑车或是溜达,而且每逢这种时候只听枪花的Use Your Illustion 1,最后在听到Dead Horse或是Coma的时候回到家;若是遇到雪天,则必定是Metallica的黑专辑。走在积雪上面,路上没什么人和车,夜晚很黑,但雪被路灯映照的很白很亮,那样的情景在当时觉得好像做梦一样,如今回想起来却好像可以伸手抓住一样,有种温暖的感觉。</p> <p>说着说着还有点入神了;此时此刻是现实当中上海的晚间,外面依旧飘着雪,落在地上蛮尴尬的化去了。打住叭,来看这周的译文。原文作者总结了过去一年当中在一些项目的可用性测试里得到的经验收获,虽然有些东西看上去像是老生常谈,但经过实践检验之后所提炼出的要点也许正是我们平时自认为精通但很容易忽略掉的;至少我自己是这样的赶脚。走着叭。</p> <p>2012年里,我(英文原文作者)在<a href="http://www.think.eu">TH_NK</a>里大约花费了50个小时用于可用性测试,其余的时间则主要用来进行实际的设计工作,或是与客户、开发者、分析人员等进行沟通。在这些可用性测试当中,经过对被测者行为的观察以及与他们面对面的交流,我对一些一直以来虽有所了解、但在实际工作中却时常会忽视掉的设计原则有了更加贴近实践的认知,另外也发现了一些从前没有想到过的问题。时值岁末,我将这些经过实践验证的设计要点作以小结并分享给各位,希望能够为大伙来年的工作带来一定参考和借鉴的价值。</p> <!--break--><h3> 1.你不是你的用户</h3> <p>扪心自问,我们真的很容易忘记一件重要的事情:用户并不会按照我们设想的方式去行事。作为产品和设计方面的从业者,我们对自己的产品和服务太了如指掌了,对产品的功能逻辑及设计方案太心知肚明了;即使是作为第三方咨询顾问一类的角色,你也很容易把事情考虑的过于理所当然,认为&ldquo;外界&rdquo;的人能非常清楚的理解你所要表达的东西。</p> <p>而事实上,多数用户在实际上手使用之前,并没有和产品产生长久的关联;对于我们来说很显而易见的东西在用户看来很可能需要一定的辅助才能理解并正确操作。交互模式是否符合直觉,是否能够保持足够的一致性以符合用户逐渐建立起来的心智模型,用户界面是否会在必要的环节提供足够有效的辅助引导,这些都是我们在为核心功能打造设计方案的同时必须考虑到的问题。</p> <p>相关阅读:<a href="http://beforweb.com/node/27">具有引导性的移动应用界面设计模式</a></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> 2.导航至首页</h3> <p>在很多场可用性测试当中,我们都观察到,其实会通过点击页头logo回到首页的被测者很少;多数人都试图通过点击浏览器上的后退按钮来实现这个目标。虽然对于设计师来说,将logo链接至网站首页的做法是一种早已被普遍接受的规范,但事实上普通用户对这一点的认知似乎并不是那么的根深蒂固。</p> <h3> 3.通过下拉列表选择国家</h3> <p>我们曾经对一个面向全球的在线零售网站的支付环节进行过可用性测试,从中我们发现,在选择国家的时候,很少有用户懂得通过首字母快捷键来快速定位国家选项在下拉列表当中的位置,然后通过上下箭头按键进行调整并敲击回车或空格键来完成选择。绝大多数的用户仍然是使用鼠标将列表点开,上下寻找并点击选取。</p> <p>其实下拉列表易用性的问题(特别是那些所包含的选项超过了7个的列表)早就引发过广泛的争论,使用快捷键进行操作的方案也是为了解决这方面的问题而孕育而生的,但在现实当中我们仍然发现有那么多的用户实际上并不了解这种重要的导航操作。</p> <p><img alt="01-form-selection-drop-list-usability-test-user-experience-design.jpg" src="/sites/default/files/images/201212-5/01-form-selection-drop-list-usability-test-user-experience-design.jpg" style="width: 529px; height: 484px;" /></p> <p>Christian Holst在<a href="http://baymard.com/labs/country-selector">重新设计国家列表</a>一文中介绍过一种蛮有意思的解决方案,虽然我们还没有对这种方案进行过量化的测试,不过至少它看上去确实比传统的下拉列表方式要好用。</p> <h3> 4.拖放</h3> <p>虽然对于我们这些&ldquo;专家级&rdquo;的用户来说,拖放是一种很直白、很酷的交互方式,但在可用性测试当中我们发现,很多人根本无法意识到这种操作方法的存在。如果你的产品核心功能在很大程度上依赖于这类操作方式,那么所面对的风险也许会很大。</p> <p>如果确实要采用这样的交互模式来实现功能互动,那么要确保在界面当中为用户提供足够明显和易懂的操作提示,另外最好考虑提供某种相对传统替代方案,使用户在没有意识到拖拽方式的情况下依旧可以通过他所能了解的操作方法完成目标。</p> <p>依赖于某种&ldquo;高级&rdquo;操作方法才能实现重要功能的产品,总会在某种程度上将一部分用户拒之门外。追求更酷更出彩的交互设计模式,还是追求产品功能的易懂易用,很多时候这是个需要根据实际目标进行权衡的问题。</p> <p><img alt="02-google-drag-drop-usability-test-user-experience-design.jpg" src="/sites/default/files/images/201212-5/02-google-drag-drop-usability-test-user-experience-design.jpg" style="width: 615px; height: 488px;" /></p> <p>相关阅读:<a href="http://beforweb.com/node/86">iOS Wow 体验 -&nbsp;交互模型与创新的产品概念</a></p> <div class="embed"><article id="node-290" class="node node-related-books" about="/node/290" 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/B00EV562SY/?_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/35.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/界面设计模式-泰德维尔/dp/B00EV562SY/?_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/界面设计模式-泰德维尔/dp/B00EV562SY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书按照设计进程的大致顺序,细致地梳理了交互设计中的模式,每个模式都至少含有一个范例,以方便读者学习。第1版中文版在推出后大获好评,一路畅销;在第2版中,新增了社交媒体,移动设计的内容,切实地符合了当下的技术发展潮流...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 5.安全性</h3> <p>在之前提到的对某在线零售网站进行的可用性测试当中,我们发现用户对于&ldquo;安全性&rdquo;的态度是有所不同的。某些被测者愿意提交任何信息,而另外一些则非常谨慎,他们必须在充分相信该网站之后才会提交个人信息。所以,在网站的全局体验,特别是支付环节当中充分体现服务的安全可信是非常重要的。</p> <p>在这方面,亚马逊有一些非常经典的实践方法,例如登录按钮上的&ldquo;使用安全服务器登录&rdquo;文案。这些小细节可以潜移默化的提升产品在可信度方面的表现,使服务更加符合用户对于安全性的期望。</p> <p>其实安全性的重要程度是不言而喻的,我们在测试中体会最深的实际上是这类细节元素对于增强用户安全感所起到的作用。</p> <p><img alt="03-security-amazone-sign-in-server-usability-test-user-experience-design.jpg" src="/sites/default/files/images/201212-5/03-security-amazone-sign-in-server-usability-test-user-experience-design.jpg" style="width: 615px; height: 415px;" /></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> <h3> 6.使用合理的默认值</h3> <p>与用户输入息息相关的表单是提升转化率的重要交互元素(推荐阅读:<a href="http://beforweb.com/node/143">表单设计与转化率的提升</a>)。在很多时候,表单对于产品整体体验的提升也是非常关键的:完成目标的过程当中所需要的用户输入越少,体验越流畅。所以,在必须由用户完成输入的环节当中提供足够合理的默认值就变的非常重要了。</p> <p>另外,使用提示文案作为文本框的默认占位文字也是一种不错的实践方式。传统的标题label虽然在可读性方面没什么问题,但毕竟还是需要用户首先阅读它,然后再到相应的文本框当中进行输入;而这种方法可以让用户只聚焦于一个对象。</p> <p>相关阅读:<a href="http://beforweb.com/node/134">一个文本框搞定信用卡相关信息的输入</a></p> <h3> 7.基础</h3> <p>多数测试流程都表现出了一个共同之处,那就是用户会在简单和基础的操作当中产生愉悦的感受。确实,如果连最基本的可用性易用性都没法保证,那么片面追求炫酷复杂的交互模式显然是南辕北辙的。</p> <p>我们这些业内人士花了太多时间来研究和使用各种网站服务,我们过于精通那些相对高级的交互方式了,以至于忘记了其实对于多数普通用户来说,很多操作方法并没那么简单;在他们看来,网站和移动应用仍然是一类能够带来迷惑的东西。如果你的目标用户当中确实包括这类人群,那么最稳妥的方式就是使用那些能够让多数人立刻上手的、已经经过时间验证的基础设计模式,以增大他们完成目标任务的几率,提升产品的体验满意度。</p> <h3> 8.设计你的内容</h3> <p>对于某些类型的网站和应用来说,内容就是用户前来访问的关键目的所在。这里所说的内容包括文字、媒体文件以及任何可以支撑起核心任务的信息构成。要打造引人入胜的产品体验,内容本身同样是需要精心设计的。</p> <p>同样的内容,输出到不同的页面框架当中,最终的视觉效果也会具有很大的差异,也许有些页面看上去非常精干,而另外一些则显得缺乏凝聚力。在设计内容时,要确保其自身具有良好的语义化结构,标题清晰,段落明确,层次分明,只有在这个基础上才能有效的根据整体页面环境设计出更易读、更具适应性的内容。</p> <p><a href="https://www.gathercontent.com">Gather Content</a>是一款很棒的内容编辑工具,你可以参考他们在信息管理、组织和呈现方面的一些做法。</p> <p><img alt="04-content-information-gather-content-cms-usability-test-user-experience-design.jpg" src="/sites/default/files/images/201212-5/04-content-information-gather-content-cms-usability-test-user-experience-design.jpg" style="width: 615px; height: 586px;" /></p> <h3> 9.最小化的思想</h3> <p>试着在单位时间周期当中尽力做好一件事,而不是面面俱到。将全部力量集中在足够验证你们想法的最小产品形态上,排斥掉有可能产生杂音或牵扯团队精力的非重要元素。</p> <p>就像我们前面提到的拖放操作的例子,如果你在可用性测试当中发现多数用户根本不了解某种类型的操作方式,而这种方式又不是完成目标任务所真正必须的,那么不妨砍掉它。与其在这些方面花费设计与开发的资源,还不如把精力放在更加重要的事情上,让产品对目标用户当中的大多数更易用。</p> <p>推荐阅读:</p> <ul> <li> <a href="http://beforweb.com/node/125">精益创业 - 用户体验设计的新包装</a></li> <li> <a href="http://beforweb.com/node/85">最小化可用性设计</a></li> </ul> <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> 10.正确的工具,正确的方向</h3> <p>作为UX圈子里的人,我们当中的多数都很着迷于各种设计工具及新技术。你时常可以看到一些设计师纯粹只是为了用一种工具而用用一种工具。学习新技术与新工具是需要花费很多时间与精力的,我个人认为,当你准备尝试某种新东西之前,至少要确保自己不是为了用它而用它。</p> <p>我们的工作归根结底不是为了制作交付物,而是作为产品流程的一个环节尽力将项目朝着目标方向去推动。问问自己&ldquo;我们现在做的事情对整个产品和业务来说能带来怎样的价值?&rdquo;,如果没法准确的回答,那么也许应该停下来思考一下了。</p> <p>坦诚的讲,其实50个小时的可用性测试并不算很多,不过即使时间再少、量再小,它能给产品人员及设计师们带来的意义和价值也是不容低估的。尽量抽些时间,向一些目标用户展示你们当前的产出,听听他们对你们的产品概念及设计方案的想法和反应,看看你们当前在做的事情是否在正确的轨道上&mdash;&mdash;你往往可以从可用性测试当中了解到很多之前没有发现的潜在问题,或是挖掘出之前根本无法意料到的重要需求。</p> <p>推荐阅读:</p> <ul> <li> <a href="http://beforweb.com/node/105">初创型团队容易在用户体验方面犯的十个错误</a></li> <li> <a href="http://beforweb.com/node/116">优秀的用户体验设计师应该做好的五件事</a></li> <li> <a href="http://beforweb.com/node/24">产品早期的原型设计与用户测试</a></li> </ul> <div class="embed"><article id="node-289" class="node node-related-books" about="/node/289" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="妙手回春:网站可用性测试及优化指南" src="http://beforweb.com/sites/default/files/images/products/34.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">妙手回春:网站可用性测试及优化指南</a></h4> <p><a href="http://www.amazon.cn/妙手回春-网站可用性测试及优化指南-克鲁格/dp/B003XM3TF0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者Steve Krug继畅销书Don't Make Me Think后推出的又一力作。书中详细阐述了一种简化的网站可用性测试方法,让任何人都能够尽早并频繁地对其网站、应用程序和其他产品进行可用性测试,从而将最严重的可用性问题消灭在萌芽状态...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </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/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/37" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性测试</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/113" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模式</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/124" typeof="skos:Concept" property="rdfs:label skos:prefLabel">最小化</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/77" 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, 30 Dec 2012 03:43:39 +0000 C7210 149 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/149#comments 移动应用设计案例 - 打造初创型产品的用户体验 https://www.beforweb.c7210.info/node/124 <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="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-mobile-user-experience-ux-design-iphone-ios-app-startup-1.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://www.jasonshen.com/2012/the-well-crafted-mobile-app-an-ux-design-case-study-for-startups/">原文</a>作者,来自Frog的一名交互设计师,讲述了她与朋友在共同设计开发拼车服务<a href="https://itunes.apple.com/us/app/ridejoy/id545566555?mt=8">Ridejoy的iPhone客户端</a>的过程中所遇到的一些挑战以及相关的解决方案。前戏到这里,进入正文。</p> <p>Ridejoy拼车服务在Web端上线运营了几个月之后,大家对当前的用户基础有了比较清晰的认知。而对于Ridejoy的iPhone应用来说,我们希望它不仅仅是网站的移植版本,它所能带来的应该是更符合移动上下文环境的全新用户体验。</p> <p>基于这样的产品思路,我们识别出了三个关键性的挑战:</p> <ul> <li> 怎样鼓励驾车者及搭乘者发布更多的信息?</li> <li> 怎样快速有效的帮助驾车者及搭乘者进行匹配?</li> <li> 怎样促进那些已被匹配的驾车者及搭乘者更有效的完成约定?</li> </ul> <!--break--><h3> 挑战1:鼓励用户发布信息</h3> <p>大量的运载与搭乘信息是成功的拼车服务所必须具备的基础。根据我们的了解,当前独自驾车的人以及寻求低成本搭车的人都不在少数,但如果他们根本没有兴趣通过Ridejoy应用发布自己的需求信息,那么所谓的匹配及整个的拼车服务便无从谈起。</p> <p>要调动用户的积极性,我们必须让用户充分了解&ldquo;拼车&rdquo;活动能够带给他们的价值与收益。</p> <p>首先,我们分析了驾车者通常会出于怎样的目的来发起拼车活动,并将这些原因列成一份清单。接下来,我(英文原文作者)对应着这份清单绘制了一些简单的草图,将有可能符合驾车者需求的功能和内容初步的勾勒出来。然后,大家对这些草图进行讨论评估,将其中我们认为最可行的5个概念进一步落实到线框原型当中,并向一些目标用户(独自驾车者)进行了展示,通过他们的反馈来验证我们的假设。</p> <p><img alt="product-concept-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" src="/sites/default/files/images/201210-2/01-s-product-concept-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" /></p> <p>最终我们发现,以下3个方面因素对驾车者是否会发起拼车活动起到重要的影响作用:</p> <ol> <li> 搭乘者的形象(照片)</li> <li> 潜在搭乘者的数量</li> <li> 金钱收益</li> </ol> <p>这轮研究和验证最终帮助我们设计出了目前产品当中的&ldquo;热门目的地(Popular Destinations)&rdquo;流程。用户可以在其中浏览到拼车需求最旺盛的地区,还有以这些地区为目的地的驾车者及搭乘者的个人资料。在用户尚未确定旅程或确定是否发起拼车活动的情况下,这些方面的资讯可以最有效的帮助和&ldquo;促使&rdquo;用户作出判断。</p> <p>相关阅读:<a href="http://beforweb.com/node/33">草图的艺术 - 草图原型实战技巧</a>、<a href="http://beforweb.com/node/24">产品早期的原型设计与用户测试</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> 挑战2:加快匹配速度</h3> <p>人们不喜欢等待,我们必须帮助驾车者及搭乘者更快速有效的找到与自己的需求相匹配的信息。在Ridejoy网站版本的服务中,我们意识到,用户在发起拼车活动时填写的信息越完整,匹配的效率越高。问题在于,使用移动客户端的用户根本不愿或没有时间去填写详细完整的信息。</p> <p>为了解决这个问题,我们首先列出了驾车者及搭乘者有可能愿意填写的信息。经过几番讨论,我们最终确定下来4个必填信息,同时还提供了一些比较灵活的设置方式。例如,启程日期是用户在发起活动时必须填写的信息;用户可以在这里指定一个具体日期,也可以选择一个时间段;第二种方式特别适用于行程计划尚未最终确定的用户。</p> <p><img alt="infomation-input-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" src="/sites/default/files/images/201210-2/02-infomation-input-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" /></p> <p>另外,拼车与其他交通方式有所不同,用户在浏览活动资讯列表时,不仅会关注时间和目的地方面的信息,同时还会非常在意和自己搭乘同一辆车的其他乘客的情况。为此,我们还允许用户在发起活动时填写这方面的补充信息。你喜欢安静些的还是热闹些的旅程?你是持有AAA卡的会员吗,是否需要Wifi?完善这些方面的信息将进一步加快活动发起者及参与者的匹配速度。</p> <h3> 挑战3:促进约定的完成</h3> <p>拼车是一种非正式的、基于参与者自发执行的活动,整个过程中时常会出现各种各样的问题。搭乘者找到一条合适的线路以及相关的拼车活动后,需要和驾车者通过电话或短信频繁的沟通确认。作为值得信赖的第三方服务提供者,我们有责任将这方面的功能整合到应用当中,使用户之间的后续交流更加集约化规范化。</p> <p>活动参与者之间的互相问答是避免不了的,我们要做的是提供一些方式,使这方面的交流过程尽量简化。谁也不愿意看到在一番冗长的沟通和准备工作之后,其中某一方退出了拼车计划。</p> <p>为此,我参考了其他一些<strong>协同消费</strong>(Collaborative Consumption)类型的应用产品,例如<a href="https://www.airbnb.com">Airbnb</a>和<a href="http://www.yardsalesearch.com">Yardsale</a>等等。在尝试了多种流程及界面布局方式之后,我们决定采用一种轻量级的确认序列机制,它的操作界面类似于大家所熟悉的短消息界面。无论驾车者还是搭乘者都可以发起确认;例如,旅程结束后,一旦搭乘者完成了支付,驾车者收到款项,此次拼车活动就会被确认完成。</p> <p><img alt="confirm-flow-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" src="/sites/default/files/images/201210-2/03-confirm-flow-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" /></p> <p>确认流程可以发生在多人甚至是多次行程之间,例如,你可以搭载一名乘客到洛杉矶,然后又搭载另外两名不同的乘客返程,整个活动可以通过一套确认流程进行控制。</p> <p>这个机制引导出了最终产品当中的仪表盘(dashboard)的设计方案,在这里,用户可以查看自己所有的行程、提醒、确认信息等方面的资讯。</p> <p><img alt="dashboard-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" src="/sites/default/files/images/201210-2/04-dashboard-wireframe-prototype-startup-iphone-app-ux-design-case-study.png" /></p> <div class="embed"><article id="node-264" class="node node-related-books" about="/node/264" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone应用用户体验设计实践与案例" src="http://beforweb.com/sites/default/files/images/products/08.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone应用用户体验设计实践与案例</a></h4> <p><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书简述了iPhone硬件和应用风格,逐步介绍了如何进行前期的用户研究和竞争性分析,以及提升iPhone应用用户界面和视觉设计的最佳实践。全书通过13个案例分析展示了知名设计师的实践过程,为读者了解应用背后的设计过程提供了第一手资料...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 我们学到了什么</h3> <p>以上就是我们在Ridejoy应用的用户体验设计工作中遇到的几个最大的挑战。在这个过程中,我学到了一些重要的东西:</p> <ul> <li> <strong>原型-测试-原型-测试</strong>:我们的团队花了大量的时间去讨论用户需求,并提出相应的候选解决方案,然后通过线框原型及高保真交互原型与真实用户进行交流测试,探索用户的实际需求,验证我们的假设,进行相应的修改,并不断的进行这样的迭代循环。(相关阅读:<a href="http://beforweb.com/node/105">初创型团队容易在用户体验方面犯的十个错误</a>、<a href="http://beforweb.com/node/125">精益创业 - 用户体验设计的新包装</a>)</li> <li> <strong>逐渐探索交互模式</strong>:我们在设计过程中尝试了不同种类的导航模式,例如标签栏(Tab Bar)、侧边栏(Sidebar)、仪表盘(Dashboard)等。我们为每种模式都绘制了草图,把它们钉在墙上,完整的把各种模式的流程脚本都跑下来,讨论哪种模式可以为Ridejoy带来最佳体验<a class="eLink" href="http://beforweb.com">。</a></li> <li> <strong>交付设计稿</strong>:作为一个希望在各种细节中做到完美的设计师,我在这方面着实有过不少纠结,我不知道用户能否理解当前的设计方案,我不知道&ldquo;当前没有参加任何拼车活动&rdquo;的界面是否还有优化空间...无论到什么时候,心里始终觉得还有一些东西可以调整。但项目有其自身的产出与迭代节奏,把握好交付设计稿的时间点,这是很重要的。(推荐阅读:<a href="http://beforweb.com/node/85">最小化可用性设计</a>)</li> </ul> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</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/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户研究</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/37" typeof="skos:Concept" property="rdfs:label skos:prefLabel">可用性测试</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/119" typeof="skos:Concept" property="rdfs:label skos:prefLabel">迭代</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/113" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模式</a></li></ul> Sun, 21 Oct 2012 03:10:15 +0000 C7210 124 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/124#comments 从iOS到Metro - 重新设计应用的交互模式 https://www.beforweb.c7210.info/node/92 <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="https://www.beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-windows-8-metro-app-tablet-phone-win-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"><p>上周有幸玩了一会Metro的平板。单说视觉风格,仍是我的大菜,但真正用起来却不觉得舒畅,尤其是横向浏览内容列表的时候,视线不停的在X轴与Y轴之间切换,很快感到头晕目眩,这一切似乎比瀑布流更加凶残。</p> <p>当然,仅仅是个人感受;我不想这样就得出Metro中看不中用的结论。做这篇译文大致可以代表我的立场,即相比于iOS来说,Windows这套东西确实有很多独到的精华在里面;我想通过这样的文章加深认识,了解一些表象背后的东西。也希望本文可以给那些已经熟悉iOS,但对Metro及Windows平板仍属于初识的朋友们一个小小的起点。接下来让我们进入正文,一篇与来自微软官方的案例文章。</p> <p>iOS是个不错的平台,人们在其中创造了各类触控优先、有趣且吸引人的应用。不过,随着Windows 8的登场,设计师和开发者们又多了一个释放创意能量的新舞台。</p> <p>在本篇案例当中,我们将帮助各位使用Metro风格的设计原则对原有的iOS应用设计方案进行重新构思,大家会了解到怎样将iPad当中一些常见的界面元素及体验模式转换成为Metro风格,以打造全新的Windows 8应用。我们将对同一款应用在两个平台中的不同设计方式进行对比,帮助各位了解怎样将你的应用与Windows 8以及Metro设计原则进行完美的融合<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p>我们将要研究的是一款相片日志应用,用户可以在线查看和管理他们的照片或视频。下图是这款应用的Metro版本:</p> <p><a href="/sites/default/files/images/201207/photo-journal-metro-style-application.png" rel="lightbox"><img alt="photo-journal-metro-style-application" src="/sites/default/files/images/201207/photo-journal-metro-style-application.png" style="width: 500px; height: 323px;" /></a></p> <p>这款应用最初是为iPad设计的,如下图所示。</p> <p><a href="/sites/default/files/images/201207/photo-journal-ios-ipad-application-design-elements.png" rel="lightbox"><img alt="photo-journal-ios-ipad-application-design-elements" src="/sites/default/files/images/201207/photo-journal-ios-ipad-application-design-elements.png" style="width: 500px; height: 382px;" /></a></p> <p>从设计及体验模式的角度出发,该应用可以大致被解构为六个方面:</p> <ol> <li> <strong>布局和导航</strong></li> <li> <strong>命令与行为</strong></li> <li> <strong>契约(Contract):搜索、分享及其他</strong></li> <li> <strong>触控与手势</strong></li> <li> <strong>屏幕定向与视图模式</strong></li> <li> <strong>消息通知</strong></li> </ol> <p>接下来我们将依次对这六个方面的要素进行分析与对比。</p> <h3> 布局与导航</h3> <h4> 聚焦于内容</h4> <p>这款相片日志应用要有能力对两方面的内容进行良好的呈现,即展示用户的相片以及与这些相片相关的最新社交动态。在创建Metro风格应用时,我们的第一个目标就是将原有iPad应用当中的那些与核心功能和内容没有直接关联的界面元素统统移除,例如顶部的导航栏、底部的页面指示符、标签栏等。不用担心导航的问题,我们在后文中会谈到如何让用户在需要的时候调出app bar。</p> <p><img alt="ipad-app-navigation-tab-bar.png" src="/sites/default/files/images/201207/ipad-app-navigation-tab-bar.png" style="width: 350px; height: 221px;" /></p> <p class="figure-caption">iPad版本:</p> <ul class="figure-caption"> <li> A.导航栏</li> <li> B.内容</li> <li> C.页面指示符</li> <li> D.标签栏</li> </ul> <p><img alt="metro-style-content-logo-elements.png" src="/sites/default/files/images/201207/metro-style-content-logo-elements.png" style="width: 350px; height: 221px;" /></p> <p class="figure-caption">Metro版本:</p> <ul class="figure-caption"> <li> B.内容与Logo</li> </ul> <h4> 相片内容的呈现方式</h4> <p>两个版本都会按照月份次序来组织内容,不过对于月份的表现方式有所差异。在iPad版本中,相片会根据上传月份的不同而被划分到12个区块当中。在Metro版本中,我们倾向于以更加直接的方式呈现出更多的相片及社交方面的信息,使用户对内容的上下文环境具有更强的认知。</p> <p><img alt="ipad-app-month-photo-stack-gallery-social.png" src="/sites/default/files/images/201207/ipad-app-month-photo-stack-gallery-social.png" style="width: 350px; height: 324px;" /></p> <p class="figure-caption">iPad版本:每个月的相片都以堆栈的形式呈现,用户只能看到其中的一张图片。</p> <p><img alt="metro-app-photo-social-content-context-feature" src="/sites/default/files/images/201207/metro-app-photo-social-content-context-feature.png" style="width: 350px; height: 282px;" /></p> <p class="figure-caption">Metro版本:针对当月内容,呈现更多的相片,包括标题、评论数量等信息;用户可以在首屏中浏览到更多的&ldquo;高亮&rdquo;内容。</p> <h4> 将树形信息结构扁平化</h4> <p>iPad版本中的信息结构及对应的导航机制是典型的树形模式;在Metro版本中,我们要使其扁平化,减少导航操作,让用户最关注的内容尽量多的呈现在首屏当中。为了实现这一目标,我们将去除iPad中的标签栏,将一部份评论内容直接输出到首屏。</p> <p><img alt="ipad-app-tab-bar-photo-content" src="/sites/default/files/images/201207/ipad-app-tab-bar-photo-content.png" style="width: 350px; height: 277px;" /><img alt="ipad-app-tab-bar-comment-content" src="/sites/default/files/images/201207/ipad-app-tab-bar-comment-content.png" style="width: 350px; height: 275px;" /></p> <p class="figure-caption">iPad版本:</p> <ul class="figure-caption"> <li> A.相片视图</li> <li> B.评论视图</li> </ul> <p><a href="/sites/default/files/images/201207/metro-app-comment-photo-content-home-screen-flatten.png"><img alt="metro-app-comment-photo-content-home-screen-flatten" src="/sites/default/files/images/201207/metro-app-comment-photo-content-home-screen-flatten.png" style="width: 500px; height: 316px;" /></a></p> <p class="figure-caption">Metro版本:</p> <ul class="figure-caption"> <li> 将评论与相片内容整合在同一个界面视图中</li> <li> hub风格的设计方式,让最具相关性的内容自成体系</li> <li> 要查看更多评论内容,用户可以点击该内容组的标题,即&ldquo;Recent comments&rdquo;</li> </ul> <h4> 让导航操作更加符合&ldquo;<a href="http://beforweb.com/node/66#a2" target="_blank">直接操纵</a>&rdquo;的理念</h4> <p>&ldquo;直接操纵&rdquo;的理念可以让用户以更加符合直觉的方式与内容及导航系统进行互动。在Metro风格的应用中,我们要尽可能多的在恰当的地方贯彻这样的交互设计思想。例如使用Windows提供的<a href="http://msdn.microsoft.com/en-us/library/windows/apps/br229690.aspx">SemanticZoom</a>对象作为导航控件,可以让用户的操作更符合心智,更有效率。</p> <p><img alt="ipad-app-navigation-bar-popup-list" src="/sites/default/files/images/201207/ipad-app-navigation-bar-popup-list.png" style="width: 350px; height: 222px;" /></p> <p><img alt="ipad-app-navigation-bar-related-content-view" src="/sites/default/files/images/201207/ipad-app-navigation-bar-related-content-view.png" style="width: 350px; height: 247px;" /></p> <p class="figure-caption">iPad版本:点击导航栏中的&ldquo;Years&rdquo;按钮,弹出导航列表,选择某个年份进入相关视图界面。</p> <p><img alt="metro-app-navigation-pinch-zoom" src="/sites/default/files/images/201207/metro-app-navigation-pinch-zoom.png" style="width: 350px; height: 222px;" /></p> <p><img alt="metro-app-navigation-pinch-zoom-content-view" src="/sites/default/files/images/201207/metro-app-navigation-pinch-zoom-content-view.png" style="width: 350px; height: 247px;" /></p> <p class="figure-caption">Metro版本:在相片内容上使用双指捏合的手势,即可查看全部内容所对应的年份及月份。这种方式允许用户在任何年份和月份的内容中进行快速跳转。而且在这个视图中,月份条目使用了不同的背景色,其中较浅的代表该月份当中没有内容,使用户无需进入下层视图即可了解这一信息。这套机制当中不包含任何&ldquo;实体&rdquo;的导航元素,用户可以通过与内容的直接交互操作来进行导航。</p> <h3> 命令与行为</h3> <h4> 将与当前界面相关的控制元素放到app bar当中</h4> <p>当我们重新设计那些与上下文相关的行为与控制元素时,也应该遵循&ldquo;内容优先&rdquo;的原则,只将那些与当前界面内容相关的控制元素放在app bar当中。这种方式可以避免用户界面被过多的功能图标复杂化,无论用户当前处于哪个视图,他们都可以从界面底部或顶部调出app bar,执行与当前内容相关的控制行为。所有Metro风格的应用都应该支持这种交互机制,以便帮助用户建立起一套普遍适用的行为预期,提升应用及平台整体的易用性及体验一致性。</p> <p>另外,可以将那些最常用的命令放在靠近左右边缘的地方,这样最容易被手指触摸到。</p> <p>以&ldquo;删除相片&rdquo;为例,我们来看看这个操作在两个平台当中的区别:</p> <p><img alt="photo-delete-action-ipad-app" src="/sites/default/files/images/201207/photo-delete-action-ipad-app.png" style="width: 350px; height: 465px;" /></p> <p class="figure-caption">iPad版本:点击导航栏右侧的相关功能按钮,进入编辑模式,然后点选相片,作为删除等操作的对象。</p> <p><img alt="photo-delete-action-windows-metro-app-bar" src="/sites/default/files/images/201207/photo-delete-action-windows-metro-app-bar.png" style="width: 350px; height: 465px;" /></p> <p class="figure-caption">Metro版本:</p> <ul class="figure-caption"> <li> A.默认情况下,app bar处于隐藏状态,使整个界面环境更加具有真实感,并使用户的注意力保持在内容上面。用户可以通过轻扫(swipe)将app bar从界面底部或顶部调出。</li> <li> B.调出app bar之后,用户可以点选界面当中的内容对象,例如相片;此时,与相片相关的命令就会出现在app bar当中。也就是说,这里具体会出现哪些控制元素,取决于用户是否选取了内容对象,以及选取了哪种类型的内容对象。这类具有上下文相关性的控制元素通常被放置在app bar的左侧,而具有全局性质的命令则是在右侧。</li> </ul> <h3> 契约:搜索、分享及其他</h3> <h4> 通过搜索契约使搜索体验更加集约化</h4> <p>在Metro应用中,我们使用<a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh868180.aspx">搜索契约</a>,而不是传统意义上的那种永远会停留在界面某个位置上的搜索控件。用户可以在任何支持搜索契约的应用里持续的使用侧边charms bar当中的搜索功能,而搜索结果也会以更加符合内容自身特质的方式自然的呈现出来。</p> <p>首先,我们来看看在相片日志应用内部搜索相片的情况:</p> <p><img alt="ipad-app-search-photo" src="/sites/default/files/images/201207/ipad-app-search-photo.png" style="width: 350px; height: 222px;" /></p> <p class="figure-caption">iPad版本:</p> <ul class="figure-caption"> <li> 只能通过首页导航栏中的搜索控件执行搜索</li> <li> 用户输入关键词时,搜索建议会动态输出,用户可以直接从中进行选择</li> </ul> <p class="figure-caption">Metro版本:</p> <ul class="figure-caption"> <li> 用户调出charms bar使用搜索,应用列表中默认选中的就是当前的相片日志应用。</li> <li> 当用户开始输入搜索关键词时,托盘中会即时出现搜索建议。用户提交了查询关键词后,可以看到完整的搜索结果视图。</li> </ul> <p>接下来,我们看一看在相片日志应用外部搜索该应用内相片的情况;这项功能不适用于iPad版本。这个例子演示了怎样在其他应用当中通过搜索托盘里的应用选择来实现跨应用搜索。该功能允许用户在任何时间、任何应用内搜索任何想要的信息。</p> <p><a href="/sites/default/files/images/201207/metro-style-app-search-pane-charms-bar.png" rel="lightbox"><img alt="metro-style-app-search-pane-charms-bar" src="/sites/default/files/images/201207/metro-style-app-search-pane-charms-bar.png" style="width: 500px; height: 150px;" /></a></p> <p>如上图所示,用户当前处于<a href="mailto:Tweet@Rama">Tweet@Rama</a>应用的环境当中,出于某种需求,该用户希望搜索相片应用当中所有包含&ldquo;Barcelona&rdquo;关键词的相片。输入了关键词之后,用户在搜索托盘中选择相片应用,使其成为搜索结果提供者,这时相片应用就会自动加载,并显示相关的搜索结果。这种方式使得用户无需手动在当前运行的应用与搜索目标应用之间进行切换。</p> <h4> 通过分享契约与更多的人互通信息</h4> <p>对社会化媒体的整合是很多应用当中的关键要素。对于iPad应用,设计师通常要对应用所需支持的社交媒体频道进行选择,例如Twitter或Facebook等,然后开发人员会将这些服务一个个的整合到应用当中。当其中某些服务的API接口发生变化的时候,开发人员还必须调整应用当中的相关代码,以确保其正常运作。</p> <p>而在Metro风格的应用当中,我们会使用<a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465261.aspx">分享契约</a>。这种技术方案简化了设计与开发方面的工作,因为我们不需要为用户有可能用到的社会化服务而将它们与每个单独的应用都逐一整合起来。不仅是社会化服务,用户还可以将信息保存共享至平台上所有那些使用了分享契约的应用,而开发者们则无需担心外部服务的接口问题。站在用户的角度,他们可以在charms bar这个固定的地方完成有关分享的操作。</p> <p>下面是一个将相片日志应用中的图片共享给其他应用服务的例子:</p> <p><a href="/sites/default/files/images/201207/ipad-app-photo-share-with-other-app-service.png" rel="lightbox"><img alt="ipad-app-photo-share-with-other-app-service" src="/sites/default/files/images/201207/ipad-app-photo-share-with-other-app-service.png" style="width: 500px; height: 182px;" /></a></p> <p class="figure-caption">iPad版本:用户需要点击导航栏右侧的相关动作按钮,并从展开的列表中选择&ldquo;分享到Facebook&rdquo;。如果要使应用支持更多的分享服务,开发人员必须在该应用当中逐一增添。</p> <p><a href="/sites/default/files/images/201207/metro-app-photo-share-with-other-app-service.png" rel="lightbox"><img alt="metro-app-photo-share-with-other-app-service" src="/sites/default/files/images/201207/metro-app-photo-share-with-other-app-service.png" style="width: 600px; height: 126px;" /></a></p> <p><a href="/sites/default/files/images/201207/detail-metro-app-photo-share-with-other-app-service.png" rel="lightbox"><img alt="detail-metro-app-photo-share-with-other-app-service" src="/sites/default/files/images/201207/detail-metro-app-photo-share-with-other-app-service.png" style="width: 600px; height: 380px;" /></a></p> <p class="figure-caption">Metro版本:</p> <ul class="figure-caption"> <li> 用户始终可以在固定的地方找到分享方面的功能,无论他们正在使用哪款应用</li> <li> 当前设备中所安装的所有支持分享契约的应用,都会出现在搜索托盘中的应用列表里,如上面大图当中的Socialite、<a href="mailto:Tweet@Rama">Tweet@Rama</a>、Notespace、PaintPlay等。</li> <li> 用户可以分享多种类型的内容,例如链接、相片,或是将信息存放在某些记事本类的应用中。</li> <li> 用户最常用到的服务会出现在应用列表的顶端,提升操作效率。</li> </ul> <p>我们同样可以将当前的相片日志应用通过分享协议注册到分享托盘的应用列表当中,这样就可以让用户将其他应用当中浏览到的图片内容共享到相片日志应用当中了。</p> <p><a href="/sites/default/files/images/201207/metro-app-photo-share-back.png" rel="lightbox"><img alt="metro-app-photo-share-back" src="/sites/default/files/images/201207/metro-app-photo-share-back.png" style="width: 600px; height: 186px;" /></a></p> <p>有关应用间内容共享的详细信息,可以到<a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465251.aspx">Guidelines and checklist for sharing content</a>当中查询。</p> <h4> 使用文件选择器从不同的地方获取文件</h4> <p>在传统桌面设备中,用户可以通过文件选择器(File picker)查看本地存储设备当中的文件或路径。在移动环境中,所有支持文件选择器契约的Metro应用同样可以实现这样的操作。</p> <p>下面的例子演示了用户怎样在相片日志应用中上传一张本地存储的相片:</p> <p><a href="/sites/default/files/images/201207/ipad-app-upload-photo-from-local.png" rel="lightbox"><img alt="ipad-app-upload-photo-from-local" src="/sites/default/files/images/201207/ipad-app-upload-photo-from-local.png" style="width: 600px; height: 146px;" /></a></p> <p class="figure-caption">iPad版本:用户可以在本地的相册或一些外部服务当中选择图片。</p> <p><a href="/sites/default/files/images/201207/metro-app-upload-photo-from-local.png" rel="lightbox"><img alt="metro-app-upload-photo-from-local" src="/sites/default/files/images/201207/metro-app-upload-photo-from-local.png" style="width: 600px; height: 151px;" /></a></p> <p class="figure-caption">Metro版本:</p> <ul> <li> A.用户在app bar当中点击上传按钮,系统打开文件选择器界面。该界面及其打开方式在任何上下文环境中都会保持一致。</li> <li> B.点击&ldquo;Files&rdquo;标题,用户就可以查看到所有支持文件存取的路径。</li> <li> C.用户可以在一个路径中选择多张相片进行上传,界面底部的缩略图列表会反映出当前的选取状态。</li> </ul> <p>我们还可以进一步利用Metro应用独特的功能特性,让不同的应用访问和使用彼此所包含的文件,例如在其他应用中使用相片日志应用里的图片。通过这样的功能,用户无需首先在相片应用中将图片下载到本地,然后再上传到另外的应用中;系统会将所有支持文件选择器契约的应用都看作是一个可以在任何地方读取的文件存储位置。</p> <p><a href="/sites/default/files/images/201207/metro-app-get-file-from-other-app.png" rel="lightbox"><img alt="metro-app-get-file-from-other-app" src="/sites/default/files/images/201207/metro-app-get-file-from-other-app.png" style="width: 600px; height: 230px;" /></a></p> <p>如上图所示,用户在PC Settings界面中点击&ldquo;浏览&rdquo;,以更换头像图片。由于我们的相片日志应用支持文件选择器契约,所以在接下来的文件选择界面中,就会看到应用名称出现在列表当中,用户可以选择该应用当中存储的相片作为新的头像。</p> <h3> 触控与手势</h3> <h4> 在界面边缘轻扫,调出应用内部或系统全局的相关工具栏</h4> <ul> <li> 针对当前应用上下文的命令与功能,通常被放置在界面底部的app bar当中。</li> <li> charms bar隐藏于于界面右端,其中包含了若干系统全局性质的命令。</li> <li> 界面左边缘隐藏着最近使用过的应用列表。</li> <li> 从界面顶部向下轻扫,可以找到固定或关闭app的命令。</li> </ul> <p>下面两张图片分别演示了调出app bar和charms bar的方法:</p> <p><img alt="metro-swipe-out-app-bar.png" src="/sites/default/files/images/201207/metro-swipe-out-app-bar.png" style="width: 350px; height: 221px;" /><img alt="metro-swipe-out-charms-bar" src="/sites/default/files/images/201207/metro-swipe-out-charms-bar.png" style="width: 350px; height: 221px;" /></p> <h4> 文件多选</h4> <p><img alt="ipad-app-select-files" src="/sites/default/files/images/201207/ipad-app-select-files.png" style="width: 350px; height: 222px;" /></p> <p class="figure-caption">iPad版本:</p> <ul class="figure-caption"> <li> 用户首先要进入一种特定的编辑模式来执行选择及相关的编辑操作,因为&ldquo;点击&rdquo;在通常情况下是用来加载或进入某项条目的。</li> <li> 当选择与编辑的操作结束后,要退出编辑模式。</li> </ul> <p class="figure-caption">Metro版本:</p> <ul class="figure-caption"> <li> 用户无需进入特定的编辑模式;只要在内容对象上向下短距离轻扫,就可以选中该对象,同时app bar会自动出现,显示与选中对象相关的操作功能。</li> <li> 这个手势是可逆的。这套交互模式使Windows 8在对象选取方面的效率得到了有效的提升。</li> </ul> <h4> 双指张开与捏合</h4> <p>无论在iOS还是Windows中,这两个手势在很多时候都被用作放大或缩小内容对象的尺寸。不过对于Metro应用来说,它们还可以通过Semantic Zoom来实现内容层级间的导航。用户可以捏合某个内容对象,来进入它所在的相关内容组。不过,当用户正在以全屏模式浏览单张相片的时候,捏合与张开的手势还是会被用来调整图片的尺寸。</p> <p><a href="/sites/default/files/images/201207/metro-app-pinch-year-list.png" rel="lightbox"><img alt="metro-app-pinch-year-list" src="/sites/default/files/images/201207/metro-app-pinch-year-list.png" style="width: 600px; height: 393px;" /></a></p> <h3> 屏幕定向与视图模式</h3> <h4> 面向不同的屏幕定向方式及设备尺寸,提升布局的适应性</h4> <p>在iPad应用中,设计师通常需要考虑两种屏幕定向方式以及对应的界面设计方案。而Windows 8可以运行在多种设备上,包括平板和台式机。因此,我们要考虑到显示空间更大的情况,让用户在大尺寸设备中能够看到更多的内容。网格布局可以使设计方案更好的适应于不同的屏幕定向方式及不同类型的显示设备,例如针对纵向空间更大的设备来显示更多的当月特色图片。</p> <p><a href="/sites/default/files/images/201207/ipad-app-portrait-landscape.png"><img alt="ipad-app-portrait-landscape" src="/sites/default/files/images/201207/ipad-app-portrait-landscape.png" style="width: 600px; height: 336px;" /></a></p> <p class="figure-caption">iPad版本:在不同的定向模式下,内容完全相同,只是输出布局进行了调整。</p> <p><a href="/sites/default/files/images/201207/metro-app-portrait-landscape-desktop-devices.png"><img alt="metro-app-portrait-landscape-desktop-devices" src="/sites/default/files/images/201207/metro-app-portrait-landscape-desktop-devices.png" style="width: 600px; height: 208px;" /></a></p> <p class="figure-caption">Metro版本:竖屏模式及大尺寸设备可以利用更大的空间显示更多的内容,同时,特色内容附近的内容输出数量也会根据显示设备尺寸的不同而进行优化调整。另外,我们也可以为内容当中的图片制作多个版本,使它们根据不同的显示环境响应式的输出更合适的图片。</p> <h4> 使用快照视图吸引用户</h4> <p>在Win8中,用户可以将一款应用以快照的方式整合在另一款应用中,实现多任务操作。快照视图可以有效提升应用的使用时间,吸引用户维持更长久的使用周期。通过调整两者之间的分隔栏,用户可以很容易的在当前主应用及快照应用之间进行切换。所以设计师需要考虑主应用与快照应用在容器尺寸发生变化时,依然能各自保持上下文内容的可读性。</p> <p><a href="/sites/default/files/images/201207/metro-app-snapview.png"><img alt="metro-app-snapview" src="/sites/default/files/images/201207/metro-app-snapview.png" style="width: 600px; height: 186px;" /></a></p> <ul class="figure-caption"> <li> 相片日志应用在快照视图中输出的内容与完整模式当中的相同,但视图的布局样式进行了调整。</li> <li> 在快照视图中,用户可以通过上下滑动来浏览更多的内容。相比与在完整模式当中的左右滑动浏览方式,在这样狭小的空间中,上下滑动更加合理、易操作。</li> </ul> <h3> 消息通知</h3> <h4> 使用瓦片呈现动态信息更新</h4> <p>iOS 5引入了通知中心,使得所有的通知信息都可以迅速即时的在界面顶部呈现出来,用户可以将提示消息展开为完整的通知中心面板,查看所有的消息。另外,在iOS当中,应用图片侧上方的数字标识也可以让用户了解到该应用当中的内容更新数量。</p> <p><img alt="ipad-ios-notification-center" src="/sites/default/files/images/201207/ipad-ios-notification-center.png" style="width: 350px; height: 296px;" /></p> <p>而Windows 8中的瓦片则整合了通知中心与数字标识这两个方面的提示功能,用户即可以直接在瓦片中阅读提示信息,也可以点击进入应用。另外,与iOS通知中心统一化的输出格式有所不同,Metro风格的应用瓦片允许设计师从大量模板当中选择不同的样式<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="windows-8-metro-notification" src="/sites/default/files/images/201207/windows-8-metro-notification.png" style="width: 350px; height: 296px;" /></p> <p>你也可以使用<a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh761493.aspx">toast notifications</a>向用户进行提示。这类即时信息会在屏幕右上方出现,并且会对用户在当前应用中的任务起到干扰和中断的作用。通常,在某个应用第一次运行的时候,我们可以让用户选择是否接受这种提示方式。toast类似于iOS当中出现在屏幕顶部的通知,不过在Windows 8中,设计师可以从一组toast模板中进行选择,使它的呈现方式与当前应用具有更强的相关性。</p> <p>下图所示的是相片日志应用推送过来的最新评论提示:</p> <p><img alt="metro-app-notification-toast-message-comment" src="/sites/default/files/images/201207/metro-app-notification-toast-message-comment.png" style="width: 350px; height: 316px;" /></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="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/111" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Windows 8</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/112" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Metro</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/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/113" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模式</a></li></ul> Sun, 08 Jul 2012 06:12:42 +0000 C7210 92 at https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/92#comments