Labels

Labels use static text to convey short messages and are one of the most common elements in your app. They can span multiple lines and can be updated programmatically.

When you design a label, focus first on legibility. Use lighter colors for label text and use Dynamic Type to ensure that the text is sized appropriately. The built-in text styles offer the best legibility and automatically support Dynamic Type. If custom typefaces are necessary, avoid using ones that are overly stylized.

See Typography for more information about using text in a watchOS app.


Images

An image element displays a single image or an animated sequence of images. Images may be in any format supported by iOS, but the preferred format is PNG. Animated sequences can be started and stopped programmatically.

Size images for 38mm and 42mm displays. You can use a single image resource for both display sizes as long as it maintains clarity.

Create images at 2x resolution. Apple Watch has a Retina display, so there is no need to create standard resolution images. Include @2x in image names.

Use placeholder graphics to hold space for an image while it is loading. A placeholder is a visual cue that an image occupies a specific location but is not yet ready to be displayed. Placeholders let you load your interface quickly and still have the time to prepare the images you need.

Optimize images. Strive to use images that are small and efficient and still achieve the desired goal. For tips on how to optimize your images, see Image Optimizations.


Groups

Groups help you lay out other elements, such as images and labels. A group has attributes for specifying position, size, margins, and other layout-related properties. It also has a background image, color, and corner radius that can transform the group into a visual element.

Use groups to arrange items horizontally or vertically. All items in a group are laid out in the same horizontal or vertical line. Use the group’s inter-item spacing attribute to add space between items. Use the group’s margins to add space between the group and its surrounding items.

Nest groups to mix horizontal and vertical content. You can use nesting to achieve specific layouts for your content. For example, you can place multiple vertical groups inside a single horizontal group.

Optimize the images you use for the background of your group. Strive to use images that are small and efficient and still achieve the desired goal. For tips on how to optimize your images, see Image Optimizations.


Pickers

Pickers display lists of items that are navigable using the Digital Crown. They are meant to be a precise and engaging way to manage selections. Pickers present their items in one of three styles:

List style displays text and images in a scrolling list. This style displays the selected item and the previous and next items if those items are available.
Stack style displays images in a card stack style interface. As the user scrolls, images are animated into position with the selected image on top. This style is best for photo browser interfaces.
Sequence style displays one image from a sequence of images. As the user turns the Digital Crown, the picker displays the previous or next image in the sequence without animations. This style is good for custom picker interfaces built using your own images.

Pickers can be configured to display an outline, caption, or scrolling indicator. These elements help identify the picker onscreen and help the user navigate its contents.

Use captions to clarify the meaning of items or of the picker itself. You can assign unique captions to items when the meaning of those items is unclear. Alternatively, assign the same caption to all items to identify the purpose of the picker itself.

Display a scroll indicator when the total number of items might not be obvious. A scroll indicator reflects the total number of items in a picker and shows the user’s position within the list. A scroll indicator is unnecessary when the sequence and number of items is obvious, such as specifying the number of seconds for a timer.


Tables

Tables present rows of content in a single column. A table row is dynamically configurable and its contents can be changed at any time. Tables are inherently scrollable, support various interactions, and can be assigned a background color or image.

Use row types consistently. Although a table can contain multiple row types, it should present a consistent overall appearance. Start with the row type you use for your main content, and add more as needed to support other types of content, such as headers or footers. Always use each row type for its intended purpose. For example, don’t display content in a row type designed for headers or footers.

Limit the number of table rows to about 20. Display the most important rows at the top and let the user view more on demand. Fewer rows are easier to scan quickly.

Don’t embed tables inside groups. Tables resize dynamically based on the number of rows they contain; they ignore height restrictions placed on them by groups.

Do not include chevrons in table rows. The row background communicate the tappable nature of the row. You do not need to include a chevron or other text to indicate that the row is tappable.

Use vertical page-based navigation for fast navigation of your table’s content. With vertical page-based navigation enabled, users swipe vertically to navigate between the detail items of different table rows. This navigation saves time by eliminating the need to navigate back to the previous screen and tap a new detail item.


Buttons

A button performs an app-specific action. Buttons have customizable backgrounds and rounded corners. They can contain a label, an image, or a group object.

Create buttons that span the width of the screen. Full-width buttons look better and are easier to tap. If two buttons must share the same horizontal space, use the same height for both and use images or short text labels for each button’s content.

Use the same height for vertical stacks of one- and two-line text buttons. As much as possible, use identical button heights for visual consistency.

Use the standard corner radius. The standard corner radius for a button is six points. Using the standard radius promotes a consistent visual style across apps and reinforces the intent of buttons.

Make buttons large enough to be tapped easily. Create buttons that are easy for the user to tap. Buttons should be sized with the following minimum values.

38mm (minimum) 42mm (minimum)
Circular buttons 75 pixels 80 pixels
Round rectangular button 50 pixels high 52 pixels high

Switches

A switch lets users choose between two mutually exclusive choices or states, such as on or off. A label must always be displayed next to a switch to specify which property the switch affects.


Sliders

A slider lets users make adjustments to a value. A slider displays its value as a set of steps or as a continuous bar. It always increases and decreases its value by a predetermined amount and within a finite range.

Use custom images to communicate what the slider does. The system displays plus and minus signs by default.


Maps

Maps are static snapshots of geographic locations. You place a map in your interface at design time, but your WatchKit extension must configure the displayed region at runtime. The displayed region is not interactive, but tapping a map will open the Maps app on Apple Watch.

You can annotate a map to highlight points of interest or other relevant information. A map can display the standard green, red, and purple pins. It can also display custom images. The system lets you add up to five total annotations to a map.

Size the map element to fit the screen. The user should be able to see the entire map element on the Apple Watch display without scrolling the screen.

Configure the displayed map region to be the smallest area that encompasses the points of interest. The contents of the map element itself do not scroll, so all intended content must be enclosed by the specified map region.


Movies and Inline Movies

Movie elements display a poster image and, when tapped, present audio or video modally. Inline movie elements present audio or video inline without displaying a modal interface. Use these elements to incorporate short media clips into the rest of your content. Playback of media files is managed by the system

Keep audio and video clips short. Clips should be no longer than 30 seconds, and shorter is preferred. Long clips consume more disk space and require users to keep their wrists raised for longer periods of time, which can cause fatigue.

Size video clips appropriately. Use the recommended sizes for clips whenever possible. Scaling video clips affects performance and results in a suboptimal appearance. For information about the recommended sizes and encoding values, see Audio & Video.

Use a poster image that is representative of the clip’s contents. Poster images let users make informed decisions about whether to view the clip associated with a movie. Do not use images that have nothing to do with the clip.

Do not create poster images that look like system controls. For movie elements, make audio and video content feel like part of your interface. Don’t hide them by making them look like something else.


Date & Timer Labels

Date and timer labels display real-time values on Apple Watch.

A date label displays the current date, the current time, or a combination of both. It can be configured to use a variety of formats, calendars, and time zones. After you configure it, a date label updates its value without further input from your app.

A timer label displays a precise countdown or count-up timer. It can be configured to display its count value in a variety of formats. After you configure it, a timer label counts down or up without further input from your app.


One Action

Two Actions

Three Actions


Activity Rings

Apps can enhance their health and wellness offerings by displaying an Activity ring element that shows an individual’s progress toward Move, Exercise, and Stand goals. This element always contains three rings, whose colors and meanings match those provided by the Activity app.

Use Activity rings for Move, Exercise, and Stand information only. Activity rings are designed to consistently represent progress in these specific areas. Don’t attempt to replicate or modify Activity rings for other purposes. Never use Activity rings to display other types of data. Never show Move, Exercise, and Stand progress in another ring-like element.

Use Activity rings to show progress for a single person. Never use Activity rings to represent data for more than one person, and make sure it’s obvious whose progress is shown, such as by using a label, a photo, or an avatar.

Don’t use Activity rings for ornamentation. Activity rings should provide information to people, not embellish your app’s design. Never display Activity rings in labels or background graphics.

Don’t use Activity rings for branding. Use Activity rings strictly to display Activity progress in your app. Never use Activity rings in your app’s icon or marketing materials.

Maintain Activity ring and background colors. For a consistent user experience, the visual appearance of Activity rings must always be the same, regardless of the context in which they appear. Never change the look of the rings or background by using filters, changing colors, or modifying opacity. Instead, design the surrounding interface to blend with the rings. For example, enclose the rings within a circle. Always scale the rings appropriately so they don’t seem disconnected or out of place.

Maintain Activity ring margins. An Activity ring element must include a minimum outer margin of no less than the distance between rings. Never allow other elements to crop, obstruct, or encroach upon this margin or the rings themselves. To display an Activity ring element within a circle, adjust the corner radius of the enclosing view rather than applying a circular mask.

Differentiate other ring-like elements from Activity rings. Mixing different ring styles can lead to a visually confusing interface. If you must include other rings, use padding, lines, or labels to separate them from Activity rings. Color and scale can also help provide visual separation.

Provide app-specific information only in Activity notifications. The system already delivers Move, Exercise, and Stand progress updates. Don’t repeat this same information, and never show an Activity ring element in your app’s notifications. It’s fine to reference Activity progress in a notification, but do so in a way that’s unique to your app and doesn’t replicate the same information provided by the system.


HomeKit Cameras

HomeKit Camera elements let you display content from a connected HomeKit IP camera. Use this element to display still images or streaming video from the camera.

Show a microphone button only if the camera supports bidirectional audio. Don't unnecessarily take screen space away from the camera's imagery.


SpriteKit and SceneKit Scenes

SpriteKit and SceneKit scene elements display generated 2D and 3D content. You provide the scene content programmatically using the associated framework. Use gesture recognizers to handle interactions with your content.

SpriteKit

SceneKit


Payment Buttons

Payment buttons begin the process of paying for goods or services using Apple Pay. A payment button displays the Apple Pay logo and can be sized appropriately for your content.

Don’t advertise Apple Pay if it isn’t available. If the user hasn't set up Apple Pay, don’t show a payment button in your app.