收藏！！50个可供学习和参考的交互/服务Design System设计系统
设计系统 Design System 是一套为了避免冗余，在多个页面和渠道中建立通用语言和美学来大规模管理设计的指南。设计系统包含重要的用户模式集合，如系统功能、视觉设计、图标等。
设计系统不仅是一个可以为我们提供丰富资源的平台，也是一个用于创造用户体验的学习工具。设计师可以通过研究设计系统中的设计模式，来获得项目的最佳呈现方式，进而做出设计判断。🙋♂️🙋♂️下面 UXD 为同学们推荐了 50 个常用的设计系统，帮助大家更好地把握作品集项目的整体视觉语言，从而提升做项目的效率。
最初的设计系统
# The Original Gangsters (OG) of Design Systems
✍️✍️最初的设计系统指的是 Material Design 和 Human Interface Guidelines。OG 是当数字移动操作系统首次出现在智能手机上时的早期设计系统的开端，设计师们能够从中学到许多有用的设计实践，时至今日，OG 依然是设计系统的黄金标准。
#01
Google’s Material Design
👉 网址：https://material.io/
Google 的 Material Design 3.0 和 2.0 是一个统一的设计系统，它结合了用于打造数字体验的理论、资源和工具。
#02
Apple‘s Human Interface Guidelines
👉 网址：https://developer.Apple.com/design/human-interface-guidelines/
Human Interface Guidelines 将引导你了解基本的应用程序结构组件，获取深入的信息和 UI 资源，例如应用程序架构、系统功能、视觉设计、图标等。
#03
Atlassian’s Design Language
👉 网址：https://atlassian.design/
Atlassian 的设计语言和战略规划组件有助于创建绝佳的企业体验。Atlassian 最好的功能是每个部分都包含一个代码示例，可供开发人员进行检查和分析。
#04
GitLab’s Pajamas Design System
👉 网址：https://design.gitlab.com/
GitLab 是一个社区驱动的开源项目，拥有超过 3000 名贡献者。为了确保每个人都能有信心为 GitLab 做出贡献，Pajamas Design System 为每个人都提供了合适的资源和技术。
#05
Mozilla Firefox’s Photon Design System
👉 网址：https://design.firefox.com/photon/
Photon 是一种 Firefox 设计语言，它允许你在所有平台上为商品创建现代的、直接的、吸引人的体验。
#06
Mailchimp’s Patterns
👉 网址：https://ux.mailchimp.com/patterns/color
MailChimp Pattern Library 是公司向响应更快、更流畅、更友好的软件过渡的结果。
#07
HUDL’s Uniform Design System
👉 网址：http://uniform.hudltools.com/
设计和编码共同创造了将 Hudl 的产品整合在一起的系统。
#08
Thumbtack Thumbprint
👉 网址：https://thumbprint.design/
Thumbprint 是一个使用整合、标准化和文档来简化设计和开发的设计系统。
#09
Lonely Planet’s Rizzo Style
👉 网址：http://rizzo.lonelyplanet.com/
Rizzo 的创建专注于降低复杂性和提高重复使用性。
#10
IBM’s Carbon Design Language
👉 网址：https://www.carbondesignsystem.com/
Carbon 是 IBM 的开源产品和体验设计系统。工作代码、设计工具和资源、人机界面原则以及活跃的贡献者社区构成了基于 IBM 设计语言的系统。
#11
Stack Overflow’s Stacks
👉 网址：https://stackoverflow.design/
Stacks 为你提供了在 Stack Overflow 中呈现一致、连贯的体验所需的一切，包括产品和电子邮件。
#12
Audi’s UI
👉 网址：http://www.audi.com/ci/en/guides/user-interface/introduction.html
奥迪 UI 的目标是开发从应用程序到车辆的各种解决方案和均衡的全系统用户体验。
#13
BBC’s Global Experience Language (GEL)
👉 网址：http://www.bbc.co.uk/gel/
BBC 的共享设计框架 GEL 使我们能够在所有数字服务中创建一致且令人愉快的用户体验。
#14
HubSpot’s Canvas Design System
👉 网址：https://canvas.hubspot.com/
这个集合展示了 Hubspot 设计系统的组件，从颜色和排版到基于反应的功能和数据可视化工具。
#15
Ant Finances’ Ant Design
👉 网址：https://ant.design/
为了更好的企业应用用户体验，蚂蚁金融创建了一个具有确定性、意义性、增长性和自然性的设计系统。
#16
Shopify’s Polaris
👉 网址：https://polaris.shopify.com/
Polaris 的设计系统有助于所有 Shopify 商家的协作，以创造出色的体验。
#17
Hewlett Packard’s Grommet Design System
👉 网址：http://grommet.io/
Grommet 提供将想法变为现实所需的所有支持、组件和设计资源。
#18
Marvel’s Styleguide
👉 网址：https://marvelApp.com/styleguide/
Styleguide 是用作 UI 组件、品牌指南、品牌资产、代码片段、开发人员指南等的集中存储库。
#19
Zendesk's Garden
👉 网址：https://garden.zendesk.com/
Zendesk Garden 是该公司精选的美观的用户界面集合。Zendesk 通常会在 Garden 中为 Zen 产品开发用户界面组件。
#20
Salesforce’s Lightning Design System
👉 网址：https://www.lightningdesignsystem.com/
Lightning 设计系统允许你使用 Salesforce 的本地模式和最佳实践创建成功的业务体验和自定义应用程序。
#21
Gojek’s Asphalt
👉 网址：https://asphalt.gojek.io/
Gojek 团队将“Foundation”和“Component”结合，共同创造惊人的用户体验。其中 “Foundation” 介绍 Asphalt 的原理，而 “Component” 则列出组成 Asphalt 的各个部分。
#22
Kiwi’s Orbit
👉 网址：https://orbit.kiwi/
Kiwi's Orbit 组件集合了界面元素，可以在整个 Orbit 设计系统中反复使用。
#23
Microsoft’s Office UI Fabric
👉 网址：https://developer.microsoft.com/en-us/fabric
Microsoft 的一系列 UX 框架可以用于创建优质的跨平台应用程序，共享代码、设计和交互行为。
#24
Redhat’s PatternFly
👉 网址：https://www.patternfly.org/v4/
PatternFly 是一个开源的设计系统，用来驱动一致性和统一团队。
#25
PegaSystem’s Pega Cosmos
👉 网址：https://design.pega.com/
PegaSystem 创建的设计系统用于构建企业应用程序的 UX/UI 模板、模式和完整的组件库。
#26
Australian government’s Design System
👉 网址：https://designsystem.gov.au/
Australian government 系统采用了最高的可用性和可访问性标准，有助于按照数字服务标准为所有用户提供一致的体验。
#27
Mozilla’s Protocol
👉 网址：https://protocol.mozilla.org/
Protocol 是 Mozilla 和 Firefox 网站的设计系统。它建立了一种通用的设计语言，提供了可重复使用的编码组件，并概述了内容和可访问性的高级指导原则。
#28
Quickbooks’ Design System
👉 网址：https://designsystem.quickbooks.com/
Intuit 的设计师和设计领导者一直在致力于创建耐用且适应性强的组件，这些组件将在所有 Intuit 中变得统一。
#29
Ubuntu’s Vanilla
👉 网址：https://vanillaframework.io/
Ubuntu’s Vanilla 设计系统由 Canonical Web 团队用 Sass 编写。Vanilla 包含响应式 CSS 网格、HTML 元素的基本样式以及可以扩展的关键模式或其他模式选择。
#30
Workday’s Canvas
👉 网址：https://design.workday.com/
Canvas 是一个开源设计系统，由可重复使用的UI元素、资源和指导原则组成，使团队能够创建可扩展的统一体验。
#31
Yelp’s Styleguide
👉 网址：https://www.yelp.com/styleguide
Cookbook 是 Yelp 的数字体验设计系统，遵循 Brad Frost 的原子设计方法。系统通过使用 Yelp’s Styleguide 独有的风格配料、成分配方来进行食物类比。
#32
Airbnb’s Design System
👉 网址：https://airbnb.design/building-a-visual-language/
Airbnb 团队为 DLS 设定的目标是创建一种更美观、更易于理解的设计语言。Airbnb’s Design System 通过定义明确和可重复使用的组件来提高效率。
#33
Adobe’s Spectrum
👉 网址：https://spectrum.adobe.com/
由 Spectrum 提供组件和工具，帮助产品团队更高效地工作，使 Adobe 的应用程序更具凝聚力。
#34
Liferay’s Lexicon
👉 网址：https://lexicondesign.io/
Lexicon 是一种设计语言，它在 Liferay 产品生态系统中为构建界面提供了一个通用框架，从而为用户提供令人满意和统一的体验。
#35
Microsoft’s Fluent
👉 网址：https://www.microsoft.com/design/fluent/
Fluent 是一个开源、跨平台的设计系统，它为设计师和开发人员提供了创建引人入胜的产品体验所需的框架，包括可访问性、国际化性等。
#36
BuzzFeed’s Solid
👉 网址：https://solid.buzzfeed.com/
Solid 是 BuzzFeed 的 CSS 样式指南。受 Basscss 等框架的影响，Solid 使用原子 CSS 来快速创造原型和开发功能，提供一致的样式选项，以及创建新布局和设计的灵活性。
#37-#50
另外14个设计系统的网址我们汇总在了一起，感兴趣的同学可以自己点进去了解下哦！
Buffer Style-guide
https://buffer.com/style-guide
Uber’s Base Web
https://baseweb.design/
MongoDB’s Design System
http://mongodb.design/#/ui-design-system/welcome
Mixpanel’s Design System
https://design.mixpanel.com/
Bulb’s Solar Design System
http://design.bulb.co.uk/
ServiceNow’s Design System
http://styleguide.servicenow.com/#!/
Oracle’s Alta
https://www.oracle.com/webfolder/ux/middleware/alta/index.html
General Electric’s Predix Design System
https://www.predix-ui.com/
Flexport’s Latitude
https://www.flexport.com/design
SAP’s Fiori
https://experience.sap.com/fiori-design-web/
SAP’s Fiori Fundamentals
https://sap.github.io/fundamental/
Segment’s Evergreen
https://evergreen.segment.com/
Elastic’s UI Design System
https://elastic.github.io/eui/#/
VMWARE’s Clarity Design System
https://vmware.github.io/clarity/
更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手，还可获取讲座直播哦~
|福利大放送 | WELFARE
对于设计初学者，完成从0开始创作几乎是不可能的，就像学习过程中书读百遍其义自见一样。有了大量的积累，才能在脑海里建立素材库，这些素材库能帮助同学们完成最初的设计想法积累，基于这样的基础再进行个性化的创作，最终才能做出高质量的作品集。全球院校最新作品集免费拿！添加小助手即可获取：
UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外，我们提供不定主题的公开课和内部小组课，教学计划课程由三大部分组成，包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。
本文版权归UXD尤克斯所有
部分图片来自于网络
如有侵权请与我们联系
