# experience

# 1. Turn on inertial scrolling

Inertial scrolling will make scrolling smoother, inertial scrolling is default on Android, and additional settings are required on iOS.-webkit-overflow-scrolling: touchstyle;

Score criteria: wxss withoverflow: scrollelements, in iOS need to set-webkit-overflow-scrolling: touchstyle

# 2. Avoid using`: active`pseudo-classes to implement the click state

Using css: activepseudo-class to achieve the click state, it is easy to trigger, and the click state will not disappear when scrolling or sliding, poor experience.It is recommended to use the 'hover-class' property of the Weixin Mini Program built-in component to achieve

Score criteria: Do not use: activepseudoclass, and usehover-classto replace:" active

# 3. Maintain picture size ratio

If the picture is not shown in proportion to the original picture, it may cause the picture to be distorted, not attractive, and even cause difficulty in user identification. You can set the mode property of the image component to maintain the aspect ratio of the original image, depending on the situation.

Score criteria: The high / wide shown is not more than 15% of the high / width of the original image

# 4. Responsive area of an element that can be clicked

We should set the response area size of clickable elements reasonably; if it is too small, it will make it difficult for users to click and the experience is poor.

Scoring criteria: The width and height of the clickable elements are not less than 20px

# 5. IPhone X compatible

Forposition: fixedIf the interactive components are rendered outside the safe area of the iPhone X, it is easy to accidentally touch the Home Indicator, and the interactive parts should be rendered inside the safe 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 criteria:position: fixedInteractive components with height less than 68px are rendered in a safe area

# 6. Window changes adapt

For pages that support resizing, you need to adapt the UI to different window sizes to achieve a good experience.

You can use the match-media component, the MatchMediaObserver, or the @ media media query to supplement the page with the adaptation logic.

Required for scoring: Pages that support resize have relevant adaptation logic

# 7. Reasonable color combination

Text color and backview need to match properly, the appropriate color contrast can let users better read, improve Weixin Mini Program experience.

Since the calculation method of color matching is relatively complex, the algorithm is still being optimized. Therefore, this indicator serves only as a reminder of the score and is not included in the total score.

The criteria for judgement:

1. For larger fonts (font-size > = 24px, or bothfont-size > = 19pxandfont-weight > = 700),3

2. Other font, text color and background color contrast not less than4.5

Reference W3C standard