The iPhone X, a new iPhone with a taller screen and almost no bezels. IOS11 comes with new adaptation rules for iPhone X. The 5.8-inch OLED screen is larger than the 5.5-inch screen on the iPhone 8 Plus, but has the same body size as the iPhone 8. For designers, this means more freedom to design.
Higher screen
As you can see below, a higher 145 pt could mean adding a line of content, or adding a menu that we once thought was too narrow. Despite the difference in resolution, the extra space also works on the iPhone 8 and 8 Plus, which have the same proportions.
More space for content
If the iPhone X is 332 pt taller than the original iPhone, that’s the height of seven navigation bars. In the future, the content on the new iPhone will look better, and the hamburger menu will be watered down.
When we put two iphones from different eras next to each other, we can notice that the content space has almost doubled. In general, this means that current applications need to include these columns: a status bar, a navigation bar, tabs, and a home indicator for accessing the home screen. Leaving out these columns not only makes the user experience worse, but also makes your app inconsistent with iOS native apps.
“Straight Bangs”
Perhaps the most controversial top 10 percent of the new design is the “fringe.” The original deep sense camera system, also known as the groove (or “fringe” in Chinese), acts as a split element that allows the iPhone X’s screen to truly “go from the edge of the screen to the edge of the phone.” Removing the notch was technically impossible due to the integration of Face ID, camera, and headset, making it one of Apple’s biggest design-wise compromises in recent years. But when you look at how other phone makers have addressed this issue, whether it’s “high forehead” or “low jaw” or a combination of the two, it’s hard to say they haven’t compromised.
Apple recommends not using the black status bar to hide the groove. Their reasoning was that, while the place was a pain in the neck, it still provided valuable space for the status bar and extra content. It creates coherence in the context and gives the impression of a larger screen. Background elements such as wallpapers, maps, and colors are not affected much when trimmed with rounded corners and grooves. By hiding this space, your app will feel smaller and inconsistent with other apps.
The headlines
In iOS 11, screen titles are typically 34pt (dots) in size and are in bold black. Interestingly, when you swipe up the screen, the title automatically switches to the navigation bar’s location, giving us precious space back. Leaving only a small portion of the navigation bar in landscape mode gives designers a very clear message: first, you should use the extra space more wisely; Second, you need to make your design adaptive, because it’s likely that the extra space you have in portrait mode won’t be there in landscape mode.
Bigger status bar
The height of the status bar has more than doubled, from 20pt to 44pt. The notification bar can now be awakened by sliding down the left status bar, while the control center is awakened by sliding down the right navigation bar. When done quickly, users can easily return to the home screen by simply swiping the bottom edge of the screen. However, if you want to see the navigation bar, you must break the swipe.
Security zone layout guide
When designing for the iPhone X, we should always be aware and try to avoid cutting out corners and grooves. How best to avoid such a situation? The use of safe areas is a great way to make sure your content doesn’t get cropped. Generally speaking, backgrounds can be used outside the security zone, while text, images and buttons need to be designed within the security zone.
The iPhone X in landscape mode
In landscape mode, the status bar is hidden to maximize space for content. In iOS 11, the navigation bar was reduced to 32pt, the TAB bar was 30pt, and the virtual home button was 23pt. While users won’t switch to landscape mode on the iPhone X for the most part, there will be some important usage scenarios that will use landscape mode. For example, we use landscape mode when viewing landscape photos, full-screen videos, or reading large articles. When the user finishes using the device, it will intuitively switch back to portrait mode. Therefore, we must ensure that the content after switching can be displayed to the user, especially when the device stays in a comfortable position in landscape.
If your app already works on the iPad, why not work landscape on the iPhone as well? Most apps have started to adopt the design concept of responsive layout to maximize revenue with minimal cost.
IPhon X web page in landscape state
If you’re a product designer, you probably work on the web. On the landscape iPhone X, your web page will have a large blank area to the left and right. This is because of the bad results of the security zone automatically cutting up parts of the content that are outside the security zone. To avoid this embarrassment, Apple has come up with a set of guidelines to guide your web pages in landscape mode with the iPhone X. This basically allows the web page to expand the background horizontally in landscape mode to fill the screen while ensuring the complete display of web content in the secure area.
Rounded corners
Editing of content will also take place in the four corners of the iPhoneX screen. Unless you hide the status bar and the touch area at the bottom, you don’t face this problem because they cover the four corners of the screen. However, for most full-screen applications, such as cameras, it is important to make sure there is enough white space in the corners. It is recommended that your button radius be set to 16pt to perfectly follow the rounded corners rule.
Preview your app in the iOS emulator
The iPhone X is likely to sell out quickly after launch, so most of us won’t be able to use it right away. With no device at hand, the only way is through the iOS emulator. You can preview your applications and websites by installing Xcode.
The death of the burger menu
For a decade, designers have been scrambling to fit content onto the original iPhone’s small screen, and many have left the TAB bar out altogether because it takes up too much screen space. Others get more creative and put a button that slides out from the left side instead. This was the original burger menu. While it was new and interesting at first, it turned out to be a usability nightmare. Because when using, the user needs to click more operation. This means less use of secondary tags. And people often forget that there’s more to hide.
As the screen got bigger, one-handed operation began to suffer. Apple has even designed gestures that double tap the home button to slide down the entire user interface so your fingers can reach the navigation bar. The burger menu is usually in the upper left corner of the screen, requiring an extra double click to reach it. This makes it more difficult for users to navigate the menu. With longer screens, designers don’t have to worry so much about how much screen space content takes up. So the TAB bar is now used to replace the burger menu. This is especially true on iPhone X, which means that if your app has more than two parts of content, we strongly recommend using the TAB bar, which also takes up less screen space in iOS11.
Burger menus are common in web design, and can be one of the reasons why mobile web design experiences are not as good on mobile as they are on mobile. While native controls are a great tool for web design, you should still use TAB bars instead of burger menus on iOS, especially on iPhone X.
Adaptive layout and multitasking
As more and more screen resolutions need to be adapted, making your page layout adaptable becomes more and more important. With tools like Sketch’s Constraints and Xcode’s Auto Layout, you need to design with screen size in mind, allowing you to expand extra menus when you need to.
STACK VIEWS
In Xcode, you’ll also find Stack Views, an amazing tool to help you make your layout more flexible. Some elements and groups can be stacked on top of each other dynamically, and all you need to do is edit the spacing between the elements and fill in the boxes. You can then use Auto Layout to do the rest. Apple recommends using Stack Views first and then Auto Layout.
Point pt and pixel PX
Developers use point values, so it’s important to understand the difference between point values and pixels. When the iPhone was first introduced, the units were the same: 1pt equals 1px. Then, when the retina screen appears, 1pt becomes 2px. So, think of pt as the standard size of a physical area in the first-generation iPhone, and px is the density of the actual pixels that exist within that physical area (iPhone 4,5,6,7,8 = @2x, iPhone 8 Plus, iPhone X = @3x).
The iPhone solution
The iPhone has five main resolutions: 320×480 pt (iPhone 4), 320×568 pt (iPhone 5), 375×667 pt (iPhone 8), 414×736 pt (iPhone 8 Plus) and 375×812 pt (iPhone X). The layout does not scale, but expands based on the resolution of the screen. For example, the navigation bar adjusts only the width, but keeps the same height, and the elements inside remain the same size.
The iPhone 8 Plus is the only iPhone that looks more like an iPad in landscape mode. In other words, a left navigation might appear instead of a TAB bar.
Baidu Map service ecosystem UE team — Baidu UXC translation
Design+Code
The original address: https://designcode.io/ios11-iphone-x
, End,
Micro-interaction ∣ Detail design makes for great products
Long press, identify the QR code, add attention
Share the article and let more people know about microinteraction