# Weixin Mini Program Aging Design Guide
# Why ageing appropriately?
In order to make the Internet more accessible and convenient for the elderly, we recommend **developers to adapt Weixin Mini Program to ** based on WeChat font point size.
# WeChat Font size
# Gets WeChat font point size
wx.getAppBaseInfo or wx.getSystemInfo for font point size:
- FontSizeSetting: User font point size in px
- Fontsizescalefactor: Font Zoom Ratio
The wx.getAppBaseInfo interface is recommended. Subsequent wx.getSystemInfo interfaces will no longer be maintained.
# WeChat font point size rule
iOS
Under iOS, WeChat font point size has seven gears, one normal gear, one reduced gear and five enlarged gears.
Different screen sizes and font point sizes correspond to different font sizes. Font Size Scale Factor is obtained by dividing the font point size of the current user by the standard font point size (17px).
The user font point size changes are as follows:
| Screen size | -1 | standard | +1 | +2 | +3 | +4 | +5 |
|---|---|---|---|---|---|---|---|
| 414 screen | 16 | 17 | 18.5 | 20 | 22 | 23.8 (word for "care mode") | 25.5 |
| 375 screen | 16 | 17 | 18 | 19.5 | 21 | 22 | 23.8 (word for "care mode") |
| 320 screen | 16 | 17 | 18 | 19 | 20.5 | 22 | 23.8 (word for "care mode") |
| iPad | 16 | 17 | 20 | 24.5 (Type of "care mode") | 27.5 | 29.75 | 29.75 |
For the native navigation bar, chat dialog boxes, and the text content within WeChat Moments, WeChat provides special handling instructions that developers can refer to.
The native navigation bar has the same font point size rules for all screen sizes, as follows:
| -1 | standard | +1 | +2 | +3 | +4 | +5 |
|---|---|---|---|---|---|---|
| 16 | 17 | 18.5 | 20 | 20 | 20 | 20 |
The rules for font size in chat boxes and the text within WeChat Moments are as follows:
| Screen profiles | -1 | standard | +1 | +2 | +3 | +4 | +5 |
|---|---|---|---|---|---|---|---|
| 414 screen | 16 | 17 | 18.5 | 20 | 24.5 | 25.5 | 27.5 |
| 375 screen | 16 | 17 | 18.5 | 19.5 | 23 | 25.5 | 27.5 |
| 320 screen | 16 | 17 | 18 | 19 | 21 | 25.5 | 27.5 |
| iPad | 16 | 17 | 20 | 24.5 | 27.5 | 28.73 | 30 |
Android
In Android, WeChat font point size has eight gears, one normal gear, one reduced gear and six enlarged gear.
The font size is determined by the font point size (16px) * font point factor (fontSizeScale Factor).
| parameter | -1 | standard | +1 | +2 | +3 | +4 | +5 | +6 |
|---|---|---|---|---|---|---|---|---|
| Font scale | *1 | *1 | *1 | *1.12 | *1.125 | * 1.4 (Care Mode) Rate | *1.55 | *1.65 |
| User font point size | 16 | 16 | 16 | 18 | 18 | 22 | 25 | 26 |
At the same time, different gear device independent pixel value will change, the actual font display size is determined by the device independent pixel value change rate * user font point size. As a result of this parameter change, the font point size of -1 / Standard / + 1, + 2 / + 3 is different.
Unique pixel values are not currently available for Weixin Mini Program and will be changed in future releases, so developers do not need to understand the scaling of device individual pixel values, but can adapt to font point size.
The actual font display sizes resulting from independent pixel values at different levels are as follows, which developers can refer to:
| parameter | -1 | standard | +1 | +2 | +3 | +4 | +5 | +6 |
|---|---|---|---|---|---|---|---|---|
| Independent pixel value change rate | *0.91 | *1 | *1.11 | *1.11 | *1.18 | *1.18 | *1.18 | *1.18 |
| User font point size | 16 | 16 | 16 | 18 | 18 | 22 | 25 | 26 |
| Actual font display size | 14.56 | 16 | 17.76 | 21.24 | 21.24 | 25.96 | 29.5 | 30.68 |
# Aging design specifications
# Basic rules for adaptive interfaces for aging
- Elements are enlarged following the word "scale ratio" enlargement;
- The relative distance between elements and between containers and containers is always fixed;
- Between elements and elements, and between containers and containers, the rows are folded because they reach the extreme, and the left is aligned by default.
- The text is divided because it reaches a maximum value and follows the alignment of the original text (left, center, right);
- Text information is presented as completely as possible.
# Font style rules
In aging mode, the font, graphic elements, buttons, etc. are 1.4 times enlarged, the spacing of elements, and the navigation bar are fixed sizes.
Text / text image presentation, icons and other elements of the contrast between at least 4.5: 1 (font size greater than 18dp / pt text and text image contrast at least 3: 1). In an aging mode, contrast can be strengthened and readability improved.
# Regional rules for hot areas
Expanding the click-click hot area around an interactive element may require trying to determine the correct size of the element's click area. If the hit area is too small, it may make people feel that they must be extremely precise when interacting with the elements:
- Add 12pt feedback hotspot around elements (icons, icons + text links, pictures);
- If the icon and text point to the same result, use a full and continuous heat zone;
- Elements with large dimensions (at least ≥ 44 pt) and clear boundaries do not need to add hot zones.(e.g. big buttons, big headshots).
The interactive element is in the container (e.g., the navigation bar, card, cell), then the maximum hot zone does not exceed the container itself. If the entire container points to the same result, the pressure area is the container itself.
Avoid overcrowding of interactive elements, and the visual distance between elements is at least 2 A. The operating heat area should divide the spacing between elements. When both "visible boundary elements" and "no visible boundaries" are crowded, priority is given to securing "no apparent boundary element" hot areas.
Special small size of the elements, you can consider expanding the hot zone out of the container, or even cover other elements to ensure a minimum of 40 * 40pt hot zone.
# Basic component adaptation rules
Navigation bar
- On iOS and Android platforms, the navigation bar in the standard gear does not need to zoom;
- Larger than the standard level of the navigation bar zoom rate: 1.18, the heat zone needs to be expanded.
Weixin Mini Program Native navigation rails have been automatically adapted, custom navigation rails need to be separately adapted
Bottom label bar
- The label bar is evenly divided according to the number of features according to screen width, and the icon is aligned with the copy in the middle;
- The icons and copy are scaled according to the zoom rate.
Weixin Mini Program Native tab bar has been adapted, custom tab bar needs to be adapted separately
Top tab bar
- The label bar copy and the underline are scaled down according to the scale of scale;
- The spacing between the tags is kept fixed.
Search bar
- The search bar adaptation rule is to enlarge the text, graphic elements, etc., and keep the spacing constant.
- Keep the outer margin of the search box fixed.
functional module
(1) The left-to-right distance of the module components is fixed at the edge, and the elements follow the system scale-down rate; The elements scale according to the global scale; After the elements are scaled up, you need to ensure that the information and the elements are displayed completely.
# Examples of page adaptation
# Automated adaptation tools
To help developers adapt quickly, WeChat introduced Weixin Mini Program automatic aging adaptation tool to help developers make adjustments.
It is important to note that This aging adaptation tool does not cover all scenarios and needs to be tested and manually adapted after the tool is converted to meet product expectations.