iPhone X is a brand-new edge-to-edge display device released by Apple Inc. in the autumn of 2017. As the largest and most popular short video product over China, Kwai App had to update its experience and design for iPhone X. The most special also the challenging part of this project was that iPhone X has a completely different shape & size of the screen with a set of new gesture rules for its basic interaction, but we had to complete all work before iPhone X’s shipped officially. That means we had no devices to preview and debug, and meanwhile, we didn’t have any references (competitor information) to learn from except the official iPhone X documentation from iOS Human Interface Guideline, which was really a big challenge for me, the only designer in this project, and the engineering team…
As the only one designer, in this project where there was no project manager, I pushed this project and collaborated with iOS engineers during the first three developing phases.
After taking over this task, I pushed my work by following steps:
Fill the screen and Inset essential content to prevent clipping. Must ensure that layouts fill the screen and UI elements & the essential content in the layouts don’t be obscured by iPhone X’s rounded corners, home indicator and sensor housing.
Don't mask or call special attention to key display features. Do not trying to decorate and hide the sensor housing, home indicator and rounded corners by any way.
Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. The gestures at the bottom edge of the display to access the Home screen and app switcher may cancel the custom gestures implemented in this area. Meanwhile you should reconsider the access of your key functionalities, becauce the far corner of the screen ( particularly the top-left area) can be difficult area for people to reach comfortably.
Provide a full-screen experience. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like list view, tables (Grids) and collections, continue all the way to the bottom.
Do not hide the statusbar except there are additional valuable information having to be presented. In 4.7’’ display, we usually hide statusbar to provide full-screen experience to users. But the display on iPhone X provides more vertical space for content. As a result, the area status bar occupied may be not fully utilized. So presenting status bar can keep your screen visually balanced and provide more valuable status information to users as well.
Allow auto-hiding the home indicator sparingly to provide more immersive experience. When auto-hiding is enabled, the indicator fades out if the user hasn't touched the screen for a few seconds. It reappears when the user touches the screen again. Only when people stay in passive viewing experience like playing videos or photo slideshow, this behavior can be enable.
Based on the fact that the largest aspect ratio can be output by iOS’s camera is 16：9, and the principle - what you see is what you get, I made these adapting rules for production and consumption experience of Full-Screen Multimedia assets:
It’s great to see my design works shipped by our awesome developers. Most the adapting design mentioned above was shipped in the previous three phases . Since there were lots of variations and nuances in the design, I used Google Docs and Sketch to detail out the adapting strategies and to design the adaptation layouts, and measure the specs. This helped a lot with minimizing the hand-off work. I also learned and practiced how to make a set of design strategies to cover all functional modules of a product in this process.
The follow-up implementing of the full-screen live experience would be continued with the number of Live hosts using iPhone X increasing.
With increasing number of edge-to-edge display devices’ releasing and popularizing, we would think further about the next generation design style for the full screen.
1. Foreground UI Elements don’t extent to the edge of the screen, particularly the bottom panels which need adapting in both portrait view and landscape view perfectly.
2. Take safe area into account.
3. Introduce responsive design thinking into mobile app design - a set of UI Elements can adapt themselves to any screen sizes. For instance：
4. Utilize full screen to provide users with more immersive and high-quality contents and experience.