Your app’s layout helps groundprovides the structure for people into understand your content from the moment they open it. People expect familiaryour app. Familiar relationships between controls and content to help themlet people use and discover features right away, and make your app’s features, and designing the layout to take advantage of this makes your appdesign feel at home on theevery platform.
Apple provides templates, guides,templates and other resourceslayout guides that can help you integrate Apple technologies and design your apps and games to run on all Apple platforms. See Apple Design Resources.
Group related items 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. When you do so, ensure that content and controls remain clearly distinct.
Make essential information easy to find by giving it sufficient space. People want to view the most important information right away, so don’t obscure it by crowding it with nonessential details. You can make secondary information available in other parts of the window, or include it in an additional view.
Extend content to fill the screen or window. 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 and the sides of the device screen. Controls and navigation components like sidebars and tab bars appear on top of content rather than on the same plane, so it’s important for your layout to take this into account.
When your content doesn’t span the full window, use a background extension view to provide the appearance of content behind the control layer on either side of the screen, such as beneath the sidebar or inspector. For developer guidance, see backgroundExtensionEffect() and UIBackgroundExtensionView.
Differentiate controls from content. Take advantage of the Liquid Glass material to provide a distinct appearance for controls that’s consistent across iOS, iPadOS, and macOS. Instead of a background, use a scroll edge effect to provide a transition betweenOrder content and the control area. For guidance, see Scroll views.
Place items to convey theirby relative importance. People often start by viewing itemscontent 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,window or field of view. Be awaredisplay. To support right-to-left languages, prefer standard system components that can automatically adapt UI elements to better reflect each language’s natural reading order varies by language, and takeorder. For guidance, see Right to left languages into account as you design..
Align components with one anotherelements to make them easier to scanscan, and use indentation to communicate organization andconvey hierarchy. Alignment makes an app look neat and organizedorganized, and can help people track content while scrolling or moving their eyes, making it easiereyes. People assume that aligned items are related to find information. Along with indentation,each other, and conversely, they perceive indented items as subordinate to the item they follow. Because of this, using alignment and indentation deliberately can also help people understand anyour information hierarchy.
Group related items to clearly express related information or functions. For example, you might use negative space, container shapes, or separator lines to show which elements are related and which are unrelated.
Use progressive disclosure to make layouts cleaner and easier to interact with. An interface with too much content and too many choices makes it harder to find information quickly, and harder to understand the choices that are available. Use disclosure triangles, menus, or nested views to reduce how much content to initially display; or use scrollable sections to showcase additional content, which is particularly useful for media-focused apps like those for video, music, or books.
Differentiate controls from content.Take advantage of progressive disclosurethe Liquid Glass material on all platforms that support it to help people discover content that’s currently hidden. For example, if you can’t display all the items inprovide a large collection at once, you need to indicate that there are additional items that aren’t currently visible. Depending on the platform, you mightdistinct appearance for your controls. Instead of applying a solid or semi-opaque background color beneath controls, use a disclosure control, or display parts of itemsscroll edge effect to hint that people can reveal additional content by interacting with the view, such as by scrolling.
Makevisually elevate controls easier to use by providing enough space around them and grouping them in logical sections. If unrelated controls are too close together — or if other content crowds them — they can be difficult for people to tell apart or understand what they do, which can make your app or game hard to use.above content. For guidance, see ToolbarsScroll views. For full-screen background content, be sure to extend it underneath sidebars, toolbars, and tab bars to fit the entire screen or window.
If scaling a background image to the full window edge results in components like sidebars or inspectors covering important parts of the image, you can use a background extension effect to flip and blur the image, mirroring it beneath adjacent components and providing the appearance that the background image extends beneath them. For developer guidance, see backgroundExtensionEffect() and UIBackgroundExtensionView.
Every appApps and game needsgames need to adapt when the device or system context changes.to different display sizes, orientation changes, window sizes, and multitasking states. In iOS, iPadOS, tvOS, and visionOS, the system defines a collectioncharacteristics oftraits that characterize variations in the device environment that can affect the way your app or game looks. UsingUse SwiftUI or Auto Layout can help youto 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.them.
Here are some of the most common device and system variations youcharacteristics that apps need to handle:
Regular and compact horizontal and vertical size classes
Different device screen sizes, resolutions, and color spacessizes
Different device orientations (portrait/landscape)and aspect ratios
System features like the Dynamic Island and camera controls
External display support, Display Zoom, and resizable windows on iPad and Mac
Dynamic Type text-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.and consistently. 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.
Even if your app is locked to a certain orientation, such as a landscape-only game, it’s still important to ensure your interface resizes well to provide the best experience across devices and window sizes.
Be prepared for text-size changes. People appreciate appsuse Dynamic Type to increase text size to be more readable, which occurs at the system level. Apps that don’t respond to this setting can be difficult or impossible to use for people who rely on this feature. Support Dynamic Type by adjusting your layout to accommodate text at larger sizes. For example, horizontally adjacent views may need to stack vertically to provide more space for text; table rows or other containers may need to grow in height so that text isn’t cropped or doesn’t overlap other content; and games that respond when they choosetable rows with a differentsingle line of text size. When you support Dynamic Type — a feature that lets people choose the sizeby default might need to grow vertically to accommodate multiple lines of visible text in iOS, iPadOS, tvOS, visionOS, and watchOS — your app or game can respond appropriately when people adjust text size. text.
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,size classes, 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, youYou can test on a simulated device in Device HubDevice Hub to check for clipping and other layout issues. For example, if your iOS app or game supports landscape mode, you can use the simulatorDevice Hub to make sure your layouts looklayout looks great whether the device rotates leftwhen your app is resized on iPad or right.in iPhone Mirroring on Mac.
When necessary, scale background artwork in response to display changes. For example, viewingViewing 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 it fills the screen completely. Note that since windows can be very wide and short or tall and narrow, background artwork may often need to extend beyond what is typically visible in a more standard display aspect ratio.
In iOS and iPadOS, size classes are an indication of how much horizontal and vertical space is available to an app’s interface.
Each dimension — horizontal and vertical — is represented by one of two size classes: compact or regular. The horizontal size class determines whether an app is narrow (compact) or wide (regular), while the vertical size class determines whether it is short (compact) or tall (regular).
The system sets size classes based on the device type, window configuration, and multitasking state; for example, whether an app is full screen, in Slide Over, or mirrored from an iPhone to a Mac. Depending on their environment, iOS and iPadOS apps can exist in every combination of size classes.
For developer guidance, see UITraitChangeObservable and UserInterfaceSizeClass.
Determine layout based on size classes, not device type or orientation. Size classes describe the actual space available, regardless of whether an app is in portrait or landscape. Conversely, a device’s orientation and type (also called its idiom) aren’t useful for making layout decisions because they don’t provide your app with information about how much space is available.
Size classes also let your app’s interface adapt to a wide range of window sizes. For example, when a person runs your app in macOS with iPhone Mirroring, they can freely resize its width and height; or they can resize an iPad app when multitasking in iPadOS or when running it in macOS.
Consider all possible combinations of size classes. Your app can appear in a variety of size classes in both portrait and landscape aspect ratios, and it’s important visual contentto consider all of them to provide a good experience. A layout solely designed for landscape on iPhone with regular width and compact height might not take advantage of the vertical space available on iPad in landscape when someone resizes the window to regular height. Conversely, designing exclusively for compact portrait could leave extra space when someone resizes the app window to a regular width on iPad.
Keep functionality the same as size classes change, and keep layout changes recognizable and familiar to the platform. Don’t change your app’s functionality based on the space it occupies. However, you can change the amount of functionality that’s visible onscreen as the amount of space changes. Consider taking advantage of larger spaces to switch from a tab bar to a sidebar or expose functionality that might otherwise be grouped into an overflow menu.
Similarly, while an app’s size classes might change when someone resizes it, its idiom — the device type it’s made for — remains visible. In visionOS, the system automatically scales a windowsame: keep the layout recognizable and familiar to the platform even when it moves along the z-axis.resizing.
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 viewwindow that isn’t covered on the edge by a hardware feature or another view within the window, like a toolbar, tab bar, or other views a window might provide. Safe areas arestatus bar. Respecting the safe area is essential for avoiding a device’s interactiveto make sure system UI and display features,hardware features like the Dynamic Island on iPhone or the camera housing on some Mac models.don’t obstruct content and controls. For developer guidance, see SafeAreaRegions and 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.
For templates that include the guides and safe areas for each platform, see Apple Design Resources.
No additional considerations for iOSAim 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.Prefer a full-bleed interface for your 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.Avoid full-width buttons. Buttons feel at home in iOS when they respect system-defined margins and are inset from the edges of the screen. If you need to include a full-width button, make sure it harmonizes with the curvature of the hardware and aligns with adjacent safe areas.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.iPadOSPeople can freely resize windows down to a minimum width and height, similar to window behavior in macOS. It’s important to account for this resizing behavior and the full range of possible window sizes when designing your layout. For guidance, see Multitasking and Windows.As someone resizes a window, defer switching to a compact view for as long as possible. Design for a full-screen view first, and only switch to a compact view when a version of the full layout no longer fits. This helps the UI feel more stable and familiar in as many situations as possible. For more complex layouts such as split views, prefer hiding tertiary columns such as inspectors as the view narrows.Test your layout at common system-provided sizes, and provide smooth transitions. Window controls provide the option to arrange windows to fill halves, thirds, and quadrants of the screen, so it’s important to check your layout at each of these sizes on a variety of devices. Be sure to minimize unexpected UI changes as people adjust down to the minimum and up to the maximum window size.Consider a convertible tab bar for adaptive navigation. For many apps, you don’t need to choose between a tab bar or sidebar for navigation; instead, you can adopt a style of tab bar that provides both. The app first launches with your choice of a sidebar or a tab bar, and then people can tap to switch between them. As the view resizes, the presentation style changes to fit the width of the view. For guidance, see Tab bars. For developer guidance, see sidebarAdaptable.iPadOS.
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 withinbehind the camera housing at the top edge of the window. For developer guidance, see NSPrefersDisplaySafeAreaCompatibilityMode.
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 area. 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 seeProviding these margins ensures your 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.is visible regardless of TV compatibility settings or overscan cropping.
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.
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.
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.
The guidance belowIn visionOS, you can help you lay out content within the windows of your visionOS appa window, a bounded 3D volume, or game, making it feel familiar and easy to use. Foran immersive space. The guidance below focuses on laying out content in a window or volume; for guidance on displaying windows in spacecontent spatially and best practices for using depth, scale, and field of view in your visionOS app,positioning, see Spatial layout. To learn more about visionOS window components,windows and volumes in visionOS, 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
In general, support resizing. The ability to resize windows and volumes is standard behavior in visionOS, just as in macOS and iPadOS. When you allow resizing, make sure your layout adapts well as it changes size, and prefer to keep content horizontally centered at very large sizes so people can easily view and interact with it.
You can also choose to set a minimum and maximum size for windows, volumes, and attached UI elements like ornaments. Use these settings to keep elements from overlapping at small sizes, and to keep large layouts from becoming too unwieldy; but don’t use minimum and maximum sizes as a way to prevent resizing. For example, in Safari, people can resize browser windows, but the custom navigation bar ornament has a fixed maximum size so that controls remain easy to access. For developer guidance, see Positioning and sizing windows.
MakeUse 3D content sparingly in windows. While windows in visionOS can display 3D content at a window’sfixed depth, reserve this for meaningful moments alongside 2D content. For example, an educational app might display an inline 3D model of a rocket next to information about the model. When displaying 3D content inline, place it inset in the window to avoid it colliding with other content or controls, or appearing unpredictably outside the window edge.
To display larger models or views that primarily consist of 3D content, consider using a volume or placing content in an immersive space.
Display supplemental content in an adjacent window, not in an ornament. While ornaments are flexible enough to act as custom components, they are best for app-specific interactive components easy for peoplecontrols like toolbars and video playback controls, not supplemental content. To display a supplemental content view, open a new window next to look at. You need to includethe current one using defaultWindowPlacement(_:) instead of placing the content in an ornament. For developer guidance, see Positioning and sizing windows.
Include enough space around an interactive component so that visually identifying it iscontrols for them to be easy and comfortable,to interact with. Put enough space around controls to make them clearly identifiable, 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.
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.
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Composing custom layouts with SwiftUI — SwiftUI
Date | Changes |
|---|---|
September 9, 2026 | Updated guidance to reflect current best practices. |
September 9, 2025 | Added specifications for iPhone 17, iPhone Air, iPhone 17 Pro, iPhone 17 Pro Max, Apple Watch SE 3, Apple Watch Series 11, and Apple Watch Ultra 3. |
June 9, 2025 | Added guidance for Liquid Glass. |
March 7, 2025 | Added specifications for iPhone 16e, iPad 11-inch, iPad Air 11-inch, and iPad Air 13-inch. |
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. |