Be For Web - Apple Watch应用设计 http://www.beforweb.com/taxonomy/term/184 en 案例学习 - 在实践中重新思考Apple Watch版本的Todoist http://www.beforweb.com/node/734 <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-watch-watchkit-app-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>活过了黄梅季的第一轮,眼见着下周天气预报里各种大雨小雨雷阵雨...Fork。</p> <p>闷在屋里听着外面夏天的声音,那种,你一听就能感觉到温度和湿度的声音。真的有这样的声音,不骗你。冬天也有他自己的声音,但是没有夏天的这样让人想喝上几杯再看看EVA然后去睡上一觉。</p> <p>这里写了好多关于夏天关于喵关于Dave Grohl摔下台一类,都被我删掉了;只是之前两周又零零散散的看掉了Philip K. Dick的短篇小说集《少数派报告》。是的,汤爷的同名电影只是来自这部短篇小说集当中的一篇。</p> <p>上周末倒是略忙,译文做了一半停掉,今天补完更新上来,小伙伴们就不要空落落的了。仍是一篇Apple Watch实践,和<a href="http://www.beforweb.com/node/720" target="_blank">之前一篇</a>类似,经过首轮设计并在实际验证中发现问题进而重新思考。眼见着watchOS 2也快来了,不知真正独立的本地化app会有怎样的性能表现。下面进入正文。</p> <p>Apple Watch发布之后,我们的团队立刻意识到这款新平台将和我们的Todoist形成绝妙组合。作为一款始终依附于用户腕上的设备,Apple Watch可以使我们即刻访问信息内容。</p> <p>伴随着各种令人兴奋的可能性,巨大的设计挑战也随之而来。我们从头开始,时刻围绕着Watch的三个设计主体思想进行探索:</p> <!--break--><ul> <li> 轻量</li> <li> 整体</li> <li> 个人</li> </ul> <p>和大家一样,因为最初还没有实际设备可用,我们当时只能在Xcode提供的模拟器中测试自己的app。模拟器自然可以精确的展示UI及流程方案,但我们心里很清楚,不在实际环境中通过真实设备进行测试,&ldquo;体验设计&rdquo;便无从谈起。</p> <p>我们需要知道不恰当的功能设计致使用户必须保持抬腕15秒所产生的挫败感有多糟,我们需要知道在每天的真实情境当中哪些功能和信息是用户在Watch上真正需要的,我们还需要知道以怎样的形式组织信息才能真正做到&ldquo;抬腕一瞥即可获取&rdquo;。</p> <p>本文中,我们将为各位分享的就是通过实际设备使用测试之后,我们得到了哪些感悟,同时又是怎样重新思考最初的设计方案的。</p> <p><img alt="01-todoist-apple-watch-redesign-ux-ui.png" src="/sites/default/files/images/201506-2/01-todoist-apple-watch-redesign-ux-ui.png" style="width: 620px; height: 310px;" /></p> <h3> 1.模拟器无法代替实际设备测试</h3> <p>Xcode的模拟器自然是不错的起点,也是开发流程当中必须用到的工具,但你必须知道有一些关键的东西是模拟器所无法提供的。</p> <p>首先,无论iPhone还是Watch,在真实世界当中我们都是使用单手或双手来操作它们的。而通过鼠标或触控板与Mac屏幕上的设备模拟器进行互动则完全是另外一种感觉了,你无法真的体验产品,更谈不到去设计体验了。</p> <p>其次,Watch是腕上设备,无论是获取信息还是进行互动,你都必须抬起手腕。保持抬腕的姿势无需很久就会使人产生疲劳感,你在头脑中设想的、在模拟器中还原和验证的那些你自认为&ldquo;很简短&rdquo;的交互流程,一旦放到Watch上面就未必真的有那么轻量了。</p> <p>再者,Watch自身有其独特的互动机制,包括数码表冠、Force Touch和完全针对Watch屏幕设计的首屏app布局等等。在真实设备上使用了这些功能之后,我们才有了更清晰的认知,并开始思考怎样将这些互动方式尽量无缝的融入自己的产品当中。</p> <h3> 2.Watch绝不是迷你iPhone,设计思维必须独立</h3> <p>为了将Todoist以正确的形式适配到Watch当中,我们一直在问自己:&ldquo;腕上设备的核心价值是什么?Watch版本的Todoist怎样才能体现出这些核心价值?除了独特的界面形式以外,哪些功能是用户在Watch上真正需要的?&rdquo; 通过思考这些问题,我们至少想明白了重要的一点,就是你不仅不能简单粗暴的将iPhone版本的UI框架拷贝到Watch上,有时甚至连最基础的功能架构都不能。对于稍显复杂的app,Watch版本的核心功能很可能与iPhone上的完全不同。</p> <p>最终,我们移除了所有涉及到复杂交互流程的功能,只向用户提供那些与今天或当前时刻紧密相关的信息。</p> <p>对于app当中任何一个需要操作的地方,我们都会反复考量其交互模式是否足够简单快捷。如果不是,我们会持续迭代并验证,直到我们自己感觉它到位了。</p> <p>相比于其他平台,Apple Watch有着太多的独特性,试着在实践中找到并理解它们,然后针对这些特性来思考并迭代自己的产品方案。</p> <h3> 3.Glance的设计要真正做到&ldquo;一瞥即可获取&rdquo;</h3> <p>Glance视图是Watch独有的界面模式之一,用户在表盘界面上滑即可唤出,用于快速呈现相关app当中简短而重要的信息。Todoist的Glance视图可以让用户了解当前还有多少事项有待处理,以及最近一个事项的具体内容。</p> <p>我们最初的设计方案确实能呈现这些信息,但是通过在实际设备上使用,我们发现内容的易读性还是太差了,完全可以换套模板,更加充分的利用屏幕空间,使信息更易快速获取,无需用户去仔细的辨识文字。字号更大的待处理事项数量可以使注意力更加聚焦,新增的logo可以帮助用户快速辨识当前Glance的所属。</p> <p><img alt="02-todoist-apple-watch-redesign-ux-ui.png" src="/sites/default/files/images/201506-2/02-todoist-apple-watch-redesign-ux-ui.png" style="width: 620px; height: 270px;" /></p> <p>对于Glance视图来说,毫秒级的差异都可以在实际使用当中给人造成感知。</p> <h3> 4.App主界面是交互核心</h3> <p>Glance是用户主动从app获取信息的最快捷途径,其次便是app本身。实际使用过Watch之后,我们意识到app内部对于交互流程快捷度的要求比想象的更加苛刻,如果所需操作超过几次点击,我们就会倾向于拿出iPhone取而代之 - 保持抬腕姿势几秒钟之后你就会产生这样的欲望。所以app主界面的重要程度比我们此前所理解的更加重要,你必须尽可能的将最重要的信息和操作集中在这里,而不是像iPhone上习惯的那样提供一个导航列表让用户一层层去挖掘。</p> <p>在最初的版本中,我们舍不得丢弃任何东西,每个功能的权重都相同,结果就是一个层级导航列表摆在主界面。之后,我们还尝试着把当时自认为是更重要的&ldquo;添加事项&rdquo;功能单独放到了顶部。</p> <p><img alt="03-todoist-apple-watch-redesign-ux-ui.png" src="/sites/default/files/images/201506-2/03-todoist-apple-watch-redesign-ux-ui.png" style="width: 620px; height: 270px;" /></p> <p>感觉怪怪的。虽然&ldquo;添加事项&rdquo;是iPhone版本当中的主要功能之一,但在Watch上它并不是。用户在Watch上的首要目标是获取信息而非创建内容。为了让用户在app主界面就能完成首要目标,我们重构了布局,将&ldquo;今日&rdquo;按钮以及其中的信息更加突出的呈现出来,所剩任务数量的字色非常抢眼,有效的与其他次要信息和功能区分开来。用户当前账户和点数信息被置于顶部,而在Watch上更加次要的功能譬如收件箱、项目等等都被下移。</p> <h3> 5.Force Touch很有用,要加以善用</h3> <p>Force Touch,按压屏幕的手势,用来唤出和当前界面相关的情境菜单。实际体验之后,我们意识到可以在Todoist当中通过这种方式为用户提供一些&ldquo;相关&rdquo;的次要功能,同时还不会占用默认用来展示最重要信息和功能的宝贵空间。</p> <p>最终我们决定通过Force Touch唤出前面提到的&ldquo;添加事项&rdquo;功能,使其仍然可用,但不会像之前那样占据最重要的位置了。用户在app中的任何地方都可以通过按压来唤出这个功能,因为新建事项的动机可能在任何环节产生,我们不希望用户必须导航回主界面才能操作。</p> <p><img alt="04-todoist-apple-watch-redesign-ux-ui.png" src="/sites/default/files/images/201506-2/04-todoist-apple-watch-redesign-ux-ui.png" /></p> <h3> 6.妥协是不可避免的,要控制优先级</h3> <p>极小的屏幕尺寸以及短暂的人机交互时间限制会迫使你抉择信息和功能的优先级。</p> <p>最初的版本中,我们中规中矩的设计了一个简单的事项列表,用户点击其中的某一个事项便可唤出相关的操作。对这样一个微小的交互流程,我们进行了很多次探讨,目的是搞清楚这个环节里最重要的事情到底是什么 - 尽量完整的展示事项内容更加重要,还是牺牲一部分内容来换取更快捷的互动方式重要些?我们相信,相比于不完整的内容,多出一步额外的操作才是真正让人焦躁的。想想看那些用Todoist做购物清单的用户,通常需要连续勾掉若干个条目,如果每次都要点击进入下层界面进行操作然后再返回列表,真是件痛苦的事。</p> <p>我们最终决定采用能帮用户快速完成任务的方式,也就是在列表里每个事项的右侧直接放置一个复选框;当然,用户依然可以点击内容本身来进入详情界面查看更多相对次要的选项。</p> <p><img alt="05-todoist-apple-watch-redesign-ux-ui.png" src="/sites/default/files/images/201506-2/05-todoist-apple-watch-redesign-ux-ui.png" /></p> <h3> 7.最重要的操作必须在首屏</h3> <p>使用表冠进行滚屏是Watch当中独特的交互方式之一,很具创意,能够帮用户在小屏空间中查看更多的内容。但不可否认的是,滚动操作再精巧再爽滑,也是会延长人机互动时长的。</p> <p>在测试第一版设计方案的时候,我们发现,把操作按钮放在内容末尾非常不便于快速操作。特别对于那些内容稍长的事项,操作按钮必然会被顶到所谓的&ldquo;折线以下&rdquo;,用户不得不将手指移到表冠上进行滚动才能看到。虽然是很短暂的动作,但仍然会带来不顺畅的体验。我们尝试了几种方案,最终决定把两个按钮置顶,最大程度的维护其易达性。</p> <p><img alt="06-todoist-apple-watch-redesign-ux-ui.png" src="/sites/default/files/images/201506-2/06-todoist-apple-watch-redesign-ux-ui.png" /></p> <h3> 8.配色和图标的使用要有明确的目的性</h3> <p>我们希望Watch版本的Todoist仍然能体现出iPhone版本的一些外观和感觉,包括品牌配色和图标形象。对于38mm的小屏幕,这不太容易。</p> <p>我们需要针对Watch的小屏幕特性对图标进行必要的重设计,包括品牌配色等元素也要潜移默化的贯穿在Watch app当中,同时还必须确保界面和元素的可读、易读性。我们复用了iPhone版本中那些已经被用户们熟识的图标,增加了描边的线宽,确保它们在黑色小屏背景上具有足够高的对比度和清晰度。</p> <p><img alt="07-todoist-apple-watch-redesign-ux-ui.png" src="/sites/default/files/images/201506-2/07-todoist-apple-watch-redesign-ux-ui.png" /></p> <h3> 9.通过少量而精细的动效提升体验</h3> <p>无论在什么平台,如果设计的得当,动效都可以使互动方式变得更加容易理解,体验也更加丰富愉悦。所谓&ldquo;得当&rdquo;,不仅包括形式,恰当的数量也很重要,太多动效充斥在界面当中只会使互动流程变慢,让人觉得乏味 - 对于Apple Watch来说,这是尤其需要注意的。</p> <p>我们决定在Watch版本的Todoist当中谨慎行事,最终只有两处用到了定制化的动效。第一处是当你在任务列表中勾掉某个事项时,复选框会被背景色逐渐填充,对勾出现,然后任务内容置灰,最后整条事项消失。这一套短暂而精细的动效流程可以清晰准确的将完成状态传达给用户,让他们知道自己的点击行为达到了预期当中的结果。第二处动效就是今日任务的空状态视图,一个很具成就感的大勾,用户在完成了当天所有的事项之后就会看到。</p> <p><img alt="08-todoist-apple-watch-redesign-ux-ui.gif" src="/sites/default/files/images/201506-2/08-todoist-apple-watch-redesign-ux-ui.gif" /></p> <h3> 10.局限</h3> <p>初代Apple Watch带来的设计与技术局限也是我们不得不面对的,例如在Glance视图中显示静态图片的问题,或是缺乏定制化的手势运用等等。此外,目前所有的第三方app只能作为iPhone app的扩展存在,这直接影响了Watch app自身的性能,跑起来很慢。</p> <p>不过,Apple很快就会为第三方开发者们带来更多令人兴奋的可能性,譬如WWDC带来的watchOS 2将支持本地化app等等一系列好消息。这就意味着不久之后我们便能打造出独立于iPhone的、速度更快的Watch app,并且能够运用到Watch当中更多的软、硬件接口为用户打造更加丰富的体验,包括Taptic的调用,以及将第三方app信息直接输出到表盘的Complication当中,等等。</p> <p>我们一直保持着兴奋,无论是现在这样面向新平台进行探索和实践,还是不久的将来更多令人兴奋的可能性变为现实的时候,我们都将在可穿戴设备与生产力结合的道路上走下去。说到最实际的,我们将继续研究、迭代、验证,使我们的Todoist能更好的利用Watch的特性,帮用户更加轻松快捷的完成日常生活中的重要任务。</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/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/184" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch应用设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/148" typeof="skos:Concept" property="rdfs:label skos:prefLabel">智能手表</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 20 Jun 2015 13:33:01 +0000 C7210 734 at http://www.beforweb.com http://www.beforweb.com/node/734#comments 案例学习 - 面向Apple Watch自身特性及局限的产品重设计 http://www.beforweb.com/node/720 <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-watch-watchkit-app-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>我基本可以在较大范围内给自己剪头发了。</p> <p>从前也只是简单的这修一下那剪一下,这周二突然来劲了从上到下从左到右来了一遍。感觉像是第一次做产品,满脑子想法然后手上收不住,其结果就是两边剪出斑秃一般的东西,以至于朋友圈里有童鞋调侃我给自己搞了个鲨鱼纹。</p> <p>眼见着长了几天的鲨鱼纹慢慢恢复起来,又忍不住要下黑手了,有瘾,好像10多年前一个接一个打耳洞的感觉,又像是幻想中纹身的感觉。今天不坏,懂得以最小化的思路去搞了,剪一点验证一下,大体还好,细节里有些问题,慢慢迭代吧。总算轻薄了一些同时又不至于老远看去好像鹌鹑蛋,这就是成功了。原来自己身上这部分属性还可以在一定程度上受自己控制,而不是一辈子必须隔三差五出去和洗剪吹们浪费唇舌,想来也是蛮开心的。</p> <p>除了剪发手艺之外(这也算手艺&hellip;),本周另外的收获就是看掉了诺兰的《致命魔术》以及小说《仿生人会梦见电子羊吗》,前者过瘾,震撼,后者阅后如鲠在喉却难以自拔。我爱死这些感觉了。</p> <p>如果说正事,今天正事上的是蛮晚的。和前面几次Apple Watch产品设计案例不太一样,今天的这篇比实践更加实践一些。作者做了第一版Watch app,然后发现在实际使用当中问题成堆,于是重新思考彻底改变架构,在官方设计规范提供的框架基础上结合硬件性能限制和自家产品特性,做了大胆的突破,蛮精彩的。请看吧。</p> <p>我(<a href="http://www.marco.org/2015/05/08/overcast-apple-watch-redesign">英文原文</a>作者)为我的播客应用Overcast设计的第一个Watch版本,在整体信息架构方面和iPhone平台上的很类似,基本相当于一个缩小版本。</p> <p>想来是挺合理的一件事,架构清晰,导航和界面的设计模式也完全符合Watch上的规范。不过在实际当中,这个版本的表现糟透了。</p> <!--break--><p><img alt="01-apple-watch-app-ux-ui-redesign-podcast.png" src="/sites/default/files/images/201505-4/01-apple-watch-app-ux-ui-redesign-podcast.png" style="width: 620px; height: 354px;" /></p> <p class="figure-caption">第一个Apple Watch版本的Overcast</p> <h3> 完美的设想</h3> <p>三层的导航架构,和iPhone版本相同:第一层是播客列表,第二层是某播客中的章节列表,第三层是正在播放界面。</p> <p>在播放界面中,我将三个最主要的操作,也就是播放和进退按钮以三角形的方式进行布局,利用一部分纵向空间来弥补横向空间的不足,尽量防止用户误操作。同时,用户还可以在这个界面中通过按压(Force Touch)来唤出情境菜单,其中包括改变播放速度和音效,以及推荐当前章节等功能。</p> <p>和iOS版本一样,我在Watch里也使用了自己购买的定制化字体 - 相比于系统默认的San Francisco,这款字体占用的横向空间更少,而看上去又不会过于拥挤,所以每行可以显示的字符数就可以多一些了。我甚至将章节标题渲染成了图片的形式,目的就是能够在内容中使用连字符,避免单词之间过大的空白。Apple在那些官方app中也是出于相同的目的来使用连字符的,只是目前他们提供给开发者的WatchKit当中还不允许连字符的使用。</p> <h3> 骨感的现实</h3> <p>WatchKit的加载速度很不稳定,时常会出现问题。</p> <p>在Watch应用里,每当界面当中的内容要发生变化,或是需要加载新数据一类,Watch和iPhone都要通过蓝牙进行一轮数据通讯。也许是因为无线连接不顺畅,或是WatchOS 1.0的系统问题,亦或是两者兼而有之(更可能是这样),总之WatchKit目前的稳定性很令人焦虑,应用或Glance视图时不时的会菊花转个没完,而数据却并没有进行加载。另外,即使在正常工作,有时加载数据和切换界面所耗费的时间会过长,以至于你还在等着的时候屏幕却自动关闭了。</p> <p>所以,我那看似完美且符合规范的三层导航模式,在实际当中的可用性极差:</p> <ul> <li> 最深的一层,也就是正在播放界面,是用户最常访问到的。在iOS上,你可以让app在加载之后自动跳转导航层级,直接进入正在播放界面;但是在WatchKit当中,每一个层级的界面都要加载数据,手动点击之后再进入下一层,跳转的过程还包括动效及加载新数据的菊花转,整个过程变得很长;每次层级跳转都会产生一轮Watch与iPhone的数据通讯,前面提到的不稳定甚至卡死的情况时常发生。</li> <li> 为了能让最后两层界面当中的内容列表能随着数据的变化而动态的更新,我不得不在代码中添加了很多复杂的逻辑。代码的复杂度和出现bug的几率大了很多,Watch与iPhone之间的通讯也不得不变的更加频繁。</li> <li> 为了提升列表的加载速度,我必须让列表首先加载几行数据在屏幕中,然后在接下来的几秒当中再&ldquo;自动加载&rdquo;剩余的内容。在实际使用当中,这会产生一个严重的问题:在那几秒钟时间里,列表根本无法响应用户的点击,直到内容加载完毕。这使得整个导航流程变得更慢。</li> <li> 在实际使用当中,我就是不喜欢Watch上的层级导航模式。相比于其他的WatchKit UI控件,层级导航用起来感觉特别慢;此外在回退时,左上角那个返回按钮很难点击,而向右轻扫的手势同样容易产生误操作。</li> </ul> <p>所以,我做完了第一个Watch版本之后,自己用了一天,然后就开始思考怎样重新进行构建了。</p> <h3> 重新思考</h3> <p>为了降低代码复杂度以及WatchKit在进行数据连接时的工作负荷,我决定换一种方式重新打造app,将正在播放界面作为唯一的主界面,而其他列表界面都以模态的方式在需要的时候上滑呈现。这样一方面极大的提升了加载速度和可靠性,一方面也降低了原来列表界面不断动态更新的必要。</p> <p><img alt="02-apple-watch-app-ux-ui-redesign-podcast.png" src="/sites/default/files/images/201505-4/02-apple-watch-app-ux-ui-redesign-podcast.png" style="width: 620px; height: 510px;" /></p> <p class="figure-caption">左边是第一版,右边是重设计之后的版本</p> <p>在正在播放界面当中,我还尝试了通过滚屏的方式查看更多内容,或是使用横向的页面导航来组织更多的播客信息,不过感觉它们都不如一个简简单单的不可滚动界面来的更靠谱:单一界面加载起来更快,而且在如此小的空间内进行滚屏也非常容易引起误操作,轻触动作也有可能被识别为轻扫。</p> <p>基于我在实际使用Watch的过程中对于这个平台的体验和理解,我希望把正在播放界面打造的更加实用:</p> <ul> <li> 我希望在正在播放界面看到接下来即将播放的播客内容,并根据自己的喜好进行跳转。以往我都必须把iPhone拿出来做这件事,很麻烦。</li> <li> 之前琢磨的三角形布局方案(播放和进退按钮)虽然变相的节省了横向空间,但对于纵向的可利用空间却是很大的损失,一个播放按钮就占据了一整行空间,两边的留白也难以容纳其他内容。Apple自家的媒体控制Glance直接将三个按钮放在一行当中,用起来也没什么问题,所以这里我决定和系统的模式保持一致。</li> <li> 眼尖的字体大侠们也许会注意到,我为播客标题采用了更细的字体风格,和系统的样式更贴近。</li> </ul> <p><img alt="03-apple-watch-app-ux-ui-redesign-podcast.png" src="/sites/default/files/images/201505-4/03-apple-watch-app-ux-ui-redesign-podcast.png" style="width: 620px; height: 352px;" /></p> <p>新的正在播放界面当中的其他功能包括:</p> <ul> <li> 点击正在播放的播客封面,唤出当前章节的详细信息界面;在这里还可以直接进行推荐,而不是上个版本那样必须通过按压唤出情境菜单进行操作。</li> <li> 点击后面任何一个封面,都可以唤出播放列表菜单,控制播客的播放顺序。</li> </ul> <p>不过Force Touch菜单仍然在,你还是可以在这里设置音效以及推荐内容。由于在现在的架构中,正在播放界面是唯一的主界面了,没有其他层级的干扰,用户更容易意识到在这里可以通过按压手势唤出情境菜单了。</p> <p>情境菜单中新的&ldquo;Podcasts&rdquo;可以唤出全部播客列表,代替了以前的导航主界面。放在这里确实很深,不过我觉得在实际使用当中是合理的:播放列表本就是按需出现的,用户在多数时间是沉浸在播客内容当中的,导航只是临时性的。</p> <p><img alt="04-apple-watch-app-ux-ui-redesign-podcast.png" src="/sites/default/files/images/201505-4/04-apple-watch-app-ux-ui-redesign-podcast.png" style="width: 620px; height: 355px;" /></p> <p>从前,我低估了Glance的用途,在实际当中,我发现它们非常实用。对于Watch来说,每次按压表冠进入蜂窝一样的主界面选择app加载进入,这一系列操作的成本相对来说还是很高的。相对的,充分利用Glance视图作为app状态的即时反馈以及快捷入口还是非常划算的。当然,我也很希望Apple将来能把表盘上的&ldquo;复杂功能&rdquo;接口开放给第三方app,允许用户经由表盘直接进入app。</p> <p>Apple限定第三方app的Glance当中不能包含任何按钮;点击Glance整体就会启动相应的app。所以我的Glance肯定没法像Apple官方的媒体Glance那样实用,也就是不能包含任何播放控制功能。不过我还是可以把它打造的更加丰富和有用一些。相比于第一版,除了当前播放的章节标题、封面图以及进度条以外,我在新版当中还增加了即将播放的播客封面,以及已播放时间。</p> <p><img alt="05-apple-watch-app-ux-ui-redesign-podcast.png" src="/sites/default/files/images/201505-4/05-apple-watch-app-ux-ui-redesign-podcast.png" style="width: 620px; height: 357px;" /></p> <p class="figure-caption">从左到右依次为Apple官方的Media Glance、我的第一版Glance和改版之后的</p> <h3> 改版结果</h3> <p>我的朋友们以及参与了beta测试的用户们都给到了类似的反馈:</p> <ul> <li> 第一天:&ldquo;感觉有点奇怪。&rdquo;</li> <li> 第二天:&ldquo;已经习惯了新的界面,比之前一版好用了很多。&rdquo;</li> </ul> <p>我自然是非常开心。</p> <p>不得不承认,完全按照iOS版本的架构来打造Watch app是一个错误。对于多数类型的app产品来说,你不能把现在的Apple Watch看做能够进行全面移植的新&ldquo;平台&rdquo;,理念上应该将其视为某种遥控设备或是附属屏幕。</p> <p>我的第一版Watch应用,在概念上很简单,也很容易理解,与iOS版本的架构基本一致,按理说用户应该更加习惯才对。但在实际当中,却非常不好用,还不如把iPhone从口袋里拿出来用着方便。</p> <p>而新版的app,在概念上确实有些奇怪,对用户来说需要付出一点认知成本,不过在实际当中却很好用,因为它是更加符合Apple Watch设备特性的。</p> <h3> 小结</h3> <p>将iPhone的设计模式和交互范式塞进Watch是很难行得通的,我们必须围绕Watch这款产品的特性进行设计。</p> <p>WatchKit 1.0对设计和开发人员的限制很多,性能表现也不是很稳定,所以相比于我们所习惯的在iPhone上&ldquo;完整的使用app&rdquo;,Watch上的产品很难那样完整而独立,它更像是iOS应用的辅助与增强,就像Apple自己在设计规范当中所说的那样。我相信这种平台间的依存模式并不完全是由当前的技术局限所造成的,即便将来Apple为我们提供了Watch本地SDK来打造真正独立的app,设备之间的互补与共生关系也依然存在。(推荐阅读:<a href="http://www.beforweb.com/node/695" target="_blank">Apple Watch平台认知与产品设计</a>)</p> <p>正如不是每个Mac应用都有对应的iOS app(反之亦然),iPhone app也未必能够或是未必需要一款Watch app进行辅助。而另一方面,随着设备自身的发展,Watch app当中的更多可能性会被慢慢挖掘,届时我们在Watch上所依赖的功能可能也不适于在iPhone上进行操作。</p> <p>从产品定位的角度看,Watch似乎位于iPhone和蓝牙耳机这两类设备之间的某个位置 - 它的一部分角色是计算设备,另一部分角色是某种外设 - 这种定位很可能是本质的、长期的,而非受制于硬件技术的局限。不是所有的计算设备都可以成为某种通用平台。如今,对于很多人而言,是软件问题的局限使得Watch无法成为iPhone的替代品,但实际上它根本不该成为iPhone的替代品,这是长期的产品形态和设备定位关系,就像平板无法真正代替笔记本电脑一样。就算是十年后的Watch也不能使人类的手腕真正变大,或是让人长出第三只手一类,而你口袋里的手机则仍然会有更大的屏幕空间及更耐用的电量去完成更加复杂的或是更具沉浸性的任务。</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/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/184" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch应用设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/148" typeof="skos:Concept" property="rdfs:label skos:prefLabel">智能手表</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 31 May 2015 13:12:48 +0000 C7210 720 at http://www.beforweb.com http://www.beforweb.com/node/720#comments 案例学习 - 关于Watch应用的导航、通知、复杂任务及动效 http://www.beforweb.com/node/717 <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-watch-watchkit-app-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>It&rsquo;s better to burn out than to fade away.</p> <p>距离Kurt Cobain把Neil Young的这句歌词引用到自己的遗书里然后给自己来了一枪的21年之后,Neil Young本人依然在世并仍在高唱着Keep on rockin&rsquo; in the free world.</p> <p>翻翻自己常听的歌单,歌手几乎都是如今已经50岁上下和70岁上下的,除了那些自杀的和吸毒过量挂掉的。所以有时想想看,自己所爱的这些,也真算的上是恶趣味呢。</p> <p>Watch已经到手一周,仍在适应和习惯,也许接下来一两周可以念叨念叨了。所谓适应,并非指十多年不戴表之后突然每天在腕上戴这么个东西的不习惯,而是指还在根据自己的生活来摸索Watch与iPhone的共生关系,还在一点点的打破&ldquo;在任何情况下都通过手机来获取信息&rdquo;的习惯。不少人说&ldquo;有了Watch就会更加沉浸于各种app各种信息交流了吧&rdquo;,我只能说实际情况正相反,我已经亲身感觉到自己在&ldquo;设备&rdquo;上花的时间越来越少了,就像之前有几篇<a href="http://beforweb.com/node/692" target="_blank">关于Apple Watch的文章</a>里说过的那样;那些作者很是有先见之明。</p> <p>今天仍是Watch应用设计案例。我很喜欢案例学习,所以不会介意连续三周来做相同的话题。下面进入译文。</p> <p>Wallaby是一款个人财务app,可以在你购物时根据不同的场所帮你选择最适合的信用卡进行付款,以最大程度的获取优惠或积分。不过根据我们的了解,在实际当中,很多用户在结账时常常忘记或懒得把手机拿出来使用Wallaby提供的功能。</p> <p>我们希望Apple Watch版本的Wallaby能从一定程度上解决这一问题。其实在这之前,我们已经打造过Pebbel、Android Wear、Samsung Galaxy Gear甚至是Google Glass的版本了,所以对于哪些功能更适用于可穿戴设备还是比较清楚的。</p> <!--break--><p>本质上讲,为可穿戴设备进行设计的关键在于情境及人机互动效率。而Apple Watch的一些重要特性,包括超小的屏幕尺寸、始终位于腕上、多样的交互方式等等,又使得我们在设计的过程中学到了很多新东西,包括新的设计范式,以及怎样解决新的UX设计挑战。</p> <h3> 导航</h3> <p>目前,Apple Watch只提供了两种导航模式:层级式和页面式。</p> <p>层级式导航适用于功能和数据较为复杂的产品。如果需要层层递进的访问某些功能或内容,这种导航模式显然再适合不过。而页面式的导航则更加适用于那些信息模型相对简单、不同模块之间不存在直接数据关联的产品。</p> <p>我们为Wallaby使用了页面式导航。从信息结构的角度讲,每个功能模块之间并没有很强的关联性,也没有太多层级化的内容,不需要通过层级式导航进行组织;从交互的角度来看,在页面式导航的框架下,通过左右轻扫就可以在不同的功能模块之间切换,在&ldquo;Nearby&rdquo;模块中上下轻扫或滚动表冠就可以查看适用于附近购物场所的信用卡,人机互动效率很高,无需像层级式导航那样迫使用户必须精准的点击某个微小的按钮才能进一步访问内容。特别是在Wallaby的典型使用情境下 - 在用户站立和走动的过程中 - 这两种导航模式带来的交互成本的差异还是很明显的。</p> <p><img alt="01-design-for-apple-watch-app-navigation-animation-notification.gif" src="/sites/default/files/images/201505-2/01-design-for-apple-watch-app-navigation-animation-notification.gif" style="width: 620px;" /></p> <p>推荐阅读:<a href="http://beforweb.com/node/596" target="_blank">Apple Watch界面设计规范</a></p> <h3> 通知</h3> <p>如果设计的得当,使app能够在正确的时间和地点向用户发送正确的通知消息,你的产品将有可能从平凡走向成功 - 对于Watch应用来说更是如此。</p> <p>Watch始终被用户戴在手腕上,人机之间的距离相比以往的设备来说更近一步,所以你必须对通知机制有所限制,确保只发送那些最重要、最符合情境的信息,而且要以尽可能简短的形式来呈现 - 否则将会对用户产生持续而严重的干扰,使他们不得不彻底屏蔽掉来自你家产品的通知信息。</p> <p>Wallaby目前只将通知限制在一些重要事件上,例如告知用户今天有某张卡片提供打折活动,以及账单和年费信息等。将来,随着Watch自身硬件能力的不断提升,我们将有可能在不消耗过多Watch和iPhone电量的前提下精准的获取用户所在的位置,届时我们就可以在用户进入某家商店或卖场的时候即时发出通知,让他们知道哪些信用卡适合在那里消费,使用户无需自主发起查询便可以获取最适合当前情境及行动目标的信息。</p> <p><img alt="" src="/sites/default/files/images/201505-2/02-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 320px; height: 577px;" /></p> <h3> 复杂任务</h3> <p>涉及到太多输入和设置的复杂任务,本质上并不适合在Watch这样屏幕尺寸极小、操作难度较大的设备上完成。</p> <p>对于这类功能,在iPhone上进行操作更加合理。为了确保多设备之间的无缝体验,我们利用了iOS提供的Handoff功能。</p> <p>当我们需要用户来完成那些较为复杂的任务时,例如创建账户、获取授权、连接银行数据等等,我们会在显示一条消息,告诉用户接下来的操作需要在iPhone当中进行。当他们打开iPhone时,界面会自动切换到相关的流程当中,继续之前在Watch上中断的步骤。</p> <p><img alt="" src="/sites/default/files/images/201505-2/03-design-for-apple-watch-app-navigation-animation-notification.jpg" style="width: 400px; height: 400px;" /></p> <p>推荐阅读:<a href="http://beforweb.com/node/695" target="_blank">Apple Watch平台认知与产品设计</a></p> <h3> 动效</h3> <p>精美入微、表意恰当的动效可以提升交互体验,增强产品的愉悦性。我们平时会使用Framer来制作交互原型并调试动效的各种属性。</p> <p><img alt="" src="/sites/default/files/images/201505-2/04-design-for-apple-watch-app-navigation-animation-notification.gif" style="width: 320px;" /></p> <p>需要注意的是,为Watch应用制作动效时,你不能像从前那样依赖于开发人员通过代码来完成 - Watch中的动效是通过图片序列来构建的 - 但你同样不能把GIF动画丢给开发人员去放到界面当中。作为设计师,你必须为动画的每一帧提供一幅静态图片。</p> <p>最有效的方法是将动画文件导入After Effects或Photoshop,然后导出图片序列。下面大致描述一下我们在Photoshop当中的操作方法:</p> <p>1.在Photoshop中打开GIF或导入MOV文件。</p> <p>2.如果需要的话,对动画的帧率进行调整。</p> <p>3.选择&ldquo;File - Export - Render Video&rdquo;</p> <p><a href="/sites/default/files/images/201505-2/05-design-for-apple-watch-app-navigation-animation-notification.png" rel="lightbox"><img alt="05-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/05-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px; height: 442px;" /></a></p> <p>4.进行命名等设置,确保图片序列从序数&ldquo;1&rdquo;开始。点击Render按钮后,Photoshop便会将动画逐帧分解并保存为指定格式的图片。</p> <p><a href="/sites/default/files/images/201505-2/06-design-for-apple-watch-app-navigation-animation-notification.png" rel="lightbox"><img alt="06-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/06-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px; height: 417px;" /></a></p> <p><a href="/sites/default/files/images/201505-2/07-design-for-apple-watch-app-navigation-animation-notification.png" rel="lightbox"><img alt="07-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/07-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px;" /></a></p> <p>5.你可以使用TinyPNG或ImageOptim一类的工具对这些图片进行优化,确保文件不会很大。</p> <p><a href="/sites/default/files/images/201505-2/08-design-for-apple-watch-app-navigation-animation-notification.png" rel="lightbox"><img alt="08-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/08-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px; height: 386px;" /></a></p> <p>最后再帮开发人员一个忙,为这些文件增加@2x后缀;如果文件太多,建议使用Automator一类的工具来完成:</p> <p>打开Automator,选择&ldquo;Service&rdquo;。</p> <p><img alt="09-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/09-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px;" /></p> <p>将需要重命名的文件拖进来。</p> <p><a href="/sites/default/files/images/201505-2/10-design-for-apple-watch-app-navigation-animation-notification.png" rel="lightbox"><img alt="10-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/10-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px; height: 505px;" /></a></p> <p>选择&ldquo;Files &amp; Folders&rdquo;,双击&ldquo;Rename Finder Items&rdquo;,会出现对话框询问你是否为每张图片添加一份副本以便保护原始文件的命名方式。你可以选择不添加副本,点击&ldquo;Don&rsquo;t Add&rdquo;。</p> <p><a href="/sites/default/files/images/201505-2/11-design-for-apple-watch-app-navigation-animation-notification.png" rel="lightbox"><img alt="11-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/11-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px; height: 505px;" /></a></p> <p>在下拉列表中选择&ldquo;Add Text&rdquo;,填写&ldquo;@2x&rdquo;,选择&ldquo;after name&rdquo;作为插入位置。</p> <p><a href="/sites/default/files/images/201505-2/12-design-for-apple-watch-app-navigation-animation-notification.png" rel="lightbox"><img alt="12-design-for-apple-watch-app-navigation-animation-notification.png" src="/sites/default/files/images/201505-2/12-design-for-apple-watch-app-navigation-animation-notification.png" style="width: 620px; height: 505px;" /></a></p> <p>最后,点击右上角的&ldquo;Run&rdquo;按钮,搞定。</p> <h3> 小结</h3> <p>为Apple Watch进行设计的过程很有意思。目前我们在设计方面受到的制约确实很多,不过从另一个角度看,这也使得我们必须将注意力聚焦在最核心的体验上,打造最基本最简化的界面及交互流程,并基于自己产品的特性来设计最符合情境的通知机制。如果涉及到较为复杂的功能,要考虑通过Handoff配合iPhone来完成。此外,也不要忘记在恰当的地方通过合理的动效来提升产品的交互体验。</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></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/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/184" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch应用设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/148" typeof="skos:Concept" property="rdfs:label skos:prefLabel">智能手表</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 09 May 2015 09:40:26 +0000 C7210 717 at http://www.beforweb.com http://www.beforweb.com/node/717#comments 案例学习 - 为Soundwave设计Watch应用时学到的五件事 http://www.beforweb.com/node/701 <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-watch-watchkit-app-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>五一假期第二天。眼前摆着脏兮兮的咖啡杯,伽莫夫的《物理世界奇遇记》,以及用来在iPhone上玩GTA San Andreas的蓝牙手柄。外面雨着,Neil Young轻声唱着&ldquo;Only love can break your heart&rdquo;;记得老杨曾经埋汰过iTunes提供的音乐质量,乔布斯很光火;老杨送给乔布斯唱片一类的礼物以图修好,乔布斯拒收。都是一辈子长不大的小孩儿。</p> <p>突然间天气像是变的晴朗起来,外面也有鸟叫的声音了。最近时常发现一只特别小的小黑鸟不知叫做什么名字来的会落在阳台外面的晾衣杆上左顾右盼的叫着,倒是有些像燕子。</p> <p>可能还是想再做一些Apple Watch的产品案例。最近开始有些设计师讲到怎样通过After Effects制作动画图片序列的事儿了。不多说了,进入译文。</p> <p>Soundwave已经在iOS及Android平台上发展了将近两年。我(<a href="https://medium.com/soundwave-stories/5-things-you-need-to-know-when-designing-for-apple-watch-654393aa0460">英文原文</a>作者)最近有幸得到机会,能够为Apple Watch版本的Soundwave进行UI与交互设计,使其成为4月24日之后Watch平台上的首批第三方应用之一。</p> <p>为Apple Watch这样的新平台设计app,这对于我们的设计与开发团队来说都是绝佳的学习机会。作为设计师,我在这个过程当中学到了一些很关键的东西。</p> <!--break--><h3> 1.学习设计规范</h3> <p>官方的<a href="http://beforweb.com/node/596" target="_blank">Apple Watch人机界面设计规范</a>很严格。其实iOS版本的也是如此,只是这么多年下来,随着iOS设备及app市场的越发成熟,设计师们时常需要花很多时间去探索规范之外的那些更加独特、更加定制化的设计模式。而现在,在新平台刚刚问世的阶段,我们无需,也不能进行大范围的探索 - 不妨利用节省下来的大把时间去仔细学习和理解官方的设计规范,看看作为设计师,在新平台框架的约束下能利用哪些模式实现怎样的方案,又有哪些iOS设计思路是无法运用到Watch上的 - 否则,你将发现自己需要花费大量时间去返工修改方案才能使其被开发出来。</p> <p>好消息是,配合着设计规范的内容,Apple官方提供了一套非常全面的<a href="https://developer.apple.com/watchkit/">设计资源</a>(需要开发者账户才能下载),其中包括了大量的PSD与Sketch模板,在诸如布局、按钮、字号、列表等方面提供了详细的信息,值得你花时间去学习。</p> <p><img alt="01-c-design-for-apple-watch-soundwave-app.png" src="/sites/default/files/images/201505-1/01-c-design-for-apple-watch-soundwave-app.png" style="width: 600px; height: 322px;" /></p> <h3> 2.简化的人机交互</h3> <p>大约从2013年开始,UI设计领域风云突变,长久以来,iOS应用过度拟物化的视觉风格逐渐趋向简洁和平面化,字体、配色、间距、材质等要素的运用开始以内容为核心,起到沟通与支持的作用,而非过去那样扮演着装饰品的角色。设计师们开始关注动效与转场的运用方式,力求使体验更加自然顺畅。</p> <p>Apple Watch也不例外,甚至更进一步的完全聚焦在简化的界面元素及细微的交互方式上,目标是使用户在几秒之内就能完成常见的简单任务,而不会被任何不必要的界面元素所干扰。同时,目前的Watch在技术与设计框架方面的局限使得我们没有太多的空间去尝试高度定制化的动效与转场效果 - 一方面,这种局面必定会随着设备的不断成熟而改变;另一方面,对于新设备类型而言,在初代进行必要的约束其实是好事,这使得设计师们在面对Watch这样的新平台时,必须将注意力聚焦在最简单最直接的体验模式上,让用户付出最小成本即可快速完成Watch使用场景中的那些典型任务。</p> <p>在设计Soundwave时,我们时刻记得这一点,并确保每个任务都可以通过两三个点击来完成。</p> <h3> 3.有效的使用动效</h3> <p>合理的动效可以体现出UI元素的交互特性,使产品的功能机制更加显而易见,帮助用户有效的完成任务。</p> <p>独特而微妙的动效还能给产品带来一定的愉悦性。最近,我发现自己越来越多的在Twitter中点击&ldquo;favourite&rdquo;按钮。回想起来,应该是从他们重设计了按钮动效之后才开始的。与过去那种简单的状态切换不同,现在的星星图标在点击时会伴随着小小的弹跳动效。虽然从功能角度讲,这没有任何的实际意义,但它确实在细节当中提升了产品的愉悦性,使功能更具情感上的亲和力。</p> <p><img alt="01-design-for-apple-watch-soundwave-app.png" src="/sites/default/files/images/201505-1/01-design-for-apple-watch-soundwave-app.png" style="width: 354px; height: 63px;" /></p> <p>与面向iOS进行设计时有所不同,如今设计师不仅要设计动效,而且要负责实现 - 除非Apple将来为Watch开放CoreAnimation,否则开发者们只能像当前这样通过设计师提供的一整套图片序列来构建动效。我个人来说,仍是使用After Effects来设计动画,然后逐帧导出一整套PNG图片,最终构成每秒30帧的动效。</p> <p>下面简单介绍一下我是怎样使用After Effects导出静态图片素材的。</p> <p>首先在Composition中选择&ldquo;Add to Render Queue&rdquo;:</p> <p><a href="/sites/default/files/images/201505-1/02-design-for-apple-watch-soundwave-app.png" rel="lightbox"><img alt="02-design-for-apple-watch-soundwave-app.png" src="/sites/default/files/images/201505-1/02-design-for-apple-watch-soundwave-app.png" style="width: 600px;" /></a></p> <p>选择&ldquo;Lossless&rdquo;,唤出&ldquo;Output Module Settings&rdquo;:</p> <p><a href="/sites/default/files/images/201505-1/03-design-for-apple-watch-soundwave-app.png" rel="lightbox"><img alt="03-design-for-apple-watch-soundwave-app.png" src="/sites/default/files/images/201505-1/03-design-for-apple-watch-soundwave-app.png" style="width: 600px;" /></a></p> <p>将格式由&ldquo;Quicktime&rdquo;改为&ldquo;PNG Sequence&rdquo;:</p> <p><a href="/sites/default/files/images/201505-1/04-design-for-apple-watch-soundwave-app.png" rel="lightbox"><img alt="04-design-for-apple-watch-soundwave-app.png" src="/sites/default/files/images/201505-1/04-design-for-apple-watch-soundwave-app.png" style="width: 600px; height: 337px;" /></a></p> <p>将通道由&ldquo;RGB&rdquo;改为&ldquo;RGB + Alpha&rdquo;:</p> <p><a href="06-design-for-apple-watch-soundwave-app.png"><img alt="06-design-for-apple-watch-soundwave-app.png" src="/sites/default/files/images/201505-1/06-design-for-apple-watch-soundwave-app.png" style="width: 600px; height: 337px;" /></a></p> <p>最后,确保取消勾选&ldquo;Use Comp Frame Number&rdquo;,使导出的PNG图片能够自动以从0开始的序数来命名,而不是它们在时间轴上显示的名字。最终的图片文件命名应该类似&ldquo;filename_0&rdquo;、&ldquo;finename_1&rdquo;这样。</p> <h3> 4.内容是关键</h3> <p>这个标题到处都能看到,确实。但在为Apple Watch进行设计时,这几个字简直是福音。不妨看看现在那些官方和第三方的Watch应用,它们都有一个共同的特征,就是只显示在当前情境中最为重要和关键的信息,使用户简单瞥上一眼即可获取。即便是像Instagram和Twitter这些包含着大量、丰富的图文内容的产品,在Watch上也浓缩成最简单最基础的图文格式。</p> <p>我们在设计Soundwave时也采用着同样的方式,只在时间轴上显示专辑封面、乐手及歌名,而最主要的CTA(Call To Action)就是点击一首歌查看它正在哪里被播放,附带两个操作,一是播放一是喜欢,就这么简单。</p> <h3> 5.打造无缝体验</h3> <p>我们都知道目前的Watch应用都不是独立存在的。Watchkit是iOS应用的一种扩展模式,当前Watch应用的本质仍是iOS应用的扩展。我们在Watch上完成一些基础的、最符合Watch使用情境的任务,而将更为复杂的、需要用户付出更多注意力及时间的内容与功能留给iPhone。对Watch与iPhone的协作机制及生态形式了解透彻,在Watch上打造具有&ldquo;增强&rdquo;和&ldquo;补充扩展&rdquo;性质的功能,切勿将iPhone版本里的功能粗暴的复制到Watch上面来。</p> <p>Watch上的通知(Notifications)是个不错的例子。在我们的产品里,当用户从朋友那里收到了一首歌,Watch会向用户推送Notification,其中的Long Look模式包含两个功能:回复(通过听写)和&ldquo;喜欢这首歌&rdquo;,当然还有系统提供的Dismiss。更重一些的功能,譬如复杂的内容回复,或是向朋友分享一首歌作为回馈,则经由Handoff功能在iPhone上完成。用户在iPhone锁屏界面左下角可以看到Soundwave的Handoff图标,向上滑动就可以直接进入app当中进行相关操作。</p> <p><img alt="07-design-for-apple-watch-soundwave-app.png" src="/sites/default/files/images/201505-1/07-design-for-apple-watch-soundwave-app.png" style="width: 600px; height: 450px;" /></p> <h3> 小结</h3> <p>为Apple Watch设计应用的过程对我们来说是非常有意思的经历。不久之后,随着用户实际上手使用Watch版的Soundwave,我们便能了解到更多真实的反馈,从而进行更有针对性的迭代、验证、再迭代、再验证。</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></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/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/184" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch应用设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/148" typeof="skos:Concept" property="rdfs:label skos:prefLabel">智能手表</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 02 May 2015 05:48:39 +0000 C7210 701 at http://www.beforweb.com http://www.beforweb.com/node/701#comments 案例学习 - 为Apple Watch简化现有产品的设计思路 http://www.beforweb.com/node/709 <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-watch-watchkit-app-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周六晚间,木头的小床头桌,上面有一个2009年买的宜家闹钟,方方正正的,顶上一个条状的大按钮,平时按一下屏幕会有背光,闹钟响起时看都不用看直接伸手随便一拍就能拍到然后闹钟停止,好棒的设计。那些年习惯给它定好夜里3点闹一次,为的是醒来发现还有那么长时间可以睡,徒增幸福感。</p> <p>前面在朋友圈看到一篇摄影师跟拍无人领养的喵汪被安乐死的文章,如鲠在喉,心里剜着的那么难受。只代表我自己,做出一些微不足道的呼吁:如果哪位朋友有养喵养汪的打算,并且生活状况确实允许长期守护,还请以领养代替购买;它们当中有太多,平白无故就等待着被人类终结生命。</p> <p>自从2006年开始养喵,整个人从过去无所顾忌无心无虑,到如今对家庭卫生环境细节神经质一般的维护以及对外面喵汪的关注,自己回头看看,也是百感交集。我好希望自己死后能化作某种,能够在冥冥之中守护所有这些小动物的,存在,让这些单纯而美好的生灵在这个世界上自然的发展着,而不被人类这种丑陋的物种伤害。</p> <p>说正事吧。最近一两周陆续看到一些实实在在的Watch app设计案例文章,而不是过去那些概念设计或是臆想,于是想要拿来一些做掉译文。今天是第一篇,希望接下来还会多做些。下面进入译文。</p> <p>英文原文:<a href="https://medium.com/@GeocachingDesign/4-ways-we-simplified-our-app-for-the-apple-watch-1699c2ebfb03">4 Ways we Simplified Our App for the Apple Watch</a> By&nbsp;by <a href="https://medium.com/@bluespacemonkey">Michelle Li</a> and <a href="https://medium.com/@abbydeering">Abby Deering</a></p> <!--break--><blockquote> <p>&ldquo;优秀的设计师会对新的设计方式有所预见并做好充分的准备,而不只是被动的响应与跟从。&rdquo; - David Hoang</p> </blockquote> <p>我们的团队决定在Apple Watch正式发售之前就对我们的Geocaching(<a href="http://site.douban.com/150361/widget/notes/7620251/note/209118580/">地理藏宝</a>)app进行新平台的重设计工作,以下就是我们在此期间学到的东西,特此分享给大家。</p> <h3> 为什么?怎样做?</h3> <p>首先我们问自己,为什么要面向Apple Watch重新设计我们的产品?怎样做才能充分利用Watch的平台特性为我们现有的iPhone版产品提供体验上的补充与增强?</p> <p>地理藏宝是一种在现实当中随时随地可以进行的探险游戏,用户(玩家)可以藏宝或通过导航工具进行寻宝。很多时候,为了寻找一个藏宝点,我们必须徒步爬山;这种情况下真的不愿也不便去把手机或其他导航工具从口袋甚至是背包当中翻出来并一直实时的查看距离藏宝点还有多远。在地理藏宝活动中,类似这样的场景还有很多,所以我们认为Geocaching app与Apple Watch这样的可穿戴设备简直就是天作之合。</p> <p>想清楚了&ldquo;为什么&rdquo;,我们便更加自信的投入到工作流程当中,为这款我们都不曾亲身使用过的小设备进行产品设计探索。接下来便是&ldquo;怎样做&rdquo;的问题了。</p> <h3> 1.简化现有功能</h3> <p>正如<a href="http://beforweb.com/node/596" target="_blank">Apple Watch界面设计规范</a>所说,Watch应用是对iOS应用的补充。轻量化的界面形式,简单快捷并与场景紧密相关的功能形式,这些都是Watch应用产品的重要特质。以此为原则,我们从现有的iPhone版产品中识别出了一些最适于在Watch平台上为用户提供优质体验的关键功能。</p> <p>我们决定从最基本也是最常用的导航功能入手,例如罗盘功能的呈现方式,以及怎样显示相关的内容,譬如最近的寻宝活动动态。此外,基于之前的用研结果,我们明白其实很多用户愿意在自己有片刻时间需要打发的时候玩玩低成本的寻宝游戏,所以我们决定在Watch上为用户显示与其所在位置距离最近的藏宝点,使他们不用掏出手机就能很便捷的了解周围是否有适合自己快速参与的活动。</p> <p><img alt="01-apple-watch-product-ux-design.jpg" src="/sites/default/files/images/201504-4/01-apple-watch-product-ux-design.jpg" style="width: 600px; height: 341px;" /></p> <h3> 2.简化内容形式</h3> <p>在iPhone版的Geocaching当中,用户可以在Activity里查看有哪些人找到了宝藏,以及寻宝过程中的故事;但在实际使用当中,这里对用户来说更重要的是了解那些没能找到宝藏的信息,也就是我们所说的DNF(Did Not Find)。所以我们决定在Watch上突显DNF信息,将内容数量缩减为最近的5条,并移除相关的故事内容。此外我们还为DNF使用了不同的字色,使其在视觉上更加突出,用户简单一瞥即可获取信息。</p> <p><img alt="02-apple-watch-product-ux-design.png" src="/sites/default/files/images/201504-4/02-apple-watch-product-ux-design.png" style="width: 600px; height: 302px;" /></p> <h3> 3.简化图标形式</h3> <p>过去几年里,Geocaching app扩展到了很多不同的平台。大约在一年前,我们也发了Android版本。我们在创建品牌规范时没有考虑到将来多种平台的状况,随着时间的推移,产品在品牌识别和设计语言方面的问题越发突显。最近,我们已经开始着手在这方面进行统一和规范,首先要解决的就是界面视觉设计方面的一些问题。借着为Apple Watch进行设计的契机,我们决定对界面中的图标进行一轮简化工作。</p> <p>我们一直以来所使用的图标太过复杂,无论样式还是尺寸都不适于在Watch上快速传达信息。所以我们抛弃了之前的矢量图风格,取而代之的是更加简约、表意更清晰的线形风格。此外,过去的图标会根据内容数值的不同而动态变化,相应的素材数量及维护成本也极大的提升;这次我们在Watch上取消了这一设计,统一使用一套图标,既降低了管理难度,也便于用户识别与记忆,无需在短小的互动过程中再付出不必要的认知成本。</p> <p><img alt="03-apple-watch-product-ux-design.png" src="/sites/default/files/images/201504-4/03-apple-watch-product-ux-design.png" style="width: 600px; height: 74px;" /></p> <h3> 4.简化配色方案</h3> <p>我们现在的UI配色对于Apple Watch的黑色边框及背景来说太浅了。因为我们最近也在考虑增加一些新的、更具对比度和识别性的配色,所以这次正好进行尝试。</p> <p>在我们最近的一次可用性测试当中,很多用户下意识的会将绿色与我们的产品关联在一起,于是我们决定将绿色定义为我们的品牌关键色。</p> <p>此外,前段日子我们有幸能进入Apple的实验室来封闭测试自己的设计方案。在测试过程中,我们发现新的配色方案在易读性方面仍有提升空间,于是进一步的提升了一些关键色的亮度,使其与San Francisco字体及黑色背景搭配起来的对比度更强,更便于快速获取信息。</p> <p><img alt="04-apple-watch-product-ux-design.png" src="/sites/default/files/images/201504-4/04-apple-watch-product-ux-design.png" style="width: 435px; height: 469px;" /></p> <h3> 设计上的局限</h3> <p>在为Watch设计的过程中,我们遇到了一些意料之外的局限性问题。譬如在Glance方面,我们希望它能基于不同的状态以不同的形式呈现内容。我们需要三种视图模式,包括导航模式、呈现附近宝藏的模式以及附近没有宝藏时的空状态模式。苹果官方提供了很多<a href="https://developer.apple.com/watchkit/">设计资源</a>,包括大量的Glance模板,但难点在于怎样通过一款模板来实现不同的视图需求。我们最终选择了提供两个分组容器的Glance模板,以获取最大程度的灵活性。</p> <p>Apple仅向第三方产品提供静态地图,这也给我们造成了很大的局限。Geocaching本是一种对地图有重度依赖性的产品,因为用户要随时了解自己所在的位置以及目标宝藏的地点。作为替代方案,我们一方面提供着静态地图,一方面也设计了罗盘视图,帮助用户随时随地进行实时导航。要实现罗盘视图也不容易,我们不能利用iPhone上的罗盘功能来获取数据,因为在实际情境中,iPhone还呆在用户的口袋里,不可能保持水平姿态。所以我们只能基于用户前进的方向与宝藏地点之间的相对关系来变相的实现罗盘功能。</p> <p><img alt="05-apple-watch-product-ux-design.png" src="/sites/default/files/images/201504-4/05-apple-watch-product-ux-design.png" style="width: 411px; height: 457px;" /></p> <h3> 接下来?</h3> <p>虽然有机会去苹果的实验室来测试产品,但遗憾的是不能把Watch带出来到寻宝的实境当中进行测试。我们计划在拿到预订的Watch之后立刻进行可用性测试,看看真实用户在实际活动中使用新平台产品的情况,然后我们会根据他们的反馈及统计数据尽快迭代出下一个版本。</p> <p>我们还会继续探索静态地图的运用方式,譬如看看有没可能将它链接到Apple自带的地图app。不过可以预计的是,在很长一段时间内,用户还是要依赖罗盘功能进行导航,所以我们会将它作为接下来迭代工作的重点,探索各种提升体验的可能性。</p> <p>在所有这些事情之前,我们能做的就只有急切的盼望着Watch能尽快发货到我们手中了。</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></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/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/171" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/184" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple Watch应用设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/148" typeof="skos:Concept" property="rdfs:label skos:prefLabel">智能手表</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 25 Apr 2015 12:14:04 +0000 C7210 709 at http://www.beforweb.com http://www.beforweb.com/node/709#comments