NORDA® Design Center
Annual Release · 年度发布

设计系统

构建一致性的语言

Building a language of consistency.

主讲 / Speaker陈思远 · 设计总监
日期 / Date2026.11.18
地点 / Venue上海 · 西岸艺术中心
Vol. 03Edition 2026
3.0
NORDA DesignContents · 目录Design System 3.0 / 

目录

Contents

本次发布将依次回答五个问题:
为什么重建、依据什么、如何构建、
带来了什么,以及下一步去向何方。

  1. 01回顾Why we rebuiltP.04
  2. 02原则PrinciplesP.05
  3. 03架构ArchitectureP.06
  4. 04成果ImpactP.08
  5. 05路线Roadmap 2027P.09
NORDA DesignManifesto · 宣言Design System 3.0 / 

一致性不是限制,而是自由的前提。

Consistency is not a constraint —
it is the precondition of freedom.

— 设计系统 3.0 团队宣言

NORDA Design01 — 回顾 RetrospectiveDesign System 3.0 / 

三年增长,留下了 47 种按钮。

缺乏统一规范,每个团队都在重新发明轮子 —— 设计债以每季度 14% 的速度累积。

2023 · v2.x47 种变体
→
2026 · v3.06 种
主要操作 次要操作 描边按钮 弱化按钮 文字链接 + 图标按钮
12条产品线并行演进
340+设计师与工程师
1,820个重复实现的组件
14%设计债季度增长率
NORDA Design02 — 原则 PrinciplesDesign System 3.0 / 

四条设计信条

Four principles behind every decision

01

清晰Clarity

信息层级先于装饰。每一个元素都必须回答:它帮助用户理解了什么?

02

系统Systematic

以令牌驱动决策,用规则替代个人偏好,让规模化成为可能。

03

克制Restraint

少即是多,但少不等于空。只保留能够被证明有价值的东西。

04

包容Inclusive

默认满足 WCAG 2.2 AA,为每一种能力、语言与设备而设计。

NORDA Design03 — 架构 ArchitectureDesign System 3.0 / 

从令牌
到模板

四层架构,单向依赖。上层只消费下层 —— 修改一次令牌,变更即可同步至全部 12 条产品线与 3 个平台。

↑单向依赖 · One-way dependency
L4
模板Templates
页面级布局与关键流程
12
L3
模式Patterns
表单、导航、数据展示
38
L2
组件Components · 从原子到复合组件
126
L1
令牌Tokens · 色彩、字体、间距、圆角、动效
412
NORDA Design03 — 基础令牌 FoundationsDesign System 3.0 / 

字体与色彩

AaSignal Red#E3221B · color.brand.signal
Ink#111110
Paper#F2F1EC
Grey 600#5E5D58
Grey 300#C8C7C0
Spacing · 8pt 基准
8
16
24
32
48
64
96
NORDA Design04 — 成果 ImpactDesign System 3.0 / 

12 个月,组件采用率从 18% 升至 92%

100%
75
50
25
v3.0 Beta
v3.0 正式版
0
25.1125.1226.0126.0226.0326.0426.0526.0626.0726.0826.0926.10
−38%设计到开发交付周期Design-to-dev lead time
2.4×前端页面开发效率Front-end velocity
−61%UI 相关线上缺陷UI-related incidents

数据来源:NORDA 组件遥测平台,2025.11 – 2026.10,覆盖 12 条产品线的生产环境页面。

NORDA Design05 — 路线 RoadmapDesign System 3.0 / 

2027:从工具,到基础设施

Q1进行中

令牌流水线

Token Pipeline
  • Figma 变量与代码双向同步
  • 主题切换零代码接入
  • 暗色模式全量覆盖
Q2

无障碍 2.0

Accessibility
  • 自动化对比度检测
  • 屏幕阅读器全流程验证
  • 减弱动效模式
Q3

智能辅助

AI-assisted Design
  • 基于规范的布局生成
  • 设计稿自动走查
  • 文案语气一致性校验
Q4

开放生态

Open Ecosystem
  • 核心组件对外开源
  • 合作伙伴主题市场
  • 首届设计系统大会
NORDA Design
提问与交流 · Discussion
Q&A

谢谢

Thank you.

邮箱 / Maildesign@norda.com
文档 / Docsnorda.design/system
社区 / Community#design-system-3
组件库 / LibraryFigma · v3.0.2
← → 翻页 · F 全屏 · O 总览 · ⌘/Ctrl+P 导出 PDF