# Multi-screen Design
# Xiaomi Smart Wearable Devices
Currently, Xiaomi wearable devices equipped with the Vela system are primarily smartwatches and wristbands. The watch screens are circular or rectangular, while the wristband products mainly feature rectangular and capsule-shaped screens.
Data reference for released Vela wearable devices:
| Device Type | Device Model | Screen Shape | Screen Size | Resolution | PPI | DPR |
|---|---|---|---|---|---|---|
| Watch | Xiaomi Watch S1 Pro | Circular | 1.47 inches | 480x480 | 326 | 2.0 |
| Watch | Xiaomi Watch H1 | Circular | 1.43 inches | 466x466 | 326 | 2.0 |
| Watch | Xiaomi Watch S3 | Circular | 1.43 inches | 466x466 | 326 | 2.0 |
| Watch | Xiaomi Watch S4 Sport | Circular | 1.43 inches | 466x466 | 326 | 2.0 |
| Watch | Xiaomi Watch S4 | Circular | 1.43 inches | 466x466 | 326 | 2.0 |
| Watch | REDMI Watch 5 | Rectangular | 2.07 inches | 432x514 | 324 | 2.0 |
| Wristband | Xiaomi Band 8 Pro | Rectangular | 1.74 inches | 336x480 | 336 | 2.1 |
| Wristband | Xiaomi Band 9 | Capsule-shaped track screen | 1.62 inches | 192x490 | 325 | 2.0 |
| Wristband | Xiaomi Band 9 Pro | Rectangular | 1.74 inches | 336x480 | 336 | 2.1 |
| Wristband | Xiaomi Band 10 | Capsule-shaped | 1.725 inches | 212x520 | 326 | 2.0 |
# Design Recommendations
When integrating products, design decisions can be made based on application scenarios and adaptable product forms. If the product scenario allows for good interaction across various screen forms such as wristbands and watches, it is recommended to produce three types of design drafts to accommodate interaction schemes for capsule-shaped, circular, and rectangular screens.
Data reference for screens of different shapes:
| Screen Shape | Circular Screen | Rectangular Screen | Capsule Screen |
|---|---|---|---|
| Aspect Ratio Range | W/H=1 | 0.5<=W/H<1 | 0.3<W/H<0.5 |
| Recommended Aspect Ratio | 1 | 0.7 | 0.39 |
| Recommended Resolution | 466x466 | 336x480 | 192x490 |
It is recommended to design three sets of UI interactions to adapt to the three main screen types. If the circular and rectangular screens can be reused, one set can be designed for circular and rectangular screens, and another set for capsule screens.
# Safe Area Adaptation for Curved Screens
For circular and capsule-shaped screens, the curved screen edges can cause some display issues. When designing the UI, it is necessary to consider the safe area of the screen and design the main functions within the safe area.
For example, when displaying text or content lists, it is necessary to consider the completeness and interactivity of the display at the edges.
The gray areas in the illustrations represent the safe areas for circular and capsule screens, respectively.
