Design Checklists
The design checklist lists the rules that should be paid attention to during application design in all scenarios. Complying with these rules helps you deliver consistent user experience.
The rules are either Mandatory or Optional. Mandatory rules are proven solutions or effects that must be observed in your design. Optional rules are subject to application brand style or service-specific requirements, and can be adjusted as required.
Check your application against the following checklist:
| Type | Item | Description | Category |
|---|---|---|---|
| Application architecture | Navigation | Ensure the same page navigation structure on different forms of devices. (You must provide UX design for all these devices, if supported.) | Optional |
| Layout | Streamlined design | Streamline the layout design for each device form. Ensure that the display of content is consistent across devices of different sizes and resolutions without misplacement, truncation, deformation, excess blank space (> 50%), overcrowding (spacing < 16 vp), or extremely large fonts or images. | Mandatory |
| Responsive design | Design the grid layout within the area that occupies N columns and the gutters inside these columns, excluding the margins on both the right and left sides. | Mandatory | |
| Responsive design | Specify the type of the grid to use and provide the values of the three grid elements at different breakpoints. | Optional | |
| Responsive design | Align grids by container instead of internal sub-elements. | Mandatory | |
| Responsive design | In addition to the page layout design, mark grids in obvious ways, such as colors, to avoid confusion during partial grid design. | Optional | |
| Responsive design | It is prohibited that you do not design the layout based on grids while grids are marked. | Mandatory | |
| Adaptive design | In non-grid design scenarios, clearly mark the adaptive layout capability, which includes stretching, equalization, proportion, scaling, extension, hiding, and wrapping. | Optional | |
| Human-computer interaction | Input modes | Ensure that the interaction modes, such as touchscreen, mouse, keyboard, remote control, and joystick, are all supported in a way that complies with industry standards. | Optional |
| Unified interaction events | Use OpenHarmony components to achieve consistent interaction experience. If customization is required, ensure that the operations on different input devices are the same as those specified in the guide in each scenario. Special attention must be paid to the use of a mouse. | Optional | |
| Visual style | Units | Use vp as the unit for UI layout. Use px only in scenarios where the element size is strictly controlled. | Mandatory |
| Colors | Use layered parameters for color assignment. The dark color mode is recommended. Ensure that no recognition problem occurs when the color mode changes. | Optional | |
| Fonts | Use fp as the font unit. Ensure that your application changes the font size according to the system font setting, while maintaining a consistent UI layout. | Mandatory | |
| Polymorphic components | Common component states | Ensure that the visual effects of components in different states are available. The common component states are as follows: normal, disabled, pressed, focused, activated, and hover. | Optional |