快好知 kuaihz

Apple Watch UI动效解析

看过Apple Watch的keynote之后,我们惊讶于其UI体验当中所包含的大量动效。也许是出于渲染效率和电量消耗等方面的考虑,Apple Watch的UI本身相当简约,没有过多的视觉元素;这也使得其中所包含的各种转场动效成为提升使用体验的关键要素之一。

此外我们还会发现,苹果向我们展示的不只是少数几个所谓的“标准动效”,实际上几乎每个界面当中的动效都是针对其特定的内容形式所打造的;这也体现出了苹果在其交互设计方面所下的功夫。

为了将这些复杂的动效研究清楚,我们把演示视频当中展示的一些典型动效截取了下来,在本文中稍作分析。首先必须做个免责声明:在2015年Apple Watch正式发售之前,我们无法确定它们的最终形式会是怎样;一切以目前官方给到的演示为准。

打开和退出应用

打开应用时的放大动效与iOS7的方式类似,比较值得注意的是,在应用图标界面本身交叉渐变的过程当中,界面的矩形区域始终与图标的圆形区域保持契合,同步放大。在此过程当中,其他的图标彼此逐渐远离的效果很像星球大战电影里超光速推进时的视效;想到苹果提到的“应用星系(app galaxy)”这个概念了。

目前我们还无从了解的是,如果你点击的不是屏幕中央的应用图标,那么情况会是怎样。被点击的图标会首先移动到屏幕中央然后再放大吗?或是直接从所在的位置放大?

退出的动效与打开时相反,界面缩小淡出,应用自身的图标以及周围的“邻居们”又逐渐汇集到一起。

接听来电

向下平移的效果来自于keynote演示本身,不包含在UI动效当中。

接听电话的过程很简单,不过所包含的运动元素还不少:点击后,绿色的接听按钮缩小,静音按钮在同一位置放大呈现,界面顶部出现音量控制,“incoming call”提示变为通话计时,同时底部的上拉提示条下移消失。也许你注意到了,这个过程中所有的动效都是不同的,每个元素都以各自的方式呈现或消失。

回复消息

向上平移的效果来自于keynote演示本身,不包含在UI动效当中。

收到消息时,原本的表盘界面会向后隐退;同时,带有短消息图标、发送人姓名及“messages”标题的提示会自下而上的滑入界面,静止前有轻微的弹跳效果。经过一段时间(或点击后?),提示中的文字内容上移淡出,短消息图标缩小并移至左上角,同时消息正文及“回复”按钮自下而上滑入界面

“回复”按钮被点击之后会略微缩小淡出,注意这里没有反弹恢复原样的效果。然后整个信息放大淡出,之前隐退到后面的表盘界面以y轴为中心向后翻转(flip),同时包含了各种回复选项的界面翻转至最前方。

概念上讲这套动效确实够复杂。收到消息提示后为什么要让表盘界面模糊的隐退到后方(类似iOS7中通过毛玻璃表现内容与上下文环境的层次关系?),唤出回复界面时为什么要通过翻转的方式实现?也许是以为内前两个提示性质的界面并不属于某个特定的应用环境,只有进行回复时才算进入了正式的应用当中。挺有意思的组合运用方式,期待看到更多这样的例子。

查看日历

在日历中打开特定日期行事表的转场方式倒是和安卓蛮像的。点击当前日期,圆角矩形的指示符会轻微的缩小淡出,然后恢复原样,接下来界面开始切换,日历界面向左滑出,行事表界面放大渐入。切换过程中,右上角的当前时间不发生任何变化。

不知道点击非当前日期的话(没有当日指示符),会有怎样的响应样式体现在日期数字上。

删除邮件

向左平移的效果来自于keynote演示本身,不包含在UI动效当中。

在某条邮件上向左侧轻扫,展开情境菜单。点击其中的垃圾桶图标,会使其高亮并缩小,然后反弹恢复原样。高亮的过程似乎与“点击推远”的感觉有些矛盾,不过这样做或许是因为这里的图标本身就已经蛮暗了的缘故。

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

健康应用的选择

向左平移的效果来自于keynote演示本身,不包含在UI动效当中。

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

结论

假设我们目前看到的这些就是Apple Watch正式发售时带给我们的,那么我们能得到的结论就是…这里面真的用到了很多动效。任何一个界面元素在发生状态变化时总是伴随着滑动、放大缩小、渐入或淡出等动效。

可以说,当前这套风格属于某种折中的设计决策,其中的每种动效都是针对特定的时间、界面空间及上下文环境的,力求最准确的体现出特定情境中的交互过程。“情境化”是这里的关键:通过优化每个界面、每个环节当中的交互体验,来弥补极端有限的屏幕尺寸所带来的缺陷;牺牲了全局统一性,换来了在任何一个特定的界面环境中提供最合适的交互模式。如果将Apple Watch和Android Wear做以对比,我们会发现它们在这方面的策略相当不同;后者力求最普遍适用的全局统一交互模式,但代价就是产生了更多的步骤和点击。

具体汇总一下Apple Watch当中的交互要点:

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:解析  解析词条  Apple  Apple词条  Watch  Watch词条  
交互

 信息层级的新维度:视差运动

什么是视差运动?视差运动是怎么产生的呢?与交互的关系是什么呢?一、信息层级的表现方式先来回想一下,在界面设计中有哪些方式可以表现信息的不同层级,大小,颜色,位置...(展开)