碘设计
首发于碘设计

如何让界面顺的一批

这篇文章都是关于学习苹果产品的极致细节操作。

我们手中常用的iPhone,刚问世的时候,大家才知道:原来智能手机的界面可以这么流畅,可以那么符合直觉,曾经的诺基亚等机皇,瞬间黯然失色。更有甚者,对其中的一些小功能,乐此不疲的把玩着。因为真的很多小动画,小交互细节值得玩味,并且能给人带来了愉悦,甚至是成就感。

最近做基于纯H5的项目,感觉设计出来的产品在手中手感生涩了很多。不像以前原生开发做那么顺滑。一方面,这归功于原生app强大的性能,才能让整体使用十分流畅。但是另一方面,iOS还有很多极致细节的交互设计,无声无息的支撑着这个系统变得跟手。

我们虽然很难察觉,很多界面用起来很流畅,你可能不知道为什么,但是实际上背后有着很多设计点。为了解释这些细节,去年的WWDC,有一场主题叫做《Designing Fluid Interfaces》的分享,把这些设计细节披露出来了。这也终于解释了很多设计点,为何苹果的界面如此流畅,看完之后我也彻底被苹果圈粉,原来有这么多细节的考虑点。今天我们会看到很多我们平时没有注意到的细节,在苹果的产品中,交互不仅仅是一个按钮,一个Tab,或者一串操作流程,它是一整套对用户操作无微不至的关注。

Designing Fluid Interfaces - WWDC 2018 - Videos - Apple Developer

现在我们说,现在已经是扁平化的年代了,拟物化的设计已经不流行了。我认为这个说法并不完全正确。现在的视觉确实已经变得更加抽象,而交互本身,是和人的认知习惯高度相关的,并没有变得拟物化。因此,在交互的过程中,需要符合人的认知直觉,使得界面看起来更流畅,用起来也更加流畅。

因此,可以说,界面是人思维的延续。而既然是思维的延续,界面就需要和思维一样流畅才行。

1. 消灭延迟

我们可以在图中看到,一个10ms延迟基本上才是一个可以接受的延迟,50ms看起来已经比较不可接受了,200ms的时候,那界面已经不是你思维的延续了,是你思维的拖油瓶。​

延迟示意

​既然延迟是不可接受的,但是由于性能我们必须要接受延迟,有没有办法通过一些提前量来抵消延迟呢?其实是有的。例如在这个向上滑动解锁的地方,只要我的手按到底部,甚至还没有上划,它就会直接向上滑动一个预留量。当我们按下的时候,整个界面实际上已经开始上滑了。这样我们虽然向上滑动的很快,但是整个界面的感觉也不会有延迟。

点击预先上滑




2. 非线性交互

通常人们与界面进行交互的时候(尤其是手势交互),都是遵照这样一个模式,那就是Think、Decide、Act、Release。

线性交互

但是很多时候我们动手的时候可能自己都没想好要干嘛,所以会有一个“Act before decision”的概念。或者说,在交互的过程中,随着时间的推移和认知的改变,随时有可能改变主意,或者操作了一半想放弃了。

比如这个例子中,我觉得我要退出,但是实际上我并不是要真正的退出,我其实是想去另一个App,我在向上滑动的过程中可以停止上滑,先看看这个app我最近有没有用过,这样我可以快速的切换到那个App去。

退出app?不,我想要多任务切换

​再比如,如果我想要退出app,但是我发现我实际上是要切换到另一个app,但是我发现这个app最近并没有使用过,所以还是要回到桌面,整个过程,一划搞定。

多任务切换?不,我想要回到桌面

我们可以发现,实际上整个过程中,iOS好像知道我们要切换app,所以就进入了多任务切换的界面。那这种动机是如何被发现的呢?是因为我们的手指在某地不动多久之后,就会切入多任务切换的界面吗?实际上,它使用的是加速度。只要你的加速度突然变成了负数,它就觉得你,减速了,可能是迟疑了,可能是需要切换为多任务了。

手指垂直通过加速度检测,判断用户是要进入多任务切换界面的指标

​实现了先做后想,这样大大减小了操作时间,并且提升了效率。

非线型交互

​这套非线性交互的模型,我们会发现很多优秀的手势操作都遵循着这个。例如微信的悬浮窗,chrome的下拉刷新。

手机Chrome下拉

​​

微信悬浮窗




3. 空间一致性
空间的一致性也是很重要的。如果我从这个门出去,可是很快又从窗子再进来,所有人都会觉得很疑惑,因为这根本不可能。你会觉得你的意识在流动中也许中断了。当然意识的流动性是另一个话题。在界面中也是一样的道理。稳定的空间关系可以向用户表示界面之间的逻辑关系。iOS绝大部分内建APP,以及预制的动效都会遵循这个规则。

典型的iOS内建动效

​不仅如此,这样的意识可以帮助我们完成更多的操作。

例如,当我们回复邮件的时候,是弹出一个全屏的模态页面?还是弹出一个半屏的页面?iOS的自带邮件app给的答案不是这样的。因为我们在回复邮件的时候,不仅需要编辑新邮件,还需要不时的查看原来的邮件。这个时候在进入新邮件的编辑界面时,顶部就会出现一个indicator,告诉你这个东西可以向下划,从而将整个编辑邮件的界面最小化。下次再点击那个最小化了的编辑界面,原来的界面又会以同样的方式再次出现,保持了整个空间关系的一致。

iOS邮件回复

4. 提示手势

很多时候想要触发一个手势是比较困难的,尤其是当用户并不明白,而这个手势又足够的关键。包括上划下滑,长按,之类的手势。这个时候就需要在手势的方向上给用户提示。以此来让用户觉得这个交互更容易被触发。

例如iPhone X上的home indicator。它看起来是个可交互的东西,然而当你点击它的时候,它会产生一些向上的动画,以此告诉你,“快来划人家~”

Home Indicator

​再例如control center的各种面板,都是支持3D TOUCH的。但是,当你轻点它的时候,它会产生一些有弹性的动画。当你按下的越重,你可以看到整个面板正在放大,好像在告诉你,“再努力一下,很快你就会来到一个从来没用来过的地方啦!”

Control Center

总的来说,这个部分就是,利用行为来让用户自己探索更多行为。

5. 熟悉交互中的新操作

最后一部分是熟悉交互中的新操作。很多时候,我们日常使用的一个点击、滑动,我们会以为这些交互元素并没有什么可以设计的空间了。实际上,当开发看到我们的设计稿时,他们需要补充很多参数才能让整个界面可以真正连贯的用起来。很多时候,这些参数是可以由我们自己定义的。甚至可以去了解一下究竟我们可以定义多少交互的感觉。

5.1 点击

首先说说Press态。

最开始的时候,我在设计Press态遵循着非常简单的逻辑——按下就会变成那个状态。但是这样会产生一个非常尴尬的情况,就是实际上按下的时候,Press态被我们的手指挡住了,我们并不能看到那个变化。但是在iOS系统的按钮中,Press态会有一个延迟消失的过程,使得整个Press态能被感知到,反馈更显著。

iOS计算器

​第二个点就是相应区域的问题。

以一个新建按钮为例。新建按钮是一个悬浮在列表右下角的按钮,位置十分显著,按理来说应该是一个十分容易被发现,并且容易触发的操作,但是实际使用中却发现不那么容易触发。在观察用户行为后发现,实际上这个按钮的位置对于一般大屏手机来说,点击并不顺手,通常需要比较费劲的伸手指过去点击。一个按钮有效触发,需要Press和Release都在热区中。但是用户Press的那一瞬间,手指会发生位移,移出了相应区域,结果Release在热区以外,导致系统判定这个按钮并没有被触发。

新建按钮位置

但是iOS的button控件不一样。当进入Press态,等待Release的时候,会自动放大一圈热区,这样就能有效的解决在屏幕边缘的按钮不容易触发的问题。

iOS计算器按钮Release热区

5.2 滑动

首先是滑动的阻尼感。

这是一个很细节的体验。当我滑动home indicator切换app,和我滑动相册里的相片,感受到的阻尼是不一样的。虽然当慢速滑的时候同样跟手,但是当我把滑动的“甩”出去的时候,所需要松手那一刻的速度是不一样的。

切照片

​​​

切app

我们可以发现,这两者的滑动的阻尼感不同

前端开发中,通常使用的是贝塞尔曲线作为我们的运动曲线,但是这套运动曲线在iOS开发中的数值是完全不一样的,它需要调整这些阻尼、时长之类的数值,我们设计师可以在flinto中根据自己的需求来尝试。在实际项目中,这些值可以直接在flinto中尝试,并直接提供给开发。

iOS的运动曲线

另外,关于回弹效果。我们发现,在阻尼值比较小的时候,能看到一个回弹的效果。苹果又是如何定义这个回弹效果的呢?他们的定义是“用来奖励手指手势赋予UI元素的动量”。是什么意思呢?就是如果用户滑动操作UI元素的话,就有回弹,显得用户滑的力度很强,是一种奖励性反馈。如果是点击操作,那就不回弹,这边可以看一下Apple Music的案例,展开“正在播放”是点击,收回“正在播放”是向下滑动。

Apple Music正在播放

5.3 多重手势

iPhone的桌面,支持左右向滑动和上下滑动。这些滑动并非是直接加两个手势识别这么简单,因为我们的滑动通常无法做到完全的水平滑动或者垂直滑动,通常是带有一定的角度的,那么单纯的识别这两个手势必然就会产生一些冲突,导致一些手势识别失灵的问题。

多重手势例子

​在iOS中引入了一个叫做PanGestureRecognizer的东西,它的原理是这样的:

第一步:

触摸开始时,会有一个10pt的识别范围。当手指移动超过10pt的时候,才会触发手势识别。

​第二步:

当到达手指移动达到10pt的时候,触发手势识别

第三步:

根据手指滑动10pt的位置范围,判断用户的滑动方向

这样就可以确保每次滑动只触发了一种手势,手势之间也不会打架了。你也可以在你的手机桌面上试试,当你滑动距离很短的时候,手机是不会相应的,因为它还不能判断你到底要触发哪个手势。

6. 总结

这些细微的设计点,并不是当我们做设计的时候能做出来的,是在不断的使用、不断的观察用户过程中,发现用户的真实行为,并帮助用户做他想做的事。看过苹果的Designing Fluid Interfaces,收获也真的很大。

那场分享有一句话我觉得很重要。

Work with behavior rather than animation.


参考:

Designing Fluid Interfaces - WWDC 2018 - Videos - Apple Developer

编辑于 2019-05-31

文章被以下专栏收录

    沈天宇同学关于设计和科技的一些小心思和小吐槽,由于毕业论文暂更至2018年1月~