为SOUNDWAVE设计WATCH应用时学到的五个技巧

   Soundwave已经在iOS及Android平台上发展了将近两年。我(英文原文作者)最近有幸得到机会,能够为Apple Watch版本的Soundwave进行UI与交互设计,使其成为4月24日之后Watch平台上的首批第三方应用之一。

  为Apple Watch这样的新平台设计app,这对于我们的设计与开发团队来说都是绝佳的学习机会。作为设计师,我在这个过程当中学到了一些很关键的东西。

  一、学习设计规范

  官方的 Apple Watch人机界面设计规范 很严格。其实iOS版本的也是如此,只是这么多年下来,随着iOS设备及app市场的越发成熟,设计师们时常需要花很多时间去探索规范之外的那些更加独特、更加定制化的设计模式。而现在,在新平台刚刚问世的阶段,我们无需,也不能进行大范围的探索 – 不妨利用节省下来的大把时间去仔细学习和理解官方的设计规范,看看作为设计师,在新平台框架的约束下能利用哪些模式实现怎样的方案,又有哪些iOS设计思路是无法运用到Watch上的 – 否则,你将发现自己需要花费大量时间去返工修改方案才能使其被开发出来。

  好消息是,配合着设计规范的内容,Apple官方提供了一套非常全面的设计资源(需要开发者账户才能下载),其中包括了大量的PSD与Sketch模板,在诸如布局、按钮、字号、列表等方面提供了详细的信息,值得你花时间去学习。


  二、简化的人机交互

  大约从2013年开始,UI设计领域风云突变,长久以来,iOS应用过度拟物化的视觉风格逐渐趋向简洁和平面化,字体、配色、间距、材质等要素的运用开始以内容为核心,起到沟通与支持的作用,而非过去那样扮演着装饰品的角色。设计师们开始关注动效与转场的运用方式,力求使体验更加自然顺畅。

  Apple Watch也不例外,甚至更进一步的完全聚焦在简化的界面元素及细微的交互方式上,目标是使用户在几秒之内就能完成常见的简单任务,而不会被任何不必要的界面元素所干扰。同时,目前的Watch在技术与设计框架方面的局限使得我们没有太多的空间去尝试高度定制化的动效与转场效果 – 一方面,这种局面必定会随着设备的不断成熟而改变;另一方面,对于新设备类型而言,在初代进行必要的约束其实是好事,这使得设计师们在面对Watch这样的新平台时,必须将注意力聚焦在最简单最直接的体验模式上,让用户付出最小成本即可快速完成Watch使用场景中的那些典型任务。

  在设计Soundwave时,我们时刻记得这一点,并确保每个任务都可以通过两三个点击来完成。

  三、有效的使用动效

  合理的动效可以体现出UI元素的交互特性,使产品的功能机制更加显而易见,帮助用户有效的完成任务。

  独特而微妙的动效还能给产品带来一定的愉悦性。最近,我发现自己越来越多的在Twitter中点击“favourite”按钮。回想起来,应该是从他们重设计了按钮动效之后才开始的。与过去那种简单的状态切换不同,现在的星星图标在点击时会伴随着小小的弹跳动效。虽然从功能角度讲,这没有任何的实际意义,但它确实在细节当中提升了产品的愉悦性,使功能更具情感上的亲和力。


  与面向iOS进行设计时有所不同,如今设计师不仅要设计动效,而且要负责实现 – 除非Apple将来为Watch开放CoreAnimation,否则开发者们只能像当前这样通过设计师提供的一整套图片序列来构建动效。我个人来说,仍是使用After Effects来设计动画,然后逐帧导出一整套PNG图片,最终构成每秒30帧的动效。

  下面简单介绍一下我是怎样使用After Effects导出静态图片素材的。

  首先在Composition中选择“Add to Render Queue”:


  选择“Lossless”,唤出“Output Module Settings”:


  将格式由“Quicktime”改为“PNG Sequence”:


  将通道由“RGB”改为“RGB + Alpha”:


  最后,确保取消勾选“Use Comp Frame Number”,使导出的PNG图片能够自动以从0开始的序数来命名,而不是它们在时间轴上显示的名字。最终的图片文件命名应该类似“filename_0”、“finename_1”这样。

  四、内容是关键

  这个标题到处都能看到,确实。但在为Apple Watch进行设计时,这几个字简直是福音。不妨看看现在那些官方和第三方的Watch应用,它们都有一个共同的特征,就是只显示在当前情境中最为重要和关键的信息,使用户简单瞥上一眼即可获取。即便是像Instagram和Twitter这些包含着大量、丰富的图文内容的产品,在Watch上也浓缩成最简单最基础的图文格式。

  我们在设计Soundwave时也采用着同样的方式,只在时间轴上显示专辑封面、乐手及歌名,而最主要的CTA(Call To Action)就是点击一首歌查看它正在哪里被播放,附带两个操作,一是播放一是喜欢,就这么简单。

  五、打造无缝体验

  我们都知道目前的Watch应用都不是独立存在的。Watchkit是iOS应用的一种扩展模式,当前Watch应用的本质仍是iOS应用的扩展。我们在Watch上完成一些基础的、最符合Watch使用情境的任务,而将更为复杂的、需要用户付出更多注意力及时间的内容与功能留给iPhone。对Watch与iPhone的协作机制及生态形式了解透彻,在Watch上打造具有“增强”和“补充扩展”性质的功能,切勿将iPhone版本里的功能粗暴的复制到Watch上面来。

  Watch上的通知(Notifications)是个不错的例子。在我们的产品里,当用户从朋友那里收到了一首歌,Watch会向用户推送Notification,其中的Long Look模式包含两个功能:回复(通过听写)和“喜欢这首歌”,当然还有系统提供的Dismiss。更重一些的功能,譬如复杂的内容回复,或是向朋友分享一首歌作为回馈,则经由Handoff功能在iPhone上完成。用户在iPhone锁屏界面左下角可以看到Soundwave的Handoff图标,向上滑动就可以直接进入app当中进行相关操作。


  小结

  为Apple Watch设计应用的过程对我们来说是非常有意思的经历。不久之后,随着用户实际上手使用Watch版的Soundwave,我们便能了解到更多真实的反馈,从而进行更有针对性的迭代、验证、再迭代、再验证。

时间: 2024-10-18 13:15:19

为SOUNDWAVE设计WATCH应用时学到的五个技巧的相关文章

当设计消息队列时我们关心什么

应用消息队列可以对系统进行解耦,流量削峰,在分布式系统设计中,消息队列是重要的组件之一. 在开发中应用过ActiveMQ,kafka等mq,不过对消息队列背后的实现原理关注不多,其实了解消息队列背后的实现特别重要, 比如对一致性等实现的关注,可以帮助我们在开发中避免踩坑,规避问题的出现.这篇文章简单探讨下当设计和实现一个消息队列时,我们需要关心哪些地方.   消息队列功能和特性 一个传统意义上的消息队列,需要支持消息的发送,接受和消息暂存的功能. 在实际应用中,对消息队列的要求远不止于此,在不同

编程时学到的英语单词

编程时学到的英语单词 2015-09-02 学习openResty的时候,发现很多单词特别有意思.有些东西,是我们平常所用到的,但因为词汇量少的缘故所以很少使用. 1. We first create a separate directory for our experiments. You can use an arbitrary directory. Here for simplicity, we just use ~/work: mkdir ~/work cd ~/work mkdir l

15位科技大亨年轻时学到的重要教训

在20岁多岁时,我们多数人都在努力寻找未来的方向.犯错不可避免,但正是因为从这些挫折中汲取了教训让我们变得更加明智,才能保证我们后来取得真正成功.美国主流网络媒体BI采访了15位科技大亨和企业家,他们共享了自己年轻时学到的最重要的教训.(风帆) 马克·库班(Mark Cuban),<创智赢家>(Shark Tank)投资人与达拉斯小牛队老板:任何对个人成长的限制都是一种自我加强这位亿万富翁投资人进行过的最大交易就是1999年将自己的公司Broadcast.com以57亿美元价格卖给雅虎.在20

实战从需求文档到设计文档的书写规范(五)

配置ant运行cactus测试 类路径的设置 我们要按照下面的图设置客户端(ant junit任务中)设置classpath,并把右半部分所示的类放到服务器或者webapp的类路径上 文档到设计文档的书写规范(五)-技术文档书写规范"> 客户端cactus.properties 我们知道,cactus需要redirector 代理才能工作,我们除了把这些代理考到相应的webapp的类路径(对于filter和servlet代理)或webapp路径(对于jsp代理)外,我们还需要告诉客户端测试

选择托管数据中心时必问的五个问题

本文讲的是选择托管数据中心时必问的五个问题[IT168 专稿]在高科技公司正试图在数据中心的设计和能源效率方面超越其他的公司的时候,小型企业却面临着如何选择托管数据中心的难题,把公司的数据和有价值的资料托管出去之前,需要做一个额外的调查,并且要了解他们的客户服务置信水平. 一个企业业务的增长可能需要数据中心的支持,但是有些事情必须在签订托管合同之前弄清楚,包括一些安全.紧急备份.成本方面的问题. 1.你的物理设施有多安全? 这个问题的答案可以和白纸或者SANS研究所的数据中心清单一样长.物理安全

站长做网站时容易走进的五个心态误区

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 自2011年以来,中国互联网用户又创出新高,用户数量呈不断升高的趋势,站长这一大的群体也不断的在壮大,越来越多的年轻人选择把网站作为了自己的梦想.做网站可以给我们带来了盈利,还可以带来个人成就和个人价值感.可以带来很多成功的机会,更能学到很多的东西.在起步之初,对于新站长来说,看到前辈们创造了这么多的网络奇迹,心中肯定会有很多的憧憬,但是有可

看电影时禁止打扰!风行使用小技巧

风行网络电影是一款集下载.点播于一体的网络影视播放平台,使用风行即可以实现BT高速下载,又能够实现边下边看,只需短暂的缓冲就可以在线点播网络电影,笔者在使用过程中发现了一个看电影时不被打扰的使用技巧,下面与大家一起分享. 大部分人为了保护显示器,一般都设置了屏幕保护程序,有的人甚至设置了关闭显示器与休眠的时间等,这样在你设置的时间里,如果没有人操作电脑,显示器就会自动进入屏幕保护.关闭显示器或进入休眠状态,达到保护显示器的目的. 但是当你在使用风行欣赏精彩电影的时候,如果电脑会自动进入屏幕保护程

从零开始学Xamarin.Forms(五) 技巧

原文:从零开始学Xamarin.Forms(五) 技巧        由于HTML5规范于2014年10月终于定稿,公司.net开发人员较少,国内外已有了较为成熟的UI框架.手机软件硬件的快速发展等等原因,所以我就不打算再使用Xamarin了,而是采用HTML5+CSS3+Javascript的方式来进行跨平台的开发.之前在探索Xamarin中积累了一些小经验也同时分享给大家,希望能给大家带来帮助. 1.TabbedPage中嵌入NavigationPage,NavigationPage中的Ro

10天学安卓-第五天

原文:10天学安卓-第五天 经过前几天的练习,相信大家已经对如何做出一个简单的界面有了初步的了解,并且已经做出来一个还不错的天气列表了. 今天大家稍事休息,要练习的内容比较少,着重学习一些理论知识,先理清几个概念. Android系统架构 Android系统本质上是Linux系统,但相对于Linux系统,主要在驱动.性能.内存管理.设备管理等一些部分做了比较多的改动,以更适用于移动设备. 从上图可以看到,Android系统架构为四层,分别是Linux内核.系统运行库.应用程序框架以及应用层,每一