设计体系 · 控件设计 · 设计规范
此次项目从22年6月开始至23年3月发布，历经近1年，扭转了控件规范由一人当家做主&大量规则隐藏且不准确的局面，并正式组建7人规范小组共同维护MIUI设计体系，被称为MIUI史上规范体系最重大、最具有意义的一次进化。
业务负责人
发现问题&定义目标
设计40人工作坊
组织&设计调研
定义规范文档框架
优化Figma框架
UX Designer 6
SDK Developer 6
2021年12月开始交接，交接内容包括设计规范网站，Figma控件库，及一些控件SDK积累待解的bug。
以FIGMA为例：
经过一个月的交接工作，发现作为服务几乎整个小米的客服苦不堪言：
Figma在单page中堆积了近30个控件/布局/通用规则，有的控件有布局规则、使用按钮，但大部分都没有；
有描述控件规范的网站，但很多规则未被即时更新，也未被充分宣传，大家并不会去看；
大部分控件的规则无论是在网站还是Figma中，都未被完整描述和体现；
长期积累大量未解的bug，大部分是由于控件未适配大字体/多语言导致的bug；
作为负责人要回答来自小米的所有业务的提问，大量规则隐藏/不准确只能当场询问开发线上规则。
🤔️ 项目难点：
业务规模大。需要维护近30个控件，且实际隐含了相当多未被呈现的规则；
对接范围广。基本覆盖小米的大部分业务线，常需要作为客服为大家答疑解惑，工作较为零碎和被动；
对接职能广。包括小米大部分的设计、产品、开发人员，沟通能力要求高，且需要一些前端知识；
团队刚成立。在带领工作经验比我多很多的同事们时，需要重新建立信任关系，前期配合难。
大家都是Part-time job。我以及后期加入的其他同事都是一半有自己负责的业务，一半时间做规范。
自由发挥。大部分领导并不使用Figma，所以并不了解真正使用控件&规范的下属们的工作环境。因而自由发挥空间较大，只要能证实价值，就可以开干。
竞品调研
设计体系是所有大厂都会面临的问题，所以我与另外两位同事开始调研了苹果、谷歌、IBM三家大厂的设计规范，并将其与MIUI现有的规范网站作对比，对比后发现：
从大范围上讲，MIUI的规范仅涉及了通用视觉 & 控件两部分。
标蓝为MIUI已有的内容，标灰的部分则是另外三家大厂均有而MIUI没有的内容。
视觉设计部分，仅在字体、颜色及部分动画场景案例方面有相关的内容，缺失很多详细规则
如，颜色仅存在在Figma Style中，并没有指导意义。黑暗模式仅把所有控件洗了一遍，并没有通用指导规则。
控件设计仅展示了常态下的UI样式，并没有写明实际约束的数值，更没有详细的交互规则。
如，弹窗是一个较为灵活的容器，容器中的排版规则并不明确，大家基本自由发挥。
经过对比，发现缺少的内容实在多。
并不知在这样的环境下，设计师都是如何工作的，且实际在调用的业务开发又是什么样的工作状态。
所以我们开始了用户访谈。
用户访谈
为了缩小课题范围，我们将重点落在了目前我们更关注且问题频发的场景上：控件的日常使用情况
我们首先访谈了3位业务设计师，及3位业务开发。访谈内容以设计师举例：
经访谈发现以下四大类问题：
为了验证这6大类问题的普遍性，明晰问题的优先级，并收集更多建议与期望。
举办了一次近40人的workshop，包含了大部分的业务设计师。
在过程中，除了介绍我们的发现外，还将每个问题打印出来请大家补充并投票：
总结问题&定义目标：
我们将问题和票数记录下来后，我们开展了多次脑暴，最终决定将以下四个主要问题和解法作为年度优化目标：
定义规范评价指标：
评价指标主要用于以下三个方面：
指导规范文档的撰写，保证其合格性；
对比现状与优化方案的差异，保证未来铺开撰写的有效性；
用于未来的周期性的优化迭代，作为长期评价指标，供用户长期提出建议。
我们基于最初workshop收集到的需求及小范围review收集到意见，总结出了以下5个要点：
大范围Review：
我们依据评价指标，针对性地在文档和Figma中补充和删减了内容，并将指标转化为了用户可理解的问卷形式，邀请了设计、研发、产品各10人体验新版的弹窗规范文档&Figma问卷，经过指标化测试，新版规范的满意度达8.9分（N=30）。
最终结果：
由于测试结果符合要求，在敲定了一系列制作规范的规范后，最终我们选取了9个高频使用的控件作为1期整改内容，与SDK研发紧密合作对齐了所有规则，总结成果如下：
建立设计规范知识库
我们抛弃了原有难更新的网站，选取了飞书知识库作为MIUI设计规范的集中地：
与多位设计师共同建立了包括：
MIUI设计规范介绍页
新增按钮/开关/列表/浮窗/近手弹窗/加载/空页面/输入框的规范文档，详细包括：
链接 & 概述
类型 & 使用场景
结构解析
响应式变化规则
交互规则
注意事项
附录（更新日志/ MIUIX覆盖类型/ 自定义能力的特殊说明）
重构Figma
针对Figma，修改了原有页面结构，新增索引页，分page显示控件;
重新整理了颜色规范，并将颜色/字体/字号/圆角合为通用设计规范;
针对按钮/开关/列表/浮窗/近手弹窗/加载/空页面/输入框 重新布局和补全内容，优化了Autolayout&Variants功能。
由于全新控件规范文档&figma的发布刚好与新的颜色规范、字号规范（保密）共同发生，规范组还借此机会纳入了design token的概念，在原有基础上明确了不同系统颜色下，默认态、按压态、hover态、不可按压态的规则及使用场景，修正了所有颜色调用不正确的figma设计稿。
此次改动涉及小米全线业务，工作量巨大且每天都在面临新的问题，对我个人来说成长显著。也造就了我对规范相关任务更为谨慎、严谨、负责的态度。
Sherry's Portfolio