爱锋贝

 找回密码
 立即注册

只需一步,快速开始

扫一扫,极速登录

123
返回列表 发新帖
收起左侧

苹果手机是什么地方吸引你?

[复制链接]

9

主题

99

帖子

19

积分

Rank: 1

发表于 2020-4-30 10:04:09 | 显示全部楼层
iOS优秀的动效系统所带来的流畅:不止是所谓的“动画好”这么简单,动画背后的想法构思才是真正能够吸引人的地方,
就拿这年头人人都说的“流畅”来说,如果还将“流畅”等同于一帧不落的完成所有的过渡动画的话,那么足够快的动画+足够的性能+不拖后腿的优化这些表面的要素就可以实现优秀的流畅度,如果还不够的话,那肯定是60帧刷新率的屏幕不够用了,不如来个90,甚至是120帧的屏幕吧,这样流畅度可以堪称完美。喔?是这样的吗?
NAIVE!
过渡动画本身在于“过渡”,衔接两个不同的界面,舒服地呈现界面与界面之间的变化。动效设计的关键在于对长时间使用的舒适度的考量。如果本身视觉上的舒适度没有考虑周到,视觉上的缓冲效果没有做好,那些上述的那些很表面的只是停留在形式上面的流畅其实并没有什么太大的意义。僵硬的快不等于流畅,一帧不落地完成过渡动画也不等于流畅。最好的反面教材就是MIUI9,在动画上面最大最明显的就是所有的动画都加快了,这种快是不考虑操作节奏、使用舒适性的。所以,在MIUI9的发布会上面,就会见到以下滑稽的一幕:
苹果手机是什么地方吸引你?-1.jpg MIUI9发布会应用启动速度的比较
这种不顾一切的快对使用的舒适度是摧毁性的:无论是打开应用、关闭应用,还是进后台、切后台,没有一个是舒服的。所以我的小米Note3升级了MIUI9之后,不久我就换机了……
谷歌表示:我不背这锅。原本以为所有的安卓手机都这样,直到我在高中的时候我同桌弄来了一部搭载安卓7.0的 Google Pixel 2。当时还是在用线性动画的安卓就已经在过渡动画的速度上面已经非常克制,缺帧的现象在比较慢的动画上面得到不错的抑制。虽然还没有iOS这么精细,但已经能保证使用的舒适性。到安卓10.0,这种很安卓的流畅,配合非线性动画已经非常成熟。
说回iOS,这些高深的学问与其让我凭空分析,不如直接问iOS开发团队是怎么想的。令人惊奇的是,iOS开发团队并没有打算将所有的秘密一直藏着掖着,无意间我发现了这个,答案就在这里清晰地讲给你听:
Designing Fluid Interfaces - WWDC 2018 - Videos - Apple Developer苹果的开发者课堂:怎样设计一个流畅的界面
苹果手机是什么地方吸引你?-2.jpg iOS的开发团队对于“流畅”是怎么想的?他们说了,但好像啥也没说的样子:
苹果手机是什么地方吸引你?-3.jpg

苹果手机是什么地方吸引你?-4.jpg 出现最多的一个词就是“Extension”-延伸,这很苹果。但我们从一个高度概括的名词上面是得不到什么有帮助的信息的。为什么偏偏是“Extension”,“Extension”里面包含着什么,这些才是重要的。
为什么是“Extension”?第一个上台演讲的Chan大概是这么说的:以前我们用电脑的时候,鼠标配合显示屏里面的光标这样操作方式是间接的,我们并没有直接操纵内容;但手机的触摸屏既能显示又能操作,这就注定了在触摸屏上面的所有操作都在直接操纵内容。
苹果手机是什么地方吸引你?-5.jpg

苹果手机是什么地方吸引你?-6.jpg 接下的思路就是理所当然的——当我们在直接操纵内容的时候,我们所期待的效果会是什么样的。还能怎么样,不就是和操作现实世界中的物件差不多吗?所以接下来我们就会看到这样一句话:“An extedsion of real world”。这是iOS理所应当要实现的效果,从来都不是什么华丽的,魔幻的,炫技色彩浓厚的视觉特效。这一点和我之前对iOS的既有印象是完全不同的。
不就是将动画做的“自然”一点,这能有多难?How hard can it be?万事开头难,难就难在开头第一步该怎么走。如果一开始就着手软件或者是硬件层面的工作,那一辈子只能在终点附近徘徊。但得益于苹果“以人为本”的企业文化,iOS在设计之初首先考虑的问题是:我们在屏幕上进行各种操作的时候,我们的脑回路里面究竟发生了什么?
苹果手机是什么地方吸引你?-7.jpg 我们其实是边操作边思考的
到这里我们就可以知道 iOS所认为的流畅就不仅仅是一个自然的过渡动画这么简单,动画和手势操作是紧密相关的。看起来流畅的前提是操作起来必须是流畅的。这种操作上的流畅又是什么呢?再次回到“An extension of real world”这句话,既然和操纵真实世界是一样的话,那肯定是响应及时的,可以在中途被打断的,所以Chan就强调了“Redirection”这个词。
Redirection可以做到这样的骚操作:
苹果手机是什么地方吸引你?-8.jpg 回桌面的途中可以停下来看看多任务界面


苹果手机是什么地方吸引你?-9.jpg 应用没有归位就可以滑到下一页


苹果手机是什么地方吸引你?-10.jpg 打开应用可以中途截停进入多任务


苹果手机是什么地方吸引你?-11.jpg 应用打开的动画还没完成就可以直接关掉返回桌面


苹果手机是什么地方吸引你?-12.jpg 可以直接在途中操作


苹果手机是什么地方吸引你?-13.jpg
iOS的骚操作
https://www.zhihu.com/video/1203475087405514752
也就是说,科技美学里面的应用启动速度测试完全可以这样利用“Redirection”作弊——我iOS没有开挂,我的iPhone可以做出你们所质疑的那些操作。
还有一点就是iOS对“快”的理解,因为所有的动效都是为操作服务的,所以iOS并不在乎开启应用的动画究竟要多快才不会落后于其他产品。引用道听途说的一句名言“什么Apple care ,Apple 根本不Care”。iOS在乎的,或者说它所追求的“快”其实是对用户的所有操作响应的快,追求最直接最迅速的响应。
苹果手机是什么地方吸引你?-14.jpg Look for delay everywhere


苹果手机是什么地方吸引你?-15.jpg iPhoneX 上面率先搭载的120Hz触控采样率的屏幕
90Hz刷新率的屏幕是19年引爆手机行业的热点,还在用60Hz刷新率的iPhone是不是要紧张一下呢?在布局上,苹果早就思考过更高刷新率屏幕的事,至少是远远早于iPhoneX的发布。这就是苹果一早就交上来的答卷:
苹果手机是什么地方吸引你?-16.jpg 所谓的动画速度是由每一帧之间的变化程度决定的,但变化程度太大的话就会造成视觉上不自然的闪烁
在考虑屏幕刷新率之前,首先要考虑的是帧内容,屏幕刷新率是服务于帧内容的。更多的帧数其实和视觉上的流畅并不是完全对等的。所以iOS会更加注重帧与帧之间的变化,在每一帧上面额外加入运动迷糊、弹性拉伸等信息,进一步缓冲帧与帧之间的变化,在有限的60帧刷新率里面也能实现理想的流畅。再说,在巴掌大的屏幕上,所有的界面变化所需的帧内容其实就这么多。所以Redmi K30上面的120Hz刷新率屏幕对流畅度的提升其实是十分有限的,毕竟MIUI11这个“供应商”并没有供应好足够优质的帧内容,不自然的闪烁依旧时不时地存在,还比不上ColorOS 7+90Hz刷新率屏幕的Oppo Reno3。所以说为什么原生安卓还在用简单的线性动画的时候会对动画速度如此克制,防止每一帧之间的变化过大造成闪烁。只不过这是一种比较笨的方法。
安卓平台的高刷新率就是徒增功耗的吗?
很显然不是,更高的屏幕刷新率对使用体验的提升是特别明显的,特别是在信息流界面不停地往下面刷的时候,刷得越快,高刷新率带来的爽感就越明显。为什么会这样呢?实际上还是动效设计的问题。
苹果手机是什么地方吸引你?-17.jpg
感觉像在地上踢一个快递盒
https://www.zhihu.com/video/1224476619936493568
这种“急加速”和“急刹”意味着在刷信息流界面的时候,帧与帧之间的差别是很大的,而且因为两者之间的间隙很小,大起之后又马上大落,所以你看得最多的就是这个帧与帧之间相差最大的两个部分,即使一帧不落地完成了,画面就总感觉不怎么顺滑,毕竟这么挥霍,60帧已经不够用了。这时候,高刷新率的屏幕就有用了:帧与帧之间的变化过大了是吧,那我就再塞多几帧进去。在不需要在动效设计上做任何的改动就能迅速地提升画面的顺滑程度。虽然是简单粗暴的方法,但就是特别有效。
相比之下,iOS的处理方式就鸡贼很多。
苹果手机是什么地方吸引你?-18.jpg Keep touch interactions lightweight but amplify their motion  


苹果手机是什么地方吸引你?-19.jpg 保持触控交互的轻盈,放大使用者的动作
Amplified result of movement that still likes an extension of you.
苹果手机是什么地方吸引你?-20.jpg 为什么操作不能像轻推一个小球一样呢?
即使iOS很注重操作上的响应、延迟等等之类的东西,但对于“滑动”这个操作,它转变了思路,而且还很聪明地找到了一个切入点。
苹果手机是什么地方吸引你?-21.jpg 当手指在屏幕上时候,交互由使用者决定;等手指离开屏幕的那一刻,交互的决定权就立马转交给设计师
iOS是怎么做的?首先,iOS要保证滑动操作足够轻量,只要很小幅度的滑动,界面就能马上动起来,而且因为幅度很小,使用者骑士并没有给这个界面多大的动量,所以不仅加速的时间极短,尽量缩短了帧变化比较大的区间,而且真正动起来的时候界面滑动的速度其实并没有多快,这样就能“起步”阶段的平滑。我们是在直接操作内容,但iOS又想减轻减少我们的操作。这是iOS鸡贼的第一个地方。
接下来,手指离开屏幕了,这时候界面怎么运动就要看设计者是怎么想的。这里iOS就引入了一个新的概念:Seamless Motion ——无缝运动。
苹果手机是什么地方吸引你?-22.jpg Seamless Motion并不是什么高端的东西,当你看到界面慢悠悠地向上滑,然后慢慢地停下来,这就是Seamless Motion。它和一开始的轻量操作和低动量相衔接,充分利用了原有的较低的动量,这时候不仅帧与帧之间的变化比较小,变化的速率也比较稳定,能顺滑地滑也能顺滑地停。
轻量操作+无缝运动带来的结果是:刷微博刷知乎的时候,这种轻盈的顺滑的感觉特别舒服。
苹果手机是什么地方吸引你?-23.jpg
像推小球一样轻松
https://www.zhihu.com/video/1224486981692334080
这就是“iOS通过出色的动效设计带来流畅体验”最明显的一点。不过呢,毕竟这是通过动效设计带来的,如果操作比较暴躁的话,60帧刷新率的局限还是会暴露出来。高刷新屏幕塞进了更多的帧解决了问题,iOS则是用动效设计绕开了问题。

而到了iPad Pro上面才用上120Hz刷新率的屏幕原因也很简单:

    在更大的屏幕上面,所有的动作都被放大了,需要的帧数也就多了,自然也就需要更高刷新率的屏幕,不然连最简单手势操作都跟不上iOS本身就追求及时的响应,120Hz更多是为了配合Apple Pencil的使用
所以苹果手机最吸引我的地方就是这份流畅,而且是一种诞生于一套完整的思路的流畅。顺手又顺滑,或许就是身边的人说iPhone好用的一大原因吧。
题外话:
iOS对多任务手势的判断是相当的精准:可快可慢,可高可低,不需要像记住离合器的接合点那样非得记住要在哪个位置停顿,要停顿多久才能顺利进入多任务界面,也不需要刻意在上滑的时候保持垂直。这重要吗?这是使用次数仅次于上滑回桌面的另一个重要手势,当它不太好使的时候会怎么样?对每天的使用感受会有多大的影响呢?还真的有,我手里还真的有一个多任务手势不太好使的系统——Flyme8
苹果手机是什么地方吸引你?-24.jpeg
不太好使的多任务手势
https://www.zhihu.com/video/1204882395926953984
想顺利进入多任务手势?首先不能急,得心平气和,成为一个儒雅随和的一个人。急了,上滑距离短了,停顿时间短了,有很大概率就会这样:我明明想进入多任务界面,但系统将它放回去了。那怎么办呢?不用怕,多做几次,总会有一次是成功的。算了,还是用mBack吧。
还记得iOS所追求的快吗?能在最短时间内准确判断用户的意图也是一种快。iOS认为:如果一定要上滑到某个位置、低于一定速度保持一定时间再松手的话就太慢了(这么一说Flyme8好像将所有的雷都踩了一遍)。Chan说出了一个关键词: Acceleration--加速度。
苹果手机是什么地方吸引你?-25.jpg iOS的多任务手势是根据加速度的瞬间变化判断的
此计甚高:停顿的位置、上滑方向、停顿的时间这些需要反复斟酌的问题就这么解决了。“停顿”本质上不就是加速度的变化吗?
正如开头所说的:动画好其实只是表象,动画背后关于动效设计的构思才是真正的精髓所在。
精选高品质二手iPhone,上爱锋贝APP
您需要登录后才可以回帖 登录 | 立即注册   

本版积分规则

QQ|Archiver|手机版|小黑屋|爱锋贝 ( 粤ICP备16041312号-5 )

GMT+8, 2025-5-6 12:29

Powered by Discuz! X3.4

© 2001-2013 Discuz Team. 技术支持 by 巅峰设计.

快速回复 返回顶部 返回列表