WWDC 2018 Designing fluid interf

一、Interfaces that extend our minds

Gestures in Parallel With Thought

Faster than thinking before doing
One gesture solves multiple problems
Helps with discovery
Allows you to layer gestures at the speed of thought

Fluid Interfaces Think Like Us

Instant response and constant redirection
Maintain spatial consistency
Hint in the direction of the gesture
Lightweight interactions, amplified output
Soft boundaries and transitions
Design smooth, dynamic behavior

二、Designing with Dynamic Motion

// Distance travelled after decelerating to zero velocity at a constant rate
func project(initialVelocity: Float, decelerationRate: Float) -> Float {
          return (initialVelocity / 1000.0) * decelerationRate / (1.0 - decelerationRate)
}

 //After the PiP is thrown, determine the vest corner and re-target it there 
//通过动量，预测一个最终位置，增加体验
let decelerationRate = UIScrollView.DecelerationRate.normal

let projectedPosition = (
    x: x.value + project(initialVelocity: x.velocity, decelerationRate: decelerationRate)
    y: y.value + project(initialVelocity: y.velocity, decelerationRate: decelerationRate)
)

let nearestCornerPosition = nearestCornerTo(projectedPosition)

x.target = nearestCornerPosition.x
y.target = nearestCornerPosition.y      

Continuous behaviors, not timed animations
Draw inspiration from the physical world
Spring don't need to be springy!
Align motion with intent

三、Responding to Interaction

1.按钮点击时要高亮
2.增大按钮的接触范围
3.离开按钮可以取消操作，移动回按钮需要再次高亮
4.swipe 有滞后现象，需要移动一定距离才可以移动
5.Touch and content should move together, one to one
6.provide continous feedback
7.注意区分 Swipe 和 Pan 手势的使用场景

四、Fliudity as a Medium

1.界面即时响应
2.通过一致的动画告知用户可以通过不同的操作方式来控制APP
3.通过玩耍来进行自我学习
4.将互动和视觉打造成统一的

Design the interaction to be inseparable from the visuals
A interactive demo is worth a million static designs
Prototyping helps you think by exploring
Set a goal for the implementation
Hard to copy and gives your app a unique character