When designing the UI for the iPhone X, different screens and ways of interacting with each other will pose new challenges for UI designers. Of course, the new design will give designers some new opportunities in many cases.
In today’s article, I’ll share some tips and suggestions for designing for the iPhone X that will make the UI design on the iPhone X even better. Don’t forget that the next September will usher in a new iPhone, and the designer will be getting farther and farther from the iPhone with the Home key. The full screen with the Liu sea will be the main battlefield of the designer’s design in the future.
A, screen display
IPhone X has a super high resolution, round and round Super Retina display with a resolution of 1125x2436px. Although it leaves more space for the designer and provides a more immersive user experience for the user, the planner still needs to consider the following problems when designing UI. :
1, 3x picture size
The picture used on iPhone X is the proportion of 3x, and when you are using pictures and other visual materials, make sure that you have the material that contains the resolution of 2x and 3x. In addition, for high-resolution character and plane material, vector SVG material is the best, thus avoiding the resolution problems that may arise.
2, the new display size means more space and content.
The screen display size of iPhone X, the width 375pt, and the height of 812pt, is converted to PX 1125 x 2436 Px, and the width of the iPhone X display is consistent with the width of the iPhone 6, the iPhone 7 and the 4.7 inch screen display of the 4.7 inch 8. The amount of interest should be no different from other models in the past. The difference is mainly in height, with 812pt 145pt higher than previously incomplete screens, giving the iPhone X about 20% more space.
3. Pay attention to the height width ratio of the background pictures
Unlike the screen size ratio of the previous iPhone, the iPhone X’s ratio of height to width is no longer the proportion of 16:9, but close to 19.5:9. When selecting the material for the background picture, be careful not to cut off the visual subject and key information in the picture, and notice that the key information is proportional to the screen. Display appropriately (for example, don’t leave too many blanks on the top or bottom).
4. Do not place controls and elements on the edge of the screen
Another problem accompanied by a comprehensive screen is that users can be mistakenly touched on the edge of the screen in the process of interaction. If the user has the habit of carrying a cell phone shell, the element may be too close to the edge of the protective shell and can not be triggered effectively and quickly by the user. In short, try to make element controls appear in the main areas where the screen is easy to interact.
5. Use the security area to display the content
Building a layout in a secure area ensures interactivity of content and avoids overlapping between system components and UI elements. In a phone interface like the iPhone 8 with Home keys, the presence of a wider border and Home keys makes the standard rectangular screen a whole safe area of interaction. But iPhone X is different, the bottom has a virtual Home Bar, the “Liu Hai” on the top screen is loaded with the camera, and the whole is heterotypic. If the control is placed in this area and at the bottom, it will be covered. The area between the two is safe.
And when the content is presented, there are two exceptions. One is a long vertical scroll, which can be completely displayed by sliding browsing, and the other is a background picture, because it does not involve interaction, so it will not be affected.
6. Do not worry about native UI components
If all the APP you have designed is a native UI component in the official design material (such as the navigation bar, the table, the label bar), you don’t have to worry about the mismatch between them and your interface, and they will be properly applied to the interface.
B, Home Bar indicator
From iPhone X, the basic interaction of the iOS system has changed dramatically with the change of the hardware, and the Home key has become a history, and the interaction mode has also started to rely on the driver of gesture interaction. For example, the interaction of the previous click Home key to the home page was replaced by the gesture operation, and the user only needed to slide upwards from the bottom of the screen to return to the home page.
Sliding is a new click.
Although the trigger is mainly triggered at the bottom edge of the screen, the Home Bar indicator is added visually, which makes people aware of the existence of the interaction, and this control needs to be taken into account when the UI and APP are designed.
7, avoid placing interactive elements around the Home Bar indicator.
A similar problem has been mentioned earlier to avoid placing interactive components around the indicator to avoid overlap between interaction components and Home Bar, resulting in interaction conflicts. Even if it is near, it is best to maintain an appropriate distance to avoid miscontact.
8. Don’t care too much about the Home Bar indicator
Home Bar is a common use of high frequency components, do not overly decorate, and do not overemphasize in the design, do not hide it, try not to let the user care about it.
9. Create full screen experience with the help of auto hide function.
When presenting video or other visual content, you can create a more immersive experience by automatically hiding the Home Bar indicator.
C, Liu Hai region
Apple’s official position is to place the camera at the top of the screen as Notch Area, but it is often called the screen “Liu Hai”, which is very image. Some people think it is very attractive, while others find it very ugly. But as designers, we can reasonably use this area to design.
10. Do not cover up the area of the Liu Hai
Some designers will try to use the design to make the area look less visible, so that iPhone X looks like no bangs, such as adding a striped black background on the top of the background, making the top one look completely black. This obsessive-compulsive style of aesthetics does not necessarily fit everyone’s preferences and tries to avoid this, because on the other hand, it will let your iPhone X experience be degraded to iPhone 8 and disagree with other APP experiences. The APP and game you designed should fill the whole screen in full.
11. Do not hide the status bar
The status bar in APP provides users with many basic information, which is very important for users. Although the status bar is higher than the previous version of the iOS system (before 20pt is high and now is 44pt), it can actually display more content after hiding, but it is not obvious compared to the size of the entire interface. Do not hide the status bar unless you are building a very deep immersive experience under specific needs.