Xiaomi Hyper OS 自适应设计系统

项目信息

前言

HyperOS 是小米公司的下一代操作系统, 为了适应不同屏幕尺寸、分辨率、设备类型, 我们设计了一套全新的、打通全流程的自适应设计系统和SDK。 设计系统包含的内容十分庞杂, 包括导航模式、颜色、字体、图标、间距、布局、圆角、阴影, 常用控件等。

这里我们将以导航控件中的文字容器尺寸和间距为例, 展示设计系统的设计思路和实现方法。

设计思路

1. 防误触

目前搭载 HyperOS 系统的设备类型主要有三类：手机、折叠屏和平板。

这三种设备分别对应了三种用户使用场景, 分别对应了三种不同的防误触边距。

1. 手机 -> 单手手持 -> 16px
2. 折叠屏 -> 双手手持 -> 24px
3. 平板 -> 单手手持/放置 -> 40px

2. 距离及视锥角

用户在使用三种不同的设备时, 因为眼睛距离屏幕的距离不同, 可视区域也会有所不同。

人类的视锥角一般认为是30°

对于手机和折叠屏, 用户的视锥角足够覆盖整个屏幕, 因此内容区域的宽度在刨除防误触边距后, 可以占据屏幕的100%。

而对于平板, 用户的视锥角无法覆盖整个屏幕, 因此内容区域的宽度应当适当缩小, 以保证用户不需要挪动头部即可看到整个屏幕。

总结

HyperOS 的设计系统承载了 100+ 个一方及三方业务。因此设计系统需要抓住一切问题的本质, 从根源出发识别并解决问题。 这个设计理念贯穿于设计系统的 20+ 个控件的每一个细节。