User Experience
1. Maintain Image Aspect Ratio
If images are not displayed in their original aspect ratio, it may lead to distortion, unattractive appearance, and even difficulty in user recognition. You can set the mode property of the image component to maintain the original aspect ratio.
Official Advice: The ratio of displayed height to width compared to the original image's height to width does not exceed 15%.
2. Clickable Element's Response Area
We should properly set the response area size of clickable elements. If it's too small, users may find it challenging to click, resulting in a poor experience.
Official Advice: The width and height of clickable elements are both not less than 20px.
3. Window Resize Adaptation
For pages that support resizing, UI adaptation should be done for different window sizes to ensure a good user experience.
You can use @media queries to add adaptive logic to the page.
Official Advice: Pages that support resizing have relevant adaptation logic.
4. Reasonable Color Matching
Text color should be appropriately matched with the background color. Suitable color contrast can enhance readability and improve the user experience of the mini-program.
Since the calculation of color matching is relatively complex and the algorithm is continuously optimized, this criterion serves only as a reminder for scoring and is not included in the total score.
Criteria:
For large fonts (font-size >= 24px, or both font-size >= 19px and font-weight >= 700), the color contrast between text and background is not less than 3.
For other fonts, the color contrast between text and background is not less than 4.5.
Contrast ratio calculation method refers to W3C standards