Apps display the same interface on both sizes of Apple Watch. Relative positioning lets items expand as needed to fill the available space. Elements of your interface are laid out top to bottom and left to right.
Avoid displaying too much information onscreen at once. Users want to see the most important information instantly, so you don’t want to clutter the screen with inessential details. Users can easily access secondary information by scrolling.
Create visual groupings to help users 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 go from one edge of the screen to the other. The Apple Watch bezel provides a natural visual padding around your content. In addition, minimize the padding between elements to avoid wasting valuable space.
Use a menu to replace buttons when appropriate. Menus offer a dedicated place to list actions. You can often free up space in your user interface by removing buttons and replacing them with menus.
Limit the number of side-by-side controls in your interface. Icons are more effective than text for side-by-side buttons. Limit side-by-side buttons with icons to no more than three. Although two buttons with short text labels may be placed side by side, this should only be done on nonscrolling scenes. It’s best to let text buttons span the full width of the screen.
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.
Supporting Multiple Screen Sizes
While Apple Watch has four different screen sizes, the 40mm and 42mm screens offer approximately the same amount of space for your user interface, and can generally use the same layout. The 38mm, on the other hand, offers less space, while the 44mm offers considerably more.
While your app should display the same information regardless of the screen size, you may need to adjust the layout to make sure the content fits on all screens. Dynamic Type scales your text across displays by automatically changing the font size. You can also use larger images to fill additional space on the larger screens.
Designing For Rounded Corners
The Apple Watch Series 4 screen has rounded corners. The corners can clip content displayed close to the edge.
The top corners are typically blocked off by the status bar. However, the clock and the app’s title are inset to avoid the rounded corners. WatchKit defines the Minimum Layout Margins based on these insets. Text elements should align with these margins, while graphic elements and button backgrounds continue to extend beyond the margins to the screen’s edge.
Similarly, WatchKit defines the content-safe area as the region below the status bar but above the rounded corners at the bottom of the screen. To avoid clipping, scrolling content, like table view rows or buttons, should settle within the content-safe area.
If you are using system containers and controls, WatchKit automatically lays out and manages the contents relative to the margins and safe areas, so that your user interface appears in an optimal location on the screen.
However, if you create a custom layout using SpriteKit or SceneKit, you need to avoid the corners on your own. You can check the device’s Minimum Layout Margins and content-safe areas, and position your content accordingly.