Be For Web - Android http://www.beforweb.com/taxonomy/term/51 en 谈导航栏返回按钮的替代方案 http://www.beforweb.com/node/213 <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/ico-logo-back-button-iphone-android-mobile-app-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>呼,又要夜间上新了。其实自己偶尔还会进去<a href="http://beforweb.com/about">关于Be For Web</a>里面看看将近两年前写的博客开篇语。当时的动力现在仍在,当时爱的那个世界现在仍在爱,并且越来越让我觉得自豪;这让我开心了些。周六晚上有在喝冰啤酒的兄弟姐妹吗,有的话我们虚拟碰个杯吧先,周末愉快=)</p> <p>前面连续做了13篇<a href="http://beforweb.com/node/215">iOS7预发布版界面设计规范</a>,这周开始重新回到正常节奏,上一些小文。今次的小话题是关于返回按钮的;其实还少谈了一种越来越普及的替代方案,也就是将返回按钮做到底部标签栏或是工具栏最左侧;当然,准确的说,这种情况下容器本身也不能再叫做标签栏或工具栏了。那开始吧。</p> <p>这里进入译文。我(英文原文作者)爱iPhone5,那多出来的640&times;176像素的空间非常有用。不过我时常会在点击那个最重要的按钮时遇到麻烦,是的,就是返回按钮。UX设计当中有一条规则,如果某个功能是很常用的,那么它应该被放在最容易点击到的位置上。</p> <p><a href="http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php">49%的移动用户在使用手机时是单手操作的</a>,这就意味着每两个用户当中就有一个会每天多次通过单手来点击返回按钮;算起来的话这可是数以亿计的点击率。如果手机尺寸略大,那么你将不得不使用另一只手来点击返回按钮。我猜这也是很多安卓手机会在左下角放置硬件返回按钮的原因之一;不过这种解决方案也不是最优的,因为在安卓平台中,应用内的&ldquo;返回上一级&rdquo;按钮与硬件返回按钮的功能还是有所区别的。</p> <!--break--><p><img alt="01-iphone5-back-button-mobile-ui-ux-interaction-design.jpg" src="/sites/default/files/images/201306-4/01-iphone5-back-button-mobile-ui-ux-interaction-design.jpg" /></p> <h3> 通过手势来解决问题</h3> <p>要解决返回按钮的问题,最简单的方案就是使用手势。在用户已经熟悉了应用操作方式的前提下,手势还是很有效的。另外,将手势操作作为可视化按钮的一种补充形式也是不错的做法。</p> <p><img alt="02-twitter-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/02-twitter-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <p>让我有些惊讶的是,在试用了无数个应用之后,我发现市面上已经有很多产品在通过这种方法解决返回按钮的问题了。当然,没有哪种解决方案能适用于所有的情况,但至少这是个开始。我个人真心希望设计师们能够逐渐找到更多更有创意的方案。</p> <h3> 抛甩(toss)</h3> <p>&ldquo;抛甩&rdquo;是对我们与真实物体之间互动方式的一种隐喻,使用这种模式,你可以很轻松地将当前的活动界面&ldquo;甩开&rdquo;。例如在Letterpress中,用户可以通过向下快速滑动的手势将弹出提示甩走,有点意思。</p> <p><img alt="03-letterpress-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/03-letterpress-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <p>在Facebook里,当你全屏查看一张图片时,可以将图片向上或向下甩开,回到之前的界面当中。</p> <p><img alt="04-facebook-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/04-facebook-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <h3> 横向滑动</h3> <p>新界面从屏幕右侧向左滑入视图,这是iOS当中的标准动效。相应的,我们也可以通过向相反的方向执行轻扫来导航回之前的界面,例如你可以在Pinterest当中通过向右轻扫的手势将大图界面向右移走,回到之前的界面。</p> <p><img alt="05-pinterest-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/05-pinterest-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <p>类似的,在Flipboard里,你也可以在某主题下的内容界面中通过向右轻扫回到主界面。</p> <p><img alt="06-flipboard-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/06-flipboard-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <p>在iBooks中,并没有明确的视觉指引告诉你可以通过左右轻扫的手势来打开下一页或回到上一页。不过除了轻扫以外,点击屏幕的左右两部分也能起到同样的导航作用,这样,由于缺乏视觉指引所导致的导航功能不可发现的概率就大大降低了。而且由于翻页效果使用了强有力的隐喻,所以一旦用户通过点击屏幕完成了一次翻页操作之后,很容易根据漂亮的翻页动效来发现左右轻扫的导航功能。</p> <p>相关阅读:</p> <ul> <li> <a href="http://beforweb.com/node/27">具有引导性的移动应用界面设计模式</a></li> <li> <a href="http://beforweb.com/node/78">通过合理的指示元素引导用户发现隐藏内容</a></li> </ul> <p><img alt="07-ibooks-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/07-ibooks-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <h3> 纵向拖动</h3> <p>与横向滑动的初衷相似,如果某些界面是从屏幕底部或顶部向上滑入视图的,那么可以尝试使用纵向拖动的方式来进行后退导航。Day One应用就打造了这样一套属于他们自己的&ldquo;下拉刷新&rdquo;,使用户可以在纵向的操作中直接进入之前或之后的一篇内容。</p> <p><img alt="08-ibooks-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/08-ibooks-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <p>在Clear里,你可以通过向下长拖动来回退到上一级列表,而向下短拖动则用来创建新的事项。</p> <p><img alt="09-ibooks-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/09-ibooks-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <p>而Haze允许用户通过向下拖动界面来进入设置界面;当然严格的讲这不属于&ldquo;回退&rdquo;方面的导航操作。</p> <p><img alt="10-haze-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/10-haze-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <h3> 长按或双击如何?</h3> <p>长按和双击都是可以由拇指独立完成的操作,所以我个人觉得它们将来有可能在回退导航上体现出价值。</p> <h3> 从视觉和布局的角度解决问题</h3> <p>诚然,按照iOS设计规范所要求的那样将返回按钮放在导航栏左侧,看上去是最自然的。但这不能阻止我们在必要的时候完全改变返回按钮的视觉样式或位置;它甚至可以看上去不那么像个按钮。</p> <p>Basecamp将待办事项内容界面设计成半覆盖的面板形式,用户点击左侧未遮盖的空间即可将面板向右收起,返回到之前的界面。</p> <p><img alt="11-basecamp-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/11-basecamp-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <p>如果内容类型适合,我们确实可以像Basecamp那样将子界面处理成某种覆盖层或面板的形式,并使用&ldquo;完成(Done)&rdquo;按钮进行关闭,返回上级界面。完成按钮可以被放置在界面右上角,相比于左上角的位置,更容易被点击到<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="12-facebook-iphone-app-back-button-mobile-ui-ux-interaction-design.png" src="/sites/default/files/images/201306-4/12-facebook-iphone-app-back-button-mobile-ui-ux-interaction-design.png" /></p> <div class="embed"><article id="node-262" class="node node-related-books" about="/node/262" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="触动人心:设计优秀的iPhone应用" src="http://beforweb.com/sites/default/files/images/products/06.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心:设计优秀的iPhone应用</a></h4> <p><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何从iPhone的角度来思考和理解应用设计,使你明白怎样去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计实例和思考过程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 总结</h3> <p>除非苹果推出一款更纤细、边缘更薄的手机,否则我个人还是建议设计师们能够抱着更开放的心态来看待使用手势执行常规操作这件事。如果你能充分理解交互对象的运动方式以及人们对这些运动规律的认知,并将这些理解体现到设计当中,那么手势会成为非常高效和符合直觉的操作方式。作为设计师,我们必须清楚人们在实际当中是怎样使用手机的,只有这样,才能设计出让人们愉悦而不是感到受挫的产品。</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/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</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/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Android</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/73" typeof="skos:Concept" property="rdfs:label skos:prefLabel">引导</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/80" typeof="skos:Concept" property="rdfs:label skos:prefLabel">隐喻</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/82" 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> Sat, 06 Jul 2013 15:11:24 +0000 C7210 213 at http://www.beforweb.com http://www.beforweb.com/node/213#comments iPad是真正的移动设备吗? http://www.beforweb.com/node/208 <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-apple-ipad-app-design-mobile-device-interaction-ux.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>一天没吃饭,却在最扛不住的时候和以前的同事聊起地方小吃方面的话题,天津的煎饼果子,南京的皮肚面,把自己馋的半死,简直蠢到家了。最受不了的是我现在竟然还在这里写这件事。这让我想起06年进入Web行当之前那段惨烈的日子,每顿只有馒头,没菜,最后一边抽烟一边吃,权当是作料了。</p> <p>头昏昏的,不说闲话了。恰如其分的在比较需要的时候发现这样一篇关于iPad应用设计的文章,拿过来做下译文,分享给大家,走起。</p> <p>这里进入译文。有次在轨交上,我(英文原文作者)的安卓手机挂了。我应该记得自己要在哪站下车的,但和如今的很多人一样,我太依赖于科技了;后悔不该把这些信息全部记录在手机当中,应该依靠自己的大脑呢。</p> <p>等等,我的背包里还放着iPad和笔记本呢!</p> <p>可我觉得为了查看Google地图,在一群乘客当中无论拿出这两样设备当中的哪一个都显得很扎眼。最后我还是选择了iPad,毕竟小一些,而且有3G,不过我总觉得身边的人在盯着我的屏幕看...我这些纠结其实是有原因的,因为据我观察,上班族在路上更多的是在使用智能手机或Kindle这样的设备;无论在车站还是车上,或是走在路上,端着iPad的人真心不多。</p> <!--break--><p>iPad是3年前进入市场的,并且很快就为用户创造了一系列从未有过的新需求。如今在美国,22%的成年人拥有平板设备。平板无论是看上去还是用起来都很像大号的触屏手机,而且它们都有那么多app可用,所以我们很容易将平板看做移动设备。其实可以这么说,比起你的笔记本电脑,iPad的移动性确实要强很多。</p> <p>然而作为移动应用的产品设计人员,有一个很大的问题需要考虑:你的产品所面向的是真正处于移动状态的用户,还是要聚焦在更深层次的用户体验上?你们的内容策略是什么?</p> <p>扎克伯格在2010年宣称iPad并非移动设备;Jakob Nielson在2011年的一篇报告中提到,多数iPad用户不会在真正的移动情境中使用该设备,即便是那些会将iPad带在身上的用户,通常也只有到相对闲适的环境中才会使用。</p> <p><img alt="01-user-ipad-relax-ipad-mobile-device.jpg" src="/sites/default/files/images/201306-2/01-user-ipad-relax-ipad-mobile-device.jpg" /></p> <p class="figure-caption">图片来源:<a href="http://www.superiormediasolutions.net/engagement-levels-iphone-vs-ipad-know-thy-user-and-now-know-thy-device/#.UbR11b-R1oU">superiormediasolutions.com</a></p> <p>这些结论对于应用的功能与用户流设计具有怎样的影响呢?</p> <p>我的工作是为Cars.com设计移动应用。多年下来,经历了安卓、iPhone和iPad三个平台的产品,以及无数的可用性测试及访谈,我们的团队逐渐开始意识到,对于iPad,我们也许不该沿用&ldquo;标准&rdquo;的移动设备设计思路。iPad在交互模式上与iPhone几乎是相同的,但在内容策略方面却有很大的差异空间。</p> <p>我们的产品所基于的,是用户搜索车辆信息的需求。此外,由于产品所依托的移动设备自身的特性,用户通常会对与使用情境相关的任务产生兴趣,例如查找并联系相关经销商、实地试驾等;通过App Store和安卓应用市场当中用户的评论及反馈意见,我们发现这类需求是得到了明确肯定的。因此,当我们最初开始设计iPad版本时,也沿用了同样的思路。另外我们还在应用的内置地图上花了很大的功夫,设想着用户会端着iPad在移动设备的典型情境中使用这些功能。</p> <p>但在几轮可用性测试之后,我发现了以下几点问题:</p> <ul> <li> 我们用户当中的20%有Wifi版的iPad,而不是3G。这就意味着对于他们来说,我们所有那些与移动情境相关的设想,例如基于销售商位置所提供的若干功能是无法实现的,除非用户所处的地方有免费WiFi。</li> <li> iPad在很多时候是一种共享型的设备,夫妻或其他家庭成员之间通常会共用一台,这种情况下用户一直将其带在身边的机会就小了很多。(相关阅读:<a href="http://beforweb.com/node/48">iPad应用的十大用户体验设计准则</a>)</li> <li> iPad的一个主要的使用情境是在沙发上或电视前,这时它是作为传统桌面设备的替代品出现的,并且多是用于内容消费,例如浏览网页、图片、视频,或是更具目标性的寻找商品一类。我们在桌面设备上更多的是在进行&ldquo;创造&rdquo;方面的活动,而手机则与各种情境和位置信息具有更强的关联性,例如寻找附近的销售商或餐厅等等。这也是为什么Josh Clark建议在为iPad进行设计时要考虑到&ldquo;腹部区域&rdquo;,避免将重要的导航放在底部,因为人们很有可能是躺在沙发或床上使用设备,而屏幕底部区域会被衣物或被子遮挡住。(相关阅读:<a href="http://beforweb.com/node/49">又是为了触屏移动设备而设计</a>)</li> </ul> <p>这些情况会对我们的内容策略产生怎样的影响?可以试着将iPad看做一种在固定地点使用的相对特殊的触屏设备,具体来说,在设计方案中考虑以下几个方面:</p> <h3> 产品的核心价值</h3> <p>我们总会有种欲望,就是想要在具有高级视觉效果的设备中向界面里塞进看上去很漂亮甚至很花哨的元素。但毕竟,视觉表现层只是一个前景和框架,而苹果在其界面设计规范中强烈建议我们将注意力放在用户与内容的互动上,而不是和框架本身。至于内容,则要聚焦在你们所能提供的最好的服务,聚焦在最关键的用例上,保持任务流的简单清晰。</p> <p>举个栗子,我们最初的iPad版本允许用户对新车型进行了解研究,而且我们专门打造了大幅高清图片搭配少量文字的设计方案,琢磨着这样应该是符合iPad用户的期望的。而在实际当中,我们却发现用户更期望看到车辆信息列表,而不只是对着图片研究汽车本身,因为我们的公司和品牌最擅长的、对用户最有价值的就是前者。用户在这方面的需求并没有因为正在使用iPad而不是iPhone就发生了变化。于是我们重新聚焦于车辆信息的搜索查询。</p> <p>在考虑内容策略时,不要因为iPad的设备类型特征及使用情境等因素而片面的砍掉产品的核心功能,你仍然需要打造最符合你们品牌特色的功能流程。很多时候,你可以借助统计工具来看看那些使用iPad来访问你们Web页面的用户的行为特征,藉此来考虑iPad版本的原生应用当中需要提供哪些必要的功能和内容。对于Cars.com来说,网站流量当中有很大一部分是来自于iPad的,这就为我们提供了重要的参考,使我们能更好的选择有哪些功能和内容可以在优化后整合到iPad应用当中,从而提供更好的产品体验。</p> <p><img alt="02-user-web-ipad-mobile-device-ux-design-interaction.jpg" src="/sites/default/files/images/201306-2/02-user-web-ipad-mobile-device-ux-design-interaction.jpg" /></p> <p class="figure-caption">图片来源:<a href="http://www.hrmreport.com/news/jpmorgan-staff-to-trial-ipad/">hrmreport.com</a></p> <h3> 漏斗效应及沙发用户</h3> <p>如果你们的产品是基于多平台的,那么需要考虑到消费旅程(consumer journey)的问题。譬如,在Cars.com上,我们总会考虑到消费过程中的漏斗效应。当人们最初开始查找车辆信息的时候,通常会进行较高层次的搜索、研究和比较。随着认知过程逐步推进,临近交易环节,也就是到了漏斗的下方,用户通常会使用手机客户端中的相关功能来查找和联系附近的经销商。</p> <p>前面提到,我们已经了解了用户主要会在沙发上使用iPad,所以我们的设计思路也主要集中在这种情境当中。我们在iPad里聚焦于车辆信息的检索,将诸如对比一类的研究型功能整合在了主流程当中,而将地图等与地理位置相关的功能服务放在了次要甚至是第三级的功能流程里;在iPad中,这些功能与主线流程相比,并不需要我们花太多时间去做,但仍然是需要存在的,毕竟,这是个iPad。</p> <div class="embed"><article id="node-286" class="node node-related-books" about="/node/286" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="放飞App:移动产品经理实战指南" src="http://beforweb.com/sites/default/files/images/products/31.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">放飞App:移动产品经理实战指南</a></h4> <p><a href="http://www.amazon.cn/放飞App-移动产品经理实战指南-雅莫斯/dp/B00DUPP6K6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">本书讲述如何构建出能在Apple Store中引人注目的iPhone和iPad应用。从全局介绍这一构建过程中的每一步,包括预算成本、挑选开发人员并组织最佳团队、搭建工作流程、推销和改进自己的应用产品...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 多平台的数据同步</h3> <p>在美国,50%的成年人拥有至少一部平板电脑或智能手机,其中很多人是同时拥有几款设备的。人们在什么时候使用怎样的设备来消费同一个品牌所提供的内容,这成为了一个需要考虑的重要因素。</p> <p>以电商网站为例,如今有四分之一的访问量来自移动设备,但15%的用户会回到桌面设备前完成购买。在汽车行业里,79%的新车购买者使用互联网来了解信息,而其中30%的人会使用多台设备来获取内容。</p> <p>这意味着,根据他们所处地点的不同,用户有可能在公司里使用台式设备搜索车型,在上下班途中查看信息列表,晚上回到家中窝在沙发里边看电视边用iPad对比几款看中的车型。但这并不意味着我们需要在每种设备中都打造相同的功能和任务流程;我们要做的是确保产品体验在不同的平台上保持统一和平滑。</p> <p>要了解用户在不同设备上所做的事情,为产品提供必要的数据同步机制。在Etsy,20%的交易来自移动设备;他们会在不同设备当中同步购物车、收藏、购买历史等方面的数据。</p> <p>而对于Cars.com,当用户收藏了喜欢的车型或经销商信息时,他们也希望在自己的iPhone或安卓手机、iPad及电脑中看到相同的数据。想想看,用户周末晚间在沙发里用iPad浏览着汽车信息,收藏了某个经销商,然后下周某一天奔赴店面,拿出手机就可以看到自己周末浏览的那些车型信息,多完美。</p> <p>所以在手机端,你就要考虑与地理位置和紧急程度相关的功能和内容形式了。例如,呈现附近的经销商,并标注服务时间、目前是否在营业等方面的信息,另外经销商列表也可以按照与用户当前所处位置的距离进行排序。</p> <p><img alt="03-ios-platforms-ipad-iphone-mac-mobile-device.jpg" src="/sites/default/files/images/201306-2/03-ios-platforms-ipad-iphone-mac-mobile-device.jpg" /></p> <p class="figure-caption">图片来源:<a href="http://www.janet.tokerud.com/writing-on-mac-ipad-iphone-best-apps/">janet.tokerud.com</a></p> <h3> 其他平板又如何呢?</h3> <p>我们可以说iPad开创了平板电脑的趋势,但如今其他品牌也在迎头赶上。如今,平板用户当中有一半使用的是安卓系统的设备,另外Win8平板也开始进入市场,当然还有苹果自家的iPad mini。这些后来者所带来的意义是怎样的呢?</p> <p>除了是否具有蜂窝网络功能以外,平板电脑的价格和尺寸也是影响消费决策的重要因素。就我个人对于Surface的经验来看,单就它的物理尺寸而言,很有可能阻碍其成为一款真正意义上的移动设备。此外,Surface的一大&ldquo;特色&rdquo;是附加的物理键盘,也许在某些时候这是很方便的,但也正是这一点使Surface的定位更趋向于笔记本电脑一样的便携设备,而非移动设备。它的重量大约有两磅,比iPad更重,另外也只有WiFi连接,而且价格不菲。</p> <p>而iPad mini则更小,更轻,而且提供了蜂窝网络的版本。和小号的安卓平板一样,iPad mini也相对便宜些,且移动性更强,用户可以更方便的将其带在身上。这也意味着,应用在小号平板上的功能与内容应该更贴近于手机应用。</p> <p><img alt="04-mini-ipad-iphone-mac-mobile-device.jpg" src="/sites/default/files/images/201306-2/04-mini-ipad-iphone-mac-mobile-device.jpg" /></p> <p class="figure-caption">图片来源:<a href="http://crave.cnet.co.uk/mobiles/ipad-mini-in-action-in-spiffy-fan-pictures-50009412/">cnet.co.uk</a></p> <h3> 关于迭代</h3> <p>App Store和各类应用市场都为用户提供了直接反馈的方式,也就是评论和打分。这会给我们带来不小的压力,使我们更倾向于向产品中不断添加新功能。</p> <p>GateGuru最初的定位和许诺是提供查看机场信息及跟踪航班状态的功能,但慢慢的加入了越来越多的其他功能,产品越来越重,越来越复杂,以至于用户提出质疑,这到底还是不是当初的那个GateGuru?</p> <p>而我们在Cars.com也遇到过类似的问题。正像前面提到的,我们在最初的iPad版本中所提供的功能并不符合用户的期望,因为它没能体现出Cars.com的核心价值许诺。来自用户的评论和打分可以很直接的反映出这些情况,于是我们迅速的在下一个版本中进行了改变。</p> <h3> 小结</h3> <p>聆听用户的声音,永远要对新功能是否符合使用情境和需求目标进行检验。如果你是第一次创建应用产品,一定要明确自己的核心价值,考虑那些对目标用户群最重要的功能与内容。随着不断的迭代及更多功能的增加,要更多的去观察用户的反馈。</p> <p>不管是否属于真正意义上的移动产品,平板市场就摆在那里,用户会直接或间接的告诉我们接下来应该打造怎样的功能,只要我们愿意去听,愿意去思考。</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/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/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/141" typeof="skos:Concept" property="rdfs:label skos:prefLabel">平板</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Android</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, 09 Jun 2013 13:27:15 +0000 C7210 208 at http://www.beforweb.com http://www.beforweb.com/node/208#comments 费兹定律与移动应用界面设计 http://www.beforweb.com/node/203 <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-fitts-law-mobile-app-ux-interaction-user-interface-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>说天热吧,回头看看房间里面窗帘还在随风起伏,灯也关着,于是想到了X档案。最近看的有点多,以至于很多时候会想到。话说去年这个时候是第二遍看Lost,也是蛮进入状态的;正好当时6月份去三亚,坐飞机还忐忑来忐忑去的,你想,海南那里,也是个岛。</p> <p>然则又是忙碌的一周过去了,评审、迭代、封板,如释重负,下周开始继续新的轮回。周五晚上和之前在点评的同事们小聚,看着大家在那里,一起叽叽喳喳的八这八那,便时不时的有种穿越的赶脚,好像转过天来还可以和他们一起上班一起吐槽似的。真的好开心,一点也不想结束。</p> <p>又然则今次想唠叨的闲话还有些的样子。譬如上周日花了一下午录了点新段子嘛,一轨一轨的可纠结了;接下来一整周都会想到10年前这个时候录demo,主琴从来都是一遍下来,完全不用分段去录,如今简直是没出息到家了。决定明天还是尝试着连续录音吧,当作挑战好了;但想想看挑战的目标竟然是自己10年前轻车熟路的东西,也不禁黯然神了个伤了。那么闲话就到这里吧,进入今天的正题好了。</p> <p>这里开始译文。费兹定律(Fitts&#39; Law)是人机交互理论当中的一条基本原理,在约莫60年前被提出。对于传统桌面端设备来说,这条定律是非常重要和关键的;不过如今,受到移动设备大潮的影响与推动,很多传统交互设计原理在新兴平台当中都有着不一样的呈现,费兹定律的运用方式是否也与过去相同呢?</p> <p>在本文中,我们将一起了解一下费兹定律的基本原理和组成要素,然后来看看怎样在移动应用的设计当中对其进行恰当的运用。</p> <!--break--><h3> 什么是费兹定律</h3> <p>要探索费兹定律的运用方式,我们首先需要了解这条定律是什么,它是怎样诞生的。</p> <p>费兹定律由俄亥俄州立大学的心理学家<a href="http://en.wikipedia.org/wiki/Paul_Fitts">Paul Fitts</a>于1954年提出,旨在为人类在电脑屏幕上点击目标对象的行为建立模型,同时涉及到了肢体移动及鼠标行为方面的问题。</p> <p>举个栗子,设想你的注意力和鼠标指针正停留在某个网站的logo上,而你被告知要去点击页面中的某个按钮,于是你需要将注意力焦点及鼠标指针都移动到那个按钮上。这个移动过程当中的效率问题就是费兹定律所关注的。</p> <p><img alt="01-principle-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/01-principle-fitts-law-mobile-interface-design-ux-interaction.png" style="width: 600px; height: 513px;" /></p> <p>费兹定律的原始公式是这样的:</p> <blockquote><p>MT=a + b * log2(D/W + 1)</p> </blockquote> <p>其中MT代表位移所需花费的时间,这是我们最需关注和解决的问题。a与b两个变量代表系统方面的耗时及效率,属于经验参数。D代表初始位置与目标位置之间的距离,W代表目标对象的尺寸。</p> <p>这套公式所表达的基本概念是:目标对象距离越远或尺寸越小,用户精确点击的困难就越大,耗时越长;反之,距离越近、尺寸越大,就越容易准确点击,耗时越少。</p> <p>拿实例说事儿,来对比一下Windows与Mac(OS X Lion之前的版本)中的滚动条。在Windows中,纵向滚动条上下两端各有一个按钮,里面的图标分别是向上和向下的箭头;横向滚动条也是类似。这种模式确实更符合用户的心智模型,因为触发左右移动的交互对象分别处于左右两端,你到左边寻找向左移动的方法时会看到左箭头按钮,向右侧也是一样;而Mac系统则将左右按钮并列在同一侧,使左右导航的点击操作所需跨越的距离大大的缩短,提高了操作效率。</p> <p><img alt="02-scroll-bar-button-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/02-scroll-bar-button-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <p>在UX的世界中,目标用户群的特征是我们需要时刻牢记在心的,对于费兹定律的运用也是同样的道理。对于目标用户中包含了儿童、老人甚至是残障人士的产品来说,界面交互元素的尺寸需要更大,以便这类相对特殊的用户可以很容易的点击操作。</p> <h3> 费兹定律在桌面设备平台中的运用</h3> <h4> 尺寸和距离</h4> <p>在设计任何一个可交互的UI元素时,我们都需要考虑它的尺寸以及与其他元素之间的相对距离关系。市面上有各种各样的设计规范,其中多数都会提到按钮最小尺寸以及与其他交互元素之间排布距离方面的问题。尽量将多个常用的功能元素放置在距离较近的位置;另外需要考虑的是,对于那些会产生高风险的交互元素,在很多时候你不希望用户能够很轻松的点击到它们,这种情况下要尽量将这些元素与那些较为常用的界面元素放置在相对距离较远的位置上。如下图所示,这里的危险操作(删除按钮)与常用的下载按钮之间的距离就过近了。</p> <p><img alt="03-size-distance-button-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/03-size-distance-button-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <h4> 边缘</h4> <p><strong>角落</strong> - 对应着费兹公式中的&ldquo;W&rdquo;,处于界面角落上的元素可以被看做是具有无限大尺寸的,因为当鼠标指针处于屏幕边缘时,它就会停下移动,无论怎样继续向&ldquo;外&rdquo;挪动鼠标,指针的位置都不会改变。用户可以很轻松的点击到处于角落的交互元素,只要将鼠标向角落的方向猛的划过去就OK,屏幕边缘会自动将指针限定在角落的位置上。这也正是Windows的开始按钮以及Mac的系统菜单被放置在左下角或左上角的原因之一。</p> <p><img alt="04-windows-start-menu-mac-system-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/04-windows-start-menu-mac-system-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <p><strong>顶部和底部</strong> - 与&ldquo;角落&rdquo;类似,由于屏幕边缘的限制,界面顶部和底部也是容易容易定位和点击的位置,不过确实没有角落更容易,因为这两个位置只在纵向上受到了约束,在横向上依然需要用户手动定位;但怎样都比边缘以内的元素更容易点击。出于这个原因,苹果将菜单放置在了整个屏幕的顶部,也就是最顶端的位置,而不是像Windows那样只将菜单放在了当前活跃窗口自身的顶部。</p> <p><img alt="05-mac-menu-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/05-mac-menu-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <h4> 菜单</h4> <p><strong>弹出菜单</strong> - 让弹出菜单呈现在鼠标指针旁边,可以减少下一步操作所需要的移动距离,进而降低操作时间的消耗。</p> <p><img alt="06-mac-popup-menu-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/06-mac-popup-menu-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <p><strong>轮盘弹出菜单</strong> - 从费兹定律的角度来看,<a href="http://en.wikipedia.org/wiki/Pie_menu">轮盘弹出菜单</a>是一种很棒的模式,因为整个菜单是以鼠标指针所在的位置为圆心来呈现的,每个菜单项距离鼠标指针都很近,而且等距。那么为什么这种形式并不是非常普及呢?坦诚的说,最主要的原因还是设计方面的难度较大,而且通常不会被包含进各种标准的UI控件库。</p> <p><img alt="07-pie-popup-menu-fitts-law-mobile-interface-design-ux-interaction.gif" src="/sites/default/files/images/201305-3/07-pie-popup-menu-fitts-law-mobile-interface-design-ux-interaction.gif" /></p> <div class="embed"><article id="node-268" class="node node-related-books" about="/node/268" 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/UX最佳实践-提高用户体验影响力的艺术-Helmut-Degen/dp/B00C1X9FY6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="UX最佳实践:提高用户体验影响力的艺术" src="http://beforweb.com/sites/default/files/images/products/12.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/UX最佳实践-提高用户体验影响力的艺术-Helmut-Degen/dp/B00C1X9FY6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">UX最佳实践:提高用户体验影响力的艺术</a></h4> <p><a href="http://www.amazon.cn/UX最佳实践-提高用户体验影响力的艺术-Helmut-Degen/dp/B00C1X9FY6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书分享了包括Google、Yahoo!、西门子、SAP、腾讯在内的数十家世界一流企业在用户体验领域积累的宝贵经验和最佳实践,内容中更多的是在阐述如何通过用户体验实践来提升用户体验的影响力,以及如何通过用户体验来催化整个组织取得成功...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 费兹定律与移动应用</h3> <p>我们接下来要分别了解两种主要类型的移动设备。之所以要分开讲,是因为它们各自的尺寸特性确实导致了一些交互上的区别。我们将用手机指代3.5寸屏幕的设备,用平板电脑指代7寸屏设备。当然,这样按照尺寸进行的分类并不很精确,我们只是通过这种方式在本文中说事儿。</p> <p>即使是同一款移动设备,交互方式也会随着屏幕定向方式的变化而有所区别(推荐阅读:<a href="http://beforweb.com/node/104">横竖屏切换中的界面设计与体验提升</a>、<a href="http://beforweb.com/node/99">iOS操作图例与触屏人机工学</a>)。这一点有别于传统桌面设备,因为无论在怎样的情况下,我们使用鼠标的方式都是一致的。你可能会想到笔记本上的触控板,但这类设备并不会改变费兹定律在桌面设备中的运用特性。</p> <p>角落和边缘效应同样会作用于触屏移动设备当中,但方式有所不同。与桌面设备不同,你的手指并不会像鼠标指针那样真正受到屏幕边框的限制,处于这些位置的元素不再有所谓的无限尺寸。那么为什么说这类效应同样可以体现在移动设备中呢?</p> <h4> 拇指热区</h4> <p>多数情况下,人们都是通过拇指在触屏移动设备上进行操作的,所以我们需要在拇指的移动范围考虑费兹定律的作用。不过,一旦界面元素的定位超出了拇指热区的范围,那么针对该元素的操作就需要付出更多的努力,相应的,费兹定律的公式中也需要增加额外的变量来应对移动时间的增长。在接下来的讨论中,我们需要始终记住这一点。</p> <h3> 费兹定律与3.5寸屏幕</h3> <h4> 竖屏</h4> <p>我们首先来看竖屏的情况,因为这是3.5寸设备最常见的使用方式。我并不想总是拿苹果当做例子,但他们确实在幕后做了很多聪明的好事,其中有些在体验提升方面的努力和坚持是不为普通用户所知的。(4S以及之前的)iPhone的尺寸是恰到好处的,因为它可以保证人类平均的拇指长度能够触及到屏幕上的任何一个位置。而回头看看台式设备,通常,要使指针跨越全屏,我们一次只能移动约四分之三的距离,然后就需要抬起鼠标再移动一次,完成剩下的路程。</p> <p>正如Josh Clark所说,在移动设备中对特定的UI元素所进行的布局都是有讲究的(详见&ldquo;<a href="http://beforweb.com/node/49">又是为了触屏移动设备而设计</a>&rdquo;)。iPhone中的原生工具栏与Tab栏都是定位在屏幕底部的,因为在正常竖屏持机的情况下,这个区域正是拇指伸直或弯曲所能覆盖到的范围。而要触及到顶部标题栏中的元素,需要的成本则略高,因为这个位置已经超出了拇指热区的范围,有些用户需要改变手掌的姿势才能够到左上角的按钮;将拇指移动到这里的行为已经不是简单的无障碍的过程了。</p> <p><img alt="08-thumb-zone-iphone-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/08-thumb-zone-iphone-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <p>而Andorid的模式则有所不同,他们将相关工具及菜单放在了界面顶部。这不是没原因的,因为Andorid设备的一些硬件控制是位于屏幕底部的,所以他们将界面中的菜单放置在顶部,以避免两组交互元素由于位置过近而导致用户产生误操作;这是费兹定律的一个很直接的体现(虽然是相反的)。</p> <p>此外,我们还可以在一些可能带来风险的交互环节(&ldquo;关闭&rdquo;、&ldquo;删除&rdquo;、&ldquo;取消&rdquo;等等)当中看到费兹定律的某种衍生,例如在iPhone中的列表单元里向左滑动展开&ldquo;删除&rdquo;按钮,或是点击左侧的删除图标而激活右侧&ldquo;删除&rdquo;按钮的双重确认方式,都是通过在交互过程中人为的制造距离和障碍来增大操作困难度,以达到防错的目的。</p> <h4> 横屏</h4> <p>在横屏状态下,如果你想尽量降低用户手指操作的移动成本,那么屏幕左右边缘的位置则是你必须考虑的重要区域。横屏的时候,用户通常是双手操作的,拇指热区变成了两个,费兹定律适用的范围扩大了很多。</p> <p><img alt="09-landscape-thumb-zone-iphone-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/09-landscape-thumb-zone-iphone-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <p>不过相应的,屏幕正中的上下两侧就变成了最难触及到的地方,所以一些常用的或重要的操作要尽量避免被布局在这些位置,而对于一些刻意要增加难度的操作,则可以考虑这些位置。</p> <h4> 一手持机一手操作</h4> <p>另外一种情况就是用户会一手拿着手机,另外一只手进行操作。这种情况下拇指作用范围的问题就不存在了。不过很多用户在这种时候只会固定的使用一只手指进行操作,这其实不大理想,特别是在打字或游戏等情境中。</p> <p><img alt="10-full-thumb-zone-iphone-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/10-full-thumb-zone-iphone-fitts-law-mobile-interface-design-ux-interaction.png" /></p> <div class="embed"><article id="node-262" class="node node-related-books" about="/node/262" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="触动人心:设计优秀的iPhone应用" src="http://beforweb.com/sites/default/files/images/products/06.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心:设计优秀的iPhone应用</a></h4> <p><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何从iPhone的角度来思考和理解应用设计,使你明白怎样去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计实例和思考过程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 费兹定律与7寸屏幕</h3> <h4> 竖屏</h4> <p>Josh Clark曾经强调过,很多人在使用平板的时候会拿着机身的上半部分,特别是在半卧或仰卧的状态下。这时,屏幕左上角或右上角就是最重要的热区,你需要考虑将一些常用的或是需要吸引注意力的元素放置在这些位置。</p> <p>不过从我的个人经验来说,我也确实见过很多人拿着平板的机身底部进行使用,特别是在打字的时候。这种情况下,拇指热区又转移到了屏幕的左下角或右下角。所以能否针对自己产品的特性来规划出一个最得当的布局原则,这也是作为设计师需要面对的挑战。</p> <h4> 横屏</h4> <p>对于平板来说,在竖屏状态下单手持机还算相对轻松,但要横过来就有些挑战了,由于设备本身相对较重,所以会有掉落的危险。在横屏的时候,用户通常都是双手同时持机的。另外需要记得的一点是,横屏时,home键(或安卓的菜单按键)总会出现在一侧的,这时如果界面侧边中间位置出现大量常用交互对象的话,有可能会因为与硬件按钮距离过近而产生误操作。</p> <h4> 停靠模式</h4> <p>前面提到的这些都属于用户自己持机的情况,但很多时候你也可以看到人们是在&ldquo;停靠模式&rdquo;下使用平板的,例如放在膝上、桌上或是支架上。这时,拇指热区就不再是问题了,费兹定律的作用范围可以延展到全屏。</p> <p><img alt="11-ipad-dock-case-fitts-law-mobile-interface-design-ux-interaction.png" src="/sites/default/files/images/201305-3/11-ipad-dock-case-fitts-law-mobile-interface-design-ux-interaction.png" /></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> <h3> 无缝切换</h3> <p>要记住,切换持机方式和屏幕定向是用户经常会做的事情,他们在切换的时候甚至不会多做考虑,只是想得到一个当下最方便最舒服的状态。对于设计师来说,除非确定在开发过程中固化了定向规则,否则不能假设用户一定会保持在某种定向模式下持续的使用。我们要对每种定向模式所对应的交互特征心知肚明,在每种模式中都考虑费兹定律的作用范围,在设计中进行相应的体现。</p> <h3> 总结</h3> <p>费兹定律可以在不同的平台中以不同的形式发生作用,要打造上乘的产品体验,我们就需要了解这些作用形式。特别是在移动设备上,我们会面临很多在传统桌面设备中不曾遇到的挑战与变数。当然,费兹定律绝不是唯一需要考虑的设计原理,但绝对是非常常用的、几乎会在界面设计过程中时时处处体现出来的一个。</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/24" 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/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Android</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/15" 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> Sat, 25 May 2013 12:57:15 +0000 C7210 203 at http://www.beforweb.com http://www.beforweb.com/node/203#comments 移动应用界面设计模式 - 搜索、排序、筛选 http://www.beforweb.com/node/70 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-mobile-application-app-design-pattern-invitation-iphone-android-smartphone-mod.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>决定放假期间先不上<a href="http://beforweb.com/node/58">iOS Wow体验</a>了;手头这篇译文不做完的话我心不甘。去年年底,我们曾经学习过一篇&ldquo;<a href="http://beforweb.com/node/27">具有引导性的移动应用界面设计模式</a>&rdquo;,其英文原文来自O&#39;Reilly动物园的一本新书,&quot;Mobile Design Pattern Gallery&quot;,就是封面上是个大公鸡的那本儿。今次这篇则是来自于本书的第四章&mdash;&mdash;搜索、排序和筛选。貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起。接下来果断精分,进入原文作者人格。</p> <p>很多信息类服务站点都是通过分类的方式来组织相关内容信息的,例如交通工具方面的卡车、货车、SUV等;而Greensheet这样的网站则是直接将售卖信息一股脑的堆在一个又一个的页面中,如果我(英文原文作者)想找点儿什么,真的必须挨个看下去。谢了,我还不如直接在手机上用<a href="http://itunes.apple.com/us/app/craigslist-mobile-for-iphone/id430667358?mt=8">Craigslist应用</a>呢。</p> <p>在使用Craigslist的过程中,我就琢磨着,作为普通用户,我们确实可以很明显的受益于那些在信息的搜索、排序和筛选方面做的很到位的UI设计模式。在本文中,我们将一起了解一下,有哪些设计模式可以帮助我们按照用户所期望的方式将数据信息更加有效的组织和呈现出来<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 搜索</h3> <p>首先为各位推荐两本这方面的好书,&quot;Search Patterns: Design for Discovery&quot;和&quot;Designing Search: UX Strategies for eCommerce Success&quot; (前者国内有引进,即<a href="http://www.amazon.cn/搜索模式-莫维里/dp/B0048FY6U8/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">《搜索模式》</a>一书)。然后我们接茬来看移动应用当中与搜索相关的设计模式。</p> <ul> <li> 显性搜索</li> <li> 自动完成</li> <li> 动态搜索</li> <li> 指定搜索范围</li> <li> 已保存的/最近的搜索条目</li> <li> 搜索表单</li> <li> 搜索结果</li> </ul> <h4> 显性搜索</h4> <p>作为最普通和最常见的搜索模式,显性搜索依靠显性的动作行为及表现方式来执行搜索任务、展示搜索结果。在这种模式中,搜索按钮会出现在输入框的右侧,或直接嵌入虚拟键盘中 (这种情况下可以将&ldquo;取消&rdquo;按钮放在搜索栏中)。搜索结果通常会直接呈现在搜索栏下面的区域当中。在设计方案里,可以考虑将线性搜索与自动完成模式搭配使用。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-walmart" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-walmart.jpg" style="width: 500px; height: 367px;" /></p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-target" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-target.jpg" style="width: 500px; height: 368px;" /></p> <div class="entry-intro"> <p>在这种模式中,提供显性的搜索按钮,同时还可以为用户提供用来取消当前搜索行为的操作方式。当搜索正在执行时,提供明确的状态反馈。</p> </div> <h4> 自动完成</h4> <p>可以说,这是随着Web 2.0那波儿大潮所涌现出的一种最经典最实用的搜索模式。用户在输入关键词的同时,系统会即时提供一些根据当前已输入文字所猜测出来的搜索结果,如果用户发现其中的某个条目正是自己想要的,那么直接点击就可以完成搜索。当然,在没有恰当的候选条目或是用户觉得不手动输入完整关键词就活不下去的情况下,这仍然是一个能够正常完成搜索功能的普通模式。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-android-google-play" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-android-google-play.jpg" style="width: 500px; height: 385px;" /></p> <p>理想情况下,系统应该随着用户的输入而立刻提供搜索结果,但在实际当中,用来反馈系统工作状态的视觉提示也是必要的。上图右侧,Netflix直接将状态提示做在了关键词输入框内部靠右端的位置;另一种常见的做法是将其放置在搜索结果所要出现在的位置。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-Fidelity" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-Fidelity.jpg" style="width: 500px; height: 405px;" /></p> <p>TripAdvisor提供了一种更为出色的自动完成模式,他们直接将即时呈现的搜索结果按照热门的旅行目的地、宾馆酒店等类型进行了归类。LinkedIn的做法也有几分类似,他们会优先显示那些与当前用户有直接联络关系的搜索结果。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-auto-complete-trip-advisor" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-auto-complete-trip-advisor.jpg" style="width: 500px; height: 390px;" /></p> <div class="entry-intro"> <p>通过视觉提示向用户反馈系统当前的工作状态;可以考虑在搜索结果中对当前已输入的字符进行着重显示。</p> </div> <h4> 动态搜索</h4> <p>这种模式也可以被称为&ldquo;动态筛选&rdquo;,当用户在搜索栏中输入关键词时,已有的搜索结果会随之进行动态的筛选。看上去,这与前面的&ldquo;自动完成&rdquo;模式是差不多的,但实际上它们在交互模型方面有所区别。动态搜索模式的主要作用是对已有的信息列表进行提炼和筛选。</p> <p><a href="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-DYNAMIC-SEARCH-facebook.jpg" rel="lightbox"><img alt="mobile-apps-ui-design-patterns-search-sort-filter-DYNAMIC-SEARCH-facebook" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-DYNAMIC-SEARCH-facebook.jpg" style="width: 500px; height: 363px;" /></a></p> <div class="entry-intro"> <p>动态搜索模式用来对数据集进行即时的精炼和筛选,例如可以被用在地址簿或个人媒体库等方面的应用当中。但该模式不适于数据规模过于庞大的状况。</p> </div> <h4> 指定搜索范围</h4> <p>在某些情况下,可以让用户在执行搜索之前对搜索对象的类型和范围进行界定,从而得到更符合需求的搜索结果。Google和Photobucket的应用在指定搜索范围的操作形式上略有不同,但最终目的都是一致的。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-scope-google-photobucket" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-scope-google-photobucket.jpg" style="width: 500px; height: 405px;" /></p> <p>采用类似做法的还有AllRecipes以及Dropbox的应用。在Dropbox中,默认的搜索范围是全部内容,但无论在搜索被执行之前,还是结束之后,用户都可以进一步选择搜索范围,例如搜文件或是文件夹。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-scope-allrecipes-dropbox" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-scope-allrecipes-dropbox.jpg" style="width: 500px; height: 367px;" /></p> <div class="entry-intro"> <p>根据产品自身的情况,合理的划分搜索类型,以便用户在执行搜索的时候进行选择。通常三到六个选项就够了,必要的时候可以通过表单来实现高级搜索功能。</p> </div> <h4> 已保存的/最近的搜索条目</h4> <p>优秀的移动应用界面设计都会尊崇一条最基本的可用性原则:尊重用户的付出。在搜索中,已保存的或是最近的搜索结果就是这条原则的良好体现。通过这两种模式,用户可以轻松的选择曾经搜索过的关键词,完全不必重新输入。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-ebay-walmart" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-ebay-walmart.jpg" style="width: 500px; height: 367px;" /></p> <p>与这条可用性原则相关的设计模式还包括Trulia中的基于地理位置的搜索、Amazon的条码搜索、Google Shopper中的扫描及语音搜索,以及按照搜索日期进行分组的搜索历史记录。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-local-based-bar-code" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-local-based-bar-code.jpg" style="width: 500px; height: 367px;" /></p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-google-shopper" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-google-shopper.jpg" style="width: 500px; height: 412px;" /></p> <div class="entry-intro"> <p>在保存搜索结果的模式中,用户通常还需要花费额外的步骤为搜索结果命名,作为将来查看时的索引方式。而&ldquo;最近的搜索条目&rdquo;则由系统自行保存及呈现。对于自己的产品,要考虑哪种方式更加适合。</p> </div> <h4> 搜索表单</h4> <p>用户可以在搜索表单中使用某些高级搜索选项,例如通过某种方式选定搜索范围等。另外,搜索表单当中通常还会包含一个在视觉呈现方式上很突出的搜索按钮。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-search-form" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-search-form.jpg" style="width: 500px; height: 412px;" /></p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-search-form-2" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-search-form-2.jpg" style="width: 500px; height: 243px;" /></p> <div class="entry-intro"> <p>尽量控制搜索表单中的交互元素数量,并按照正确的方式使用这些交互元素。在视觉上注意细节的把握,例如元素的对齐、文字标签的布局及字号等。</p> </div> <h4> 搜索结果</h4> <p>我们将搜索结果自身也看作整个搜索功能中的一个模式。搜索结果可以出现在与搜索操作相同的界面中,也可以存在于一个单独的搜索结果界面当中,看需求。搜索结果的呈现方式是多种多样的,包括表格(table)、列表(list)、缩略图等,另外还可以显示在地图当中。同一款应用可以同时使用几种不同的搜索结果表现形式,具体方式取决于搜索结果的类型及用户的设置。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-result-1" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-result-1.jpg" style="width: 500px; height: 368px;" /></p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-result-2" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-result-2.jpg" style="width: 500px; height: 412px;" /></p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-result-3" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-result-3.jpg" style="width: 500px; height: 410px;" /></p> <p>很多应用都会在搜索结果中使用延迟加载技术(lazy loading),通过这种方式首先加载一部分搜索结果,同时另外一部分继续载入。通常有两种方式可以触发更多内容的加载,一是自动加载,二是由用户手动点击某个按钮或链接来执行。</p> <div class="entry-intro"> <p>我们可以使用延迟加载技术来代替传统的分页浏览模式,特别是在移动应用的上下文环境中,分页导航方式有悖于自然的交互模型,不符合用户直觉。另外,最好让用户了解搜索结果的条目总数,并为搜索结果提供合理的默认排序规则。</p> </div> <h3> 排序</h3> <p>为搜索结果选择一种最恰当的默认排序方式是很重要的,通常,我们可以根据自己产品的实际特性以及用户期望来对其进行设定。而改变搜索结果排序方式的设计模式大致有以下三种:</p> <ul> <li> 排序切换</li> <li> 排序选择器</li> <li> 排序表单</li> </ul> <h4> 排序切换</h4> <p>如果可选的排序方式不算太多,我们可以使用这种最简单的解决方案。将排序切换按钮放置在搜索结果的顶部或底部(具体位置根据界面中其他相关元素的布局而定),用户无需离开当前视图就可以轻松改变排序方式。</p> <p>下图右侧的Target应用将四种排序方式整合到了三个切换按钮中,其中的&ldquo;价格&rdquo;是可以进一步切换成为升序或降序的。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-onscreen-toggle" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-onscreen-toggle.jpg" style="width: 500px; height: 360px;" /></p> <div class="entry-intro"> <p>排序切换要有清晰明确的视觉呈现方式来表达&ldquo;当前&rdquo;的状态。</p> </div> <h4> 排序选择器</h4> <p>选择器模式算得上是切换模式的良好替代品。很多类型的UI控件都可以在这个模式中派上用场,具体的运用方式还要参考不同系统平台所提供的设计规范。例如,在Android应用中,菜单形式比较常见,而对于iOS来说,选择器(picker)和动作表单(actionsheet)都是比较合适的控件。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-menu-android" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-menu-android.jpg" style="width: 500px; height: 406px;" /></p> <p>相比于切换模式来说,选择器模式允许更长的文字标题以及更多的选项。上图中,Walmart的Android应用在搜索栏当中放置了一个按钮,用来打开排序弹出层。而下图中,Kayak的iPhone应用则将用于展开排序选择器的按钮放在了搜索结果的底部。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-picker-ios-iphone" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-picker-ios-iphone.jpg" style="width: 500px; height: 368px;" /></p> <p>此外,Android中的组合框以及iOS中的弹出覆盖菜单都可以用在这种模式当中。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-combobox-overlay" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-combobox-overlay.jpg" style="width: 500px; height: 385px;" /></p> <div class="entry-intro"> <p>参考相关系统平台的设计规范,在排序选择器模式中使用最恰当的UI控件。对当前选中的排序方式,要以清晰的、容易辨识的视觉表现形式来突出显示。</p> </div> <h4> 排序表单</h4> <p>很多应用会在同一个界面中整合运用多种排序及筛选方式,这种方法通常被称作&ldquo;精炼(refine)&rdquo;,它很复杂,但却能帮助用户得到最精确的搜索结果。在移动应用中,&ldquo;精炼&rdquo;的方式大多承载于一个表单界面中,用户需要在里面根据自己的需求做出选择,并提交这些搜索条件。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-form-refine" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-form-refine.jpg" style="width: 500px; height: 385px;" /></p> <div class="entry-intro"> <p>请在实际产品中优先考虑切换模式或选择器模式,尽量降低产品复杂度。</p> </div> <h3> 筛选</h3> <p>包含大量数据的内容列表需要被进一步的筛选,才能更有效的向用户传达信息。常规的筛选模式包括:</p> <ul> <li> 筛选切换</li> <li> 筛选展开列表</li> <li> 筛选对话窗</li> <li> 筛选表单</li> </ul> <h4> 筛选切换</h4> <p>与排序切换模式类似,筛选切换同样会在搜索结果界面当中显示,例如在界面顶部或底部。通常只需一次点击,用户就可以对搜索结果进行进一步的筛选过滤。HeyZap应用使用了标准的切换按钮控件,而Google则使用了纵向tab切换。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-onscreen-refine" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-onscreen-refine.jpg" style="width: 500px; height: 386px;" /></p> <p>CBS News和ACL Festival的应用都使用了横向可滚动的筛选栏,让用户可以在不同类型的内容列表之间迅速切换。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-refine-scroll" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-refine-scroll.jpg" style="width: 500px; height: 385px;" /></p> <p>不过,不建议用这种方式作为应用的主导航。</p> <p>SXSW应用将两层筛选按钮栏合并在一起使用;而Feed a Fever新闻阅读器则将两个组合框以非常简约的视觉风格排列在一起,作为一套统一的筛选切换组件。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-onscreen-combine" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-onscreen-combine.jpg" style="width: 500px; height: 361px;" /></p> <div class="entry-intro"> <p>筛选选项的文案必须清晰易懂;被选中之后,要能明确的显示出&ldquo;当前&rdquo;状态。</p> </div> <h4> 筛选展开列表</h4> <p>这同样是一种很有效的信息筛选方式。滑动或点击界面底部或侧边的某种&ldquo;把手&rdquo;,包含筛选选项的列表界面就会展开。在下图中我们可以看到,Audible应用的展开列表中只有一个简单的筛选切换栏,而Sam的展开列表所提供的筛选项目则复杂的多。不过对于后者,更好的设计方案是去掉&ldquo;Filter&rdquo;按钮,让地图可以随着用户的选择而动态更新。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-refine-drawer-map" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-refine-drawer-map.jpg" style="width: 500px; height: 386px;" /></p> <h4> 筛选对话窗</h4> <p>弹出对话窗具有模态特征。用户必须选择一个筛选选项,或是取消筛选动作。TripAdvisor的iOS应用使用了自定义的筛选对话窗,而USPS的Android应用则在对话窗中使用了系统原生的控件。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-refine-dialog" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-refine-dialog.jpg" style="width: 500px; height: 385px;" /></p> <p>对话窗模式确实可以很好的完成筛选任务,不过前两种模式当中不包含具有模态特征的控件元素,这可以使用户更加自由的在不脱离当前界面上下文环境的情况下尝试各种筛选选项。</p> <div class="entry-intro"> <p>在弹出对话窗的模式中,尽量保持选项列表的间断,避免滚动的发生。</p> </div> <h4> 筛选表单</h4> <p>与前面提到的排序表单模式类似,我们可以将一些高级的数据筛选和精炼选项整合在一个表单界面中。例如,WorldMate允许用户在筛选表单中按照价格、品牌和星级来筛选某地的酒店信息。Zappos的应用也采用了类似的做法,不过他们使用的基本都是iOS原生的界面控件。</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-refine-form-tab" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-refine-form-tab.jpg" style="width: 500px; height: 391px;" /></p> <p>Freetime在筛选表单中使用了高度自定义化的控件元素。用户首先需要在里面选择一个主要的分类项目,然后在相应的二级筛选栏中做出选择,最后提交这些筛选选项<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-refine-form-free-time" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-refine-form-free-time.jpg" style="width: 500px; height: 367px;" /></p> <p>条件筛选是一种相对高级的筛选机制,我们可以在Wufoo的Web应用中看到这类很标准的筛选模式:</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-refine-form-wufoo" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-refine-form-wufoo.jpg" style="width: 500px; height: 195px;" /></p> <p>要在移动应用中利用各种控件创建复杂的筛选表单,这不是一件很轻松的事儿,不过看上去Roambi做的不坏:</p> <p><img alt="mobile-apps-ui-design-patterns-search-sort-filter-refine-forms" src="/sites/default/files/images/201204/mobile-apps-ui-design-patterns-search-sort-filter-refine-forms.jpg" style="width: 500px; height: 728px;" /></p> <div class="entry-intro"> <p>不要对筛选机制进行过度的设计,通常情况下,保持在当前界面中的筛选切换模式或展开列表模式都可以胜任。如果信息结构较为复杂,必须使用表单模式,那么要严格遵守系统平台的设计规范及具有普遍意义的最佳实践模式。</p> </div> <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> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/68" 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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/94" typeof="skos:Concept" property="rdfs:label skos:prefLabel">搜索</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/95" typeof="skos:Concept" property="rdfs:label skos:prefLabel">排序</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/96" typeof="skos:Concept" property="rdfs:label skos:prefLabel">筛选</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Android</a></li></ul> Sun, 29 Apr 2012 09:08:03 +0000 C7210 70 at http://www.beforweb.com http://www.beforweb.com/node/70#comments 又是为了触屏移动设备而设计 http://www.beforweb.com/node/49 <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-design-for-touch-mobile-application-iphone-android-interactive-device-d.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>印象当中,最近这些年的春天总是会带来让人觉得真心别扭的气候体验,雨和冷风就像催化剂一样,让生活和工作当中的人和事也变得异常凌乱,仿佛一团被咀嚼到完全失去味道的槟榔。November Rain前奏当中的钢琴旋律多少可以让心安然一些,一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界。</p> <p>可脑袋一旦被拧下来,就什么也无法吃的样子了,不是吗。说正事儿吧。Designing for touch,关于这个话题及相关的文章,最近貌似已然铺到大街上了,不过我还是做我的吧。在标题里加了个不伦不类的&ldquo;又是&rdquo;二字,以示区分。内容方面应该会有些交集,但这是我自己的。</p> <p>Josh Clark老师最近蛮活跃的。在本文中,他将向我们介绍一些触屏移动设备用户界面设计当中需要注意的问题,并对iPhone、iPad和Android相关设备在触控交互体验方面的友好性进行了对比和分析。欢迎,走着。</p> <p>对于移动设备的操作系统及应用来说,判断其用户界面设计方案是否优秀的一个重要衡量标准,就是看它对于手指触控操作的友好程度。相比于桌面计算设备及相关的软件环境,触屏移动设备所具有的交互特性几乎将用户体验设计师们带入了工业设计的领域;设计方案更多是在体现着人机工学方面的原理,而不再是仅仅用来规划内容与功能的视觉呈现方式<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 拇指热区与底部原则</h3> <p>首先,我们需要了解人们通常会以怎样的方式将手指停靠在设备上。拿手机来说,普通青年们多数会使用拇指来进行触控操作,所以触屏手机的界面交互方案基本是围绕着拇指来进行打造的。</p> <p>拇指是很不可思议的,据说它是将我们与动物区分开来的重要标志之一...拇指的功能具有相当的弹性,同时也受到一定的局限。对于常规的触屏手机来说,我们可以使用拇指扫过屏幕当中的大部分区域,但其中大约只有三分之一属于真正有效的触控区域。所以在设计当中,要尽量将最重要的界面交互元素放置在这个范围当中。在右手持机的状况下,有效触控区域位于屏幕的左下方:</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-iphone-thumb-hot-zone" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-iphone-thumb-hot-zone-o.jpg" style="width: 300px; height: 634px; " /></p> <p>这也正是移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部的原因。与此相反的是,在传统的桌面设备系统环境中,导航菜单一类的界面元素通常被放在界面顶部,无论是本地软件还是网页基本都是如此。对于我们有限的拇指作用范围来说,这种传统布局方式显然不能在移动设备的用户界面当中很好的适用。</p> <p>相比之下,左下角还是右下角的问题略显次要。我们在实际当中经常会更改左右手持机方式,想想看是不是这样,譬如对于右撇子来说,当他们正在写字或是需要同时使用鼠标操作桌面设备时,通常会将手机交于左手操作;而左撇子们则正相反。不过在多数时间内,使用右手持机的用户还是要相对较多一些。</p> <p>底部原则可以帮助我们对界面当中的可触控元素进行更好的组织。最常用的功能按键应该被放在拇指最容易触摸到的热点区域当中,而其它相对次要或是比较敏感的控制元素则应该尽量避开这个区域。以iOS中的&ldquo;编辑&rdquo;按钮来说,它通常被置于界面右上方,这个位置即可以保证它清晰可见,同时又不会被很容易的触碰到,以免发生误操作。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-iphone-list" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-iphone-list.jpg" style="width: 300px; height: 634px; " /></p> <p>另外,底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏幕上进行操作的时候,手指下方的内容部分将会被遮挡住;只有将交互控制元素放在内容区域的下方,才能让这种负面效应降至最低。其实这是一条具有广泛适用性的设计原则,我们可以在很多其他类型的设备中看到这种原理的体现,例如iPod、计算器、带有实体键盘的普通手机、电子秤等,无不是内容在上,控制在下。</p> <h3> 我,机器人(Android)</h3> <p>在Android设备中,底部原则这档子事被机身下方的实体硬按键搞的复杂了些许,尤其是冰淇淋三明治之前的平台。这些硬件级的控制按键占据着底部区域,在某种程度上会与应用内的底部交互元素形成视觉上的竞争。彼此层叠在一起的软硬件工具栏会使用户在快速操作的过程中产生迷惑,增大误操作的几率;对于在两个维度上共存于拇指热区当中的软硬件按钮,它们之间的冲突几乎是不可避免的。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-android-buttons" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-android-buttons.jpg" style="width: 300px; height: 671px; " /></p> <p>固化的硬按键是无法被移除的,避免控制元素之间产生冲突的最直接的办法就是让虚拟与实体的工具栏在视觉上彼此分离,而这就意味着需要将Android应用中的相关控制元素和导航结构放置在用户界面的顶部。这自然不是最理想的解决办法,因为界面顶部离拇指热区远着呢,你要触摸其中的某个按键时,几乎会将半个手掌都覆盖在屏幕上。不过比起与硬件工具栏层叠在一起的方式来说,这种解决方案仍是利大于弊的。</p> <p>这种将重要的控制及导航元素放在顶部的做法与iOS设备的方式正相反。虽然iPhone的Home按键同样在机身底部,但它的表现形式与Android设备的硬按键有很大区别,它不会对应用界面底部的相关操作元素带来视觉上的干扰。下面的截图展示了Foursqure应用在这两个平台中的界面设计方案对比:</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-foursquare-interface.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-foursquare-interface" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-foursquare-interface.jpg" style="width: 500px; height: 508px; " /></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> <h3> 移动版本的网站</h3> <p>毫无疑问,当我们在移动设备中浏览网站页面时,类似的问题也会出现。我们可以将网页理解为应用中的应用,因为它需要通过浏览器这个应用程序进行输出呈现。移动平台当中的很多浏览器都会将一些常规的控制元素放在底部工具栏里,这在某种程度上又有可能与页面当中交互元素产生视觉上的冲突。所以,对于移动版本的站点来说,一个最基本的设计原则就是不要将重要的控制元素或导航结构通过CSS的position:fixed定位方式固定在用户界面底部。</p> <p>不过,与Android应用中的解决方案有所不同,对于Web页面来说,将控制元素与导航结构放在界面顶部的做法同样会产生很大问题。毕竟当前绝大多数的主流触屏手机仍属于小屏幕设备,而传统Web页面的横向全局导航结构通常由若干包含着一到两个词语的导航项组成,这对于手机屏幕来说显得太拥挤了,我们必须另想办法来解决导航栏布局的问题。</p> <p>Luke Wroblewski在Mobile First一书中提到:&ldquo;在很多移动版本的站点中,用户首先会看到一大坨导航结构,而不是内容。在移动应用的上下文环境当中,时间永远是宝贵的,流量搞不好是要花钱的有木有,你必须尽最大努力让用户在首屏中得到他们最想获取的信息。&rdquo;</p> <p>确实是这么回事。移动版本的站点,在布局方面,应该使主要内容尽量多的占据着首屏当中的空间,而导航结构则应该以某种缩略的形式出现在相对次要的位置。Wroblewski通过一个实例来倡导这个设计模式,也就是<a href="http://m.adage.com/">Ad Age的移动版站点</a>。其首屏当中,除了网站标题及最新内容列表之外,右上角的菜单按钮是界面当中唯一一个交互控制元素。当用户点击这个按钮时,导航列表才会出现在屏幕当中。看上去,整个导航列表好像是另外一个界面,但它实际上是被放置在页面最下方的,而菜单按钮只是个锚点而已。</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-mobile-website-adage-navigation.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-mobile-website-adage-navigation" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-mobile-website-adage-navigation.jpg" style="width: 500px; height: 633px; " /></a></p> <p>Wroblewski继续发言:&ldquo;这个设计方案在首屏当中使用了最小化的导航机制(只有一个按钮链接),用户可以集中精力去阅读每个分类当中的最新文章。当他们浏览至当前页面的底部时,还可以直接通过导航列表来探索更多的内容。最棒的是,顶部的菜单按钮只是一个锚点,整个导航机制不涉及到任何会导致交互流程复杂化的元素,例如JavaScript、覆盖层或是独立的导航页面等。&rdquo;</p> <p>&ldquo;内容在上,控制在下&rdquo;的规则看上去蛮简单的,不过一旦涉及到实际的上下文环境,例如操作系统或浏览器的用户界面特性,设计师们要考虑到的情况就变的复杂了。截至目前,我们可以将讨论过的话题归纳为几点设计原则:</p> <ul> <li> 对于iPhone中的客户端应用,尽量将重要的交互对象及导航结构放在界面底部。</li> <li> 对于Android中的客户端应用,尽量将重要的交互对象及导航结构放在界面顶部。</li> <li> 对于移动版本的网站页面,尽量将导航结构放在页面底部(注意,不是当前用户界面的底部)</li> </ul> <p>这些设计原则仅限于手机的上下文环境当中,而对于屏幕规格较大的触屏设备,例如iPad来说,规则就要发生变化了。</p> <div class="embed"><article id="node-271" class="node node-related-books" about="/node/271" 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设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_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/15.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_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设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书内容涵盖移动Web开发的趋势、如何建立一个移动网站、iPhone和iPad的网络应用发展、应用开发的趋势和误区、iPad应用开发要点、如何制作移动Web应用、移动设备的形式、如何推销你的移动应用...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 平板电脑</h3> <p>拇指热区的相关规则同样适用于平板电脑,不过,由于持机方式不同,热区的位置也有所变化。iPad的拿法在很大程度上取决于整个人的姿态。我们在站着的时候,需要一手持机一手操作;坐在桌前的时,我们往往会用一只手像支架一样从侧面架住iPad,而另外一只手用来戳戳点点;坐在椅子上的时候,我们通常会将它放在膝上进行操作;而躺着或是半卧着的时候,又会将它立在腹部,一手支撑,一手操作。</p> <p>每一种持机方式几乎都对应着一种特定的热区规则,而且在每一种姿态当中,设备与我们身体的距离也有所不同。例如,站着的时候,我们会把iPad端的比较近,而躺下的时候就相对较远了。</p> <p>虽然听上去有些复杂,不过在这些上下文情景当中的交互行为还是存有一些共同特征的。首先,用来持机的那只手通常会握住机身的上半部分,因为这样最符合杠杆原理;相应的,拇指热区基本会位于屏幕的前三分之一部分,偏向左上角或右上角。其次,iPad的屏幕相对较大,用户很难像使用iPhone那样瞄上一眼就能看到界面当中的几乎全部内容。正像对待普通的印刷品或是Web页面那样,用户通常会首先将目光聚焦于iPad界面的顶部区域,所以我们的设计方案也要相应的在这一点上符合用户习惯。换句话说,在操作iPad的过程中,无论是目光还是手指,它们的主要活动区域都是设备的上半部分。而机身的下半部分不仅会在很多时候被用户视而不见,而且在某些特定的环境中它真的是不可见的,例如当我们躺在床上的时候,这部分很可能被衣物或被子遮挡住,实在是悲催。</p> <p>所以,与手机界面不同,在iPad及同类平板设备的应用当中,主要的交互控制对象应该被放置在界面的左上角或右上角,以便拇指可以很容易的触摸到。Instapaper和Twitter在这方面做的都不错:</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-instapaper.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-instapaper" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-instapaper.jpg" style="width: 500px; height: 738px; " /></a></p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-twitter.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-twitter" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-twitter.jpg" style="width: 500px; height: 738px; " /></a></p> <p>需要注意的是,应该尽量避免将交互元素放在屏幕顶端正中间的位置,否则用户在进行操作的时候,手掌会将很大一部分内容遮住。实际上,任何会对下方内容产生直接控制作用的交互元素都不应该被放在这个位置。在<a href="http://itunes.apple.com/us/app/the-daily/id411516732?mt=8">The Daily的iPad应用</a>当中,内容正上方有一个滑块,用户可以通过拖动它来前后切换文章页面。意图不错,不过当你执行这个操作的时候就会发现,自己的手掌会遮挡住文章内容,而手指则会挡住缩略图,体验弱爆了。单凭这一个地方的疏忽,这个设计方案就足够作为反例登场了。</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-the-daily.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-the-daily" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-the-daily.jpg" style="width: 500px; height: 738px; " /></a></p> <h3> 又一个底部原则</h3> <p>我们可以从The Daily的失策当中了解到,对于iPad应用来说,在某些特定的情况下,控制元素还是避开顶端微妙。你可以将它们放在底部甚至侧面,只要控制元素本身及其所需的交互行为不会对内容的可读性造成影响。我们来看看<a href="http://itunes.apple.com/au/app/the-smh-for-ipad/id436270575?mt=8&amp;ls=1&amp;affToken=56102">Sydney Morning Herald&#39;s的iPad应用</a>是怎样做的。如下图所示,在该应用的界面底部有一个页码指示器,当用户对其进行拖动操作的时候,对应页面中的文章标题就会以列表的形式出现在指示器的上方,使用户不用翻页就能大致了解其他页面当中的内容。虽然文章标题列表会将页面中的内容遮挡住,但在这个交互情景当中,用户最为关注的是列表中的文章标题,而不再是原来的主要内容区。</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-sydney-morning-herald.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-sydney-morning-herald" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-sydney-morning-herald.jpg" style="width: 500px; height: 753px; " /></a></p> <p>对于在不同的情况下究竟应该将控制元素放在顶部还是底部的问题,我们不妨在这里弱弱的归纳一下:</p> <ul> <li> 对于那些起到界面导航作用的交互元素(例如&ldquo;菜单&rdquo;、&ldquo;返回&rdquo;、&ldquo;关闭&rdquo;等),以及用来完成分享、收藏、编辑、删除等功能的按钮,通常可以将它们放置在界面顶部。</li> <li> 对于那些用于浏览或预览内容的控制元素来说,界面底部是最佳位置。</li> </ul> <p>所以,我们可以在很多书籍或杂志应用当中看到,页面缩略图列表通常会被放在界面底部。(可以参考之前<a href="http://beforweb.com/node/48">iPad应用的十大用户体验设计准则</a>一文当中展示的Martha Stewart Living杂志以及Pulse的设计方案)假设你正在设计一款与地图相关的应用,界面当中有一个地标托盘,用户可以将地标从这个托盘当中拖拽出来,并&ldquo;按&rdquo;在地图上的某个地方。在这个例子当中,托盘同样应该被放在界面底部,这样可以保证当用户从托盘里将地标拖拽出来的时候,地图不至于被手遮挡住。</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> <h3> 交互对象的尺寸</h3> <p>如果说交互对象的布局位置取决于平台类型及持机方式,那么它们的尺寸则在很大程度上由手指的大小来决定。我们必须将这些交互元素设计的足够大,才能保证用户可以进行准确的辨识和触击。</p> <p>不过,要做的多大才算够呢?不妨抬起手看看自己的指尖。很多系统平台的设计规范都在这方面进行了描述,不过我个人觉得苹果做的仍是最棒的:理论上,可触击元素的最小尺寸应该为44像素(约1/4英寸或7毫米)见方。</p> <blockquote><p>The comfortable minimum size of tappable UI elements is 44 x 44 points.</p> </blockquote> <p>请注意point与pixel的换算关系在Retina屏与普通屏幕之间区别。</p> <p>在移动应用的上下文环境中,足够大的按钮不仅便于操作,而且可以让用户维持必要的注意力,避免被周围的环境所干扰。</p> <p>44像素见方的最小规格只是一种理想状态下的情况,在实际当中,合理的折中方案通常是必需的。即使是iPhone用户界面中的很多原生控件也避开了这个规则的限制。最典型的一个例子就是系统自带的键盘,其中每一个键位的高度是44像素,但宽度只有30像素;而横屏状态下,其宽度是44像素,高度则变为38像素。不过这也是苹果的无奈之举,因为怎样都必须将完整的QWERTY键盘搞到界面当中,所以必须在设计方案当中有所取舍。</p> <p>参考苹果的做法,当空间的局限使得我们确实无法实现44像素见方的设计方案时,应该尽量保证其44&times;30的最小规格。</p> <h3> 元素的尺寸与空间布局</h3> <p>上个世纪,不少人都被卡西欧的计算器手表浪费了大量的青春年华。问题不仅仅在于那些微小的按键会让戴着它的人看上去很二,最不靠谱的是,这些按键的排布实在是太紧密了。你想按5,但通常会按到8或是2;与其说是计算器,还不如叫它幸运转盘更合适些。尺寸过小的按键以及毫无间隔空间的布局,是产生这种结果的两个最直接的原因。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-watch" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-watch.jpg" style="width: 500px; height: 333px; " /></p> <p>为小屏幕设备进行界面设计的时候,这类挑战确实是我们经常需要面对的,而造成问题的根本原因却通常不是产品需求本身。无论是在计算器手表的全盛期,还是如今,我们时常会听到产品需求方翻来覆去的念叨着:&ldquo;咱就把这些东西再挪近一些吧...我只想在这个工具栏里再加一个按钮...&rdquo; 加你妹啊!</p> <p>如果我们必须在设计方案当中将交互元素排布的非常紧密,那么至少要把它们各自的尺寸尽量做大。想想iPhone原生的拨号键盘界面,或是Skype等应用。界面当中的拨号按键之间的间隔通常都很小,甚至没有间距;而每个按键的尺寸几乎可以用巨大来形容,因为这样可以有效的降低误操作的几率。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-skype" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-skype.jpg" style="width: 320px; height: 480px; " /></p> <p>其实,无论是iPhone原生的拨号界面,还是上图所示的Skype中的同类界面,它们都在底部导航工具栏的上方放置了一些控制按键。如果以我们在前文当中提到的一些原则标准来衡量的话,这种做法其实不算得当;但是在这几个具体的情景当中,这些控制按键的大尺寸特质却可以有效的降低它们与底部导航工具栏之间的视觉冲突<a class="eLink" href="http://beforweb.com">。</a></p> <p>所以,要在有限的小屏幕可视区域当中打造出成功的用户界面设计方案,我们必须结合实际的产品需求,在交互元素的尺寸和空间布局等方面做好充分的权衡与判断。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></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/10" 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/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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Android</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Wed, 15 Feb 2012 08:50:25 +0000 C7210 49 at http://www.beforweb.com http://www.beforweb.com/node/49#comments 导读文摘111018(移动应用的用户体验,轻博客,简约设计...) http://www.beforweb.com/node/15 <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-digest-reading.png" width="70" height="90" /></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>导读文摘节目时间。老规矩,选出6篇值得一看的新闻资讯或观点论述,无论网站产品还是移动应用都有涉及,就当作一顿精简而营养全面的下午茶点吧。</p> <ul> <li> Adobe发布iOS与Android版PDF阅读器Adobe Reader</li> <li> GuruDigger - 帮助靠谱的互联网工程师找到志同道合的技术合作伙伴</li> <li> Chime.in - 和用户共享收益,为挑战传统社交媒体而生</li> <li> 单一功能的应用程序是否给我们更好的用户体验?</li> <li> 轻博客浅析</li> <li> 简约主义设计:少就是多</li> </ul> <!--break--><h3> Adobe发布iOS与Android版PDF阅读器Adobe Reader</h3> <p>&ldquo;Adobe昨日推出了iOS版PDF阅读器Adobe Reader,可以支持iPhone, iPad和iPod Touch等设备。这款新应用程序即日起可从iTunes免费下载。与iOS设备Adobe Reader一道,Adobe还发布了Android版PDF阅读器,其功能与iOS设备Adobe Reader相似。搭载Android 2.2或更高版本的系统均可免费下载...&rdquo; <a class="mLink" href="http://tech.163.com/11/1018/04/7GKDHNNN000915BD.html">阅读全文</a></p> <p><img alt="adobe-reader-pdf-ios-android-iphone-ipad" src="/sites/default/files/images/201110/adobe-reader-pdf-ios-android-iphone-ipad.jpg" style="width: 334px; height: 480px;" /></p> <h3> GuruDigger - 帮助靠谱的互联网工程师找到志同道合的技术合作伙伴</h3> <p>&ldquo;有很多优秀的互联网工程师,大家有至少一个产品想法一直以来想去实现,其实一个人勉勉强强也能做,但是无论心理上还是生理上面...大家都需要一个志同道合的技术合作伙伴...&rdquo; <a class="mLink" href="http://www.36kr.com/p/53791.html">阅读全文</a></p> <p><img alt="logo-icon-gurudigger" src="/sites/default/files/images/201110/logo-icon-gurudigger.gif" style="width: 335px; height: 72px;" /></p> <h3> Chime.in - 和用户共享收益,为挑战传统社交媒体而生</h3> <p>&ldquo;当Facebook靠8亿用户上传内容旁的广告赚得盆满钵盈时,而真正上传优质内容的用户却一个子儿也没看到,这已经形成了大的社交网站的盈利模式,不过创业者Bill Gross想改变这一模式。Gross 是UberMedia 的CEO,UberMedia在周二推出了一个全新的社交网站,Chime.in ,这个网站的最大特色在于它会为用户贡献的内容付费...&rdquo; <a class="mLink" href="http://tech2ipo.com/29929/">阅读全文</a></p> <p><a href="screenshot-chime-in-ubermedia.jpg" rel="lightbox"><img alt="screenshot-chime-in-ubermedia" src="/sites/default/files/images/201110/screenshot-chime-in-ubermedia.jpg" style="width: 500px; height: 204px;" /></a></p> <h3> 单一功能的应用程序是否给我们更好的用户体验?</h3> <p>&ldquo;在iPhone上有两种不同的应用程序:一种是专注于某一件事并把它做深做透,另一种则是在一个应用程序中尝试去做许多不同的事情。那么,哪一种更好呢?这不一定是一个零和游戏,你不会只使用单一功能的应用程序或多功能应用。对于一个应用程序来说找到一个平衡点,虽然这个平衡点可能很难找到...&rdquo; <a class="mLink" href="http://www.leiphone.com/are-single-function-apps-better.html">阅读全文</a></p> <p><a href="/sites/default/files/images/201110/mobile-app-single-function-user-experience-tweetbot.jpg" rel="lightbox"><img alt="mobile-app-single-function-user-experience-tweetbot" src="/sites/default/files/images/201110/mobile-app-single-function-user-experience-tweetbot.jpg" style="width: 500px; height: 375px;" /></a></p> <h3> 轻博客浅析</h3> <p>&ldquo;轻博客不难定义,人们往往用微博与博客来形容它,像&lsquo;一半是微博,一半是博客&rsquo;,&lsquo;博客二代&rsquo;,&lsquo;比博客轻,比微博重&rsquo;等。伴随美国Tumblr网站的日益火爆,截至6月15日Tumblr上总计共有2087.3182万注册博客。</p> <p>中国也在今年引入了轻博客这种网络服务,创新工场的点点网,新浪的Qing,人人网的小站,网易的lofter等一大批轻博客竞相上线。无论是依附于强大的社交媒体后盾,还是赤手空拳的闯荡江湖,轻博客市场上如火如荼的追逐战已拉开序幕...&rdquo; <a class="mLink" href="http://www.socialmediawatch.org/archives/6721">阅读全文</a></p> <p><a href="/sites/default/files/images/201110/tumblr-diandian-blog.png" rel="lightbox"><img alt="tumblr-diandian-blog" src="/sites/default/files/images/201110/tumblr-diandian-blog.png" style="width: 500px; height: 190px;" /></a></p> <h3> 简约主义设计:少就是多</h3> <p>&ldquo;作为设计师的我们,都知道一个简约的设计可以创造出很美观的结果。然而,在真正去做的时候许多设计师都会遇到麻烦,在用相当少的元素去设计一个页面时,感觉相当的困难,结果都会觉得这个页面看上去像没完成的。</p> <p>网上有许多关于极简主义设计的文章可以去帮助你去实现效果,但却不是仅有的办法。现在,我会举一些关于极简主义设计的例子,大家可以去分析为什么有些能起作用有些却不能...&rdquo; <a class="mLink" href="http://www.im-ux.com/archives/899">阅读全文</a></p> <p><a href="/sites/default/files/images/201110/minimalist-design-simple-design.jpg" rel="lightbox"><img alt="" src="/sites/default/files/images/201110/minimalist-design-simple-design.jpg" style="width: 500px; height: 383px;" /></a></p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li><li class=" taxonomy-term-reference-2"><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/20" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google</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/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel">简约设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/50" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Adobe</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Android</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/52" typeof="skos:Concept" property="rdfs:label skos:prefLabel">社交媒体</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/53" typeof="skos:Concept" property="rdfs:label skos:prefLabel">轻博客</a></li></ul> Tue, 18 Oct 2011 06:51:21 +0000 C7210 15 at http://www.beforweb.com http://www.beforweb.com/node/15#comments