# Weixin Mini Program Design Guide
Based on the lightness of Weixin Mini Program, we developed Weixin Mini Program user interface design guidelines and recommendations. The design guidelines are based on full respect for the user's right to know and to operate.It aims to encourage ecological conservation and protection of WeChat users to create a friendly, efficient and consistent user experience, and to maximize the adaptation and support of different needs, to achieve win-win results for users and Weixin Mini Program service providers.
# Friendly and polite.
In order to prevent users from using the Weixin Mini Program service in WeChat,Attention is disturbed by the complex environment around us, and Mini programs should be designed with care to reduce the interference of unrelated design elements with the user's goals, politely show the user the services provided by the program, and friendlyly guide the user to actions.
# Significant focus
Each page should have a clear focus so that the user can quickly understand the content each time they enter a new page. Where priority is identified, other distractions on the page that are not related to the decisions and actions of the user should be avoided as much as possible.
# Case diagram 1
# Case diagram 2
# The process is clear
In order to allow users to use the page smoothly, when the user goes through a certain operational process, it is necessary to avoid interrupting the user by content that is outside the user's target process.
# Be clear and clear.
Once a user enters our Weixin Mini Program page, we have a responsibility and obligation to clearly inform the user where they are and where the user can go, to ensure that the user navigates the page without getting lost, so as to provide a safe and enjoyable user experience.
# The navigation is clear and easy to come and go
Navigation is the most critical factor in ensuring that users do not get lost while browsing and jumping through a web page. Navigation needs to tell the user where they are, where the places they can go, how to go back, and so on.WeChat in Weixin Mini Program now does not provide a unified navigation style, developers can design their own Mini Program home page and secondary page interface navigation.It is recommended that all sub-pages provide a return to the previous page in the upper left corner. In addition, WeChat iOS users can also swipe to the right through the edge of the interface to return to the previous Mini Program or WeChat page. Android users can do the same with the physical return button.
# Weixin Mini Program Menu
All pages of Weixin Mini Program, including Mini Programs inline pages and plugins, WeChat will have an official Mini Programs menu in the upper right corner, as shown.Developers cannot customize their content, but they can choose two basic color schemes, dark and light, to suit the page design style.
Official Weixin Mini Program Menus will be placed in a fixed location in the interface. Developers should set aside space in this area when designing the interface. If you need to place interactive elements near this area, pay special attention to whether interactive events conflict and actions are easy to use
# Weixin Mini Program Menu Shade Color Scheme (iOS and Android)
Developers can, subject to availability, choose the appropriate solution from the WeChat two color schemes available in the Weixin Mini Program menu to suit the small print page design style.
# Intra-page navigation
Developers can add their own navigation in the page according to their own functional design requirements. Keep navigation between pages consistent, with clear directions and a way back.Limited by the size of the screen, Weixin Mini Program page navigation should be as simple as possible. It is recommended that developers design their own navigation style and WeChat official Mini Program menu style to maintain a certain difference in order to distinguish.
Developers can add tab navigation to Weixin Mini Program pages.The tab section bar can be fixed at the top or bottom of the page to make it easier for the user to switch between different pages. The number of tags must be no less than 2 and no more than 5. To ensure click areas, it is recommended that the number of tags not exceed 4 items. A page should also have more than one set of tab tabs.
The Weixin Mini Program home page can select the native bottom tab paging style provided by WeChat, which is only used by the Mini Program home page.When developing custom icon style, label copy and copy color, etc., specific settings such as figure size reference can refer to the development document and WeUI basic control library.
The color of the top tab sidebar can be customized. When it comes to custom color selection, be sure to maintain the usability, visibility and operability of the paging bar labels.
# Reduce waits and provide timely feedback
The technology provided by the Weixin Mini Program project has been able to greatly reduce the wait time.Even so, when loading and waiting occur inevitably, timely feedback is needed to ease the user's unhappy waiting mood.
# Launch page loaded
Weixin Mini Program The launch page is one of the pages where the Mini Program displays a certain degree of branding within WeChat.This page will highlight the Mini Program brand features and loading status. In addition to the brand logo display, all other elements on the page, such as loading progress instructions, are provided by WeChat and cannot be changed, without the developer's development.
# Page drop-down refresh loading
In Weixin Mini Program, WeChat provides standard page drop-down refresh loading capabilities and styles that developers do not need to develop themselves.
# Load feedback inside the page
Developers can customize the loading style of page content in Weixin Mini Program.It is recommended that whether you use local or global loading, custom loading styles should be as concise as possible and use simple animations to inform the user about the loading process.
# Model Loading
The loading style of the modal will cover the entire page and should be used with caution because the failure to clearly inform the location or content of the specific loading may cause anxiety for the user. Do not use modal loading except for certain global operations.
# Loading feedback locally
Local loading feedback is only in the trigger loading page local feedback, this feedback mechanism is more targeted, the page beat small, is WeChat recommended feedback.For example:
# Globally Load Feedback
Developers can refer to the style of the figure, using the title bar to indicate the process of loading Weixin Mini Program page content.For example:
# Loading Feedback Notes
- If the loading time is longer, provide a cancellation operation and use the progress bar to show the progress of the loading.
- During loading, the animation effect should be maintained; Loading without animation can easily create the illusion that the interface is already stuck.
- Do not use more than one animation on the same page at the same time.
# Feedback on results
In addition to the need for timely feedback during the user's wait, clear feedback is needed on the results of the operation. Depending on the actual situation, different results feedback styles can be chosen. You can use pop-up prompts, modal dialog boxes, or results page displays for page-level actions.
# Feedback on the results of local operations on the page
For local page actions, direct feedback can be given in the action area, such as the following figure before and after clicking on a multiselect control.For common controls, the WeChat Design Center provides a library of controls that provide complete operational feedback.
# Page global results - icon-type pop-up alerts
Icon-type pop-up prompts are suitable for lightweight success prompts, disappear automatically after 1.5 seconds, do not interrupt the process, have less impact on the user, and are sought for action reminders that do not require emphasis, such as success prompts. Note in particular that this form does not apply to error prompts, because error prompts need to be explicitly communicated to the user and therefore not suitable for flashing pop-up prompts.
# Global results of page operations - text pop-up alerts
Text-based pop-up prompts are suitable for situations where you need to lightly explain the current state in text or to alert a non-serious error. After 1.5 seconds, it disappears automatically, without interrupting the process, and has a small impact on the user.
# Page Global Manipulation Results - Modal dialog box
A modal dialog box can be used to indicate the status of the result of the operation, which can be accompanied by instructions for the next step.
# Page Global Action Results - Results Page
In cases where the operation result is already the end of the current process, you can use the operation result page to provide feedback. This approach most strongly and explicitly informs the user that the operation has been completed and provides guidance on the next steps based on the actual situation.
# The anomaly is controllable and there is a way back.
When designing any task and process, anomalous states and processes are often easily overlooked. These exception scenarios are often when the user is most frustrated and in need of help, so extra care is needed in the design of exception states, providing the user with the necessary status alerts when an exception occurs, and informing the solution so that the user has a way back.
It is necessary to eliminate situations where a user stops on a page in an exceptional state without having anywhere else to go. Both the modal dialog box and the result page mentioned above serve as a reminder of an exception. In addition, in form pages, especially those with a large number of form items, the error items should be clearly identified so that users can modify them.
# An exception state - the form is in 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 change it.
# Easy and elegant
From the physical keypad mouse of the PC era to the finger of the mobile terminal era, although the infusion equipment is greatly streamlined, the accuracy of the finger operation is much less accurate than the keypad mouse. In order to adapt to this change, developers need to fully utilize the features of mobile phones in the design process, so that users can conveniently and elegantly control the interface.
# Reduce inputs
Because the keyboard area of a mobile phone is small and dense, making input difficult and often causing input errors, you should design a Weixin Mini Program page with minimal user input, using existing interfaces or other easy-to-use selection controls to improve the user input experience.
For example, in the figure below, when adding a bank card, the camera identification interface is used to help the user enter it.In addition, the WeChat team has also opened up a variety of Weixin Mini Program interfaces such as geolocation interfaces, and taking full advantage of these interfaces will greatly improve the efficiency and accuracy of user input, thus optimizing the experience.
In addition to utilizing interfaces, when you have to let the user manually enter, you should try to let the users make choices rather than keyboard input. On the one hand, recall is easy to remember, and letting the user choose among a limited number of options is generally easier to rely entirely on memory input; On the other hand, it is still a matter of consideration that the dense single-key input of the phone's keyboard is extremely prone to input errors. For example, in the diagram, providing search history shortcuts when a user searches will help the user search quickly while reducing or avoiding unnecessary keyboard input.
# Avoid mishandling
Since on mobile devices, we control the interface using finger touches on the screen, the precision of finger clicks is significantly lower than that of a mouse. Therefore, when designing interactive elements that require clicks, it is essential to carefully consider the size of the clickable areas to prevent accidental interactions caused by small or densely packed clickable regions. Such problems are often easy when simply porting the interface originally used on a computer screen directly to a mobile phone without doing any adaptations. Because the resolution of the mobile phone screen is different, the most suitable click pixel size is not exactly the same, but converted into the physical size is roughly between 7mm-9mm.In the standard component library provided by WeChat, various control elements have taken into account page click effect and adaptation of different screens, so it is once again recommended to design with or imitate standard control dimensions.
# Use Interfaces to Boost Performance
WeChat The Design Center has launched a set of standard web control libraries, including sketch design control libraries And the Photoshop design control library and will continue to refine the Weixin Mini Program components, which fully take into account the characteristics of mobile pages to ensure their usability and operational performance on mobile pages; At the same time WeChat development team is also constantly improving and expandingWeixin Mini Program interface and provides WeChat public libraries, using these resources can not only provide users with faster service, but also play a great role in improving page performance, invisibly improving the user experience.
# Unification and stability
In addition to the principles mentioned above, it is recommended that Weixin Mini Program in WeChat should always pay attention to the uniformity and continuity between different pages, and try to use the same controls and interactive mode in different pages.
A unified page experience and a consistent interface element will help achieve usage goals with minimal learning costs and reduce the discomfort caused by page hops.For this reason, Weixin Mini Program can use the standard controls provided by WeChat as needed to achieve uniformity and stability.
# Visual specifications
# Typeface
The font used in WeChat is consistent with the system font running, and the common font sizes are 22, 17, 15, 14, 12 (pt), using the following scenarios:
# Font color
# Color boards
# list
# Button
# icon
# Resources Download
WeChat provides a library of basic controls that can be used by Web designers and Weixin Mini Program to facilitate design.Also provides resources that are easy for developers to access.
Preview address: https://weui.io