tdc 2014 - trilha mobile - material design

Download TDC 2014 - Trilha Mobile - Material design

Post on 21-Apr-2017



Devices & Hardware

0 download

Embed Size (px)


Material Design

Material DesignHow get started?


AgendaMaterial DesignMaterial themeStylesLayoutsElevationWidgetsAnimations

Material Design

Apples Tim Cook insulted Google at WWDC earlier this month (Jun/2014) saying Android dominates the market in malware, and quoted an article calling the fragmented open operating system a toxic hellstew* of vulnerabilities. Well Google punched back this morning at its I/O conference when Sundar Pichai put up a slide showing Androids progress over the years, noting If you look at what other platforms are getting now, widgets, custom keyboards, many of these things came to Android four, maybe five years ago.

* A messy, confusing hodgepodge from which no good can come.

A brief history of AndroidFrom a design perspective

To understand Material Design, its important to understand the history of Android, particularly from a design perspective.

Android has been evolving for several years, and Material Design isnt like Windows Phones Metro or Modern UI, or iOS 7 in being a complete revamp.

Oct. 22, 2008T-Mobile G1 is launched

NotificationsHome screen widgetsOTA updates

Sep. 15, 2009Density Independent pixels introduced in Donut

Density independent pixelsQuick search box

Oct. 26, 2009The Droids arrive

Big screensMultiple account support, allowed services to plug their accountsQuick contactsLive wallpapersSpeech to textNew Lockscreen

Dec. 6, 2010Google acquires Matias Duarte

Visual change for notification trayOverall increased use of darker colours, several widgets redesigned

Feb. 22, 2011Honeycomb showed us a glimpse of what Android would soon look like

Holo and its coloursAction barFragmentsNo physical buttons

Oct. 8, 2011#YOLOHOLO

Holo theme required to be present on all Android devices to run Android Market/Google PlayRoboto fontBlue accents

July 9, 2012Jelly Bean brings actions to notifications, Google Now

Expandable NotificationsGoogle Now ushers users into the contextual age

Oct. 31, 2013Losing the fat

Less resource intensiveFull screen apps with transparent notification tray and on-screen buttonsWhitening of notification tray icons, a sort of mid-way to Android L

June 25, 2014Android L Preview

This is where we are now

Im going to talk about some of the principles and goals of Material Design, as well as some general design philosophy thatll help you to incorporate it into your work.

Ill try to use examples wherever possible

Material ThemeThe material theme provides a new style for our app, system widgets that let us set their color palette, and default animations for touch feedback and activity transitions.

Material DesignUniversal platform design that functions across Android Wear, Android TV, Android Auto, and all of Googles apps and services Making the whole device feel unified Its all about everything animation, but flat at the same time Elevation value to any UI surface to get 3D effects by virtual light sources and real time shadows

Material Theme

Material Design Android RunTime (ART) Battery life (Project Volta) Security Multitasking and Recent App Notifications Many more...

New WidgetsThe Android L Developer Preview includes two new widgets for displaying complex views: The new RecyclerView widget is a More advanced version of ListView. The new CardView widget lets us Important pieces of information inside Cards that have a consistent look and Feel.

View ShadowsIn addition to the X and Y properties, views in the Android L Developer have a Z property. This new property represents the elevation of a view, which determines: The size of the shadow - Views with higher Z values cast bigger shadows. The drawing order - Views with higher Z values appear on top of other views.

AnimationsThe Android L Developer provides new APIs that let us to create custom animations for touch feedback in UI controls, view state changes, and activity transitions. Touch feedback animations are built into several standard views such as buttons. The new APIs let us customize these animations and add animations to our custom views

AnimationsThe new animation APIs let us: Respond to touch events in our views with touch feedback animations. Hide and show views with reveal effect animations. Switch between activities with custom activity transition animations. Create more natural animations with curved motion. Show animations in state list drawables between view state changes.

Principles of MaterialDesign Material is the metaphor : A material metaphor is the unifying theory of a rationalized space and a system of motion. Bold, graphic, intentional : These elements do far more than please the eye; they create hierarchy, meaning, and focus. Motion provides meaning : Motion is meaningful and appropriate, serving to focus attention and maintain continuity.

Animation has four contentsAuthentic MotionResponsive InteractionMeaningful TransitionsDelightful Details

AnimationAuthentic Motion Perceiving an object's tangible form helps us understand how to manipulate it. Observing an object's motion tells us whether it is light or heavy, flexible or rigid, small or large. Contents Mass and Weight: Physical objects have mass and move only when forces are applied to them.Objects cant start or stop instantaneously.

AnimationResponsive InteractionResponsive interaction builds trust with the user and engages them. It is thoughtful and purposeful, not random, and can be gently whimsical but never distracting.

In material design, apps are responsive to and eager for user input:

Touch, voice, mouse and keyboard are all first-class input methods Although UI elements appear tangible, they are locked behind a layer of glass

Animation(Responsive Interaction)Surface Reaction One way to express this acknowledgment is through the ink metaphor, the dynamic display surface that coats every sheet of paper.

Animation(Responsive Interaction)Material Response In addition to ink-like actions on the surface, the material itself can also respond to interaction. The material can lift up when touched or clicked, indicating an active state. Material appears from touch point. Paper appears from center of screen, breaking relationship with input.

Animation(Responsive Interaction)Meaningful Transitions It can sometimes be difficult for a user to know where to focus their attention in an app or how an app element got from point A to point B. Motion design should not only be beautiful, but serve a functional purpose.

ExamplesVisual Continuity Transitioning between two visual states should be smooth, appear effortless, and above all, provide clarity to the user, not confusion.

A transition has three categories of elements: Incoming elements Outgoing elements Shared elements

Animation(Meaningful Transitions)Hierarchical Timing When building a transition, consider both the order in which elements move and the timing of their movement. It Ensure that motion supports the information hierarchy.

Animation(Meaningful Transitions)Consistent Choreography As transitioning elements move around the screen. They should behave in a coordinated manner.

Animation(Meaningful Transitions)Delightful Details Animation can exist within all components of an app and at all scales, from finely detailed icons to key transitions and actions. All elements work together to construct a seamless experience and a beautiful, functional app.

What were the goals?

Just like any other project, before creating a design language, the team needs to set itself some goals

You see where you are, and what you want to achieve

The goal of HOLO, for example, was to bring about a cohesive structure that scaled easily from phones to tablets

synthesize the classic principles of good design with the innovation and possibility of technology and science

Design has been around for years. While it has evolved in many ways, certain rules and principles remain everlasting.

Material Design looks to mix some of these rules, even from the real world that some might consider skeumorphic, with technology and science

single underlying system that allows for a unified experience across all platforms

Material design is NOT only a redesign for Android.

Material Design is about the new age, where services are now independent of devices and platforms, and the goal is to provide users with a consistent experience regardless of which device theyre using

touch, voice, mouse and keyboard are all first-class input methods

While we wont be talking about this much right now, its important to understand that with Material Design being about more than just the phone, the input mechanisms it must cater for will also vary significantly.

Touch for phones and tabletsVoice for wearablesMouse and keyboards for computers

Material DesignMaterial design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.

Andy RubinSundar PichaiMatias Duarte

Material DesignWhat if we could design for materials of the future instead of materials that we use today? - Matias Duarte

Andy RubinSundar PichaiMatias Duarte

Material DesignThe Android L Developer Preview provided the following elements for you to build material design apps

A new themeNew Widgets for complex viewsNew APIs for custom shadows and animations

Material DesignWhat is Android L? - Unnamed