APPLE WATCH案例学习!

4-apple-watch-interaction-practice-1

编者按:这篇实战的对象是Wallaby,一款个人财务APP,文章总结了四点经验:导航、通知、复杂任务以及动效。每个方面都有需要注意的问题和对应的解决方法,进入译文 >>>

Wallaby是一款个人财务app,可以在你购物时根据不同的场所帮你选择最适合的信用卡进行付款,以最大程度的获取优惠或积分。不过根据我们的了解,在实际当中,很多用户在结账时常常忘记或懒得把手机拿出来使用Wallaby提供的功能。

我们希望Apple Watch版本的Wallaby能从一定程度上解决这一问题。其实在这之前,我们已经打造过Pebbel、Android Wear、Samsung Galaxy Gear甚至是Google Glass的版本了,所以对于哪些功能更适用于可穿戴设备还是比较清楚的。

本质上讲,为可穿戴设备进行设计的关键在于情境及人机互动效率。而Apple Watch的一些重要特性,包括超小的屏幕尺寸、始终位于腕上、多样的交互方式等等,又使得我们在设计的过程中学到了很多新东西,包括新的设计范式,以及怎样解决新的UX设计挑战。

导航

目前,Apple Watch只提供了两种导航模式:层级式和页面式。

层级式导航适用于功能和数据较为复杂的产品。如果需要层层递进的访问某些功能或内容,这种导航模式显然再适合不过。而页面式的导航则更加适用于那些信息模型相对简单、不同模块之间不存在直接数据关联的产品。

我们为Wallaby使用了页面式导航。从信息结构的角度讲,每个功能模块之间并没有很强的关联性,也没有太多层级化的内容,不需要通过层级式导航进行组织;从交互的角度来看,在页面式导航的框架下,通过左右轻扫就可以在不同的功能模块之间切换,在“Nearby”模块中上下轻扫或滚动表冠就可以查看适用于附近购物场所的信用卡,人机互动效率很高,无需像层级式导航那样迫使用户必须精准的点击某个微小的按钮才能进一步访问内容。特别是在Wallaby的典型使用情境下 – 在用户站立和走动的过程中 – 这两种导航模式带来的交互成本的差异还是很明显的。

01-design-for-apple-watch-app-navigation-animation-notification

通知

如果设计的得当,使App能够在正确的时间和地点向用户发送正确的通知消息,你的产品将有可能从平凡走向成功 —— 对于Watch应用来说更是如此。

Watch始终被用户戴在手腕上,人机之间的距离相比以往的设备来说更近一步,所以你必须对通知机制有所限制,确保只发送那些最重要、最符合情境的信息,而且要以尽可能简短的形式来呈现 —— 否则将会对用户产生持续而严重的干扰,使他们不得不彻底屏蔽掉来自你家产品的通知信息。

Wallaby目前只将通知限制在一些重要事件上,例如告知用户今天有某张卡片提供打折活动,以及账单和年费信息等。将来,随着Watch自身硬件能力的不断提升,我们将有可能在不消耗过多Watch和iPhone电量的前提下精准的获取用户所在的位置,届时我们就可以在用户进入某家商店或卖场的时候即时发出通知,让他们知道哪些信用卡适合在那里消费,使用户无需自主发起查询便可以获取最适合当前情境及行动目标的信息。

02-design-for-apple-watch-app-navigation-animation-notification

复杂任务

涉及到太多输入和设置的复杂任务,本质上并不适合在Watch这样屏幕尺寸极小、操作难度较大的设备上完成。

对于这类功能,在iPhone上进行操作更加合理。为了确保多设备之间的无缝体验,我们利用了iOS提供的Handoff功能。

当我们需要用户来完成那些较为复杂的任务时,例如创建账户、获取授权、连接银行数据等等,我们会在显示一条消息,告诉用户接下来的操作需要在iPhone当中进行。当他们打开iPhone时,界面会自动切换到相关的流程当中,继续之前在Watch上中断的步骤。

03-design-for-apple-watch-app-navigation-animation-notification

动效

精美入微、表意恰当的动效可以提升交互体验,增强产品的愉悦性。我们平时会使用Framer来制作交互原型并调试动效的各种属性。

04-design-for-apple-watch-app-navigation-animation-notification

需要注意的是,为Watch应用制作动效时,你不能像从前那样依赖于开发人员通过代码来完成 —— Watch中的动效是通过图片序列来构建的,但你同样不能把GIF动画丢给开发人员去放到界面当中。作为设计师,你必须为动画的每一帧提供一幅静态图片。

最有效的方法是将动画文件导入After Effects或Photoshop,然后导出图片序列。下面大致描述一下我们在Photoshop当中的操作方法:

1.在Photoshop中打开GIF或导入MOV文件。

2.如果需要的话,对动画的帧率进行调整。

3.选择“File – Export – Render Video”

05-design-for-apple-watch-app-navigation-animation-notification

4.进行命名等设置,确保图片序列从序数“1”开始。点击Render按钮后,Photoshop便会将动画逐帧分解并保存为指定格式的图片。

06-design-for-apple-watch-app-navigation-animation-notification 07-design-for-apple-watch-app-navigation-animation-notification

5.你可以使用TinyPNG或ImageOptim一类的工具对这些图片进行优化,确保文件不会很大。

08-design-for-apple-watch-app-navigation-animation-notification

最后再帮开发人员一个忙,为这些文件增加@2x后缀;如果文件太多,建议使用Automator一类的工具来完成:

打开Automator,选择“Service”。

09-design-for-apple-watch-app-navigation-animation-notification

将需要重命名的文件拖进来。

10-design-for-apple-watch-app-navigation-animation-notification

选择“Files & Folders”,双击“Rename Finder Items”,会出现对话框询问你是否为每张图片添加一份副本以便保护原始文件的命名方式。你可以选择不添加副本,点击“Don’t Add”。

11-design-for-apple-watch-app-navigation-animation-notification

在下拉列表中选择“Add Text”,填写“@2x”,选择“after name”作为插入位置。

12-design-for-apple-watch-app-navigation-animation-notification

最后,点击右上角的“Run”按钮,搞定。

小结

为Apple Watch进行设计的过程很有意思。目前我们在设计方面受到的制约确实很多,不过从另一个角度看,这也使得我们必须将注意力聚焦在最核心的体验上,打造最基本最简化的界面及交互流程,并基于自己产品的特性来设计最符合情境的通知机制。如果涉及到较为复杂的功能,要考虑通过Handoff配合iPhone来完成。此外,也不要忘记在恰当的地方通过合理的动效来提升产品的交互体验。
本文来自:Be For Web

英文原文: medium.com/design-for-wearables

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/5675/

(0)
CatherineCatherine
上一篇 2015-05-19 23:22
下一篇 2015-05-22

相关推荐

  • 现在时隔半年,再次分析一下微信读书这个产品

    从15年8月28日 微信读书 APP低调上线到现在已经差不多快半年了,对于这款含着金钥匙出身的产品,一开始似乎并有多得到太多的好评,甚至因为 好友阅读排行 功能而受到很多争议。 现在时隔半年,我以一个普通读书爱好…

    2016-02-23
  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • 互动的未来不应只在手指上

    最近对未来交互设计发展的一个很流行的观点 — 用手指操作各种大大小小的触摸屏,下面还会有很多这种例子。这篇小文章并不涉及任何详细的“未来发展规划”, 我只是提供一些可供参考的点子。 在开始构想应该怎样同我们…

    2014-12-25
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • Axure RP 8.0 抽奖大转盘实例教程附.RP下载与视频演示

    原标题:【AxureRP8实现真正抽奖大转盘】 效果图: Demo地址:http://www.iaxure.com/share/luck/ (有广告) 视频: 实现过程: 1、生成一个0-360之间的随机数,保存至变量; 2、旋转转盘到达指定角度,案例中为3-…

    2015-08-24
  • 交互案例:文件下载过程中的细节问题

    细节思考是交互设计师的基本素养 今天给大家分享关于文件下载过程中所需要思考的细节问题 说到文件下载,就是下载前、下载中、下载后三种状态 可是三种状态不代表以上三张页面,还有背后种种的细节思考 首先,交互…

    IxD案例 2017-03-21
  • 走心的收纳设计

    走心的收纳设计

    IxD案例 2017-03-13
  • HoloLens 确炫酷狂拽屌炸天!另外,这不是VR!

    6月2日凌晨,有“互联网女皇”之称的Mary Meeker今天在美国Code大会上发布了2016年的互联网趋势报告。 (关注“艾欧交互设计”微信号:AioUED,回复“2016”可获取报告中英文版PDF下载链接) 作者:朱宏 链接:https://zh…

    2016-06-02
  • 【交互设计】【装置艺术】传统昆曲与数字视觉的结合

    ▼数字与戏曲在数字时代大势所趋的背景下,传统戏曲也进行了一些试探性的尝试。交互性能和身临其境成为了戏曲的一种新的模式。演员通过光影达到像素化的效果,圆滑光影与演员的冲突,减少真实与虚拟的隔阂。打造沉浸式的戏曲艺术。▼沉浸与交互数字技术润滑了装置与观众的联系,发挥更大的互动作用。利用空间互动装置设计,以评估演出、空间和观众之间的联系,从而为观众提供一种身临其境的体验。▼古典与未来昆曲是一种东方古典戏剧艺术形式。数字技术的使用可以带来一种新...

    2018-04-17
  • 我手机里的应用设计体验

    最近养成了一个习惯,看到手机应用的一些设计点,自己觉得好或者不好的时候就会截图下来,翻了一下手机已经存了一堆图片了,就干脆发出来吧。 应用更新通知弹窗 应用更新弹窗是几乎每个应用都会有的一个模块,但是…

    2016-06-27