Haidian website construction --How to design for IPHONE X
Designing for iPhone X will bring some new challenges, but it will also bring some new design opportunities. This article will share some suggestions to help you design applications and games that look and feel great on iPhone X.
Show details
The iPhone X has a new high-resolution, round, edge super retinal display with a resolution of 1125 × 2436 pixels. Although it provides more space for designers to display content and allows them to create a truly immersive experience, the following points need to be considered when designing this device:
Haidian website construction
1. Triple image scale factor
IPhone X has a 3x image scale factor (@ 1x, @ 2x, and @ 3x). When raster images are required, make sure to include 2x and 3x image resolutions in the application image resolution directory. In addition, it is recommended that SVGs be used for glyphs and other planar graphics that require high-resolution scaling, as they are resolution independent.
2. New display size: more screen space, more content
The X display size of iPhone is 375pt wide * 812 pt high. In a 3x display, this is 1125 px @ 3x width * 2436 px @ 3x height. In the longitudinal direction, the width displayed on iPhone X matches the 4.7 inch screen width of iPhone 6, iPhone 7, and iPhone 8, so the amount of information displayed is no different from the narrow size of these devices. But the monitor has different heights: 812pt is 145pt higher than 4.77t, up to 4.7 ". This additional height of iPhone X provides 20% space for content.
3. Consider aspect ratio when creating background images
When designing the background image, remember that the aspect ratio of iPhone X is also different from 4.7 Display. The background graphics created for the aspect ratio of iPhone 816:9 need to be adjusted to meet the technical requirements of iPhone X. In order to avoid negative results, it is better to keep key visual information visible by composition, without considering the aspect ratio of display.
4. Do not place elements at the edges and corners of the display
Rounding brings another challenge to designers: every element that is too close to the edge of the viewport may be clamped or covered by the sensor housing. The key is to embed controls and other elements to avoid this situation.
5. Use safe area layout to display content
The security zone layout helps avoid ignoring system UI elements when locating content and controls. On iPhone 8, the security zone is as large as the video screen, and no bar is displayed. On iPhone X, the security area layout is embedded from the top and bottom of the screen edge, even if no bars are visible on the screen. This helps prevent interface elements from being cut or overwritten.
However, there are two exceptions to the security zone: the background of the application and the vertical scrolling view. Vertical scrollable views (such as tables and sets) should extend all the way to the bottom of the display and to the edge, not limited to the safe area.
6. Don't worry about native components
If your application uses local iOS components (such as navigation bar, table, set view, tab bar, etc.), and you are worried about how they will be applied to iPhone X, don't worry! They will be embedded and positioned automatically.
HOME indicator
IPhone X has changed one of the interactive foundations of iPhone, and the home key is now a legacy. Before iPhone X users want to access the application switcher or home screen, they can do this by clicking the iPhone Home button. For iPhone X, the same operation can be performed when the user slides up along the bottom edge of the screen. Swipe card is a new click.
To replace the home key with a gesture and make it intuitive, Apple provides information about interaction in the form of an indicator at the bottom edge of the screen; A line at the bottom of the screen. This indicator is displayed on the interface of the iPhone X application. When designing an application, you need to take this into account.
Note the white line at the bottom. This is the new household indicator. It will notify you that you can swipe up the screen to return to your home screen or multitask.
7. Avoid placing interactive elements near the HOME indicator
It is better to avoid placing interactive elements, such as buttons, near the indicator, or there will be a risk of overlapping with the Home indicator. Just leave some space near the home indicator and place the non scrollable elements in the security area.
8. Do not pay special attention to HOME instructions
The home indicator is not decorative. Don't cover it up, and don't draw special attention.
9. Use auto hide full screen experience
When rendering full screen visual content such as video, you can use auto hide to hide the main indicator.
Notch area
The notch area is probably the most controversial part of the iPhone X design. Some people think it has visual appeal; Others think it's ugly. But as designers, we can use the screen space available in the recessed area.
10. Don't cover up the trap
Some designers try to make the experience on iPhone X look like that on iPhone 8; They put the black bar on the top to make it look like an old-fashioned application. It's best to avoid this situation - it will only make your app feel inconsistent with other apps on iPhone x.
11. Do not hide the status bar
If you hide the status bar in your app now, you'd better reconsider this decision. Because the status bar area is relatively high (previously 20pt high, now 44pt), you have more properties to display your content. Add content useful to users.
This article comes from: Haidian website construction
