中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在產品設計團隊中，設計系統的存在，有助于讓設計師、研發工程師、產品經理等角色協同工作，設計系統一定程度上還有助于保證多個產品和平臺之間的視覺一致性。這篇文章里，作者就對設計系統的價值、類型等方面做了相對系統性的梳理，一起來看。

設計系統的目的主要是為了在設計決策時，能夠提供一個多方已經達成共識的依據和基準，讓設計師和研發工程師之間（還有業務、產品等）更容易協同工作，從而建立一系列的精益敏捷的協作方式和運作流程。設計系統還有助于確保多個產品和平臺之間的視覺、交互、代碼等一致性。在重大的品牌視覺升級或是界面重構都是可以通過設計系統進行大規模管理和升級。

在我剛剛學習設計系統的時候，加上自身英語水平基礎薄弱，在閱讀一些國外的文章的時候，經常容易混淆設計名詞以及對應內容。通過不斷的實踐運用，也有自己的理解，也希望和我們社區的設計師們一起探討。

一、設計系統 VS 風格指南：有什么區別？

1. 范圍

• 風格指南 – 通常側重于產品的視覺傳達，設計元素，如調色板、排版和圖標，外觀、材質等。
• 設計系統 – 涵蓋更廣泛的設計元素，包括用戶界面組件、模式和交互設計原則，零部件、組合形式。

2. 功能

• 風格指南 – 包括如何使用元素的基本準則，可以簡單理解為設計規范或參考；設計系統不僅如此，還提供了關于如何使用和實現每個元素的詳細文檔和指導。
• 設計系統 – 包括可用于構建組件的代碼塊和設計模板以及運用場景歸納。

3. 擴展

• 風格指南 – 為特定項目或產品而設計的，可能不易適配或擴展到其他項目或產品。
• 設計系統 – 被設計成靈活且可擴展的，允許在團隊內跨多個產品或項目中重復使用組件和模式。

4. 管理

與風格指南相比，設計系統通常需要制定更加結構化的管理維護機制。這是因為設計系統涉及更復雜的元素，需要設計師、研發工程師和其他利益相關者之間的共創協作。

管理維護機制可確保設計系統長期保持一致性和最新性。我們也是制定新增、修改、審核、運用等維護流程，從單點（設計師）維護，到共創（多部門）協作，以及運用AI技術解決統計使用頻次、差異點等，原先需要投入大量設計師進行分析統計。

二、設計系統如何幫助提高可擴展性？

設計系統通過構建一致、可復用的用戶界面和高效調用的交互和研發框架來幫助實現可擴展性。這不僅能夠節省大量時間和降低應用錯誤，并且讓企業或團隊能夠隨著時間推移或產品的發展不斷迭代設計標準，體現積累和復利的優勢。

我們通過以下方式實現目標：

• 一致性 – 有助于我們構建產品和服務的一致外觀和情感表達。通過系統中預制的用戶界面組件和設計模式庫，我們可以快速且輕松地搭建出新產品，同時還能夠保持一致的用戶體驗。
• 可復用性 – 模塊化設計，這意味著單個組件可在不同的產品或服務中重復使用。這樣就不需要大量額外設計，無需重復“造輪子”，也能將設計工作擴展并覆蓋整個團隊產品以及未來的產品。
• 高效性 – 通過提供一套預制的設計元素和指南（像不像預制菜，或許都是來自于設計系統），節省時間并減少錯誤。這對我們團隊從事大型項目特別有幫助，因為這可以讓我們更加專注于項目的差異化，再也不用重新設計每個元素。
• 靈活性 – 允許企業隨著需求的變化或業務發展而調整或迭代其設計標準。這樣就更容易根據需求擴大或縮小設計工作，再也不用犧牲或破壞一致性或質量。

這也就衍生出可以通過“拖拉拽”的設計方式搭建頁面，從而也喚醒低代碼、無代碼的工具產品。在設計一些常規中后臺產品界面設計已經無需視覺設計，而我們更多介入業務的梳理和產品架構的工作范疇。

三、設計系統有哪些不同類型？

以下是我們歷經多年項目所總結的設計系統類型。每當選擇實施其中的某一種類型的設計系統，主要是取決于項目的需求和目標。

1. 品牌設計系統

側重點在于創建和維護所有營銷和物料視覺設計的品牌一致性。包括調色板、排版、圖標、圖像和其他品牌相關元素的品牌指南。這并非只是品牌視覺識別系統（VI），而是涵蓋了 MI（品牌理念）、企業終端形象系統（SI）和行為識別（BI）等部分。作為設計師企業辦公室的導視系統、裝修設計，都會涉及到，雖然大多數人都會認為只要與美術相關的事情設計師都可以搞定，事實也是如此，但設計師就本應該是跨界的。

2. 用戶界面設計系統

側重點在于數字產品和服務創建和維護一致的用戶界面。包括用戶界面（UI）組件、風格指南、設計模式和交互設計原則指南。同樣，這并非只是界面視覺設計系統（UI），而是涵蓋了 UX（用戶操作）、MD（動效）等部分。如今，全棧式設計師也越來越多了，畢竟是科技時代造就新時代的工程設計師。

3. 模式庫

側重于用戶界面（UI）設計基礎模式，如按鈕、表單和導航菜單。包括一系列可在不同項目中重復使用的預設。

4. 設計語言

結合品牌和用戶界面設計系統，創造出一種整體設計方法。包括理念、原則、視覺、交互、行為等方面的設計指南。

5. 組件庫

組件庫與模式庫類似，但包括更詳細的文檔和每個組件的代碼段。開發人員通常使用它，通過提供可在項目中輕松實施的預建組件來加快開發過程。目前我們團隊已經模式庫和組件庫合并打通，將設計模式和研發組件 一一 對應，所謂設計即代碼，代碼即設計。

6. 內容設計系統

側重點在于所有產品和服務，營銷和設計的材料中，創建和維護一致的內容策略。它包括語音語調、信息傳遞和內容結構指南。傳遞給用戶不僅僅只有圖像視覺，還有文字內容，這往往被設計師所忽略。

四、設計系統：收益、最佳實踐和實施挑戰

設計系統可以幫助企業實現多個目標，如改進工作流程、提高設計一致性、減少開發時間和成本。

下面是幾個例子：

Airbnb – Airbnb 的設計系統名為 “Design Language System”（DLS），幫助他們在不同平臺和設備上實現品牌一致性。DLS 還改善了設計師和開發人員之間的協作，縮短了開發時間，提高了用戶體驗。

https://airbnb.design

IBM – IBM 的設計系統名為 “Carbon Design System”，幫助他們整合設計標準，并在所有產品中推廣更加一致的視覺語言。Carbon Design System 還幫助 IBM 的開發團隊縮短了產品上市時間，改善了用戶體驗。

https://carbondesignsystem.com

Atlassian-Atlassian 的設計系統名為”Atlassian Design Guidelines”（ADG），幫助他們在產品組合中實現了更加一致的設計。ADG 還幫助 Atlassian 簡化了開發流程，降低了開發成本，改善了用戶體驗。

https://atlassian.design

雖然設計系統可以為組織帶來巨大的利益，但是我們在推動和實施設計系統時也面臨很多挑戰。

其中一些挑戰包括：

• 保守派 – 設計系統通常需要對既定的設計和開發工作流程進行重大變革。對變革的抵觸會使新設計系統難以實施。
• 復雜性 – 設計系統可能很復雜，尤其是在企業擁有大量產品組合的情況下。創建和維護設計系統可能需要投入大量的時間和資源。
• 跨部門 – 實施設計系統需要不同部門利益相關者的支持。讓利益相關者相信設計系統的好處是一項挑戰。

為了克服這些挑戰，我們采取以下幾個步驟：

• 從小做起 – 實施設計系統是一項艱巨的任務。從小處著手，從單一產品或單一設計元素入手，有助于形成勢頭，并獲得利益相關者的支持。
• 利益共創 – 在實施設計系統時，與利益相關者合作至關重要。讓利益相關者盡早參與進來，并在整個設計系統開發過程中鼓勵他們提供反饋和意見。
• 宣傳優勢 – 向利益相關者宣傳設計系統的優勢至關重要。強調設計系統如何改進工作流程、減少開發時間和成本，以及改善用戶體驗。

從哪里可以了解有關設計系統的更多信息？

設計系統可以根據企業的具體需求進行定制，包括從調色板和排版到表單、表格和導航菜單等更復雜的用戶界面組件。通過為每個元素提供詳細的文檔和指南，設計系統可確保項目中的每個人都站在同一起跑線上，并了解如何正確使用每個組件。以下是一些有關設計系統的資源，可幫助您開始設計自己的系統。

1.InVision 設計系統管理器 – 一個幫助團隊創建和維護設計系統的平臺。它提供創建設計庫、樣式指南和用戶界面組件的工具，并允許團隊協作和共享設計資產。

https://support.invisionapp.com/docs/design-system-manager-dsm

2. Figma 設計系統 – 一種流行的設計工具，具有創建設計系統的功能。其設計系統功能包括可重復使用的組件、共享樣式以及用于存儲和共享設計資產的庫。

https://www.designsystemsforfigma.com

3. EightShapes Specs（Figma 插件）– 一種允許設計師直接在 Figma 界面中輕松創建設計規范和樣式指南的工具。該插件旨在通過自動執行創建和維護規范所涉及的許多重復性任務，簡化為設計系統創建文檔的流程。

https://www.figma.com/community/plugin/1205622541257680763/eightshapes-specs

4. Design Systems Handbook – 創建設計系統的綜合指南。它涵蓋了如何定義設計系統、如何創建可重復使用的用戶界面組件以及如何記錄設計系統以便于參考等主題。

https://www.designbetter.co/design-systems-handbook

5. Atomic Design – 一種創建設計系統的方法，強調使用模塊化、可重復使用的用戶界面組件。它提供了一種結構化的方法來創建可擴展且易于維護的設計系統。(大家熟知的原子設計）

https://uxdesign.cc/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa?gi=7f581adec459

6. Shopify Polaris – Shopify 使用的設計系統，它是 GitHub 上的一個開源項目。它包括排版、色彩、布局和用戶界面組件指南，以及為希望在自己的項目中實施該設計系統的開發人員提供的資源。

https://polaris.shopify.com

7. Design System Podcast – 一個探索設計系統世界的播客。播客內容包括對該領域專家的采訪，以及對設計系統管理、文檔和采用等主題的討論。

https://www.designsystemspodcast.com

8. Design System Slack Community – 面向設計師、開發人員和其他對設計系統感興趣的專業人士的論壇。它為創建和維護設計系統相關主題的討論和合作提供了空間。

https://www.design.systems

9. Design System Repo – 設計系統示例、資源和工具的精選集。它提供大量有關設計系統的信息，包括案例研究、風格指南和設計系統庫。

https://designsystemsrepo.com