苹果WWDC2018 建立流畅的交互(Fluid Interfaces)

在WWDC2018上，苹果设计师提出了一个关于“流畅的交互设计”的话题，解释了iPhone X手势交互(gestural interface)背后的设计理念

 

苹果WWDC2018“流畅的交互设计”

这个话题提供了一些技术引导，作为一个想法，这些发布的内容有点让人意外。但只发布了伪代码，还留下很多谜团。

演讲中一些类似Swift代码

如果你想要尝试这些想法，你也许就会意识到理想与现实的差距

而我的目标就是为这些想法提供一些代码示例，帮助跨过这个差距。

我们将创建8个交互

什么是流畅的交互

流畅的交互要做到：快速，平滑，自然。给人一种很流畅的体验。

WWDC演讲把流畅的交互称作“用户意识的扩展”和“自然世界的扩展”。只有当一个交互表现得符合人类感官，而不是机器理念时才能算是流畅。

如何使他们显得流畅？

流畅的交互是可响应，可中断，可反向的。下面是一个iPhone X的”滑动返回”手势

App可以在动画阶段被关闭

这个交互能够立即对用户的输入做出反应，可以在其过程中任意时刻停止，还可以在中途反向。

我们为什么关注流畅的交互

1. 流畅的交互提高了用户体验，让每一个响应更快捷，轻量，意思明确。

2. 它们给用户一种便于掌控的感觉，从而会更加信任你的App。

3. 但它们并不易创建，一个流畅的交互很难复制。

交互

在本文下面部分，我会展示如何创建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