May 21, 2021 WeChat Mini Program Development Document
Once the user enters our small program page, it is the responsibility and obligation to clearly and clearly inform the user where they are and where they can go, to ensure that the user in the page to travel freely without getting lost, in order to provide users with a safe and enjoyable experience.
Navigation is the most critical factor in ensuring that users don't get lost when browsing and jumping around the web. N avigation needs to tell the user where they are, where they can go, how to go back, and so on. F irst of all, all the pages of all the small programs in WeChat system will bring their own navigation bar provided by WeChat, unified solution to the current where, how to go back to the problem. Consistent navigation at the WeChat level helps users develop a unified experience and interaction within WeChat, eliminating the need to add learning costs or change usage habits to switch between programs and other WeChat pages.
WeChat navigation bar
WeChat navigation bar, directly inherited on the client, except for the navigation bar color, the developer does not need to be customized.However, developers need to specify the jump relationships of various pages of the applet, allowing the navigation system to work in a reasonable way.
The WeChat navigation column is divided into navigation area, title area, and operational area.Among them, the navigation area controls the program page process.At present, the navigation column is divided into two basic colors.
Navigation area (iOS)
WeChat enters the first page of the applet, the navigation area usually only one operation - "Return", that is, returns the WeChat page that enters the applet.The secondary page after the applet is entered, the operation of the navigation area is - "Return" and "Close"."Return", returns to the previous small program interface or WeChat interface."Close", that is, exiting the applet directly in the current interface, returns to the WeChat page before entering the applet.
Navigation area (Android)
The navigation area only exists only unique operation - directly exits the applet, returns to the WeChat or system desktop before the applet, the Hardware return key of the Android phone comes to the previous level page.
Android navigation has a special case: When the user adds a small program to the Android desktop by the menu of the operation area, the home page of the applet is displayed from the Android Desktop, the navigation button does not show the navigation button.Only a small program title and an operating area are displayed.The small program secondary page, the navigation area only returns the operation of the previous level page, and the hardware return button that comes with the Android phone also plays the same role.
WeChat navigation column custom color rules (iOS and Android)
The small program navigation bar supports basic background color custom features, the selected color needs two sets of main navigation bar icons provided by Harmony with WeChat under the premise of satisfying availability.It is recommended to refer to the following color effect:
Sample example of color scheme
Page navigation
Developers can add self-navigation to the page according to their own function.And keep the navigation between different pages.However, limited to mobile phone screen size, the navigation of the small program page should be as simple as possible, if only the page for general linear browsing is recommended to use the WeChat navigation bar.
Developers can choose a small program page to add tag paging (Tab) navigation.The tag paging bar can be fixed at the top of the page or at the bottom to facilitate the user to switch between different paging.The number of labels must not be less than 2, and do not exceed 5, in order to ensure click area, the number of recommended tags does not exceed 4 items.A page should not appear in a set of tag paging columns.
Among them, the small program home page can select the original bottom tag paging style provided by WeChat, which is only used by the applet.Customize icon styles, labeling and copy color, etc. when developing can be customized, such as icon size, such as icon size, etc., refer to the development documentation and Weui Basic Control Library.
The top tag pages column colors can be customizable.In custom color selection, be sure to maintain the availability, visibility, and operability of the paging bar tag.
The "waiting" waiting will cause the user's bad emotions, the technology provided by WeChat applets has been largely shortened.Even so, when loading and waiting, it is necessary to give timely feedback to soot the user's waiting bad emotions.
Launch page loading
The small program startup page is one of the pages that demonstrate the brand characteristics to a certain extent within WeChat. This page will highlight applet characteristics and loading status. Start the Page Brand Sign (LOGO) except, all other elements on the page are provided by WeChat unity and cannot be changed without developers.
Plush newly loaded in page
Within WeChat applets, WeChat provides standard pages to pull new load capacity and style, and developers do not need to develop themselves.
Load feedback within the page
Developers can customize the loading style of page content in small programs. I t is recommended that custom loading styles be as concise as possible, whether used locally or globally, and use simple animations to inform the user of the loading process. Developers can also use the uniform page loading style provided by WeChat, as shown in the example in the figure.
Modal loading
The modal loading style will cover the entire page and should be used with caution because it does not explicitly tell the exact location or content of the load that may cause anxiety among the user. Do not use modal loading except in some global operations.
Local load feedback
Local load feedback is only in the page that triggers the load of local feedback, such a feedback mechanism is more targeted, the page beat small, is weChat recommended feedback. For example:
Load feedback considerations
Results feedback
In addition to timely feedback as the user waits, clear feedback on the results of the operation is also required. D epending on the situation, you can choose a different result feedback style. For local actions on the page, you can give direct feedback in the action area, and for page-level actions, you can use a pop-up prompt (toast), modal dialog box, or the results page.
Feedback on the results of local operations on the page
For local actions on the page, you can give direct feedback in the action area, such as the following image before and after clicking on the multi-select control. For common controls, WeChat Design Center already provides a control library and a WeUI control library, where controls already provide complete operational feedback.
Page Global Action Results - Pop-up Tips (Toast)
Toast is suitable for lightweight success prompts that automatically disappear after 1.5 seconds without interrupting the process and have less impact on the user, and for action reminders that do not need to be highlighted, such as success prompts. Note that this form does not apply to error prompts, as they need to be explicitly communicated to the user and are therefore not suitable for flash pop-up prompts.
Page Global Action Results - Modal Dialog
The status of the results of the operation, which requires clear user awareness, can be prompted by a modal dialog box and can be accompanied by instructions for the next step.
Page Global Action Results - Results Page
For cases in which the results of the operation are already the end of the current process, you can use the action results page to provide feedback. This approach is the strongest and clearest way to inform the user that the operation has been completed and to give guidance on the next step according to the actual situation.
Exception states and processes are often overlooked when designing any task or process, and these exception scenarios are often the most frustrating and helpful times for the user, so special attention needs to be paid to the design of the abnormal state, necessary status prompts to the user in the event of an exception, and inform the solution that there is a way back.
To put an end to abnormal state, the user inexplicably and nowhere to go, stuck in a certain page of the situation. B oth the modal dialog box and the results page mentioned above can serve as a reminder of the abnormal state. In addition, in the form page, especially in pages with more form items, you should also clearly identify the items that went wrong so that users can modify them.
Abnormal status - There was an error with the form
The form reports an error, tells the cause of the error at the top of the form, and identifies the error field to prompt the user for modification.