UI Foundations

• App icons
  • Should be round and flat, with 3D effect to expand the layers.  So you should use layers to create parallax affect on other platforms (up to three layers).  1024×1024 layers will be cropped by a circle to create the 3D layers – Be careful with layers.
• Materials
  • Need to adapt to lighting conditions and surrounding 
  • New language uses the glass material – this allows for ability to see what is behind your window.  
  • Avoid solid colors (will have to really focus on UI for my app)
  • There are system defined vibrancy will cover below.
  • Don’t stack lighter material on top of each other
• Typography
  • All font styles use semantic names – check out “Principles of spatial design”
  • Weight has been changed on visionPro to make it easier to see
  • Two new style son vision Proc – Extra Large Title 1
• Vibrancy
  • Key to maintain legibility across system
  • This updates in real time since the background can constantly change 
  • Use Primary for standard
  • Use secondary for description
• Colors
  • Consider using white text or symbols
  • If you need color, use it in a background layer or the entire button

Layout

• Ergonomics
  • This is key, content should be placed intentionally, I.e. easier to go left or right, than up or down
  • Go wider aspect ratio, instead of taller
  • Prioritize key information in the center
• Sizing
  • Must be a target of 60pts of space, standard button is 44pts with 8 pts of space around on all sides
  • For smaller items (disclosure button) like 28 pts ,but it still has 60 pts around it
• Focus feedback
  • System components provide a subtle highlight (hover effect) – this gives people confidence they are focusing on the right element
  • Make sure you have a small amount of space (at least 4 pts) to make sure that hove can occur
  • Ensure nested elements have relative corners – remember – inner corner radius + padding = outer corner radius 
  • Make sure to use continuous corners

From screen to spatial

• Window
  • Use glass material instead of opaque material
• Tab Bar
  • This will be moved to the left side of the window – vertically
  • Avoid having more than six items
• Side Bar
  • This will automatically expand to labels if someone looks for a while
• Ornaments
  • These are placed at the bottom slightly in front of the window, great for tool bars
  • Also adds depth to an app.  Use borderless buttons to keep it clean
  • Overlap by 20pts to make the feel like they are integrated with the main window
  • It is only recommended to disappear when focusing on a single piece of content, like watching a movie
• Menus
  • Can expand outside of the window and they are centered by default
  • Change the button that selects them, to selected state
  • Avoid using buttons with white backgrounds unless they are selected
• Popovers
• Sheets
  • Modal views in the center of the app, pushing the parent view back 
  • Consider using push navigation for nested view
  • Always place close buttons on the top left corner