It's my first time to try the Facebook Origami, a powerful prototype tool for the interaction design. Based on the tutorials of its website, I would like to apply it to design some simple prototypes followed the material principle. It's also a great opportunity to help me understand more about the Material design.
So here we go!
So here we go!
Pulse effect design for Material
I used Sketch to design a dark circle for the pulse effect and it will appear as the feedback when you touch the screen. Origami provides a plugin for Sketch to improve the efficiency. You could create a live image in Origami and it will update the image automatically if you modified it in the Sketch. The touch is the key patch I used here to catch the X and Y position in the screen. The interaction will change the opacity and the scale of the grey circle.
To give this animation a bit of duration time, I searched the internet for a right patch. The delay patch seems not a good one if I used it alone at this case. It makes this click slowly and a bit of "unclickable". Finally, I chose the "stop watch" patch to hold a status for a period of time and use the delay patch to set the duration time. Delay and "stop watch" patch could be a great combo.
Lift on touch animation
The second practice is the Lift on touch animation. The material design principle provides a clearly definition about how to use Z-axis to provide users a great feedback. You could find more information from here. It provides a table about how to set the elevation of your application.
"Material can be spontaneously generated or destroyed anywhere in the environment. Z-axis motion is typically a result of user interaction with material."
Unfortunately, I did find any method to apply the shadow effect within the Origami. Even though there's a patch named "shadow", I didn't figure out how to apply it and set the attributes of shadow. So, I have to design two conditions (before and after clicking) of the rectangle with Sketch as the asset. When you click it, it actually will change another rectangle for the feedback.
Radial reaction
The third one is the radial reaction. Material design cares about the responsive interaction and it requires that each interaction should be thoughtful, perhaps whimsical, but never distracting.
"In material design, apps are responsive to user input:
- Touch, voice, mouse, and keyboard are all equally important input methods.
- UI elements appear tangible, even though they are behind a layer of glass (the device screen).
- UI elements appear tangible, even though they are behind a layer of glass (the device screen).
To bridge that gap, visual and motion cues acknowledge input immediately and animate in ways that look and feel like direct manipulation.
Responsive interaction elevates an app from an information-delivery service to an experience that communicates using multiple visual and tactile responses."
For the radial reaction effect, it requires a sequence of content changes: images fade in or out. I connected the transition of each small rectangle to make it as a sequence and using the "pop animation" patch to make the appear and disappear effect looks smoothly.
For the left top menu icon, it should appear a little white circle in the background as the feedback of click. And at the same time, the icon will change. I've tried a really stupid method for this white circle background - I designed it just like the pulse effect before. When you click it, the opacity of this white circle will change to 1 for a bit of time. Actually, it could be easier if I apply this effect by the coding directly I think. The SVG icon could accomplish this effect without this separate white circle. Anyway, I will try to figure out a better method for this part in the future.
Consistent choreography
"When transitioning elements are coordinated, it aids user understanding of the app. Direct user attention with coordinated, orderly motion."
The problem I met in this design is how to speed up the animation. From the video above, you could find that the left one is slower than the right one. For the left one, I used the pop animation patch to control the duration time. However, it cannot be set more than 20 speed. After some research, I use classic animation as an alternative.
