第 12 期 · 团队档案

十四个人,
把规范做成你能直接拿去用的东西

UED 主页背后是一支常年维护设计系统的队伍。你在交付里撞上的那句“到底该用哪个组件”“这条改动什么时候生效”,由我们把答案整理成一期期能查、能导出的说明。从 2022 年专区上线至今,每个季度都按时交出结果。

团队
14人
已发布
12期
合作团队
320余家
覆盖行业
18个

01 / 分工

遇到问题,先找对那条线

团队按职责分三条线:写规范的人、把规范落进代码的人、把改动整理成可读条目的人。三条线每周对齐一次,所以你问到的任何一条变更,都能追到是谁定的、从哪一期开始生效。

设计系统维护

6 人

负责界面规范条文、组件定义与交互范式,评审意见最后由他们把结论落笔。

适合问这个场景该用哪个组件、空态和异常怎么写、规范为什么这样定。

产出

组件清单、状态与异常说明、评审纪要、规范修订稿。

前端实现

5 人

把通过的改动写进组件库与示例工程,确认文档里写的每种状态在代码里真的存在。

适合问组件怎么接入、样式覆盖不住怎么办、升级会不会影响已有页面。

产出

组件包、示例工程、兼容说明、升级提示。

内容运营

3 人

把每轮迭代整理成条目、维护资料下载与文档模板,也负责回复专区里发来的疑问。

适合问某条记录落在哪一期、导出没成功怎么办、模板该用哪一版。

产出

版本说明、条目编号、模板包、常见问题答复。

米白纸面上散落多枚圆角档案标签,标签之间以细线连接成一张协作网络
三条线在同一张交付图上交汇:定规范、做实现、留记录。

02 / 历程

一期解决一个最疼的问题

没有一次做完这回事。每个季度我们先挑出当下最影响交付的那个麻烦,把它解决掉,再往后走。回头看,五个阶段连成了今天这个结构。

横向延展的刻度线与期号节点构图,线条由深海墨蓝渐变为荧光青,画面带轻微噪点
  1. 上线当年

    先把散落的规范收进一个入口

    那时规范分在三份文档里,同一处文案两种写法。第一版专区只回答一件事:眼下生效的到底是哪一版。

  2. 第 3 期

    组件开始被多个团队复用,状态写清楚了

    复用一多,问题就从“有没有”变成“用错”。这一期把每个组件的状态、空态和异常提示补齐,减少来回确认。

  3. 第 6 期

    改动开始分类,也允许被带走

    接入团队变多后,大家想知道这次更新会不会动到自己负责的页面。我们给每条变更标上类型,并提供导出,方便直接贴进项目周报。

  4. 第 9 期

    资料与模板收进同一处,按时间排

    此前模板散在邮件和群文件里,找最新版要问人。归到一个栏目后,按发布日期倒序,最新的排在最上面。

  5. 第 12 期 · 本季度

    六个栏目整体刷新,同时做一次全年归档

    这一期把界面规范、组件库、交互模式、视觉资产、文档模板、工具下载六处一起过了一遍,并附上全年变更索引,方便你从年初往回查。

03 / 节奏

双周推进,季度收口

每两周交一次能用的改动,每季度把这些改动汇总成一期说明。你在页面上读到的一条记录,背后是两轮讨论加一次回归检查。四个环节里,我们负责哪些事情,写在这里。

  1. 环节 01

    评审

    业务团队带着真实页面来,一条一条过。我们指出冲突和重复的地方,把结论写成可执行的修订条目,当场定下由谁改。

  2. 环节 02

    交付

    前端实现把通过的改动写进组件库和示例工程,附上升级提示;文档模板同步更新,你拿到的是可以直接用的版本。

  3. 环节 03

    走查

    新版本上线后照单检查:状态、空态、异常提示逐项比对。发现偏差按类型记为修复,跟着下一次迭代一起发出去。

  4. 环节 04

    验收

    业务团队确认当前版本可用,我们把这一轮结果归档进本期说明,未完成的部分转入下一期待办。

评审、交付、走查、验收这四类场景都有配套模板,共 32 套,在版本专区的资料下载栏目里按发布日期找最新一版就行。

04 / 分布

同样的规范,十八个行业各疼各的

我们服务过 320 余家合作团队,行业跨度从金融到制造。规范的内容是共通的,但每个行业最先要解决的麻烦不一样,这也决定了他们最先翻哪一栏。

金融

改动要能追到人,审计时拿得出记录

零售

大促前密集改版,多端必须同时上线

教育

前台与后台两套密度,同一批人维护

制造

设备屏小、现场光线差,控件要够大够稳

政务

项目周期长,交接时文档必须完整

其他行业

公共组件直接复用,按业务需要裁剪

金融:先要留得住痕

内审会问到某处界面改动是谁、哪一期定的。我们的做法是每条变更都挂上栏目、类型与期号,导出成 CSV 直接交给合规同事,省掉手工整理。

零售:先要对得齐端

大促前的改版常常两周内走完。组件库现收录 148 个组件,其中 96 个备有中英文说明,多端同步时按栏目筛出最近三个月的改动,一次对齐。

制造:先要现场看得清

设备端屏幕窄、环境光复杂,交互模式栏目里整理的 27 组任务流,每组都带状态说明与异常处理建议,是这类团队翻得最多的一栏。

05 / 共建

从看清现状,到你自己接得住

自 2020 年起我们对外做设计系统共建,到现在完成 74 个项目。走法基本固定为三段,多数团队在两个月左右完成前两段,之后按季度回访。

三段弧形路径从左下延伸到右上,每段末端是一枚胶囊形阶段标识
  1. 01

    评估现状

    看现有的规范、组件与交付流程,找出重复最多、冲突最密的地方。通常一到两次访谈,再加一份梳理清单,双方先对困难达成一致。

  2. 02

    建立栏目

    按你的业务重排栏目结构,定好条目类型与编号规则,先把最常被问到的内容填进去。这一步结束时,你的团队已经能查到东西。

  3. 03

    移交维护

    带你的同事完整跑一轮迭代,从评审到归档走一遍。之后按季度回访,需要长期跟进的再单独约定。

不确定自己处在哪一段?把当前最头疼的两三个场景说清楚,我们就能判断该从哪开始。

跟我们说说你的现状

06 / 原则

我们不放过的五件事

这些是团队内部的共识,也是你在使用专区时会直接感受到的做事方式。

  • P1

    每期都有编号和固定地址

    第 1 期到第 12 期各有一个长期可用的链接,写进周报、邮件或需求单里都不会失效,回头查也找得到。

  • P2

    类型必须标出来

    每条变更标为新增、优化、修复、下线之一,并挂上所属栏目与期号。扫一眼就能判断这次更新会不会动到你负责的页面。

  • P3

    能拿走的才算数

    每期都提供导出,支持 CSV 与 Markdown;单次最多 500 条,超出就按栏目或类型分批取。导出后放进自己项目里的用法,写在使用条款中。

  • P4

    打开就能看,不用装东西

    在 Chrome 90+、Edge 90+、Firefox 88+、Safari 14+ 及以上版本的浏览器里直接进入,不需要额外装客户端或插件;首屏平均 1.1 秒打开。

  • P5

    让每个人都能读完

    所有页面支持键盘操作与 200% 文字缩放,正文对比度不低于 4.5:1。规范是给整支团队看的,不是给视力好的人看的。

下一步

先看一期,再决定要不要聊

第 12 期刚刷新完,六个栏目的改动都在里面。第一次来的话,也可以先看一遍使用指南,知道东西放在哪再翻。