按：最近在UX部門內推進設計體系的完善工作裳凸，這篇文章作為一個設計體系建構的實際案例，有很多值得學習的地方劝贸∫坦龋苦于水平有限，翻的比較粗糙映九。
聲明：文章版權歸原作者所有梦湘，原文圖片以及內容均歸屬原作者
作者：Jeremy bloom
來源：https://www.uxfree.com/the-three-lessons-that-changed-how-i-think-about-design-systems/
我的第一份產品設計工作在費城的一家名為Electronic Ink的設計咨詢公司，在那里我協(xié)助Penske重新設計了在線卡車租賃體驗。Penske的競品可以快速輕松地完成在線租借捌议，只需點擊幾下即可獲得報價哼拔。而Penske采取了較繁瑣的步驟來做同樣的事情，相對于競品則導致了業(yè)務和收入的損失瓣颅。
作為一個有抱負的年輕設計師倦逐，我渴望從頭開始重新設計整個Penske的租賃體驗。但實際上作為一名新手宫补，我的職責僅限于審核Penske現有的用戶界面檬姥，并幫助高級設計師對新概念進行線框化。這個項目讓我我第一次接觸設計體系守谓。
我們用了無數個小時用來對齊組件穿铆、修復頁面布局您单、以及完成模式庫斋荞，最終輸出供團隊使用的設計資源。這個項目我們花了大約六個月的時間贏得了客戶的高度評價虐秦。我們能夠將用戶的報價時間減少三分之二平酿，完成后的“在線租賃”在上線后業(yè)績大幅增長。
雖然這個項目具備極高挑戰(zhàn)悦陋，但我非常感謝這次工作蜈彼。讓我深知設計體系之于構建和維護數字產品的重要性 - 在我作為產品設計師的整個職業(yè)生涯中，這將成為我如影隨行的寶貴積累俺驶。
我的設計體系挑戰(zhàn)道路之最
在Penske的經歷之后幸逆，我與American Express，Deloitte和Apple等公司合作開發(fā)產品暮现，設計從移動應用到企業(yè)軟件等各種產品还绘。我最終入職了Percolate，一家為營銷團隊提供協(xié)作軟件的科技公司栖袋。
在過去的18個月中拍顷，我們的產品團隊一直致力于我們的平臺“Percolate Next”的重復迭代。引入了新的基礎架構和功能塘幅，以更好地支持我們的全球客戶昔案。作為其中的一部分設計工作，我們更新了Percolate 的用戶界面以確保更直觀的用戶體驗电媳。我花了2018年的上半年來建立一個設計體系用以支持這些迭代踏揣。
如果您從事產品工作，您可能以前曾聽過“設計體系”一詞匾乓。在最基本的層面上捞稿，設計體系是設計和工程團隊在構建軟件時使用的一組共享規(guī)范、組件和支持文檔。像Nathan Curtis括享，Brad Frost和Josh Clark這樣的人發(fā)表了一些關于這個主題的精彩文章搂根，所以我不會花太多時間在這里定義它。相反铃辖，我想專注于我在Percolate建立新設計體系時學到的經驗與教訓剩愧。
第1課：在開始旅程之前了解自己的位置
建立合適的團隊
我們的設計、產品經理和研發(fā)團隊在初期階段密切合作娇斩，以規(guī)劃Percolate Next項目的各個階段仁卷。我們組建了一個專門的團隊，負責協(xié)調重新設計犬第。這個“設計體系團隊”由兩名全職設計師和兩名全職工程師組成锦积。計劃是設計和開發(fā)設計體系，而其他團隊則致力于產品功能研發(fā)歉嗓。然后丰介，新設計體系在研發(fā)中的應用時間則有研發(fā)管理把控。
了解代碼庫的健康狀況
在我們的產品生命周期中鉴分，有時工程師編寫自定義或重復代碼而不是使用現有的組件庫哮幢，從而導致前端代碼庫不一致且臃腫。在開始Percolate Next項目之前志珍，我們建立了一個專注于代碼標準化的兼職團隊橙垢，以確保我們的組件的任何更新都能在全球范圍內得到響應。通過與工程師的協(xié)作伦糯，讓我們意識到團隊需要更清晰柜某，更易于使用的指南。
執(zhí)行界面清單以設定目標
我們在界面清單上花了幾周的時間敛纲，這使我們發(fā)現整個平臺的設計不一致喂击。我們發(fā)現的問題分為兩個部分; 視覺設計和交互設計。
發(fā)現的視覺設計問題從15個按鈕樣式到太多標題樣式载慈，還包括部分調色板設置導致設計混亂惭等，在客戶使用的顯示器上呈現我們的界面時缺乏對比度，我們還看到了表單框架間距導致對象無法相互確認關系等情況办铡。
隨著我們不斷完善設計辞做，交互設計問題也隨之而來。從用戶預期流程混亂到交互菜單溢出寡具，過多選項造成用戶理解困難秤茅，還發(fā)現常見操作的控件類型不一致，例如提交表單童叠。
做清單有助于我們?yōu)楦倪M用戶界面設定明確的目標框喳。
視覺設計目標
-標準調色板：創(chuàng)建可訪問（此處的可訪問或為具備較高可讀性课幕，通常會使用不同色標編碼標示）的標準調色板，為用戶闡明信息和界面狀態(tài)五垮。
-信息密度：為對象之間的間距和對齊創(chuàng)建規(guī)則乍惊，以便用戶可以輕松確定彼此之間的關系。
-類型層次結構：創(chuàng)建可應用于新設計體系的所有實例的標題放仗、子標題和正文類型規(guī)則润绎。
交互設計目標
-全局導航：在全局和特定于應用的導航之間創(chuàng)建清晰的層次結構和一致的關系。
-漸進式展示：創(chuàng)建提供適當詳細程度的模式诞挨，而無需用戶離開莉撇。
-交互操作：為操作創(chuàng)建一致的位置、樣式和交互惶傻，包括前進和返回按鈕棍郎。
-壓縮頁面類型： 為整個系統(tǒng)中的常見頁面類型創(chuàng)建一致的布局和功能。
第2課：確保每個人都說同一種語言
建立產品詞匯表
眾所周知银室，對于產品團隊之間的協(xié)作涂佃，審核共享詞匯表是必不可少的。我們受到Brad Frost的“原子設計”方法的啟發(fā)粮揉，用于命名我們的UI框架巡李。我們在Sketch中使用的命名約定必須與我們的代碼庫中的命名約定相匹配抚笔。這將確保我們的研發(fā)工程師扶认、產品設計師和產品經理都在擴展和使用相同的語言。我們定制了原子設計分類殊橙，以滿足我們自己的需求和內部術語辐宾。
-基礎是我們系統(tǒng)中每個UI的構建塊。例如：顏色膨蛮，排版叠纹，網格。
-元素是產品功能UI的最小部分敞葛。例如：按鈕誉察。在可能的情況下，我們將元素呈現為樣式庫中的狀態(tài)惹谐。
-樣式組件是特定的組件擴展和組合持偏。它們在不同的狀態(tài)下出現在設計體系內，由多個元素組成氨肌。
-模板是頁面級對象鸿秆，可將樣式放置到布局中，并清晰地表達設計的底層內容結構怎囚。
記錄一切
我們將設計體系構建為內部工具卿叽。我們希望我們的文檔能夠讓產品團隊成員解決問題并集思廣益，除了在用于和客戶討論界面外，還需要支持我們的營銷和客戶支持團隊考婴》废海考慮到這一點，我們將文檔構建為簡潔并通過示例支持沥阱。如果需要其他信息整胃，我們定義了如何使用、為什么使用以及何時使用該組件喳钟。
構建我們的設計資源
在我們開始Percolate Next之前屁使，我們的設計團隊沒有最新的UI組件和文檔資源。評審發(fā)現奔则，這些作品大部分處于不同的完成階段蛮寂。我們已經開始創(chuàng)建草圖庫并研究如何正確構建UI組件并組織我們的主文件，還完成了一個確定設計原則的研討會易茬。這個階段實際上是將各種零件湊到一起酬蹋，看看這些是從哪里開始建造的。
第3課：將正確的工具集成到團隊的工作流程中
選擇跨團隊協(xié)作的工具
雖然設計體系存在于動態(tài)的代碼中抽莱，但設計團隊是在Sketch中使用靜態(tài)版本來說明流程和原型功能范抓。我們選擇Sketch的原因是因為它可以保證設計文件內組件的一致性;（可關注sketch 資源庫功能，4.7版本后趨于穩(wěn)定） 這樣食铐，我們可以保證與研發(fā)工程師共享的設計文件始終保持版本更新匕垫。我們的主sketch庫位于共享的Google云端硬盤文件夾中，設為“只讀”權限虐呻，可防止其他團隊成員對其進行編輯象泵。
我們還利用Zeplin來傳達變化并提供組件進度的更新。Zeplin是設計師和工程師的協(xié)作工具斟叼，設計人員可以將設計轉化為規(guī)范和指南偶惠，工程師可以生成與平臺相關的代碼片段。整個產品團隊可以訪問Zeplin項目朗涩，鼓勵每個人留下反饋并詢問有關正在創(chuàng)建的內容的問題忽孽。Zeplin中的注釋功能非常方便，因為它提供了有關正在評論的組件的上下文谢床。這有助于我們的團隊快速響應兄一。
我們合作的另一種方式是通過Zeplin到Slack集成。我們創(chuàng)建了一個#design-system通道萤悴，當有人更新Zeplin的DS項目時提供消息通知瘾腰。
創(chuàng)建新流程以加快生產
一旦設計體系投入使用中，我們就開始接收產品團隊成員的需求覆履。這些快速需求要求我們創(chuàng)建一個簡單的系統(tǒng)來確認他們的優(yōu)先級蹋盆，而使用Google Spread sheets來完成優(yōu)先級確認對我們幫助巨大费薄。
我們還為整頁模板引入了第二個sketch庫。將整頁布局放入設計文件的能力大大提高了我們從設計到代碼的速度栖雾，因為設計人員不再需要進行前期工作楞抡，只要將組件放入空的畫板中。因為模板使用了我們主庫中的“符號組件”析藕。只有在引入新頁面類型或對功能進行重大更改時召廷，才需要重新提供詳細的線框圖。
