2023 年十大設計系統!看看有哪幾家?

0 評論 3594 瀏覽 45 收藏 21 分鐘

在進行產品設計的時候,如果有一套可以參考的設計系統,能幫助我們提高不少工作效率,提升設計表現。就像這篇文章,作者整理了10個大公司可以對外用的設計系統,既包括了微軟、谷歌等互聯網公司,也包括了奧迪、uber等車企,還有Shopify、甲骨文等領域的設計系統,希望可以幫到大家。

設計系統,這一集結了可復用組件、準則及資源的豐富集合,致力于在眾多平臺與設備之上,營造出既連貫又一致的用戶界面。它作為一個架構框架,為設計師與開發人員提供了一整套規則、理念和工具,旨在全組織范圍內打造和維護一種統一的設計語言。

此系統涵蓋了眾多元素,如精煉的排版、和諧的色彩調配、精致的圖標、有序的網格、直觀的用戶界面組件以及創新的設計模式。通常,設計系統還會配備詳盡的文檔和指導,深入闡述這些元素的應用方式,以確保其一致性,大幅減少設計上的不一致性或錯誤。

設計系統的根本目的,在于通過為設計師和開發人員提供一套共通的語言和工具包,從而提升他們間的協作效率和工作成效。借助預設的元素體系,團隊能夠實現更加高效的協作,減少重復性勞動,進而創造出易于維護且可持續發展的優質設計。此外,設計系統還確保企業的品牌形象及視覺識別在各個接觸點和平臺上保持著高度一致性。

以下是一些在設計行業頗受歡迎并被設計師和開發人員廣泛使用的設計系統。

一、谷歌 — Material Design System

Google Material Design System是一個綜合性的設計系統,由谷歌在2014年推出,以其獨特的Material Design原理為基礎。該系統重視利用陰影和光線來創造視覺上的深度和層次感,同時采用大膽的排版和生動活潑的色彩調配。

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

Google Material Design System的主要特點包括:

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

Google Material Design System不僅是一套工具和資源的集合,更是一種設計哲學,旨在提升用戶界面的直觀性和響應性,同時確保設計的包容性和通用性。

網站—https://m3.material.io/

二、Atlassian 設計系統

Atlassian設計系統(ADS),由協作團隊和項目管理工具開發商Atlassian傾力打造,旨在為Atlassian旗下所有產品和服務提供一致且流暢的體驗,同時保留了個性化和靈活性的空間。

ADS向設計師和開發人員提供了豐富的資源,涵蓋了用戶界面組件、設計指南和可訪問性標準等。此外,它還采用了一種以簡潔、清晰和易用性為核心的設計語言。

Atlassian設計系統的主要特色包括:

  • 在所有Atlassian產品和服務中實現一致性,提供完整的用戶界面組件系列,包括按鈕、表單和導航欄。
  • 精心制定的設計指南和原則,旨在確保不同平臺和設備間的一致性和易用性。
  • 高標準的可訪問性規范和指南,確保Atlassian的產品和服務可供所有人使用,不論他們是否面臨身體挑戰或障礙。
  • 高度可定制性和靈活性,允許團隊根據自身特定需求和要求調整設計系統。
  • 強調協作和團隊合作精神,提供各類資源和工具,協助設計人員和開發人員更高效地共同工作。

Atlassian設計系統因其提供的全面資源和指導而成為設計師和開發人員的首選,它有效保障了所有Atlassian產品和服務的一致性、易用性和無障礙訪問性。

網站 —https://atlassian.design/

三、微軟 — Fluent Design System

流暢設計系統(Fluent Design System),由微軟精心打造,旨在為其產品和服務創造一種沉浸式、吸引人的直觀用戶體驗。該系統建立在五大設計原則之上:光線、深度、動態、材料和比例,每一原則都旨在增強用戶界面的感官和互動體驗。

Fluent設計系統的關鍵特性包括:

  • 提供一系列全面的用戶界面組件,如按鈕、卡片和導航欄,以實現微軟所有產品和服務中的一致性。
  • 通過精心使用光線、深度、動態和材質,創造出具有層次感和深度感的視覺效果,同時通過動畫使元素生動活潑。
  • 靈活且適應性強的設計系統,允許個性化定制,確保團隊可以根據自己的具體需求和要求進行創新設計。
  • 強調可訪問性和包容性,提供全面指導,確保設計適合所有用戶群體,包括殘障人士。
  • 一系列設計工具和資源,包括設計模板、色彩調色板和排版指南,助力設計師和開發人員快速且高效地創建高品質設計。

流暢設計系統因其提供的全面資源和指南而受到設計人員和開發人員的青睞,其有效地保障了微軟產品和服務的一致性、易用性和無障礙訪問性。

網站—https://www.microsoft.com/design/fluent/#/

四、Shopify — Polaris設計系統

Shopify Polaris,由電子商務巨頭Shopify開發,是一個專為在線商店設計的系統。Polaris致力于為Shopify的各項產品和服務提供一種連貫、統一的體驗,同時也為用戶提供了定制化和靈活性的空間。

該設計系統為設計師和開發人員提供了一系列豐富的資源,包括用戶界面組件、設計準則和可訪問性標準。它還采用了一種強調簡潔、明晰和易用性的設計語言。

Shopify Polaris的主要特點包括:

  • 提供全面的用戶界面組件集合,如按鈕、表單和導航欄,以在所有Shopify產品和服務中實現一致性。
  • 設計指南和原則,旨在確保不同平臺和設備間的一致性和易用性。
  • 可訪問性標準和指南,確保Shopify的產品和服務可以被所有人使用,不論他們是否面臨身體挑戰。
  • 高度的可定制性和靈活性,允許團隊根據自身的具體需求和要求進行調整和定制。
  • 強調協作和團隊精神,提供各種資源和工具,以助于設計人員和開發人員更有效地共同合作。

Shopify Polaris因其提供的全面資源和指導,成為設計師和開發人員的優選之選,有效地保障了所有Shopify產品和服務的一致性、易用性和無障礙訪問性。

網頁—https://polaris.shopify.com/

五、Ant 設計系統

Ant Design,出自阿里巴巴集團旗下螞蟻金服之手,是一款全面而通用的設計系統。它旨在為設計師和開發人員提供廣泛的用戶界面組件、設計指南和工具,以助力團隊迅速、輕松地創造出高品質的設計。

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

Ant Design的核心特性包括:

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

螞蟻設計因其提供的全面、通用的資源和指南而受到設計師和開發人員的廣泛歡迎,有效地保證了各種項目和應用程序的一致性、易用性和無障礙訪問性。

網頁 —https://ant.design/

六、IBM — Carbon 設計系統

IBM Carbon Design System 是由 IBM 開發的設計系統,IBM 是一家跨國技術公司,提供廣泛的產品和服務。Carbon 的設計目的是為 IBM 的所有產品和服務提供一致且可擴展的用戶體驗,同時也允許定制和靈活運用。

Carbon 為設計人員和開發人員提供了一系列資源,包括用戶界面組件、設計指南、可訪問性標準和開發工具。它還包括一種強調簡潔、清晰和可用性的設計語言。

IBM Carbon 設計系統的一些主要功能包括:

  • 在所有 IBM 產品和服務中保持一致的一整套用戶界面組件,包括按鈕、表單和導航欄。
  • 設計指南和原則,有助于確保不同平臺和設備的一致性和可用性。
  • 可訪問性標準和指南,有助于確保 IBM 的產品和服務可供所有人使用,無論是否有殘疾或缺陷。
  • 可定制性和靈活性,允許團隊根據自己的特定需求和要求定制設計系統。
  • 注重協作和團隊精神,提供資源和工具,幫助設計人員和開發人員更有效地協同工作。

總之,IBM Carbon Design System 是設計人員和開發人員的熱門選擇,因為它提供了一套全面的資源和指南,有助于確保所有 IBM 產品和服務的一致性、可用性和可訪問性。

網站—https://carbondesignsystem.com/

七、AWS Amplify

AWS Amplify,由全球領先的云計算平臺亞馬遜網絡服務(AWS)開發,是一個專為企業和組織提供的設計系統和開發平臺。其主要目的是幫助開發者迅速且高效地構建可擴展、云驅動的應用程序和服務。

AWS Amplify為開發人員提供了廣泛的資源和工具,包括庫、用戶界面組件以及開發框架。此外,它還提供了一系列開發工具和服務,以便簡化構建和部署云驅動應用程序(例如身份驗證、存儲和分析)的過程。

AWS Amplify的核心功能包括:

  • 一套全面的庫和用戶界面組件,用于構建適用于各種平臺和設備的可擴展響應式應用。
  • 開發框架和工具,旨在簡化云驅動應用程序(如身份驗證、存儲和分析)的構建和部署過程。
  • 注重安全性和合規性,提供資源和工具以確保應用程序的安全性,并滿足監管要求。
  • 提供一系列定制選項,使開發人員能夾據自身的特定需求和要求定制設計系統。
  • 與其他AWS服務(如亞馬遜S3、亞馬遜Cognito和亞馬遜CloudFront)的集成,使開發人員能夠輕松地將這些服務整合到其應用程序中。

因此,AWS Amplify因其提供的全面資源和工具,成為開發人員在構建和部署云驅動應用程序過程中的首選解決方案。

網站—https://aws.amazon.com/amplify/

八、奧迪設計系統

奧迪設計系統,由德國著名汽車制造商奧迪精心打造,是一種旨在為其產品及數字平臺提供統一和連貫視覺識別的設計語言和系統。該系統融合了多種設計元素,如排版、色彩、布局和圖標,以及用戶界面和體驗設計的指南。

該設計系統的核心目標是映射出奧迪公司的核心價值觀——創新、精準和進取,同時塑造一個高端且令人向往的品牌形象。它不僅被應用于奧迪汽車的設計中,也廣泛應用于其數字產品,如網站、應用程序以及車載娛樂和導航系統的界面設計。

奧迪設計系統的主要特點包括:

  • 注重簡潔和極簡主義,采用簡練的線條、清晰的排版和有限的色調。
  • 在所有產品和平臺上維持一致的視覺語言,以此打造統一的品牌形象。
  • 強調用戶體驗,提供直觀易用的界面和交互設計指導。
  • 在傳統與創新之間實現平衡,不僅體現奧迪的精湛工藝和卓越工程技術,還擁抱新技術和設計趨勢。

綜上所述,奧迪設計系統不僅是奧迪品牌形象的關鍵組成部分,也是塑造奧迪作為一個高端、令人向往品牌形象的重要因素。

網頁—https://www.audi.com/ci/en/guides/user-interface/introduction.html

九、Spotify — 后臺設計系統

Spotify的后臺設計系統(Backstage Design System),由這家領先的音樂流媒體平臺專門為其內部開發人員門戶網站及相關工具打造,目的在于提供一種統一且連貫的設計語言。該系統包含了排版、色彩、布局、圖標設計的指南,以及用戶界面和體驗設計的指導。

后臺設計系統的主旨在于為Spotify內部的開發人員創造一個一致且直觀的體驗環境,讓他們能夠輕松地訪問和使用構建及維護平臺所需的各類工具和資源。它基于名為Backstage的框架,這是Spotify開發的一個用于管理開發人員門戶的開源平臺。

Backstage設計系統的關鍵特性包括:

  • 重視模塊化和靈活性,方便設計系統的個性化定制和擴展。
  • 強調可訪問性和易用性,提供易于理解和操作的界面設計指南,適應不同技能水平的開發人員。
  • 所有Backstage組件和工具均采用統一、一致的視覺語言。
  • 致力于開源發展和協作,向更廣泛的開發者社區開放Backstage框架和設計系統。

綜合來看,后臺設計系統是Spotify內部開發人員生態系統的重要組成部分,它提供了一種精簡而高效的設計語言,使開發人員能夑輕松地構建和維護平臺。

網站—https://backstage.io/docs/dls/design/

十、Uber — 基礎設計系統

Uber的“基礎設計系統”(Base Design System),由這家領先的共享出行公司精心開發,旨在為其廣泛的產品和平臺提供一個統一且可擴展的設計語言。該設計系統涵蓋了排版、色彩、布局和圖標設計的指南,以及用戶界面和體驗設計的指導。

基礎設計系統的目標是為Uber的客戶、司機以及其他用戶群體創造一個一致且直觀的體驗。同時,它還提供了靈活的模塊化設計語言,以適應多樣化的產品和使用場景。該系統基于Uber的設計原則,重點放在簡潔、明晰和易用性上。

基礎設計系統的主要特征包括:

  • 注重模塊化和可擴展性,便于針對新產品和不同使用情況進行定制和擴展。
  • 強調無障礙性和包容性,為不同背景和能力的用戶提供易于使用和導航的界面設計指南。
  • 在所有Uber產品和平臺中采用統一、一致的視覺語言,打造出具有辨識度和難忘的品牌形象。
  • 致力于持續的改進和迭代,根據用戶反饋和數據分析不斷更新和優化設計系統。

總的來說,基礎設計系統是Uber在設計和產品開發流程中的關鍵環節,使該公司能夠大規模地開發出以用戶為中心、易于使用的無障礙產品和服務。

網站—https://baseweb.design/

本文由 @Tomda 原創發布于人人都是產品經理。未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!