設計體系的目標、價(jià)值及構成原理

　　我還買(mǎi)了一本Smashing Magazine出版的新書(shū)，叫做《Design Systems》，關(guān)于如何規劃、創(chuàng )建和維護設計模式庫/設計體系。上周剛剛在公眾號發(fā)過(guò)一篇“接下來(lái)會(huì )切入一些Design System方面的話(huà)題”，今天便看到這本書(shū)，感到很開(kāi)心。

　　“如此這般體現著(zhù)體系性與邏輯性的，需要你一方面站在全局去歸納信息、梳理架構，一方面從基礎細節的層面入手去精雕細琢的系統概念，總是能讓人為之著(zhù)迷不是么。”

　　從前不覺(jué)得自己會(huì )培養出整理癖;自然也不是處女座。然而上半年搗鼓了一套WireframeKit for Sketch線(xiàn)框稿組件庫之后，便慢慢開(kāi)始傾心于這件事?？傊苡腥?，無(wú)論總體還是細節執行層面也都充滿(mǎn)了持久性的挑戰。過(guò)去在博客中似乎沒(méi)有涉及過(guò)相關(guān)話(huà)題，今天開(kāi)始會(huì )盡力分配到更多關(guān)注度。挑選了一篇泛方法與價(jià)值定義方面的文章做譯，權且作為暖身。

　　下面進(jìn)入譯文。

　　“設計規范”這一概念早已行之有年，它對于一個(gè)產(chǎn)品甚至一家公司的品牌識別效應的構筑起著(zhù)重要的作用。如今，作為其升級版本，“設計體系”(Design System)又將這一概念提升到了新的高度。

　　過(guò)去，UI設計師們會(huì )創(chuàng )建一些結構松散的設計說(shuō)明文檔，其中包括配色、字體、按鈕樣式或是圖標一類(lèi)的風(fēng)格定義。這些文檔通常會(huì )被安靜地保存在硬盤(pán)里，僅在新設計師加入團隊或外部設計代理商需要了解相關(guān)規范時(shí)才會(huì )被想到。

　　在日常工作中，這些文檔可能沒(méi)有太多的實(shí)用價(jià)值，設計師們在很多時(shí)候僅會(huì )憑記憶來(lái)判斷某些設計模式是否被使用過(guò)。長(cháng)此以往，一致性方面的問(wèn)題便會(huì )積累起來(lái)，終導致難以收拾的狀況也是十有八九。

　　近年來(lái)，“設計規范”逐漸被“設計體系”或“設計語(yǔ)言”(Design Language)的概念重塑，與之俱來(lái)的新設計方法可以幫助產(chǎn)品設計團隊更好地站在整體層面構建方案?；谝惶准軜媷乐?、規則統一的體系框架，產(chǎn)品表現層面的設計工作可以逐漸實(shí)現模塊化運作。諸如Brand.ai或是來(lái)自Invision的Craft等工具已經(jīng)在一定程度上滿(mǎn)足了標準化的、模塊拖放式的設計需求，團隊協(xié)作過(guò)程中的統一性得到提升，視覺(jué)設計工作變得更加好，有時(shí)甚至可以跨過(guò)傳統的低保真原型設計階段。

　　本文旨在討論設計體系的目標、價(jià)值及構成原理，而不會(huì )深入到具體的構建方法當中。

　　在過(guò)去的幾年中，我參與了很多公司的設計體系項目，其中既有初創(chuàng )型團隊，同時(shí)也包括了知名度和成熟度都相當高的組織。我近的一個(gè)項目就是為Qstream打造設計體系。

　　我剛剛加入Qstream團隊時(shí)就意識到盡快打造一套新型、實(shí)用的設計體系是非常必要的一件事。產(chǎn)品設計缺乏一致性，而問(wèn)題還會(huì )隨著(zhù)功能復雜度的提升以及設計團隊規模的擴大而愈演愈烈 - 通過(guò)詳實(shí)、完備、易懂的設計體系對設計工作進(jìn)行把控，從整體上穩定設計航向，這件事刻不容緩。

　　在這樣的背景下，我們開(kāi)始創(chuàng )建自己的設計體系，即QUIK - Qstream User Interface Kit。

　　一步：解決不一致的問(wèn)題

　　再次說(shuō)明，本文不會(huì )就創(chuàng )建設計體系的具體方法進(jìn)行深入探討，不過(guò)我會(huì )對大致的流程進(jìn)行簡(jiǎn)要說(shuō)明。

　　我們做的一件事就是對產(chǎn)品當中現有的界面組件進(jìn)行徹底的清查。Brad Frost(“Atomic Design”一書(shū)作者)曾就如何進(jìn)行UI清查寫(xiě)過(guò)一篇出色的指導文章“Interface Inventory”，建議閱讀。

　　這個(gè)環(huán)節會(huì )很艱難，你可能需要花費大量的時(shí)間，而且過(guò)程很枯燥，但卻是值得和必要的。通過(guò)UI清查，你可以：

　　充分了解當前產(chǎn)品當中哪些地方存在不一致性的問(wèn)題。

　　站在全局層面理解一些關(guān)鍵元素的使用方式。

　　快速掌握產(chǎn)品的信息架構與運作方式。

　　向團隊集中展示現有問(wèn)題，進(jìn)而體現一套標準、統一的設計體系的必要性。

　　我們的平臺UI清查文檔，現有設計當中的不一致性問(wèn)題一目了然。

　　第二步：創(chuàng )建元素

　　我們的設計體系由三個(gè)部分組成。

　　品牌：產(chǎn)品的品牌識別由一些關(guān)鍵的視覺(jué)要素構成，包括配色、字形、圖標等等。

　　界面元素：包括那些小顆粒度的、在全局范圍內可復用的元素，例如按鈕、文本輸入框等等。

　　組件：組件由若干界面元素構成。多個(gè)組件協(xié)同配合，形成常見(jiàn)的設計模式，例如對話(huà)框、列表、卡片等等。

　　我們需要根據UI清查的結果對設計體系的組成元素進(jìn)行優(yōu)先級判定，看看哪些元素在產(chǎn)品全局范圍內被使用的為廣泛，以此為序逐一梳理。

　　在著(zhù)手處理諸如按鈕、文本輸入框等具體元素之前，我們會(huì )首先對風(fēng)格與樣式規則進(jìn)行基礎性的定義，包括配色、字形、圖標、間距等等。

　　依照我們的執行順序，設計體系的建設工作越深入，所涉及到的元素在產(chǎn)品當中的權重越低。不過(guò)無(wú)論怎樣，它們都是體系的一部分;所有元素無(wú)一或缺才能確保設計語(yǔ)言的完整和一致。

　　我們還有一個(gè)針對插畫(huà)設計風(fēng)格的設計體系項目正在進(jìn)行中，本文暫不做詳解，如果你有興趣，可以到我們的Behance了解更多。

　　第三步：完善

　　我們目前正進(jìn)行到這一階段。坦誠地講，我們可能永遠也無(wú)法真正走完這個(gè)階段。在你接受設計體系的挑戰之前，好明白一點(diǎn) - 這是個(gè)永無(wú)止境的過(guò)程。你在打造的更像是一款產(chǎn)品，而非終點(diǎn)明確的項目 - 設計體系需要隨著(zhù)產(chǎn)品的發(fā)展而不斷的成長(cháng)和進(jìn)化。

　　你可能需要專(zhuān)門(mén)組建團隊來(lái)負責設計體系的維護，或是由一些設計師來(lái)專(zhuān)職擔任。一套嚴整規范的設計體系可以為產(chǎn)品設計工作帶來(lái)不可或缺的核心價(jià)值，使工作流程更加聚焦、清晰，設計模式的一致性與產(chǎn)品開(kāi)發(fā)速度都能得到顯著(zhù)提升。

　　綜合性體系

　　站在產(chǎn)品全局層面創(chuàng )建并維護一套行之有效的設計體系，這只是規范化、體系化的一部分;我們同時(shí)還在構建產(chǎn)品的品牌規范及設計原則。

　　我們認為，在產(chǎn)品設計的復雜性上升到一定程度之前，將基礎框架奠定牢靠是非常關(guān)鍵的，否則各種潛在問(wèn)題將一路積累下去，直到無(wú)法解決的地步。一系列規范、原則與體系的建立將能確保我們在擴大產(chǎn)品及團隊規模時(shí)穩定在正確的軌道上。

　　我們計劃在QUIK進(jìn)入實(shí)用階段之后，繼續創(chuàng )建一套用于定義產(chǎn)品個(gè)性化特質(zhì)的設計規范。我們將會(huì )建成的綜合性體系包括：

　　品牌規范(Brand Guidelines)：用于描述品牌個(gè)性與特質(zhì)的一系列文檔，其中包括文案基調、配色風(fēng)格、logo使用約束等方面的定義說(shuō)明。

　　QUIK：將產(chǎn)品全局范圍內的設計理念、方法及界面組件等集約在一處進(jìn)行標準化定義的設計體系(Design System)。

　　設計原則(Design Principles)：幫助我們恪守產(chǎn)品設計方向，聚焦于對團隊及客戶(hù)為重要的目標之上，大程度地實(shí)現二者的統一。

　　接下來(lái)

　　我們將持續力爭在產(chǎn)品平臺全局范圍內實(shí)現統一化的設計標準。面對這個(gè)目標，我們還有很長(cháng)的路要走。產(chǎn)品團隊當中的每一個(gè)人都明白這是個(gè)巨大的挑戰，但我們同樣理解這件事對于產(chǎn)品保持平穩發(fā)展的重要性。