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
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
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