.

.

 找回密码
 免费注册
Safari 12.0 macOS 10.14
虽然在iOS设备上有很多不是很方便的地方, 但是大家都还是很喜欢用. 其中一个原因我想就是  ---- 这系统用起来怎么真么顺滑.
我想很多普通用户都不会再去深究, iOS 到底是通过哪些细节让用户觉得又细腻, 又顺滑.

虽然这些都是后台工程师去考虑的事儿, 苹果也很少提及.

shunhua.jpg


在 WWDC18 上, 专门有一个课程, 名字就叫做如何做一个顺滑的用户界面. 英文用的是 Fluid , 直译是流体. 我个人理解为顺滑.

这个视频您可以直接到如下网址上看到.
https://developer.apple.com/videos/play/wwdc2018/803/
如下是部分重要部分的截取与翻译. 如果您没有一个小时去浏览视频的话, 本文可以简单的了解到为何你的iOS的用户界面用起来这么顺滑.

如下这些细节, 是你每天都在用, 但是从来就没有注意的.
----


手势操作的预判与反悔

在手势操作中, 并不是像普通的点击操作, 完成一个操作以后再进行一个.
如果是完成一个手势, 才能进行下一个的话, 就会出现卡的感觉.

在iOS里面的设计是, 对手势操作全都有预判, 并且对下一步操作有提前量.
同时, 当你在手势操作过程中, 可以反悔. 当你不想启动程序的时候, 可以理解启动另一个手势.
如下就是实例.


返回主界面的时候可以滑动主界面
1.gif


在程序运行的时候启动多任务切换
2.gif


程序运行的时候关闭程序
3.gif


程序启动中就可以开始操作
4.gif











上下撞墙缓冲

窗口上下区域的撞墙缓冲, 可以让用户更为舒服的认识到已经没有更多内容了.
但是在很多别的系统上, 没有这个设计, 感觉整个界面是死的.


撞墙缓冲.gif










计算位置动量 速度 力量


如何激发多任务手势, 不是按照你滑动手指的时间来判断的, 按照你滑动的速度力量, 动量距离来判断什么时候激发多任务窗口.

5.gif


6.gif



动画转化加速度
动画切换速度是有加速度的, 当你觉得窗口或者物体是加速向你靠近.

7.gif








如何管理按击区域

触摸按键的区域, 并不是准确的, 是在按钮的一个区域里面, 比如在计算器里, 当你按一个数字的时候, 你的触摸区域会在数字的圆圈里面, 并且还会在外面一点, 这样当你反悔的会后, 将手指移出区域, 按钮操作就会消失, 而当你返回的时候, 按钮数字会重新被选择.

8.gif









3D Touch 点按重量判断激发操作

10.gif







3D Touch 与 滚动切换.

当用户激发了3D Touch后, 其实是用户按错了, 要是滚动, 那3D Touch操作就被取消, 重新执行滚动操作.

11.gif



本文并没有完全覆盖这个讲座的全部内容, 想更为具体了解的请移步到苹果的开发者网站观看完整视频.

如上信息图片版权均为 Apple 所有. 本人仅做翻译分享.  
分享 18-6-9 22:58:57
shuix ( ☆☆☆☆☆ ) ( 赞 92 )

Safari 11.1.1 macOS 10.13.5
简单来说就是ios的UI动画是分开单独处理的。UI和系统是并行的。
你操作以后,就已经进入下一步,并且提交ui进行动画,这时候,不管动画到了哪儿,系统实际都已经到了下一个界面。而不是等待动画完成。
安卓的ui是和系统串行的。系统的运行和ui的展示都是同步的。所以受到算力影响,就会出现小的卡顿。
ios的好处是看起来感觉很流畅,但实际上整个速度是有点慢的,因为不管运算能力多强,一些动画都要占用固定的时间。另外,因为系统和动画不同步,所以操作快了会出现一些非常奇葩的ui bug,比如卡在某个界面之间。对于老一些的硬件,更会减弱控制感,虽然看起来还算流畅,但是会感觉比较飘,整个节奏慢慢的。
安卓则会让人感觉控制感更强,有点指哪儿打哪儿,如臂使指的感觉,但是硬件稍微跟不上,就卡顿得让人不舒服。
总之真正想要好的体验,不管ios还是安卓,都要最新最强的硬件支持,否则都难受,只是便秘和拉稀的区别。
分享 18-6-9 22:01:21
ricky5911 ( ☆☆☆ ) ( 赞 1 )

Firefox 60.0 macOS 10.13
好~~~~
分享 18-6-9 22:16:49 发自iPhone客户端

? iPhone 7 plus
设计师辛苦了
分享 18-6-9 22:31:30
猫院老板 ( ☆☆☆☆ ) ( 赞 94 )

Safari 11.1 macOS 10.13.4
确实考虑得非常细致。。。
分享 18-6-10 00:17:34
Neeary ( ☆☆☆☆☆ ) ( 赞 7 )

Safari 11.1 macOS 10.11.6
便秘和拉稀的区别
分享 18-6-10 01:58:12 发自iPhone客户端

? iPhone 7 plus
非细腻的设计,不仅是设计师对使用者使用习惯的揣摩,还有心理的揣摩。
分享 18-6-10 02:30:31
lzb66261966 ( ☆☆☆ ) ( 赞 2 )

? iPhone 6
我突然想到一句广告词:纵享丝滑
分享 18-6-10 02:34:16
lzb66261966 ( ☆☆☆ ) ( 赞 2 )

? iPhone 6
我突然想到一句广告词:纵享丝滑
分享 18-6-10 02:34:36
lzb66261966 ( ☆☆☆ ) ( 赞 2 )

? iPhone 6
纵享丝滑

 

您需要登录后才可以回帖 登录 | 免费注册

联系我们|急聘英才|移动版|站点地图|iPhone 客户端|保修查询|排行榜|Mac软件宝箱|麦克叉 ( 京ICP证110625号,京ICP备11029045号-1 )

Since Feb-16-2005

回顶部