Adaptability and layout
People often want to be able to use their favorite applications on all their devices and in any environment. In iOS apps, you can configure interface elements and layouts to automatically change shape and size on different devices, multitask on an iPad, in a split view, as the screen rotates, and so on. It is important to design an adaptable interface to provide a great experience in any environment.
Device screen size and orientation
IOS devices come in a variety of screen sizes and can be used portrait or landscape. In bezel-less devices like the iPhone X and iPad Pro, the rounded corners of the display perfectly match the overall size of the device. Other devices, such as the iPhone SE and iPad Air, have rectangular displays.
** If your application is running on a specific device, make sure it runs on all screen sizes of that device. ** In other words, iPhone-only apps must run on all iPhone screen sizes, and ipad-only apps must run on all iPad screen sizes.
All scale factors in the table above are UIKit scale factors and may differ from native scale factors. For developer guidelines, see Scale and nativeScale.
To learn how screen resolution affects the artwork you apply, see Image Size and resolution.
Automatic layout
Auto Layout is a development tool for building adaptive interfaces. With automatic layout, you can define rules (called constraints) that govern the content of your application. For example, you can constrain a button so that it is always horizontally centered and eight points below the image, regardless of the available screen space.
When certain environmental changes (called features) are detected, automatic layout automatically readjusts the layout based on the constraints specified. You can set the application to dynamically adapt to a variety of characteristics, including:
- Different device screen sizes, resolutions and color gamut (sRGB/P3)
- Different equipment orientation (vertical/horizontal)
- Split view
- Multitasking on the iPad
- Dynamic type text size changes
- Internationalization enabled based on locale (left-to-right/right-to-left layout orientation, date/time/number formatting, font changes, text length)
- System Function Availability (3D Touch)
For a developer’s Guide, see Auto Layout Guide and UI Layout Collection.
Layout guide and safety area
The layout guide defines rectangular areas that are not really obvious on the screen, but help with the positioning, alignment, and spacing of content. The system includes predefined layout guidelines that make it easy to apply standard margins around content and limit text width for best readability. You can also define custom layout guides.
-
Apple mobile phone
-
iPad
-
** Adhere to the UIKit defined security zones and layout margins. ** These layout guidelines ensure proper insertion based on device and context. Security zones also prevent content from overlapping with the status bar, navigation bar, toolbar, and TAB bar. The view provided by the standard system automatically adopts the safe zone layout guide.
For a developer’s guide, see UILayoutGuide, layoutMarginsGuide, readableContentGuide, and safeAreaLayoutGuide.
Size grade
Size classes are characteristics that are automatically assigned to content areas based on size. The system defines two size classes, regular (for wide space) and Compact (for limited space), which describe the height and width of the view.
A view can have any combination of size classes:
- Regular width, regular height
- Compact width, compact height
- Regular width, compact height
- Compact width, regular height
As with other environmental changes, iOS dynamically adjusts the layout based on the size category of the content area. For example, when the vertical size category changes from compact height to regular height — perhaps because the user rotated the device from landscape to portrait — the TAB bar might become higher.
Equipment size class
Depending on the screen size, different combinations of size categories are suitable for full-screen experiences on different devices.
Multitask size class
On the iPad, size Classes also works when your app is running in a multitasking configuration.
2/3 split view
1/2 split view
1/3 split view
General layout precautions
** Ensure that the main content is clear in its default size. ** People should not scroll horizontally to read important text, or zoom to view the main image, unless they choose to change the size.
** Maintain an overall consistent look and feel throughout the application. ** In general, elements with similar functionality should look similar.
** Use visual weight and balance to convey importance. The big things stand out and are more important than the small things. Larger items are also easier to click on, which is especially important when the app is used in a distracting environment, such as a kitchen or gym. In general, place the main items in the top half of the screen, in a left-to-right reading environment — near the left side of the screen.
** Use alignment to simplify scanning and convey organization and hierarchy. ** alignment makes applications look neat and orderly, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how content groups are related.
** Support both portrait and landscape if possible. ** People prefer to use applications in different directions, so it’s best to meet that expectation.
** Prepare for changes in text size. ** People expect most applications to respond when they select a different text size in Settings. You may need to adjust the layout to accommodate some text size changes. For more information about the use of applied Chinese text, see Typography.
** Provides ample touch targets for interactive elements. ** Try to keep the minimum clickable area of all controls 44pt x 44pt.
4.7 -inch iPhone
5.8 -inch iPhone
Preview your app on multiple devices. ** While it’s usually best to preview features like wide-color images on a real device, you can use the emulator (included in Xcode) to check clips and other layout issues. For example, if your application supports landscape mode, you can use an emulator to ensure that your layout looks great whether the device is rotated left or right.
Notes, by default, all the direction and on the view controller supports the iPhone all except inverted vertical direction (the developer’s guide, please refer to the supportedInterfaceOrientations). Some devices (like the iPhone X) don’t support upside down portrait mode, whether your app does or not.
** Apply readability margins when displaying text on larger devices. ** These margins make lines of text short enough to ensure a comfortable reading experience.
Adapt to environmental changes
** Maintain focus on current content during context changes. Content is your first priority. Changing focus when the environment changes can be disorienting and frustrating, and can make people feel like they’ve lost control of the application.
Avoid gratuitous layout changes. ** The entire layout does not have to change when someone rotates the device. For example, if your application displays a grid of images in landscape mode, it does not have to display the same image as a list in landscape mode. Instead, it may simply adjust the size of the grid. Try to maintain a comparable experience in all situations.
** If your application must run only horizontally, support both variants. ** Your landscape application should work equally well whether people rotate their device left or right. Don’t tell people to rotate their devices while using your app. If your application does not rotate automatically when someone holds the device in an unsupported direction, they will instinctively know to rotate it.
** Customize your application’s response to rotation based on the context. ** For example, a game that lets people move characters by rotating the device probably shouldn’t switch directions during play. However, it can display menus and intro sequences based on the current direction.
** aims to support both iPad and iPhone. ** People love the flexibility of running your app on any type of iOS device. If some of your app’s features require iPhone-specific hardware (such as phones), consider hiding or disabling those features on the iPad and letting people use the rest of your app’s features.
Full screen 4.7″ device image
Cropped on 5.8″ devices
5.8″ Mailbox on the device
Full screen 5.8″ device image
Cut on 4.7″ equipment
Post box on 4.7″ equipment
** Please pay attention to aspect ratio differences when reusing existing drawings. ** Different screen sizes may have different aspect ratios, resulting in cut-outs, mailboxes or postboxes. Ensure that important visual content remains visible at all display sizes.
Design a full-screen experience
** Expand visual elements to fill the screen. ** Make sure that the background extends to the edge of the display and that vertically scrollable layouts, such as tables and collections, extend all the way to the bottom.
** Avoid explicit placement of interactive controls at the bottom and corners of the screen. ** People use swiping gestures on the bottom edge of the display to access features like the home screen and app switcher, which may cancel custom gestures you implement in that area. The far corner of the screen can be a difficult area to reach comfortably.
** Inserts basic content to prevent clipping. ** In general, content should be centered and inserted symmetrically so that it looks great in any direction, is not caught by rounded corners, is not hidden by sensor housings, and is not obscured by indicators used to access the home screen. For best results, build your interface using standard, system-provided interface elements and automatic layouts and follow layout guidelines and safe zones defined by UIKit. When the device is landscape, it may be appropriate for some applications (such as games) to place clickable controls at the bottom of the screen (extending below the safe area) to allow more space for content. Use matching illustrations when placing controls at the top and bottom of the screen, and leave enough space around the Home indicator so that people don’t accidentally aim at it when trying to interact with the control. Because the home page indicator is always in the center of the screen, its position relative to the application interface may change.
** Insert full corner button. ** Buttons that extend to the edge of the screen may not look like buttons. Adhere to the standard UIKit margins on both sides of full-width buttons. The full-corner button that appears at the bottom of the screen looks best when it has rounded corners and is aligned with the bottom of the security area — this also ensures that it does not clash with the home page indicator.
** Don’t gloss over or pay special attention to key display features. ** Do not try to hide rounded corners of the device, sensor housing, or indicators for accessing the home screen by placing black bars at the top and bottom of the screen. Also don’t use visual embellishments like brackets, borders, shapes, or captions to pay special attention to these areas.
** Note the height of the status bar. ** The status bar on full-screen iPhone models is higher than on other models. If your application uses a fixed status bar height to locate the content below the status bar, you must update your application to dynamically locate the content based on the current device. Note that the status bar on a full-screen iPhone doesn’t change height when background tasks such as recording and location tracking are active.
** If you are currently hiding the status bar, please reconsider your decision when running your app on a full-screen iPhone. ** The full-screen iPhone model has more vertical content space than other models, and the status bar takes up an area of the screen that your app may not fully utilize. The status bar also shows information that people find useful. It should be hidden only in exchange for added value.
** Allows automatic hiding of indicators for discreet access to the home screen. ** With auto Hide enabled, if the user does not touch the screen for several seconds, the indicator fades out. When people touch the screen again, it appears again. Enable this behavior only for passive viewing experiences, such as playing a video or photo slide show.