It has been three and a half years since the Mini Program was officially launched in January 2017. It has changed the implementation form of mobile software and made development easier and faster. Relying on the traffic of the large platform, it has also reduced a part of the promotion cost and the product has become Flexible and changeable.
Today, we are going to share some information about the prototype design method of the mini program and some material prototypes to help the knife friends quickly get started with the product design of the mini program.
Catalog of this issue
-
Design method of small program click popup window
-
Mini Program Basic Components
-
Mini Program "Mall"
-
Mini Program "Educational Institution Management Platform"
-
Mini Program "Know Yourself"
-
How to reuse small program prototypes
Design method of small program click popup window
Before officially sharing the material, let's learn a common interactive gesture in a small program: click on the pop-up window.
It has a wide range of application scenarios, like this:
Although versatile and versatile, its production method is very simple, just three steps:
a. First make a dynamic component of the pop-up window, and then set two states: state 1 "pop-up window hidden", state 2 "pop-up window display"; in the last state 2, click the "cancel button" to jump back to state 1.
b. After setting the status of the dynamic component, set the event of the button "I" in the bottom navigation bar to "click-switch component status-pop-up window display", so that you can click the button to trigger the pop-up window display .
c. Adjust the dynamic components of the pop-up window to the appropriate position on the page, and that's it~
Knife friends can click here to view the complete video learning, in addition to clicking the pop-up window, there are other tutorials~
Mini Program Basic Components
If you want to try a prototype, you might as well go to the Material Square to find suitable material components. Now, we have 11 types of small program components, totaling more than 300.
Large as cards, carousels, drawers, windows:
As small as the navigation bar, step bar, buttons, switches, and text boxes:
All of them are included in the material square. Knife friends can use these rich components to fully enjoy the fun of building, quickly complete the small program product design, and save production time. Click here to enter.
Next, officially enter the material prototype sharing time.
Mini Program "Mall"
The most common small program product is the mall. If you happen to be designing such a small program, then you must take a look at this prototype.
It has all the basic characteristics of the Mini Program Mall, and it also combines the most popular fitness attributes at the moment. It also chooses the user's habitual e-commerce APP operation method in the operation mode, which is in line with user habits and convenient for users to use.
On my page, there are other entrances, such as member center, points mall, merchants, etc., which can be expanded according to actual needs.
Mini Program "Educational Institution Management Platform"
Most of the management platforms of many educational institutions are Web-based. This time, it provides a new idea for the knife friends-small programs.
In fact, for busy educational institutions, the use of small programs for management is more convenient and greatly simplifies the operation process, which can further improve work efficiency and greatly reduce business interruption.
The prototype shared this time has more than a dozen pages, with complete processes and rich pages, which is of great reuse value.
Mini Program "Know Yourself"
Three major issues in philosophy: "Who am I", "Where do I come from", and "Where am I going".
We have been acquainting ourselves and discovering ourselves throughout our whole life, and how to better understand ourselves is not only based on subjective thinking, but also with the help of other tools, such as various personality tests, in order to know exactly what we are suitable for doing what?
This prototype is such a product. It has a complete design structure and rich page types, including evaluation question bank, content search page, evaluation details page, evaluation report generation page, etc.
The way the results are generated is also impressive.
And in the last link, the page is set to generate image posters for communication and sharing, which basically meets the psychological needs of users to pursue self-identity.
When making other types of small programs with social attributes, you can also refer to and reuse it as a means of pulling new ones.
How to reuse small program prototypes
The first step is to find the desired target page in the material square and click save.
In the second step, click the material to find the material you just saved, and place it on the current page, or, in the right component, drag it directly to the workspace.
If you have other material needs, please leave a message to tell us~