Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you what are the relevant knowledge points of WeChat Mini Programs's design specifications, the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

Clear and clear

Once users enter our Mini Program page, they have the responsibility and obligation to tell them clearly where they are and where they can go, and to ensure that users can easily shuttle around the page without getting lost. Only in this way can we provide users with a safe and pleasant experience.

1. The navigation is clear and comes and goes freely.

Navigation is the most critical factor to ensure that users do not get lost when browsing through the web. Navigation needs to tell users where they are, where they can go, how to get back, and so on. First of all, all the pages of Mini Program in the Wechat system will come with the navigation bar provided by Wechat to uniformly solve the problem of where and how to get back. Keeping the experience consistent in Wechat navigation helps users form a unified experience and interactive cognition within Wechat, eliminating the need to increase learning costs or change usage habits in switching between Mini Program and other Wechat pages.

Wechat navigation bar

The Wechat navigation bar is directly inherited from the client. Developers do not need and cannot customize the contents of the navigation bar except for the color of the navigation bar. But developers need to specify the jump relationship between Mini Program pages so that the navigation system can work in a reasonable way.

The Wechat navigation bar is divided into navigation area, title area and operation area. The navigation area controls the process of the program page. At present, the navigation bar is divided into two basic colors.

Navigation area (iOS)

Wechat enters the first page of Mini Program, and there is usually only one operation in the navigation area-"return", that is, to return to the Wechat page before Mini Program. After entering the secondary page of Mini Program, the actions in the navigation area are "return" and "close". "return", that is, return to the previous Mini Program interface or Wechat interface. "close", that is, directly exit Mini Program in the current interface, and return to the Wechat page before entering Mini Program.

Navigation area (Android)

There is only one operation in the navigation area-directly exit Mini Program, go back to the Wechat or system desktop before entering Mini Program, and the hardware return key included in the Android phone returns to the next level of page.

There is a special case of Android navigation: when users add Mini Program to the Android desktop through the menus in the action area, and open Mini Program from the Android desktop, the navigation button is not displayed on the home page of Mini Program. Only the title and operation area of Mini Program are displayed. On the Mini Program secondary page, the navigation area can only return to the previous page, and clicking the hardware return key that comes with the Android phone also has the same effect.

Custom color rules for Wechat navigation bar (iOS and Android)

The Mini Program navigation bar supports basic background color customization functions. The selected color needs to match harmoniously with the two sets of main navigation bar icons provided by Wechat on the premise of meeting the availability. It is recommended to refer to the following color selection results:

Example of a color scheme

On-page navigation

Developers can add their own navigation to the page according to their own functions. And keep the navigation consistent between different pages. However, due to the limitation of the screen size of the mobile phone, the navigation of Mini Program pages should be as simple as possible. For pages that are only linear browsing in general, it is recommended to use only Wechat navigation bar.

Developers can choose Mini Program page tagging paging (Tab) navigation. The tab paging bar can be fixed at the top or bottom of the page, making it easy for users to switch between different pages. The number of tags shall not be less than 2 and the maximum number of tags shall not exceed 5. In order to ensure that the number of tags clicked on is not more than 4, it is recommended that the number of tags not exceed 4. There should not be more than one set of tabbed pagination bars on a page.

Among them, the Mini Program home page can choose the original bottom label paging style provided by Wechat, which is only used for the Mini Program home page. The icon style, label copy and copy color can be customized during development. For specific settings such as icon size, please refer to the development documentation and WeUI basic control library.

The top label page bar color can be customized. In custom color selection, it is important to maintain the availability, visibility, and maneuverability of the paging bar labels.

two。 Reduce waiting and timely feedback

Too long waiting for the page will cause bad mood among users. Using the technology provided by WeChat Mini Programs project has greatly reduced the waiting time. Even so, when loading and waiting are inevitable, timely feedback is needed to ease the bad mood of users waiting.

Startup page load

Mini Program launch page is one of the pages where Mini Program shows its brand characteristics to a certain extent in Wechat. This page will highlight the brand characteristics and loading status of Mini Program. Except for the brand logo (Logo) display on the launch page, all other elements on the page, such as loading progress instructions, are provided by Wechat and cannot be changed, without the need for developers.

Page drop-down refresh load

Within WeChat Mini Programs, Wechat provides standard page drop-down refresh loading capabilities and styles that developers do not need to develop on their own.

Load feedback on the page

Developers can customize the loading style of the page content in Mini Program. It is recommended that custom loading styles should be as concise as possible, regardless of whether they are used in local or global loading, and use simple animation to inform users of the loading process. Developers can also use the uniform page loading style provided by Wechat, as shown in the figure.

Modal loading

The loading style of the mode will cover the entire page, and it should be used with caution because it is impossible to tell the specific location or content of the load may cause anxiety to the user. Do not use modal loading except for some global operations.

Local loading feedback

Local loading feedback is only carried out in the local part of the page that triggers the loading. This feedback mechanism is more targeted and the page jumps less. It is the feedback recommended by Wechat. For example:

Considerations for loading feedback

If it takes a long time to load, you should provide a cancel operation and use a progress bar to show the progress of the load.

During the loading process, animation should be maintained; loading without animation can easily give people the illusion that the interface is stuck.

Don't use more than 1 load animation on the same page.

Result feedback

In addition to the need for timely feedback while the user is waiting, clear feedback is also needed on the results of the operation. According to the actual situation, different results feedback styles can be selected. For local operations on the page, you can give direct feedback in the operation area, and for page-level operation results, you can use pop-up prompts (Toast), modal dialog boxes, or the results page to display.

Feedback on the result of local operation on the page

For the partial operation of the page, you can give direct feedback in the operation area, such as before and after clicking on the multi-selection control as shown below. For commonly used controls, Wechat Design Center has provided control library and WeUI control library, in which the controls have provided complete operation feedback.

Page global operation result-pop-up prompt (Toast)

Pop-up prompts (Toast) are suitable for lightweight success prompts, disappear automatically after 1.5 seconds, do not interrupt the process, have less impact on users, and are suitable for action reminders that do not need to be emphasized, such as success prompts. Pay special attention to this form does not apply to error prompts, because error prompts need to be clearly informed to the user, so it is not suitable to use flash pop-up prompts.

Results of global operation on the page-modal dialog box

The status of the operation results that need to be clearly known by the user can be prompted through the modal dialog box, and instructions for the next step can be attached.

Page global operation result-result page

For cases where the operation result is already the end of the current process, you can use the action results page to provide feedback. This way most strongly and clearly informs the user that the operation has been completed, and can give guidelines for the next step according to the actual situation.

3. Abnormal controllable, there is a way back

When designing any task and process, the abnormal state and process are often ignored, and these abnormal scenarios are often when the user is most depressed and in need of help, so it is necessary to pay special attention to the design of the abnormal state. In the event of an exception, give the user the necessary status prompt, and tell the solution, so that there is a way back.

To put an end to the abnormal state, the user is inexplicably nowhere to go, stagnant in a certain page. Both the modal dialog box and the results page mentioned above can be used as reminders of abnormal states. In addition, in the form page, especially in the page with more form items, the error items should be clearly pointed out so that the user can modify them.

Abnormal status-form error

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 to modify it.

These are all the contents of the article "what are WeChat Mini Programs's design specifications?" Thank you for your reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.