在國內,都有哪些設計系統(Design System)?

0 評論 2014 瀏覽 7 收藏 27 分鐘

上一篇文章,我們講了2023的10大設計系統。這一期,我們來解釋一下設計系統的定義,以及在國內,都有那些優秀的設計系統可以學習,希望可以幫到大家。

什么是設計系統(Design System)?

設計系統(Design System)是一套綜合性的指導原則、組件和規則,它協助團隊以一致、高效的方式設計和開發數字產品。設計系統通常包括以下幾個關鍵要素:

  1. 設計原則和規范:這些是設計決策的基礎,包括品牌指導、用戶體驗原則等。
  2. UI組件庫:一套預先設計好的用戶界面元素,如按鈕、輸入框、導航欄等,這些元素可以在多個項目中重復使用。
  3. 代碼組件:與UI組件相對應的前端代碼,它們使設計能夠直接轉化為軟件開發中的實際元素。
  4. 文檔和指南:詳細記錄了如何使用設計系統的各個組件和原則,通常以在線格式提供,方便團隊成員查閱。
  5. 工具和資源:支持設計和開發流程的各種工具,如設計模板、代碼庫、設計軟件的插件等。

設計系統的主要目的是確保品牌和用戶體驗的一致性,同時提高跨團隊的工作效率。通過使用設計系統,組織能夠更快地設計和開發產品,同時保持產品的質量和一致性。

為什么要創建設計系統(Design System)?

  1. 提高效率:設計系統提供了一套可重用的組件和規則,使得開發人員和設計師可以快速構建新頁面或功能,而不需要每次都從零開始。這意味著團隊可以更快地推出新產品或更新。
  2. 確保一致性:設計系統確保了產品在視覺和用戶體驗上的統一性。不論團隊規模如何,它幫助所有人遵循同樣的設計準則和風格,使得最終產品在不同頁面和功能間保持一致的外觀和感覺。
  3. 促進團隊協作:設計系統作為一個共享的資源庫,促進了不同角色(如設計師、開發人員、產品經理)之間的理解和溝通。它提供了一個共同的語言和參考點,幫助團隊成員更好地協作和交流。
  4. 減少錯誤和重復工作:有了一套明確的指導和組件,團隊成員在創建設計或編寫代碼時更不容易出錯。這也減少了因不一致或錯誤而需要的修改和迭代。
  5. 易于維護和更新:隨著產品的發展,設計系統使得維護和更新變得更加容易。更新一次設計規則或組件,可以自動應用到整個產品中。

設計系統是為了提升團隊工作的效率和質量,確保產品在不斷演變的過程中保持一致性和可維護性。

可以從他們身上學到什么(Study)?

從設計系統中,無論是作為設計師、開發者還是產品經理,都可以學到許多寶貴的知識和技能:

  1. 設計和編碼最佳實踐:設計系統展示了如何有效地應用設計原則和編碼標準。通過研究和使用設計系統,你可以了解到關于顏色理論、排版、用戶界面布局、交互設計等方面的最佳實踐。
  2. 一致性和可復用性:學習如何創建可重復使用的組件和設計模式,以及如何在不同項目中保持視覺和功能上的一致性。這對于提升工作效率和保持產品品質至關重要。
  3. 跨團隊協作:設計系統強調了團隊成員間的協作重要性。它教你如何與其他設計師、開發人員和利益相關者有效溝通和協作,確保設計決策和開發過程中的透明度和一致性。
  4. 系統性思維:設計系統要求你采用更宏觀的視角來看待設計和開發。你將學會如何思考和處理一個大型項目的不同部分,如何確保它們共同構成一個協調一致的整體。
  5. 適應性和可擴展性:通過了解和使用設計系統,你可以學習如何構建靈活且可擴展的設計,這些設計能夠適應未來的變化和增長。
  6. 用戶體驗的重要性:設計系統使你更加專注于用戶體驗,了解如何通過統一和直觀的設計提升用戶滿意度和參與度。
  7. 技術和創意的結合:設計系統展示了技術實現與創意設計如何緊密結合,推動了對新工具和技術的探索,以及它們如何支持創意過程。

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

一、騰訊 — TDesign企業級設計體系

TDesign 是具有包容性的設計體系,它強調為業務提供產品、服務等過程中,追求以人為本、人人受益的包容性,要求搭建過程中,了解業務底層,理解業務場景的多樣性,并在繁雜的業務場景中尋找共性和特性,確保彼此能靈活地在同一個環境并存,既能滿足當下需要,也能作用于更廣泛的場景,為不同的產品保留定制空間,在保證不同產品能夠體現自我特色的同時,TDesign 還可以為更廣泛的產品提供適合的服務。

TDesign的主要特點包括:

  • 開源開放,持續迭代。
  • 采用 MIT 許可協議,始終保持開放的心態,期待各方一起共建開源生態
  • 包容多元,靈活易用。
  • 保持設計敏銳感,在繁雜的業務中尋找共性,提供通用的設計解決方案。

網站https://tdesign.tencent.com/

二、字節跳動出品的企業級設計系統

ArcoDesign 以”務實浪漫,高效美接融”為愿景,秉承一致性(Agreement)、韻律感(Rhythm)、清晰度(Clear)、開放性(Open)的設計哲學。

我們致力于橋接開發與設計的差距,從開發者和設計師的視角出發,采用更加系統化的思維模式解答業務難題。通過精致完善的設計資源,流暢簡約的工具集和豐富的生態平臺,迅速提高工作效率與愉悅感。

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

  • 靈活定制 · 豐富的原子級組件
  • 智能連接 · 全面的生態平臺
  • 風格配置平臺 (Design Lab)
  • 物料市場 (Material Market)
  • 色彩配置工具(Palette)

Arco 致力于探索更優質的設計體系,以解決復雜的業務以及冗余的溝通帶來的體驗問題,徹底解放開發及設計師的雙手。

網站 —https://arco.design/

三、金山云企業級設計解決方案 — Kingcloud Design

KingDesign設計系統是??云基于多年的企業級產品設計開發經驗,以??云設計語?為基礎,?于企業級產品的開源設計系統,該系統由組件、開發、設計資源、?具、解決?案、設計指南組成,?戶可使?KingDesign設計系統快速構建?致的數字產品。

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

KingDesign設計系統是?向企業級產品的設計解決?案,為企業提效??,提供設計思路、設計指南、設計資源幫助企業快速構建產品。

網站https://design.ksyun.com/

四、釘釘設計團隊 —Ding Design

Ding Design 是由釘釘設計團隊、產品團隊和終端技術團隊共同打造的前端組件項目,目的是為了幫助開發者提高開發效率、提升產品體驗。

Ding Design的主要特點包括:

  • 提煉自釘釘企業級終端產品的交互語言和視覺風格。
  • 完美支持釘釘主題,支持淺色主題及暗色主題。
  • 使用 TypeScript 開發,提供完整的類型定義文件。
  • 提供小程序、React Mobile、React PC 的組件支持。

網頁https://ding.design/#/

五、Ant 設計系統

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

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

Ant Design的核心特性包括:

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

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

網頁https://ant.design/

六、HiUI -小米企業級設計系統

HiUI 是小米集團信息技術部推出的企業級設計系統。HiUI 目前聚焦在企業級中后臺研發場景,以「高效、友好、開放」為設計價值觀,致力于打造輕松愉悅的辦公體驗。HiUI 提供了開箱即用的UI組件庫、設計指南、設計模板等資產,將產品、設計和研發從重復勞動中解放出來,專注于更有價值的業務需求設計。

HiUI – 設計系統的一些核心特性包括:

  • 全新的設計語言:全新升級自然輕量的設計語言,為產品帶來清爽簡潔的美感
  • 豐富的組件庫:根據業務場景提煉出5大類,50+基礎組件,覆蓋大部分使用場景,滿足各種功能需求
  • 極高的易用性:每個組件配有詳細的設計指導文檔,組件使用方式更清晰
  • 更好的開發體驗:提供功能強大、品類豐富的高質量組件,讓開發更簡單 ;更靈活的組件引入方式,支持分包與合包,讓升級更平滑 ;提供全鏈路開發體系,開箱即用,讓開發更高效
  • 技術全面革新:支持 TypeScript,提供優秀的類型提示和代碼檢查 ;擁抱 React hooks,提供全新的函數式編程體驗
  • 更強的擴展性:全量 DesignToken 主題定制,支持靈活主題定制和搭配 ;全面擴充底層 API (150+),提供優秀的組件定制和擴展能力 ;提供通用基礎 Utils 和 Hooks,提供穩定好用的工具服務

HIUI 是一個面向中后臺系統的前端組件庫,可以幫助開發人員快速實現交互一致、界面美觀的界面開發。

網站https://xiaomi.github.io/hiui/

七、Ke.Design 語言系統-

傳統的頁面產出流程是瀑布流式的 -一個工作流程中會涉及到不同的PM、設計師及前端工程師。

部分項目在時間緊張的情況下會出現分批交付并行開發的情況、如此多的角色共同參與一個項目下,合作方如果沒有緊密咬合、足夠的溝通,將會導致大量重復性的工作,增加項目周期、管理難度。

B端產品往往擁有復雜的業務邏輯且頁面量級巨大,快速迭代也會引發頻繁的變動以及并行概率的增加,需要設計師與開發能夠快速的產出方案保證上線。這樣的工作模式引發的副作用如:“體驗一致性差”、“設計效率低”、“還原度不可控”的問題也逐漸顯現,變成一個急待解決的問題。

B類產品中存在很多類似的頁面以及組件,可以通過抽象得到一些穩定且高復用性的內容,那么是不是可以通過這種方式從現在的模式中,解綁一下呢?

Ke.Design的一些特性包括:

  • 自然:設計者在進行產品設計時,應遵從用戶的本能,在感知、認知和行為層面營造貼近自然的產品體驗,使用戶能夠沉浸其中,進行無意識的行為活動。保持“自然”的產品設計理念,將有助于減少用戶在理解信息、進行決策和執行任務環節中的精力消耗,從而進入心流的極致狀態。
  • 高效:產品應該能助力用戶高效地完成目標。提供引導和幫助能使用戶快速上手,降低學習成本;對功能和信息進行預先配置,可以降低用戶的操作成本,使他們快速開展任務。
  • 包容:主流產品或服務的設計應能夠被盡可能廣泛地使用,無需特別的適應或特殊的設計。包容性主要體現在兩個方面:產品的設計形態應該適應內部業務的發展,同時滿足更廣泛人群的使用場景和需求。

網站https://design.ke.com/

八、有贊-Zan Design System

有贊是一個商家服務公司。我們首先為商家提供客戶管理、在線營銷、在線銷售、門店管理等全面提高經營效率的系統解決方案,有 SaaS 產品,也有 PaaS 云;同時還提供人才培訓、供應、金融等增值服務。

多年來,我們給來自不同行業的幾百萬商家提供著服務。這樣足夠豐富的客戶和足夠豐富的需求環境,讓有贊沉淀了不少關于產品設計的經驗和方法,我們愿意將這些經驗完整地共享出來,希望可以幫助更多同行提高產品設計和研發效率。

有贊-Zan Design System的一些特性包括:

  • 有效:讓設計助力業務成長,賦能業務。
  • 高效:包括1)簡化流程:設計簡潔直觀的操作流程;2)清晰明確:語言表達清晰且表意明確,讓用戶快速理解進而作出決策。
  • 反饋:包括1)控制反饋:通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作;2)界面反饋:操作后,通過界面元素的變化清晰地展現當前狀態。
  • 可控:包括1)用戶決策:根據場景可給予用戶操作建議或安全提示,不能代替用戶進行決策;2)結果可控:用戶可以自由的進行操作,有可逆的空間和余地。
  • 一致:包括1)與現實一致:與現實生活的流程、邏輯、習慣保持一致,與物理世界的客觀事實保持一致;2)在界面中一致:所有的元素和結構需保持一致。

Zan Design 設計價值觀為有贊產品設計,提供普適、抽象的評判標準和方向,激發了更為具體和行之有效的設計原則,繼而又產生為具體的設計問題提供向導和一般解決方案的設計模式。

網頁https://design.youzan.com/index.html

九、Mand Mobile — 后臺設計系統

Mand Mobile,由滴滴出行前端團隊精心打造,專為金融領域量身定制的移動端 Vue 2 組件庫。其不僅助力前端開發者迅速搭建項目,更以其專業嚴謹的UI風格聞名。目前,該組件庫已廣泛應用于滴滴四大金融業務板塊,覆蓋逾十款重點產品。

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

  • 豐富的組件:40+的實用組件,能夠滿足移動端開發的基本需求,尤其是對金融場景的需求進行了特別支持
  • 統一的視覺規范:由滴滴金融設計師設計并維護,保證了應用的項目內部、項目之間都能保持高度的視覺一致性
  • 適用于多場景的產生:提供按需加載能力,使用靈活,避免引入無用代碼,導出es,umd兩種格式以及px,vh/vw兩種樣式單位
  • 靈活轉換的樣式主題:UI樣式可配置,拓展靈活,輕松適應不同的設計風格
  • 支持TypeScript
  • 支持服務端渲染

Mand Mobile 是由滴滴出品的基于 Vue 2 開發的前端 UI 組件庫,項目源碼基于 Apache 2.0 開源協議托管在 Github 上,任何個人和公司都可以免費下載使用,也可以用在商業項目上。

網站https://didi.github.io/mand-mobile/#/zh-CN/home

十、NutUI-JDT — 京東科技移動端組件庫

NutUI-JDT 是京東科技風格的移動端組件庫,使用 Vue 語言來編寫可以在 H5,小程序平臺上的應用,幫助研發人員提升開發效率,改善開發體驗。

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

  • ?? 70+ 高質量組件,覆蓋移動端主流場景
  • ?? 支持一套代碼同時開發多端小程序+H5
  • ?? 基于京東APP 10.0 視覺規范
  • ?? 支持按需引用
  • ?? 詳盡的文檔和示例
  • ?? 支持 TypeScript
  • ?? 支持服務端渲染(測試階段)
  • ?? 支持定制主題,內置 700+ 個主題變量
  • ?? 國際化支持
  • ?? 單元測試覆蓋率超過 80%,保障穩定性
  • ?? 提供 Sketch 設計資源

網站https://nutui.jd.com/jdt/?theme=jdt&ref=88sheji.cn#/

十一、Titian Design-微盟移動端核心業務

源自微盟移動端核心業務,我們的目標是通過 Titian Mobile 助力開發者實現可持續地提質增效,并不斷打造良好的移動端產品體驗。

Titian Design的核心特性包括:

  • 多渠道一體化:多端適配,同時支持微信、支付寶、小紅書、快手小程序等多個主流渠道,同時保持API與功能統一。Titian 基于微盟自研的多渠道轉碼技術,支持業界主流的 MiniProgram(即將開放),以及基于 Web Components 支持 React、Vue 3 開發技術棧,采用 MIT 許可協議,秉承開放、開源原則,期待共建生態。
  • 千變萬化,隨心搭配:借助Titian組件,能更便捷地搭建應用。你想得到的、想不到的樣式變量,我們都能提供。

網頁https://titian.design.weimob.com/

十二、Semi Design-抖音

Semi 多用于前綴或詞組中,表示「一半」 —— 正如同一個完整的企業應用,通常由業務邏輯與前端界面構成,Semi Design 希望成為這不可或缺的一半,為企業應用前端提供堅實且優質的基礎。

我們相信,設計系統的真正價值在于降低前端的搭建成本,同時提供優秀的設計和工程化標準,充分解放設計師與開發者的生產力,從而不斷孵化明星產品。

Semi Design 的核心特性包括:

  • 模塊化設計:Semi Design將設計元素分解為可重復使用的模塊,這樣可以提高設計的效率和一致性。
  • 適應性和靈活性:Semi Design鼓勵設計師和開發人員在保持整體一致性的同時,根據不同的業務場景和用戶需求進行靈活的設計和開發。
  • 可視化工具:提供了一系列的可視化工具,幫助設計師和開發人員更好地理解和實現設計。

網頁https://semi.design/zh-CN/

十三、HarmonyOS-華為

鴻蒙生態與您一起{探索} 萬物互聯 無限未來

HarmonyOS的創新體驗將幫助您應對萬物互聯時代帶來的挑戰與機遇,結合覆蓋應用生命周期的場景解決方案,打造受用戶喜愛的應用。通過全場景流量入口、AI加持下的智慧分發,讓更多用戶能夠暢享您的應用。

HarmonyOS-華為核心特性包括:

  • HarmonyOS 讓您的應用自由跨端:元服務是輕量化服務的新物種,它提供了全新的服務和交互方式,可分可合,可流轉,支持免安裝等特性,能夠讓應用化繁為簡,讓服務觸手可及。
  • HarmonyOS 萬能卡片助您服務直達:HarmonyOS應用或元服務以萬能卡片的形式展示在設備桌面,幫助用戶快速訪問、處理應用內信息。設置萬能卡片后,用戶在桌面即可看見應用的實時信息并可以進行操作,所見即所得。
  • HarmonyOS 用“簡單”激活您的設備智能:HarmonyOS 是新一代智能終端操作系統。為不同設備的智能化、互聯與協同提供了統一的語言。設備可實現一碰入網,無屏變有屏,操作可視化,一鍵直達原廠服務等全新功能。通過簡單而智能的服務,實現設備智能化產業升級。

網頁https://developer.huawei.com/consumer/cn/

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

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

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

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