Designing Interfaces for iPhone X
- 1. DESIGNING INTERFACES FOR IPHONE X DALLAS APP DEVELOPERS NICK CULBERTSON
- 2. DESIGNING INTERFACES FOR IPHONE X OVERVIEW ▸ What’s new in iPhone X ▸ Do’s & Don’ts ▸ Interface Builder & Coding ▸ * Resources: ▸ https://www.raywenderlich.com/173928/develop-design-iphone-x ▸ https://developer.apple.com/ios/update-apps-for-iphone-x/ ▸ https://developer.apple.com/ios/human-interface-guidelines/overview/ iphone-x/
- 3. OUR VISION HAS ALWAYS BEEN TO CREATE AN IPHONE THAT IS ENTIRELY SCREEN. Apple on iPhone X DESIGNING INTERFACES FOR IPHONE X
- 4. DESIGNING INTERFACES FOR IPHONE X NOTE S8 ▸ Samsung’s newest phone supports an end to end display
- 5. WHAT’S NEW IN IPHONE X?
- 6. DESIGNING INTERFACES FOR IPHONE X SPECS ▸ Screen size is 375 x 812 points ▸ Aspect ratio is 9:19.5 instead of 9:16 ▸ Screen resolution is @3x: 1125 x 2436 pixels ▸ Screen design adds sensor housing, home indicator and rounded corners. ▸ New Safe Layout margins
- 7. DESIGNING INTERFACES FOR IPHONE X AND YOU THOUGHT YOU WERE DONE… ▸ New screen size ▸ New aspect ratio ▸ New UI design constraints ▸ Screenshots & Preview Videos ▸ 2436 x 1125 Screenshots ▸ 1920 x 886 Preview Video
- 9. DESIGNING INTERFACES FOR IPHONE X DO’S ▸ Use Safe Area auto layout constraints ▸ Always show the status bar unless hiding it adds real value to your app ▸ Use PDF for flat vector artwork; provide @3x and @2x of rasterized artwork ▸ Be mindful of aspect ratio differences when reusing existing artwork ▸ Support iOS 9 and newer
- 10. DESIGNING INTERFACES FOR IPHONE X DON’TS ▸ Don’t place interactive controls at the very bottom of the screen and in corners. ▸ Don't mask or call special attention to sensor housing, corners or home indicator. ▸ Don’t auto-hide the indicator for accessing the Home screen unless totally necessary. ▸ Don’t interfere with systemwide screen-edge gestures
- 11. INTERFACE BUILDER & CODING
- 12. DESIGNING INTERFACES FOR IPHONE X INTERFACE BUILDER ▸ Enable Safe Area Layout Guides ▸ Keep backgrounds full screen ▸ Constrain UI elements to Safe Area Margins ▸ Use “Less than or Equal to” and constraint priority to reduce programmatic UI placement
- 13. DESIGNING INTERFACES FOR IPHONE X SAFE AREA HIGHLIGHT
- 14. DESIGNING INTERFACES FOR IPHONE X MULTIPLE CONSTRAINTS
- 15. DESIGNING INTERFACES FOR IPHONE X SAFE AREA VS. SUPERVIEW
- 16. DESIGNING INTERFACES FOR IPHONE X CODING ▸ Detect if iPhone X #define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) #define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT)) #define IS_IPHONEX (IS_IPHONE && SCREEN_MAX_LENGTH == 812.0) if(IS_IPHONEX){ NSLog(@"This is iPhoneX”); } ▸ Enable double swipe to exit & hide home indicator - (UIRectEdge)preferredScreenEdgesDeferringSystemGestures{ return UIRectEdgeBottom; } - (BOOL)prefersHomeIndicatorAutoHidden{ return true; }
- 17. DESIGNING INTERFACES FOR IPHONE X CONCLUSION ▸ Updating for iPhone X is pretty simple for most apps ▸ Anticipate creating new marketing materials and testing to take a while ▸ Embrace the changes and don’t get left behind