設計系統簡介

擴展的力量

Marco Suarez

在20世紀60年代，計算機技術開始超過軟體編程發展的速度。計算機變得更快，更便宜，但軟體開發仍然緩慢，難以維護，容易出錯。這個差距以及如何處理這個問題的困境，被稱為「軟體危機」。

1968年，在北約軟體工程會議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基於組件的開發方式，以此作為解決困境的可能方案。基於組件的開發提供了一種通過使代碼可重用來加快編程的潛力，從而使其更有效且更容易擴展。這降低了工作量，提高了軟體開發速度，使軟體更好地利用現代計算機的力量。

現在，50年過去了，我們仍在在經歷類似的挑戰，但這次輪到了設計。由於仍然在針對個別問題量身打造解決方案，設計在與支持的應用程序一起進行擴展時遇到了困難。

你有沒有進行過UI審查，發現你使用了幾十個相似的藍色，或類似的按鈕？在應用的每一個界面中都這樣做，很快你就會開始意識到你的設計變得多麼不一致，不完整和難以維護。

圖1. UI審計收集了所有簡單的UI元素的組合，以說明您的團隊在設計債務上陷得有多深。

註：設計債務（Design Debt），其實這個詞兒我之前也沒聽過，可以參考這裡https://austinknight.com/writing/design-debt/如果覺得有用就在後台打1回頭我把這個翻了

為了讓設計在這種情況下跟上開發的速度，企業有以下幾種選擇：

2.設計更快

3.創建適用於多個問題的解決方案

即使僱傭更多的人同時工作得更快，現實是定製的設計根本無法擴展。定製的設計是緩慢的，不一致的，越來越難以維護。

設計系統使團隊能夠通過使設計具有可復用性來更快地構建更好的產品 - 可復用使擴展成為可能。這是設計系統的核心和主要價值。設計系統是一系列按照明確的標準指導設計的可重複使用的組件，將它們組裝在一起可以構建任意數量的應用程序。

工程師已經這樣工作了50多年。現在是設計充分發揮潛力的時候了。

用系統思維來擴展設計

你可能很清楚，現在設計系統已經成為軟體行業的一個熱門話題了—— 這是有原因的。設計正在擴展。許多企業都在設計上進行投入，因為他們認識到其產品的客戶體驗提供了競爭優勢，吸引並保留了客戶，同時降低了支持成本。

以下是在設計上進行投資的公司內的常見情況：

• 設計團隊正在成長

• 設計分散在整個公司的團隊中，可能在多個地點

• 設計在所有平台的所有產品中扮演著重要的角色

如果你是一名設計師，這種設計投入可能聽起來令人興奮，但它帶來了很多挑戰。當許多團隊各自負責您產品的各個部分時，您如何設計跨平台的一致UI？你將如何使所有這些團隊快速迭代？你將如何維護因許多設計師創建新的定製設計不斷增長的不可避免的設計債務？

要理解創建設計系統如何應對這些挑戰，我們必須了解什麼是設計系統。設計系統將2個概念與單獨的優點結合在一起產生了比其單獨的部分更加強大的東西。

標準

掌握Macintosh用戶界面的技術知識是產品設計的關鍵因素，但理解用戶界面背後的理論可以幫助您創建出色的產品。

MACINTOSH HIG

蘋果

不僅要了解系統設計背後的原因，而且還要了解為什麼創建出色的用戶體驗至關重要。定義和遵守標準是我們創造這種理解的方式。這樣做消除了經常會在產品團隊中產生摩擦和混亂的主觀性和模糊性。

標準同時包括設計和開發。標準化命名約定，易用性要求和文件結構等內容可以幫助團隊始終如一地工作並防止出現錯誤。

可視化語言是您設計標準的核心部分。定義目標和顏色，形狀，類型，圖標，空間的目的和風格對創建品牌一致且連貫的用戶體驗至關重要。系統中的每個組件都包含這些元素，而且它們在表達品牌個性方面發揮著不可或缺的作用。

沒有標準，決策變得隨意而難以評判。這不但不會擴展，而且會造成不一致和令人沮喪的用戶體驗。

超越平台

您的視覺語言可以超越平台，跨網路，iOS，Android和電子郵件創建連續的體驗。將您的視覺語言記錄在設計系統站點的顯眼位置並進行展示。這將有助於向系統貢獻者告知組件的外觀和行為。

例如，Google的Material Design深入到他們的視覺語言的每個方面。看看他們關於顏色的頁面。

組件

組件是系統中的一部分可重用代碼。他們被用來一塊塊構建程序界面。組件的範圍很複雜。將組件簡化為單一功能（如按鈕或下拉菜單）可提高靈活性，使其更具可重用性。更複雜的組件，如特定類型數據的表格，可以很好地服務於它們的用例，但這種複雜性限制了適用場景的數量。你的組件越可復用，你需要維護的就越少，推廣就越容易。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！