Skip to content

Latest commit

 

History

History
142 lines (94 loc) · 10.3 KB

Android-Wear.md

File metadata and controls

142 lines (94 loc) · 10.3 KB

Note: Below's notes are just summarizing Introduction - Android Wear - Android Wear design guidelines. Be sure to flip through those pages.

Architecture

Android Wear 2.0 is all about 1-dimensional, vertical columns. Horizontal can still play a role, but it is secondary, and lives inline to the vertical column (think carousels).

This , not

3 Primary Views/Columns

Main

Your default column houses your Watch Face at the top, and any collapsed notifications below it.

Watch Face

Another nice example, showing Cool Circle watch face

Interactive watch faces - Patterns - Android Wear design guidelines for more

Collapsed Notifications

  1. A large icon (optional)
  2. An app icon
  3. A content title
  4. Content text
  5. Primary action

from Notifications - Patterns - Android Wear design guidelines

Notification Detail (expanded notification)

Upon clicking on a collapsed notification, you are taken to a new view/column: the expanded notification. To get back to the main column, swipe right. Imagine expanded notifications living in a column to the right of the main column.

  1. A content title
  2. An app name
  3. An app icon
  4. Content text
  5. A big picture (optional)
  6. Inline action: If you have a primary action in a collapsed notification, you should add the same action here.
  7. Smart replies: If the notification is MessagingStyle, the system can show smart suggestions
  8. Action drawer: Add any remaining notification actions in this area. The user can swipe up or tap the overflow icon to open the drawer.

from Notifications - Patterns - Android Wear design guidelines

App

An app is navigated to by a pre-programmed hardware key, by voice, or by the app launcher (shown below).

When it is active, its view takes over (much like an expanded notification), but has some additional components to leverage. Best to think of it as a Viewport layer at the lowest position, and two layers floating over it at the top position (Navigation Drawer) and bottom position (Action Drawer). Note: both drawers use a peek animation to inform the user of their existence.

The Viewport contains:

Navigation Drawer

If used, will have 2+ horizontal tabs that when actived change the Viewport. Much like tabs in your browser.

Can also be collapsed into a single page of multiple buttons.

Action Drawer

A vertical sheet that, when expanded, includes additional actions.

Display Modes

from Android Wear: wear what you want, get what you need

Active Mode

Shows all, bright colors and animations. You just pressed something to wake up the watch.

Always-on Mode (also called Ambient Mode)

Dims screen to grayscale to conserve battery. The more black space on the screen, the more battery is saved.

Note: Apps can take advantage of this, too! No longer just the Face.

from Official Android Blog: Android Wear: Always-on apps

Another example of EveryDay Watch Face

App Capabilities

  • Watch this fake climbing app demonstrating many capabilities
  • Apps can be built as Standalone and installed directly from watch, not needing a paired phone. This opens more doors for the iOS story.

App Dev

Notification Dev

Watch Face Dev

Performance

  • From Actions to battery life, these updates will make Android Wear 2.0 even better
    • "Did you also know that an all-white display can use up to seven times more power than a black display in interactive mode?"
    • "It also wants developers to be smarter with design choices to reduce battery suck, including making use of ambient mode and using fewer animations"
    • "did you know that Bluetooth is way more battery intensive than LTE or Wi-FI? Well it is, and Google wants developers to use the latter when possible to transfer data to Wear devices. It also wants developers to reduce the amount of vibrations and location checks."

Tips