Skip Navigation

Layout

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.

A sketch of a small rectangle in the upper-left quadrant of a larger rectangle, suggesting the position of a user interface element within a window. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.

Apple provides templates, guides, and other resources that can help you integrate Apple technologies and design your apps and games to run on all Apple platforms. See Apple Design Resources.

Adaptability

Every app and game needs to adapt when the device or system context changes. In iOS, iPadOS, tvOS, and visionOS, the system defines a collection of traits that characterize variations in the device environment that can affect the way your app or game looks. Using SwiftUI or Auto Layout can help you ensure that your interface adapts dynamically to these traits and other context changes; if you don’t use these tools, you need to use alternative methods to do the work.

Here are some of the most common device and system variations you need to handle:

  • Different device screen sizes, resolutions, and color spaces

  • Different device orientations (portrait/landscape)

  • System features like Dynamic Island and camera controls

  • External display support, Display Zoom, and multitasking modes on iPad

  • Dynamic Type text-size changes

  • Locale-based internationalization features like left-to-right/right-to-left layout direction, date/time/number formatting, font variation, and text length

Design a layout that adapts gracefully to context changes while remaining recognizably consistent. 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. You can help ensure an adaptable interface by respecting system-defined safe areas, margins, and guides (where available) and specifying layout modifiers to fine-tune the placement of views in your interface.

Be prepared for text-size changes. People appreciate apps and games that respond when they choose a different text size. When you support Dynamic Type — a feature that lets people choose the size of visible text in iOS, iPadOS, tvOS, visionOS, and watchOS — your app or game can respond appropriately when people adjust text size. To support Dynamic Type in your Unity-based game, use Apple’s accessibility plug-in (for developer guidance, see Apple – Accessibility). For guidance on displaying text in your app, see Typography.

Preview your app on multiple devices, using different orientations, localizations, and text sizes. You can streamline the testing process by first testing versions of your experience that use the largest and the smallest layouts. Although it’s generally best to preview features like wide-gamut color on actual devices, you can use Xcode Simulator to check for clipping and other layout issues. For example, if your iOS app or game supports landscape mode, you can use Simulator to make sure your layouts look great whether the device rotates left or right.

When necessary, scale artwork in response to display changes. For example, viewing your app or game in a different context — such as on a screen with a different aspect ratio — might make your artwork appear cropped, letterboxed, or pillarboxed. If this happens, don’t change the aspect ratio of the artwork; instead, scale it so that important visual content remains visible. In visionOS, the system automatically scales a window when it moves along the z-axis.

Visual hierarchy

Use placement to convey relative importance. People often start by viewing items in reading order — that is, from top to bottom and from the leading to trailing side — so it generally works well to place the most important items near the top and leading side of the window, display, or field of view.

Make essential information easy to find by giving it sufficient space. People want to view the most important information right away, so you don’t want to obscure it by crowding it with nonessential details. You can make secondary information available in other parts of the window or display.

Create visual groupings to help people find the information they want. For example, you might use negative space, background shapes, colors, materials, or separator lines to show when elements are related and to separate information into distinct areas.

Use alignment to ease visual scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized and can help people track content while scrolling or moving their eyes, making it easier to find information. Along with indentation, alignment can also help people understand an information hierarchy.

Consider providing visual hints to help people discover content that’s currently hidden. For example, if you can’t display all the items in a large collection at once, you need to indicate that there are additional items that aren’t currently visible. Depending on the platform, you might display parts of items to hint that people can reveal additional content by interacting with the view, such as by scrolling.

Make interactive components easy to discover by providing enough space around them. If interactive components are too close together — or if other content crowds them — the components can be difficult for people to distinguish, which can make your app or game hard to use.

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. For developer guidance, see UILayoutGuide and NSLayoutGuide.

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 might provide. Safe areas are essential for avoiding a device’s interactive and display features, like Dynamic Island on iPhone or the camera housing on some Mac models. For developer guidance, see Positioning content relative to the safe area.

Respect key display and system features in each platform. When an app or game doesn’t accommodate such features, it doesn’t feel at home in the platform and may be harder for people to use. In addition to helping you avoid display and system features, safe areas can also help you account for interactive components like bars, dynamically repositioning content when sizes change.

Platform considerations

iOS, iPadOS

Aim to support both portrait and landscape orientations. People appreciate apps and games that work well in different device orientations, but sometimes your experience needs to run in only portrait or only landscape. When this is the case, you can rely on people trying both orientations before settling on the one you support — there’s no need to tell people to rotate their device. If your app or game is landscape-only, make sure it runs equally well whether people rotate their device to the left or the right.

Extend visual content to fill the screen. Make sure backgrounds and full-screen artwork extend to the edges of the display. Also ensure that scrollable layouts continue all the way to the bottom of the device screen.

Prefer a full-bleed interface for your iOS game. Give players a beautiful interface that fills the screen while accommodating the corner radius, sensor housing, and features like Dynamic Island. If necessary, consider giving players the option to view your game using a letterboxed or pillarboxed appearance.

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 Screen indicator.

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 Screen 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. The exception is if you offer an in-depth experience like playing a game or viewing media, where it might make sense to hide the status bar.

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 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.

An illustration of an iPhone in portrait orientation. A shaded box labeled 'Safe area' appears over the top half of the screen. A shaded box labeled 'Keyboard layout guide' appears over the bottom half of the screen.
When the keyboard is visible, the layout guide represents its area and position.

An illustration of an iPhone in portrait orientation. A shaded box labeled 'Safe area' appears over most of the screen. A shaded box labeled 'Keyboard layout guide' appears over the very bottom of the screen.
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.

Avoid displaying content within the camera housing at the top edge of the window. For developer guidance, see NSPrefersDisplaySafeAreaCompatibilityMode.

tvOS

Be prepared for a wide range of TV sizes. On Apple TV, layouts don’t automatically adapt to the size of the screen like they do on iPhone or iPad. Instead, apps and games 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 points from the top and bottom of the screen, and 80 points 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.

An illustration of a TV with a safe zone border on all sides. In width, the top and bottom borders measure 60 points, and the side borders both measure 80 points.

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 you don’t let them overlap important information. For developer guidance, see About focus interactions for Apple TV.

An illustration that uses vertical shaded rectangles to show padding between focusable items.

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 comes 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.

An illustration of Apple TV, displaying a two-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.

Two-column grid

Attribute

Value

Unfocused content width

860 pt

Horizontal spacing

40 pt

Minimum vertical spacing

100 pt

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.

visionOS

The guidance below can help you lay out content within the windows of your visionOS app or game, making it feel familiar and easy to use. For guidance on displaying windows in space and best practices for using depth, scale, and field of view in your visionOS app, see Spatial layout. To learn more about visionOS window components, see Windows > visionOS.

Consider centering the most important content and controls in your app or game. Often, people can more easily discover and interact with content when it’s near the middle of a window, especially when the window is large.

Keep a window’s content within its bounds. In visionOS, the system displays window controls just outside a window’s bounds in the XY plane. For example, the Share menu appears above the window and the controls for resizing, moving, and closing the window appear below it. Letting 2D or 3D content encroach on these areas can make the system-provided controls, especially those below the window, difficult for people to use.

If you need to display additional controls that don’t belong within a window, use an ornament. An ornament lets you offer app controls that remain visually associated with a window without interfering with the system-provided controls. For example, a window’s toolbar and tab bar appear as ornaments. For guidance, see Ornaments.

Make a window’s interactive components easy for people to look at. You need to include enough space around an interactive component so that visually identifying it is easy and comfortable, and to prevent the system-provided hover effect from obscuring other content. For example, place buttons so their centers are at least 60 points apart. For guidance, see Eyes, Spatial layout, and Buttons > visionOS.

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.

An illustration of the Workout app’s main list of workouts on Apple Watch. A callout indicates that the currently focused workout item spans the full width of the available screen area.

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.

A diagram of an Apple Watch screen showing two side-by-side buttons beneath three lines of text.

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 dimensions

Model

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)

8.3” iPad mini

744x1133 pt (1488x2266 px @2x)

7.9” iPad mini

768x1024 pt (1536x2048 px @2x)

10.9” iPad Air

820x1180 pt (1640x2360 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 16 Pro Max

440x956 pt (1320x2868 px @3x)

iPhone 16 Pro

402x874 pt (1206x2622 px @3x)

iPhone 16 Plus

430x932 pt (1290x2796 px @3x)

iPhone 16

393x852 pt (1179x2556 px @3x)

iPhone 15 Pro Max

430x932 pt (1290x2796 px @3x)

iPhone 15 Pro

393x852 pt (1179x2556 px @3x)

iPhone 15 Plus

430x932 pt (1290x2796 px @3x)

iPhone 15

393x852 pt (1179x2556 px @3x)

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)

iOS, iPadOS device size classes

A size class is a value that’s either regular or compact, where regular refers to a larger screen or a screen in landscape orientation and compact refers to a smaller screen or a screen in portrait orientation. For developer guidance, see UserInterfaceSizeClass.

Different size class combinations apply to the full-screen experience on different devices, based on screen size.

An illustration of an iPad and an iPhone in both portrait and landscape orientations. Each device in each orientation includes a red screen and arrowed lines that indicate the full height and width of the screen.

Model

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 16 Pro Max

Compact width, regular height

Regular width, compact height

iPhone 16 Pro

Compact width, regular height

Compact width, compact height

iPhone 16 Plus

Compact width, regular height

Regular width, compact height

iPhone 16

Compact width, regular height

Compact width, compact height

iPhone 15 Pro Max

Compact width, regular height

Regular width, compact height

iPhone 15 Pro

Compact width, regular height

Compact width, compact height

iPhone 15 Plus

Compact width, regular height

Regular width, compact height

iPhone 15

Compact width, regular height

Compact width, compact 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.

An illustration of iPad in landscape orientation with the left two-thirds of its screen shaded.
2/3 split view

An illustration of iPad in landscape orientation with the left half of its screen shaded.
1/2 split view

An illustration of iPad in landscape orientation with the left one-third of its screen shaded.
1/3 split view

Model

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 device screen dimensions

Series

Size

Width (pixels)

Height (pixels)

10

42mm

374

446

10

46mm

416

496

Apple Watch Ultra (all generations)

49mm

410

502

7, 8, and 9

41mm

352

430

7, 8, and 9

45mm

396

484

4, 5, 6, and SE

40mm

324

394

4, 5, 6, and SE

44mm

368

448

1, 2, and 3

38mm

272

340

1, 2, and 3

42mm

312

390

Resources

Right to left

Developer documentation

UITraitCollection — UIKit

UITraitEnvironment — UIKit

Responding to changing display modes on Apple TV — UIKit

Videos

Change log

Date

Changes

September 9, 2024

Added specifications for iPhone 16, iPhone 16 Plus, iPhone 16 Pro, iPhone 16 Pro Max, and Apple Watch Series 10.

June 10, 2024

Made minor corrections and organizational updates.

February 2, 2024

Enhanced guidance for avoiding system controls in iPadOS app layouts, and added specifications for 10.9-inch iPad Air and 8.3-inch iPad mini.

December 5, 2023

Clarified guidance on centering content in a visionOS window.

September 15, 2023

Added specifications for iPhone 15 Pro Max, iPhone 15 Pro, iPhone 15 Plus, iPhone 15, Apple Watch Ultra 2, and Apple Watch SE.

June 21, 2023

Updated to include guidance for visionOS.

September 14, 2022

Added specifications for iPhone 14 Pro Max, iPhone 14 Pro, iPhone 14 Plus, iPhone 14, and Apple Watch Ultra.

Current page is Layout