之前有一節(jié)公開課，討論了對于B端設(shè)計師來說非常核心的話題，那就是在大廠開源后臺框架林立的今天，B端設(shè)計師還需不需要搭建自己的設(shè)計規(guī)范。

B端設(shè)計師要一直面臨開源框架帶來的挑戰(zhàn)，因為表面看起來，它們把設(shè)計師應(yīng)該做的事情提前做掉了，然后還事無巨細的把設(shè)計組件、圖標、規(guī)范都給做出來了。

尤其是規(guī)范部分，洋洋灑灑幾萬字，幾百張圖，幾百個實例演示。

都寫那么翔實了那么完整了，你能有信心憑一己之力寫得比它們更全、更好、更完整嘛？以及，你要自己真寫那么多，你們開發(fā)看的下去嘛？所以就不用做設(shè)計規(guī)范，拿來主義就夠了嘛？

不，B端設(shè)計師必須做設(shè)計規(guī)范！

開源框架把設(shè)計規(guī)范寫的那么全，核心的原因是因為它們不是給特定規(guī)范使用的設(shè)計規(guī)范記錄，而是寫給設(shè)計師、前端開發(fā)看的 “框架視覺規(guī)范教學”。

比如，Ant 的色彩規(guī)范里，定義了一整套 WEB 安全色系統(tǒng)，幾十個色相分類和幾百個具體色號。相信不會有同學覺得自己的項目會完整用上全部色號吧。

最基礎(chǔ)的按鈕也有非常多的類型，圓角、直角、描邊和透明等，但一個正常項目只需要用 2-3 種類型。

再比如，Ant 也給出了3種一級導航菜單的類型，但顯然我們不可能在一個項目里把3種一級導航菜單樣式都給用上！

對于開源框架來說，會提供盡可能全面豐富的規(guī)范、組件，盡管這些東西你可能用不上（但別人可以）。

這些規(guī)范說明，是用來告訴我們它包含了哪些內(nèi)容，長什么樣，該怎么用！而不是強制告訴你項目應(yīng)該怎么設(shè)計……

所以感覺出問題了嘛？你項目規(guī)范中的細節(jié)到現(xiàn)在為止依舊還是空白的。

作為設(shè)計師，我們整理項目設(shè)計規(guī)范的第一步，就是從這些框架規(guī)范中提取你項目中應(yīng)用到的內(nèi)容，如色彩、柵格、布局、導航的具體方案。

Arco 顯然意識到了設(shè)計師的需求，所以開發(fā)了一個規(guī)范創(chuàng)建工具，你可以直接根據(jù) Arco 官方提供的規(guī)范做自定義設(shè)置，并快速生成網(wǎng)頁規(guī)范文檔。

鏈接地址：

https://arco.design/themes/stores/manage

但目前這個工具還太簡陋，實用性不高。原因是除了上方說的官方自帶的組件并不是我們?nèi)恳蒙?，?cè)邊欄類目無法自定義。

同時還包括，項目往往會出現(xiàn)一些獨有的業(yè)務(wù)組件，這是開源框架里沒有，我們還需要去添加這些元素的說明。

最終，總結(jié)一下，B端設(shè)計師制作項目規(guī)范的工作，可以簡化成：

提取應(yīng)用到的框架規(guī)范，再補充項目獨有的樣式、組件說明。

既然一定要做設(shè)計規(guī)范，那規(guī)范里該放什么，就是我們必須提前掌握的知識點了。我通常將規(guī)范拆分成3個大類，宏觀、官方控件、業(yè)務(wù)組件。

宏觀部分，即布局、柵格、響應(yīng)、間距、字體、色彩、風格這些全局內(nèi)容。

然后，就是一些框架中提供的基礎(chǔ)控件、組件的篩選了，把必要的內(nèi)容提取出來，尤其是按鈕、選擇器、表單元素等。

最后，就是整理項目中用到的業(yè)務(wù)組件了，比如一些可以拖拽的任務(wù)卡片組件，特殊的編輯器，樹狀結(jié)構(gòu)管理工具等等。

然后，就是對一些復雜的控件組件準備統(tǒng)一的描述格式，包含它的場景解釋、狀態(tài)/樣式說明、交互邏輯說明。

為了方便大家理解，我制作了一個思維導圖，看完基本上就能搞明白了。

每次在開始輸出具體的規(guī)范前，建議大家也制作一個思維導圖，把對應(yīng)的分類、層級確定出來，可以幫助我們更快的完成內(nèi)容的制作。

最后，就是應(yīng)該怎么輸出設(shè)計規(guī)范了。開篇名義，我不建議一切文檔形式的工具記錄設(shè)計規(guī)范，包括且不局限于下方這些產(chǎn)品：

原因很簡單，因為這些工具使用起來太 “麻煩” 了。最大的障礙就是維護起來特別繁瑣，尤其在項目前期，規(guī)范的變更是非常頻繁，每次變更都要進文檔更新，會拖垮我們的精力。

以及，多一套文檔出來，意味產(chǎn)品團隊還要額外去記錄一個文件或網(wǎng)址，增加了內(nèi)部協(xié)作的復雜性。一份優(yōu)秀的設(shè)計文檔，應(yīng)該滿足下面的這些條件：

• 統(tǒng)一性：文件唯一性，保持統(tǒng)一版本

• 便利性：只需要通過一個必用工具進行查看

• 復用性：既可以查看標注數(shù)據(jù)又包含文字內(nèi)容

• 簡潔性：語言簡練，盡量減少不必要標注信息

最推薦的方式，就是通過 Fimga/即時設(shè)計?等線上工具，直接制作規(guī)范文檔，相信很多同學已經(jīng)在做類似的事情了。

在我們的 Figma 軟件教學有提過，當我們使用軟件中的組件（Compoent）功能時，要注意父級組件的管理，最好的方法就是將它們集中起來放置在新的頁面（Page）畫布中。

比如下圖是我們課程案例中制作的組件庫（完善中）。

這個規(guī)范的操作為我們提供了非常理想的規(guī)范輸出基礎(chǔ)，剩下要做的，就是做好分類，并將需要的說明文字輸入進去。

通過直接在設(shè)計軟件內(nèi)制作規(guī)范文檔，可以讓整體效率得到非常大的提升：

• 團隊協(xié)作中規(guī)范和設(shè)計稿同步，其他設(shè)計師、開發(fā)、產(chǎn)品查看便利

• 修改父級組件不用考慮維護其他文檔，實時同步

• 畫布縮放形式對檢索規(guī)范的效率比文檔形式更高

• 節(jié)省更多的時間，可以讓設(shè)計師更好校對規(guī)范內(nèi)容

以上就是依托開源框架搭建設(shè)計規(guī)范的思路，需要大家自己動手去作出一些嘗試，來適應(yīng)這個流程，極可能打造能讓規(guī)范落地的形式和內(nèi)容。

因為時間關(guān)系，我就沒辦法整理出非常完整的規(guī)范應(yīng)用案例了。這只在我們自己的課程中會有完整的演示以及應(yīng)用落地的過程。

如果想要掌握更完整的B端設(shè)計項目流程以及實例分享的話，就來參與我們的 B 端產(chǎn)品設(shè)計全能班第8期吧！

下篇再賤！