Goals is to surface timely information, communicate at a glance, take advantage of the screen, and make things consistent.
Design Principals
- Timely and relevant: in the moment
- Focused and highly specialized for brief interaction
- Unique to Apple Watch – utilize the Digital Crown – this is becoming a new focus item for apple (should be backed up by touch)
- Consider the journey – people will take from moment they raise their wrist – Smart Stack is an example of this.
Navigation
- Updated in NavigationSplitView
- Borrowed from 2 column layout from weather on iPad – the list is now a button on the top leading screen – great if you have a source list with detailed views. Start with the detailed view when user starts your app. Try with no title
- Transition between detail view and source list is animated. Great for showing comparative data. (Should add number of cards in my view for card app).
- Same API on watch as other platforms.
- TabView updates
- Now it is designed to be vertical. Can be expanded inline so that you can stay on a single screen by default but support localized text, etc.
- Activity is a great example of this. (Uses the .tabvViewStyle(.verticalPage))
- Combine it with .containerBackground((color, for: .tabView) for seamless blending
- Tabview will automatically expand a list if you add it to the grouping.
- Animation to scale information as it moves to new locations. You can now drive animation based on the tabView. You can use .matchedGeometryEffect to do so.
- NavigationStack (core paradigm)
- Use a NavigationStack if the other two don’t address your appropriate workflow.
Layout System Updates
- Dial based views
- Great for dense info delivered at a glance, you can also provide 4 different controls
- Infographic Views
- List views
- Scroll thru context to find what you need
- If you use these layout patterns then your toolbar placement, and the like don’t need extra padding. It just works.
Color and Materials
- Four background materials – Ultra Thin, Thin, Regular and Thick.
- Full screen background gradient
- You can use Primary, Secondary, Tertiary, Quaternary prominence layers – with vibrant versions to ensure legibility