2021-08-13
3277
設計系統，讓企業數字化轉型像玩經營游戲一樣簡單。
在開發一套新產品的時候，你是不是也總會碰到這些？
設計師Amy：修圖5分鐘，找圖1小時。糟糕！我又改錯文件了......
開發Prateek：整個團隊并沒有人能聽懂我們在說啥......
產品經理Daniel：不是在去和Amy溝通的路上，就是在準備去和Jason溝通，天天擔心產品到底如何能準時上線......
Amy、Prateek和Daniel所面臨的這些煩惱與難題，時常充斥在產品研發的各個環節。而隨著企業對數字化產品快速迭代的需求不斷上漲，企業開始擴張內部團隊，優化工具，導致這些問題不減反增，同時又隱形增加了不少設計債務或技術債務。
而Design System 的出現與應用，則巧妙解決了上述問題，并為企業整體提質、增效，保持并擴大企業競爭力。
什么才是設計系統的真諦？
就像一千個人心中有一千個哈姆雷特，每個人對設計系統的理解看法不同，所以對設計系統的定義也都不盡相同。
「空集設計」認為設計系統其實是在系統化思維指導下，利用可復用的組件、模式、規范去統一設計語言，并滿足數字化產品所需的大規模設計的一種解決工具，也是企業實現數字化轉型的必要手段。
我們從諸多給設計系統所下的定義與實際的例子當中，發現定義中都不約而同的提到并囊括了像“規范、組件、模式”等關鍵詞匯。所以，我們可以從這幾個詞入手來更全面仔細的了解設計系統。
風靡全球的設計系統究竟都包含什么？
根據對目前企業所推出的設計系統的觀察，我們發現雖然每個企業在對構成部分的命名上加入了企業特性與創新，但是在內容上實際上都包含了設計理念、設計規范、組件庫與設計方法論。
01 設計理念 / Design Principle
設計理念是整個設計的核心，是構建視覺體系的理論基礎。對于產品發展與迭代來說，設計理念是視覺革新的旗幟與標桿。
在上圖的例子中，Salesforce的設計系統遵循清晰 (Clarity)、效率（Efficiency）、連貫（Consistency）、美觀（Beauty）的設計理念去構建其視覺設計。這些理念貫穿所有對外輸出的設計物料，保證視覺表達與品牌調性的一致性。
02 設計規范 / Style Guide
設計規范包含用于創建界面或其他設計交付物的特定實施指南、視覺參考和設計原則，是保持品牌形象穩定輸出的重要支撐。設計規范包括但不限于：品牌標識、色彩、字體、圖標系統、插畫、網格系統、按鈕系統、圖片使用等。
設計規范對內統一風格、提高效率，而對外可以帶來一致的品牌個性和特征，加深用戶對品牌的認知度。
03 組件庫 / Component Library
組件庫包含了已歸類的目錄和可重復使用在應用程序的UI元素，在一定的設計工具支持下，可實現在更改時，自動跨設計文件同步，保持信息的實時性與品牌視覺體系活力，提高設計組件的使用效率。
“組件庫”和“模式庫”有時可能會作為同義詞在設計系統中進行使用。而通常模式庫是用于包含供設計師使用的頁面內容結構、排版布局和模版等。
04 設計方法論 / Design Method
設計方法論是當設計師在進行設計時，從自身理論和方法上總結出的實質性建議。當遇到各種設計需求時，優秀的設計方法論可為設計師提供明確的流程指導與設立清晰的項目里程碑。
通常，我們的設計方案需要做到條理清晰，邏輯嚴謹且具有說服力，所以設計方法論也是整個團隊在打造產品時的指南針。
設計系統，一勞永逸？一勞永益！
在我們使用設計系統時，它不但能解決掉許多企業內部棘手的問題，同時也能為企業獲得不小的價值，其中，最顯著的6大優勢為：
01 擴展式設計 / Scale Design
02 管理設計債務 / Manage Design Debt
03 一致的設計 / Design Consistently
04 更快的原型 / Prototype Faster
05 提高可用性 / Improve Usability
06 易用性設計 / Build In Accessibility
01 擴展式設計 / Scale Design
設計系統用統一、系統化的設計語言去設計產品，用戶體驗的質量得到提升。與設計系統同時建立的設計系統站點，保證了設計系統可以及時更新，并記錄設計系統的所有方面，包括組件、指南和交互的最佳使用場景等，使團隊成員工作保持一致和同步。
02 管理設計債務 / Manage Design Debt
設計債務是由大量不可復用和不一致的樣式和組件構成的。設計系統可以使設計和代碼保持簡潔和可復用，并且持續升級和迭代。通過管理設計債務，可以減少一部分設計和代碼上的時間與金錢開銷，保持預算，使產品能夠有更多發展空間與維持更新迭代。
03 一致的設計 / Design Consistently
設計系統內一致且重復使用的標準化組件，提升了應用程序的易用性。標準化的組件還能讓設計師花更少的時間關注樣式，將精力更專注于在提升用戶體驗上。
04 更快的原型 / Prototype Faster
在設計系統下工作，就像玩樂高一樣，能夠快速拼湊流程和交互，同時構建無數的原型和方案進行快速驗證，從而幫助團隊快速獲得數據和結論。
05 提高可用性 / Improve Usability
頁面樣式的不一致會影響產品的可用性和產生CSS和JavaScript上的沖突。CSS會因為大量的不一致樣式元素和交互增加，使頁面加載時間過長，導致帶來糟糕的用戶體驗。通過構建整體的組件庫可以避免這些沖突，有效制作保質保量且統一的頁面樣式。
06 易用性設計 / Build In Accessibility
為實現程序或產品整體的易用性，在設計系統內建立組件時就可以添加相關屬性并體現包容性設計。這使程序或產品在使用組件構建時，可以始終保持易用性。并在程序和產品最終面向用戶時，保持良好的用戶體驗。
設計系統，遠遠不止于此
目前國內越來越多的企業開始把設計系統作為提升內部效率的主要工具之一，比如螞蟻金服的ANT Design，餓了么的Element UI和小紅書的ReDS。而設計系統不僅僅是企業內部增效的工具，其所具有的云端性、共享性、一致性、可控性也為企業數字化轉型做了充足的準備和鋪墊。
05 提高可用性 / Improve Usability
頁面樣式的不一致會影響產品的可用性和產生CSS和JavaScript上的沖突。CSS會因為大量的不一致樣式元素和交互增加，使頁面加載時間過長，導致帶來糟糕的用戶體驗。通過構建整體的組件庫可以避免這些沖突，有效制作保質保量且統一的頁面樣式。
06 易用性設計 / Build In Accessibility
為實現程序或產品整體的易用性，在設計系統內建立組件時就可以添加相關屬性并體現包容性設計。這使程序或產品在使用組件構建時，可以始終保持易用性。并在程序和產品最終面向用戶時，保持良好的用戶體驗。
設計系統，遠遠不止于此
目前國內越來越多的企業開始把設計系統作為提升內部效率的主要工具之一，比如螞蟻金服的ANT Design，餓了么的Element UI和小紅書的ReDS。而設計系統不僅僅是企業內部增效的工具，其所具有的云端性、共享性、一致性、可控性也為企業數字化轉型做了充足的準備和鋪墊。
「空集設計」為企業客戶提供的數字化轉型服務將圍繞設計系統展開，其包含以下三個方面：
1. 塑造數字化產品：深耕體驗，為企業打造具有競爭力的數字化產品；
2. 構建資產庫：打造專屬設計資產庫，更新企業內部數字化產品迭代的工作流程；
3. 定制創新體驗：結合AR/VR等高新科技，為企業定制獨一無二的數字化體驗。
下一篇：設計師如何洞察用戶需求？
