Material Design on iOS

Transcript

1. Material Design on iOS Stephanie Sharp
2. google.com/design/spec
3. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other.
11. Defer to content Provide clarity Use depth to communicate iOS Design Material is the metaphor Bold, graphic, intentional Motion provides meaning Material Design
12. Clients Developers Designers That’s nice. Why should I care?
13. What do we agree on? Some consistency across platforms is good Respect the platform and its users
14. So, what can we borrow from Material Design?
15. Navigation?
17. Facebook YouTube Airbnb LinkedIn
18. Now, typically we don’t provide design advice about the things that we don’t offer to you guys… but I will say that their value is greatly over-stated, and they have huge usability downsides too. – Mike Stern, Apple UX Evangelist, WWDC 2014
20. Facebook YouTube Airbnb LinkedIn
28. Navigation? No, thank you.
29. UI components?
30. Material https://github.com/CosmicMind/Material
31. MaterialKit https://github.com/nghialv/MaterialKit
32. Material Controls for iOS https://github.com/fpt-software/Material-Controls-For-iOS
33. Material Design Lite (web) https://www.getmdl.io/
34. https://github.com/stephsharp/MaterialTextField MaterialTextField
35. UI components? Sometimes.
36. Meaningful motion?
37. Beautiful, subtle animation pervades the iOS UI and makes the app experience more engaging and dynamic. – Human Interface Guidelines
38. Add animation cautiously… Animation that seems excessive or gratuitous can obstruct app flow, decrease performance, and distract users from their task. – Human Interface Guidelines
39. Animation can exist within all components of an app and at all scales, from detailed icons to key transitions and actions. – Material Design Spec
40. …an app can truly delight a user when animation is used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that smoothly change from one to the other serve dual functions: to inform the user and to imbue the app with a moment of wonder and a sense of superb craftsmanship. – Material Design Spec
42. BubbleTransition https://github.com/andreamazz/BubbleTransition
43. inspired by: MaskZoomTransition
44. https://github.com/stephsharp/MaskZoomTransition
45. Meaningful motion? Maybe, with care.
46. Recap Some consistency across platforms is good. Navigation? (Usually) No, thank you. UI Components? Sometimes. Motion? With care.
47. Questions? Thanks!