Clarity

The content in Mini Programs must be displayed on the screen in a primary and secondary manner as the content of other digital products. Highlight the key information while weakening the secondary information.

Hierarchical Information Display

Information on the interface of a Mini Program must be displayed in a hierarchal manner. Highlight the information of greater importance. If all content on the interface is displayed the same way and attracts equal attention from users, users may find the interface unorganized and unfocused.


After you weaken the secondary information and highlight the important information, the interface of the Mini Program is immediately improved. The color scheme, font, and layout all remain the same.


You can use cards to display information in a Mini Program. However, if these information cards are not displayed in a hierarchal manner, users may be hard to identify the important information.


Make the key information more prominent by changing the weight and color of the corresponding texts. To distinguish the content from the background of the page, set the text color to black and the background color to light gray. Then the content can stand out well against the background.

Primary And Secondary Buttons

If a Mini Program page contains multiple buttons for selection, the primary button must be given a more obvious style for user convenience.
When multiple operations are listed together, differentiate the primary operation from secondary operations. Use secondary or tertiary button styles for secondary or auxiliary operations.