visual continuity material design
TRANSCRIPT
Visual Continuity Material Design
+PietroAlbertoRossi @sprik89
What?
“Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies.
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
This is Material Design.”
Material Design
Material Design
Material is the metaphor
Bold, graphic, intentional
Motion provides meaning
Visual Continuity
What is it?
Visual continuity is a concept that defines how two objects should work each other to permit clarity to the user.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
How the users attention should be directed?
Animation Transition Motion
Animations
Touch FeedbackVisual feedback when a view has been touched
<ripple xmlns:android=“…“ android:color="@android:color/black" > <item android:drawable="@drawable/bg" /> </ripple>
Activity TransitionVisual continuity when one activity transitions toanother
getWindow().setEnterTransition(new Fade()); getWindow().setExitTransition(new Explode());
Reveal EffectIt is a clipping circle that changes radius to reveal or hide a view.
ViewAnimationUtils.createCircularReveal (myView, cx, cy, initialRadius, finalRadius)
CardView
RecyclerView
Notifications
Visual changes
Device lockscreenWhen setting up a secure lock screen, the user can choose to conceal sensitive details from the securelock screen. In this case the System UI considers the notification's visibility level to figure out what can safely be shown.
Notification.Builder.setVisibility() VISIBILITY_PUBLICVISIBILITY_PRIVATEVISIBILITY_SECRET
Category
Priority
Visual Continuity?
Example 1
Example 1
Example 2
Example 2
Example 3
Example 3
Tips
Ripple Effect
drawable/ripple.xml
Custom Ripple Effect
drawable/background.xml
drawable/customripple.xml
Reveal Effectreveal.java
Activity TransitionTransitionActivity.java
Floating Action Buttonlayout/fablayout.xml
anim/ztranslate.xml
What’s next?Material Design developer.android.com/design/material/
Example github.com/sprik/
www.sprik.it
