1. Turn on inertia rolling
Inertial scrolling will make scrolling smoother, in Android by default there is inertia scrolling, and in iOS Additional settings required under
-webkit-overflow-scrolling: touchThe style of
Scoring conditions: wxss with
overflow: scrollOf the elements in the iOS Next needs to be set
2. Avoid using
:activePseudo-class to implement click-state
:activePseudo-class to achieve click state, it is easy to trigger, and scrolling or sliding click state will not disappear, poor experience. Recommended to use Mini Program built-in components of the 'hover-class' Attributes to implement the
Score condition: do not use
:activePseudo-class, and use the
3. Keep the picture size ratio
If the image is not displayed according to the ratio of width to height of the original image, it may lead to distorted image, not beautiful, and even lead to user identification difficulties. Can be set in case image Component mode Property to preserve the aspect ratio of the original image.
Scoring Conditions: High Displayed/Width and height of the original picture/Width does not exceed 15%
4. Response area for clickable elements
We should reasonably set the response area size of clickable elements, if too small will lead to very difficult user experience is poor.
Scoring conditions: clickable elements are not less than the width and height 20px
5. iPhone X compatible
position: fixedOf interchangeable components if rendered on an iPhone Outside the safe area of X, easy to touch by mistake Home Indicator, should render all interactive parts into a secure area.
It is recommended to use the following wxss for compatibility
padding-bottom: constant(safe-area-inset-bottom) padding-bottom: env(safe-area-inset-bottom)
position: fixedAnd the height is less than 68px Of interactive components rendered within a secure area of
6. Window Change Fit
For pages that support resizing, UI adaptation to different window sizes is required and a good experience has been achieved.
Can use match-media Components, MatchMediaObserver or @media Media queries add adaptation logic to the page.
Score condition: Pages that support resizing have relevant adaptation logic
7. Reasonable color match
Text color and background color needs to be matched properly, appropriate color contrast can allow users to better read, enhance the user experience of Mini Programs.
Because of the complexity of color collocation, the algorithm is still being optimized. Therefore, this indicator is only a reminder of the score and is not included in the overall score.
1. For larger fonts (
font-size >= 24px, or at the same time satisfy
font-size >= 19pxand
font-weight >= 700), the contrast between the text color and the background color is not less than
2. Other fonts, text colors and background colors have a contrast of not less than
Contrast Calculation Method Reference W3C Standard