TRAKTIME REAL-TIME UPDATE FOR YOUR NEXT TRAIN JOURNEY.

Size: px

Start display at page:

Download "TRAKTIME REAL-TIME UPDATE FOR YOUR NEXT TRAIN JOURNEY."

Kerry Sherman
5 years ago
Views:

1 TRAKTIME REAL-TIME UPDATE FOR YOUR NEXT TRAIN JOURNEY. ANDROID WEAR & APP A watch face interaction with data complications providing an informative user experience.!1 1

next immediate train in the hour Icons illustrate mode; going work to or from home Balanced watch face elements by using

2 WATCH FACE A watch face with data complications providing an informative user experience. SIMPLE, CLEAR Key information is understandable at a glance DATA, VISUALLY DISPLAYED Time left until departure for your next immediate train in the hour Icons illustrate mode; going work to or from home Balanced watch face elements by using consistent alignment Victoria St. 7mins ACTIVE MODE WHERE, WHEN Station where train departs from with time left in a container ALWAYS-ON MODE

VALIDATE Done as a quick exercise for the

SKETCH Display time until your next train

3 VALIDATE Done as a quick exercise for the Reply Xchange eevent. WHAT WE WNATED TO DO Then as an R&D exercise to advance our knowledge of developing on the platform. TFL API Core Functionality Display time SKETCH Display time until your next train departs the station Limit animation to save power Design Android Dev - Wear Android Lead Android Dev - App CRITIQUE CRITIQUE dev + designer whole team PRESENT PRESENT SKETCH PROTOTYPE

ANDROID WEAR INTERACTION TYPE WATCH FACE Wear makes it easy for users to be more connected to both the online and real worlds by making important information available at a glance.

By including a gadget called a complication, installed apps may display useful data - providing the right information at the right time. https://designguidelines.withgoogle.

4 ANDROID WEAR INTERACTION TYPE WATCH FACE Wear makes it easy for users to be more connected to both the online and real worlds by making important information available at a glance. Android Wear uses 4 interaction types: notifications, watch faces, native apps, and voice commands. Watch faces Watch faces can tell more than time; they can show relevant, timely data. By including a gadget called a complication, installed apps may display useful data - providing the right information at the right time. The majority of Wear devices have round displays, which have 22% less UI space than rectangular displays. Round displays also need larger margins for text to be easily readable. Design for round devices first to make sure your layout works within the smaller size constraints. People wearing watches are regularly in motion, whether they are standing, gesturing, or running to catch a bus. Test designs in situations that involve user movement to make sure the design is usable at a glance.

5 Typography Watch faces and complications Roboto Condensed 25 ANDROID WEAR GUIDELINE Light 22pt, leading 26.4pt Maximum font size: Headlines, page headings Light 20pt, leading 24pt Dialog titles, notification titles, notification body text Regular 22pt, leading 26.4pt Regular 20pt, leading 24pt Value 16:43 BRU 1h 5m 25 Confirmation overlay Percentage 16:43 BRU Time 1h 5m Failure overlay 25 Colour 22:32 Open on phone overlay Light 18pt, leading 21.6pt Confirmation screen text Regular 18pt, leading 21.6pt ,239 steps 16:43 BRU Red 500 #F44336 #FF4336 #A62C23 Pink 500 #E91E63 #FF216B #A62C23 Purple 500 #9C27B0 S: 50% #EC80FF #9224A6 Deep Purple 500 #673AB7 S: 50% #AE80FF #5E35A6 #661B15 #660D2B #5A1666 #3A2166 #4D1410 #4D0A20 S: 100% #41004D S: 100% #1C004D #330D0B # S: 100% # S: 100% #0E0026 Light 16pt, leading 19.2pt Body text, list item text, conversation text, app launcher items text, contact item text Light 14pt, leading 16.8pt Fuse (countdown timer) text, menu item descriptions Light 12pt, leading 16pt Timestamps, metadata, etc Material Design for Wearables Sticker Sheet Regular 16pt, leading 19.2pt Regular 14pt, leading 16.8pt Regular 12pt, leading 16pt GOOG 25 0:00:15 0:00:15 1h 5m Indigo 500 #3F51B5 S: 50% #8093FF #3A4AA6 #242E66 S: 100% #000B4D S: 100% # Teal 500 # #00FFE5 #00A695 #00665C #004D45 # Yellow 500 #FFEB3B #FFEB3B #A69926 #665E17 #4D4712 H: 22º S: 68% #26160C Brown 500 # #FFB499 #A67563 #66483D #4D362E #261B17 Blue 500 #2196F3 S: 50% #80C6FF #1766A6 #0E3F66 S: 100% #002A4D S: 100% # Green 500 #4CAF50 #6EFF72 #47A64A #2C662E #214D22 # Amber 500 #FFC107 #FFC107 #A67E05 #664D03 #4D3A02 H: 22º S: 44% #261C15 Grey 500 #9E9E9E (White) #FFFFFF #A6A6A6 # #4D4D4D # Light Blue 500 #03A9F4 S: 50% #80D7FF #0272A6 # S: 100% #00344D S: 100% #001A26 Light Green 500 #8BC34A #B5FF61 #76A63F # #364D1D #1B260F Orange 500 #FF9800 #FF9800 #A66300 #663D00 #4D2E00 # Blue Gray 500 #607D8B #B0E5FF #7295A6 #465B66 #35454D #1A2226 Cyan 500 #00BCD4 #00E1FF #0092A6 #005A66 #00444D # Lime 500 #CDDC39 #ECFF42 #99A62B #5E661B #474D14 H: 161º S: 41% # Deep Orange 500 #FF5722 #FF5722 #A63716 #66220D #4D190A #260D05 White #FFFFFF Black #000000

6 DESIGN EXPLORATIONS VERSION 1

7 VIDEO With a single tap on the watch face, users can open an app associated with a complication or change the look of the watch face itself, such as its colour. PROTOTYPE WATCH FACE

8 DESIGN EXPLORATIONS VERSION 2

9 DESIGN EXPLORATIONS APP A B C FINAL

10 THANK YOU & QA

Gateway Ascii Command Protocol

Gateway Ascii Command Protocol Table Of Contents Introduction....2 Ascii Commands.....3 Messages Received From The Gateway....3 Button Down Message.....3 Button Up Message....3 Button Maintain Message....4