服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

设计师必看 | 你绝对没注意的灵动岛的动画设计细节

日期: 来源:淘宝设计收集编辑:借你一双慧眼

在文章开始之前,推荐大家可以看看 2018 年的 WWDC 视频 Designing Fluid Interfaces( 苹果官网有视频 ), Apple 对于动画体验的思考可以说是行业内的极致,细致到每一个角落。



在这个视频中 Chan Karunamuni 里提到一个很重要的底层动画设计概念:只有当一个工具就仿佛是我们大脑的延伸时,它才会显得很“流畅”。



基于这个概念,设计师们延展出 Apple 动画设计的思路,比如动画应保持惯性和动能、动画应该考虑阻尼、动画赋予个性、动画的弹性等等,而「灵动岛」就是这些年目前 Apple 动画设计的集大成者。


接下来让我们探究下那些隐藏在灵动岛中的动画细节。




#01

向上收起

灵动岛的设计核心是希望 App 不会仅仅存在于后台,而是把一些对用户有用的信息展示在前台,所以一些有用的信息会收起到灵动岛内,我们这里以「Music 向上收起」进入灵动岛为例,逐步拆解。


Apple Music 进入灵动岛

· 动画流程 

Step 1. Music 开始缩放岛的过程中,灵动岛开始出现向上位移 + 一定的形变,开始吸收 Muisc ;

Step 2. 当 Music 彻底缩放消失后,灵动岛逐渐回弹至原状,Music 信息开始准备向外扩展; 

Step 3. Music 的封面 + 波形图案与灵动岛开始向两侧扩展,同时到最大值时有一定的反弹; 

一个简单的收起,灵动岛就展示出足够的“个性”,就像它名字那样灵动。而这个动画也与 1981 年出版的「迪士尼动画设计原则」有很多异曲同工之处。


收起 - 恢复 - 变形

比如在第一步 Music 准备进入的时候,灵动岛就展示出“接纳”的动画,这也与迪士尼动画十二原则之一的「预备动作」吻合,即在一个动作开始之前为观众做好心理准备,让这个动作更加真实。

比如当一个人要跳起来,他肯定需要先蹲下,如果缺少这个预备的蹲下动作,那么这个动画肯定是不成立的。所以灵动岛的做法就是把自身放大,开始取“吸收”这个 App,同时还伴随着“吸收“对象的惯性导致自身的形变。
在第三步时,灵动岛的动画开始展现出十二原则之一「挤压与拉伸」。Music 与灵动岛一起开始向左右拉伸并带有一定的回弹,同时系统时间、Wi-Fi 信号也产生了位移与回弹,这种表现让灵动岛更具重量感与灵活感,赋予了它更多的生命力。

任意角度的收起与惯性差异都被考虑在内

当然,Apple 的设计师们连动画的收起角度也有考虑,充分思考了「收起」这个动作的每一个细节。注意上方图片中手势分别采用往右上和左上滑动,因为惯性原因灵动岛的回弹角度也被设计的有差异。



#02

合并与分裂

App 的内容与灵动岛是绑定在一起的,当有两个 App 的内容收入灵动岛时,它自然也会展现出更多的动画细节。


让动画看起来更流畅的「运动拉伸」


我们这里以「Music 与 计时器分裂」为例,当两个 App 被收入灵动岛时,它会继续开始收起并分裂。在分裂时,灵动岛的右侧不仅展示了「运动拉伸」的特性,甚至还展示了元素之间动能的相互影响。



「计时器」随着运动惯性被拉伸,最后恢复原样

如果仔细看,你会发现电池图标因为受到的冲击动能被信号图标抵消了一部分,所以位移会比较小,这细节简直不能再“物理”了。



电池图标受到的动能较小,所以位移也较小

#03

更多的“魔鬼”

都说“魔鬼”藏在细节里,当某个灵动岛功被「放大」时,还有一些很多人注意不到的细节…


我们知道  iOS 经常通过毛玻璃效果把「层级」关系暗示出来。比如:打开某个 App 时,背景会缩放模糊;长按某个 App 图标时,背景会缩放模糊;下拉控制中心时,背景会缩放模糊等等。



iOS 通过模糊来暗示「层级」


当灵动岛在放大的过程中,左右两侧的时间、电池、信号等信息也会随着「上层」内容的覆盖而逐渐模糊消失( 这与打开某个 App 逻辑一致 ),甚至设计师们还在这个灵动岛的底部也增加了模糊投影,来进一步暗示这种信息的层级关系。


时间、电池等被灵动岛覆盖而模糊,这与全局动画逻辑一致


灵动岛通过模糊投影来暗示「层级」

写在最后

动画传递个性,动画传递感受,动画也决定体验。


文章的结尾分享一个灵动岛动画合集供大家欣赏,一起来感受下 Apple 这家公司是如何设计用户体验的。


灵动岛动画合集



本期编辑:湘楽 

相关阅读

  • 巧用视觉障眼法,还原 3D 文字特效

  • 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果:这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗?不是特别好实现,但是,如果仅
  • 利用Spine制作简单2D骨骼动画

  • hi!这里是一个关于游戏中2D骨骼动画的小小分享。 在2D游戏中,我们经常可以看见各式各样的角色动画。动画能给游戏带来生机和灵气。创作一段美妙的动画,不仅需要强大的软件工
  • 扶持动画创作,这个企划是认真的

  • 作者 / 小趴排版 / 小鱼“胶囊计划作为其中较为少见的、有新作品产出的一个项目,也确实交出了一份亮眼的答卷。”“番茄人就是以前的自己,刚步入社会的自己,廉价劳动力,任人宰割
  • 12次动画研究讲座,2023陪伴你一整年的直播大课

  • 文/野草动画学术趴创始人中国传媒大学动画专业副教授大家好,我是野草。我终于带着全新规划的直播课来了。话说上次做这种大体量的直播课程,还是2021年。当时的「动画理论与批
  • 联合线上展映|猹鱼72小时动画果酱创作大赛

  • 今年的国庆期间,猹鱼工作室主办了一场72小时“动画果酱”创作大赛。参与活动的动画创作者们将在72小时的时间限制内,根据主办方提供的开放性题目进行动画创作,产出不限画风以及
  • 梵高灵感 | 跟随动画,走入他的世界

  • 在之前的视频中,我们分享了各种梵高迷的创作,比如用乐高积木搭的星月夜和夜间会发光的自画像。我们的梵高迷来自各行各业,他们用自己最擅长的方式表达着对梵高的热爱。本期,这位
  • 久等了,万彩动画大师Mac版!

  • 重磅消息万彩动画大师Mac版正式上线101素材共享,操作不变Mac版本与Windows版本在线模板资源共享素材库资源共用万彩动画大师Mac版与 Windows版本在新建工程,添加素材编辑素材,
  • 当万彩软件遇上ChatGPT,会擦出什么样的火花?

  • ChatGPT最近真的是火出天际啦,让各行各业都爱它。可能会有小伙伴会有疑惑:ChatGPT是什么东东?接下来让我们一探究竟......01什么是ChatGPT?一款于去年11月底“出生”的聊天机器

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • MiX-Talk 006:对话人机交互设计师和作家薛志荣

  • Hi 大家好,我和Mixlab联合举办的「超级个体」个人发展分享系列第六期将在22年12月3日(周六)19:30-21:00展开,这次由我来做嘉宾。如果你有什么问题想问我的,可以在以下二维码填写
  • 发现有趣的人机交互 002期

  • 1.AR眼镜能否彻底改变产品摄影?Shopify商家的未来工作会是什么样子?https://twitter.com/StrangeNative/status/15780221218836766732.Adept AI Labs的目标是开发一种AI助手,它
  • 发现有趣的人机交互 003期

  • 1. 2022卡塔尔世界杯已进入淘汰赛的白热化阶段,国际足联官方应用“FIFA +”则通过AR技术为现场观众提供了一些特殊的观赛体验。现场球迷只需开启FIFA +,将手机摄像头对准球场
  • 给人机交互设计知识库做个总结

  • 人机交互设计知识库从今年5月份正式推出到现在已经7个多月了,现在我来总结一下期间我做了什么?在这段时间我总共添加了1046条内容,涵盖了100多个标签并设立了9个专栏,它们分别是