近年來(lái)，“設(shè)計(jì)規(guī)范”逐漸被“設(shè)計(jì)體系”的概念重塑，與之俱來(lái)的新設(shè)計(jì)方法可以幫助產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)更好的站在整體層面構(gòu)建方案。

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

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

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

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

本文旨在討論設(shè)計(jì)體系的目標(biāo)、價(jià)值及構(gòu)成原理，而不會(huì)深入到具體的構(gòu)建方法當(dāng)中。

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

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

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

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

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

我們做的第一件事就是對(duì)產(chǎn)品當(dāng)中現(xiàn)有的界面組件進(jìn)行徹底的清查。Brad Frost（“Atomic Design”一書(shū)作者）曾就如何進(jìn)行UI清查寫(xiě)過(guò)一篇出色的指導(dǎo)文章“Interface Inventory”，建議閱讀（http://bradfrost.com/blog/post/interface-inventory/）。

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

• 充分了解當(dāng)前產(chǎn)品當(dāng)中哪些地方存在不一致性的問(wèn)題。
• 站在全局層面理解一些關(guān)鍵元素的使用方式。
• 快速掌握產(chǎn)品的信息架構(gòu)與運(yùn)作方式。
• 向團(tuán)隊(duì)集中展示現(xiàn)有問(wèn)題，進(jìn)而體現(xiàn)一套標(biāo)準(zhǔn)、統(tǒng)一的設(shè)計(jì)體系的必要性。

我們的平臺(tái)UI清查文檔，現(xiàn)有設(shè)計(jì)當(dāng)中的不一致性問(wèn)題一目了然。

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

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

1. 品牌：產(chǎn)品的品牌識(shí)別由一些關(guān)鍵的視覺(jué)要素構(gòu)成，包括配色、字形、圖標(biāo)等等。
2. 界面元素：包括那些最小顆粒度的、在全局范圍內(nèi)可復(fù)用的元素，例如按鈕、文本輸入框等等。
3. 組件：組件由若干界面元素構(gòu)成。多個(gè)組件協(xié)同配合，形成常見(jiàn)的設(shè)計(jì)模式，例如對(duì)話框、列表、卡片等等。

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

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

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

我們還有一個(gè)針對(duì)插畫(huà)設(shè)計(jì)風(fēng)格的設(shè)計(jì)體系項(xiàng)目正在進(jìn)行中，本文暫不做詳解，如果你有興趣，可以到我們的Behance了解更多（https://www.behance.net/gallery/49205497/Illustration-Guidelines）。

第三步：完善

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

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

綜合性體系

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

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

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

• 品牌規(guī)范（Brand Guidelines）：用于描述品牌個(gè)性與特質(zhì)的一系列文檔，其中包括文案基調(diào)、配色風(fēng)格、logo使用約束等方面的定義說(shuō)明。
• QUIK：將產(chǎn)品全局范圍內(nèi)的設(shè)計(jì)理念、方法及界面組件等集約在一處進(jìn)行標(biāo)準(zhǔn)化定義的設(shè)計(jì)體系（Design System）。
• 設(shè)計(jì)原則（Design Principles）：幫助我們恪守產(chǎn)品設(shè)計(jì)方向，聚焦于對(duì)團(tuán)隊(duì)及客戶最為重要的目標(biāo)之上，最大程度地實(shí)現(xiàn)二者的統(tǒng)一。

接下來(lái)

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

作者：C7210

來(lái)源：微信公眾號(hào)：Beforweb

題圖來(lái)自PEXELS，基于CC0協(xié)議