Written by: Evan Knox和Nancy Xu
設計係統包含很多內容，但其核心是代碼、模式和資源的集合，可以用於賦予所有產品相同的外觀和感覺。万搏体育app官方平台我們在Kinaxis的設計係統叫做Parcel，這是關於它是如何誕生的故事。這仍然是一個正在進行的故事，一個不可思議的旅程。
它如何開始
一切都始於一個bug。這是一個與Typescript React應用中的按鈕填充有關的UX錯誤。我們見過很多這樣的錯誤，但我們意識到，如果我們的產品具有一致性，能夠幫助我們知道錯誤隱藏在哪裏，從而更快地解決它，那麼這個特殊的錯誤就不會存在。如果我們做得對，我們可以在一個地方解決問題，解決所有地方的問題。
然而，我們沒有把事情做對。不是因為我們不在乎，而是因為時間是一種奢侈，我們生活在一個事事都是昨天的世界裏。
這艘船的類比
把你的產品想象成你的團隊正在航行的一艘船。你的船有幾個洞，需要修理。每個團隊都在某種程度上與這個問題作鬥爭。這是一個永恒的問題:我們是把船上的洞堵上，還是把更多的時間花在救水上?填補漏洞可能會很複雜，如果你時間緊迫，甚至可能不是正確的做法。現實情況是，如果你在一艘勉強能從一個島嶼到達另一個島嶼的船上，那麼你將永遠無法跨越海洋。
我們很容易把事情推到“總有一天，我們會解決它”的類別中，這種情況每天都在發生。在你的職業生涯中，你不可避免地會聽到或已經聽到別人說類似的話……
“我們可以下次再解決這個問題。讓我們把注意力集中在當前的優先事項上。”
如果你聽到這些話，提醒自己勒布朗定律(“以後==永遠”)，如果你認為某事需要做，你就盡你所能不去聽。
關鍵是:堵住這些漏洞。投入時間和精力，看著你的船從一艘簡簡單單的帆船變成一艘適合航海的船。無論你的“船”是一個應用程序，一個api還是一個網站，構建模塊比你可能意識到的更重要。
為了堵住漏洞，我們召開了一個簡短的會議，討論如何修複漏洞。我們討論了這個bug，也討論了未來如何修複這類bug。我們一致認為，我們需要一個更好的前進方式，這樣我們就可以專注於未來，而不是不斷地修複過去。在會議和大量的研究之後，所有的答案都指向一件事:我們需要創建一個設計係統。設計係統將確保我們的船是由設計良好的積木建造的，可以很容易地修改或更換，並在我們橫渡海洋時適應我們的需要。
啟動設計係統!
渥太華春天的天氣又冷又濕，連想出去走走都是件令人沮喪的事。在如此沉悶的天氣，以及由於大流行而被鎖在室內的情況下，2020年4月是我們開始開發《Parcel》的最佳時間。
經過更多的研究和計劃，包括與Shopify的工程師交談，觀看設計視頻，閱讀超現代的設計係統庫，如AirBnb, Material和Fabric，我們準備邁出一大步。我們的靈感來自於我們研究的每個係統的不同組件。我們特別喜歡並感謝AirBnb在React Conf(2019)上提到的“Base Variant Pattern”。有了宏偉的計劃，我們才剛剛開始，我們知道，如果我們的設計係統每天都能改進1%，我們最終就會有所成就。
我們推送到設計係統的第一個提交文件包含一個簡單的自述文件，寫著“design -0，開始!”最初的承諾。”這將形成我們今天使用的擴展設計係統的基礎。
期望與現實
大約在這個時候，Smashing Conference舉辦了一個關於“創建和維護成功的設計係統”的虛擬活動，邀請了Atomic Design的創造者Brad Frost(一個活著的設計傳奇)。我們抓住了這個機會，因為它與我們的目標一致。從會議中，我們學習了如何銷售和啟動一個設計係統，在它發展的過程中規劃和記錄它，以及在發展過程中維護它。
作為起點，我們使用UX團隊中已經流傳的風格指南，並將其應用。我們的靈感來自於原子設計模式，即從小的、孤立的元素(原子)構建更大的組件(分子)。
“當你必須站在火箭下麵時，發射火箭是很困難的。”——美國宇航局,可能。
科技行業有很多“無形的黃金標準”。當你創建的軟件/設計最終被使用時，你必須要做的事情。這包括測試、自動構建、審查、更多測試、檢測等等。這些是進入所有新軟件項目的巨大障礙，因為沒有它們，沒有公司會認真對待您，而且它們需要大量的努力、知識和時間來實現。
這些標準似乎每天都在變化，需要你不斷努力以跟上潮流。例如，學習webpack如何有效地捆綁代碼，或者學習Lerna如何在monorepo中管理多個包都是很痛苦的任務。在你最終看到Jenkins中出現一個小小的綠色建設勾號之前，有無數的陷阱和如此多的鮮血、汗水和淚水。
淩晨2點，第一次構建終於成功了。如果“我們的設計係統的製作”能夠在dvd中呈現，那麼這便是深夜工作的蒙太奇。這是一個巨大的初始努力，但隨著我們的自動化構建和測試的結束，我們的質量從未下降。
“我們該怎麼稱呼它呢?”
是時候開始真正的工作了:創建我們今天廣泛使用的可重用組件。
我們必須從小處著手。我們需要創建這個風格指南的“原子”，它可以轉化為我們計劃製作的每個組件的構建模塊。這些東西包括顏色、字體和圖標。每一天，展示設計係統在任何時刻的能力變得越來越重要。我們被團隊糾纏，因為我們不清楚已經做了什麼，正在做什麼，需要做什麼。要做到這一點，我們需要兩樣東西:一個好名字和一個網站。
名字是困難的。我們提出了一些關於係統名稱的想法，如徽章，Kargo和Frontier。我們最終選擇了Parcel，因為它與供應鏈和包裝的關係是Kinaxis這樣的供應鏈管理公司的核心內容。
包裹是一個我們都可以團結起來並為之自豪的名字。網站建好後，我們就開始工作了。一塊一塊地，或者更確切地說，一個原子一個原子地，我們緩慢而堅定地把“包裹”建設成今天的樣子。
設計係統同步:最好的循環會議
那年夏天，我們終於與管理層和高級工程師會麵，一起檢查了Parcel，並展示了我們的工作演示。
這次會議很特別，不是因為我們演示了什麼(我們已經研究同一個按鈕組件好幾個月了)，而是因為在這次會議上，我們的領導層可以看到我們設計係統的價值，以及圍繞它構建的工具集。看到我們產品中的Parcel組件，以及自動化構建框架的工作、測試和發布，使推動者和改革者相信Parcel確實符合標準，並且我們可以開始在其中投入實時時間。
所有的夜晚、周末、一個小時又一個小時的努力都是有回報的。通過看到真實事物的所有榮耀，可以做出決定，可以提出問題，可以完成更多的工作。
當然，在創造《Parcel》的整個過程中與人們進行接觸是非常重要的。通過與利益相關者和主題專家的谘詢，我們確保了Parcel滿足了我們公司的需求，並始終朝著正確的方向前進。
教書比做事更重要
在那次會麵後的幾個月裏，帕普已經起飛了。我們的小Readme文件變成了一個成熟的軟件項目，每天都有拉請求。我們越來越忙，忙著處理這些事情。我們很快就認識到，可靠的溝通和文檔比數千行代碼更有影響力。突然之間，人們不再問我們事情是如何運作的，而是問我們什麼時候能完成。
將關於Parcel及其狀態的信息傳播出去是一個挑戰，所以我們主持了一個技術演講，並啟動了一個Teams頻道。Parcel現在在多個團隊中使用，並演化為一套工具和資產，用於創建漂亮的、一致的設計。包裝組件幾乎存在於我們產品的所有部件中。我們有一個內部網站，上麵展示了所有的文檔和發布說明，我們計劃在不久的將來推出更好的文檔。
老實說，我們的大部分努力都花在確保與Parcel相關的一切對用戶來說都是簡單和清晰的。如果我們發現一個過程很複雜，我們會對它進行嚴格的檢查，並確保它可以在少於5個步驟內完成。例如，連接到我們的內部NPM注冊表可以通過創建一個'。而不是要求我們的用戶在我們的文檔中手動設置。
結論:給用戶一些真實的東西
到目前為止，我們從這一經驗中學到的最有價值的教訓是邁出一步，把真正的東西交到人們手中。永遠不要等待以後，當你聽到“也許以後，或者擁有就好了”這句話的時候，永遠、永遠、永遠不要放棄。在最壞的情況下，你會學到很多東西，但最有可能的是，你最終會得到一些令人驚歎的東西。創造《Parcel》是一段不可思議的旅程，毫無疑問，這將是我們職業生涯的亮點之一。
作者:
埃文·諾克斯是Kinaxis前端團隊的軟件工程師。他在Kinaxis工作了大約兩年，總部位於安大略省渥太華。
南希徐是渥太華Kinaxis公司的用戶體驗設計師，專門從事用戶界麵設計。她已經在Kinaxis工作了四年，參與了多個版本的RapidResponse。
討論
留下一個回複