WeChat Mini Program Design Specifications (2) Clear and clear
2. Be clear and clear
As a responsible developer, once a user enters our mini program page, we have the responsibility and obligation to clearly and clearly inform the user where they are and where they can go. , to ensure that users can move freely through the page without getting lost, so as to provide users with a safe and pleasant experience.
1. Clear navigation, easy to come and go
Navigation is the most critical factor to ensure that users do not get lost when browsing and jumping in the web page. Navigation needs to tell users where I am, where I can go, how to get back, etc. First of all, all pages of all mini programs in the WeChat system will have their own navigation bar provided by WeChat, which can uniformly solve the problem of where I am and how to get back. Maintaining a consistent experience in WeChat-level navigation helps users form a more unified experience and interactive perception within WeChat, without adding new learning costs or usage habits when switching between mini programs and WeChat.
WeChat Navigation Bar
WeChat Navigation Bar is directly inherited from the client. Except for the color of the navigation bar, developers do not need to and cannot customize the content. definition. However, developers need to specify the jump relationship between each page of the mini program so that the navigation system can work in a reasonable manner.
The WeChat navigation bar is divided into navigation area, title area and operation area. The navigation area controls the program page process. Currently, the navigation bar is divided into two basic colors, dark and light, which are displayed differently on iOS and Android, as shown in the figure below:
Navigation area (iOS)
The navigation area usually has only one operation, which is return Previous level interface. Developers can define its content, but the style cannot be modified.
Navigation area (Android)
Normally, the only operation on the left side of the system navigation is "Leave the mini program, return to WeChat, and the program runs in the background."
When the user enters the secondary page of the mini program, we recommend that the mini program itself can design a return operation, and the user can also return to the previous level through the hardware return button that comes with the Android system.
WeChat navigation bar custom color rules (iOS and Android)
The mini program navigation bar supports basic background color customization functions. The selected color needs to be Under the premise of meeting usability, the two sets of main navigation bar icons provided by WeChat are harmoniously matched. It is recommended to refer to the following color selection effects:
Color selection example:
In-page navigation
Developer You can add your own navigation to the page according to your own functional needs. And keep navigation consistent between different pages. However, due to the limitation of the mobile phone screen size, the navigation of the mini program page should be as simple as possible. If it is only for general linear browsing, it is recommended to only use the WeChat navigation bar.
WeChat control library provides tab navigation for developers to choose. The tab bar can be fixed at the top or bottom of the page, making it easier for users to switch between different tab pages. To ensure a clickable area, tab items must not exceed 4 items. There should not be more than one set of tabs on a page.
2. Reduce waiting and provide timely feedback
Long waiting for the page will cause bad emotions among users. Using the technology provided by the WeChat mini program project can shorten the waiting time to a great extent. Even so, when loading and waiting inevitably occur, timely feedback needs to be given to relieve the user's bad mood of waiting.
Startup page design
Mini program startup is also one of the pages where the mini program displays brand characteristics in WeChat content to a certain extent.
This page will highlight the brand features and loading status of the mini program.
Except for the LOGO brand display on the startup page, all other elements on the page, such as loading progress indicators, are provided by WeChat and cannot be changed. No need for developers to develop.
Drop-down indicator area
All WeChat mini-program pages will have a unified indicator area designed by WeChat when they are pulled down. . The brand display area consists of the brand name and WeChat mini program prompts. The purpose is to strengthen the brand and users’ product perception of the mini program.
Drop-down mark (iOS dark and light color schemes)
WeChat provides two sets of dark and light color schemes, as shown in the mark here, The text color cannot be customized. Developers should pay attention to ensuring the visibility of the drop-down mark when customizing the background color.
Drop-down mark (Android dark and light color scheme)
WeChat drop-down prompt is used to give users a clear owner of the mini program. Prevent fraud and cheating. The logo here provides two sets of dark and light solutions. The text color cannot be customized. Developers should pay attention to ensuring the visibility of the drop-down logo when customizing the background color.
Page Refresh Interaction (iOS)
Developers can customize pages that need to be refreshed through drop-down interaction. WeChat will provide standard capabilities and styles for this type of interaction. In terms of style, the colors of the refresh icon and the drop-down icon have been bundled, and are divided into two sets of dark and light schemes. When using them, developers should pay attention to the harmony and unity of the header text, the drop-down icon and the refresh icon. However, when the user makes a pull-down interaction on this type of page, the standard loading animation of the WeChat applet page appears. Developers don't need to develop their own styles.
In the case where the developer does not design a tab at the top of the page, if the page is defined to be refreshed through a pull-down action, the loading status prompt applet brand display area will appear under the title bar and at the top of the page after refreshing.
Developers are currently unable to define this loading effect.
When the developer defines the tab at the top of the page and defines that the content under the tab can be refreshed through a pull-down action, the loading status prompt will appear in the applet brand display area after the refresh. Under the top tab, and only refresh the current page content. Developers are currently unable to define this loading effect themselves.
Page refresh interaction (Android)
The same as iOS, in terms of style, the refresh icon and drop-down mark color matching under Android have been changed Bundling is divided into two sets of deep and shallow plans. When using it, developers should pay attention to the harmony and unity of the header text, drop-down logo and refresh icon.
WeChat drop-down label incorrect use cases
Please avoid the following incorrect usage cases to ensure the visibility of information and the usability of the page.
In-page navigation
WeChat control library provides deep and shallow tab navigation solutions for developers to choose. The tab bar needs to be fixed at the top of the page to facilitate users to switch between different tab pages. To ensure a clickable area, tab items must not exceed 4 items. There should not be more than one set of tabs on a page.
The selected state of the Tab bar defaults to 100% solid color, and the unselected state has 60%. The color of the selected state can be customized. In custom color selection, be sure to maintain the usability, visibility, and operability of Tabs.
Load feedback on the page
Developers can customize the page in the mini program Content loading style. It is recommended that whether it is used locally or entirely, the custom loading style should be as concise as possible, and simple animations should be used to inform users 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
The modal loading style will cover the entire page. Since it is impossible to clearly tell the specific loading location or content, it may cause anxiety to the user. Therefore it should be used with caution. Do not use modals except for certain global operations.
Partial loading feedback
is designed to trigger partial feedback on the loaded page. This feedback mechanism is more targeted. The page changes are small and this is the feedback method recommended by WeChat. For example:
Notes on loading feedback
- If the loading time is long, cancel operation should be provided and the progress should be used The bar shows the progress of loading.
- During the loading process, the animation effect should be maintained; loading without animation effects can easily give people the illusion that the interface is stuck.
- Don’t use more than one loading animation on the same page.
Result feedback
In addition to providing timely feedback while the user is waiting, clear feedback also needs to be given on the results of the operation. Depending on the actual situation, different result feedback styles can be selected. For local operations on the page, direct feedback can be given in the operation area. For page-level operation results, toasts, pop-up windows, or results pages can be used to display them.
Feedback on partial operation results on the page
For partial operations on the page, direct feedback can be given in the operation area, for example, as shown below before and after clicking on the multi-select control. For common controls, the WeChat Design Center has provided a control library and a WeUI control library, in which the controls have been designed with complete operational feedback.
Page global operation result——toast
Toast is suitable for lightweight success prompts and will disappear automatically after 1.5 seconds without interrupting the process. , has less impact on users, and is suitable for operation reminders that do not need to emphasize successful topics. Please note that the toast form does not apply to any error reminders.
Global operation results on the page - pop-up box
The status of the operation results that need to be clearly known to the user can be prompted through a pop-up box, and can be accompanied by the next step. Operating Instructions.
Page Global Operation Result——Result Page
If the operation result is the end of the current process, you can use the operation result page to provide feedback. This method is the strongest and clearest way to inform the user that the operation has been completed, and can provide guidance for the next step based on the actual situation.
3. Exceptions are controllable and there is a way out
When designing any tasks and processes, abnormal states and processes are often easily ignored. These abnormal scenarios are often when users are most frustrated and in need of help. Therefore, special attention needs to be paid to the design of abnormal states. When exceptions occur, users should be given necessary status prompts and informed of solutions so that they have a way out.
It is necessary to prevent the situation where the user is stuck on a certain page in an abnormal state and has nowhere to go. The pop-up windows and result pages mentioned in 2.2 can be used as reminders of abnormal status. In addition, on form pages, especially pages with many form items, the error items should be clearly pointed out so that users can modify them.
Exception status - form error
The form reports an error, informs the cause of the error at the top of the form, and identifies the error field to prompt the user to modify it.
