Want to design UI for iPhone X? Here are 11 design tips

When designing UI for iPhone X, the completely different screen and interaction methods will make UI designers face some new challenges. Of course, the new design will also give designers some new opportunities in many cases.

In today’s article, I will share some tips and suggestions for designing for iPhone X, which can make the UI design on iPhone X better. Don’t forget, the new iPhone will be launched in September, and designers will move further and further away from the iPhone with a Home button. The full screen with a notch will be the main battlefield for designers in the future.

A. Screen display

iPhone X has a high-resolution Super Retina display with rounded corners and a resolution of 1125x2436px. Although it leaves more display space for designers and can provide users with a more immersive user experience, designers still need to consider the following issues when designing UI:

1. 3x image size

The images used on iPhone X are at a 3x ratio. When you use images and other visual materials, make sure to include 2x and 3x resolution materials. In addition, for high-resolution characters and flat materials, vector SVG materials are the best, thus avoiding possible resolution issues.

2. New display sizes mean more space and content

The screen size of iPhone X is 375pt wide and 812pt high. Since it is a 3x display, it is converted to 1125 x 2436 px. In the vertical direction, the width of iPhone X's display is consistent with the width of the 4.7-inch screen display of the previous iPhone 6, iPhone 7 and iPhone 8. Therefore, the amount of information displayed in the horizontal direction should be the same as that of other previous models. The difference mainly appears in the height. The height of 812pt is 145pt higher than the previous non-full-screen, which makes iPhone X have almost 20% more extra space.

3. Pay attention to controlling the aspect ratio of the background image

Unlike previous iPhones, the aspect ratio of iPhone X is no longer 16:9, but closer to 19.5:9. When selecting background images, be careful not to cut off the main visual subject and key information in the image, and make sure that the key information can be displayed appropriately under this screen ratio (for example, don't leave too much white space above and below).

4. Don’t place controls and elements on the edge of the screen

Another problem with full screen is that users may accidentally touch elements on the edge of the screen during interaction. If users are used to wearing a phone case, the elements may not be triggered effectively and quickly because they are too close to the edge of the protective case. In short, try to make element controls appear in the main area of ​​the screen that is easy to interact with.

5. Use safe areas to display content

Building layouts within the safe area ensures content interactivity and avoids overlapping of system components and UI elements. In the interface of a phone with a Home button like the iPhone 8, the wider border and the Home button make the entire standard rectangular screen a safe interactive area. But the iPhone X is different. There is a virtual Home Bar at the bottom, and the "bangs" on the top screen carry the camera. The overall shape is irregular. If controls are placed in this area and the bottom during design, they will be covered. The area between the two is safe.

When presenting content, there are two exceptions. One is long vertical scrolling content, which can be fully displayed by sliding and browsing. The other is background images, which will not be affected because they do not involve interaction.

6. Don’t worry about native UI components

If the APP you design uses only native UI components from official design materials (such as navigation bars, tables, tab bars, etc.), then you don’t have to worry about them not matching your interface, as they will be used appropriately in the interface.

B. Home Bar indicator

Starting with iPhone X, the basic interaction of the iOS system has undergone tremendous changes with the change of hardware. The Home button has become history, and the interaction method has begun to rely more on gesture interaction. For example, the previous interaction method of single-clicking the Home button to return to the home page has been replaced by gesture operation. Users only need to swipe up from the bottom of the screen to return to the home page.

Swipe is the new click.

Although the main triggering method is the bottom edge of the screen, the addition of the Home Bar indicator visually makes people always aware of the existence of this interaction. This control needs to be taken into consideration when designing UI and APP.

7. Avoid placing interactive elements around the Home Bar indicator

Similar issues have been mentioned before. Avoid placing interactive components around the indicator to avoid overlap between interactive components and the Home Bar, which may cause interaction conflicts. Even if you are close to it, it is best to maintain a proper distance to avoid accidental touches.

8. Don’t be too concerned about the Home Bar indicator

The Home Bar is a frequently used component. Don’t over-decorate it, don’t over-emphasize it in the design, don’t hide it, and try not to make users pay special attention to it.

9. Create a full-screen experience with the help of automatic hiding function

When showing videos or other visually intensive content, you can create a more immersive experience by automatically hiding the Home Bar indicator.

C. Bangs area

Apple officially calls the location where the camera is placed on the top of the screen the Notch Area, but people usually call it the screen "bangs", which is a very descriptive expression. Some people think it is attractive, while others think it is ugly. But as designers, we can reasonably use this area to design.

10. Don’t cover the bangs area

Some designers try to make this area less conspicuous and make the iPhone X look like it has no bangs by designing it, such as adding a black background strip at the top of the background to make the top strip look completely black. This obsessive-compulsive aesthetic may not suit everyone's preferences, so try to avoid it, because on the other hand it will make your experience on iPhone X seem like it has been downgraded to that of iPhone 8 and will be inconsistent with other APP experiences. The APPs and games you design should completely fill the entire screen.

11. Don’t hide the status bar

The status bar in the app provides users with a lot of basic information, which is crucial for users. Although the status bar is higher than previous versions of iOS (previously 20pt high, now 44pt), it can indeed display more content after hiding, but compared with the size of the entire interface, the improvement is not obvious. Unless there is a specific need (to create a very deep immersive experience), try not to hide the status bar.

One more thing

According to iFanr: This year's new iPhone will not be named "iPhone 9", but there will be a product directly named "iPhone".

Specifically, the largest of the three new iPhones will be named iPhone XS Plus, and the 5.8-inch model will be iPhone XS, both of which are S series of the original iPhone X. The 6.1-inch iPhone will be a cheaper model and will be named iPhone as the entry-level product in this series.

It has only been 30 days since the launch of the iPhone in early September every year. The new iPhone is very close to us. The new iPhone represented by iPhone X will thoroughly implement the new interaction based on gestures and open the next era of interaction. This is a very important change for both designers and users, so be prepared.