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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Apple Watch动画分析
0.0°
2014-12-19 自译外文 规范/资料 原作者: Matias Kiviniemi 举报 5469 5 5 2

译者导语:

    所谓智能手表,就是内置智能操作系统、通过连接网络来实现多种功能的手表产品,智能手表一般能同步手机中的电话、短信、邮件、照片、音乐等。2014年智能手表大有排山倒海之势,三星、LG和摩托罗拉纷纷发布自己生产的智能手表,苹果公司当然也不甘示弱于2014年9月发布了自己的第一款智能手表-Apple Watch。令动画界人士最为好奇的当然就是苹果手表上面的动画啦!(因gif图片上传问题,部分图片无法上传请至原文查看)

原文地址:https://medium.com/@ShopMyApp/anatomy-of-apple-watch-animations-8866e57ada78

译文如下:

    自从看完Apple Watch之后,我们惊讶的发现原来苹果动画也是很注重用户体验的。不过,这也是合乎情理的,可能是为了减少硬件读取和电池消耗,UI本身是极简风格并且图形元素很少。因此,动画和过渡就把用户体验提升到一个水平,让Apple Watch和以往的电子表有所区分。这不仅仅是几个标准的动画,当你进行某些操作屏幕会有相关响应。这就意味着它把大量的精力放在了交互设计上面。

除非我们可以完全复制他们的Shopmyapp,否则我们不能研究其中采取了多么复杂的方案。因此我们查看了主题视频中的所有动画并且详细研究了一些帧。官方宣称,最终代表性的动画将在2015年发布出来。

下面分析各操作过程中的动画:

打开和关闭App

打开App的动画看起来是遵循着IOS7的放大缩小模式,而这次在圆形图标完美切换到App窗口的过程有一个淡入淡出的过渡效果。不仅如此,除了缩小到正常的App大小,他们会进一步分裂,就像星球大战的超光速效应(“App银河”双关语)。

尚未清楚的是你打开的App如果不是处于中间位置会是怎样?它是否会先移动到中间位置再放大?又或者放大的仍是原来中间的图标?

关闭一个App的动画运行方向和打开App是相反的,即APP的窗口缩放的同时淡出,而APP周围邻域变焦且移动接近。

接听电话

     接听电话里面的动画是很简单的,但是仍旧也有许多部件移动的动画:绿色接听按键的缩小,静音按钮放大,音量控制键出现,呼叫的字幕变成通话时间字幕,底层的圆角矩形像抽屉一样划出。重要的是没有任何俩个部件的动画是一样的,每个部件都有它们自己的变化方式。

回复短信

    当时钟界面以缩小且模糊的方式退出时,回复短信的动画就开始了。一个带着人名的短信图标从底部滑入并且轻微的反弹。这可能是在接受到Richard的短信时触发的一个通知。片刻后,图标向上滑动且缩小,文本逐步消失着滑出,短信正文从底部滑入。

   下一阶段开始是从用户点击回复按钮,对话框的放大和轻微的淡出都是触摸的响应。请注意,没有“回弹”,即回复按钮不会缩放为普通状态。然后当前页面放大,同时钟表界面和下一个含操作选项的界面一起循环缩放且模糊。

    理论上来说这是相当复杂的,这就意味着当你看到短信并且迅速进行操作时,有一个钟表界面会在背景上徘徊。也许第一部分只是通知,选项页部分才是实际APP打开的效果。这样的例子很有趣不是?

查看日历

    打开今天的日历表的动画是很简单,类似于Android默认的页面转换。指示当天日期的方形图标放大又缩小,像是反弹回来一样的。然后原先的日历往左边移动,新的一个页面无滑动效果的淡入,当前的时间停留在固定的地方如同不是页面内容的一部分一样。目前不清楚的是,如果你点击的不是今天的日期,而是一个没有红色方形图标的日期,那么会发生什么呢?是否会有触摸响应动画呢?

删除邮件

    删除一条邮件的动画大概是从一个横向滑动显示上下文菜单开始的。点击删除的图标后,删除图标变小变成一个更亮的颜色,然后恢复正常。这可能与常规的点击推开的动画效果不一致,但也许让一个颜色已经暗淡的图标消失不太好。在这个邮件项目划回原位,当它滑动时其余邮件也随之滑动。也许这将是标准的列表的行为。

有关健康的APP的选择

     在健康APP上面选择跑步功能有俩个阶段的,开始是从一个跑步按钮缩小和白色闪光作为触摸点击的响应。同时,标题和其他按钮以级联方式清除屏幕的方式逐渐消失。然后跑步按钮向下滑动变化成一个开始按钮,而其他项目消失在一个序列。同时,数字滑动到屏幕中间在一些无形的边界下面。

结论

    从我们目前所能看到的来看, 主要的结论是有关过渡动画的使用。当图形元素没有变化时,直接切换是通过一些滑动、淡出淡入和放大缩小。可以说,目前的风格几乎是折衷的,即每个动画设计是在特定的时间、空间和背景之下的,试图让大多数元素一起活动,即重点是前后关系,尝试通过优化每一个屏幕和互动的最佳方式去克服有限的空间,在有限的空间里取得一致性成本。如果我们把这些动画同Android的相比,它有一个非常不同的地方在于,在执行相同的任务上提供更多的屏幕和触摸操作,通过相同的准则尝试去建立熟悉的互动。

  一些细节:

  • .  点击触摸的响应是完全不同的,通常物体放大出来是有点像被压下来似的,但是在下一个过渡之前它恢复正常,有些淡出也有些不淡出。
  • 动画在目的上面是非常不统一的,即在屏幕上不同的项目有不同的动画。
  • 对称性不是一个大因素,即经常新项目进入的方式和之前它退出的方式是不同的,但是仍然有些项目是通过淡出来交换的。
  • 右上角的时间似乎是静止的,即大部分屏幕上面有相同的地方,但也不是100%绝对的。这里面的规则不是很明显。
  • . 导航的规则不是很严格。即二级导航页面在不同的案例里面是不同的。当屏幕底部有显示几个小点的时候,你可以通过左右滑动来切换导航。左上角有时被用作返回键,但也不是绝对规定。
  • 加速大多数情况下都是平滑的正弦曲线,一般应用在溢出或反弹效果上,有时也应用在滑动和缩放上来增加能量感。急剧的加速、指数曲线和三次方曲线的减速似乎都不存在。

总之,Apple Watch的APP打破了很多新的规则,也有可能会接受一些新的挑战。在过渡动画上面的突破是如此强大的,不能被忽视。当然这更像是刚刚起步,因为一个仅有基本的滑动和淡出淡入方案的APP还很不协调。你必须比行业中的其他人更有经验的多。就像做一个基本的装潢,你不能随意的去做,你需要让它的格调更为的高雅。可能很多迭代和原型将需要拿出一个适合整体的方案来。

Apple一如既往的接受了很高的挑战,一方面,他们不能让以往做APP的经验在Apple Watch上看起来是混乱的。另一方面,他们需要一些很棒的APP来创造一个完美的Apple Watch。据说苹果并真的不需要有50000个推特客户的10000个app和一些令人厌烦的app,而是需要1000个好的独特创新的使用案例。因此我预测根据一些良好用户体验和过渡动画的基本准则,Apple Watch 将会有比iOS更高的拒绝率。当然这些都不是确定的,我们必须等待几个月来看看实际的情况和官方的开发指南。

如果你想知道我们是如果仅使用ShopMyApp和Photoshop就能复制这些过渡动画而无需使用代码,去http://shopmyapp.com/samples.html下载psd源文件。

更新:2014-12-19

收藏

5人已收藏

Shazia

食设,性也!

  • 3

    作品

  • 47

    粉丝

  • 21

    关注

  • AI中如何掌控渐变网格
  • AI像素级完美绘制技巧
相关标签

    猜你喜欢

      2014-12-19 自译外文 规范/资料 原作者: Matias Kiviniemi 举报 5469 5 5 2

      Apple Watch动画分析

      0.0°

      你确定要举报Apple Watch动画分析

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年12月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      5
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录