How to carry out WeChat small program development and design
Before carrying out WeChat small program development, you first need a WeChat small program account in order to carry out development and design.
Click on the link of the public platform, between the positive login and registration, choose registration. You will see that there are several options, such as subscription, enterprise, service and small program, select the small program and click OK;
Small program registration prerequisite is that there is no registered micro public flat, such as not registered subscription, service and so on. The mailbox requirement is also “not registered by the public platform, not registered by the open platform, not personal micro-signal binding mailbox”;
Based on their own information, fill in the mailbox and password input. If the mailbox is correct, there is no error message, after the password is clear and repeated confirmation of the password, enter the verification code, check the agreement to achieve registration;
After clicking on the registration, there will be a mailbox validation, log in to the mailbox, in the inbox you will see a weixinteam mail, open it, click on the verification link.
After clicking on the verification link, it will jump directly to the third step of registration, the registration of information to fill in, select the appropriate small program body type, you can see that there are only four options to choose;
After the subject selects the type, you can see that you need the type, the name, the business and so on. If it is an individual, you can write casually, when it will fail to verify, does not affect the test of the small program, directly below the administrator information registration;
In the administrator authentication, you need to fill in the ID card, name, cell phone number, as well as cell phone number authentication and WeChat administrator authentication and so on.
After clicking OK, a message will pop up confirming the information (a message that can’t be changed once it’s confirmed). Then click OK, it will tell you that the information is filled out completely, but the audit is not yet passed, but you can test the small program.
After entering the main body, you can all kinds of testing and development of small programs. Of course, if you go online to test, you still need to verify that you have passed before you can.
How to make WeChat small program?
Making WeChat small program can use the website a key to generate the way, enter the Vanke network to understand the corresponding file function after editing can be completed. The details are as follows:
1, a key to generate a small program is relatively simple, for example, Baidu into the Vanke network.
2, select “light station small program”, select the type of production, click “create”.
3, text images and board location and other changes, save the audit can be released.
4, summarized as follows.
1. The name of the small program can be in Chinese, numbers, English. Length between 3-20 characters, a Chinese character is equal to 2 characters.
2. The name of the small program shall not be duplicated with the existing subscription number and service number of the public platform. If you are prompted to rename your app, please change the name.
3. The name of the applet is completed when the account information is set up, so please be careful when setting it up, and once it is set up, it cannot be modified.
4. Replace the name to set up. If your trademark, organization name, or other name is infringed upon, you can file a complaint through the public platform’s infringement complaint process.
5. Individual developers can’t apply for a WeChat app; currently WeChat only supports applications from businesses, governments, media, and other organizations.
WeChat small program how to design WeChat small program design guidelines
Based on the light and fast characteristics of WeChat small program, we have drawn up small program interface design guidelines and recommendations. The design guidelines are built on the basis of fully respecting the user’s right to know and operate. The aim is to establish a friendly, efficient and consistent user experience within the WeChat ecosystem, while maximizing adaptation to and support for different needs, and realizing a win-win situation for users and small program service providers.
Friendly and courteous
In order to avoid users’ attention being interfered by the complex environment around them when they are using the small program services in WeChat, the small program should be designed in such a way as to minimize the interference of irrelevant design elements with the user’s goals, politely present the services provided by the program to the user, and guide the user to the operation in a friendly manner.
Each page should have a clear focus so that users can quickly understand the content of the page each time they enter a new page. With the focus defined, other distractions on the page that are not relevant to the user’s decision making and operations should be avoided.
The topic of this page is querying, but many business entrances have been added that are not related to querying, which is irrelevant to the user’s goal and can easily cause the user to get lost.
Correcting the example
Remove any content that is not relevant to the user’s goal, clarify the theme of the page, and provide help for decision-making and operations, such as recent search terms, as much as the technology and page controls allow.
Operations are not prioritized, leaving the user with no choice.
First of all, we should avoid listing too many operations for the user to choose, and when we have to list multiple operations side by side, we need to differentiate between the primary and secondary operations, so as to reduce the difficulty of the user’s choice.
In order to allow users to use the page smoothly, when the user carries out a certain operation process, should avoid interrupting the user with content outside the user’s target flow.
Users intend to search, but are interrupted by a sudden modal sweepstakes box when they enter the page; this is an unfriendly interruption for users who are not interested in the sweepstakes; and even if some of the users are indeed attracted by the sweepstakes, they may forget about their original goal after they leave the main flow and go to the sweepstakes. Even if some users are really attracted by the “attractive” sweepstakes, after leaving the main process and going to the sweepstakes, they may forget the original goal and lose the use and understanding of the real value of the product.
Clearly and unambiguously
Once the user enters the page of our app, we have the responsibility and obligation to inform the user clearly and unambiguously about where they are and where they can go, to make sure that the user can navigate around the page without getting lost, and to provide a safe and enjoyable experience for the user.
Navigation is the key to ensuring that users don’t get lost as they navigate through a page. The navigation needs to tell the user where they are, where they can go, how to get back, and so on. First of all in the WeChat system of all small programs all the pages, will come with WeChat provides navigation bar, unified solution to the current where, how to go back to the problem. In the WeChat level navigation to maintain a consistent experience, help users in WeChat to form a unified experience and interactive cognition, without the need to switch in the various small programs and other WeChat page in the new learning costs or change the habit of use.
WeChat navigation bar
The WeChat navigation bar is directly inherited from the client, and developers do not need to customize the content of the navigation bar except for its color. However, developers need to specify the relationship between the various pages of the app, so that the navigation system can work in a reasonable way.
The WeChat navigation bar is divided into a navigation area, a title area, and an operation area. Among them, the navigation area controls the program page process. Currently the navigation bar is divided into two basic color schemes: dark and light.
Navigation area (iOS)
WeChat into the first page of the small program, the navigation area usually has only one operation – “return”, that is, to return to the WeChat page before entering the small program. After entering the secondary page of the small program, the navigation area of the operation is – “return” and “close”. “Back”, that is, to return to the previous level of small program interface or WeChat interface. “Close”, that is, in the current interface directly exit the small program, back to the WeChat page before entering the small program.
Navigation area (Android)
Navigation area only exists in the only operation – directly exit the applet and return to the WeChat or system desktop before entering the applet, and the hardware return key that comes with the Android phone performs the operation of returning to the previous level page.
Android navigation exists a special category: when the user adds the applet to the Android desktop through the menu in the operation area, and opens the applet from the Android desktop, the applet’s home page, does not display the navigation buttons. Only the title of the applet and the action area are displayed. Small program sub-page, navigation area only to return to the previous page of the operation, and click on the Android phone comes with the hardware back button also plays the same role.
WeChat navigation bar custom color rules (iOS and Android)
Small program navigation bar supports the basic background color customization function, the selected color needs to meet the premise of usability, harmonious with the WeChat provided two sets of main navigation bar icons. It is recommended to refer to the following color effect:
Example of color scheme
Developers can add their own navigation in the page according to their own functional design needs. And keep the navigation consistent between different pages. However, due to the limitations of the screen size of the phone, the navigation of the small program page should be as simple as possible, if only a general linear browsing page is recommended to use only the WeChat navigation bar.
Developers can choose to add tabbed navigation to the applet page. Tabs can be fixed at the top or bottom of the page to allow users to switch between different tabs. The number of tabs should not be less than 2 and should not be more than 5 at most, and to ensure the clickable area, it is recommended that the number of tabs should not be more than 4 items. A page should also not have more than one set of tabbed pagination columns.
The first page of the applet can choose the native bottom tab paging style provided by WeChat, which is only for the first page of the applet. When developing, you can customize the icon style, label text and text color, etc. Specific settings such as icon size and other references can be found in the development documentation and WeUI basic control library.
The top tab paging bar color can be customized. In customizing the color choices, be sure to keep the tabs usable, visible and operable.
Reduce waiting, timely feedback
The excessive waiting time of the page can cause bad feelings among users, and using the technology provided by the WeChat applet project has been able to reduce the waiting time to a great extent. Even so, when loading and waiting are inevitable, timely feedback is needed to soothe the user’s bad feelings.
Launch page loading
Small program launch page is one of the small program in WeChat to a certain extent to show the brand characteristics of the page. This page will highlight the small program brand features and loading status. Except for the brand logo, all other elements on the launch page, such as the loading progress indicator, are provided by WeChat and cannot be changed, so developers are not required to develop them.
Page drop-down refresh loading
WeChat provides standard page drop-down refresh loading capabilities and styles within WeChat apps, so developers don’t need to develop their own.
WeChat Dropdown Refresh Misuse Cases
Please avoid the following misuse cases to ensure information visibility and page usability.
In-page loading feedback
Developers can customize the loading style of the page content in the applet. It is recommended that whether used for local or global loading, the custom loading style should be as simple as possible and use simple animations to inform the user of the loading process. Developers can also use the unified page loading style provided by WeChat, as shown in the example in the figure.
Modal loading styles will cover the entire page, and should be used with caution as they do not explicitly tell the user where or what is being loaded and may cause anxiety. Do not use modal loading except for certain global operations.
Localized loading feedback
Localized loading feedback that is only localized in the page that triggered the loading of the feedback, such feedback mechanism is more targeted, the page jumps small, is the WeChat recommended feedback. For example:
Loading feedback notes
If the loading time is long, you should provide a cancel operation and use a progress bar to show the progress of loading.
The loading process should remain animated; loading without animation can easily give the illusion that the interface is stuck.
Don’t use more than one loading animation on the same page.
In addition to timely feedback during the waiting process, the results of the operation also need to be clear feedback. Depending on the actual situation, you can choose different result feedback styles. For page-localized operations, you can give direct feedback in the operation area, and for page-level results, you can use a pop-up alert (Toast), a modal dialog box, or a results page display.
Feedback for localized page operations
For localized page operations, feedback can be given directly in the operation area, for example, before and after clicking a multi-select control as shown in the following figure. For commonly used controls, the WeChat Design Center provides a library of controls that provide complete feedback.
Page global operation results — pop-up tips (Toast)
Pop-up tips (Toast) for lightweight success tips, 1.5 seconds after the automatic disappearance, and does not interrupt the process, the impact on the user is relatively small, for the operation does not need to emphasize the reminder, such as the success of the tips. In particular, this form is not suitable for error alerts, which need to be clearly communicated to the user, and thus are not suitable for pop-up alerts that flash by.
Page global results – modal dialogs
A modal dialog can be used to indicate the status of an operation that requires the user to be explicitly informed of the result, and can be accompanied by a guide to the next step.
Page global result – result page
For cases where the result is the end of the current process, a result page can be used to provide feedback. This is the strongest and clearest way to inform the user that the operation has been completed, and can give guidance on what to do next, depending on the situation.
Abnormal controllable, have a way back
In the design of any task and process, the abnormal state and process is often easy to be ignored, and these abnormal scenarios are often the most frustrated users and need help, so we need to pay special attention to the design of the abnormal state, in the case of anomalies to give the user the necessary state of the prompts, and to inform the solution, so that they have a way back.
To prevent abnormal states, the user somehow has nowhere to go and is stuck on a page. The modal dialogs and results pages mentioned above can be used as a way of alerting the user to an abnormal state. In addition, in form pages, especially those with many form items, the error item should be clearly indicated so that the user can modify it.
Exception status — form error
The form reports an error, tells the reason for the error at the top of the form, and identifies the error field to prompt the user to modify it.
Convenience and Elegance
From the physical keyboard and mouse of the PC era to the finger of the mobile era, although the input device is greatly streamlined, the accuracy of the finger operation is much less precise than the keyboard and mouse. In order to adapt to this change, developers need to take full advantage of the characteristics of the cell phone in the design process, allowing users to conveniently and elegantly control the interface.
Since the cell phone keyboard area is small and dense, input is difficult at the same time also easy to cause input errors, so in the design of the small program page to minimize the user input, the use of existing interfaces or some other easy to operate selection control to improve the user input experience.
For example, in the image below, when adding a bank card, the camera recognition interface is used to help the user input. In addition, the WeChat team has also opened up a variety of WeChat applet interfaces, such as geolocation interfaces, which will greatly improve the efficiency and accuracy of user input and optimize the experience.
In addition to utilizing the interfaces, when users have to manually input, they should try to let the user do the selection instead of keyboard input. On the one hand, recall is easy to memorize, and letting the user make choices among a limited number of options is usually easier than inputting from memory; on the other hand, it’s still important to consider that the dense single-key input on a cell phone’s keypad can easily lead to input errors. For example, in this figure, providing a search history shortcut when users search will help users to search quickly and reduce or avoid unnecessary keyboard input.
Because on a cell phone we control the interface by touching the screen with our fingers, which are far less accurate than a mouse, when designing controls to be clicked on a page, we need to take into account the area of the hotspot, so as to avoid misuse due to the clickable area being too small or too dense. This problem often occurs when an interface that was originally used on a computer screen is simply ported directly to a cell phone without any adaptation. Since cell phone screens vary in resolution, the optimal pixel size for clicking is not exactly the same, but when converted to physical size it is roughly between 7mm-9mm. In the standard component library provided by WeChat, the various control elements have taken into account the page clicking effect as well as the adaptation to different screens, so again, it is recommended to use or mimic the standard control dimensions for your design.
Using interfaces to improve performance
WeChat’s Design Center has launched a set of web standard control libraries, including sketch design control libraries and Photoshop design control libraries, and will subsequently improve the mini-program components, which have taken into account the characteristics of the mobile page, and are able to ensure their usability and operational performance on the mobile page; at the same time, the WeChat The WeChat development team is also constantly improving and expanding the WeChat applet interface and providing WeChat public libraries, using these resources not only to provide users with faster services, but also to improve the performance of the page has a great role in invariably improving the user experience.
Uniformity and stability
In addition to the principles mentioned above, it is recommended that small programs accessing WeChat should always pay attention to the unity and continuity of the different pages, and try to use the same controls and interactions on different pages.
A unified page experience and continuity of the interface elements will help minimize learning costs to achieve the goal of use, and reduce the discomfort caused by page bouncing. Because of this, applets can use standard controls provided by WeChat as needed to achieve uniformity and stability.
The use of fonts within WeChat is consistent with the system fonts running, commonly used font sizes of 20,18,17,16,1413,11(pt), the use of scenarios are as follows:
The main content is Black, the secondary content is Grey; Timestamp and form defaults Light gray; large sections of the description of the content and belong to the main content with Semi black.
Blue for links, green for completion, and red for errors. The Press and Disable states reduce transparency by 20% and 10% respectively.
List visual specification
The form input visual specification.