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

相关推荐

  • 交互动画设计案例—1688首页动效

    随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在…

    2015-04-24
  • [自译]Medium的Title,Subtitles&Headings的改进介绍

    我们的目标是创造一个能够提供最佳写作体验的空间,让故事的讲述者能够触及到他们的听众。现在,我们很高兴地展示我们在标题方面的提升,这个改变微小而又重要,我们认为你每次在发布文章后,都会会欣赏它。

    2016-08-10
  • [译]UX设计之复选框和开关按钮

    当设计表单时,交互设计师常常不得不面对一个问题,就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然,我们都有可能遵循某种既定的规则。无论如何,在做出这个选择时我们都应该牢记…

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

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

    2016-07-14
  • 交互案例:文件下载过程中的细节问题

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

    IxD案例 2017-03-21
  • 【交互设计】【装置艺术】传统昆曲与数字视觉的结合

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

    2018-04-17
  • 分享:神级广告,100人同时交换名片~

    100人如何同时交换名片?

    IxD案例 2016-06-16
  • 移动端搜索功能研究

    搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些对应的设计方法。 搜索能够帮助用户快速精确找到想要的结果,其中两个重要目标是提高搜索结果…

    2016-10-28
  • Apple Watch APP设计第一课:了解Apple Watch视觉和设计原则

    在我们可以开始设计一个Apple Watch应用之前,要先理解其背后的视觉和设计原则。Apple Watch有三个重要主题:个人,整体,轻量级。如果想设计一个具有惊奇体验的应用,还有一个你应该考虑但苹果公司没有提及的,即 …

    2015-09-29
  • 如何写一份出色的交互设计文档,给程序员以美的享受?

    交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

    2016-07-11