Apps display the same interface on all sizes of Apple Watch, adjusting the layout as necessary. You can often use the same layout on screens that have similar areas. For example, the 40mm and 42mm screens offer approximately the same amount of space; similarly, the 41mm and 44mm screens offer about the same amount of space. The 38mm, on the other hand, offers less space, while the 45mm offers considerably more, so you may want to adjust your layout for these screens.
Show the same content, regardless of display size. Use relative sizing and Dynamic Type to ensure that items expand or contract naturally to fill the available space. It’s also best to use the same image for all display sizes; for guidance, see Image Optimization.
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.
Avoid displaying too much information onscreen at the same time. People want to see the most important information instantly, so you don’t want to clutter the screen with nonessential details. People can easily access secondary information by scrolling.
Create visual groupings to help people find the information they want. For example, use negative space and separator lines to place related elements and information into distinct areas.
Use the full width of the screen. 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, you can also minimize 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.
Left align elements. Left-aligned text is easier to read, while vertical stacks of buttons with text labels — especially multiline labels — are often more scannable.
Designing for Rounded Corners
Beginning with Apple Watch Series 4, the screen has rounded corners, which can clip content that’s displayed too close to the edge. The top corners are typically blocked off by the navigation bar, and the clock and the app’s title are inset to avoid the rounded corners. The system uses these insets to define margins that both SwiftUI and WatchKit use to help you lay out your content.
SwiftUI and WatchKit also respect a one-pixel boundary that the system defines at the side edges of the screen. Although text should align with the margins so that it remains legible at a glance, graphic elements and button backgrounds can extend beyond the margins and up to this one-pixel boundary. For developer guidance, see edgesIgnoringSafeArea(_:) (SwiftUI) and systemMinimumLayoutMargins (WatchKit).
As shown above, the system defines the content safe area as the region below the navigation bar and above the rounded corners at the bottom of the screen. To avoid clipping, the list rows, buttons, and other scrolling content should settle within the content safe area. For developer guidance, see safeAreaInsets (SwiftUI) and contentSafeAreaInsets (WatchKit).
When you use system containers and controls, SwiftUI and WatchKit automatically lay out and manage the contents relative to the margins and safe areas, so that your user interface appears in an optimal location on the screen.
If you create a custom layout using full-screen SpriteKit or SceneKit elements, you need to position your content according to the device’s minimum layout margins and content safe areas. It’s also a good idea to create your own one-pixel boundaries to avoid half-pixel aliasing at the screen edges.