The recently released Google Inbox app is a re-thinking of the email inbox experience that beautifully demonstrates Google's material design interactive animation language.
This prototype focuses on the compose button's animation. Click the + to reveal a new state where a wave of buttons and labels float up, and the + becomes a pencil icon. It uses two states, with staggered animations.
3 prototypes showing different uses of the form components for iOS
1) Activate / de-activate button when checking / un-checking Terms of Service
2) Capture text input to change property
3) Change number of tickets - limit 8
See how they were created step-by-step in the Using Forms webinar video:
This version on Vimeo includes time-codes so you can jump to particular sub-sections (repeated below as a preview):
> Range of iOS form input controls 2:02
> Labels 2:17
> Text fields 2:32
> Setting placeholder text 3:04
> 5 Input Types that display the appropriate iOS keyboard (Text, Numeric, Email, Password, Telephone) 3:30
> Using the Telephone keyboard for credit card number input (large # keys) 4:08
> Need to view prototype on device in order to see the range of keyboards 5:59
> Multi-line text area input field 6:24
> Search Bar 6:40
> Checkbox control customization 7:22
> On/Off Switch control customization 7:52
> Slider control customization 9:27
> Increasing size of slider handle 9:47
> Picker Wheel Customization 10:00
> Prototype example: Activate button when checking terms of service 10:42
> Create a button with two states (using convert to container) 12:55
> Adding interactions to a checkbox control (on change activation/deactivation) 14:45
> Definition of variable and range of uses 17:04
> Using variables with text field interactions 18:25
> Prototype Example: Using a variable to capture text input and show it in a different text box using change property. 23:27
> Prototype: Use variables to increment and decrement counter showing number of tickets being purchased. 28:40
> Searching full range of icons built into Proto.io 29:10
> Using a variable to limit the range of tickets (0 to 8) 32:46
> Copying and pasting interactions with Variables 40:08
Prototype of the Material Design menu animation of Google Calendar for iOS.
See how it was created step-by-step in the video of the webinar "Adaptive Prototypes & Material Design UI Library"
Skip to minute 35:14 of the webinar to specifically see this prototype being made.
google iOS calendar