基礎(chǔ)的設(shè)計(jì)規(guī)范，包括基礎(chǔ)組件、配色規(guī)范、頁面模板、頁面間距等底層基礎(chǔ)內(nèi)容，在基于我們對(duì)設(shè)計(jì)規(guī)范有一定程度的了解下，是可以湊湊時(shí)間快速做出來的。本文作者分享了用4天時(shí)間構(gòu)建一套可用的設(shè)計(jì)規(guī)范的方法，希望能給你帶來幫助。

我最近指導(dǎo)小伙伴在做和自己也同步在深思的事情，有關(guān)“如何快速輸出一套可用的設(shè)計(jì)規(guī)范”的事兒。

關(guān)于設(shè)計(jì)規(guī)范是什么，一定不用我多說你也知道，它是每一個(gè)產(chǎn)品必不可少的東西（C端B端都需要）。但設(shè)計(jì)規(guī)范上不封頂，既可以延伸至設(shè)計(jì)體系，也可以大到設(shè)計(jì)生態(tài)，當(dāng)然反向的，也可以只是一堆組件。

今天，我不說設(shè)計(jì)體系、設(shè)計(jì)生態(tài)，因?yàn)橐簧仙竭@個(gè)高度，可不是快速能做的，需要好好規(guī)劃、長期沉淀與執(zhí)行，我的新書，會(huì)詳細(xì)講到這部分。

今天，只說基礎(chǔ)的設(shè)計(jì)規(guī)范，包括基礎(chǔ)組件、配色規(guī)范、頁面模版（少量）、頁面間距等底層基礎(chǔ)內(nèi)容。這些內(nèi)容，在基于我們對(duì)設(shè)計(jì)規(guī)范有一定程度的了解下，是可以湊湊時(shí)間做出來的，大約4天的樣子。

當(dāng)然，這里不包括評(píng)審和反復(fù)調(diào)優(yōu)的時(shí)間，只是我們?nèi)プ龅臅r(shí)間。

那4天怎么用呢？

第0.5天，團(tuán)隊(duì)內(nèi)部選擇一套開源組件庫。

第1.0天，著手了解開源組件庫設(shè)計(jì)邏輯。

第1.5天，了解服務(wù)產(chǎn)品的調(diào)性，及明確設(shè)計(jì)規(guī)范框架。

第2.0-3.0天，依據(jù)前面的準(zhǔn)備，修改開源組件庫相關(guān)屬性、調(diào)整與設(shè)計(jì)組件，及核心搭建頁面模板。

第4.0天，整理修改點(diǎn)，并自我反向補(bǔ)充和調(diào)整。

01 第0.5天

要做產(chǎn)品了，沒有設(shè)計(jì)規(guī)范怎么行呢？所以，得趕緊準(zhǔn)備起來呀。找上團(tuán)隊(duì)一起來看看使用哪個(gè)第三方開源組件庫合適（牢記，如果自己從0到1構(gòu)建，那是4天完不成的哦）。

我之前梳理過《B端常用9大開源組件庫集合（必備收藏）》這篇文章，里面提到了非常常見與常用的組件庫。團(tuán)隊(duì)選哪個(gè)組件庫都沒關(guān)系，主要是要符合產(chǎn)品、業(yè)務(wù)、技術(shù)等發(fā)展的需求。

比如，團(tuán)隊(duì)一直就用Ant Design的，那么新產(chǎn)品使用Ant Design在技術(shù)架構(gòu)上就比較好，避免多技術(shù)棧導(dǎo)致組織內(nèi)部相關(guān)產(chǎn)品無法良好的集成。

再比如，團(tuán)隊(duì)希望產(chǎn)品出來的視覺效果是比較好的，那么可以用ArcoDesgin。喜歡vue架構(gòu)的，就選element，其的vue能力比較成熟。

02 第1.0天

完成了開源組件庫的選擇后，就要簡單了解下開源組件庫的設(shè)計(jì)邏輯了。

由于我們一般使用開源組件庫，不會(huì)對(duì)其交互進(jìn)行大改，而是只對(duì)其可視化部分進(jìn)行調(diào)整，如顏色、間距、字號(hào)大小、容器方圓角等。

因此，我們需要對(duì)樣式屬性的構(gòu)成簡單進(jìn)行了解，這里的簡單是指能服務(wù)于你構(gòu)建設(shè)計(jì)規(guī)范即可，更深入的可以等后續(xù)在慢慢了解。

比如，本次規(guī)范決定只調(diào)整顏色，其他一概先不動(dòng)，那么就先對(duì)開源組件庫的色彩屬性進(jìn)行了解，看看如邊框這種的顏色都分別賦值到了哪些組件上。

如：

• border-color-base賦值到a、b
• border-color-light賦值到c、m
• border-color-lighter賦值到d、r
• border-color-extra-light賦值到j(luò)、l
• border-color–dark賦值到v、k

大致了解清楚后，那么優(yōu)化起來也相對(duì)方便些。

03 第1.5天

接下來，就要展開做了。那么在做之前，還得了解服務(wù)產(chǎn)品的調(diào)性，不同調(diào)性決定了產(chǎn)品的主題色、插畫風(fēng)格等內(nèi)容。

比如，醫(yī)療系統(tǒng)適合綠色，給人專業(yè)、安全的感覺；也適合橙色，給人溫暖、貼心的感覺。銀行系統(tǒng)，適合紅色，給人豐收、美滿的感覺。人工智能類產(chǎn)品適合科技藍(lán)。

確定主題風(fēng)格后，便可以展開主題色的調(diào)整，以及圍繞主題色的其他色的調(diào)整。當(dāng)然，產(chǎn)品調(diào)性也會(huì)影響組件方圓角等內(nèi)容。

接下來，需要構(gòu)思下實(shí)際做的時(shí)候，應(yīng)該如何一步步展開，即明確設(shè)計(jì)規(guī)范框架。切記不可一上來就咔咔咔開干，這不僅說明我們思路凌亂，也會(huì)讓后期返工嚴(yán)重。

我的經(jīng)驗(yàn)是，在真正動(dòng)手之前，先把具體要做的事情的框架搭建出來，比如，是框架A這樣子呢？還是框架B這樣子？當(dāng)然，這么做并不是無緣由的，而是要在限制條件下（如時(shí)間、技術(shù)、能力），盡可能最大化價(jià)值，包括設(shè)計(jì)、產(chǎn)品、技術(shù)等方面。

不過如果框架涵蓋范圍一旦太大，那可能4天完不成，所以我們要根據(jù)實(shí)際情況調(diào)整。

04 第2.0-3.0天

一切準(zhǔn)備就緒，就要開干了——修改開源組件庫相關(guān)屬性，及核心搭建頁面模板。

這里屬于細(xì)節(jié)部分，需要有修改思路和耐心，一點(diǎn)點(diǎn)的改下去。遇到一些需要驗(yàn)證的點(diǎn)，需要反向去驗(yàn)證下。

比如我們覺得開源組件庫某顏色不合適，那么到底要怎么改呢？一方面需要盡可能使用開源組件庫中給出的顏色屬性范圍，另一方面要看下搭配在我們的產(chǎn)品中效果是如何的，切不可直接改個(gè)自己覺得好看的顏色。

還有，搭建頁面模板，適合把最最最重要的先弄了。比如頁面模板有表格頁、詳情頁、工作臺(tái)、結(jié)果頁，那是不是這4天里面就把它們一股腦兒都做了呢？其實(shí)不然，我們適合迭代去做，先將非常高頻的做了，再做低頻使用，但對(duì)全局性來說，也比較重要的界面。

05 第4.0天

到這里，基本本次要做的內(nèi)容都做了，接下來就是要整理我們?cè)陂_源組件庫上的修改點(diǎn)，并自我反向補(bǔ)充和調(diào)整。這一步有助于給到團(tuán)隊(duì)干系人成員時(shí)，他們能清楚設(shè)計(jì)規(guī)范的現(xiàn)狀和原狀態(tài)，那么他們?cè)谑褂弥幸矔?huì)心中有數(shù)。

我清晰的記得，小伙伴給我看了完成的設(shè)計(jì)規(guī)范后，我就給他提了一個(gè)小優(yōu)化點(diǎn)：“給一些常用顏色補(bǔ)充一個(gè)對(duì)應(yīng)的應(yīng)用庫?！比绱?，協(xié)作者就可以知道顏色都用在了哪些地方，而不是對(duì)著一堆顏色不知所以然。

后來他告訴我，這個(gè)太有效了，雖然他沒有做完整，但有了初稿，也可以解決一部分問題。

06 最后的話

我經(jīng)歷過從0到1搭建一套屬于企業(yè)維度的設(shè)計(jì)規(guī)范，賦能企業(yè)級(jí)產(chǎn)品使用。

因此，如果依賴開源組件庫構(gòu)建設(shè)計(jì)規(guī)范，相對(duì)來說還是輕松一點(diǎn)的，不論是在時(shí)間、精力、設(shè)計(jì)、技術(shù)等的投入上。

記得從0到1構(gòu)建的時(shí)候，我們需要考慮每個(gè)組件的交互方式，及關(guān)聯(lián)組件的統(tǒng)一交互模式，這是一件費(fèi)腦費(fèi)力的事情。還要考慮使用者的基本特征（年齡、習(xí)慣等），他們?cè)谙M(fèi)設(shè)計(jì)規(guī)范的時(shí)候，是處于什么場景，哪種狀態(tài)。

好啦，今天就和你聊到這里了，希望今天分享的“4天構(gòu)建一套可用的設(shè)計(jì)規(guī)范”能給你帶來一些啟發(fā)，我們下周見啦。