在進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候，如果有一套可以參考的設(shè)計(jì)系統(tǒng)，能幫助我們提高不少工作效率，提升設(shè)計(jì)表現(xiàn)。就像這篇文章，作者整理了10個(gè)大公司可以對外用的設(shè)計(jì)系統(tǒng)，既包括了微軟、谷歌等互聯(lián)網(wǎng)公司，也包括了奧迪、uber等車企，還有Shopify、甲骨文等領(lǐng)域的設(shè)計(jì)系統(tǒng)，希望可以幫到大家。

設(shè)計(jì)系統(tǒng)，這一集結(jié)了可復(fù)用組件、準(zhǔn)則及資源的豐富集合，致力于在眾多平臺與設(shè)備之上，營造出既連貫又一致的用戶界面。它作為一個(gè)架構(gòu)框架，為設(shè)計(jì)師與開發(fā)人員提供了一整套規(guī)則、理念和工具，旨在全組織范圍內(nèi)打造和維護(hù)一種統(tǒng)一的設(shè)計(jì)語言。

此系統(tǒng)涵蓋了眾多元素，如精煉的排版、和諧的色彩調(diào)配、精致的圖標(biāo)、有序的網(wǎng)格、直觀的用戶界面組件以及創(chuàng)新的設(shè)計(jì)模式。通常，設(shè)計(jì)系統(tǒng)還會(huì)配備詳盡的文檔和指導(dǎo)，深入闡述這些元素的應(yīng)用方式，以確保其一致性，大幅減少設(shè)計(jì)上的不一致性或錯(cuò)誤。

設(shè)計(jì)系統(tǒng)的根本目的，在于通過為設(shè)計(jì)師和開發(fā)人員提供一套共通的語言和工具包，從而提升他們間的協(xié)作效率和工作成效。借助預(yù)設(shè)的元素體系，團(tuán)隊(duì)能夠?qū)崿F(xiàn)更加高效的協(xié)作，減少重復(fù)性勞動(dòng)，進(jìn)而創(chuàng)造出易于維護(hù)且可持續(xù)發(fā)展的優(yōu)質(zhì)設(shè)計(jì)。此外，設(shè)計(jì)系統(tǒng)還確保企業(yè)的品牌形象及視覺識別在各個(gè)接觸點(diǎn)和平臺上保持著高度一致性。

以下是一些在設(shè)計(jì)行業(yè)頗受歡迎并被設(shè)計(jì)師和開發(fā)人員廣泛使用的設(shè)計(jì)系統(tǒng)。

一、谷歌 — Material Design System

Google Material Design System是一個(gè)綜合性的設(shè)計(jì)系統(tǒng)，由谷歌在2014年推出，以其獨(dú)特的Material Design原理為基礎(chǔ)。該系統(tǒng)重視利用陰影和光線來創(chuàng)造視覺上的深度和層次感，同時(shí)采用大膽的排版和生動(dòng)活潑的色彩調(diào)配。

為設(shè)計(jì)師和開發(fā)人員提供了豐富的資源，Material Design System在不同平臺和設(shè)備上保持一致性。它集成了UI組件、圖標(biāo)、布局等元素，并包含了確保設(shè)計(jì)過程中一致性、可擴(kuò)展性和易用性的設(shè)計(jì)指南和原則。

Google Material Design System的主要特點(diǎn)包括：

• 各種易于使用和實(shí)施的可定制UI組件，如按鈕、卡片、對話框和導(dǎo)航欄。
• 一套全面的設(shè)計(jì)指南和原則，旨在確保不同產(chǎn)品和平臺間的一致性和易用性。
• 強(qiáng)大的工具和資源，如Sketch插件和設(shè)計(jì)模板，幫助設(shè)計(jì)師和開發(fā)人員快速高效地創(chuàng)建高質(zhì)量的設(shè)計(jì)。
• 注重可訪問性和包容性，提供適合所有人使用（包括殘障人士）的用戶界面設(shè)計(jì)指南。

Google Material Design System不僅是一套工具和資源的集合，更是一種設(shè)計(jì)哲學(xué)，旨在提升用戶界面的直觀性和響應(yīng)性，同時(shí)確保設(shè)計(jì)的包容性和通用性。

網(wǎng)站—https://m3.material.io/

二、Atlassian 設(shè)計(jì)系統(tǒng)

Atlassian設(shè)計(jì)系統(tǒng)（ADS），由協(xié)作團(tuán)隊(duì)和項(xiàng)目管理工具開發(fā)商Atlassian傾力打造，旨在為Atlassian旗下所有產(chǎn)品和服務(wù)提供一致且流暢的體驗(yàn)，同時(shí)保留了個(gè)性化和靈活性的空間。

ADS向設(shè)計(jì)師和開發(fā)人員提供了豐富的資源，涵蓋了用戶界面組件、設(shè)計(jì)指南和可訪問性標(biāo)準(zhǔn)等。此外，它還采用了一種以簡潔、清晰和易用性為核心的設(shè)計(jì)語言。

Atlassian設(shè)計(jì)系統(tǒng)的主要特色包括：

• 在所有Atlassian產(chǎn)品和服務(wù)中實(shí)現(xiàn)一致性，提供完整的用戶界面組件系列，包括按鈕、表單和導(dǎo)航欄。
• 精心制定的設(shè)計(jì)指南和原則，旨在確保不同平臺和設(shè)備間的一致性和易用性。
• 高標(biāo)準(zhǔn)的可訪問性規(guī)范和指南，確保Atlassian的產(chǎn)品和服務(wù)可供所有人使用，不論他們是否面臨身體挑戰(zhàn)或障礙。
• 高度可定制性和靈活性，允許團(tuán)隊(duì)根據(jù)自身特定需求和要求調(diào)整設(shè)計(jì)系統(tǒng)。
• 強(qiáng)調(diào)協(xié)作和團(tuán)隊(duì)合作精神，提供各類資源和工具，協(xié)助設(shè)計(jì)人員和開發(fā)人員更高效地共同工作。

Atlassian設(shè)計(jì)系統(tǒng)因其提供的全面資源和指導(dǎo)而成為設(shè)計(jì)師和開發(fā)人員的首選，它有效保障了所有Atlassian產(chǎn)品和服務(wù)的一致性、易用性和無障礙訪問性。

網(wǎng)站 —https://atlassian.design/

三、微軟 — Fluent Design System

流暢設(shè)計(jì)系統(tǒng)（Fluent Design System），由微軟精心打造，旨在為其產(chǎn)品和服務(wù)創(chuàng)造一種沉浸式、吸引人的直觀用戶體驗(yàn)。該系統(tǒng)建立在五大設(shè)計(jì)原則之上：光線、深度、動(dòng)態(tài)、材料和比例，每一原則都旨在增強(qiáng)用戶界面的感官和互動(dòng)體驗(yàn)。

Fluent設(shè)計(jì)系統(tǒng)的關(guān)鍵特性包括：

• 提供一系列全面的用戶界面組件，如按鈕、卡片和導(dǎo)航欄，以實(shí)現(xiàn)微軟所有產(chǎn)品和服務(wù)中的一致性。
• 通過精心使用光線、深度、動(dòng)態(tài)和材質(zhì)，創(chuàng)造出具有層次感和深度感的視覺效果，同時(shí)通過動(dòng)畫使元素生動(dòng)活潑。
• 靈活且適應(yīng)性強(qiáng)的設(shè)計(jì)系統(tǒng)，允許個(gè)性化定制，確保團(tuán)隊(duì)可以根據(jù)自己的具體需求和要求進(jìn)行創(chuàng)新設(shè)計(jì)。
• 強(qiáng)調(diào)可訪問性和包容性，提供全面指導(dǎo)，確保設(shè)計(jì)適合所有用戶群體，包括殘障人士。
• 一系列設(shè)計(jì)工具和資源，包括設(shè)計(jì)模板、色彩調(diào)色板和排版指南，助力設(shè)計(jì)師和開發(fā)人員快速且高效地創(chuàng)建高品質(zhì)設(shè)計(jì)。

流暢設(shè)計(jì)系統(tǒng)因其提供的全面資源和指南而受到設(shè)計(jì)人員和開發(fā)人員的青睞，其有效地保障了微軟產(chǎn)品和服務(wù)的一致性、易用性和無障礙訪問性。

網(wǎng)站—https://www.microsoft.com/design/fluent/#/

四、Shopify — Polaris設(shè)計(jì)系統(tǒng)

Shopify Polaris，由電子商務(wù)巨頭Shopify開發(fā)，是一個(gè)專為在線商店設(shè)計(jì)的系統(tǒng)。Polaris致力于為Shopify的各項(xiàng)產(chǎn)品和服務(wù)提供一種連貫、統(tǒng)一的體驗(yàn)，同時(shí)也為用戶提供了定制化和靈活性的空間。

該設(shè)計(jì)系統(tǒng)為設(shè)計(jì)師和開發(fā)人員提供了一系列豐富的資源，包括用戶界面組件、設(shè)計(jì)準(zhǔn)則和可訪問性標(biāo)準(zhǔn)。它還采用了一種強(qiáng)調(diào)簡潔、明晰和易用性的設(shè)計(jì)語言。

Shopify Polaris的主要特點(diǎn)包括：

• 提供全面的用戶界面組件集合，如按鈕、表單和導(dǎo)航欄，以在所有Shopify產(chǎn)品和服務(wù)中實(shí)現(xiàn)一致性。
• 設(shè)計(jì)指南和原則，旨在確保不同平臺和設(shè)備間的一致性和易用性。
• 可訪問性標(biāo)準(zhǔn)和指南，確保Shopify的產(chǎn)品和服務(wù)可以被所有人使用，不論他們是否面臨身體挑戰(zhàn)。
• 高度的可定制性和靈活性，允許團(tuán)隊(duì)根據(jù)自身的具體需求和要求進(jìn)行調(diào)整和定制。
• 強(qiáng)調(diào)協(xié)作和團(tuán)隊(duì)精神，提供各種資源和工具，以助于設(shè)計(jì)人員和開發(fā)人員更有效地共同合作。

Shopify Polaris因其提供的全面資源和指導(dǎo)，成為設(shè)計(jì)師和開發(fā)人員的優(yōu)選之選，有效地保障了所有Shopify產(chǎn)品和服務(wù)的一致性、易用性和無障礙訪問性。

網(wǎng)頁—https://polaris.shopify.com/

五、Ant 設(shè)計(jì)系統(tǒng)

Ant Design，出自阿里巴巴集團(tuán)旗下螞蟻金服之手，是一款全面而通用的設(shè)計(jì)系統(tǒng)。它旨在為設(shè)計(jì)師和開發(fā)人員提供廣泛的用戶界面組件、設(shè)計(jì)指南和工具，以助力團(tuán)隊(duì)迅速、輕松地創(chuàng)造出高品質(zhì)的設(shè)計(jì)。

螞蟻設(shè)計(jì)秉承簡潔、一致性和高效性的設(shè)計(jì)原則，其包含了一系列用戶界面組件，如按鈕、表單和導(dǎo)航欄等，以及設(shè)計(jì)指南和原則，旨在確保在不同平臺和設(shè)備上的一致性和易用性。

Ant Design的核心特性包括：

• 一整套易用且易于定制的用戶界面組件。
• 重視可訪問性，其設(shè)計(jì)指南和原則確保螞蟻設(shè)計(jì)對所有人開放，不論其是否面臨殘疾或其他挑戰(zhàn)。
• 跨平臺兼容，用戶界面組件適用于各種平臺和設(shè)備。
• 提供一系列設(shè)計(jì)工具和資源，包括Sketch文件、圖標(biāo)集和代碼片段。
• 擁有一個(gè)充滿活力且相互支持的設(shè)計(jì)師和開發(fā)人員社區(qū)，他們共同為設(shè)計(jì)系統(tǒng)貢獻(xiàn)力量，并隨著時(shí)間的推移不斷完善和改進(jìn)。

螞蟻設(shè)計(jì)因其提供的全面、通用的資源和指南而受到設(shè)計(jì)師和開發(fā)人員的廣泛歡迎，有效地保證了各種項(xiàng)目和應(yīng)用程序的一致性、易用性和無障礙訪問性。

網(wǎng)頁 —https://ant.design/

六、IBM — Carbon 設(shè)計(jì)系統(tǒng)

IBM Carbon Design System 是由 IBM 開發(fā)的設(shè)計(jì)系統(tǒng)，IBM 是一家跨國技術(shù)公司，提供廣泛的產(chǎn)品和服務(wù)。Carbon 的設(shè)計(jì)目的是為 IBM 的所有產(chǎn)品和服務(wù)提供一致且可擴(kuò)展的用戶體驗(yàn)，同時(shí)也允許定制和靈活運(yùn)用。

Carbon 為設(shè)計(jì)人員和開發(fā)人員提供了一系列資源，包括用戶界面組件、設(shè)計(jì)指南、可訪問性標(biāo)準(zhǔn)和開發(fā)工具。它還包括一種強(qiáng)調(diào)簡潔、清晰和可用性的設(shè)計(jì)語言。

IBM Carbon 設(shè)計(jì)系統(tǒng)的一些主要功能包括：

• 在所有 IBM 產(chǎn)品和服務(wù)中保持一致的一整套用戶界面組件，包括按鈕、表單和導(dǎo)航欄。
• 設(shè)計(jì)指南和原則，有助于確保不同平臺和設(shè)備的一致性和可用性。
• 可訪問性標(biāo)準(zhǔn)和指南，有助于確保 IBM 的產(chǎn)品和服務(wù)可供所有人使用，無論是否有殘疾或缺陷。
• 可定制性和靈活性，允許團(tuán)隊(duì)根據(jù)自己的特定需求和要求定制設(shè)計(jì)系統(tǒng)。
• 注重協(xié)作和團(tuán)隊(duì)精神，提供資源和工具，幫助設(shè)計(jì)人員和開發(fā)人員更有效地協(xié)同工作。

總之，IBM Carbon Design System 是設(shè)計(jì)人員和開發(fā)人員的熱門選擇，因?yàn)樗峁┝艘惶兹娴馁Y源和指南，有助于確保所有 IBM 產(chǎn)品和服務(wù)的一致性、可用性和可訪問性。

網(wǎng)站—https://carbondesignsystem.com/

七、AWS Amplify

AWS Amplify，由全球領(lǐng)先的云計(jì)算平臺亞馬遜網(wǎng)絡(luò)服務(wù)（AWS）開發(fā)，是一個(gè)專為企業(yè)和組織提供的設(shè)計(jì)系統(tǒng)和開發(fā)平臺。其主要目的是幫助開發(fā)者迅速且高效地構(gòu)建可擴(kuò)展、云驅(qū)動(dòng)的應(yīng)用程序和服務(wù)。

AWS Amplify為開發(fā)人員提供了廣泛的資源和工具，包括庫、用戶界面組件以及開發(fā)框架。此外，它還提供了一系列開發(fā)工具和服務(wù)，以便簡化構(gòu)建和部署云驅(qū)動(dòng)應(yīng)用程序（例如身份驗(yàn)證、存儲(chǔ)和分析）的過程。

AWS Amplify的核心功能包括：

• 一套全面的庫和用戶界面組件，用于構(gòu)建適用于各種平臺和設(shè)備的可擴(kuò)展響應(yīng)式應(yīng)用。
• 開發(fā)框架和工具，旨在簡化云驅(qū)動(dòng)應(yīng)用程序（如身份驗(yàn)證、存儲(chǔ)和分析）的構(gòu)建和部署過程。
• 注重安全性和合規(guī)性，提供資源和工具以確保應(yīng)用程序的安全性，并滿足監(jiān)管要求。
• 提供一系列定制選項(xiàng)，使開發(fā)人員能夾據(jù)自身的特定需求和要求定制設(shè)計(jì)系統(tǒng)。
• 與其他AWS服務(wù)（如亞馬遜S3、亞馬遜Cognito和亞馬遜CloudFront）的集成，使開發(fā)人員能夠輕松地將這些服務(wù)整合到其應(yīng)用程序中。

因此，AWS Amplify因其提供的全面資源和工具，成為開發(fā)人員在構(gòu)建和部署云驅(qū)動(dòng)應(yīng)用程序過程中的首選解決方案。

網(wǎng)站—https://aws.amazon.com/amplify/

八、奧迪設(shè)計(jì)系統(tǒng)

奧迪設(shè)計(jì)系統(tǒng)，由德國著名汽車制造商奧迪精心打造，是一種旨在為其產(chǎn)品及數(shù)字平臺提供統(tǒng)一和連貫視覺識別的設(shè)計(jì)語言和系統(tǒng)。該系統(tǒng)融合了多種設(shè)計(jì)元素，如排版、色彩、布局和圖標(biāo)，以及用戶界面和體驗(yàn)設(shè)計(jì)的指南。

該設(shè)計(jì)系統(tǒng)的核心目標(biāo)是映射出奧迪公司的核心價(jià)值觀——?jiǎng)?chuàng)新、精準(zhǔn)和進(jìn)取，同時(shí)塑造一個(gè)高端且令人向往的品牌形象。它不僅被應(yīng)用于奧迪汽車的設(shè)計(jì)中，也廣泛應(yīng)用于其數(shù)字產(chǎn)品，如網(wǎng)站、應(yīng)用程序以及車載娛樂和導(dǎo)航系統(tǒng)的界面設(shè)計(jì)。

奧迪設(shè)計(jì)系統(tǒng)的主要特點(diǎn)包括：

• 注重簡潔和極簡主義，采用簡練的線條、清晰的排版和有限的色調(diào)。
• 在所有產(chǎn)品和平臺上維持一致的視覺語言，以此打造統(tǒng)一的品牌形象。
• 強(qiáng)調(diào)用戶體驗(yàn)，提供直觀易用的界面和交互設(shè)計(jì)指導(dǎo)。
• 在傳統(tǒng)與創(chuàng)新之間實(shí)現(xiàn)平衡，不僅體現(xiàn)奧迪的精湛工藝和卓越工程技術(shù)，還擁抱新技術(shù)和設(shè)計(jì)趨勢。

綜上所述，奧迪設(shè)計(jì)系統(tǒng)不僅是奧迪品牌形象的關(guān)鍵組成部分，也是塑造奧迪作為一個(gè)高端、令人向往品牌形象的重要因素。

網(wǎng)頁—https://www.audi.com/ci/en/guides/user-interface/introduction.html

九、Spotify — 后臺設(shè)計(jì)系統(tǒng)

Spotify的后臺設(shè)計(jì)系統(tǒng)（Backstage Design System），由這家領(lǐng)先的音樂流媒體平臺專門為其內(nèi)部開發(fā)人員門戶網(wǎng)站及相關(guān)工具打造，目的在于提供一種統(tǒng)一且連貫的設(shè)計(jì)語言。該系統(tǒng)包含了排版、色彩、布局、圖標(biāo)設(shè)計(jì)的指南，以及用戶界面和體驗(yàn)設(shè)計(jì)的指導(dǎo)。

后臺設(shè)計(jì)系統(tǒng)的主旨在于為Spotify內(nèi)部的開發(fā)人員創(chuàng)造一個(gè)一致且直觀的體驗(yàn)環(huán)境，讓他們能夠輕松地訪問和使用構(gòu)建及維護(hù)平臺所需的各類工具和資源。它基于名為Backstage的框架，這是Spotify開發(fā)的一個(gè)用于管理開發(fā)人員門戶的開源平臺。

Backstage設(shè)計(jì)系統(tǒng)的關(guān)鍵特性包括：

• 重視模塊化和靈活性，方便設(shè)計(jì)系統(tǒng)的個(gè)性化定制和擴(kuò)展。
• 強(qiáng)調(diào)可訪問性和易用性，提供易于理解和操作的界面設(shè)計(jì)指南，適應(yīng)不同技能水平的開發(fā)人員。
• 所有Backstage組件和工具均采用統(tǒng)一、一致的視覺語言。
• 致力于開源發(fā)展和協(xié)作，向更廣泛的開發(fā)者社區(qū)開放Backstage框架和設(shè)計(jì)系統(tǒng)。

綜合來看，后臺設(shè)計(jì)系統(tǒng)是Spotify內(nèi)部開發(fā)人員生態(tài)系統(tǒng)的重要組成部分，它提供了一種精簡而高效的設(shè)計(jì)語言，使開發(fā)人員能夑輕松地構(gòu)建和維護(hù)平臺。

網(wǎng)站—https://backstage.io/docs/dls/design/

十、Uber — 基礎(chǔ)設(shè)計(jì)系統(tǒng)

Uber的“基礎(chǔ)設(shè)計(jì)系統(tǒng)”（Base Design System），由這家領(lǐng)先的共享出行公司精心開發(fā)，旨在為其廣泛的產(chǎn)品和平臺提供一個(gè)統(tǒng)一且可擴(kuò)展的設(shè)計(jì)語言。該設(shè)計(jì)系統(tǒng)涵蓋了排版、色彩、布局和圖標(biāo)設(shè)計(jì)的指南，以及用戶界面和體驗(yàn)設(shè)計(jì)的指導(dǎo)。

基礎(chǔ)設(shè)計(jì)系統(tǒng)的目標(biāo)是為Uber的客戶、司機(jī)以及其他用戶群體創(chuàng)造一個(gè)一致且直觀的體驗(yàn)。同時(shí)，它還提供了靈活的模塊化設(shè)計(jì)語言，以適應(yīng)多樣化的產(chǎn)品和使用場景。該系統(tǒng)基于Uber的設(shè)計(jì)原則，重點(diǎn)放在簡潔、明晰和易用性上。

基礎(chǔ)設(shè)計(jì)系統(tǒng)的主要特征包括：

• 注重模塊化和可擴(kuò)展性，便于針對新產(chǎn)品和不同使用情況進(jìn)行定制和擴(kuò)展。
• 強(qiáng)調(diào)無障礙性和包容性，為不同背景和能力的用戶提供易于使用和導(dǎo)航的界面設(shè)計(jì)指南。
• 在所有Uber產(chǎn)品和平臺中采用統(tǒng)一、一致的視覺語言，打造出具有辨識度和難忘的品牌形象。
• 致力于持續(xù)的改進(jìn)和迭代，根據(jù)用戶反饋和數(shù)據(jù)分析不斷更新和優(yōu)化設(shè)計(jì)系統(tǒng)。

總的來說，基礎(chǔ)設(shè)計(jì)系統(tǒng)是Uber在設(shè)計(jì)和產(chǎn)品開發(fā)流程中的關(guān)鍵環(huán)節(jié)，使該公司能夠大規(guī)模地開發(fā)出以用戶為中心、易于使用的無障礙產(chǎn)品和服務(wù)。

網(wǎng)站—https://baseweb.design/