August 2, 2014

Google provides new looks at Android Wear

mocks

Developers designing for Android Wear will have some challenges ahead of them, as according to Roman Nurik and Timothy Jordan, design and developer advocates for Android Wear, the design experience is like none other.

Over at the Android Developers Blog, they did a walk-though of designing an app for Android Wear, since while Nurik designed a number of touch touch interfaces for Android and Jordan had a ton of experience with Google Glass, neither had actually designed an app for Android Wear. Both have prototypes Android Wear devices, the LG G Watch and Moto 360. That Moto 360 prototype seems fairly big in the photos, so hopefully the actual device is a bit smaller, which I’m sure it is.

Screen Shot 2014-06-05 at 3.12.39 PM
Designing a walking tour app in the post, they said that the experience is different from developing for the desktop, smartphones and tablets, and involves much more thinking than pixelpushing.

Beginning with thinking how the app would launch, while a voice command would be standard, they thought that the app could give a “low priority” notification to suggest a walking tour when one is nearby, then used a design template for both round and square devices to design the app.

The app gives a notification in the content stream when a walking tour is nearby, then there are notifications guiding you to your next stop and a multipage stop detail screen for learning about the location when you get there.

As for the actual designs themselves, the square design is constrained to 140×140 dp (280×280 px @ XHDPI). For the circular design, all it required was some slight tweaking, such as :

  • Scaling up backgrounds to 160×160 dp (320×320 px @ XHDPI)
  • Bumping up content margins from 12dp on square to 26dp on round; this means content was 116×116 dp on square and only a little smaller at 108×108 dp on round
  • Pushing down circular actions like “Continue tour” to better vertically center with the watch frame
  • Center-aligning certain short snippets of text on round devices as opposed to left-aligning on square
  • Dropping the side padding for context stream cards (the platform automatically does this for notifications, so there isn’t any actual work to do here)

metrics
Designers can basically use the same layouts for both round and square devices, but with slightly tweaked layouts.

Both said  the feeling they got designing for Android Wear is that same feeling you get when you first dreamed up an app, mocked or even coded it up, and ran it on your Android phone, but amplified.

The walking tour app shows just one example of an app we can look forward to seeing on Android Wear. This was only a preview of what’s to come in the coming weeks and months, especially at Google I/O on June 25-25 in San Francisco. It’ll be interesting to see what other developers will be able to come up with as well.

Via Android Developers Blog