设计导航:设计体系 / 设计规范 / 组件库
✧ 站点
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 上的网站设计模板合集。
以上内容整理自网络,仅作为个人学习笔记使用。感谢这些设计团队和所有分享想法与经验的人~