MIUI Watch
Xiaomi
2022
小米第一代智能手表系统
The first generation of Xiaomi smart watch system
Background
小米智能手表最早发布于2019年11月5日,采用1.78英寸方形屏幕。当时手表软件采用的是基于Google WearOS进行的深度定制化方案;但由于Google对WearOS的许多局限性要求并不满足于我们长远目标;MIUI Watch 系统孕育而生。
The Xiaomi smartwatch was first released on November 5, 2019, with a 1.78-inch square screen.  At that time, the watch software used a deep customization solution based on Google WearOS;  But due to Google's many limitations on WearOS, we are not satisfied with our long-term goals;  The MIUI Watch system was born.
System
作为一款全新自研穿戴系统,我们要做的是从0到1的探索与实践。在这个过程中我们既要保证系统的稳定与流畅,又要追求卓越的用户体验。我将 MIUI Watch 系统分解为六个主要纬度,逐一进行突破。稳定性、兼容性、互通性 奠定了系统底层特性,能力层、交互层、表现层 决定了系统基础体验。
As a new self-developed wearable system, what we need to do is to explore and practice from 0 to 1. In this process, we must not only ensure the stability and smoothness of the system, but also pursue an excellent user experience. I break down the MIUI Watch system into six main dimensions, breaking through one by one.
Research
我带领交互团队配合用研团队从多个视角与纬度展开调研,为系统搭建与体验设计进行有效支撑。
I lead the interaction team to conduct research from multiple perspectives and latitudes to effectively support the system framework construction and experience design.
用户侧
1. 定画像 (Set user portrait)
2. 看转化 (Conversion)
3. 看购买 (Purchase)
4. 看习惯 (Habit)
竞品侧
1. 定能力 (Set ability)
2. 找优势 (Find an edge)
3. 找不足 (Find insufficient)
4. 找特点 (Find features)
市场侧
1. 定目标 (Set target)
2. 寻需求 (Find demand)
3. 寻先机 (Look for opportunities)
4. 寻爆点 (Search for critical point)
Flowchart
对于整个 MIUI Watch OS 来说所包含的交互流程图体量非常庞大,从全局到细节,再从系统到应用;
我作为交互负责人起初也比较头痛,因为传统交互流程图对于系统级流程呈现不够直观,低保真流程图又难以做到高效且规范;于是在我一遍遍尝试中探索出了新的解决方案,「模版化流程图」。
For the entire MIUI Watch OS, the volume of interaction flow charts involved is very large, from the overall picture to the details, and then from the system to the application; As the interaction leader, I had a headache at first, because traditional interaction flowcharts were not intuitive enough for system-level process presentation, and low-fidelity flowcharts were difficult to be efficient and standardized;
So I explored a new solution in my repeated attempts, "Templated Flowchart".
我首先统一了包括结构线、视图手势、标识等在内的基础指示组件,之后使用其制定了完整流程图模版标准;
交互设计师可以根据流程图模版与基础指示组件高效搭建自己业务下的流程图,并能轻松做到简洁易读且样式统一。
First, I first defined basic indication components including structure lines, view gestures, logos, etc., and then used the basic indication components to build a flowchart template; Interaction designers can efficiently build flow charts for their own business based on flow chart templates and basic instruction components, and can easily make them concise, easy to read, and uniform in style.
在模版化流程图的效率加持下,我们共产出超 300 项系统功能 和 45 个核心应用的交互流程设计;
不仅如此,我们还整合了产品文档,并加入版本更新机制,从而有力赋能整体业务部门。
Thanks to the efficiency of templated flowcharts, we have produced a total of 45 core applications and interactive process designs for over 300 system functions; not only that, we have also integrated product documentation and added a version update mechanism to effectively empower the overall business department..
Process
如何确保做好整个智能手表系统的交互工作?
How to ensure the interaction of the entire smartwatch system?
Prototype
对于交互设计来说,一个完整可靠的方案从调研到落地过程中,往往会经历多次修改与微调。而有改动就有可能占用产品、视觉或研发的时间与精力。所以在追求极致用户体验的过程中,使用高保真原型工具在开发前完整还原出最终效果是一种可以有效减少改动、高效验证方案、完美对齐效果,并提升上线容错率的重要手段。
For interaction design, a complete and reliable solution often undergoes multiple revisions and fine-tuning during the process from research to implementation. Changes may take up time and effort in product, vision, or R&D. Therefore, in the process of pursuing the ultimate user experience, using high-fidelity prototype tools to fully restore the final effect before development is an important method that can effectively reduce changes, efficiently verify the scheme, perfectly align the effect, and improve the online fault tolerance rate.
Component
我先后测试过市面上几乎全部的高保真原型工具,最终选用 Origami Studio 作为我们交互组的首选原型工具;选择的原因一方面是因为它基于可视化编程原理具有极大可拓展空间,另一方面是它具备封装复杂组件的能力。我利用它建立了 MIUI Watch 系统交互组件库,交互团队成员利用这个组件库可以高效实现对应业务的需求与原型的制作。
I have tested almost all high-fidelity prototyping tools on the market, and finally chose Origami Studio as the preferred prototyping tool for our interaction group; on the one hand, the reason for the choice is that it has a great room for expansion based on the principle of visual programming, and on the other hand, it has the ability to encapsulate complex components. I used it to build the MIUI Watch system interaction component library. My team members can use this component library to efficiently realize the functions and prototypes of the connected business.
Motion Design
一个好用的人机交互系统往往也离不开一套丝滑细腻的动效加持。对于iOS,Android 或 Web端来说,还原动效可以借助现有的成熟的动效库来进行。但是对于一个全新的自研底层的系统,很多时候需要从头开始。为了使开发可以完美还原交互动效,我制定了一套伪代码动效表达式方案。设计师可以利用它将动效逐一拆解,进行参数化描述后交付前端还原。
An easy-to-use human-computer interaction system is often inseparable from a set of silky and delicate dynamic effects. For iOS, Android or Web, restoring motion can be done with the help of existing mature motion libraries. But for a brand-new self-developed underlying system, it is often necessary to start from scratch. In order to allow the development to perfectly restore the interactive effect, I have developed a pseudo-code dynamic expression scheme. Designers can use it to disassemble the dynamic effects one by one, and deliver the front-end restoration after parameterized description.
Design System
因为MIUI Watch系统下支持硬件更不相同,各硬件所用编程语言与前端框架也有所区别,因此我们需要对接的研发同学人数众多。那如何保证各业务侧与研发侧对设计信息的全量同步是一个亟待解决的问题。于是在我的牵头下拉通制定了小米首个可穿戴设计系统。其中包含交互流程,UI组件库,动效设计规范等。预计22年第四季度正式上线。
Because the supported hardware under the MIUI Watch system is even more different, the programming language and front-end framework used by each hardware are also different, so we need to connect with a large number of R&D students. How to ensure the full synchronization of design information between the business side and the R&D side is an urgent problem to be solved. So I took the lead and developed Xiaomi's first wearable design system. It includes interaction process, UI component library, motion design specification, etc. It is expected to be officially launched in the fourth quarter of 2022.
Thank You for Watching,
But...
由于保密原因,有关 MIUI Watch 的更多设计细节,需要在 2022 年小米新品发布会后解禁。
Due to confidentiality reasons, more design details about MIUI Watch will need to be lifted after Xiaomi's new product launch in 2022.