在WWDC2018上,苹果设计师提出了一个关于“流畅的交互设计”的话题,解释了iPhone X手势交互(gestural interface)背后的设计理念
苹果WWDC2018“流畅的交互设计”
这个话题提供了一些技术引导,作为一个想法,这些发布的内容有点让人意外。但只发布了伪代码,还留下很多谜团。
演讲中一些类似Swift代码
如果你想要尝试这些想法,你也许就会意识到理想与现实的差距
而我的目标就是为这些想法提供一些代码示例,帮助跨过这个差距。
我们将创建8个交互
什么是流畅的交互
流畅的交互要做到:快速,平滑,自然。给人一种很流畅的体验。
WWDC演讲把流畅的交互称作“用户意识的扩展”和“自然世界的扩展”。只有当一个交互表现得符合人类感官,而不是机器理念时才能算是流畅。
如何使他们显得流畅?
流畅的交互是可响应,可中断,可反向的。下面是一个iPhone X的”滑动返回”手势
App可以在动画阶段被关闭
这个交互能够立即对用户的输入做出反应,可以在其过程中任意时刻停止,还可以在中途反向。
我们为什么关注流畅的交互
-
流畅的交互提高了用户体验,让每一个响应更快捷,轻量,意思明确。
-
它们给用户一种便于掌控的感觉,从而会更加信任你的App。
-
但它们并不易创建,一个流畅的交互很难复制。
交互
在本文下面部分,我会展示如何创建8种交互,它们涉及到了演讲中的所有主要部分。
8个图标代表我们要创建的8个交互
交互1:计算器按钮
该按钮模仿iOS计算器的按钮动作
主要特性
-
点击后马上高亮
-
即使在动画中也可以快速点击
-
用户可以在按下后,手指移动出按钮区来取消点击
-
用户可以在按下后,手指移动出按钮区,再移入,此时点击有效。
设计理念
我们希望按钮有良好响应性,让用户感到它们都在好好工作。另外,我们希望如果用户在按下之后想取消动作的话,能够取消。这会让用户更快操作,因为他们就可以边想边行动了。
WWDC的幻灯片展示了边动手边思考,可以让行动更迅速。
关键代码
创建这个按键第一步要使用UIControl子类,而不是UIButton子类。UIButton也许也可以用,但我们要定义互动,所以这里不需要它。
CalculatorButton: UIControl {
public var value: Int = 0 {
didSet { label.text = “\(value)” }
}
private lazy var label: UILabel = { ... }()
}
之后,我们会用UIControlEvents来为各种接触反应设计函数。
addTarget(self, action: #selector(touchDown), for: [.touchDown, .touchDragEnter])
addTarget(self, action: #selector(touchUp), for: [.touchUpInside, .touchDragExit, .touchCancel])
我们把touchDown和touchDragEnter事件分组到一个事件中,取名为touchDown,并把touchUpInside,touchDragExit,touchCancel事件分组到一个事件中,取名为touchUp
(关于availableUIControlEvents的具体描述,请参阅文档)
这样我们可以用2个函数来处理动画
private var animator = UIViewPropertyAnimator()
@objc private func touchDown() {
animator.stopAnimation(true)
backgroundColor = highlightedColor
}
@objc private func touchUp() {
animator = UIViewPropertyAnimator(d