恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
iWatch动效剖析
0.0°
2014-10-15 自译外文 经验/观点 原作者: Matias Kiviniemi 举报 7302 27 24 1

在观看Apple Watch的主题展示后,我们不得不惊讶于用户体验过程中iWatch所承载的大量动效。考虑到渲染效率和电量消耗,Apple Watch UI过分追求极简,甚至说缺乏视觉元素。因此,动效和转换就成为提升用户体验以及将此区分与一般手表的关键因素。此外我们还发现,除了几个“标准动效”,几乎每个界面的动效都是针对其特定的内容形式而设计,可以看出苹果在交互设计方面费了很多心思。

为了研究这些复杂的动效,我们把演示视频中的典型动效截取了下来。再此声明:在2015年Apple Watch正式发售之前,我们无法确定它们最终会是什么样子。

打开和退出App 


与iOS7的方式类似,交叉渐变的应用图标和界面同步放大,方形的表面和圆形的图标完美契合。值得注意的是,放大的应用图标,促使其他图标彼此逐渐远离,很像星球大战里超光速推进的效果(实现了“应用星系”这个概念)。

引发猜想的是,如果你点开的不是屏幕中央的应用图标,会怎样呢?这个图标会先移到屏幕中央然后再放大?还是直接从所在的位置放大?

退出和打开时相反,界面缩小淡出,所有临近的应用图标又汇集到一起。

 

接听来电 


接听电话很简单,不过仍然有大量的动态步骤:绿色的接听按钮缩小淡出,相同位置,静音按钮弹出放大,音量控制出现,通话提示的字符变为通话时间,底部的上拉提示条下移消失。值得注意的是,所有的元素都在切换,而且以各自的方式运作。

 

回复消息 


收到消息时,表盘界面向后淡出,带有发送人姓名的信息图表会间带轻微弹跳的自下而上的滑入界面。提示图标上移缩小,文本信息自下而上滑入界面。 

用户点击“回复”按钮后信息内容淡出,注意这里没有恢复原样,下页信息回复选项减淡切换弹出。 

用概念来论述这套动效实在复杂。收到消息提示后,让表盘界面模糊的淡出到后方有什么意义?选择回复时为什么要通过翻转的方式实现?也许信息提示属通知,而信息操作是另一个系统,分属于不同组合,相信会有看到更多这样有趣的例子。

查看日历

 

打开日历中的某一天操作简单,和安卓很相似。点击当前日期,指示符缩小淡出,日历界面向左滑出,行事表界面渐入。当前时间不发生任何变化,好像不属于这个界面似的。

无法确定的是点击不同日期会有什么反应体现在日期上。


删除邮件 


在某条邮件上向左侧轻扫,展开情境菜单。点击垃圾桶图标,使其高亮并缩小,然后恢复原样。这似乎和“点击推远”有些矛盾,不过这种淡出方式或许是考虑到图标已经很暗了。

点击垃圾桶图标之后,这条邮件会右移恢复原状,然后淡出,同时下方的邮件列表覆盖上来。或许这种模式在将来会成为内容列表上的标准行为?

健康

 

在健康应用中选择跑步,切换动效为两个过程。首先,被选中的跑步按钮会略微缩小并闪烁,作为对点击的响应;同时其他按钮会淡出消失。然后跑步按钮下滑至底部,同时变色、放大并改变标题为“开始”,在此过程中,其他内容元素依次淡入呈现;数字自下而上从某个隐藏的层面背后推滑入界面。

 

结论

 

设想我们看到的都会实现,那么能得到的结论就是Apple Watch尽可能的用到了很多动效。任何一个界面元素的运动总是伴随着滑动、放大缩小、渐入或淡出。也就是说,当前的风格是最有实现的可能的。每个动效都针对特定的时间、空间及上下文环境的,力求最准确的体现出特定情境中的交互。“情境化”是这里的关键,为了克服有限的屏幕尺寸,优化了每个单独的界面和切换动效,实现最合适的交互模式。如果和Android Wear进行比较,我们会发现它们的策略相当不同;Android Wear试图建立通过统一的纲领实现普遍适用的交互模式,但产生了更多繁冗的操作。

 

突出要点:

 

1.点击相应是多样的。通常会产生缩小效果,像是被按下去,但接下来可能会消失也可能会恢复原样。

 

2.动效是有针对性的不统一。同一个界面中的不同元素有各自的运作方式。

 

3.对称并不重要。新元素的进入与旧元素的离开方式不同,不过有时只是通过简单的交叉渐变来更替。

 

4.右上角的时间看来是最静态的元素。它出现在很多界面的相同位置,不过具体哪些界面需要显示时间,还没有明确的规则。

 

5.导航系统的设计原则不是很严格,譬如不同的界面中导航到下一级的方式有所不同。如果是底部有页码的界面,通常是通过左右滑动来浏览内容,而左上角有时也会被用作返回上级界面。这些也都不是100%确定的规则。

 

6.在滑动和放大/缩小时的加速功能看上去有正弦曲线的,急剧的加速和减速更像是指数函数曲线。

 

总而言之,Apple Watch打破了很多常规,也将要面对很多挑战。他们对动效的关注如此强烈以至于无法忽视。即使是最基本的滑动和淡出,哪怕只加入“一点点”,估计都很难。你可能需要耗尽所有来做好,然而真正有经验的设计师并不多。需要明确的目标和技术,不能有任何随意。只有通过大量的尝试和迭代,才能找到最合适的方式。

 

苹果所面临的挑战是该如何保持高品质。一方面,他们不能让Apple Watch存有那些糟糕的交互体验,另一方面他们又需要一些优秀的应用来实现智能手表的价值。也就是说苹果不需要十万款个当中有五千个Twitter客户端和各样的烂应用。他们只需要1000个独特个性的好应用。我能预测,Apple会提高门槛并且推出更严格的讲究用户体验的App审核规则。当然,纯属猜测,我们期待着几月之后官方发布真正的设计开发规范。

更新:2014-10-15

收藏

27人已收藏

Muselilys

Know your shabby.

  • 32

    作品

  • 501

    粉丝

  • 6

    关注

  • 设计师如何找到自己真正热爱的工作
  • 你的滚动条
  • Twitter设计总监谈“宏交互”
  • 乌托邦式UI构建者:Bret Victor
相关标签

    猜你喜欢

      2014-10-15 自译外文 经验/观点 原作者: Matias Kiviniemi 举报 7302 27 24 1

      iWatch动效剖析

      0.0°

      你确定要举报iWatch动效剖析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年10月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      24
      27
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录