Meet Apple Watch Series 7

Deena Khattab: Hi, I'm Deena Khattab, a designer on the Apple Design team. Later, I'll be joined by my colleagues Jennifer and Matthew. We're really excited to talk through the process of designing for Apple Watch Series 7, but before we get started, let's take a quick look at what's new. Apple Watch Series 7 comes in two new sizes: 41 mm and 45 mm. Both watches feature larger active content areas than ever before. The 41 mm is 176 by 215 points, and the 45 mm is 198 by 242 points. The display on Apple Watch Series 7 curves over the edge, featuring a subtle wraparound effect. The bezel around the screen is thinner and less visible than ever before. Additionally, the screen has a larger corner radius than previous devices. Keeping these key hardware differences in mind, we identified three useful design principles to shape the UI. Series 7 has the largest content areas we've had on watch. We enlarged UI components to make full use of the additional space for enhanced usability. We closely examined typography and color to create clearer hierarchy in watch apps. Apple Watch has always been about lightweight, glanceable experiences. We took a look at navigation and wayfinding to offer a better sense of place in just a quick glance. In summary, apps for Apple Watch Series 7 should be larger, clearer, and more glanceable. In the next section, Jenn will talk about how you can use updated UI elements to embody these principles in your own apps. Jennifer Patton: Thanks, Deena. Let's start with layout margins. Because the corners are so curved, content needs to come in and down so it fits well in the corners. Status bars get taller, matched by a taller scroll clearance margin at the bottom of the screens. And with the smaller bezel between the active display area and the hardware casing, we were discerning about content that nears the edges of the screen. Layout margins are generous on Series 7 to give the content plenty of room to breathe.

Matthew Koonce: Thanks, Jennifer. Hi there, my name is Matthew. Let's use Stocks as an example of how we can use margins effectively on watchOS. First, let's remove the margins that are already applied. As you can see, this layout has a couple of issues. Let's take a closer look. The first issue is the text for the current stock price. It's very close to the edges of the display. This could be a problem on the wraparound display on Apple Watch Series 7. The second issue is the Nasdaq text, which is clipped by the corners of the display. Additionally, we've lost the text alignment to the leading edge of the navigation bar. Let's see how we can resolve these issues with some SwiftUI code. Here I have a snippet from the Stocks layout, which is a simple VStack. First, we can adjust the layout for the current price view by using the .scenePadding modifier. This modifier applies the system-defined padding for the layout margin. As you can see, this resolves the layout for the current price view. Let's use the same .scenePadding modifier on the Nasdaq text below.

And once again, this resolves our layout issues and restores the alignment we were looking for. Note that we did not apply the modifier to the day chart. Some content, like this chart, is perfectly fine to go to the edges of the display. Try to preserve using the .scenePadding modifier only for text content that would distort or be clipped by the edges of the display. Jennifer: We brought large titles into watchOS this year to make apps more glanceable, offer a better sense of place, and establish clearer hierarchy within apps. Scrolling table views will get this large title, similar to large titles on iOS. The title transitions into the status bar on scroll. Root levels and subviews will get the large title. Settings is a great example of how large titles can be used in an app to define a clear sense of place. In fixed views that don't scroll, we looked for opportunities like Timer to bring the title of the view into the content area and out of the status bar, or just remove it entirely where it's not needed, divorcing the titling of the view from the Back button navigation. We also have fixed views where the status bar is still the best place for titling information, like this world clock detail example. Large titles were particularly inspired by the larger active content area available on Series 7 but they also work well on previous 40 and 44 mm devices. Matthew: SwiftUI makes it simple to configure large titles for your app. By default on watchOS 8, all navigation titles are large and are tinted by the application accent color. If you do not want a large title on a particular view, you can use the .navigationBarTitleDisplayMode modifier. After applying this modifier, any subsequent view in your hierarchy will inherit the display mode of the view above.

Jennifer: Color is meant to help with wayfinding, information hierarchy, and signal the personality of your app. In this Mindfulness example, the teal color reinforces the app identity and experience. We use System Teal as the app key color and pushed back the System Gray platter background color to create a more muted effect. List view apps are common on watch. In this Mail example, the use of blue backgrounds enforces that you're in the Mail app and not another app that uses a similar navigation pattern. In this example, bright yellow platters visually differentiate Tips from other carousel navigation apps like Workout. It also reinforces the continuity of the Tips experience across all our platforms. Matthew: You can configure your application's accent color in the asset catalog. After setting a color here, all navigation bars will automatically use this color. More information about configuring the accent color can be found in the developer documentation. Additionally, you can easily use the color yourself in SwiftUI by using the .accentColor modifier. In Mail, we set the listItemTint to the application's accent color at 30 percent opacity. Jennifer: We also took a close look at buttons and button shapes while designing for Series 7 watches. The current button system looks like this. We have rounded rectangular buttons that are seen in scrolling views, and we have a set of pinned buttons that are only seen in fixed views that don't scroll. They're pinned to the bottom of the screen and meant to complement the shape of the screen. For Series 7, we expanded on the same basic system of scrolling and nonscrolling buttons. We simplified to a common secondary-button color scheme, and side-by-side buttons are switching from a split-lozenge shape to side-by-side pill shapes. Here are a couple of examples of buttons in updated apps. A primary scrolling button in the Alarms list at left and side-by-side buttons in the UIPickerView on the right. Let's take a closer look at these pinned button shapes. We took great care in crafting the shape of the buttons for Series 7. Here's an example of what it would look like to use a simple pill shape. See how the flat plane of the button at the bottom creates tension with the curvature of the display? And here is the crafted button shape. I'll do that again. The change is subtle, but deriving the shape of the button from the shape of the display itself makes it so that these buttons that are pinned to the bottom of the screen and will harmonize with the hardware of the watch. The updated buttons will go back to pre-Series 7 devices too. The height of the buttons will remain the same, so no updates to the layout should be needed for adopting these new buttons for existing UI. Matthew: We've updated all buttons in SwiftUI with the new Apple Watch Series 7 look. For the most part, this happens automatically and no changes are necessary in your app. That said, it's important to keep a couple things in mind. When you define a button, like the Cancel button seen here, SwiftUI is applying some default modifiers on your behalf. Buttons on watchOS use a bordered button style and an automatic border shape by default. The automatic border shape means the border shape changes based on context. Outside of a scroll view, the shape is a capsule. For example, these Cancel and Start buttons. In the scroll view, the button has a rounded rectangle shape. For example, the Add Alarm button. Additionally, there's an alternative button style called bordered prominent. This style applies the application accent color to the button, which we do in Alarms. This gives the button a more pronounced look that immediately draws your attention.

Deena: In this next section, we'll discuss typography updates. Series 7 uses the same default type sizes as Series 6: large for 40 mm and 41 mm and extra large for 44 mm and 45 mm. As a result, we gain more character count than previous devices.

We also used type to improve accessibility by adding three larger type sizes. Here's the Mail app at the default type size: extra large. And here it is at the new AX1, AX2, and AX3. To help those who wish to use larger type on their watch, we added Smart Type Suggestions. In the setup flow, your phone now identifies whether you have a large type setting implemented and suggests a similar type size for your new watch. This feature makes it easier to use your preferred type size from the start. While focusing on typography, we recommend supplementing text labels with SF Symbols. For apps with list view-based navigation, we recommend using outlined symbols in your application's accent color, like Mail and Phone. This helps with cross-platform consistency and accessibility. Align your symbol style and colors across platforms where possible. For more information on SF Symbols, check out these talks from WWDC21. Next, we'll highlight the new keyboard and text input features on Apple Watch Series 7. Because of the larger active screen areas, we added a full keyboard. For this keyboard designed specifically for watch, we don't draw borders around keys. This encourages swiping to type while avoiding the feeling that you can miss a tap target. To maximize available space for typing, we pulled the delete key out of the keyboard and into the text field. Additionally, the keyboard allows you to customize the autofill type for certain use cases, like passwords and two-factor authentication. Along with keyboard support, we improved functionality for text inputs. The left and right accessories can be customized using SF Symbols. We recommend using your application's accent color for both symbols to emphasize tapability. Use descriptive words for input field placeholder text and suggested list titles. For more information on the keyboard and text inputs, as well as how to best use them in your applications, check out these WWDC21 talks. We showed you how to take advantage of the new display's full potential with scene padding, automatic button shapes, and hierarchical navigation. For more resources on designing for Series 7, check out "What's new in watchOS 8" and "What's new in SwiftUI" from WWDC21.