- Platforms
- Foundations
-
Patterns
- Overview
- Accessing private data
- Charting data
- Collaboration and sharing
- Drag and drop
- Entering data
- Feedback
- File management
- Going full screen
- Launching
- Live-viewing apps
- Loading
- Managing accounts
- Managing notifications
- Modality
- Multitasking
- Offering help
- Onboarding
- Playing audio
- Playing haptics
- Playing video
- Printing
- Ratings and reviews
- Searching
- Settings
- Undo and redo
- Workouts
-
Components
- All components
- Content
- Layout and organization
- Menus and actions
- Navigation and search
- Presentation
- Selection and input
- Status
- System experiences
- Inputs
-
Technologies
- All technologies
- AirPlay
- Always On
- App Clips
- Apple Pay
- Augmented reality
- CareKit
- CarPlay
- Game Center
- HealthKit
- HomeKit
- iCloud
- In-app purchase
- Live Photos
- Mac Catalyst
- Machine learning
- Maps
- Messages for Business
- NFC
- Photo editing
- ResearchKit
- SharePlay
- ShazamKit
- Sign in with Apple
- Siri
- Tap to Pay on iPhone
- Wallet
Layout
Using a consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices.
Guides and safe areas
A layout guide defines a rectangular region that helps you position, align, and space your content on the screen. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides.
A safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views a window or scene might provide. Safe areas are essential for avoiding a device’s interactive and display features, like the Dynamic Island on iPhone or the camera housing on some Mac models.
In iOS, iPadOS, and tvOS, the system defines a collection of traits that characterize variations in the device environment that can affect the way your app displays on the screen. Using SwiftUI or Auto Layout, you can ensure that your interface adapts dynamically to a wide range of traits and contexts, including:
- Different device screen sizes, resolutions, and color spaces
- Different device orientations (portrait/landscape)
- Split view
- External display support, Display Zoom, and multitasking modes on iPad
- Dynamic Type text-size changes
- Internationalization features the system can enable based on locale (left-to-right/right-to-left layout direction, date/time/number formatting, font variation, text length)
- System feature availability
Best practices
Design a consistent layout that adapts gracefully to context changes, while displaying the same content as much as possible. People expect your experience to work well and remain familiar when they rotate their device, resize a window, add another display, or switch to a different device. Ensure an adaptable interface by respecting system-defined safe areas, margins, and guides and specifying layout modifiers to fine-tune the placement of views in your hierarchy.
Respect key display and system features in each platform. Safe areas help you accommodate features like the corner radius and sensor housings on various devices, and avoid interfering with interactive system elements like Dynamic Island on iPhone and the Home indicator and app switcher on iPhone and iPad. Safe areas also help you account for interactive components like bars, dynamically repositioning content if sizes change.
Use placement to convey relative importance. In general, place principal items in the upper half of the screen or window, near the leading side. People typically start in this area, whether they’re looking at the screen or using a screen reader like VoiceOver.
Elevate essential information by giving it sufficient space. People want to view the most important information instantly, so you don’t want to clutter the screen or window with nonessential details. People can easily access secondary information by scrolling.
Create visual groupings to help people find the information they want. For example, you might use negative space, background shapes, colors, and materials, or separator lines to display related elements and information in distinct areas.
Use alignment to ease visual scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also help people visualize an information hierarchy.
Be mindful of aspect ratio. Different screen sizes may have different aspect ratios, causing artwork to appear cropped, letterboxed, or pillarboxed. When this is the case, don’t change the aspect ratio of the artwork; instead, scale it to fill the screen so that important visual content remains in view on all display sizes.
Be prepared for text-size changes. People expect most apps to respond when they choose a different text size. To accommodate text-size changes, you might need to adjust the layout. For guidance on displaying text in your app, see Typography.
When possible, consider alluding to hidden content by partially displaying offscreen elements. In large collections where content doesn’t fit on a single screen, you might be able to hint at the additional content by showing portions of the offscreen items.
On touch screens, provide ample touch targets for interactive components. Maintain a minimum tappable area of 44x44 points for all controls.
Preview your app on multiple devices, using different orientations, localizations, and text sizes. Although it’s generally best to preview features like wide color on actual devices, you can use Xcode Simulator to check for clipping and other layout issues. For example, if your iOS app supports landscape mode, you can use Simulator to make sure your layouts look great regardless of whether the device rotates left or right.
Platform considerations
iOS, iPadOS
Aim to support both portrait and landscape orientations. People choose different orientations for a variety of reasons, and they generally expect apps to work well in every context. If it’s essential that your app run in a single orientation, don’t tell people to rotate their device to match; if your app doesn’t rotate automatically when someone holds the device in an unsupported orientation, they’ll know instinctively to rotate it. If your app is landscape-only, make sure it runs equally well whether people rotate their device to the left or the right.
If your app runs on a specific device, make sure it runs on every screen size for that device. In other words, an iPhone-only app must run on every iPhone screen size and an iPad-only app must run on every iPad screen size. For guidance, see Device screen sizes and orientations.
Inset full-width buttons. Respect the standard system-defined margins on the sides of full-width buttons. A full-width button at the bottom of the screen generally looks best when it has rounded corners and it aligns with the bottom of the safe area — which also ensures that it doesn’t conflict with the Home indicator.
Extend visual content to fill the screen. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.
On iPad, consider placing controls on the sides of the screen in landscape orientation. When controls are on the left and right sides of the screen, people can reach them easily with both hands while they’re holding the device.
Avoid placing interactive controls at the bottom edge of the screen when possible. Regardless of orientation, people use system gestures at the bottom edge of the display to access features like the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. Also avoid placing controls in the far corners of the screen because these areas can be difficult for people to reach comfortably. If your game needs to place controls in the lower portion of the screen — below the safe area — use matching insets when placing them at the top and bottom of the screen, and leave ample space around the Home indicator so people don’t accidentally target it when trying to interact with a control.
Be prepared for different status bar heights. If you display content below the status bar, you can use the safe area to help dynamically reposition the content as needed.
Hide the status bar only when it adds value or enhances your experience. The status bar displays information people find useful and it occupies an area of the screen most apps don’t fully use, so it’s generally a good idea to keep it visible.
iOS, iPadOS safe areas
The safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views a view controller might provide.
iOS keyboard layout guide
iOS 15 and later provides a keyboard layout guide that represents the space the keyboard currently occupies and accounts for safe area insets. Using this guide can help you make the keyboard feel like an integral part of your app, regardless of the type of keyboard people use or where they position it. For developer guidance, see UIKeyboardLayoutGuide.
When the keyboard is visible, the layout guide represents its area and position.
When the keyboard dismisses, the top of the layout guide matches the bottom of the safe area layout guide.
macOS
Avoid placing controls or critical information at the bottom of a window. People often move windows so that the bottom edge is below the bottom of the screen.
tvOS
TVs vary widely in size. On Apple TV, app layouts don’t automatically adapt to the size of the screen like they do on iPhone or iPad. Instead, apps show the same interface on every display. Take extra care in designing your layout so that it looks great in a variety of screen sizes.
Adhere to the screen’s safe zone. Inset primary content 60 pixels from the top and bottom of the screen, and 80 pixels from the sides. It can be difficult for people to see content that close to the edges, and unintended cropping can occur due to overscanning on older TVs. Allow only partially displayed offscreen content and elements that deliberately flow offscreen to appear outside this zone.
Include appropriate padding between focusable elements. When you use UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they’re focused, and make sure they don’t unintentionally overlap important information.
Use layout templates to build media-centered apps and use grids to provide collections of content. If the layout of your media app simply needs to present content beautifully with minimal layout customization, use a predesigned layout template. If your app needs to showcase a collection of content, use a grid to make the content easy to browse at a distance and quick to navigate with the remote.
Layout templates
Apple TV templates deliver clean, consistent layouts that make content the center of attention. These templates — based on JavaScript and the Apple TV markup language (TVML) — dynamically load and populate with content when people open your app. Templates give you flexibility to create content-rich apps with predefined layouts that look good on the TV screen and are ideal for streaming media.
Choose a template based on its purpose. You can customize a template’s background, color, size, layout, and more, but if your customizations make the template jarring or unrecognizable, consider using a different one or designing a custom interface.
Customize templates tastefully. Layout templates are highly customizable; you have control over the background, tinting, size, layout, and more. As you design your app, defer to content whenever possible, avoiding customizations that appear distracting, jarring, or obtrusive.
Understand a template’s purpose before using it. If your customizations make the underlying template unrecognizable, consider using a different template or building a custom interface.
For detailed information about integrating templates into your app, see TVML.
Grids
The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item is brought into focus.
If you use the UIKit collection view flow element, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see UICollectionViewFlowLayout.
Include additional vertical spacing for titled rows. If a row has a title, provide enough spacing between the bottom of the previous unfocused row and the center of the title to avoid crowding. Also provide spacing between the bottom of the title and the top of the unfocused items in the row.
Use consistent spacing. When content isn’t consistently spaced, it no longer looks like a grid and it’s harder for people to scan.
Make partially hidden content look symmetrical. To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen.
watchOS
Design your content to extend from one edge of the screen to the other. The Apple Watch bezel provides a natural visual padding around your content. To avoid wasting valuable space, consider minimizing the padding between elements.
Avoid placing more than two or three controls side by side in your interface. As a general rule, display no more than three buttons that contain glyphs — or two buttons that contain text — in a row. Although it’s usually better to let text buttons span the full width of the screen, two side-by-side buttons with short text labels can also work well, as long as the screen doesn’t scroll.
Support autorotation in views people might want to show others. When people flip their wrist away, apps typically respond to the motion by sleeping the display, but in some cases it makes sense to autorotate the content. For example, a wearer might want to show an image to a friend or display a QR code to a reader. For developer guidance, see isAutorotating.
Specifications
iOS, iPadOS
Device screen sizes and orientations
Device | Dimensions (portrait) |
---|---|
12.9" iPad Pro | 1024x1366 pt (2048x2732 px @2x) |
11" iPad Pro | 834x1194 pt (1668x2388 px @2x) |
10.5" iPad Pro | 834x1194 pt (1668x2388 px @2x) |
9.7" iPad Pro | 768x1024 pt (1536x2048 px @2x) |
7.9" iPad mini | 768x1024 pt (1536x2048 px @2x) |
10.5" iPad Air | 834x1112 pt (1668x2224 px @2x) |
9.7" iPad Air | 768x1024 pt (1536x2048 px @2x) |
10.2" iPad | 810x1080 pt (1620x2160 px @2x) |
9.7" iPad | 768x1024 pt (1536x2048 px @2x) |
iPhone 14 Pro Max | 430x932 pt (1290x2796 px @3x) |
iPhone 14 Pro | 393x852 pt (1179x2556 px @3x) |
iPhone 14 Plus | 428x926 pt (1284x2778 px @3x) |
iPhone 14 | 390x844 pt (1170x2532 px @3x) |
iPhone 13 Pro Max | 428x926 pt (1284x2778 px @3x) |
iPhone 13 Pro | 390x844 pt (1170x2532 px @3x) |
iPhone 13 | 390x844 pt (1170x2532 px @3x) |
iPhone 13 mini | 375x812 pt (1125x2436 px @3x) |
iPhone 12 Pro Max | 428x926 pt (1284x2778 px @3x) |
iPhone 12 Pro | 390x844 pt (1170x2532 px @3x) |
iPhone 12 | 390x844 pt (1170x2532 px @3x) |
iPhone 12 mini | 375x812 pt (1125x2436 px @3x) |
iPhone 11 Pro Max | 414x896 pt (1242x2688 px @3x) |
iPhone 11 Pro | 375x812 pt (1125x2436 px @3x) |
iPhone 11 | 414x896 pt (828x1792 px @2x) |
iPhone XS Max | 414x896 pt (1242x2688 px @3x) |
iPhone XS | 375x812 pt (1125x2436 px @3x) |
iPhone XR | 414x896 pt (828x1792 px @2x) |
iPhone X | 375x812 pt (1125x2436 px @3x) |
iPhone 8 Plus | 414x736 pt (1080x1920 px @3x) |
iPhone 8 | 375x667 pt (750x1334 px @2x) |
iPhone 7 Plus | 414x736 pt (1080x1920 px @3x) |
iPhone 7 | 375x667 pt (750x1334 px @2x) |
iPhone 6s Plus | 414x736 pt (1080x1920 px @3x) |
iPhone 6s | 375x667 pt (750x1334 px @2x) |
iPhone 6 Plus | 414x736 pt (1080x1920 px @3x) |
iPhone 6 | 375x667 pt (750x1334 px @2x) |
4.7" iPhone SE | 375x667 pt (750x1334 px @2x) |
4" iPhone SE | 320x568 pt (640x1136 px @2x) |
iPod touch 5th generation and later | 320x568 pt (640x1136 px @2x) |
NOTE All scale factors in the table above are UIKit scale factors, which may differ from native scale factors. For developer guidance, see scale and nativeScale.
Device size classes
Different size class combinations apply to the full-screen experience on different devices, based on screen size.
Device | Portrait orientation | Landscape orientation |
---|---|---|
12.9" iPad Pro | Regular width, regular height | Regular width, regular height |
11" iPad Pro | Regular width, regular height | Regular width, regular height |
10.5" iPad Pro | Regular width, regular height | Regular width, regular height |
9.7" iPad | Regular width, regular height | Regular width, regular height |
7.9" iPad mini | Regular width, regular height | Regular width, regular height |
iPhone 14 Pro Max | Compact width, regular height | Regular width, compact height |
iPhone 14 Pro | Compact width, regular height | Compact width, compact height |
iPhone 14 Plus | Compact width, regular height | Regular width, compact height |
iPhone 14 | Compact width, regular height | Compact width, compact height |
iPhone 13 Pro Max | Compact width, regular height | Regular width, compact height |
iPhone 13 Pro | Compact width, regular height | Compact width, compact height |
iPhone 13 | Compact width, regular height | Compact width, compact height |
iPhone 13 mini | Compact width, regular height | Compact width, compact height |
iPhone 12 Pro Max | Compact width, regular height | Regular width, compact height |
iPhone 12 Pro | Compact width, regular height | Compact width, compact height |
iPhone 12 | Compact width, regular height | Compact width, compact height |
iPhone 12 mini | Compact width, regular height | Compact width, compact height |
iPhone 11 Pro Max | Compact width, regular height | Regular width, compact height |
iPhone 11 Pro | Compact width, regular height | Compact width, compact height |
iPhone 11 | Compact width, regular height | Regular width, compact height |
iPhone XS Max | Compact width, regular height | Regular width, compact height |
iPhone XS | Compact width, regular height | Compact width, compact height |
iPhone XR | Compact width, regular height | Regular width, compact height |
iPhone X | Compact width, regular height | Compact width, compact height |
iPhone 8 Plus | Compact width, regular height | Regular width, compact height |
iPhone 8 | Compact width, regular height | Compact width, compact height |
iPhone 7 Plus | Compact width, regular height | Regular width, compact height |
iPhone 7 | Compact width, regular height | Compact width, compact height |
iPhone 6s Plus | Compact width, regular height | Regular width, compact height |
iPhone 6s | Compact width, regular height | Compact width, compact height |
iPhone SE | Compact width, regular height | Compact width, compact height |
iPod touch 5th generation and later | Compact width, regular height | Compact width, compact height |
On iPad, size classes also apply when your app or game runs in a multitasking configuration.
2/3 split view
1/2 split view
1/3 split view
Device | Mode | Portrait orientation | Landscape orientation |
---|---|---|---|
12.9" iPad Pro | 2/3 split view | Compact width, regular height | Regular width, regular height |
1/2 split view | N/A | Regular width, regular height | |
1/3 split view | Compact width, regular height | Compact width, regular height | |
11" iPad Pro | 2/3 split view | Compact width, regular height | Regular width, regular height |
1/2 split view | N/A | Compact width, regular height | |
1/3 split view | Compact width, regular height | Compact width, regular height | |
10.5" iPad Pro | 2/3 split view | Compact width, regular height | Regular width, regular height |
1/2 split view | N/A | Compact width, regular height | |
1/3 split view | Compact width, regular height | Compact width, regular height | |
9.7" iPad | 2/3 split view | Compact width, regular height | Regular width, regular height |
1/2 split view | N/A | Compact width, regular height | |
1/3 split view | Compact width, regular height | Compact width, regular height | |
7.9" iPad mini 4 | 2/3 split view | Compact width, regular height | Regular width, regular height |
1/2 split view | N/A | Compact width, regular height | |
1/3 split view | Compact width, regular height | Compact width, regular height |
watchOS
Series | Screen size | Width (pixels) | Height (pixels) |
---|---|---|---|
Apple Watch Ultra | 49mm | 410 | 502 |
7 and later | 41 mm | 352 | 430 |
7 and later | 45 mm | 396 | 484 |
4, 5, and 6 | 40 mm | 324 | 394 |
4, 5, and 6 | 44 mm | 368 | 448 |
1, 2, and 3 | 38 mm | 272 | 340 |
1, 2, and 3 | 42 mm | 312 | 390 |
Resources
Related
Developer documentation
- UITraitCollection — UIKit
- UITraitEnvironment — UIKit
- Responding to changing display modes on Apple TV