iPhone
X is already here remodeling the manner the content material is
displayed and developing a logo-new experience. It has an facet to part
wonderful Retina show with a decision of 1125×2436 px. iPhone X features
a special reduce-out on the top of the display screen. for that reason
designing apps for this futuristic system brings new challenges in
addition to opportunities. let’s discover ways to layout an app or
recreation to experience and appearance superb on iPhone X.
Screen Sizes
Though the screen width remains the same for iPhone X, and it's 145 pt taller
than the iPhone 6, 7, and 8. Such screen dimensions result in 20% more
vertical space. When working out the app design for iPhone X, try not to
make the UI too complex taking advantage of all new features (cut-out, new home indicator, round edges).
The
good news is if you have a native app for iOS, you don’t have to make
any changes - the app will be automatically adopted for the new iPhone
X. All navigation bars, collection views, tables, and tab bars will be
automatically positioned. When designing, you must ensure that the
layouts fit the screen perfectly. If your app has a custom layout, you may need to update it for the new iPhone X. With the Auto Layout, everything will be easy.
Specific
challenges may occur with full-screen images. If you use them, consider
updating the app while they can be cropped and some essential elements
may be hidden.
Center your content
The
device features new sensors and particular screen corners so make sure
that your UI won’t get clipped. Speaking about the content, it’s
preferable to place it in the center with symmetrical insets. Again with
the Auto Layout, your content will be automatically adapted to the safe
area of iPhone X. Nothing will be hidden behind round corners, home
indicator or sensors.
Note, Apple highly recommend not to hide the cut-out and curved edges. So forget about placing black bars.
Brand-new status bar
Due to the sensors, the new bar has got 2 parts. It has become nearly 2x taller than on iPhone 6,7, and 8 (previously it was 20 pt, and now it’s 44 pt).
So if your app features a fixed status bar and content just below it,
consider updating the app in order not lose anything. Again, don’t
forget about the safe area while designing a new app or iOS.
Moreover,
the status bar should be visible all time. Since the screen is bigger
and taller, it would be a good idea to unhide the bar. It is essential
to point, that the new status bar doesn’t change its height when the
device records voice or tacks the location.
Where to place interactive controls?
Since
the physical home button was replaced by the home indicator, the place
of interactive controls should be changed. There should be more space
for gestures and swiping up around the home indicator. And if there are
interactive controls, how will the user go back to the home screen? The
users may accidentally use swiping up, and the UI of an app will be
difficult to reach since every time they swipe, they will go back to the
home screen.
However, you should and have to use the function bars and tab bars but try not to interfere with the home indicator.
Smart home indicator
iPhone
X features a redesigned home indicator. Apple decided to opt out of a
physical home button. It’s a small white line on the bottom of the
screen. To get back to the homescreen, you can swipe up from any app.
With
the new iOS, the users get an adoptive home indicator which hides
automatically when the screen is inactive and appears when you relaunch
the app. This function comes in handy when listing photos or watching
videos. Besides the auto-hide, the home indicator adapts to the color of
your app’s background and changes it automatically.
With
the new smart home indicator, there is no place for button pressing,
everything is controlled by gestures. Moreover, you can use custom
gestures in games as well as set own gestures to control the device.
More colors than ever before
iPhone X features the new Super Retina Display with the support of P3 colors. And it means that the colors are richer and more saturated when compared to the older devices.
Improved security with Face ID
Previously,
iPhones were fitted with Touch ID. And iPhone X features Face ID for
authentication to keep your data secure. Face ID features
state-of-the-art algorithms to scan your face and unlock iPhone X. In
case your app needs Apple Pay or other identifications, don’t integrate
Touch ID for that, take advantage of the new technology brought up by
Apple.
Video
The new screen of iPhone X changes the way video is played on the device. The system video player has two viewing modes - full-screen and fit-to-screen.
Make sure that all custom video players behave as expected. The video
should fill the display when played. If it fails, it may result in too
much cropping. Moreover, it would be great if the users will be able to
switch between two viewing modes.
Apple advises keeping the original aspect ratio since the iOS won’t be able to scale the video based on the viewing mode correctly.
Where can I preview my app UI for iPhone X?
The good news is you can use Xcode 9 stimulator to preview your app. And check if something needs to be updated for iPhone X.
In a nutshell
Though
the new iPhone X stands out from the crowd providing absolutely new
user experience, designing apps for iPhone X is still a smooth sail.
Take care of the new display capabilities and its dimensions and make
most of them.