_edited.jpg)
Simplify the topic keywords, "Xiaobai", "Looks great". The production process is actually not very deep, otherwise there would be no Xiaobai. In addition, if you want to look great, on the one hand, you will not be despised when you show it, and on the other hand, you will be motivated when you do it yourself. After all, instant motivation is good for learning.
Think about it: if you can learn to draw a b2b data diagram for a week or study for 2 hours, you can make a good prototype interaction, which one is more attractive to you?
1. Achievement display
The Gif is as follows:
First, put the final results up for your reference,
Introduce the interactive part of the prototype made. Because it is a small white content, the production is relatively simple, and there is naturally no complex interaction.
Slide the mouse to the right to unlock;
Click on WeChat and open it;
The 6 first-level entries can be switched with each other, namely WeChat, Address Book, Discover, Me, Add, and Search;
The WeChat public platform of the dialogue page can be opened;
The return key in the WeChat public platform and search is available.
In addition to the above mentioned, other functions cannot be used, so there is a title that looks powerful but is actually a novice.
2. Production steps
1. Take screenshots to get material
Screenshot is a very important step. The speed of drawing is relatively slow and requires a lot of skills. Therefore, only for display, screenshots are the most cost-effective.
With a screenshot, you can get everything you need to make a simple demo prototype.
2. The production of lock screen effect
The lock screen effect is achieved through the dynamic panel, that is, the dynamic panel is dragged to the right as a trigger condition, so that the lock screen page is gradually hidden, and WeChat opens the page to display. In order to make the transition a little more natural, the animation effect uses gradual.
3. Open WeChat
Make a hotkey on the WeChat icon, and then set the hotkey to be triggered by a single click. The triggered behavior is shown in the following figure:
That is, open the WeChat opening page, wait for 1500 milliseconds, then switch to the WeChat opening page, and put all the hotkeys of the WeChat opening page at the top level. Among them, 1500 milliseconds is the process of simulating the loading. Without this setting, the switching will just flash by.
Putting all the hotkeys on the top layer is to make all the hotkeys usable. Because the hotkeys on the lock screen cannot be clickable, they are placed on the bottom layer by default. After this step, these hotkeys need to be used, so the top is mentioned.
The distribution of hotkeys is shown in the figure above: all the places that can be pressed are distributed with hotkeys, and at the same time, all the hotkeys have been set to the top in the previous step, so all key positions can be clicked.
4. Switch between pages
The next operation is to repeat the work. Simply put, add the corresponding function to the hotkey. Take the address book as an example:
Just write the trigger effect as shown in the figure above, and write the others in the same way.
There are so many hot keys as above, and the writing process is similar. The content of the settings of the address book is: put the address book to the top to complete the switch, and then put all the hotkeys used to the top to prepare for subsequent use.
5. Adjust the arrangement level of all components
The operation of this step is also important, because the wrong hierarchy may cause the key to be unavailable, or the key to be available on all pages. A simple judgment principle is: imagine what the page of each step is, and which keys exist and which keys do not exist under this page.