Visual Continuity in Material Design
•
3 likes•1,578 views
Developers know that they had better to change continuosly the way of programming anything. With Material Design every developer can improve their application with minimal effort and quickly. Create a beautiful and user friendly application have never been so easy and the only thing that we do is just write code and material it!
Recommended
Recommended
More Related Content
Similar to Visual Continuity in Material Design
Similar to Visual Continuity in Material Design (20)
More from Pietro Alberto Rossi
Recently uploaded
Recently uploaded (20)
Visual Continuity in Material Design
- 2. What?
- 3. “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
- 4. Material Design Material is the metaphor Bold, graphic, intentional Motion provides meaning
- 6. 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.
- 7. How the users attention should be directed?
- 9. Animations
- 10. Touch Feedback Visual feedback when a view has been touched <ripple xmlns:android=“…“ android:color="@android:color/black" > <item android:drawable="@drawable/bg" /> </ripple>
- 12. Activity Transition Visual continuity when one activity transitions to another getWindow().setEnterTransition(new Fade()); getWindow().setExitTransition(new Explode());
- 13. Reveal Effect It is a clipping circle that changes radius to reveal or hide a view. ViewAnimationUtils.createCircularReveal (myView, cx, cy, initialRadius, finalRadius)
- 15. CardView
- 18. RecyclerView
- 21. Notifications
- 22. Visual changes
- 23. Device lockscreen When setting up a secure lock screen, the user can choose to conceal sensitive details from the secure lock 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_PUBLIC VISIBILITY_PRIVATE VISIBILITY_SECRET
- 24. Category
- 25. Priority
- 28. Example 1
- 29. Example 1
- 30. Example 2
- 31. Example 2
- 32. Example 3
- 33. Example 3
- 34. Tips
Editor's Notes
- Hi everyone, I’m Pietro Alberto from Palermo in the south of Italy, I’m working at Mosaicoon S.p.A and as a hobby I’m an Android developer and also I’m addicted to kebab. So if anyone has any advice about a place where I can eat it, it will be accepted. Today, I’m going to talk about Material Design focusing on the context of Visual Continuity, through the various parts of Material Design that interests the continuity of experience. Before starting … some questions (Questions to understand the users’ level, raise your hand) → How many of you know Material Design? → How many of you have already used Material Design in your app? → How many of you have used Material Design for web application? (Polymer)
- So, what is Material Design?
- Well, Material Design fullfills the UX Designer, the developer and the user with its new concepts. The most important goal of Material Design is to create a real envirorment where the users identify themselves in a real envirorment. I mean, to satisfy the users the only thing that could be satisfying enough is a real envirorment where the users identify themselves to satisfy their needs. Putting together the basis of UX Design, science principles and the users’ needs result in a new visual language to help us guarantee the satisfation of the users.
- Material Design introduces a design métaphor inspired by paper and ink that provides a real sense of tactìlity. By combining color, imagery, typography and various intentional tricks (such as a white space) we will create an immersive graphic interface for the users. As a consequence we guarantee a better user experience. Every object is presented to the user without breaking the continuity of experience even as it transforms and reorganizes through motion. So motion provides meaning.
- In few words I could explain the term Visual Continuity as a continuous focus of elements in a visual context of a specific action.
- To complete an action we could do several steps. Between two steps there could be a passage through visual elements. That is where we have to do something to guarantee the attention of the users. To satisfy the users we had better think as a user. I would like that an application continuously gives me feedback without making me wait too long for a result. A progress bar is better than nothing.
- The point of view of the user is very important in order to have success with one application. If we press a Button that starts an Activity and it opens extremely slow we could insert a transition to lighten the time to open the Activity, in a figurative sense.
- With the new feature introduced in Material Design we can provide Animations, Transitions, Motions and various types of feedback in a easier way in order to gain the visual continuity of our applications. As a consequence we achieve the users satisfaction.
- When you design your animations you should consider: how the users attention should be directed, how to find opportunities to create visual connections between transition states through color and persisting elements and how moving a certain element adds clarity and delight to a transition.
- Firstly, there is touch feedback...when you touch a view, the system gives you a visual feedback, so when you touch something you will know exactly that you have touched it. You can do this by using ripple effect in your visual elements also custom ripple effect. As you can see in the image of the slide: the second button has a custom ripple effect with a black background.
- Here another examples of ripple effect. On the left the default effect, on the right a custom effect with black background
- To guarantee the visual continuity between two activities we can introduce the activity transition. Before the release of material design you had to do several lines of codes to make an activity transition. With material design you just have to use the setEnterTransition method or setExitTransition method with the object related to the type of the trasition, for example fade, slide or explode. Naturally, setEnterTransition is the transition that occurs when the activity is created and setExitTransition is the transition that occurs when the activity is closed. (destroyed)
- Reveal effect is a different way to show or hide an object. Instead of displaying or hiding something directly on the screen we could create a reveal effect to accompany the user to the next step. For example, if we press a button on the bottom right of a card view to display various information, we could create reveal effect from the button up to the entire card view and then show the information.
- Here in detail we can see the reveal effect from initial radius to final radius, that usually it is the max width of the object that is using reveal effect.
- Card View is an high level object that can contain some other objects.
- For example, if you need to create a personal information table you can use the Card View to incorporate it in a unique high level object. As you can see from the images, on the left you see a simple layout, on the right a more complex layout. So, you could incorporate every component you want to have a unique object to manipulate.
- Also you should consider that the Card View extends the Frame Layout, so if you create a particular layout format you had better remember that to avoid troubles.
- Recycler View is an improved version of List View, even integrating the concept of Grid View.
- It was created to manipulate many different types of items, above all the adding function, update function and remove function. So it is possible to create any kind of layout you can think of. Also if you are thinking about managing a lot of information you should consider using Recycler View instead of the classic List View, because the performace side has been improved to manage a big number of elements. As an example, on the right of the current slide you can see Card View inside Recycler View.
- You should remember that to use both Card View and Recycler View you have to import the dependencies otherwise in Android Studio an error comes up.
- Another new big improvement in the last release of Android is the notification system.
- First of all, how the notifications are displayed is different, a new theme has been introduced. As you can see from the image, you can view the same notification both in a normal device, such as smartphone, and in an android wear device, thanks to the syncronization of the notifications.
- Also, the notifications are displayed in lockscreen so, you can read the notification without unlocking the device. Naturally, here there is problem regarding the privacy. You have to choose what you want to show in case of device lockscreen. With the method setVisibility you can choose public visibility, private visibility and secret visibility. Public show all the information, private…. and secret … Also you could create your own visibility policy so it’s really secure if you know what you are doing.
- There are many preconfigured categories of notifications. For example call, message, social, error and so on. Google recommends using a preconfigured category instead of creating a layout form scratch. So if you are thinking about showing a message notification, you could think about using the notification already created by Google.
- Another important change in the notification system is the priority of the notification itself. Now you have to think: how important notifications are and then you can decide which priority couples better with your scheme. The priority levels are min, low, default, high and max. Naturally if you are thinking about using max priority you just need to know that it is only for critical and urgent notifications, so use it wisely. High priority notifications will get the new heads-up notification, I don’t know if you have Android Lollipop but if you do when you receive a call, Android shows you a heads-up notification with the detail of the incoming call, so a notification will slide down from the top of screen. This is very cool because it is not necessary to open the phone activity till you accept the call, so you don’t interrupt what you are currently doing.
- Here, in this slide, there are three different types of notifications, in order simple notification, simple notification with big picture (so you can insert an image into notification) and lastly the heads-up notification as I have mentioned before.
- So, if you want to extend your knowledge you can read the online documentation or in my github accout you can find some example projects that use Material Design. Any questions?
- So, thanks for listening and if you have any other questions you can contact me on facebook, twitter, google plus...or via email at my address pietroalberto.rossi@gmail.com. Thank you.