设计导航(设计体系|设计导航:设计体系 / 设计规范 / 组件库)



? 站点 Design Systems Repo 设计系统相关案例、文章、工具、演讲的合集,资源非常全面!


Figma ? Design Systems Figma 创建的网站,发布了很多设计系统相关的文章,包含设计、开发方法等等。


Jun ? DesignSystem.cc 产品设计师 Jun 设计开发的网站,收集了设计系统相关的教程、文章、书籍和案例。




? 演讲 Jina AnneClarity Conf Jina Anne 发起的设计系统主题大会,有很多嘉宾分享来关于设计系统的方方面面。


UXPin ? UXPin Virtual Summit UXPin 主办的设计系统主题峰会,有 IBM Carbon、Salesforce Lightning 等很多知名设计系统背后的故事。




? 工具 zeroheight 用于记录设计系统,包括创建在线 styleguide、管理组件代码、存放设计资源等等。




? 文章、书籍 ?Brad Frost ? 《Atomic Design》 原子化设计,构建设计系统的核心指导理论,由 Brad Frost 提出。


?Alla Kholmatova ? 《Design Systems》 作者 ?Alla Kholmatova,向我们介绍了设计体系的基础构成和创建方法等等。


?C7210 ? 设计体系相关文章 UX 设计师 C7210 发布的系列文章,包含设计体系、Sketch Library 功能等方面的内容。


?Airbnb Design ? Building a Visual Language 来自 Airbnb Design 官方博客,介绍了设计系统的价值、创建思路等等方面的内容。


Alibaba Fusion Design ? 如何为 UX 团队挑选一个适合的设计系统 文中主要介绍了设计系统的发展历程(Design Guideline - DPL - Design System)、设计系统的类型及适用场景。


孙浩 ? Scope Lane 设计师孙浩的知乎专栏,翻译了国外一些设计系统相关的文章,介绍了创建设计系统的技巧、方法。


阅文 YUX ? 视觉工作流优化 —— 如何构建组件库 阅文 YUX 的文章,分享了构建产品组件库的思路和方法,很受用!


Rojcyk ? 我们如何使用 Figma 处理 Kiwi.com 设计体系 作者 Rojcyk 介绍了他在加入 Kiwi.com 的移动端设计团队之后,是怎么使用 Figma 来构建设计体系的。




? 在线设计系统、设计规范、组件库 Apple ? Human Interface Guidelines Apple 官方的人机交互指南,除提供 Apple 平台相关 UI 资源外,还包含了一系列的设计原则、设计建议等等。


Google ? Material Design Google 的 Material Design 设计系统,包含设计指南、设计与开发组件等等。


Microsoft ? Fluent Design System Microsoft 的 Fluent 设计系统,包含用于在 Windows 10 上创建应用体验的设计准则与 UI 代码示例。


Microsoft ? Office UI Fabric Office 的官方前端框架,提供了使用 React 构建的组件,以及用 Adobe XD 创建的控件、布局模板等等。


SAP ? Fiori Design Guidelines SAP 公司提供的一套 Web 应用程序的用户界面设计指南,其中的 UI 元素使用指南真是相当详尽了。


Salesforce ? Lightning Design System Salesforce 公司的 Lightning 设计系统,包含了用于创建符合 Salesforce Lightning 原则、设计语言和最佳实践的用户界面的资源。


IBM ? Carbon Design System IBM 的开源设计系统,以 IBM Design Language 为基础,包括开源代码、设计工具和资源、人机界面指南等内容。


Atlassian ? Atlassian Design Atlassian 依据 Atlassian Design Guidelines 构建的一套 UI 组件库。


Sipgate ? Unser Design Sipgate 模式库建立于 2015 年,但一年之后,团队发现由于产品团队之间缺乏沟通而导致加入了太多的组件。最近,他们正在开发一个新的模式库,以实现在多个产品网站上统一设计语言的目标。


TED ? TED Swatches TED 的设计系统,由几个 UX 设计师和前端开发人员组成的小团队负责。基于对他们的 patterns 的理解的共识,他们将这些模式 patterns 以一种简单的方式整理了出来。


Eurostar ? GLU 由 Eurostar 的一个专门小组负责,系统中的组件是真的按「原子化设计(Atomic Design)」进行组织的,包括 Atoms 原子、Molecules 分子、Organisms 有机体、Templates 模板、Pages 页面。


Yahoo! ? PURE 雅虎公司出品的一组轻量级、响应式纯 CSS 模块,适用于任何 Web 项目。


Intuit ? QuickBooks Design System Intuit 的设计系统,包含了各种组件和设计原则说明,但是其中部分资源只有 Intuit 内部员工才能访问、下载。


GitHub ? Primer Github 的在线设计系统 Primer,包含各种设计与代码资源、工具以及设计指南。


蚂蚁金服 ? Ant Design 服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。


阿里巴巴 ? ICE Design 飞冰是一套基于 React 的中后台应用解决方案,由淘宝前端团队发起,与淘宝 UED 及后端开发同学共同打造,旨在「提高中后台系统的开发效率」。


阿里巴巴 ? Fusion Design Alibaba Fusion Design 是一套旨在全面提升设计、开发效率的工作方式。 通过协助企业构建设计系统,提供系统化工具协助设计师、前端使用设计系统,提供一站式设计项目协助平台,打通互联网产品从设计到开发的工作流。


滴滴出行 ? Cube-UI 滴滴出行从内部组件库精简提炼而来的移动端组件库,基于 Vue.js 实现。


微信 ? WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。


Google ? Flutter Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。Flutter 兼容现有的代码,免费并且开源,在全球开发者中广泛被使用。


WeWork ? Plasma WeWork 为他们的内部数字产品创建的设计系统,用以满足他们的业务需求。其创建过程对我们相当有参考意义。


饿了么 ? Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。


Adobe ? Spectrum Adobe 的设计系统 Spectrum。


Teambition ? Clarity Design Teambition 的设计系统 Clarity Design。


TalkingData ? iView 一套基于 Vue.js 的高质量 UI 组件库。


UX Power Tools UX Power Tools 同时包含 Web 与移动端的设计系统,Sketch 组件比较全面、完整,且包含共享样式、支持内容自适应等,还有 Style Guide。但是,收费,可在 Gumroad 上购买。


Buninux ? Frames | Buninux ? Plaster Frames 和 Plaster 分别是针对 Web 和移动端的设计系统,这 2 个设计系统最大的特点是,提供了大量的模板页面,且支持内容自适应。但也是收费的。


Rojcyk ? iOS Blueprint iOS Blueprint 是一个专注于 iOS 的设计系统,业界知名度相当高。除了基本的 Library 之外,也提供了一些通用模板。这个也是收费的,可在 Gumroad 上购买。


janlosert ? Nested Symbols & Auto-Updating Styleguides 累了,不写了。


GE Digital ? Predix 主要针对 Web 应用的设计系统,组件库也不是很全,Sketch 中也没有共享样式等,相对而言,比较粗糙。


有赞 ? Zan Design Zent 是有赞的 PC 端组件库,基于 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件,这些组件都已经在有赞的各类 PC 业务中使用。
Vant 是有赞的移动端 Vue 组件库,Vant Weapp 是 Vant 的小程序版本,这两者基于相同的视觉规范,提供一致的 API 接口。


Semantic ? Semantic UI 一个具有响应性的 UI 组件框架,支持网站在多个设备上的扩展。


Liferay ? Lexicon | Liferay ? Clay Lexicon 是 Liferay 提出的一种设计语言 ,包含用户界面组件、模式和用例等指南。Clay 是以 Lexicon 为基础实践的一套 Web 应用组件库 Clay,包含大量代码示例。


GOV.UK ? GOV.UK Design System 英国内阁办公室的 GDS 做的一套设计系统,UI 样式看起来有点乱,但其中一些组件的使用方法也可以看一看。


Material-UI 基于 Material Design 的 React UI 框架。


上海畅控 ? Admui 企业级通用管理系统的快速开发框架,注册登录后可进行在线体验。


MDUI 一套用于开发 Material Design 网页的前端框架。


云适配 ? Amaze UI 【设计导航(设计体系|设计导航:设计体系 / 设计规范 / 组件库)】一个轻量级、Mobile first 的前端框架, 基于开源社区流行前端框架编写。


新浪 UED 的 HIG 新浪 UED 为新浪产品编写的人机交互指南,包括 PC、iOS、Android、HTML5 等各个平台的设计原则,还有新浪的 VI 体系介绍,相当全面了,推荐阅读、学习(但有些内容没有更新,可能现在已经不适用了)。


饿了么 ? Mint UI 基于 Vue.js 的移动端组件库, CSS 和 JS 组件等。


Layui ? layuiAdmin 由 layui 自建的一套前端架构实现而成的通用型后台管理模板系统。


[Akveo ? Eva Design System](https://eva.design/](https://eva.design/) Akveo 设计的移动端和 PC 端的组件库,提供了 Sketch 和 Figma 的组件库资源,Figma 组件库和 Sketch 暗黑模式组件库需要购买使用。


[Julien Rioux ? Flawwwless ui](https://eva.design/](https://eva.design/) 全栈开发工程师 Julien Rioux 设计开发的 UI 组件库。


Progress ? Kendo UI JavaScript UI 组件的最终集合,包含用于 jQuery、Angular、React 和 Vue 的库,用于快速构建响应式 Web 应用。




附:?以下是网页设计资源相关网站推荐
?Website Style Guide Resources ?网站设计指南合集,包括组件库示例,关于设计指南的文章、书籍以及工具等等。


?Envato ? HTML Admin Website Templates ?Envato 的 envatomarket 上的网站设计模板合集。




以上内容整理自网络,仅作为个人学习笔记使用。感谢这些设计团队和所有分享想法与经验的人~





    推荐阅读