我還買了一本Smashing Magazine出版的新書，叫做《Design Systems》，關于如何規劃、創建和維護設計模式庫/設計體系。上周剛剛在公眾號發過一篇“接下來會切入一些Design System方面的話題”，今天便看到這本書，感到很開心。
“如此這般體現著體系性與邏輯性的，需要你一方面站在全局去歸納信息、梳理架構，一方面從最基礎最細節的層面入手去精雕細琢的系統概念，總是能讓人為之著迷不是么。”
從前不覺得自己會培養出整理癖;自然也不是處女座。然而上半年搗鼓了一套WireframeKit for Sketch線框稿組件庫之后，便慢慢開始傾心于這件事?？傊苡腥?，無論總體還是細節執行層面也都充滿了持久性的挑戰。過去在博客中似乎沒有涉及過相關話題，今天開始會盡力分配到更多關注度。挑選了一篇泛方法與價值定義方面的文章做譯，權且作為暖身。
下面進入譯文。
“設計規范”這一概念早已行之有年，它對于一個產品甚至一家公司的品牌識別效應的構筑起著重要的作用。如今，作為其升級版本，“設計體系”(Design System)又將這一概念提升到了新的高度。
過去，UI設計師們會創建一些結構松散的設計說明文檔，其中包括配色、字體、按鈕樣式或是圖標一類的風格定義。這些文檔通常會被安靜地保存在硬盤里，僅在新設計師加入團隊或外部設計代理商需要了解相關規范時才會被想到。
在日常工作中，這些文檔可能沒有太多的實用價值，設計師們在很多時候僅會憑記憶來判斷某些設計模式是否被使用過。長此以往，一致性方面的問題便會積累起來，最終導致難以收拾的狀況也是十有八九。
近年來，“設計規范”逐漸被“設計體系”或“設計語言”(Design Language)的概念重塑，與之俱來的新設計方法可以幫助產品設計團隊更好地站在整體層面構建方案?；谝惶准軜媷乐敗⒁巹t統一的體系框架，產品表現層面的設計工作可以逐漸實現模塊化運作。諸如Brand.ai或是來自Invision的Craft等工具已經在一定程度上滿足了標準化的、模塊拖放式的設計需求，團隊協作過程中的統一性得到提升，視覺設計工作變得更加高效，有時甚至可以跨過傳統的低保真原型設計階段。
本文旨在討論設計體系的目標、價值及構成原理，而不會深入到具體的構建方法當中。
在過去的幾年中，我參與了很多公司的設計體系項目，其中既有初創型團隊，同時也包括了知名度和成熟度都相當高的組織。我最近的一個項目就是為Qstream打造設計體系。
我剛剛加入Qstream團隊時就意識到盡快打造一套新型、實用的設計體系是非常必要的一件事。產品設計缺乏一致性，而問題還會隨著功能復雜度的提升以及設計團隊規模的擴大而愈演愈烈 - 通過詳實、完備、易懂的設計體系對設計工作進行把控，從整體上穩定設計航向，這件事刻不容緩。
在這樣的背景下，我們開始創建自己的設計體系，即QUIK - Qstream User Interface Kit。
第一步：解決不一致的問題
再次說明，本文不會就創建設計體系的具體方法進行深入探討，不過我會對大致的流程進行簡要說明。
我們做的第一件事就是對產品當中現有的界面組件進行徹底的清查。Brad Frost(“Atomic Design”一書作者)曾就如何進行UI清查寫過一篇出色的指導文章“Interface Inventory”，建議閱讀。
這個環節會很艱難，你可能需要花費大量的時間，而且過程很枯燥，但卻是值得和必要的。通過UI清查，你可以：
充分了解當前產品當中哪些地方存在不一致性的問題。
站在全局層面理解一些關鍵元素的使用方式。
快速掌握產品的信息架構與運作方式。
向團隊集中展示現有問題，進而體現一套標準、統一的設計體系的必要性。
我們的平臺UI清查文檔，現有設計當中的不一致性問題一目了然。
第二步：創建元素
我們的設計體系由三個部分組成。
品牌：產品的品牌識別由一些關鍵的視覺要素構成，包括配色、字形、圖標等等。
界面元素：包括那些最小顆粒度的、在全局范圍內可復用的元素，例如按鈕、文本輸入框等等。
組件：組件由若干界面元素構成。多個組件協同配合，形成常見的設計模式，例如對話框、列表、卡片等等。
我們需要根據UI清查的結果對設計體系的組成元素進行優先級判定，看看哪些元素在產品全局范圍內被使用的最為廣泛，以此為序逐一梳理。
在著手處理諸如按鈕、文本輸入框等具體元素之前，我們會首先對風格與樣式規則進行基礎性的定義，包括配色、字形、圖標、間距等等。
依照我們的執行順序，設計體系的建設工作越深入，所涉及到的元素在產品當中的權重越低。不過無論怎樣，它們都是體系的一部分;所有元素無一或缺才能確保設計語言的完整和一致。
我們還有一個針對插畫設計風格的設計體系項目正在進行中，本文暫不做詳解，如果你有興趣，可以到我們的Behance了解更多。
第三步：完善
我們目前正進行到這一階段。坦誠地講，我們可能永遠也無法真正走完這個階段。在你接受設計體系的挑戰之前，最好明白一點 - 這是個永無止境的過程。你在打造的更像是一款產品，而非終點明確的項目 - 設計體系需要隨著產品的發展而不斷的成長和進化。
你可能需要專門組建團隊來負責設計體系的維護，或是由一些設計師來專職擔任。一套嚴整規范的設計體系可以為產品設計工作帶來不可或缺的核心價值，使工作流程更加聚焦、清晰，設計模式的一致性與產品開發速度都能得到顯著提升。
綜合性體系
站在產品全局層面創建并維護一套行之有效的設計體系，這只是規范化、體系化的一部分;我們同時還在構建產品的品牌規范及設計原則。
我們認為，在產品設計的復雜性上升到一定程度之前，將基礎框架奠定牢靠是非常關鍵的，否則各種潛在問題將一路積累下去，直到無法解決的地步。一系列規范、原則與體系的建立將能確保我們在擴大產品及團隊規模時穩定在正確的軌道上。
我們計劃在QUIK進入實用階段之后，繼續創建一套用于定義產品個性化特質的設計規范。我們將會建成的綜合性體系包括：
品牌規范(Brand Guidelines)：用于描述品牌個性與特質的一系列文檔，其中包括文案基調、配色風格、logo使用約束等方面的定義說明。
QUIK：將產品全局范圍內的設計理念、方法及界面組件等集約在一處進行標準化定義的設計體系(Design System)。
設計原則(Design Principles)：幫助我們恪守產品設計方向，聚焦于對團隊及客戶最為重要的目標之上，最大程度地實現二者的統一。
接下來
我們將持續力爭在產品平臺全局范圍內實現統一化的設計標準。面對這個目標，我們還有很長的路要走。產品團隊當中的每一個人都明白這是個巨大的挑戰，但我們同樣理解這件事對于產品保持平穩發展的重要性。
掃一掃關注微信公眾號
掃一掃訪問手機站
掃一掃打開小程序
