Designing Delightful User Experiences with UIKit Dynamics

Odecee Brownbag, April 15

Transcript

1. Designing delightful user experiences with UIKit Dynamics Stephanie Sharp | @stephrsharp
3. 1. Emotional Design 2. Prototyping in Keynote 3. Intro to UIKit Dynamics 4. UIKit Dynamics with auto layout Outline
4. Emotional Design
5. “Beauty and brains, 
 pleasure and usability — 
 they should go hand in hand.” Don Norman
9. 3 ways good design makes you happy beautiful functional reflective
10. Attractive things actually work better.
13. Maslow’s Hierarchy of Needs Hierarchy of user’s needs
14. Sell this Not this https://blog.intercom.io/new-features-usually-flop/
15. Prototyping
 in Keynote
17. Show, don’t tell.
19. Feedback sad face looks scared s**tless graph needs more data
21. Demo
22. Resources Prototyping: Fake It Till You Make It
 WWDC 2014 Session 223 Tools and Tips for Prototyping Apps
 /dev/world/2014 (YouTube) Prototyping Animation with Keynote
 https://robots.thoughtbot.com/animating-with-keynote
23. Intro to UIKit Dynamics
24. Physics inspired animation & interaction system Made to be composable, combinable, reusable Does not replace Core Animation or UIView animation What is UIKit Dynamics?
25. UIDynamicAnimator Architecture UIDynamicBehavior UIDynamicBehavior UIView UIView UIView UIDynamicBehavior
26. UIDynamicAnimator Architecture UIDynamicBehavior UIDynamicBehavior UIView UIView UIView UIDynamicBehavior Reference View
27. Predefined behaviors UIGravityBehavior UICollisionBehavior UISnapBehavior UIAttachmentBehavior UIPushBehavior UIDynamicItemBehavior http://www.sitepoint.com/using-uikit-dynamics-swi!-animate-apps/
28. Predefined behaviors UIGravityBehavior UICollisionBehavior UISnapBehavior UIAttachmentBehavior UIPushBehavior UIDynamicItemBehavior http://www.sitepoint.com/using-uikit-dynamics-swi!-animate-apps/
29. Predefined behaviors UIGravityBehavior UICollisionBehavior UISnapBehavior UIAttachmentBehavior UIPushBehavior UIDynamicItemBehavior http://www.sitepoint.com/using-uikit-dynamics-swi!-animate-apps/
30. Predefined behaviors UIGravityBehavior UICollisionBehavior UISnapBehavior UIAttachmentBehavior UIPushBehavior UIDynamicItemBehavior http://www.sitepoint.com/using-uikit-dynamics-swi!-animate-apps/
31. Predefined behaviors UIGravityBehavior UICollisionBehavior UISnapBehavior UIAttachmentBehavior UIPushBehavior UIDynamicItemBehavior http://www.sitepoint.com/using-uikit-dynamics-swi!-animate-apps/
32. Predefined behaviors UIGravityBehavior UICollisionBehavior UISnapBehavior UIAttachmentBehavior UIPushBehavior UIDynamicItemBehavior http://www.sitepoint.com/using-uikit-dynamics-swi!-animate-apps/
33. UIGravityBehavior UICollisionBehavior UISnapBehavior UIAttachmentBehavior UIPushBehavior UIDynamicItemBehavior Combining dynamic behaviors
35. DropSnapBehavior
36. Resources Getting Started with UIKit Dynamics
 WWDC 2013 Session 206 Advanced Techniques with UIKit Dynamics
 WWDC 2013 Session 221
37. UIKit Dynamics
 With Auto Layout
39. Setting up constraints Add low priority height constraint on chart view Constrain smileys to bottom when animation stops
42. Add vertical constraint - (void)addBottomConstraintToSmiley { // ... NSDictionary *views = NSDictionaryOfVariableBindings(centerView); NSString *visualFormatString = [NSString stringWithFormat:@"V:[centerView]-%lu-|", (unsigned long)self.verticalSpacing]; [self.referenceView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:visualFormatString options:0 metrics:nil views:views]]; [self.referenceView setNeedsLayout]; }
44. - (void)dynamicAnimatorDidPause:(UIDynamicAnimator*)animator { [self addBottomConstraintToSmiley]; [self.animator removeAllBehaviors]; self.animator = nil; } UIDynamicAnimatorDelegate
45. - (CGPoint)velocityForItem:(id<UIDynamicItem>)item { return [self.dynamicItemBehavior linearVelocityForItem:item]; } Linear velocity
46. Auto layout state It’s OK for auto layout to be in an invalid state while animator is active… But it must be valid before the next layout pass.
47. self.questionLabel.text = kQuestionForChart; [UIView animateWithDuration:duration animations:^{ self.questionLabel.alpha = 0.0f; } completion:^(BOOL finished) { self.questionLabel.text = kQuestionForChart; [UIView animateWithDuration:duration animations:^{ self.questionLabel.alpha = 1.0f; }]; }]; Example
48. Warning: Intrinsic content size Beware of views with an intrinsic content size
 (e.g. labels, buttons) Easy to inadvertently trigger a layout pass…
49. “For views that are aware of Auto Layout, in most circumstances you want translatesAutoresizingMaskIntoConstraints to be NO. …this translation would prevent a button from automatically assuming its optimal width when its title is changed.” https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AdoptingAutoLayout/AdoptingAutoLayout.html
50. self.questionLabel.translatesAutoresizingMaskIntoConstraints = YES;
51. Thanks! @stephrsharp