# experience

# 1. Start inertia rolling

Inertial scrolling will make the scrolling smoother. There is inertial scrolling by default under Android, and in iOS Additional settings required-webkit-overflow-scrolling: touchThe style of

Score condition: wxss withoverflow: scrollOf the elements, in the iOS Under Need to Set-webkit-overflow-scrolling: touchstyle

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

use css :activePseudo-class to implement the click state, it is easy to trigger, and the click state does not disappear when scrolling or sliding, poor experience. It is recommended to use the Mini Program built-in components 'hover-class' Property to implement

Scoring Conditions: Do not use:activePseudo-classes, and use thehover-classreplace:active

# 3. Keep the image size ratio

If the image is not displayed according to the original image width and height ratio, it may cause the image to be distorted, unsightly, and even lead to user identification difficulties. Can be set according to the situation image Component mode Property to maintain the original aspect ratio.

Scoring Condition: The displayed high/Width and height of the original/Width not exceeding 15%

# 4. Response area for clickable elements

We should set the size of the response area of the clickable element reasonably, if it is too small, it will lead to a very difficult user experience.

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

# 5. iPhone X compatible

forposition: fixedOf interactive components, if rendered on the iPhone Outside the safe zone of X, easy to accidentally touch Home Indicator, all interactive parts should be rendered into 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 conditions:position: fixedAnd the height is less than 68px The interactive components are rendered within the safe zone

# 6. Window change adaptation

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

Can be used match-media Component, MatchMediaObserver or @media The media query complements the adaptation logic to the page.

Scoring condition: Pages that support resizing have relevant adaptation logic

# 7. Reasonable color matching

The text color and background color need to be matched properly, and the appropriate color contrast can allow users to read better and improve the user experience of the Mini Program.

Because the calculation method of color matching is more complex, the algorithm is still in the process of optimization. Therefore, this indicator is only used as a reminder of the score and is not included in the total score.

Judgment criteria:

1. For larger sizes (font-size >= 24px, or both.font-size >= 19pxandfont-weight >= 700), the contrast of the text color and the background color is not less than3

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

Contrast Calculation Method ReferenceW3C standards