目前設(shè)計(jì)行業(yè)中小到每個(gè)團(tuán)隊(duì)，大到每個(gè)公司都在致力于建設(shè)服務(wù)于自己的設(shè)計(jì)體系，毫無(wú)疑問(wèn)在行業(yè)背景下，一套有效的設(shè)計(jì)體系能夠幫助團(tuán)隊(duì)或公司快速實(shí)現(xiàn)設(shè)計(jì)的產(chǎn)出。如今自己有幸參與到京東數(shù)坊項(xiàng)目中，開(kāi)啟了京東數(shù)坊的一段設(shè)計(jì)體系構(gòu)建之旅，在這期間我們經(jīng)過(guò)規(guī)劃、建設(shè)、最終服務(wù)于實(shí)際項(xiàng)目中，雖然目前還不完善，但是也有階段性成果可以分享。

為什么要去搭建設(shè)計(jì)體系

顯而易見(jiàn)這個(gè)是一套被充分驗(yàn)證過(guò)的，并且能行之有效的指導(dǎo)幫助我們?cè)谠O(shè)計(jì)過(guò)程中，高效的產(chǎn)出并保持產(chǎn)出的一致性，也能讓我們團(tuán)隊(duì)協(xié)作之間更加高效，解放我們重復(fù)畫(huà)圖的工具人屬性。

數(shù)坊設(shè)計(jì)體系

以數(shù)坊為例，數(shù)坊是一個(gè) B 端營(yíng)銷(xiāo)工具類(lèi)產(chǎn)品，產(chǎn)品頁(yè)面組件復(fù)用率高，而且涉及多人協(xié)同設(shè)計(jì)，一個(gè)有效的系統(tǒng)體系能幫助我們工作更加的高效。我們?cè)O(shè)計(jì)體系的建設(shè)并不是從 0 開(kāi)始的，我們前期有一些積累了，只是沒(méi)有完善的歸類(lèi)到具體的體系中，這種現(xiàn)狀其實(shí)也是大部分設(shè)計(jì)團(tuán)隊(duì)最開(kāi)始都存在的情況，我們?nèi)绾伟堰@些積累的資產(chǎn)和文檔歸類(lèi)整理集合成為我們?cè)O(shè)計(jì)過(guò)程中的“工具包”，“工具包”中具體會(huì)集合成為哪一些資產(chǎn)與文檔。然后“工具包”能夠滿(mǎn)足日常需求迭代，能讓我們的精力更專(zhuān)注于去深掘用戶(hù)與業(yè)務(wù)，去探索更成熟的設(shè)計(jì)語(yǔ)言與產(chǎn)品發(fā)展創(chuàng)新方向。最后產(chǎn)品獲得用戶(hù)一致的好口碑，逐漸積累形成產(chǎn)品影響力，立足于行業(yè)一席之地。

• 利其器：建設(shè)設(shè)計(jì)基礎(chǔ)設(shè)施，完善健全我們手中的“工具包”
• 善其事：專(zhuān)注于去深掘用戶(hù)與業(yè)務(wù)，探索產(chǎn)品方向提升團(tuán)隊(duì)創(chuàng)新力
• 立于世：打磨產(chǎn)品體驗(yàn)，依靠用戶(hù)口碑形成影響力，立足于行業(yè)

我們計(jì)劃用 3 篇文章來(lái)分享以上 3 點(diǎn)。本篇為「高效設(shè)計(jì)體系搭建」系列文章的第一篇，主要分享一下如何去建設(shè)設(shè)計(jì)的基礎(chǔ)設(shè)施，我們?cè)跀?shù)坊項(xiàng)目中是怎么樣去一點(diǎn)一點(diǎn)打磨手中工具的過(guò)程。目前這套基礎(chǔ)體系也還在完善補(bǔ)充中，文章分享一點(diǎn)經(jīng)驗(yàn)，歡迎大家交流建議與補(bǔ)充。

利其器：首先配齊工具

通常我們擴(kuò)展認(rèn)知的方法是認(rèn)識(shí)它、模仿它，超越它。設(shè)計(jì)體系的基礎(chǔ)搭建目前有非常多的參考，這其中包括現(xiàn)成的網(wǎng)站與書(shū)籍，Web 端就有 Microsoft Fluent、Shopify 等等優(yōu)秀的設(shè)計(jì)體系庫(kù)，書(shū)籍《設(shè)計(jì)體系：數(shù)字產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法》也講述了非常系統(tǒng)的方法。有了這些參考與方法，那咱們要做的就是結(jié)合產(chǎn)品自身的需求一步一步去實(shí)踐。

首先我們了解目前現(xiàn)狀，看看自己手里有什么，先把已有的資產(chǎn)完善。其次參考優(yōu)秀設(shè)計(jì)體系庫(kù)中包含什么，對(duì)自己做搭建補(bǔ)充。最后產(chǎn)品發(fā)展的未來(lái)，能儲(chǔ)備的去探索增加。

利其器：打磨工具

數(shù)坊整體設(shè)計(jì)體系目前依托于 sketch 搭建，整體思路也從 sketch 提供的變量庫(kù)、樣式庫(kù)、組件庫(kù)來(lái)進(jìn)行展開(kāi)。

1. 色板的搭建：

雖然常用的主色與輔助色能覆蓋大部分產(chǎn)品的 UI 設(shè)計(jì)，但是隨著產(chǎn)品體量的增加，業(yè)務(wù)場(chǎng)景的多元，我們就需要構(gòu)建完整的色彩系統(tǒng)來(lái)支撐其發(fā)展。我們常用色板搭建的方法有手動(dòng)疊加法、公式計(jì)算、工具生成等。

2. 基礎(chǔ)樣式的完善：

基礎(chǔ)樣式也叫感知模式，是一種主觀感受，UI 中每一條線的粗細(xì)、顏色、長(zhǎng)短都影響到界面的整體調(diào)性，保持基礎(chǔ)樣式的統(tǒng)一是提升 UI 一致性非常有效的手段。

3. 圖標(biāo)庫(kù)的搭建：

圖標(biāo)庫(kù)我們常以圖標(biāo)文檔的形式存在，用則打開(kāi)文件取之，我們進(jìn)一步對(duì)圖標(biāo)字體化與 Symbols 化，常用圖標(biāo)嵌入 Symbols。當(dāng)然可以做的更深，例如 iconpark 的可配置化。

4. 組件化：

大部分團(tuán)隊(duì)都在做組件化的，這種標(biāo)準(zhǔn)化的工作方式能更加高效的達(dá)成產(chǎn)品目標(biāo)，這其中就包括設(shè)計(jì)組件化與前端組件化，這里可以提供一個(gè)非常優(yōu)秀的 UI library 的參考 tetrisly，它包含 sketch 與 figma 的組件，系統(tǒng)學(xué)習(xí)可以參考一下它。

5. 產(chǎn)品全局規(guī)則：

前面提到的基礎(chǔ)樣式與組件其實(shí)都是全局規(guī)則的一部分，為什么需要再單獨(dú)補(bǔ)充呢？因?yàn)樵诖篌w量產(chǎn)品設(shè)計(jì)中，每個(gè)模塊都由不同的同學(xué)負(fù)責(zé)，這樣全局產(chǎn)品的把握就會(huì)降低，需要去補(bǔ)充全局規(guī)范說(shuō)明去維持產(chǎn)品全局通用部分的一致性。

6. 品牌語(yǔ)言的探索：

探索部分通常都是為未來(lái)而儲(chǔ)備的，品牌語(yǔ)言是基于產(chǎn)品發(fā)展方向，品牌語(yǔ)言的持續(xù)探索是為產(chǎn)品宣傳增加產(chǎn)品影響力的手段之一，好的語(yǔ)言能夠?qū)?nèi)輻射產(chǎn)品內(nèi)部，對(duì)外輻射宣傳推廣。同樣也是下一階段產(chǎn)品改版升級(jí)的重要參考。

總結(jié)

設(shè)計(jì)體系基礎(chǔ)部分是一個(gè)長(zhǎng)期的過(guò)程，我們需要花時(shí)間去維護(hù)更新，使之越來(lái)越完善，越來(lái)越高效。但是它始終是我們維持作戰(zhàn)的工具，我們不能夠沉迷打磨工具而忘記了工具是用來(lái)干活的，當(dāng)然如果能做到極致，愿意做個(gè)匠人也未嘗不好，嘿嘿。

好了，以上就是我們的一點(diǎn)點(diǎn)經(jīng)驗(yàn)積累，希望可以幫助到大家，大家有什么建議或糾正歡迎評(píng)論交流。下一篇我們將帶來(lái)「高效設(shè)計(jì)體系搭建之如何善其事」我們有了高效的工具，那么我們就能集中精力去尋找機(jī)會(huì)點(diǎn)，去解決那些用戶(hù)痛點(diǎn)中的頑疾。

歡迎關(guān)注「JellyDesign」的小程序：