4. Objectives
§ Learn about the concepts behind iOS7
§ Understand how those concepts manifest in Apple’s iOS apps and how
they might apply to yours
Tuesday, September 3, 13
7. iOS7
§ Seventh version of Apple’s mobile operating system
o
Released in September 2013
Tuesday, September 3, 13
8. iOS7
§ Seventh version of Apple’s mobile operating system
o
Released in September 2013
§ First major UI redesign of iOS
Tuesday, September 3, 13
9. iOS7
§ Seventh version of Apple’s mobile operating system
o
Released in September 2013
§ First major UI redesign of iOS
§ Not just a UI design release
Tuesday, September 3, 13
10. iOS7
§ Seventh version of Apple’s mobile operating system
o
Released in September 2013
§ First major UI redesign of iOS
§ Not just a UI design release
o
App redesign as well
Tuesday, September 3, 13
11. iOS7
§ Seventh version of Apple’s mobile operating system
o
Released in September 2013
§ First major UI redesign of iOS
§ Not just a UI design release
o
o
App redesign as well
And plenty of under-the-covers goodies
Tuesday, September 3, 13
12. iOS7
§ Seventh version of Apple’s mobile operating system
o
Released in September 2013
§ First major UI redesign of iOS
§ Not just a UI design release
o
o
App redesign as well
And plenty of under-the-covers goodies
Tuesday, September 3, 13
14. Features of the New UI
§ Deference
Tuesday, September 3, 13
15. Features of the New UI
§ Deference
o
UI chrome shouldn’t get in the way of the app’s content
Tuesday, September 3, 13
16. Features of the New UI
§ Deference
o
UI chrome shouldn’t get in the way of the app’s content
§ Clarity
Tuesday, September 3, 13
17. Features of the New UI
§ Deference
o
UI chrome shouldn’t get in the way of the app’s content
§ Clarity
o
Clear and easy to use
Tuesday, September 3, 13
18. Features of the New UI
§ Deference
o
UI chrome shouldn’t get in the way of the app’s content
§ Clarity
o
o
Clear and easy to use
Clear on how to use it
Tuesday, September 3, 13
19. Features of the New UI
§ Deference
o
UI chrome shouldn’t get in the way of the app’s content
§ Clarity
o
o
Clear and easy to use
Clear on how to use it
§ Depth
Tuesday, September 3, 13
20. Features of the New UI
§ Deference
o
UI chrome shouldn’t get in the way of the app’s content
§ Clarity
o
o
Clear and easy to use
Clear on how to use it
§ Depth
o
Blurring, transparent, dynamic 3d effects
Tuesday, September 3, 13
23. Views
§ Your app is now full screen
o
The status bar is drawn on top of your view instead of your view being below
Tuesday, September 3, 13
24. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
Tuesday, September 3, 13
25. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
§ Navigation and tab bars are transparent/blurred
Tuesday, September 3, 13
26. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
§ Navigation and tab bars are transparent/blurred
o
The content behind is still visible, although obfuscated
Tuesday, September 3, 13
27. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
§ Navigation and tab bars are transparent/blurred
o
o
The content behind is still visible, although obfuscated
This gives user context for the page content
Tuesday, September 3, 13
28. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
§ Navigation and tab bars are transparent/blurred
o
o
The content behind is still visible, although obfuscated
This gives user context for the page content
§ Colors, instead of chrome/borders, are used to clue users to actionable UI
Tuesday, September 3, 13
29. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
§ Navigation and tab bars are transparent/blurred
o
o
The content behind is still visible, although obfuscated
This gives user context for the page content
§ Colors, instead of chrome/borders, are used to clue users to actionable UI
o
tintColor is now on UIView superclass
Tuesday, September 3, 13
30. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
§ Navigation and tab bars are transparent/blurred
o
o
The content behind is still visible, although obfuscated
This gives user context for the page content
§ Colors, instead of chrome/borders, are used to clue users to actionable UI
o
o
tintColor is now on UIView superclass
Inherited automatically by subviews
Tuesday, September 3, 13
31. Views
§ Your app is now full screen
o
o
The status bar is drawn on top of your view instead of your view being below
This gives you maximum screen real estate
§ Navigation and tab bars are transparent/blurred
o
o
The content behind is still visible, although obfuscated
This gives user context for the page content
§ Colors, instead of chrome/borders, are used to clue users to actionable UI
o
o
o
tintColor is now on UIView superclass
Inherited automatically by subviews
Action sheets saturate hidden controls
Tuesday, September 3, 13
33. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
Tuesday, September 3, 13
34. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
§ Hope you used AutoLayout
Tuesday, September 3, 13
35. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
§ Hope you used AutoLayout
o
If not, now is the time to adopt it!
Tuesday, September 3, 13
36. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
§ Hope you used AutoLayout
o
o
If not, now is the time to adopt it!
AutoLayout-based views can more easily adapt to the new metrics
Tuesday, September 3, 13
37. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
§ Hope you used AutoLayout
o
o
If not, now is the time to adopt it!
AutoLayout-based views can more easily adapt to the new metrics
§ Buttons have no borders or bezels
Tuesday, September 3, 13
38. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
§ Hope you used AutoLayout
o
o
If not, now is the time to adopt it!
AutoLayout-based views can more easily adapt to the new metrics
§ Buttons have no borders or bezels
§ All pickers are now displayed inline
Tuesday, September 3, 13
39. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
§ Hope you used AutoLayout
o
o
If not, now is the time to adopt it!
AutoLayout-based views can more easily adapt to the new metrics
§ Buttons have no borders or bezels
§ All pickers are now displayed inline
Tuesday, September 3, 13
40. Changes in Controls
§ Almost all the iOS controls have had their dimensions modified
§ Hope you used AutoLayout
o
o
If not, now is the time to adopt it!
AutoLayout-based views can more easily adapt to the new metrics
§ Buttons have no borders or bezels
§ All pickers are now displayed inline
Tuesday, September 3, 13
44. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
Range of weight and space depending on size
Tuesday, September 3, 13
45. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
Tuesday, September 3, 13
46. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
§ Text Styles
Tuesday, September 3, 13
47. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
§ Text Styles
§ Accessibility
Tuesday, September 3, 13
48. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
§ Text Styles
§ Accessibility
o
Still can increase the size of the Body font
Tuesday, September 3, 13
49. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
§ Text Styles
§ Accessibility
o
o
Still can increase the size of the Body font
Legibility enhancements for enhanced contrast
Tuesday, September 3, 13
50. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
§ Text Styles
§ Accessibility
o
o
Still can increase the size of the Body font
Legibility enhancements for enhanced contrast
§ Text Kit
Tuesday, September 3, 13
51. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
§ Text Styles
§ Accessibility
o
o
Still can increase the size of the Body font
Legibility enhancements for enhanced contrast
§ Text Kit
o
New framework for working with text in a sophisticated way
Tuesday, September 3, 13
52. Typography
§ Kerning and Ligatures
§ Dynamic Type
o
o
Range of weight and space depending on size
Size-specific adjustments to keep type legible
§ Text Styles
§ Accessibility
o
o
Still can increase the size of the Body font
Legibility enhancements for enhanced contrast
§ Text Kit
o
o
New framework for working with text in a sophisticated way
Based on OSX Cocoa Text
Tuesday, September 3, 13
54. Animations
§ iOS7 is full of new animations for view transitions
Tuesday, September 3, 13
55. Animations
§ iOS7 is full of new animations for view transitions
§ Meaningful – not gratuitous
Tuesday, September 3, 13
56. Animations
§ iOS7 is full of new animations for view transitions
§ Meaningful – not gratuitous
o
They make sense in the flow of the app
Tuesday, September 3, 13
57. Animations
§ iOS7 is full of new animations for view transitions
§ Meaningful – not gratuitous
o
o
They make sense in the flow of the app
Example: photos and calendar
Tuesday, September 3, 13
58. Animations
§ iOS7 is full of new animations for view transitions
§ Meaningful – not gratuitous
o
o
They make sense in the flow of the app
Example: photos and calendar
§ API now open to control animations during view controller transitions
Tuesday, September 3, 13
60. Motion
§ Part of the look of the new OS is related to depth and motion
Tuesday, September 3, 13
61. Motion
§ Part of the look of the new OS is related to depth and motion
o
Springboard has a parallax effect behind it
Tuesday, September 3, 13
62. Motion
§ Part of the look of the new OS is related to depth and motion
o
Springboard has a parallax effect behind it
§ Alerts move as your position moves
Tuesday, September 3, 13
63. Motion
§ Part of the look of the new OS is related to depth and motion
o
Springboard has a parallax effect behind it
§ Alerts move as your position moves
o
Best seen in Safari multiple-page views
Tuesday, September 3, 13
64. Motion
§ Part of the look of the new OS is related to depth and motion
o
Springboard has a parallax effect behind it
§ Alerts move as your position moves
o
Best seen in Safari multiple-page views
§ UIMotionBehavior is the main class in the new API
Tuesday, September 3, 13
67. Dynamics
§ Slide to get camera on lock screen
o
Bounces and hits bottom of screen
Tuesday, September 3, 13
68. Dynamics
§ Slide to get camera on lock screen
o
o
Bounces and hits bottom of screen
Simulated weight
Tuesday, September 3, 13
69. Dynamics
§ Slide to get camera on lock screen
o
o
Bounces and hits bottom of screen
Simulated weight
§ Messages scroll a bit behind your finger
Tuesday, September 3, 13
70. Dynamics
§ Slide to get camera on lock screen
o
o
Bounces and hits bottom of screen
Simulated weight
§ Messages scroll a bit behind your finger
§ Implemented by UIDynamics
Tuesday, September 3, 13
71. Dynamics
§ Slide to get camera on lock screen
o
o
Bounces and hits bottom of screen
Simulated weight
§ Messages scroll a bit behind your finger
§ Implemented by UIDynamics
o
A physics engine built into UIKit
Tuesday, September 3, 13
74. Adaptive Multitasking
§ New UI for showing running apps
§ With new features in notifications and background transfers, an app can
update its UI “in the background”
Tuesday, September 3, 13
75. Adaptive Multitasking
§ New UI for showing running apps
§ With new features in notifications and background transfers, an app can
update its UI “in the background”
o
OS takes a “snapshot” picture of the new UI
Tuesday, September 3, 13
76. Adaptive Multitasking
§ New UI for showing running apps
§ With new features in notifications and background transfers, an app can
update its UI “in the background”
o
OS takes a “snapshot” picture of the new UI
§ Makes it feel like the app is running the whole time
Tuesday, September 3, 13
78. iCloud
§ This is mostly a reliability- and speed-improvement release
Tuesday, September 3, 13
79. iCloud
§ This is mostly a reliability- and speed-improvement release
o
New feature: iCloud keychain for credentials
Tuesday, September 3, 13
80. iCloud
§ This is mostly a reliability- and speed-improvement release
o
New feature: iCloud keychain for credentials
§ Can now test from simulator
Tuesday, September 3, 13
81. iCloud
§ This is mostly a reliability- and speed-improvement release
o
New feature: iCloud keychain for credentials
§ Can now test from simulator
§ Integrated debugging tools in Xcode
Tuesday, September 3, 13
86. Xcode & Objective-C
§ Xcode improvements
o
o
o
Cleaner UI
Faster
Better image support
Tuesday, September 3, 13
87. Xcode & Objective-C
§ Xcode improvements
o
o
o
o
Cleaner UI
Faster
Better image support
Improved IB for Auto Layout
Tuesday, September 3, 13
88. Xcode & Objective-C
§ Xcode improvements
o
o
o
o
Cleaner UI
Faster
Better image support
Improved IB for Auto Layout
§ Objective-C
Tuesday, September 3, 13
89. Xcode & Objective-C
§ Xcode improvements
o
o
o
o
Cleaner UI
Faster
Better image support
Improved IB for Auto Layout
§ Objective-C
o
Modules as a way to import frameworks more efficiently
Tuesday, September 3, 13
90. Xcode & Objective-C
§ Xcode improvements
o
o
o
o
Cleaner UI
Faster
Better image support
Improved IB for Auto Layout
§ Objective-C
o
o
Modules as a way to import frameworks more efficiently
instancetype to help compiler verify return values
Tuesday, September 3, 13
91. Xcode & Objective-C
§ Xcode improvements
o
o
o
o
Cleaner UI
Faster
Better image support
Improved IB for Auto Layout
§ Objective-C
o
o
o
Modules as a way to import frameworks more efficiently
instancetype to help compiler verify return values
Explicitly-typed Enums
Tuesday, September 3, 13
92. Xcode & Objective-C
§ Xcode improvements
o
o
o
o
Cleaner UI
Faster
Better image support
Improved IB for Auto Layout
§ Objective-C
o
o
o
o
Modules as a way to import frameworks more efficiently
instancetype to help compiler verify return values
Explicitly-typed Enums
ARC speed improvements
Tuesday, September 3, 13
97. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
Tuesday, September 3, 13
98. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
Tuesday, September 3, 13
99. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
Tuesday, September 3, 13
100. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
Tuesday, September 3, 13
101. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
o
New extensions
Tuesday, September 3, 13
102. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
o
New extensions
§ Message UI
Tuesday, September 3, 13
103. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
o
New extensions
§ Message UI
o
Add attachments
Tuesday, September 3, 13
104. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
o
New extensions
§ Message UI
o
Add attachments
§ Map Kit
Tuesday, September 3, 13
105. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
o
New extensions
§ Message UI
o
Add attachments
§ Map Kit
o
Support for 3d maps and other enhancements
Tuesday, September 3, 13
106. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
o
New extensions
§ Message UI
o
Add attachments
§ Map Kit
o
Support for 3d maps and other enhancements
§ Audio Unit
Tuesday, September 3, 13
107. Framework Enhancements
§ Store Kit
o
Verify in-app purchases on device or server
§ Security
o
iCloud keychain access
§ Pass Kit
o
Multiple passes at once; more control over date and viewing
§ OpenGL ES
o
New extensions
§ Message UI
o
Add attachments
§ Map Kit
o
Support for 3d maps and other enhancements
§ Audio Unit
o
Inter-app audio
Tuesday, September 3, 13
109. New Features and Frameworks
§ AirDrop
Tuesday, September 3, 13
110. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
Tuesday, September 3, 13
111. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
Tuesday, September 3, 13
112. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
Tuesday, September 3, 13
113. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
Tuesday, September 3, 13
114. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
Tuesday, September 3, 13
115. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
o
Control closed captions in media
Tuesday, September 3, 13
116. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
o
Control closed captions in media
§ Safari Services
Tuesday, September 3, 13
117. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
o
Control closed captions in media
§ Safari Services
o
Add URLs to reading list
Tuesday, September 3, 13
118. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
o
Control closed captions in media
§ Safari Services
o
Add URLs to reading list
§ Sprite Kit
Tuesday, September 3, 13
119. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
o
Control closed captions in media
§ Safari Services
o
Add URLs to reading list
§ Sprite Kit
o
2d game engine
Tuesday, September 3, 13
120. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
o
Control closed captions in media
§ Safari Services
o
Add URLs to reading list
§ Sprite Kit
o
2d game engine
§ Game Controllers
Tuesday, September 3, 13
121. New Features and Frameworks
§ AirDrop
o
Seamless file transfer between devices in close range
§ Peer-to-peer connectivity
§ JavaScript Core framework
o
Access to JavaScript engine from Objective-C
§ Media Accessibility
o
Control closed captions in media
§ Safari Services
o
Add URLs to reading list
§ Sprite Kit
o
2d game engine
§ Game Controllers
o
API that abstracts away usage of ad hoc game controllers
Tuesday, September 3, 13
127. Your App
§ New or upgrade?
o
Support iOS6 as well, or just iOS7? (easier)
Tuesday, September 3, 13
128. Your App
§ New or upgrade?
o
Support iOS6 as well, or just iOS7? (easier)
§ Take full screen into account
Tuesday, September 3, 13
129. Your App
§ New or upgrade?
o
Support iOS6 as well, or just iOS7? (easier)
§ Take full screen into account
§ Use animation instead of heavy imaging to guide user in your app
Tuesday, September 3, 13
132. Supporting iOS6
§ Lean heavily on the iOS7 UI transition guide
§ Auto Layout will do much of the heavy lifting
Tuesday, September 3, 13
133. Supporting iOS6
§ Lean heavily on the iOS7 UI transition guide
§ Auto Layout will do much of the heavy lifting
§ Consider using a new design for iOS7
Tuesday, September 3, 13
134. Supporting iOS6
§ Lean heavily on the iOS7 UI transition guide
§ Auto Layout will do much of the heavy lifting
§ Consider using a new design for iOS7
o
Structure more important than aesthetics
Tuesday, September 3, 13
136. Summary
§ iOS7 is a major UI redesign release
Tuesday, September 3, 13
137. Summary
§ iOS7 is a major UI redesign release
§ Content over chrome
Tuesday, September 3, 13
138. Summary
§ iOS7 is a major UI redesign release
§ Content over chrome
§ Many new APIs to take advantage of to improve your app
Tuesday, September 3, 13