#AppleWatch - components, guidelines

Authors: Tomasz Soroka

19.06.2015

Navigation 

When you design #applewatch application You can choose only one navigation model.

Hierarchical

  • for master-detail interface
  • to present a navigable list of options... 
but avoid creating to many levels!

Page - based

  •  to present collection of information 
  • Vertically scroll is used to display page
  • Horizontally swipe is used to change between pages 
 but avoid displaying too many pages!


Glances

Purpose: helps people to get a quick look at content
  • Should contain value information
  • Should be easy to read

Glances design

  • Upper and lower portions of the glance provide standard baseline for content
  • Upper-right corner is reserved for system status indicators
  • Align content to the left

Notifications 

  • Used to communicate important information
  • There is two stages of notification: long look and short look 
  • Short-look and long-look interface is provided automatically if app supports notification

Short look

  • Contains brief but meaningful information about notification
  • When wrist is lower short look disappears
  • If user’s wrist remains raised, AppleWatch displays a long look
  • Title of short-look notification should be short and easy to understand
  • Remember about user’s privacy: avoid including potentially sensitive text

Long look

  • Appears when wrist remains raised or when the wearer taps a short look notification
  • Custom long look can be statistic and dynamic
  • Static look displays text and imaginary
  • Dynamic look gives access to full content
  • App’s sash contains app icon and name
  • It is possible to choose sash color or select the blurred sash option
  • Dismiss button is added by system automatically
  • Digital crown can be used to scroll long look
  • It is possible to add up to four custom action buttons



Modal sheets 

A modal sheet is a full-screen view that slides over the main app interface

Close button

  • Top-left corner is reserved for Close button which is always white. It is possible to retitle
  • Don’t use “back” or “<” because you may mislead wearers
  • Don’t use close button to title page

Accept button

  • Provide a separate accept button
  • Don’t display second modal sheet

Handoff

  • Handoff is used to convey action started on AppleWatch on other devices
  • It is shown on mobile devices as a small icon in low left corner. Unlocking the phone will open to the same screen the Watch was on.


More interesting informations on:  https://developer.apple.com/watch/human-interface-guidelines/app-components/