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

相关推荐

  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • 5步快速制作移动动效

    Sketch+Keynote双剑合璧:5步快速制作移动动效 2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移动动效提升到了app基础体验环节的高度。…

    2015-04-11
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • Smartisan OS v3.1.0 功能列表(M1 / M1L),创新交互设计“One Step”与“Big Bang”变革安卓阵营。

    本次更新主要增加了两大重磅功能“One Step”与“Big Bang”,前者将常用的点击与分享操作放置于边栏,快捷切换与分享,快人岂止一步;后者可以将大面积按压下的文字区域,智能拆成字和词,你可以自由选择与搭配,同时…

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

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

    2016-07-11
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • 蜕变.进化——百度云Android端7.0项目总结

    项目背景: 百度云面世之初是一款网盘类产品,以安全、稳定、易用、快速的体验著称,经历近两年时间的升级优化,百度云已不仅仅只是“网盘”了,在慢慢的朝着平台化的方向不断发展。 旧版的Android客户端随着每一次版…

    2015-03-18
  • QQ空间是怎么设计直播功能的?

    什么?空间也做直播了!没错,在当今直播的热潮下,国内外的直播产品大都是基于陌生人的关系链,且内容结构与视觉效果同质化严重。如何让用户更好的分享生活?如何为用户提供差异化的内容消费?如何给用户更多新鲜趣味的互动玩法?这是我们做直播希望解决的问题。
    Qzone依托自身优势,另辟蹊径地发掘基于好友关系链的直播场景。与此同时,我们不断探索更符合空间用户直播的设计形态,发掘与竞品的差异点,寻找直播的下一个突破口,通过系统化的设计,为用户提供非一般的直播体验。

    2016-07-27
  • 手游《纪念碑谷》交互设计特点分析

    关键词: 1. 节奏的控制 2. UI的APP化 1、节奏的控制 1) 纪念碑谷为什么慢节奏? 首先解释下本游戏的玩法:玩家探索建筑(迷宫)的路径,走到终点即可通关。玩家需要寻找并使用机关、旋转建筑、移动人物、运用NPC。这…

    IxD案例 2015-08-27