| contributors |
|---|
mattbischoff, Jeehut |
Speakers: Lorena Pazmio, Miquel Estany Rodriguez
- App icons are familiar but 3D
- When looked at, they expand
- System handles this effect by adding specular highlights and shadows
- Use multiple layers
- Up to 3
- Each layer is a square image
- 1024×1024
- Circular mask is automatic
- Automatically shadow cast behind foreground layers
- Keep graphics centered
- Avoid layers with reduced opacity
- Apps should be easy to place
- Apps should be easy to use at any distance
- Apps should be easy to view in any lighting condition
- Windows act as a canvas for UI
- Avoid opaque windows
- Too many opaque windows makes UI feel heavy and overwhelming
- No distinct light and dark mode
- Lighting in the room influences the UI
- Glass window
- Sidebars use darker materials
- Other elements uses lighter materials
- Inputs that are highlighted might user darker materials
- Don’t stack lighter materials because it impacts contrast
- Unlike iOS/macOS: No light and dark modes, glass adapts naturally
- Semantic names
- Point based unit sytem
- see: Principles of spatial design
- Font weight
- Modified to be slightly heavier on visionOS
- Body is semibold by default
- Extra Large Title Styles
- Editorial
- Use bolder font weights for legibility
- Updates in real time
- Works on top of the glass material
- Use system components when possible
- Takes advantage of vibrancy by default
- Three modes:
primary: for standard textsecondary: for descriptions, footnotes, subtitlestertiary
- Consider using white text or symbols
- For color
- Use it in a full button rather than just text
- System colors adjust hue/vibrancy based on background
- Left and right neck motion is easier than up and down
- Use wider aspect ratios than taller
- Center important information in your app
- Use sizes that are easy to target
- Tap targets should be at least 60x60 points of tappable space.
- 44 point buttons should have at least 8 points of space around it
- Buttons in stacks should have at least 16 points of space around them
- Mini buttons like 28 pixel size in section headers may look small but they have at least 60 points of space around them
- Large and XL buttons require less spacing around them
- Give interactive elements at least 60 points of space
- Hover effect is automatic
- Disabled buttons don’t have a hover effect
- Lists and menus should have 4 points of space for the hover effect
- Same for a lockup like Music.
- Define a custom region for a single selectable element.
- Nested elements should have concentric continuous corners.
- inner corner radius + padding = outer corner radius
- Every element is concentric to its nested elements
- Most interaction happens at a distance
- Additionally, direct interaction or keyboard / trackpad
- Use system components
- see: Design for spatial input
- made of glass material
- with window bar below
- Vertical and fixed on the left side of Windows
- Avoid having more than 6 items
- Long looks shows labels for each section (automatic expand & collapse)
- Used to provide sub navigation from the tab bar
- Replaced for segmented controls in iOS
- Positioned outside the window with depth, at the bottom
- Great for toolbars
- Usually a collection of buttons: Borderless buttons
- Examples: Years/Months/Days in Photos, Playback Controls in Music
- At the bottom: Overlap by 20 points
- Only hide ornaments when looking at a single piece of content
- Ornaments can expand or have navigation hierarchy
- Centered
- Can expand outside the window
- Buttons should be selected when the menu or popover is open
- Avoid using buttons with white backgrounds unless selected
- Centered
- Maintain z position of the window and the window pushes back
- Secondary modal cal be used with additional dimming
- Consider push navigation within modals
- Close and back buttons should be in the top left
- "Pushing" a view onto the stack uses "cross dissolve" animation instead of moving to right
- Spatial Captures, can be expanded