# experience

# 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 withoverflow: scrollOf the elements in the iOS Next needs to be set-webkit-overflow-scrolling: touchstyle

# 2. Avoid using`:active`Pseudo-class to implement click-state

use css :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 thehover-classreplace:active

# 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

forposition: 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)

Scoring conditions: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.

Judgment Criteria:

1. For larger fonts (font-size >= 24px, or at the same time satisfyfont-size >= 19pxandfont-weight >= 700), the contrast between the text color and the background color is not less than3

2. Other fonts, text colors and background colors have a contrast of not less than4.5

Contrast Calculation Method Reference W3C Standard