Xiaomi Hyper OS Responsive Design System

Project Info

Introduction

HyperOS is Xiaomi's next-generation operating system. In order to adapt to different screen sizes, resolutions, and device types, we have designed a brand new, end-to-end responsive design system and SDK. The content of the design system is very complex, including navigation mode, color, font, icon, spacing, layout, rounded corners, shadows, common controls, etc.

Here we will take the spacing between text containers in the navigation control as an example to demonstrate the design ideas and implementation methods of the design system.

Principles

1. Anti-mistouch

There are mainly three types of devices that carry the HyperOS system: mobile phones, foldable screens, and tablets.

These three types of devices correspond to three different user usage scenarios, each corresponding to three different anti-mistouch margins.

1. Mobile phone -> single-handed holding
2. Foldable screen -> two-handed holding
3. Tablet -> single-handed stationary

2. Distance and FOV

When users use three different devices, the distance between their eyes and the screen is different, and the field of view will also be different.

The human field of view is generally considered to be 30°.

For mobile phones and foldable screens, the user's field of view is enough to cover the entire screen, so the width of the content area can occupy 100% of the screen after excluding the anti-mistouch margin.

For tablets, the user's field of view cannot cover the entire screen, so the width of the content area should be appropriately reduced to ensure that users can see the entire screen without moving their heads.

Summary

The design system of HyperOS carries 100+ first-party and third-party Apps. Therefore, the design system needs to grasp the essence of all problems, identify and solve problems from the root cause. This design concept runs through every detail of the 20+ controls in the design system.