設(shè)計系統(tǒng) Design System 是一套為了避免冗余，在多個頁面和渠道中建立通用語言和美學(xué)來大規(guī)模管理設(shè)計的指南。設(shè)計系統(tǒng)包含重要的用戶模式集合，如系統(tǒng)功能、視覺設(shè)計、圖標(biāo)等。

設(shè)計系統(tǒng)不僅是一個可以為我們提供豐富資源的平臺，也是一個用于創(chuàng)造用戶體驗的學(xué)習(xí)工具。設(shè)計師可以通過研究設(shè)計系統(tǒng)中的設(shè)計模式，來獲得項目的最佳呈現(xiàn)方式，進而做出設(shè)計判斷。???♂????♂?下面 UXD 為同學(xué)們推薦了 50 個常用的設(shè)計系統(tǒng)，幫助大家更好地把握作品集項目的整體視覺語言，從而提升做項目的效率。

最初的設(shè)計系統(tǒng)

#?The Original Gangsters (OG) of Design Systems

????最初的設(shè)計系統(tǒng)指的是?Material Design?和?Human Interface Guidelines。OG 是當(dāng)數(shù)字移動操作系統(tǒng)首次出現(xiàn)在智能手機上時的早期設(shè)計系統(tǒng)的開端，設(shè)計師們能夠從中學(xué)到許多有用的設(shè)計實踐，時至今日，OG 依然是設(shè)計系統(tǒng)的黃金標(biāo)準(zhǔn)。

#01
Google’s Material Design

?? 網(wǎng)址：https://material.io/
Google 的 Material Design 3.0 和 2.0 是一個統(tǒng)一的設(shè)計系統(tǒng)，它結(jié)合了用于打造數(shù)字體驗的理論、資源和工具。

#02
Apple‘s Human Interface Guidelines

?? 網(wǎng)址：https://developer.Apple.com/design/human-interface-guidelines/
Human Interface Guidelines 將引導(dǎo)你了解基本的應(yīng)用程序結(jié)構(gòu)組件，獲取深入的信息和 UI 資源，例如應(yīng)用程序架構(gòu)、系統(tǒng)功能、視覺設(shè)計、圖標(biāo)等。

#03
Atlassian’s Design Language

?? 網(wǎng)址：https://atlassian.design/
Atlassian 的設(shè)計語言和戰(zhàn)略規(guī)劃組件有助于創(chuàng)建絕佳的企業(yè)體驗。Atlassian 最好的功能是每個部分都包含一個代碼示例，可供開發(fā)人員進行檢查和分析。

#04
GitLab’s Pajamas Design System

?? 網(wǎng)址：https://design.gitlab.com/
GitLab 是一個社區(qū)驅(qū)動的開源項目，擁有超過 3000 名貢獻(xiàn)者。為了確保每個人都能有信心為 GitLab 做出貢獻(xiàn)，Pajamas Design System 為每個人都提供了合適的資源和技術(shù)。

#05
Mozilla Firefox’s Photon Design System

?? 網(wǎng)址：https://design.firefox.com/photon/
Photon 是一種 Firefox 設(shè)計語言，它允許你在所有平臺上為商品創(chuàng)建現(xiàn)代的、直接的、吸引人的體驗。

#06

Mailchimp’s Patterns

?? 網(wǎng)址：https://ux.mailchimp.com/patterns/color
MailChimp Pattern Library 是公司向響應(yīng)更快、更流暢、更友好的軟件過渡的結(jié)果。

#07
HUDL’s Uniform Design System

?? 網(wǎng)址：http://uniform.hudltools.com/
設(shè)計和編碼共同創(chuàng)造了將 Hudl 的產(chǎn)品整合在一起的系統(tǒng)。

#08
Thumbtack Thumbprint

?? 網(wǎng)址：https://thumbprint.design/
Thumbprint 是一個使用整合、標(biāo)準(zhǔn)化和文檔來簡化設(shè)計和開發(fā)的設(shè)計系統(tǒng)。

#09
Lonely Planet’s Rizzo Style

?? 網(wǎng)址：http://rizzo.lonelyplanet.com/
Rizzo 的創(chuàng)建專注于降低復(fù)雜性和提高重復(fù)使用性。

#10
IBM’s Carbon Design Language

?? 網(wǎng)址：https://www.carbondesignsystem.com/
Carbon 是 IBM 的開源產(chǎn)品和體驗設(shè)計系統(tǒng)。工作代碼、設(shè)計工具和資源、人機界面原則以及活躍的貢獻(xiàn)者社區(qū)構(gòu)成了基于 IBM 設(shè)計語言的系統(tǒng)。

#11
Stack Overflow’s Stacks

?? 網(wǎng)址：https://stackoverflow.design/
Stacks 為你提供了在 Stack Overflow 中呈現(xiàn)一致、連貫的體驗所需的一切，包括產(chǎn)品和電子郵件。

#12
Audi’s UI

?? 網(wǎng)址：http://www.audi.com/ci/en/guides/user-interface/introduction.html
奧迪 UI 的目標(biāo)是開發(fā)從應(yīng)用程序到車輛的各種解決方案和均衡的全系統(tǒng)用戶體驗。

#13
BBC’s Global Experience Language (GEL)

?? 網(wǎng)址：http://www.bbc.co.uk/gel/
BBC 的共享設(shè)計框架 GEL 使我們能夠在所有數(shù)字服務(wù)中創(chuàng)建一致且令人愉快的用戶體驗。

#14
HubSpot’s Canvas Design System

?? 網(wǎng)址：https://canvas.hubspot.com/
這個集合展示了 Hubspot 設(shè)計系統(tǒng)的組件，從顏色和排版到基于反應(yīng)的功能和數(shù)據(jù)可視化工具。

#15
Ant Finances’ Ant Design

?? 網(wǎng)址：https://ant.design/
為了更好的企業(yè)應(yīng)用用戶體驗，螞蟻金融創(chuàng)建了一個具有確定性、意義性、增長性和自然性的設(shè)計系統(tǒng)。

#16
Shopify’s Polaris

?? 網(wǎng)址：https://polaris.shopify.com/
Polaris 的設(shè)計系統(tǒng)有助于所有 Shopify 商家的協(xié)作，以創(chuàng)造出色的體驗。

#17
Hewlett Packard’s Grommet Design System

?? 網(wǎng)址：http://grommet.io/
Grommet 提供將想法變?yōu)楝F(xiàn)實所需的所有支持、組件和設(shè)計資源。

#18
Marvel’s Styleguide

?? 網(wǎng)址：https://marvelApp.com/styleguide/
Styleguide 是用作?UI 組件、品牌指南、品牌資產(chǎn)、代碼片段、開發(fā)人員指南等的集中存儲庫。

#19
Zendesk's Garden

?? 網(wǎng)址：https://garden.zendesk.com/
Zendesk Garden 是該公司精選的美觀的用戶界面集合。Zendesk 通常會在 Garden 中為 Zen 產(chǎn)品開發(fā)用戶界面組件。

#20
Salesforce’s Lightning Design System

?? 網(wǎng)址：https://www.lightningdesignsystem.com/
Lightning 設(shè)計系統(tǒng)允許你使用 Salesforce 的本地模式和最佳實踐創(chuàng)建成功的業(yè)務(wù)體驗和自定義應(yīng)用程序。

#21
Gojek’s Asphalt

?? 網(wǎng)址：https://asphalt.gojek.io/
Gojek 團隊將“Foundation”和“Component”結(jié)合，共同創(chuàng)造驚人的用戶體驗。其中?“Foundation” 介紹 Asphalt 的原理，而 “Component” 則列出組成 Asphalt 的各個部分。

#22
Kiwi’s Orbit

?? 網(wǎng)址：https://orbit.kiwi/
Kiwi's Orbit 組件集合了界面元素，可以在整個 Orbit 設(shè)計系統(tǒng)中反復(fù)使用。

#23
Microsoft’s Office UI Fabric

?? 網(wǎng)址：https://developer.microsoft.com/en-us/fabric
Microsoft?的一系列 UX 框架可以用于創(chuàng)建優(yōu)質(zhì)的跨平臺應(yīng)用程序，共享代碼、設(shè)計和交互行為。

#24
Redhat’s PatternFly

?? 網(wǎng)址：https://www.patternfly.org/v4/
PatternFly 是一個開源的設(shè)計系統(tǒng)，用來驅(qū)動一致性和統(tǒng)一團隊。

#25
PegaSystem’s Pega Cosmos

?? 網(wǎng)址：https://design.pega.com/
PegaSystem 創(chuàng)建的設(shè)計系統(tǒng)用于構(gòu)建企業(yè)應(yīng)用程序的 UX/UI 模板、模式和完整的組件庫。

#26
Australian government’s Design System

?? 網(wǎng)址：https://designsystem.gov.au/
Australian government 系統(tǒng)采用了最高的可用性和可訪問性標(biāo)準(zhǔn)，有助于按照數(shù)字服務(wù)標(biāo)準(zhǔn)為所有用戶提供一致的體驗。

#27
Mozilla’s Protocol

?? 網(wǎng)址：https://protocol.mozilla.org/
Protocol 是 Mozilla 和 Firefox 網(wǎng)站的設(shè)計系統(tǒng)。它建立了一種通用的設(shè)計語言，提供了可重復(fù)使用的編碼組件，并概述了內(nèi)容和可訪問性的高級指導(dǎo)原則。

#28
Quickbooks’ Design System

?? 網(wǎng)址：https://designsystem.quickbooks.com/
Intuit 的設(shè)計師和設(shè)計領(lǐng)導(dǎo)者一直在致力于創(chuàng)建耐用且適應(yīng)性強的組件，這些組件將在所有 Intuit 中變得統(tǒng)一。

#29
Ubuntu’s Vanilla

?? 網(wǎng)址：https://vanillaframework.io/
Ubuntu’s Vanilla 設(shè)計系統(tǒng)由 Canonical Web?團隊用 Sass 編寫。Vanilla 包含響應(yīng)式 CSS 網(wǎng)格、HTML 元素的基本樣式以及可以擴展的關(guān)鍵模式或其他模式選擇。

#30
Workday’s Canvas

?? 網(wǎng)址：https://design.workday.com/
Canvas 是一個開源設(shè)計系統(tǒng)，由可重復(fù)使用的UI元素、資源和指導(dǎo)原則組成，使團隊能夠創(chuàng)建可擴展的統(tǒng)一體驗。

#31
Yelp’s Styleguide

?? 網(wǎng)址：https://www.yelp.com/styleguide
Cookbook 是 Yelp 的數(shù)字體驗設(shè)計系統(tǒng)，遵循 Brad Frost 的原子設(shè)計方法。系統(tǒng)通過使用?Yelp’s?Styleguide 獨有的風(fēng)格配料、成分配方來進行食物類比。

#32
Airbnb’s Design System

?? 網(wǎng)址：https://airbnb.design/building-a-visual-language/
Airbnb 團隊為 DLS 設(shè)定的目標(biāo)是創(chuàng)建一種更美觀、更易于理解的設(shè)計語言。Airbnb’s Design System?通過定義明確和可重復(fù)使用的組件來提高效率。

#33
Adobe’s Spectrum

?? 網(wǎng)址：https://spectrum.adobe.com/
由 Spectrum 提供組件和工具，幫助產(chǎn)品團隊更高效地工作，使 Adobe 的應(yīng)用程序更具凝聚力。

#34
Liferay’s Lexicon

?? 網(wǎng)址：https://lexicondesign.io/
Lexicon 是一種設(shè)計語言，它在 Liferay 產(chǎn)品生態(tài)系統(tǒng)中為構(gòu)建界面提供了一個通用框架，從而為用戶提供令人滿意和統(tǒng)一的體驗。

#35
Microsoft’s Fluent

?? 網(wǎng)址：https://www.microsoft.com/design/fluent/
Fluent 是一個開源、跨平臺的設(shè)計系統(tǒng)，它為設(shè)計師和開發(fā)人員提供了創(chuàng)建引人入勝的產(chǎn)品體驗所需的框架，包括可訪問性、國際化性等。

#36
BuzzFeed’s Solid

?? 網(wǎng)址：https://solid.buzzfeed.com/
Solid 是 BuzzFeed 的 CSS 樣式指南。受 Basscss 等框架的影響，Solid 使用原子 CSS 來快速創(chuàng)造原型和開發(fā)功能，提供一致的樣式選項，以及創(chuàng)建新布局和設(shè)計的靈活性。

#37-#50

另外14個設(shè)計系統(tǒng)的網(wǎng)址我們匯總在了一起，感興趣的同學(xué)可以自己點進去了解下哦！

• 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/

更多知識干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對于設(shè)計初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計想法積累，基于這樣的基礎(chǔ)再進行個性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計學(xué)院是尤克斯國際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計專業(yè)的頂級設(shè)計學(xué)院。除了一對一設(shè)計課、基礎(chǔ)技能課程、小組課題、設(shè)計評圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計理論系統(tǒng)講座、申請必備知識解析等。

本文版權(quán)歸UXD尤克斯所有

部分圖片來自于網(wǎng)絡(luò)

如有侵權(quán)請與我們聯(lián)系