Be For Web - iPad http://www.beforweb.com/taxonomy/term/12 en 汉堡包菜单与设计原则的突破 http://www.beforweb.com/node/552 <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-hamburger-menu-navigation-mobile-pattern-ux-ui-design_0.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p> </p> <p></p> <p></p> <p>周六晚间。这一周更像是秋天了,夜里窗子不可以开的很大,也会用被子把自己裹起来了。</p> <p>今天花了3个小时看了教父,让我又想玩GTA了;那么多花里胡哨的意大利名字。刚刚呢,下去一些冰啤酒啊,少许威士忌啊,还嚼了个槟郎,烟抽的也有点晕。有朋友说了你丫是作死么?然也。我相信如果我手头还有其他东西的话我会一样不剩的全都塞进食管和气管。</p> <p>最近几周情绪化的严重了,前面几分钟还在和喵一起躺在床上有的没的念叨着幻想这一切都是在从前推推斑斑都健康平安的时日,过一会便因为对斑斑身体的担心而极致低落,然后突然会想想工作项目里的事有哪些可以优化啊哪些坚决不能带上线啊,然后歇斯底里的让自己high起来,接下来便是神经的彻底疲惫如现在这样。Fuck me.</p> <p>当然,接下来的译文并不是在这样的状态下做的;之前几天抽时间写的。打住吧,汉堡包,我都恶心了。这篇挺逗的其实,没说多少汉堡包的事儿,后面聊起价值观了。下面进入译文。</p> <!--break--><p>Luis Abreu在他最近的一篇文章&ldquo;<a href="http://www.beforweb.com/node/550">为什么要避免使用汉堡包菜单</a>&rdquo;当中对这一设计模式进行了有意思的解析。里面有一些不错的观点,值得一读;不过这篇文章也让我开始思考是否可以在某些时候打破一些设计原则。</p> <p>我在对Glassboard的设计进行点评的时候,列出了一些问题&mdash;&mdash;一些我在考虑使用汉堡包菜单之前通常会问自己的问题:</p> <ol> <li> 是否有某个较为独立的界面是用户会花很多时间来使用的?</li> <li> 是否有一系列数量会动态变化,但权重相等的菜单选项?</li> <li> 菜单选项中的内容是否容易记住?</li> <li> 不那么容易记住的选项是否会被用户时常用到?</li> <li> 选项数量有没有保持在一个最小范围内?</li> </ol> <p>需要注意,这是一份问题列表,而不是使用汉堡包菜单的理由列表。有些时候汉堡包菜单并不是好的解决方案,而有些时候这种模式却是不错的选择。每个应用都有其特定的目标及局限,最终采用怎样的方案仍然取决于实际情况,不要贸然假设某种方案可行与否。</p> <p>我在<a href="http://blog.jaredsinclair.com/post/82813888085/designing-unread-for-ipad-part-5-comical-amounts-of">探索iPad版本的Unread应用</a>时,发现即使是那些饱受争议的设计模式也有可能成为最佳选择。苹果的Phil Schiller当年在演示iPad时告诉我们iPad里的应用比绝大多数安卓应用好太多。后者多数是手机应用的放大版本,而iPad当中的应用更多的是围绕iPad的诸多优势(例如大屏)而重新设计的。不知你怎么想,我非常赞同Phil的评论,并且从那之后开始认为,所有将iPhone版本设计方案简单的放大然后塞到iPad当中的设计师都是缺乏自我尊重的。</p> <p>但是我发现,将iPhone版本放大的方式却最适合iPad版本的Unread应用,因为那样的全屏布局最契合Unread带给人们沉浸与放松的体验目标;而且在那样的模式当中,你完全不需要将手从iPad边缘移开就可以执行导航操作。</p> <p>创意工作当中的乐趣与挫败,它们就像一枚硬币的正反两面。试着把每个项目都当成是自己的第一个设计项目去对待。Marc Edwards分享过一则有趣的故事,关于他曾经的一位设计leader,一个从表面看来非常优柔寡断的leader:</p> <blockquote><p>事情一下明朗起来。</p> <p>他有意的去尝试各种不同的甚至是疯狂的想法,虽然明知道其中很多可能都是不可行的,但是他不在乎;事实证明如果我们循规蹈矩的去思考设计方案,那么很可能触及不到那些让人觉得难以置信的东西。有时项目进行到后面,问题甚至从&ldquo;哪种方式最好&rdquo;变成了&ldquo;我们能想出多少种方式&rdquo;,不到最后一刻便不做决策。做决策这件事本身的感觉可能很酷,但未必真的能够产生价值;价值由最后的结果所决定的。</p> <p>而我们得到的结果就是漂亮、好用、打破常规的设计方案。对其他人,特别是其他leader们来说,这种事情简直不可思议;但在我们内部看来,这事非常自然,没什么神秘之处。</p> <p>此外这种方式也很有趣,探索的过程相当有意思。在短时间里产出大量的替代方案,整个设计工作的节奏感很棒。我们不会在某个特定的方向上花费大量的时间,我们不会遇到设计师们通常会遇到的灵感障碍,因为我们允许自己去尝试&ldquo;错&rdquo;的东西,并且明白这些有可能是通往正确方案的桥梁。</p> </blockquote> </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/169" typeof="skos:Concept" property="rdfs:label skos:prefLabel">汉堡包</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/68" 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/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/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 20 Sep 2014 13:44:21 +0000 C7210 552 at http://www.beforweb.com http://www.beforweb.com/node/552#comments 点亮你的应用展示 - iOS设备及界面模板免费资源汇总 http://www.beforweb.com/node/256 <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-iphone-5s-5c-ios7-ui-showcase-template-flat.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>同样养喵的朋友们,到了他们6、7岁的年龄,一定要带他们去做体检,好吗?</p> <p>这种状态下的时间精力完全没法得到保证,本周只能趁这一天不用上班的时间把前面看到的一些不错的资源汇总下。东西都比较新,iPhone 5S和5C的设备模板PSD为主打;找几款合适的拿去下载,用来展示应用界面或是制作原型,再合适不过了。如果你觉得有用,不妨也分享给更多道上的兄弟姐妹吧。开始验货。</p> <!--break--><h3> iPhone 5S机身正面矢量化PSD模板</h3> <p>Pixeden出品,包含iPhone 5S黑、白、土豪金三种颜色机型的正面可拉伸矢量图形。<a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5s-psd-vector-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=360&amp;id=52&amp;Itemid=81">直接下载</a></p> <p><img alt="iphone-5s-mockup.jpg" src="/sites/default/files/images/201309-6/iphone-5s-mockup.jpg" /></p> <h3> iPhone 5S机身半侧面矢量化PSD模板</h3> <p>Pixeden出品,包含iPhone 5S黑、白、土豪金三种颜色机型的半侧面可拉伸矢量图形。<a href="http://www.pixeden.com/psd-mock-up-templates/3-4-view-iphone-5s-psd-vector-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=361&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <p><img alt="iphone5s-3d-mockup.jpg" src="/sites/default/files/images/201309-6/iphone5s-3d-mockup.jpg" /></p> <h3> iPhone 5S机身3D视角矢量化PSD模板</h3> <p>Pixeden出品,包含iPhone 5S黑、白、土豪金三种颜色机型的3D视角可拉伸矢量图形。<a href="http://www.pixeden.com/psd-mock-up-templates/3d-view-iphone-5s-psd-vector-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=366&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <p><img alt="iphone-5S-mobile-celular-isometric-view-3d-mock-up-psd.jpg" src="/sites/default/files/images/201309-6/iphone-5S-mobile-celular-isometric-view-3d-mock-up-psd.jpg" style="height: 308px; width: 580px;" /></p> <h3> iPhone 5C机身正面矢量化PSD模板</h3> <p>Pixeden出品,包含iPhone 5C蓝、绿、黄、粉、白五种颜色机型的正面可拉伸矢量图形。<a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5c-psd-vector-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=362&amp;id=52&amp;Itemid=81">直接下载</a></p> <p><img alt="iphone-5c-template.jpg" src="/sites/default/files/images/201309-6/iphone-5c-template.jpg" /></p> <h3> iPhone 5C机身半侧面矢量化PSD模板</h3> <p>Pixeden出品,包含iPhone 5C蓝、绿、黄、粉、白五种颜色机型的半侧面可拉伸矢量图形。<a href="http://www.pixeden.com/psd-mock-up-templates/3-4-iphone-5c-psd-vector-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=367&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <div> <img alt="" src="/sites/default/files/images/201309-6/iphone-5C-mobile-celular-multicolors-three-quarters-view-3d-mock-up-psd.jpg" style="height: 308px; width: 580px;" /></div> <div> <h3> iPhone 5C机身3D视角矢量化PSD模板</h3> <p>Pixeden出品,包含iPhone 5C蓝、绿、黄、粉、白五种颜色机型的3D视角可拉伸矢量图形。<a href="http://www.pixeden.com/psd-mock-up-templates/3d-view-iphone-5c-psd-vector-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=363&amp;id=52&amp;Itemid=81">直接下载</a>。</p> </div> <p><img alt="iphone-5C-mobile-celular-multicolors-isometric-view-3d-mock-up-psd.jpg" src="/sites/default/files/images/201309-6/iphone-5C-mobile-celular-multicolors-isometric-view-3d-mock-up-psd.jpg" style="height: 308px; width: 580px;" /></p> <h3> 扁平化iPhone 5S/5C机身正面PSD模板</h3> <p>设计师MSGS出品的扁平化风格iPhone 5S和5C的机身正面PSD。<a href="http://dribbble.com/shots/1242112-Free-Flat-iPhone-5c-5s-Mockup">查看详情</a>或<a href="http://dribbble.s3.amazonaws.com/users/70589/screenshots/1242112/attachments/168434/iPhone5s5c-mockup.psd">直接下载</a>。</p> <p><img alt="iphone5s-mockup_1x.png" src="/sites/default/files/images/201309-6/iphone5s-mockup_1x.png" /></p> <h3> iPhone 5C机身半侧面矢量化PSD模板</h3> <p>Pinto出品的iPhone 5C机身半侧面矢量化PSD模板。<a href="http://wearepinto.com/wecreate/iphone5c-free-vector-psd-mockup/">查看详情</a>或<a href="http://wearepinto.com/wecreate/iphone5c-free-vector-psd-mockup/iphone_5c_free_vector_psd_mockup_by_pinto.zip">直接下载</a>。</p> <p><img alt="iPhone-5c-free-vector-PSD.jpg" src="/sites/default/files/images/201309-6/iPhone-5c-free-vector-PSD.jpg" /></p> <h3> 扁平化iPhone 5三种姿态PSD模板下载</h3> <p>Pixeden出品,包含iPhone 5黑白两色机型的竖屏、横屏、3D视角三种姿态的PSD模板。<a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=291&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <p><img alt="001-iphone-mockup-flat-black-white-landscape-perspective-psd.jpg" src="/sites/default/files/images/201309-6/001-iphone-mockup-flat-black-white-landscape-perspective-psd.jpg" style="height: 308px; width: 580px;" /></p> <p><img alt="002-iphone-mockup-flat-black-white-landscape-perspective-psd.jpg" src="/sites/default/files/images/201309-6/002-iphone-mockup-flat-black-white-landscape-perspective-psd.jpg" style="height: 308px; width: 580px;" /></p> <p><img alt="003-iphone-mockup-flat-black-white-landscape-perspective-psd.jpg" src="/sites/default/files/images/201309-6/003-iphone-mockup-flat-black-white-landscape-perspective-psd.jpg" style="height: 308px; width: 580px;" /></p> <h3> iPad机身3D视角矢量化PSD模板下载</h3> <p>Pixeden出品,包含iPad黑白两色机型的竖屏、横屏两种姿态的PSD模板。<a href="http://www.pixeden.com/psd-mock-up-templates/psd-ipad-perspective-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=265&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <p><img alt="002-ipad-landscape-black-white-3d-perspective-mockup-psd.jpg" src="/sites/default/files/images/201309-6/002-ipad-landscape-black-white-3d-perspective-mockup-psd.jpg" style="height: 308px; width: 580px;" /></p> <p><img alt="01-ipad-landscape-black-white-3d-perspective-mockup-psd.jpg" src="/sites/default/files/images/201309-6/001-ipad-landscape-black-white-3d-perspective-mockup-psd.jpg" style="height: 308px; width: 580px;" /></p> <h3> 扁平化iPad三种姿态PSD模板下载</h3> <p>Pixeden出品,包含iPad黑白两色机型的竖屏、横屏两种姿态的PSD模板。<a href="http://www.pixeden.com/psd-mock-up-templates/ipad-psd-flat-mockup">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=312&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <p><img alt="01-ipad-mockup-flat-black-white-landscape-psd.jpg" src="/sites/default/files/images/201309-6/001-ipad-mockup-flat-black-white-landscape-psd.jpg" style="height: 308px; width: 580px;" /></p> <p><img alt="02-ipad-mockup-flat-black-white-landscape-psd.jpg" src="/sites/default/files/images/201309-6/002-ipad-mockup-flat-black-white-landscape-psd.jpg" style="height: 308px; width: 580px;" /></p> <h3> iPhone概念设计 - 无边框风格界面展示PSD模板</h3> <p>概念设计,源于网络,仅供参考。<a href="http://freebiesbug.com/psd-freebies/iphone-6-infinity/">查看详情</a>或<a href="http://dribbble.com/shots/1190633-iPhone-6-Infinity/attachments/157317">直接下载</a>。</p> <p><img alt="iphone6-infinity.jpg" src="/sites/default/files/images/201309-6/iphone6-infinity.jpg" /></p> <h3> iPhone概念设计 - 宽屏无边框风格界面展示PSD模板</h3> <p>概念设计,源于网络,仅供参考。<a href="http://dribbble.com/shots/1191240-Wide-iPhone-Mockup-PSD">查看详情</a>或<a href="http://d.pr/cZxE">直接下载</a>。</p> <p><img alt="Wide-iPhone-Mockup-PSD.jpg" src="/sites/default/files/images/201309-6/Wide-iPhone-Mockup-PSD.jpg" /></p> <h3> iPhone 5实机手持照片PSD模板下载</h3> <p>设计师Jackie Tran出品,包含11张实机手持照片模板,PSD格式,背景可更换。<a href="http://dribbble.com/shots/1078068-iPhone-Holding-Hand-Templates">查看详情</a>或<a href="https://cloudup.com/ci7uwEMNchO">直接下载</a>。</p> <p><img alt="iphone-holding-hand-templates.gif" src="/sites/default/files/images/201309-6/iphone-holding-hand-templates.gif" style="height: 435px; width: 580px;" /></p> <h3> iOS7毛玻璃效果界面分层3D视角PSD模板</h3> <p>Pixeden出品,毛玻璃效果分层模板。<a href="http://www.pixeden.com/psd-mock-up-templates/perspective-app-screen-mock-up-5">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=338&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <p><img alt="001-perspective-glass-levels-mockup-app-ui-presentation-psd.jpg" src="/sites/default/files/images/201309-6/001-perspective-glass-levels-mockup-app-ui-presentation-psd.jpg" style="height: 308px; width: 580px;" /></p> <h3> iOS7风格界面PSD模板</h3> <p>Pixeden出品,单界面侧立展示。<a href="http://www.pixeden.com/psd-mock-up-templates/perspective-app-screen-mock-up-4">查看详情</a>或<a href="http://www.pixeden.com/index.php?option=com_phocadownload&amp;view=category&amp;download=329&amp;id=52&amp;Itemid=81">直接下载</a>。</p> <p><img alt="001-app-screen-mock-up-presentation-psd.jpg" src="/sites/default/files/images/201309-6/001-app-screen-mock-up-presentation-psd.jpg" style="height: 308px; width: 580px;" /></p> <h3> 应用界面3D视角陈列PSD模板</h3> <p>以3D视角陈列多张应用界面。<a href="http://graphicburger.com/perspective-app-screens-mock-up/">查看详情</a>或<a href="http://graphicburger.com/download/Perspective-App-Screens-Mock-Up.zip">直接下载</a>。</p> <p><img alt="Isometric-Perspective-Mock-Up-Vol2-600.jpg" src="/sites/default/files/images/201309-6/Isometric-Perspective-Mock-Up-Vol2-600.jpg" style="height: 870px; width: 580px;" /></p> <h3> 应用界面3D视角多层陈列PSD模板</h3> <p>以3D视角陈列多张应用界面,包含三种厚度效果。<a href="http://graphicburger.com/isometric-perspective-mock-up/">查看详情</a>或<a href="http://graphicburger.com/download/Isometric-Perspective-Mock-Up.zip">直接下载</a>。</p> <p><img alt="Isometric-Perspective-Mock-Up-600.jpg" src="/sites/default/files/images/201309-6/Isometric-Perspective-Mock-Up-600.jpg" style="height: 838px; width: 580px;" /></p> <h3> 应用界面3D视角多层陈列PSD模板</h3> <p>以3D视角陈列多张应用界面,包含三种厚度效果。<a href="http://graphicburger.com/app-screen-front-view-mock-up/">查看详情</a>或<a href="http://graphicburger.com/download/App-Screen-Front-View-MockUp.zip">直接下载</a>。</p> <p><img alt="App-Screen-600.jpg" src="/sites/default/files/images/201309-6/App-Screen-600.jpg" style="height: 667px; width: 580px;" /></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_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/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/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/149" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone 5S</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/150" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone 5C</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/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/143" typeof="skos:Concept" property="rdfs:label skos:prefLabel">素材</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/146" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Mockup</a></li></ul> Sat, 28 Sep 2013 14:27:46 +0000 C7210 256 at http://www.beforweb.com http://www.beforweb.com/node/256#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/104 <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-device-iphone-ipad-android-orientation-portrait-landscape-design-user-experience.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>之前一周朦朦胧胧的过掉了,想来也没什么可回忆的。这是一种不坏的状态,就像每天早上莫名的空洞,它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑。有吗?也许只是在哄骗和宽慰自己。</p> <p>杂志一般的小译文一篇,适合这样的下午做一做,适合这样的周末读一读。走着。</p> <p>眼下,智能移动设备内置的加速计的主要作用,就是根据设备的定向方式来决定屏幕的显示模式,也就是在横屏或竖屏模式之间进行切换。这种功能使用户通过简单的动作就可以得到额外的布局模式,期间不需要操作任何界面元素或实体按钮。对于我们来说,这是一个提升产品用户体验的契机,但其中也不乏挑战;我们要充分了解不同定向方式所涉及到的使用情境,并确保两种体验模式之间的差异不会给用户带来唐突的感觉。</p> <p>几乎所有类型的移动应用都能从显示模式切换功能当中获益。本文将围绕着这一话题,为应用的设计师与开发者们介绍一些可以运用到实际工作中的基础概念,同时还会帮助大家了解那些在实践当中有可能遇到的挑战以及相应的解决方案<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 通过设备定向切换显示模式</h3> <p>Youtube的移动应用是一个很典型的案例。在竖屏模式中,视频窗口较小,但相关信息比较丰富;而在横屏模式下,视频展开为全屏,并向用户提供了更加全面的播放控制功能。当视频播放结束后,界面模式会自动切换到竖屏状态,籍此提示用户调转设备并通过更全面的导航和信息索引来浏览其他视频。</p> <p><img alt="youtube-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/youtube-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 263px;" /></p> <p>不过在有些时候,第二显示模式也会给用户带来迷惑。以<a href="http://itunes.apple.com/us/app/cardmunch-business-card-reader/id478351777?mt=8">CardMunch</a>为例(LinkedIn推出的名片扫描及浏览工具),其横屏模式会将之前整个列表形式的界面改变成为&ldquo;旋转木马&rdquo;视图。(相关阅读:<a href="http://beforweb.com/node/69#a1">iOS用户体验解析 - 空间模型与旋转木马视图</a>)</p> <p><img alt="cardmunch-carousel-list-business-card-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/cardmunch-carousel-list-business-card-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 263px;" /></p> <p>这个横屏界面中缺少关于定向切换的视觉提示,而且其中几乎没有提供任何功能操作,用户无法添加或编辑名片,只能浏览并进入详情界面。特别是如果用户在一开始就以横屏方式打开的应用,那么在缺乏引导与提示的情况下,他们很有可能无法发现竖屏模式的界面及相应的内容与功能。</p> <h3> 设计模式</h3> <p>设备的定向方式被改变之后,应该以怎样的方式呈现新的视图呢?我们总结出了四种常见的设计模式。</p> <h4> 液态</h4> <p>类似网页设计中的液态布局方式。按照新的显示规格,对界面元素的位置及尺寸进行响应式的调整。具有代表性的产品案例包括Skype及<a href="http://getpocket.com/">Pocket</a>应用。</p> <p><img alt="skype-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/skype-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 263px;" /></p> <p><img alt="pocket-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/pocket-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 263px;" /></p> <h4> 扩展</h4> <p>在这种模式中,界面会根据屏幕定向方式的变化而增加或减少布局元素(通常是导航)。例如IMDb的iPad应用会在横评模式下增加一个左侧导航列表,而在竖屏状态时,用户可以点击界面当中的&ldquo;全部作品&rdquo;展开这个列表。</p> <p><img alt="imdb-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/imdb-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 281px; " /></p> <p>对于这类应用,其自身的内容与功能不应该随着显示模式的切换而增减&mdash;&mdash;需要调整的是一些关键界面元素的呈现方式。不要让用户必须保持某种定向方式才能获取特定的内容与功能。</p> <h4> 互补</h4> <p>两种显示模式当中的内容形式可以是彼此互补和辅助的关系。以金融类的应用为例,在竖屏状态下,信息可以通过普通的数据列表形式呈现,而调转屏幕之后,可以充分利用新的界面宽度,以统计图表的形式展示数据。</p> <p><img alt="s-bank-chart-iphone-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/s-bank-chart-iphone-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 281px; " /></p> <h4> 延伸</h4> <p>第二显示模式可以作为默认状态的功能延伸与强化。举个简单的例子,对于遥控器类的应用,竖屏状态的默认界面中可以包含一些最基本的功能与频道信息;而在横屏状态下,用户不仅能查看到各频道完整的节目排期,而且同样可以在这个视图当中执行频道切换、设定录像时间等操作。</p> <p><img alt="remote-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/remote-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 281px; " /></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> 确定默认的定向方式</h3> <p><a href="http://itunes.apple.com/us/app/above-beyond-john-kascht/id454178260?mt=8">Above &amp; Beyond是</a>iPad上的一款交互式电子书。它拥有横、竖两种显示模式,其中竖屏模式提供更大的、细节质量更高的作品视图,不过只有在横屏状态时才会默认显示&ldquo;返回主菜单&rdquo;、&ldquo;评论&rdquo;一类的互动功能。</p> <p><img alt="above-and-beyond-ebook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/above-and-beyond-ebook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 281px; " /></p> <p>然而对于iPad来说,竖屏才是其的默认定向方式。所以当用户第一次在竖屏状态下打开应用时,系统会提示用户通过点击屏幕来调出相关的功能&mdash;&mdash;设计师在这一点上考虑的非常周全。</p> <p>不过对于Andorid以及Windows 8的平板,以及BlackBerry的Playbook来说,它们的默认定向方式是横屏。那么在这些设备中,界面显示模式的策略及相关引导提示就需要发生相应的变化了&mdash;&mdash;我们要确保默认显示模式当中的内容与功能符合目标设备自身默认定向方式的特点。</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>上下文使用环境是移动应用用户体验设计当中的关键组成要素(相关阅读:<a href="http://beforweb.com/node/66">iOS用户体验要素解析</a>,<a href="http://beforweb.com/node/80">为应用的上下文环境而设计</a>),在考虑屏幕定向及显示模式切换的相关问题时,这方面的因素也会起到重要的影响作用。</p> <p>以目前日渐流行的食谱类应用为例,很多硬件厂商甚至为这些应用打造了相关的壁挂或桌面支架,使用户能够更方便的在厨房当中使用。</p> <p><img alt="s-cookbook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/s-cookbook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 198px; " /></p> <p>而我们也可以根据这类应用在不同的使用情景中的需求用例来创建具有差异性的显示模式。以<a href="http://www.bettycrocker.com/downloads-and-games/ipad-app">The Betty Crocker Cookbook</a>为例,当用户在相对安定的状态下希望阅读和学习食谱时,他可以使用竖屏模式;此时界面中会展示完整的烹饪及食谱信息,同时还包括最终效果图以及相关的功能元素。如果用户希望在厨房一边烹饪一边进行参考,那么横屏模式就更加适用了。在这种状态下,每一步的操作指导都会占据一屏的篇幅,字号更大,便于在短时间内识别;利用内置摄像头,应用还可以识别特定的肢体动作,用户无需触摸屏幕,只要在摄像头前挥挥手,操作指导就会自动翻页。</p> <p><img alt="betty-cookbook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/betty-cookbook-ipad-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 281px; " /></p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动设计" src="http://beforweb.com/sites/default/files/images/products/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动设计</a></h4> <p><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者从人-机-环的角度出发来阐述移动应用的设计,并建立了移动应用设计的基本原则;然后,根据移动端的情境、移动设备的特征,以及触摸的交互方式,总结了移动导航和框架设计的主要形式,并给出了导航设计的原则和思路...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 引导用户在不同的显示模式之间切换</h3> <p>通过调转屏幕来切换显示模式,从某种程度上讲这种交互方式并不符合直觉。如果界面中没有任何视觉引导和提示,用户很有可能错过另外一种显示模式及相应的功能体验。以iPhone自带的计算器应用为例,如果用户不知道它还能提供横屏模式,那就会错失掉那些高级计算功能。</p> <p>通过视觉元素对用户进行提示与引导,这可以使产品的体验更加符合直觉(相关阅读:<a href="http://beforweb.com/node/27">具有引导性的移动应用界面设计模式</a>)。我们来看一些可以用来提示用户进行显示模式切换的设计思路。</p> <h4> 标题栏</h4> <p>通过标题栏作为提示,这种方式主要运用在第二显示模式当中。仍使用之前的遥控器应用作为例子,如果用户以横屏状态打开了应用,他将看到一个固定显示在左侧的标题栏,其中的标题文字方向会暗示他将屏幕调转过来进行阅读,从而发现竖屏模式。</p> <h4> 切换按钮</h4> <p>与标准的分享按钮类似,我们也可以使用能够被普遍认知的图标按钮提示用户手动切换横竖屏显示模式。</p> <p><img alt="icons-button-share-google-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/icons-button-share-google-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 125px; " /></p> <p>两种显示模式当中都要包含这个切换按钮。用户点击之后,显示模式自动切换,虽然接下来用户未必会真正调转设备进行查看,但他们通过这种方式了解了应用所提供的两种显示模式,将来会逐渐的在需要的时候自行调转设备,不再需要按钮的辅助。所以该按钮即可以触发切换功能,同时也可以作为视觉提示。</p> <p><img alt="toggle-switch-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/toggle-switch-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 257px; " /></p> <p>切换图标也未必要以标准按钮的形式出现:</p> <p><img alt="toggle-switch-22-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/toggle-switch-22-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 290px; " /></p> <p>需要注意的是,这种方式有它自身的风险,在界面中添加某种非标准的、持续存在的辅助性元素,这本身是具有一定争议的。不过这种方式的简单有效也是显而易见的。所以也希望各位设计师们能够从这点出发,扩展思路,结合产品的实际情况进行实践<a class="eLink" href="http://beforweb.com">。</a></p> <h4> 拖拽把手</h4> <p>使用把手形式的控件来提示用户通过拖拽展开第二视图模式,如果用户直接调转设备的话,第二视图模式也会自动展开,类似卷帘的效果。带有方向的动画过渡效果可以使用户对两种视图模式的层叠关系产生深刻的印象。</p> <p><img alt="drawer-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience" src="/sites/default/files/images/201208-2/drawer-application-layout-mobile-device-orientation-portrait-landscape-desing-user-experience.jpg" style="width: 500px; height: 266px; " /></p> <h3> 总结</h3> <p>我们习惯于将这些&ldquo;额外&rdquo;的显示模式作为应用主要界面模式的附属物,其主要原因也许就在于很多用户根本不了解它们的存在。通过一定的视觉提示,引导用户发现这些同样是经过精心考虑和打造的界面模式,我们就能使应用针对不同的使用情境发挥更大的价值,从而有效提升产品的友好性及体验满意度。</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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</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/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/68" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计模式</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/73" 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> Sat, 18 Aug 2012 08:27:02 +0000 C7210 104 at http://www.beforweb.com http://www.beforweb.com/node/104#comments iOS Wow体验 - 第七章 - 操作图例与触屏人机工学 http://www.beforweb.com/node/99 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-ios-iphone-ipad-wow-factor-app-ux-design-techniques-3-b.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第七章译文精选,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/87">Wow体验 - 第六章 - 交互模型与创新的产品概念(2)</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>相比于前几年,如今的触屏设备已经成为市场当中的绝对主流了。不过即便如此,人们对于这类设备的人机物理交互方式仍然缺乏足够清晰的认知与理解。市面上的很多应用虽然在功能方面都相当的酷,但是从人机工学的角度来看,它们的设计却非常不合理。这些应用能够很有效地激发用户的好奇心,吸引他们去下载,但通常会由于用起来相当不舒服而被用户很快地卸载掉。</p> <p>我们要尽量避免这种情况发生在自己的产品上。花点时间来了解一些这方面的基本常识是很有必要的,本章所要展示的一些基本概念将为你的实际设计工作奠定良好的基础。</p> <!--break--><h3 id="a1"> 对肢体动作的理解</h3> <p>也许这是你初次涉足移动领域的交互设计工作,不过在这之前,你对于其他平台当中的相关设计工作应该已经拥有丰富的经验了。除了要在移动设备的输入及输出方式上做到全面的认知以外,你还必须对人机交互过程当中的肢体动作规律加以理解。回想一下过去的工作经历,你会发现,网站或是桌面设备客户端的相关设计方案当中基本不会涉及到人机物理交互方式等方面的因素。因为桌面设备当中的人机交互方式早已成为一种固化的模式,键盘、鼠标、显示器一直是最基本的输入及输出设备,而且几十年来并没有发生过本质的变化。</p> <p>而在触屏移动设备领域,你的设计思路必须突破传统的束缚。相比于通过硬件输入设备对软件进行控制操作的模式,我们现在所面对的是更加虚拟化的、具有更高灵活性的交互环境。在这个环境当中,触摸是最基础也是最重要的输入方式,我们几乎可以将这种方式以任何形式运用到任何交互对象上。这就意味着,当你在为移动应用进行设计的时候,你同时也在打造着专门属于这个产品的&ldquo;键盘&rdquo;和&ldquo;鼠标&rdquo;。这显然给设计师们带来了极高的自由度,但同时也带来了一些挑战。</p> <h4> iPhone</h4> <p>iPhone是当今移动计算领域中的精华产品,它的尺寸规格可以让用户在单手持机的情况下完成多数操作任务。iPhone的机身上只有四个实体硬按键,外加一个静音切换开关。可以说,这些硬按键的布局方案本身就为用户定义了一种最基本的持机方式,不过实际当中的情况远不止这一种。</p> <p>经过之前几章的学习,你也许已经逐渐了解了应该怎样去打造具有差异化的交互机制,但是我们一直以来关注的话题当中几乎没有涉及到人机物理交互方面的问题。好的设计方案必须能够确保最终的实际产品在用户手中是真正好用的。</p> <p>对于iPhone,我们可以归纳出六种持机操作方式;在应用的设计工作中,这些方面的因素是必须被考虑进去的。当然,我们并不需要让界面的布局能够完美地适应于每一种方式,但至少应该保证设计方案对其中的一两种是友好的。</p> <p><img alt="" src="/sites/default/files/images/201207/figure-7-1.png" style="width: 514px; height: 408px; " /></p> <p class="figure-caption">图 7-1 纵向单手持机操作</p> <p><img alt="" src="/sites/default/files/images/201207/figure-7-2.png" style="width: 533px; height: 426px; " /></p> <p class="figure-caption">图 7-2 纵向一手持机一手操作</p> <p><img alt="iphone-double-hands-operation" src="/sites/default/files/images/201207/figure-7-3.png" style="width: 538px; height: 420px; " /></p> <p class="figure-caption">图 7-3 纵向双手持机操作</p> <p><img alt="iphone-landscape-double-hands" src="/sites/default/files/images/201207/figure-7-4.png" style="width: 540px; height: 405px; " /></p> <p class="figure-caption">图 7-4 横向单手持机操作</p> <p><img alt="iPhone landscape one hand" src="/sites/default/files/images/201207/figure-7-5.png" style="width: 551px; height: 432px; " /></p> <p class="figure-caption">图 7-5 横向一手持机一手操作</p> <p><img alt="" src="/sites/default/files/images/201207/figure-7-6.png" style="width: 563px; height: 408px; " /></p> <p class="figure-caption">图 7-6 横向双手持机操作</p> <p>除了这些以外,我们还可以在实际当中发现更多的持机操作方式,不过这六种确实是最具代表性和参考价值的,而且其中的任何一种方式都会对界面布局及手势机制等方面的设计决策造成影响。在操作过程中,手的位置以及屏幕的定向方式也会决定着交互行为的整体效率。在产品前期,我们就应该考虑到这些方面的因素,并通过原型对各种持机操作方式进行充分的测试,以评估设计方案在不同情况下的友好程度。</p> <h4> iPad</h4> <p>iPad的尺寸显然比iPhone大很多,这也使其在人机物理交互方面的表现与iPhone略有不同。而且正像我们在<a href="http://beforweb.com/node/80">第四章</a>当中提到的,iPad带来的是更加闲适化的计算体验,用户与其进行交互会话的时间通常较长。所以,这款设备所体现出的两点交互特性是我们必须注意的:</p> <ul> <li> 尺寸规格更大。</li> <li> 交互会话时间更长。</li> </ul> <p>出于这两点原因,用户在一般情况下不会通过单手来使用iPad。当然这并不意味着iPad无法通过单手操作,只是双手配合使用的情况更为普遍。接下来的几张图片向我们展示了用户在使用iPad时所惯用的持机操作方式。</p> <p><img alt="iPad single hand" src="/sites/default/files/images/201207/figure-7-7.png" style="width: 512px; height: 428px; " /></p> <p class="figure-caption">图 7-7 纵向一手持机一手操作</p> <p><img alt="ipad double hands" src="/sites/default/files/images/201207/figure-7-8.png" style="width: 531px; height: 417px; " /></p> <p class="figure-caption">图 7-8 纵向双手持机操作</p> <p><img alt="ipad landscape" src="/sites/default/files/images/201207/figure-7-9.png" style="width: 517px; height: 407px; " /></p> <p class="figure-caption">图 7-9 横向一手持机一手操作</p> <p><img alt="iPad landscape double" src="/sites/default/files/images/201207/figure-7-10.png" style="width: 477px; height: 414px; " /></p> <p class="figure-caption">图 7-10 横向双手持机操作</p> <p>对于iPad应用,我们同样要充分地考虑到用户最可能采用的持机操作方式,并以此来验证设计方案的友好性。</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 id="a2"> 界面元素的布局</h3> <p>在<a href="http://beforweb.com/node/66">第二章</a>里,我们曾经在直接操纵的概念当中提到了界面元素的尺寸及间距方面的设计问题。为触屏设备打造用户界面设计方案的时候,有两点基本的设计要素是必须考虑到的:</p> <ul> <li> 尺寸:触控元素的目标区域范围。</li> <li> 间距:触控元素彼此之间的距离。</li> </ul> <p>在iPhone时代之前,我也许会对触控元素的目标区域尺寸做出非常明确的建议。其实直到几年前,我们仍习惯于为触控目标设定一个比较大的&ldquo;最小尺寸&rdquo;,以避免因为触控元素过小所造成的可用性方面的问题。曾经,这个最小尺寸大致在1cm2到1.5cm2之间。想想看,这可是一个不小的按钮了,甚至比iPhone中的应用图标还要大。另外,在多个触控元素的间距方面,曾经的大致原则是,无论横向还是纵向,彼此之间至少要保持1cm的距离。过去的这些习惯性做法也是有一定道理的,因为当时的触屏技术在感应定位方面还无法做到非常精确,很多时候,一个交互对象的有效触控区域距离其本身会有一定程度的偏差。所以当时的用户界面设计方案必须将这些方面的因素都考虑进去。另外,大尺寸的触控目标区域也可以为用户带来某种心理上的保障,使操作感更加舒适稳妥。</p> <p>如今,这种情况已经得到了一定程度的改善,但界面元素的触控区域尺寸及间距方面的问题依然是我们在打造交互体验的过程中所必须考虑到的。iOS设备所采用的电容触屏技术在感应定位方面具有高度的精确性。也许你已经注意了,当使用iPhone浏览网页的时候,即使页面一直保持在默认的缩小状态,你依然可以通过小指来准确地点击到那些已经被缩得很小的链接或按钮。在这种情况下,我们其实并不需要在触控元素目标区域的最小尺寸上做过多的纠结;相比而言,触控元素之间的间距才是界面布局方案当中的关键因素。</p> <p>触控元素彼此之间的距离越近,用户误操作的可能性就越大。关于间距的把握,我们有一个大致的原则,也就是两个触控元素之间的距离应该与它们自身的尺寸成反比。</p> <p><img alt="iphone control ui elements layout" src="/sites/default/files/images/201207/figure-7-11.png" style="width: 524px; height: 417px; " /></p> <p class="figure-caption">图 7-11 两个触控元素之间的距离应该与它们自身的尺寸成反比</p> <p>触控元素的尺寸越大,它们之间的距离就可以越近。反之,小尺寸触控元素之间应该尽量保持较大的间距,因为较小的元素对触摸的准确性要求更高,它们之间的距离必须足够远,才能有效地降低误操作的可能性。而大尺寸交互元素通常是很容易被触摸到的,减小它们之间的距离并不会对操作的准确性造成影响。</p> <p>略有夸张的讲,如果界面当中只有一个交互对象,那么即使将它设计为1像素见方,单从触控操作的角度来说也是完全可行的。</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 id="a3"> 反馈机制</h3> <p>时间与状态的概念往往会在交互方案当中起到至关重要的作用。我们已经在本书之前的<a href="http://beforweb.com/node/86">相关章节</a>当中对那些以时间及状态变化为主导的解决方案的进行了分析。现在,我们将围绕着这两个概念深入思考系统对于交互操作的响应方式。</p> <p>系统应该以怎样的方式对用户的输入行为产生有效的反馈,这是我们在设计方案当中必须明确定义出来的。反馈的本质作用是确认某个交互事件已经发生,并且已经被系统所捕获。通常,交互对象会发生一些简单的状态变化,以此从视觉上体现出反馈的效果。</p> <p>另外,从情感化的角度来看,当用户以正确的方式执行了某种交互操作时,系统所做出的恰当的反馈还可以给用户带来积极可靠的体验与感受。所以,在我们从整体上为产品打造具有差异化的交互模型的同时,还必须对这些细节当中的交互机制保持必要的敏感度。某些特定的交互模式当中的细节行为特征会对整体设计方案产生一定程度的影响,对于这些,我们要做到心知肚明。</p> <p>举个简单的例子,那些刚刚涉足移动领域的设计师们通常会因为触屏设备当中的交互对象缺少&ldquo;悬停&rdquo;状态属性而感到不满,因为在传统设备当中,这类状态属性往往可以被赋予很多出彩的效果。实际上,悬停也只是系统反馈机制当中的一种,在触屏设备中,我们完全可以在其他细节当中通过更具创造性的方式来实现类似的反馈效果。让我们想一想触屏设备当中最基本的交互事件&mdash;&mdash;触摸。在多数情况下,系统对于触摸事件的反馈就是使交互对象所呈现出的状态发生某种简单的变化。如果说这种机制当中缺乏某种创新性,那么根本原因就在于这个反馈机制的思路并没有摆脱传统设备的束缚,它所体现出来的仍然是&ldquo;鼠标按下&rdquo;或&ldquo;鼠标点击&rdquo;这样的行为模式。为了降低应用开发的难度,iOS预先定义了一系列最基本的反馈行为模式,并使它们成为交互元素自身所固有的一种属性;这种做法在某种程度上也局限了反馈机制的创意空间。</p> <p>我们生活在一个由各种严整的物理定律所支配着的世界当中。在设计用户界面的时候,我们也应该从自己在现实世界所获得的经验当中汲取灵感,为各种交互事件增添更多逼真而且有趣的视觉效果。我们不仅可以改变交互对象的外观,同时还可以改变它们在状态变化过程当中的视觉效果。有没有什么动画模式可以使元素表现出力反馈的效果?当然有。我们能否同样为手势操作增添某种即时的视觉回馈效果?当然可以。</p> <p>如果你准备在设计方案中打造更加真实而健壮的交互反馈机制,那么一定要注意对时间概念的把握。这里所说的时间概念,包括反馈行为对于触发事件的响应速度,反馈行为的呈现速度,及其能够持续的时长。这些方面的因素都是非常重要的,因为你必须了解反馈机制会对整个交互流程产生怎样的影响。如果用户需要花费很多时间等待反馈动画效果结束才能进入工作流的下一个环节,那么他们很有可能因此而感到受挫。对于设计方案当中这类细节之处所带来的体验效应,我们要时刻保持关注。</p> <h3 id="a4"> 对隐藏元素的提示</h3> <p>很多时候,我们需要在设计方案当中对界面元素的呈现方式进行管理。这里,我们主要指那些在状态方面具有高度可变性的交互对象。以隐藏控制元素为例,用户必须首先完成某些的操作,才能使这些控制元素呈现出来并真正进入工作状态。这类设计方案当中通常存在一些弊端,因为在默认状态下,界面会将一些重要的控制元素隐藏起来,从可用性的角度来讲,这似乎是一种违反直觉的设计方式。但在很多情况下,这种方案又是非常有用的。</p> <p>要使这类设计方案获得成功,我们必须向用户提供足够的引导与提示,使他们明白应该以怎样的方式调出这些隐藏控制元素。比较简单的做法,就是在应用第一次启动的时候,保持这些元素的可见性,让用户了解到这些控制元素的存在;然后再通过某种动画效果将这些元素隐藏起来。当然,你还可以在应用第一次启动时,以某种可视化的方式明确地向用户介绍用来调出隐藏控制元素的具体操作方法。对于那些必须通过特殊的手势才能使隐藏元素显示出来的界面来说,这种明确的引导会特别有用。</p> <p>除了在首次启动的过程中进行必要的引导之外,我们还可以在界面当中使用半透明小图标或其他形式的视觉提示,让用户了解在这个位置附近有处于隐藏状态的控制元素。此外,时间和状态的概念也可以在这里发挥作用。例如,我们可以让这种视觉提示在工作流进行到某些特定的环节时呈现给用户,或是让它们按照预设的频率反复出现。</p> <p>当用户已经熟悉了应用的使用方法之后,这些提示和引导就失去存在的必要了。最好在应用内部或是iOS全局的设置当中为用户提供一种可以管理这些提示的机制。不过不要忘记,你同样需要以某种方式告诉用户这些操作提示是可以在设置当中被关闭或再次打开的。</p> <div class="embed"><article id="node-263" class="node node-related-books" about="/node/263" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动应用UI设计模式-尼尔/dp/B00AMAI1AO/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23"><img alt="移动应用UI设计模式" src="http://beforweb.com/sites/default/files/images/products/07.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/移动应用UI设计模式-尼尔/dp/B00AMAI1AO/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">移动应用UI设计模式</a></h4> <p><a href="http://www.amazon.cn/移动应用UI设计模式-尼尔/dp/B00AMAI1AO/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852787&amp;tag=c7210-23">这是一本移动应用UI设计模式参考书,分10大类介绍了70个移动应用设计模式(包括反模式),用400多个屏幕截图和图解帮助读者理解和利用UI设计模式,以解决常见的设计难题,同时提供了&ldquo;即学即用&rdquo;式的技巧和经验...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a5"> 总结</h3> <p>让我们来回顾一下在本章当中所学到的东西:</p> <p>为移动应用进行设计的时候,要考虑到设备自身的物理属性,并理解这些属性会对应用的实际使用方式造成怎样的影响。</p> <p>界面元素触控区域的尺寸和间距是我们在打造交互体验时所必须考虑到的重要因素。触控元素的尺寸越大,它们之间的距离就可以越近。反之,小尺寸触控元素之间应该尽量保持较大的间距,才能有效地降低误操作的可能性。</p> <p>我们可以通过很多方式将动态的视觉反馈效果整合到应用的界面元素当中。在我们从整体上为产品打造具有差异化的交互模型的同时,还必须对细节当中的交互机制保持必要的敏感度。</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/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/114" typeof="skos:Concept" property="rdfs:label skos:prefLabel">反馈</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/73" 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> Sat, 21 Jul 2012 13:37:42 +0000 C7210 99 at http://www.beforweb.com http://www.beforweb.com/node/99#comments 从iOS到Metro - 重新设计应用的交互模式 http://www.beforweb.com/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="http://www.beforweb.com/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 http://www.beforweb.com http://www.beforweb.com/node/92#comments iOS Wow体验 - 第五章 - 利用iOS技术特性打造最佳体验 http://www.beforweb.com/node/81 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-ios-iphone-ipad-wow-factor-app-ux-design-techniques-3-b.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第五章译文精选,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/80">Wow体验 - 第四章 - 为应用的上下文环境而设计</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>iOS是设计师们得以施展技能的绝佳舞台。同时,苹果也向开发者们提供了一系列专业化的技术方法,帮助他们从容应对各种复杂的设计方案所带来的挑战。</p> <p>伴随着技术的革新与发展,越来越多的交互体验模式正在孕育而生。设计师的创作思路得以扩展,技术开发人员也拥有了更多高效的方法和工具来准确的实现设计方案。设计与开发之间的障碍正在被各种新技术不断的突破,项目中一些职能角色的性质也在发生着变化,越来越多的设计师超越了相对传统的专职领域,开始直接进行开发方面的工作<a class="eLink" href="http://beforweb.com">。</a></p> <p>对于团队来说,那些同时掌握着设计与开发技能的人员是非常有价值的。我们所说的这种&ldquo;掌握&rdquo;不单单是指对于技术概念或术语有基本程度的了解,更重要的是,设计师需要对开发技术在各方面的特性及优缺点做到心中有数,并能针对这些特性来创造最合理的设计方案。</p> <!--break--><p>当然,要设计人员或团队完全精通某种开发技能,并且在相关平台中有过大量实战经验,这是不现实的,也没有必要。不过,如果设计师曾经切身实践过开发方面的工作,或是参加过相关的内部培训,那么这些经历通常可以有效地帮助他们打造出更具可行性的设计方案。另外一方面,不妨向更加专业的技术人员进行请教,让他们帮忙找出那些有可能对设计方案的实现与还原造成影响的潜在因素。</p> <p>接下来,我们将一同了解一些在iOS当中负责实现各种视觉交互表现形式的核心技术,并对它们各自的功能进行分析。这些技术知识会帮助你对设计方案的可行性及相关的开发方式做到心中有数。</p> <p>除此之外,我们还将了解一些其他方面的话题,包括界面外观的自定义、通用型应用、原生应用与Web应用的差异等。</p> <h3 id="a1"> 关键性的图形技术</h3> <p>作为设计人员,你需要对四种关键性的图形技术有所了解。它们可以被分为两大类,第一类是用于支持iOS本地渲染的苹果专有技术,而第二类涉及到OpenGL,这种第三方技术可以有效地利用硬件加速功能渲染复杂的图形。怎样从设计的角度来理解这些概念呢?简单的说,第一类技术用于打造用户界面及相关交互元素的视觉表现形式,而与OpenGL相关的第二类技术的主要作用,则是在游戏或类似的上下文环境中对各种极端复杂的图形和动画效果进行即时渲染。</p> <p>需要注意的一点是,这些技术虽然各司其职,但并非只能专门用作各自的上下文领域。通过对这些技术的作用加以理解,你就可以对设计方案的实现方式做到心知肚明。特别是当你正在尝试一些独特的交互形式的时候,对于相关实现技术的了解就显得尤为重要了。</p> <h4 id="a2"> UIKit</h4> <p>UIkit是用来打造iOS应用的最重要的图形技术框架,它提供了用于构造触屏设备用户界面的全部工具和资源,并在整个交互体验的塑造过程中扮演着至关重要的角色。</p> <p>设计方案中的绝大部分内容都需要通过UIKit来实现,因为用户在iOS中所接触到的任何一种用户界面控件都由它来负责定义和输出,包括基本的按钮、滑块、文本域、切换开关等。除了这些标准控件之外,UIKit还提供了很多方法来帮助我们对控件的外观进行自定义。所以在界面元素的视觉表现形式上,我们不必受制于各种控件的默认样式。外观自定义工作还会涉及到我们将要在后文中了解到的其他图形技术,但是相关的解决方案都是由UIKit在整体上控制的。</p> <p>除了能够使用你所指定的图形文件(例如PNG图片)对界面控件的外观进行自定义之外,UIKit还能够程序化的渲染图形对象,换句话说,它可以按照我们设定好的规则来绘制图形。UIKit在这方面的能力与一些常见的矢量图形绘制技术很相似。在类似的方法中,我们通常需要定义最基础的几何图形或路径,然后为这些路径赋予具体的视觉属性,以实现设计中的目标样式。不过有一点需要提醒一下:这种程序化的绘图方式确实可以对生产效率起到一定的提升作用,然而另外一方面,你却需要花费更多的时间与精力去跟进到接下来开发流程当中,以确保技术人员所定义的图形属性可以精确的还原你的设计方案。在实际项目中,最好能够在开发流程之前与相关的技术人员一同对设计方案中的每一个细节进行充分的评估,确定一套最合理的图形技术方案。</p> <p><a href="/sites/default/files/images/201205/uikit_classes.jpg" rel="lightbox"><img alt="uikit_classes" src="/sites/default/files/images/201205/uikit_classes.jpg" style="width: 300px; height: 352px;" /></a></p> <h4 id="a3"> 核心图形 (Core Graphics)</h4> <p>核心图形是用来实现用户界面视觉设计方案的重要技术框架。这套框架的核心是名为Quartz 2D的二维图形渲染引擎,它不仅可以动态地渲染很多不同种类的图形,而且还可以使应用具有创建和编辑图像的能力。</p> <p>你可以将核心图形理解成一种能够帮助你扩展产品功能的技术框架。相比于UIKit,它更擅长于处理那些较为复杂的图形;不过在必要的时候,也可以用来对普通用户界面元素进行渲染。相比之下,UIKit在界面外观自定义方面的支持能力更强。所以,只有当设计方案涉及到相对复杂的图形变换、队列处理和即时合成等方面的需求时,核心图形技术框架才能真正体现出它的优势与价值。</p> <h4 id="a4"> 核心动画(Core Animation)</h4> <p>核心动画向开发者们提供了一套用于创建和渲染动态交互效果的简单易行的解决方案。换句话说,这项技术可以让你的设计方案真正动起来。通过与UIKit的紧密配合,核心动画可以将界面交互对象与动画过渡效果进行完美地整合。</p> <p>作为一种强大的技术工具,核心动画的能力范围是非常广泛的,它能使开发者在很多不同的层面上创建并控制交互对象的动画属性,而这对于设计师来说,则意味着能够实现的独特而高度定制化的动画效果的可能性几乎是无限的。</p> <h4 id="a5"> OpenGL ES</h4> <p>OpenGL ES与前面几项技术有所不同,它并非苹果所创造并独有的。OpenGL ES是面向嵌入式设备的OpenGL 3D图形应用程序接口(API),它必须与核心动画协同配合,完成2D或3D图形内容的渲染输出。</p> <p>OpenGL ES可以通过硬件加速功能来渲染那些极端复杂的图形,所以这项技术通常被用来在游戏当中绘制那些需要进行即时渲染的3D图形。不过它的能力不限于此,通过与我们在前面了解到的那些技术的整合,它同样可以被用来渲染普通的元素,甚至还能以全3D的方式打造整个应用的界面环境。</p> <p>是否有必要在应用的开发中使用这项技术,最终还是取决于设计方案所要求的视觉表现形式。对于那些没有必要通过硬件加速功能来即时快速渲染的2D或3D图形,其他技术同样可以胜任。不过,如果你希望借助强大而复杂的技术工具对那些具有实验性质的视觉交互形式进行探索和挖掘,那么OpenGL ES的强大能力将不会让你失望。</p> <p><img alt="logo-opengl-es" src="/sites/default/files/images/201205/logo-opengl-es.png" style="width: 300px; height: 115px;" /></p> <div class="embed"><article id="node-308" class="node node-related-books" about="/node/308" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS 6应用开发入门经典(第4版)" src="http://beforweb.com/sites/default/files/images/products/54.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS 6应用开发入门经典(第4版)</a></h4> <p><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书循序渐进地介绍了从事iOS开发所需的基本知识,包括使用Xcode、Objective-C和Cocoa Touch等开发工具,设计及美化用户界面,利用多场景故事板、切换、弹出框、导航控制器和选项卡栏控制器...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a6"> 界面外观的自定义</h3> <p>究竟有没有必要对应用的界面外观进行自定义?在打造设计方案的时候,我们通常会在这个问题上产生纠结。特别是在苹果刚刚推出应用商店的时候,这个问题显得尤其普遍与突出。为了能够尽快地将应用发布出去,以占领市场先机,产品决策者们宁愿放弃掉很多至关重要的设计流程,以达到压缩产品开发进度的目的。如今,从整个应用市场的角度来说,这种局面有所改善,人们再也不能忽视设计的重要性了,但是对于一些刚刚试水iOS应用的团队来说,类似的问题依然存在。</p> <p>很多公司和产品团队总是无法意识到高度定制化的界面外观对于一款应用产品的重要价值。其实道理很简单,如果只使用SDK(开发工具包)提供的默认控件来构筑用户界面,你的应用就会完全处于iOS原生的视觉识别体系当中,在用户体验方面也无法超越苹果制定的范围框架。虽然从本质上讲,这并不是一件坏事,但这种方式显然无法将具有品牌特色的用户体验效应整合到产品当中;无论是视觉表现形式还是交互方式,都难以满足用户对于差异化的渴望。</p> <p>抛开产品策略方面的因素,界面外观的自定义工作在技术层面不存在任何障碍。正如我们在前文中看到的,苹果在这方面有针对性的为开发者们提供了很多强大的图形技术。从某种程度上说,这项工作本应该成为整个设计开发流程中的一个重要且必要的组成部分。</p> <p><img alt="ios-iphone-UI-Appearance-Customization" src="/sites/default/files/images/201205/ios-iphone-UI-Appearance-Customization.jpg" style="width: 250px; height: 236px;" /></p> <p>有一点需要说明的是,界面外观自定义的设计原则并非是泾渭分明的,实际上你确实不需要对所有的界面组成要素都进行定制化的处理,在很多情况下,使用SDK提供的原生控件反而更加合理。作为设计师,你要做的就是处理好原生控件与自定义样式之间的关系,将它们协调的整合在一起,确保用户不会对这两类元素产生彼此孤立与分化的感知。</p> <p>除了使用新的图形样式对各种常规界面元素的外观进行自定义之外,你还可以创造出全新类型的的界面交互对象,并为它们赋予独特的交互方式。不过,对于这种明显超出了&ldquo;换肤&rdquo;范畴的做法,苹果在用户界面设计规范当中所体现出的态度并不是具有鼓励性的,因为全新类型的交互对象会对用户的认知造成很大的障碍。作为规范,持有相对谨慎的态度是合乎情理的,不过这种具有极高创新性质的做法究竟能否成功,在很大程度上还取决于设计方案本身。过于隐晦的表现形式必然会使用户产生迷惑与挫败的感觉,无论它看上去有多酷;而简单直白、易于理解的方案则具有相当高的可行性。</p> <div class="embed"><article id="node-265" class="node node-related-books" about="/node/265" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone用户界面设计典型实例" src="http://beforweb.com/sites/default/files/images/products/09.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone用户界面设计典型实例</a></h4> <p><a href="http://www.amazon.cn/iPhone用户界面设计典型实例-Dave-Mark/dp/B0053F6X3A/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书通过10名在Apple Store中名列前茅的应用设计师和开发者的现身说法,为我们揭开了应用设计开发的神秘面纱。从本书中,读者不仅能学习到设计过程中的许多经验,更重要的是能够对应用成功的关键因素有全新的理解&mdash;&mdash;其最终取决于创意、人性化的界面带来的用户体验...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a7"> 通用型应用</h3> <p>在过去的几年中,iOS设备种类及规格的扩大发展为应用设计师与开发者带来了不少挑战。从前,我们只需要为一种设备规格打造设计方案;随着iPad的到来,事情开始变得复杂起来,我们必须针对新设备的特性考虑另外一个版本的设计方案。而开发团队也面临着同样的问题,他们必须同时开发和维护两个版本的应用,工作量几乎翻倍。</p> <p>不久之前,通用型应用的概念出现在了应用商店当中,这种应用可以运行在任何类型的iOS设备当中。它会自动判断当前的设备环境,并在用户体验形式上作出相应的调整,例如可以通过不同的方式对用户界面进行渲染,在功能方面也会根据当前平台的具体情况发生相应的改变。</p> <p>对技术开发人员来说,通用型应用是个好消息,它可以避免不同版本所带来的重复性工作,极大地提高开发流程的生产效率。不过站在设计师的角度,你仍然需要准确的把握不同设备在用户行为及体验模式上的差异,确保设计方案可以适用于它们各自的系统平台。而这种方式带来的进步也是显而易见的。在必须针对不同设备打造两个独立版本的情况下,你需要对已有的一套设计方案进行改造,在界面元素和交互形式等方面进行全方位的调整,以适应新的设备平台,这必然会导致两个版本的应用在界面外观和操作方式等方面存在显著的差异;而对于通用型应用,你可以在设计过程中预先考虑到两种设备的不同特性,并且能够在同一套设计方案中针对这些差异来定义局部样式或功能的响应式调整规则,从最大程度上确保用户体验的一致性。很多同时拥有两款设备的用户会在不同的需求情景中使用不同的设备来操作同一款应用,在这种情况下,具有高度一致性的界面外观及交互方式就显得尤为重要了。</p> <p><img alt="" src="/sites/default/files/images/201205/ios-iphone-ipad-universal-apps-s.png" style="width: 400px; height: 202px;" /></p> <h3 id="a8"> 原生应用与Web应用</h3> <p>如今,关于是否真正有必要开发iOS原生应用的问题,行业中还存在一些争论。在当前复杂纷乱的移动市场中,除非你有足够的资源,否则为每一种设备平台都单独打造一套原生应用确实是不大现实的。在很多情况下,移动版本的网站或是Web应用都可以很好的满足需求。不过,在你着手于Web方向的解决方案之前,有一些重要的问题必须事先了解清楚。</p> <p>在用户体验方面,Web应用与原生应用之间的差距还是很明显的。如今,有很多<a href="http://beforweb.com/node/22">前端开发技术框架</a>可以帮助我们打造基于浏览器运行的Web应用。这些应用无论在界面外观还是交互方式上都与原生应用非常相似。然而,在实际的移动设备上下文环境中,它们仍然无法与原生的方式相提并论。正像我们在前文中了解到的,苹果为开发者们提供了很多强大的图形技术工具,作为设计师,我们不仅可以在设计方案中打造高度定制化的界面外观及交互效果,更重要的是,这些视觉表现形式都是在系统级别甚至硬件级别的功的支持下高性能的展现出来的。相比之下,基于浏览器运行的Web应用解决方案通常只能提供数量非常有限的交互效果,而且在性能方面更是无法与原生应用相比。所以,如果你正在考虑使用Web应用的方式来打造产品,至少要确保你的设计方案当中不会涉及到过多的视觉交互效果。</p> <p>其实,对于这两类应用,我们并不需要争论出一个非此即彼的结果,因为iOS允许这两种形式在同一款应用中兼容并包的存在,一款原生应用当中完全可以同时包括本地化的界面控件与基于Web的页面元素。这种混合型应用可以将两者的优势淋漓尽致地发挥出来,使其自身即能拥有原生应用高性能的表现力以及对硬件功能的访问能力,同时又具备Web应用的动态性与灵活性,并且更加易于维护。</p> <p>最终,对于解决方案的选择仍然取决于产品自身的功能及用户体验需求。任何关于产品实现方式的讨论都必须从这个角度出发<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a9"> 总结</h3> <p>苹果为开发者们提供了四种用于渲染界面对象和视觉交互效果的关键性图形技术:</p> <ul> <li> <strong>UIKit</strong>:用于绘制界面元素的最重要的图形技术框架,在整个交互体验的塑造过程中扮演着至关重要的角色。</li> <li> <strong>核心图形(Core Graphics)</strong>:二维图形渲染引擎, 可以动态地渲染很多不同种类的图形,并能使应用具有创建和编辑图像的能力。在必要的时候,也可以用来对普通用户界面元素进行渲染。</li> <li> <strong>核心动画(Core Animation)</strong>:可以在UIKit的配合下,为用户界面中的交互对象创建动态的视觉效果。</li> <li> <strong>OpenGL ES</strong>:面向嵌入式设备的OpenGL 3D图形应用程序接口(API),可以通过硬件加速功能来渲染具有高性能表现的2D或3D图像。</li> </ul> <p>以这些图形技术为后盾,我们可以在设计中大胆地尝试高度定制化的用户界面外观与独特的交互表现形式,甚至可以对交互对象的视觉行为属性进行实验性的探索。</p> <p>通用型应用的概念可以帮助我们有效的降低开发与维护成本,将iPhone与iPad两种版本的产品需求整合到同一款应用当中。不过,作为设计师,你仍然需要准确的把握两款设备在用户行为及体验模式上的差异,确保设计方案可以适用于它们各自的系统平台。这种方式所带来的进步是,你可以在设计过程中预先考虑到两种设备的不同特性,并在同一套设计方案中针对这些差异来定义局部样式或功能的响应式调整规则,从最大程度上确保用户体验的一致性。</p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了如何突破基础、打破常规,从而提供“超赞”的用户体验。通过学习,读者将会学到如何使用标准控件,如何创建非标准控件和具备较高影响力的用户交互,以实现真正夺人眼球的应用设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/98" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UIKit</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/99" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Core Graphics</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/100" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Core Animation</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/101" typeof="skos:Concept" property="rdfs:label skos:prefLabel">OpenGL ES</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</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/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 12 May 2012 14:43:56 +0000 C7210 81 at http://www.beforweb.com http://www.beforweb.com/node/81#comments iOS Wow体验 - 第四章 - 为应用的上下文环境而设计 http://www.beforweb.com/node/80 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-ios-iphone-ipad-wow-factor-app-ux-design-techniques-4.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第四章译文精选,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/71">Wow体验 - 第三章 - 用户体验的差异化策略</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>对于要打造怎样的iOS应用,也许你在心里已经相当有谱了。不过在读过<a href="http://beforweb.com/node/71">上一章</a>之后,你就会发现自己还可以站在更高的层面上,通过具有差异化的用户体验策略来重新定义产品概念。</p> <p>正如我们在前文中了解到的,用户研究方面的工作是用户体验策略当中的一个重要环节。当你在创造用户角色、构思需求用例、设计任务脚本的时候,必须对用户及移动应用所处的上下文环境加以考虑。这可以帮助你更加准确和有效的验证产品的概念模型,为打造杀手级的iOS应用奠定良好的基础。</p> <p>在本章当中,我们首先会阐述一下移动设备的核心价值,并为你提供一个用于比较iPad与iPhone之间行为模式差异的思路框架,从而让你可以根据不同的需求情况来更合理地塑造相应的用户体验模式。随后,我们还将一同来了解一下有哪些指导原则可以帮助你制定更具针对性的需求用例,使你的用户研究工作更有成效,确保产品能够准确地命中用户的需求点<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3 id="a1"> 移动计算的核心价值</h3> <p>当前,整个移动领域仍在持续迅猛地发展着。你会阅读本书,多半就证明了你已经看到移动设备在功能与用户体验等方面的巨大潜能。不过,究竟是什么原因使得人们对于移动设备及应用市场的热情如此高涨呢?</p> <p>移动计算的核心价值就是用户可以随时随处地使用功能、获取数据。说到底就是这么简单。在很短的时间内,手机就从一种只具备电话功能的奢侈品,发展成为具有极高普及率的个人计算设备,其中,电话功能已经不再是人们所关注的主要方面了。如今,iPhone这类移动设备所拥有的计算能力及体验模式都确保了随时随处的可访问性,这也是它们得以成功与流行的关键所在。</p> <p>过去,无论是使用应用软件还是上网,我们通常需要通过家中或是办公室里的电脑来进行操作;&ldquo;时间&rdquo;和&ldquo;地点&rdquo;这两个方面因素会在很大程度上限制我们的行为和需求。即使这两方面的条件都可以满足,我们也不得不接受一种完全形式化了的人机交互模式,例如坐在某个特定的屋子或是角落中,通过键盘鼠标操作着电脑。一般而言,我们在家或是办公室使用传统的桌面设备,大多是为了完成某些特定的任务;其中,以休闲为目的行为所占的比例很小。当然,我们这里描述的只是一种最普遍的状况。重点在于,在这种高度形式化了的情景模式下,无论是我们自身,还是我们与计算设备进行交互的方式,都受到了极大的约束。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-home" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-home.jpg" style="width: 420px; height: 315px;" /></p> <p>如果可以打破时间与地点的局限,我们就能张开双臂拥抱全新的可能,这里包括我们能够想得到或是想不到的各种新需求,以及形形色色有待探索和体验的应用程序。这也正是iPhone这类移动计算设备的核心价值:将人们从传统的桌面设备中解放出来,使他们在各种需求情景中都能够享受到高效能的计算体验。这种演变带来了巨大的机遇,让我们可以对人机交互模式进行重新思考,使这些新设备、新应用能够全方位的融入到我们的生活当中。苹果准确地把握住了这个机遇,使iPhone及各种功能强大的应用程序得以广泛普及并保持高速增长;这些软硬件产品的功能与用户体验无不体现出厂商及设计开发人员对于科技与文化变迁的深刻领悟。</p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动设计" src="http://beforweb.com/sites/default/files/images/products/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动设计</a></h4> <p><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者从人-机-环的角度出发来阐述移动应用的设计,并建立了移动应用设计的基本原则;然后,根据移动端的情境、移动设备的特征,以及触摸的交互方式,总结了移动导航和框架设计的主要形式,并给出了导航设计的原则和思路...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3 id="a2"> &ldquo;移动&rdquo;与&ldquo;便携&rdquo;的体验模式比较</h3> <p>在本书中,每当提起移动设备,我们通常是在指iPhone及其同类产品。但是对于本章的话题来说,我们必须同时考虑到另外一类设备。从定义上来说,这类设备并不能算是严格意义上的移动设备,虽然这与我们通常的认知不大相符。</p> <p>苹果于2010年发布了第一代iPad。对于这款产品,苹果的意图很明确,他们就是希望打造一种介于智能手机与笔记本之间的设备。就在苹果一如既往的对新产品进行大肆宣传,并在消费者当中制造起巨大狂热的时候,一些批评与质疑的声音也此起彼伏。在批评者们看来,iPad只是大号的iPhone而已。不过,他们并不了解&ldquo;大尺寸&rdquo;所蕴藏的重要意义;正是这种特质,使得iPad可以从容应对很多新奇有趣的需求,而这些是iPhone或任何尺寸的笔记本(包括MacBook在内)所无法实现的。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-ipad" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-ipad.jpg" style="width: 500px; height: 318px;" /></p> <p>相比于传统的笔记本电脑,iPhone与iPad都更加的移动化。不过,这两款iOS设备之间的尺寸差异也相应的造成了它们各自行为方式的不同。我们首先需要明白,手机是纯粹的个人设备,你的手机是和你&ldquo;绑定&rdquo;在一起的,一个来电的呼叫目标就是你本人。在人们的意识当中,手机就是你本人的一个化身或代理。大家在打电话的时候一般会说&ldquo;我打给你是要怎样怎样...&rdquo;,而不是&ldquo;我打给你的手机是要怎样怎样...&rdquo;。从这一点上,我们可以看出此类设备与使用者身份特征之间的紧密关系。</p> <p>无论去任何地方,我们几乎都会随身带着自己的手机;它就像是我们的亲密伙伴,从不会离开。使得这种情况成为可能的主要原因,就是包括iPhone在内的绝大多数手机在尺寸方面都相对较小。而iPad则不具备这方面的优势,虽然它同样非常轻便,易于携带,但从尺寸规格上来说,它的移动化特征还是无法与iPhone相比。</p> <p>不过,iPad在这方面的弱点却也是它的优势所在。虽然它无法像手机那样可以被我们一直揣在身上,但在很多时候,它可以带来iPhone所难以实现的炫酷体验。我们固然可以使用iPhone来阅读文章、浏览网页或是观看视频,但iPad的大屏幕显然可以带来更棒的视觉效果,并能使用户在交互过程中感受到更多的乐趣。如今的市场正在越发明确地将iPad定性成为 &ldquo;休闲计算设备&rdquo;,这种说法并不是一个新的概念,但iPad的出现使它在休闲娱乐及数码体验等方面的含义更加地与时俱进了。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-iphone" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-iphone.jpg" style="width: 500px; height: 460px;" /></p> <p>我们可以从这些方面逐渐开始看到iPhone与iPad之间最主要的差异所在。在iPad上进行交互操作的流程所需要占用的时间会相对较长,例如,对于看片子、读书、看报等方面的目标任务,我们必需拥有相对宽裕的时间以及不受打扰的环境才能完成。而与此相反,iPhone中的常见需求用例通常只涉及到一些快速简短的交互行为,譬如查看股票行情、天气预报、社交网站中的好友更新等等。在实际生活中,由于我们会一直将手机带在身边,所以在任何时候几乎都可以拿出来进行使用,甚至在做其他事情的时候也不例外。一有机会就掏出手机摆弄摆弄应用,这已然成为绝大多数iPhone用户的习惯了。从这个角度来看,iPad与iPhone的用途及行为特征是截然相反的。我将这一点归纳如下:</p> <ul> <li> <strong>iPhone</strong>:使用频率高,每次交互行为所持续的时间都很短。</li> <li> <strong>iPad</strong>:使用频率低,但每次交互行为所持续的时间都相对较长。</li> </ul> <p>当然,这只是一种普遍规律,不能反映出全部的实际状况;但也正是这种最具代表性的观察结论可以体现出这两种设备在行为方式上的典型差异。</p> <p>可以说,iPhone所切实体现出的&ldquo;移动性&rdquo;的概念是被多数人所理解并认同的,而iPad则不然。 它并不算是一个完全意义上的移动设备,而且它身上所体现出的&ldquo;便携&rdquo;特征与以往的任何设备都有所不同。我之所以更倾向于用&ldquo;便携&rdquo;这个词来描述iPad,是因为在现实生活中,我们确实会时常将它带在身边,但同时,它又不像iPhone那样与我们的关系如此密切,可以随时随地的被拿出来使用。</p> <p>作为移动计算的一个分支概念,&ldquo;便携&rdquo;的特质可以很明显地体现在我们日常使用iPad的过程当中。正如我们在前文中了解到的,用户对于iPad的使用频率相对较低,但每次交互行为所持续的时间都比较长。所以用户在使用iPad的时候通常都处于一种相对稳定的环境当中,并且拥有较为充裕的时间。能够满足这些条件的一个最典型的场景就是在家中。例如,人们会在一种非常放松的状态下窝在沙发里,端着iPad或是将它放在膝上进行操作。虽然从整体上看,用户对于iPad的使用频率相对较低,但是在以家庭为代表的环境场景中,iPad被用到的频率却会超出iPhone;而当用户开始真正动起来的时候,他们对iPad的使用率就会开始下降。可以说,离开了家庭这样舒适稳定的环境之后,人们就很少有机会能够真正安心的享受iPad所带来的休闲体验了。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-user" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-ipad-user.jpg" style="width: 500px; height: 254px;" /></p> <p>除此之外,这两款iOS设备之间还存在着其他方面的差异。iPhone之所以能够与用户个人保持更为密切的关系,从某种程度上讲,与它的电话功能有很大关系,因为这方面的因素会极大的影响用户对于设备的感知与定位。由于iPad并不具备这种隐私性质的功能,所以它的个人化色彩就相对较弱。在很多时候,用户会与他人分享使用自己的iPad。特别是当他们同时拥有iPhone和笔记本电脑的时候,这方面的行为特征就更加明显。因为在人们的意识当中,手机和笔记本是用于联系他人或进行办公的主要工具,在这些需求面前,iPad只是一种次要设备。这方面最具代表性的例子仍然是以家庭为环境背景的:通常,家庭成员都拥有各自的手机或是笔记本电脑,但他们往往会共同使用一部iPad来完成自己的相关需求。</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 id="a3"> 移动应用的五类需求用例</h3> <p>移动应用的需求用例大致可以分为五种类型,它们都可以在各自的上下文环境中为用户带来重要的使用价值。这些需求用例固然不能代表全部的情况,但是我确信,你可以在很多自己所钟爱的应用当中找到它们的身影。实际上,你完全可以将它们理解成几种典型的应用类别,甚至是具有代表性的功能集合。只是&ldquo;需求用例&rdquo;的概念更加具有&ldquo;以用户为中心&rdquo;的色彩,另外,从用户体验策略的角度来看,这种说法也更加合适。</p> <p>这五类典型的需求用例包括:</p> <ul> <li> 人际交往</li> <li> 娱乐消遣</li> <li> 基于地理位置的服务(LBS)</li> <li> 电子商务</li> <li> 实用效率</li> </ul> <p>从某种程度上说,这些类别确实可以涵盖到市面上绝大多数的应用产品。接下来,就让我们逐一对这些用例进行具体的分析。</p> <h3 id="a4"> 人际交往</h3> <p>可以说,这是最没有悬念的一类需求用例。在用户对于iPhone这类设备的定义与感知当中,&ldquo;交际&rdquo;是最基础的功能与用途,因为手机本身正是作为&ldquo;电话&rdquo;这种点对点的交际工具被创造出来的。不过,对于我们现在要说到的&ldquo;人际交往&rdquo;,电话功能或手机固有的其他相关功能只是其中的一小部分,我们需要站在更高的层面来进行分析和理解。这类需求用例可以进一步被拆分为 &ldquo;一对一&rdquo;和&ldquo;一对多&rdquo;这两个方面。</p> <h4> 一对一的交际功能</h4> <p>下面的四种功能模式虽然都可以在实际当中用作多人之间的信息交流,但它们的核心概念都属于&ldquo;一对一&rdquo;的模式:</p> <ul> <li> 基本的电话及语音功能</li> <li> 电子邮件</li> <li> 短消息</li> <li> 即时通讯</li> </ul> <h4> 一对多的社交功能</h4> <p>以下这些功能与产品形式真正地从深度和广度上定义了&ldquo;一对多&rdquo;的人际交往模式:</p> <ul> <li> 社交网络(Facebook、Google+、Twitter等)</li> <li> 媒体分享平台(YouTube、Flickr、Vimeo等)</li> <li> 音频及视频播客</li> <li> 个人博客</li> <li> 社会化评论</li> <li> 论坛</li> </ul> <p>当我们通过这种方式把&ldquo;人际交往&rdquo;分解成不同类型的功能模式之后,这个概念在实际产品中的价值也就显现出来了。有很多成功的应用是直接围绕着其中的某种功能模式进行打造的,而另外一些则会将社交方面的模式作为产品的辅助功能。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-social-apps-s" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-social-apps-s.jpg" style="width: 300px; height: 451px;" /></p> <h3 id="a5"> 娱乐消遣</h3> <p>这是一种覆盖面极大的需求用例,它可以通过很多方式被整合到各种产品形式当中。作为一种应用产品的类别,&ldquo;娱乐&rdquo;的概念显得过于宽泛了,但在抽象的层面,它又是一个具有绝对代表意义的需求用例。一个功能模式是否具有娱乐性,在很大程度上取决于用户在使用过程中的态度与感知。例如,在某些特定的情况下,对于某些用户来说,查看金融信息与股市行情真的是一种娱乐消遣行为。</p> <p>我们可以将娱乐性质的应用进一步分为两类:</p> <ul> <li> 游戏</li> <li> 内容消费</li> </ul> <p>游戏类应用产品所具有的娱乐性是显而易见的。人们对于游戏产品在移动领域中的市场定位问题还存在一些争议,对于怎样的游戏模式可以通吃各类移动平台的讨论也是各有各的看法。鉴于本书的主旨,我们不会去探究涉及游戏本身的复杂交互理论,虽然我们在前面几章里学到的那些思路和概念其实有很多是同样可以被运用到游戏应用的设计与开发当中的。</p> <p>而作为娱乐性需求用例的另外一个组成部分,内容消费本身就是一个形式多样的庞大概念;看片子、听音乐、读书、浏览网页等一系列行为无一例外地被囊括在这个范畴当中。市面上很多非常流行的iPhone或iPad应用都是聚焦在这个方向上的,这些产品大多拥有特色鲜明的用户体验方式,使得内容消费行为具有很强的娱乐性,对于用户具有极高的吸引力。当然,这也说明很多产品设计人员和开发者都看到了这类需求在市场中的巨大潜力,并且已经开始在自己的产品中付诸实践了。不过即便如此,你也不必过于担心竞争方面的问题;这方面的需求空间依然是巨大的,用户们始终会对那些能够给他们的内容消费行为带来新奇体验的应用产品保持强烈的关注与期待。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-entertainment-game-apps" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-entertainment-game-apps.jpg" style="width: 470px; height: 400px;" /></p> <h3 id="a6"> 基于地理位置的服务(LBS)</h3> <p>这是一种在当前的移动领域中比较新兴的应用服务类型,而且在我们提到的这些典型需求用例当中,它是唯一一个只能通过移动设备进行操作的。这种产品服务类型的出现,得益于当前移动领域中一系列新技术的整合运用,包括GPS、数码罗盘技术、能够在地理位置和定向等方面提供高精准细节信息的移动网络等。</p> <p>在苹果的应用商店中,有很多应用会以非常有意思的方式整合着LBS方面的功能,其中有一部分产品获得了成功,而多数则表现平平。这其中的主要原因还在于LBS仍然属于一种比较新兴的用例模式,对于这方面功能所蕴藏的潜能,多数产品设计人员只是触及到了一些皮毛。这类应用当中,有很大一部分会帮助用户以&ldquo;一对一&rdquo;或是&ldquo;一对多&rdquo;的方式分享他们当前所处的地理位置,而另外一部分会为用户提供由A点出发前往B点的出行方案。这里最大的问题在于,LBS最核心的价值究竟是什么,你应该以怎样的方式在自己的产品概念当中将这个价值整合进来。其实答案很简单,LBS最本质的作用,就是将产品自身的核心功能与移动设备所处的上下文环境建立合理的关联,使产品的价值得到提升。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-lbs-foursquare" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-lbs-foursquare.jpg" style="width: 450px; height: 332px;" /></p> <h3 id="a7"> 电子商务</h3> <p>这是一类对于多数平台设备都具有普遍代表性的需求用例。我们在传统互联网领域中所熟悉的那些电子商务基础功能及行为模式,例如浏览商品、阅读介绍、将商品放入购物车等几乎已经成为了我们的第二天性。在移动应用所处的上下文环境中,怎样针对设备的交互特性,打造最简单直接的购物流程,这是一个不小的挑战。此外,对于关键环节中的交互体验进行优化也是很重要的,例如提升用户在商品浏览过程中对于速度、效率以及屏幕空间利用率等方面的感知与体验。</p> <p>这些只是比较简化和常规的产品设计思路。如果你希望将目光放的更远,力图打造一款在各个方面都表现优异的电子商务应用,那么你将逐渐看到这类功能模式所蕴藏的更多潜力。当前,有一些&ldquo;强化型&rdquo;解决方案开始引起人们的关注,这类产品旨在为现有的电子商务平台及相关的购物行为提供支持与强化,而它本身并不需要具备交易方面的功能。这种模式可以被分为两大类:</p> <ul> <li> <strong>策展</strong>:利用第三方资源帮助用户在复杂的商品结构中进行浏览,在此期间有针对性地向用户提供商品推荐,以达到引导消费行为的目的。</li> <li> <strong>聚合</strong>:整合外部资源,按照用户指定的方式对商品内容进行呈现与管理。</li> </ul> <p>你完全可以根据自己产品的实际情况,基于一套有效的用户体验策略,针对你的目标用户群探索出更多有意思的电子商务强化模式。</p> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-ecommerce-ebay-apps" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-ecommerce-ebay-apps.jpg" style="width: 500px; height: 357px;" /></p> <h3 id="a8"> 实用效率</h3> <p>在第二章里,我们对于iOS所体现出的更加倾向于&ldquo;效用&rdquo;的设计思想做了一定程度的了解,而这方面的价值观同样可以体现在应用当中。从概念上说,&ldquo;实用效率&rdquo;与我们前面提到&ldquo;娱乐消遣&rdquo;是截然相反的两类需求用例。后者所需的上下文环境更加适合具有便携色彩的iPad,而实用型和效率型应用产品则与iPhone这类具有真正移动性的设备有着更为密切的关联,而这种情况也符合用户头脑中对于这两款设备在定义与感知方面的差异。对于效率类的应用来说,即使缺乏出众的视觉设计与令人眩目的交互方式,只要它能够帮助用户迅速高效的完成特定的任务,就有可能获得巨大的成功。</p> <p>实用效率的概念同样是非常广泛的,不过你仍然可以根据移动应用所处的上下文环境来考虑以怎样的方式将这个概念整合到自己的产品当中。如果你的目标就是要打造一款纯粹的效率类应用,那么你的产品必须对以下两个方面进行良好的落实:</p> <ul> <li> <strong>准确的功能</strong>:提供用于完成目标任务的最准确的功能方法。</li> <li> <strong>简化的操作</strong>:提供用于完成目标任务的最简化的操作方式。</li> </ul> <p><img alt="ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-utility-apps" src="/sites/default/files/images/201205/ios-wow-factor-killer-apps-experience-design-mobile-device-iphone-utility-apps.jpg" style="width: 500px; height: 313px;" /></p> <h3 id="a9"> 多种功能模式的整合</h3> <p>对于这五种最具代表性的需求用例,我们已经逐一进行了分析。对于某些项目来说,确实有必要像这样有针对性的从某个特定的需求用例出发,对产品进行设计和规划,但在很多情况下,你还需要将更多的用例模式作为不同方面的功能属性整合到同一款产品当中。特别是当你的产品概念已经具备了一定的核心框架,而你希望在此基础上增强产品与移动应用上下文环境之间的相关性的时候,这种更具综合性的产品设计思路就显得尤为重要了。当然,你并不需要将所有这些典型的用例模式都非常明显的体现到产品当中,重点在于能否通过这些核心框架之外的功能模式,为产品与其所处的上下文环境建立更加精准的关联。在这个过程中,你也许还可以为产品创造出更多额外的价值,并有可能开拓出一些全新的需求用例模式,使产品能够更好地满足用户对于独特的功能与体验方式的渴望。</p> <p>&ldquo;实用效率&rdquo;本身就是个具有普遍性的概念。其实,无论对于哪一类应用,我们都应该在 &ldquo;准确的功能&rdquo;与&ldquo;简化的操作&rdquo;这两方面加以落实,以提升产品的用户体验。不同类型的应用,其功能侧重点有所不同,效率方面的优先级可以根据实际情况进行调整。</p> <p>无论你的产品是否以基于地理位置的服务作为核心功能,这种模式都是值得考虑的。不妨在规划产品概念的时候设想一下,如果为应用增加这方面的辅助功能,它会不会为正在外出的用户带来更多的使用价值。</p> <p>社交功能也是我们需要重点考虑的一个产品模式。你可以在应用的核心框架中以非常简单的方式将社交功能整合进来,例如在用户个人资料当中添加一个&ldquo;点击进行通话&rdquo;的按钮。将应用产品与社交媒体方面的功能进行整合的重要性正在日益凸显,无论从用户的角度还是从商业的角度来看都是这样。你还可以将更具深度和广度的&ldquo;一对多&rdquo;的社交模式以很多不同的方式整合到自己的产品中。具体应该将哪种社交模式与当前产品概念中的哪些功能点以怎样的方式相结合,这些问题都要由你来根据用户在上下文环境中的实际需求加以判断。</p> <p>目标设备的类型也会影响一款产品对于这些典型需求用例的整合程度。基于我们在前文中所了解到的iPhone与iPad这两类设备在行为与体验等方面的差异,你可以更有针对性的为自己的产品制定功能模式整合策略<a class="eLink" href="http://beforweb.com">。</a></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 id="a10"> 总结</h3> <p>移动计算的核心价值就是用户可以随时随处地使用功能、获取数据。它打破了时间与地点的限制,将人们从传统的桌面设备中解放出来,使他们在各种需求情景中都能够享受到高效能的计算体验。各种新的需求形式与功能模式都在不断地涌现,它们之间保持着互相推动与促进,这也加速了iPhone这类移动设备的发展与普及。</p> <p>不同类型的设备在行为与体验方面的差异会对你的产品设计决策造成重要的影响。iPhone是一种真正意义上的移动设备,而iPad则更加具有&ldquo;便携&rdquo;的特质,它虽然时常被我们带在身边,却不像iPhone那样真正与我们的生活绑定在一起。由于目标任务通常更侧重于休闲娱乐等方面,所以在iPad上进行交互操作的流程所需要占用的时间相对较长,我们必需拥有充裕的时间以及不受打扰的环境,才能完成目标。而我们对于iPhone的使用频率则要高很多,但每次交互行为所持续的时间都相对较短。另外,iPhone的隐私性更强,它与用户的个人关系十分密切,而iPad在很多时候更像是一种共享型的设备。</p> <p>在本章里,我们还对五种最具代表性的需求用例进行了了解:</p> <ul> <li> 人际交往</li> <li> 娱乐消遣</li> <li> 基于地理位置的服务(LBS)</li> <li> 电子商务</li> <li> 实用效率</li> </ul> <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/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/52" typeof="skos:Concept" property="rdfs:label skos:prefLabel">社交媒体</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/97" typeof="skos:Concept" property="rdfs:label skos:prefLabel">LBS</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/57" typeof="skos:Concept" property="rdfs:label skos:prefLabel">电子商务</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 06 May 2012 03:25:50 +0000 C7210 80 at http://www.beforweb.com http://www.beforweb.com/node/80#comments 设计好脾气的Web页面 http://www.beforweb.com/node/41 <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-well-tempered-web-interactive-user-experience-interface-design-iphone-ipad-mobile-responsive.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>感觉已经连续下了九百多天的雨了,身上也仿佛即将生出苔藓与蘑菇。Down your sister&#39;s rain...淡定着,说正事儿。本篇译文其实在春节之前就有所着手,不过期间连续看到了几篇更想做的,于是相当没有节操的见异思迁了。今次恰逢母难日,抓紧时间补回来。走起。</p> <p>随着技术的进步,Web设计的理念与技法也在不断发展。设备种类越来越多,带给我们的挑战也越来越大。怎样以最合理的方式使设计方案能够最大程度地适应各种设备的性能与规格属性,这是我们在工作当中必须考虑的问题。</p> <p>面对这样的挑战,我们一方面会觉得自己曾经熟悉的工作领域突然充满了未知感,而另一方面,一直普遍存在的那些旧问题也依然摆在面前。我们是否需要花费全部精力用来解决各种新旧细节问题,还是可以从宏观上寻求一些具有指导性质的&ldquo;真谛&rdquo;?</p> <p>Web设计的历史过于短暂,要想弄明白一些大道理,我们不妨将视野放远些,让思路跨越设计的范畴。其实,我们真的可以从那些看上去与设计没有多大关联的领域中找到一些抽象化的、更具普遍意义的思路和模式,以帮助我们解决自己的问题。心理学和音乐等都是我们可以加以研究和探索的对象<a class="eLink" href="http://beforweb.com">。</a>接下来,就让我们一起了解一下巴赫与当前Web设计所面临的挑战之间的关系。巴赫诶。</p> <!--break--><h3> 巴赫与&ldquo;好脾气的克莱维尔&rdquo;(十二平均律钢琴曲集)</h3> <p>1722年,巴赫创作了一部包括48首前奏曲与赋格(24个大小调)的钢琴曲集,主要用作培养年轻音乐家的教育素材。这套曲集是西方音乐史中最重要的作品之一,影响极为深远。巴赫本人将它命名为&ldquo;好脾气的克莱维尔(The Well-Tempered Clavier)&rdquo;。</p> <p>为什么这部曲集具有重大的历史意义呢?要知道,在巴赫所处的那个时代,在键盘乐器上使用全部调式演奏曲目并不是一种很正统的做法。从物理学的角度讲,具有固定音调的键盘乐器一次只能演奏几个特定的调式。对于那个时代的调音系统来说,要在钢琴上弹奏出全部12个调式,几乎是一件不可能的事情。</p> <p>物理定律是很难被突破的,但人的感知是可以被改变的,解决方案就是重新定义&ldquo;合调&rdquo;的概念。某些音程在被调整之后会与标准的音准产生微小的偏差,从而产生了一个新的调音体系,使人们可以弹奏全部曲调。这种为了构筑更合理的系统而调整其组成要素属性特征的能力,就是一个系统的&ldquo;脾气&rdquo;。</p> <p><img alt="ui-desgin-user-experience-interactive-music" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-music.png" style="width: 498px; height: 284px; " /></p> <p>巴赫的平均律对自然律进行了修正,将八度音程分为十二半音的调律法,以便于转调。这种方式自然可以被称为&ldquo;好脾气&rdquo;,它就像是古典音乐中的实用主义。</p> <h3> Web设计中的好脾气</h3> <p>Web设计面向的目标设备正在由单一发展为多元,这也许是最近一两年里最令人激动,同时又是最令人焦虑的事情了。这不再是关于样式能否在不同浏览器中保持兼容的问题,我们在新局面下面对的是各种方面的因素:不同的设备、不同的屏幕尺寸、不同的使用环境、不同的系统平台所具有的UI风格等。</p> <p>虽然响应式设计(<a href="http://beforweb.com/node/6">什么是响应式Web设计?</a>)或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整外观形式及体验方式,但不是所有的UI元素或模块都可以被赋予弹性,我们仍然需要在很多地方使用&ldquo;固定&rdquo;的全局化设计方案。这时,&ldquo;好脾气&rdquo;的思路就可以帮上忙了。具体的实践原则很简单明了:为了让设计方案在一系列不同类型的设备中都能产生最好的用户体验,我们需要对界面中一些关键性的UI元素做出不同程度的折中调整,使整个页面对于环境的适应能力更强。</p> <h4> 触控优先</h4> <p>最近,越来越多的桌面版本网站当中开始出现具有触屏设备UI风格的界面元素,这种做法很好地体现出了&ldquo;好脾气&rdquo;的设计思路。在触屏移动设备当中,我们需要通过手指对界面当中的交互对象进行直接操作。比起传统的鼠标指针,手指触控方式需要的目标作用区域更大。考虑到这一点,我们应该适度地增大页面当中一些重要交互元素的尺寸;同时,为了保持视觉上的平衡,我们还需要对相关元素之间的间距及它们各自的内边距进行调整。</p> <p>举个简单的例子,Google在其新版UI当中明显地增大了&ldquo;写邮件&rdquo;按钮这类重要交互元素的尺寸;同时,诸如导航菜单、工具栏、邮件列表等界面元素,在间距留白等方面也有做相应的调整。相比于过去,新版设计方案显著地提升了Google的这些主线产品对于触屏操作的友好性。</p> <p><img alt="google-new-ui-gmail-desgin-user-experience-interactive" src="/sites/default/files/images/201203/google-new-ui-gmail-desgin-user-experience-interactive.png" style="width: 498px; height: 353px; " /></p> <p>从某种程度上讲,iPad在触屏移动设备与传统桌面设备之间架起了一座桥梁,它的普及提升了触屏设备UI风格在桌面设备当中的影响力。看看Gmail和Twitter这类主流产品在最近的改版,或是花时间到那些CSS网页设计案例集当中浏览一下最新的优秀作品,你会发现当前的Web设计风格看上去确实和以前不大一样了,它们看上去似乎更加的...丰满。留白更多,按钮更大,一切看上去都又大又平。不过我们也必须承认,这种现象与桌面显示器不断增大的尺寸也有一定的关联。</p> <p>在这类设计方案当中,界面元素所占据的空间对于鼠标指针来说显得有些许浪费了,但对于手指触控的方式却恰到好处。这也正是&ldquo;好脾气&rdquo;的设计思路的核心思想,即为了使界面能够适用于更多的平台环境,而对&ldquo;标准化&rdquo;的设计方案进行微调,最终达到一种折中的状态。</p> <p><img alt="ui-user-experience-interactive-windows-8-metro-touch" src="/sites/default/files/images/201203/ui-user-experience-interactive-windows-8-metro-touch.jpg" style="width: 500px; height: 272px; " /></p> <p>而且在很多时候,这种权衡的结果对于键鼠交互方式来说也并不坏。容易被手指触摸的按钮同样易于鼠标的控制,整个UI在传统设备上下文环境当中的用户体验也许反而有所提升。</p> <p>此外,我们之前的<a href="http://beforweb.com/node/49">又是为了触屏移动设备而设计</a>一文也可以在触控体验设计方面为大家带来一些参考。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" 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/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 响应式设计方案</h4> <p>市面上有很多关于这个话题的讨论,不过它们大多是围绕着各种相关的开发技术来进行的。其实,&ldquo;响应化&rdquo;本身不是目的,我们真正需要的是一种机制,它能够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化,从而使网站在各种环境下都能为用户提供一种最优且相对统一的体验模式。</p> <p>响应式方案离不开全局化的用户体验设计。正像我们在前文当中提到的,这类方案固然可以在一定程度上帮助我们面向不同的环境调整设计方案,但不是所有的UI元素或模块都可以被赋予弹性,我们仍然需要在很多地方通过&ldquo;好脾气&rdquo;的设计思路权衡出一种最优的全局化解决之道。在这方面,<a href="http://www.bostonglobe.com/">波士顿环球报(Boston Globe&rsquo;s)的网站</a>就是一个不错的例子。</p> <p><img alt="ui-user-experience-interactive-responsive-solution-boston-globe" src="/sites/default/files/images/201203/ui-user-experience-interactive-responsive-solution-boston-globe.jpg" style="width: 498px; height: 322px; " /></p> <p>各位可以试着使用不同类型的设备来访问这个站点,或是直接在桌面设备中不断调整浏览器窗口的尺寸,以观察页面的响应化调整规则。</p> <p>响应式策略可以使同一套设计方案适应于各种类型的显示设备,用户甚至可以通过老旧的苹果Newton掌上电脑来浏览波士顿环球报的页面。不过,这不只是前端开发方面的成就,实际上,这种策略所体现出的具有高度适应性的设计思路才是最重要的。</p> <p>我想,如果我们只需要面向桌面设备进行设计,那么最终的方案应该是更加纯粹的,包括视觉效果及交互体验等方面。毕竟,在这种情况下,我们拥有足够的时间和资源来使一种设计方案尽量趋于完美。一旦要考虑到不同类型的设备环境,我们就必须做出某种程度的权衡,以便&ldquo;弹奏出全部调式&rdquo;。</p> <p>有兴趣的同学不妨参考我们之前的相关文章,对响应式Web设计的概念及实践方式进行深入了解:</p> <ul> <li> <a href="http://beforweb.com/node/6">什么是响应式Web设计?怎样进行?</a></li> <li> <a href="http://beforweb.com/node/7">通过CSS3 Media Query实现响应式Web设计</a></li> <li> <a href="http://beforweb.com/node/12">走出移动互联网的迷宫 - 网站移动化的方法策略</a></li> <li> <a href="http://beforweb.com/node/21">案例学习 - 响应式网站的产品需求和设计流程详解</a></li> </ul> <div class="embed"><article id="node-259" class="node node-related-books" about="/node/259" 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/B00BOUJMS6/?_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/02.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_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/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"> 本书结合理论与实践,辅以大量配图、注释和引用,详尽介绍了如何结合使用流动布局、媒介查询和流动媒介来构建响应式网页;如何从项目一开始就采用响应式的工作流程;如何为不同的设备强化内容;如何使用功能检测和服务器端检测来提供更好的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 移动优先的设计</h4> <p>之前的话题主要偏向于页面的视觉设计。其实,&ldquo;好脾气&rdquo;的设计思路同样可以体现在产品设计、用户体验、信息架构等诸多方面。接下来让我们来看看产品设计当中的移动优先策略。</p> <p>在这个概念里,我们会从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能。正如Luke Wroblewski在《移动优先》一书中所说:</p> <blockquote><p>如果一个团队以移动优先为策略原则开展设计工作,其产品最终所带来的体验将是具有高度的任务驱动性的。用户可以将注意力聚焦在需要完成的关键任务当中,而不会被传统风格的桌面版本网站产品当中过多的无关因素所干扰。这对于产品的用户体验及业务发展都是有好处的。</p> </blockquote> <p>对这种设计策略进行扩展,使其超越移动体验的范畴,并上升到整个产品的层面,我们就可以在它身上发现很明显的&ldquo;好脾气&rdquo;特征。Twitter最近的一次改版当中就很好的体现出了这方面的概念。</p> <p><img alt="ui-desgin-user-experience-interactive-new-twitter-design" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-new-twitter-design.jpg" style="width: 500px; height: 406px; " /></p> <p>Twitter这轮改版的一个主要目的就是在不同类型的设备当中实现具有一致性的体验模式。保持界面外观的统一只是其中的一个方面,更重要的是能否在整个产品体验的层面上实现这一目标。移动优先的设计策略可以保证相关的工作能够朝着正确的方向前进。</p> <p>我们可以在Twitter的这次改版当中很明显的感受到移动化的体验模式对于整个产品设计方案的影响作用。例如其客户端底部的&ldquo;Home&rdquo;、&ldquo;Connect&rdquo;、&ldquo;Discover&rdquo;、&ldquo;Me&rdquo;这四个导航标签,从数量上来说正好适用于移动设备的小尺寸屏幕规格,这正体现出了产品的信息架构针对移动环境所进行的优化调整。而同样的导航结构也出现在了Twitter桌面版的网站当中。我们可以在上面的截图当中看到,虽然桌面环境相对于移动设备来说拥有更大的界面显示空间,但这些导航元素的尺寸及外观效果却几乎与客户端当中的完全一致,只是在整体布局方面进行了调整。可以说,整个桌面版的设计方案在某种程度上就是为了能够保持与移动版本的体验一致性而刻意受限的。</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> <h4> 当心狼</h4> <p>在巴赫平均律之前的自然律体系中,那些不在当前调式当中的音符被弹奏出来的时候,通常会产生一种非常刺耳的效果。当时的音乐家们喜欢将这种情况比喻成狼叫。</p> <p>借鉴这个凶残的概念,我们可以将用户界面当中那些在某些平台当中适用,但在其他环境中就会破坏产品体验的视觉或交互元素称之为&ldquo;狼&rdquo;。当你使用手机浏览Web页面的时候,那些本是为了鼠标指针而设计的难以通过手指准确触摸到的链接,那些微小到几乎无法辨识形状的文字,那些依赖鼠标悬停而触发显示的UI元素...这些都是移动设备上下文环境当中的Web界面之狼。</p> <p><img alt="ui-desgin-user-experience-interactive-new-twitter-design-nytimes-touch-wolf" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-new-twitter-design-nytimes-touch-wolf.png" style="width: 498px; height: 373px;" /></p> <p>纽约时报的单篇文章页面中,正文右侧通常是一组分享链接,其中每个链接单元的高度是12像素。当我们在iPhone中浏览这个页面的时候,会发现这样的尺寸确实很容易造成误操作,你几乎难以准确地触摸到正确的目标对象。对于这些功能性质的链接单元,最好可以按照苹果在iOS人机界面设计规范当中所要求的那样,在宽度和高度上都至少给到44像素。</p> <p>对于下图所示的导航结构,移动设备用户普遍表示压力很大。这种下拉菜单形式的UI组件在传统设备当中是非常常见的,但是由于它需要通过鼠标悬停的方式来触发弹出,所以在触屏移动设备当中,这种形式通常无法正常的工作<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="ui-desgin-user-experience-interactive-new-york-times-navigation" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-new-york-times-navigation.jpg" style="width: 498px; height: 358px;" /></p> <h3> 总结</h3> <p>最后再次强调,虽然响应式设计或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整页面的外观形式及体验方式,但不是所有的UI元素或模块都可以被赋予弹性。我们有必要将按钮或其他一些全局化的界面组件以某种折中的方案进行调整,使页面无论在整体还是细节当中都可以面向不同的设备提供最优且相对一致的体验模式。另外有一个很现实的因素是我们不可以忽视的,即使我们有足够的资源面向不同类型的设备打造具有高度针对性的设计方案,用户在更换设备进行使用的时候同样会将之前的体验转化为潜意识当中的期望而带到另外一个设备当中,所以体验一致性的问题是我们必须认真考虑到的。</p> <ul> <li> <strong>触控优先</strong>:在尺寸上适合手指触摸的按钮或链接同样适合于鼠标点击,但反之则不然。所以触控优先的设计思路可以确保页面在多数平台当中都能有不错的体验。</li> <li> <strong>响应式设计方案</strong>:响应式设计方案够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化,不过同时,我们还需要在很多局部的UI元素或模块当中权衡出一种最优的全局化解决之道</li> <li> <strong>移动优先</strong>:从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能,使其最终所带来的体验具有高度的任务驱动性的。</li> <li> <strong>留意细节当中的交互方式</strong>:要特别留意细节当中的那些不具备跨平台能力的交互模式。其中最常见的一个问题就是触屏设备通常无法支持传统设备当中的鼠标悬停状态。</li> </ul> <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/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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</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, 07 Mar 2012 06:26:10 +0000 C7210 41 at http://www.beforweb.com http://www.beforweb.com/node/41#comments