嘔血巨制終章 · B端項(xiàng)目規(guī)范落地實(shí)戰(zhàn)綜合大全
設(shè)計(jì)規(guī)范的應(yīng)用邏輯很簡(jiǎn)單，但需要有非常嫻熟的軟件功能使用基礎(chǔ)，所以之前花了很長(zhǎng)的篇幅講解了和規(guī)范相關(guān)的軟件功能應(yīng)用，就是為了現(xiàn)在做準(zhǔn)備。
文章地址1：從零講起 | B端設(shè)計(jì)規(guī)范和組件庫(kù)應(yīng)該怎么做？
文章地址2：實(shí)操講解 | B端設(shè)計(jì)規(guī)范和組件庫(kù)應(yīng)該怎么搭建？
文章地址3：組件應(yīng)用 | B端項(xiàng)目設(shè)計(jì)規(guī)范、組件庫(kù)搭建詳解
那下面開始正文......
3.1.1 項(xiàng)目規(guī)范的制作流程
項(xiàng)目設(shè)計(jì)規(guī)范的制作是一個(gè) “龐大” 的工程，不是設(shè)計(jì)師依靠直覺(jué)平推就能做好的。所以需要先了解必要的環(huán)節(jié)，根據(jù)自己項(xiàng)目的實(shí)際情況做調(diào)整，再開始執(zhí)行。
基礎(chǔ)項(xiàng)目設(shè)計(jì)規(guī)范的完整流程，大致包含下面這些步驟：
構(gòu)思項(xiàng)目的視覺(jué)方向和風(fēng)格樣式
對(duì)主要頁(yè)面進(jìn)行具體的視覺(jué)設(shè)計(jì)和定稿
進(jìn)行規(guī)范內(nèi)容的具體分析和規(guī)劃
梳理全局框架和交互規(guī)范
整理基礎(chǔ)視覺(jué)樣式規(guī)范
整理控件和組件規(guī)范
規(guī)范內(nèi)容評(píng)審團(tuán)隊(duì)對(duì)齊
規(guī)范文件整理和導(dǎo)出應(yīng)用
后續(xù)的更新和維護(hù)
很多人錯(cuò)誤的把開始使用設(shè)計(jì)軟件生成具體的樣式和組件當(dāng)成設(shè)計(jì)規(guī)范的起點(diǎn)，這是非常錯(cuò)誤的想法，那已經(jīng)是中后期的工作了。
一套專業(yè)有效的規(guī)范，不可能憑空制定出來(lái)，必然要包含前期的準(zhǔn)備、分析、測(cè)試和評(píng)審，最終定義出來(lái)的規(guī)范細(xì)節(jié)只是對(duì)前面設(shè)計(jì)工作的 “總結(jié)&補(bǔ)充”，而不是再造出新的內(nèi)容出來(lái)。所以，前期的工作步驟非常重要。
首先就是在獲取產(chǎn)品原型、需求以后，根據(jù)項(xiàng)目的實(shí)際情況去構(gòu)思設(shè)計(jì)的風(fēng)格了。換句話說(shuō)，就是要構(gòu)建你項(xiàng)目的情緒版，是要設(shè)計(jì)得比較政務(wù)國(guó)企風(fēng)，還是商務(wù)穩(wěn)重、科技多元。雖然 B 端項(xiàng)目的視覺(jué)并不像 C 端設(shè)計(jì)這樣差異巨大，但依舊是得做出選擇的。
初期情緒版的制定只是設(shè)計(jì)意圖，所以我們需要通過(guò)部分頁(yè)面的設(shè)計(jì)來(lái)落實(shí)。尤其是在前期可能拓展了多個(gè)設(shè)計(jì)方案的情況下，更需要通過(guò)輸出多套飛機(jī)稿 Demo 的方式來(lái)選擇最合適的一版。
所以這個(gè)階段需要輸出的頁(yè)面數(shù)量不用多，只要能評(píng)估頁(yè)面視覺(jué)風(fēng)格的3-5 個(gè)關(guān)鍵頁(yè)面即可。只有視覺(jué)方案在團(tuán)隊(duì)內(nèi)部定稿，我們后面的工作才是具有確定性的。
因?yàn)橐?guī)范可以做的東西實(shí)在太多，但每個(gè)項(xiàng)目的實(shí)際需要又不一樣，而且留給我們制定規(guī)范的時(shí)間也不一樣，使用的環(huán)境也有區(qū)別，所以我們需要在前期制定規(guī)范的層級(jí)結(jié)構(gòu)和內(nèi)容列表。這約等于制定一個(gè)項(xiàng)目的待辦清單，讓我們可以更好的控制進(jìn)度和輸出質(zhì)量，這在下一小節(jié)就會(huì)展開解釋。
完成上面兩步，才到了具體使用設(shè)計(jì)軟件進(jìn)行規(guī)范制作的過(guò)程。也就是創(chuàng)建視覺(jué)樣式，制作組件庫(kù)的環(huán)節(jié)，這是要耗費(fèi)精力最多，花費(fèi)時(shí)間最長(zhǎng)的步驟。但和你們想的不一樣的是，這恰恰是整個(gè)流程里最簡(jiǎn)單的一步。
因?yàn)闃邮?、組件的整理方法是死的，但怎么落地、應(yīng)用、維護(hù)規(guī)范卻是活的，非?？简?yàn)設(shè)計(jì)師的團(tuán)隊(duì)協(xié)作能力和項(xiàng)目經(jīng)驗(yàn)。我不會(huì)建議大家一口氣就把所有規(guī)范內(nèi)容全部做完，而是先把每個(gè)模塊的內(nèi)容制定一部分以后，就進(jìn)行規(guī)范的內(nèi)部評(píng)審。
主要評(píng)審規(guī)范的展示形式、引用方法、制作規(guī)范，統(tǒng)一設(shè)計(jì)團(tuán)隊(duì)內(nèi)部的意見和引用，以及和開發(fā)協(xié)商如何有效進(jìn)行組件化快發(fā)，保障規(guī)范在實(shí)際開發(fā)過(guò)程中被有效利用。只有這些條件都滿足以后，再完成后續(xù)的所有內(nèi)容制作與輸出。
不要一廂情愿認(rèn)為只要做了設(shè)計(jì)規(guī)范出來(lái)，其他人就一定會(huì)配合你的工作。沒(méi)有經(jīng)過(guò)團(tuán)隊(duì)內(nèi)部評(píng)審交換意見后輸出的規(guī)范，只是強(qiáng)加給其他團(tuán)隊(duì)成員的 “枷鎖“，無(wú)法成為他們?nèi)粘９ぷ髦械?“標(biāo)準(zhǔn)“。
3.1.2 項(xiàng)目規(guī)范的整理準(zhǔn)備
從構(gòu)思情緒版到設(shè)計(jì)定稿，我就不在這里開展。從風(fēng)格定稿以后，我們就要進(jìn)行制作規(guī)范準(zhǔn)備工作了。需要花至少半天以上的時(shí)間進(jìn)行分析，應(yīng)該做一套什么樣的項(xiàng)目設(shè)計(jì)規(guī)范出來(lái)。
簡(jiǎn)單來(lái)講，就是給自己提出幾個(gè)關(guān)鍵的問(wèn)題，并給出對(duì)應(yīng)的分析結(jié)果。比如：
你有多少時(shí)間來(lái)整理這套規(guī)范？
使用第三方庫(kù)還要定哪些規(guī)范？
規(guī)范主要的應(yīng)用場(chǎng)景在哪里？
規(guī)范的載體用哪種形式？
項(xiàng)目的前端配合程度有多高？
有哪些控件組件要做規(guī)范？
……
具體要提出哪些問(wèn)題是開放性的，因?yàn)槊總€(gè)項(xiàng)目擺在我們面前的阻力是不一樣的，分析的側(cè)重自然也不一樣。
就比如時(shí)間這一條，如果留給我的時(shí)間特別短，以及除非我想無(wú)償為企業(yè)做奉獻(xiàn)，那么必然會(huì)考慮怎么降低規(guī)范的制作規(guī)格，刪減不必要的細(xì)節(jié)，思考最低配輸出的底線是什么。
再比如應(yīng)用場(chǎng)景，有的項(xiàng)目設(shè)計(jì)規(guī)范不管我們接不接受，確實(shí)就是擺設(shè)。給領(lǐng)導(dǎo)看的、給投資人看的、給甲方加錢的，它最后就沒(méi)有落地的條件。那自然做樣子也就有做樣子的玩法……
不同分析的結(jié)果對(duì)后面的工作內(nèi)容影響是巨大的，所以考慮得越全面越好。然后就要根據(jù)分析的結(jié)果，使用思維導(dǎo)圖工具來(lái)梳理規(guī)范中要包含的內(nèi)容，整理的順序遵循由上而下，從宏觀到微觀。
上面是個(gè)簡(jiǎn)單的示例，例舉了規(guī)范中常見的一些模塊內(nèi)容，前面的框架、樣式規(guī)范內(nèi)容比較穩(wěn)定，所有項(xiàng)目基本都會(huì)包含，工作量也小。而組件庫(kù)的內(nèi)容就非常靈活了，需要你們自己根據(jù)項(xiàng)目的情況去制定。
比如，Ant 這類開源的組件庫(kù)里包含了大量的組件，有相當(dāng)一部分組件在我們的項(xiàng)目中壓根不會(huì)出現(xiàn)，所以就不用考慮它們。也因此，每個(gè)項(xiàng)目的組件庫(kù)都是獨(dú)一無(wú)二的，你需要根據(jù)產(chǎn)品的原型來(lái)判斷會(huì)應(yīng)用，以及需要整理出來(lái)的組件。
這個(gè)目錄就是你制作規(guī)范的任務(wù)清單，雖然第一版還可能有缺漏，但只要大框架有了，后面再在實(shí)際的設(shè)計(jì)推進(jìn)中進(jìn)行補(bǔ)充即可，我們就可以開始具體的設(shè)計(jì)規(guī)范制定了。
設(shè)計(jì)規(guī)范整理的第一步，就是明確 —— 設(shè)計(jì)原則。用互聯(lián)網(wǎng)一點(diǎn)的話術(shù)，也叫 “設(shè)計(jì)價(jià)值觀”。
So，啥事沒(méi)干就開始上價(jià)值觀整活了？
理論上，優(yōu)秀的系統(tǒng)必然會(huì)包含某些固定的內(nèi)核，比如企業(yè)文化、小說(shuō)宗旨、宗教思想……整個(gè)系統(tǒng)的表象和細(xì)節(jié)都是受這些內(nèi)核影響延伸出來(lái)的。
比如包豪斯學(xué)派的設(shè)計(jì)，是以實(shí)用性為核心主旨進(jìn)行實(shí)踐的。所以這類設(shè)計(jì)崇尚構(gòu)成主義、標(biāo)準(zhǔn)化、極簡(jiǎn)。以這個(gè)價(jià)值觀完成的設(shè)計(jì)，是不可能做出荒誕、繁雜、浮夸、喧囂的設(shè)計(jì)的，和以消費(fèi)主義為內(nèi)核的波普風(fēng)格是截然相反的。
藝術(shù)看起來(lái)離我們很遠(yuǎn)，再換個(gè)例子，不同的人，不同的價(jià)值觀，就會(huì)構(gòu)建他們不同的穿衣風(fēng)格和氣質(zhì)。對(duì)外在只希望簡(jiǎn)單舒適和極度渴望他人注意的人，就會(huì)對(duì)不同的品牌風(fēng)格感興趣，花不同的時(shí)間進(jìn)行打扮，并表現(xiàn)出顯而易見的差異。
這些都是價(jià)值觀的作用，設(shè)計(jì)本身的價(jià)值觀也沒(méi)什么特殊的，就是反應(yīng)制定者對(duì)這套規(guī)范作用的預(yù)期，也就是通過(guò)制定價(jià)值觀讓整套規(guī)范的實(shí)踐發(fā)展符合指定的方向。
比如，Arco 的設(shè)計(jì)價(jià)值觀中，使用了清晰、一致、韻律、開放四個(gè)詞條，他們分別有如下的解釋：
清晰：……設(shè)計(jì)中減少不確定的因素, 減少用戶判斷次數(shù)，明確信息層級(jí)導(dǎo)向，讓用戶操作的目的性更明確
一致：……高標(biāo)準(zhǔn)的一致的設(shè)計(jì)體系, 給用戶帶來(lái)品牌信賴感同時(shí)還能夠通過(guò)一致的重復(fù)降低用戶反復(fù)學(xué)習(xí)成本
韻律：……產(chǎn)品使用中的韻律反應(yīng)了用戶習(xí)慣, 富有韻律的設(shè)計(jì)讓用戶的操作仿佛本該如此，減少理解記憶負(fù)擔(dān)
開放：……中后臺(tái)產(chǎn)品復(fù)雜的業(yè)務(wù)場(chǎng)景很難以一套固定的設(shè)計(jì)體系去涵蓋,只有開放包容的體系才能適應(yīng)復(fù)雜的業(yè)務(wù)場(chǎng)景
可以看出，每個(gè)關(guān)鍵詞其實(shí)都指向了解決某些具體的項(xiàng)目問(wèn)題。所以明白了嘛，項(xiàng)目規(guī)范的原則就是從解決問(wèn)題出發(fā)，通過(guò)找出或預(yù)判項(xiàng)目面臨的重要問(wèn)題，然后構(gòu)想一個(gè) “大概” 的解決方案，再提煉成關(guān)鍵字……
要注意，這里的價(jià)值觀關(guān)鍵字和情緒版的關(guān)鍵字不一樣，情緒版是定位視覺(jué)風(fēng)格的詞匯，范圍更小更抽象，而價(jià)值觀的關(guān)鍵字更宏觀更具體（解決問(wèn)題）。
給規(guī)范上價(jià)值觀制定是考驗(yàn)設(shè)計(jì)師本身的全局思路和遠(yuǎn)見的，需要通過(guò)大量的項(xiàng)目去做積累，才能確保制定出來(lái)的內(nèi)容具有說(shuō)服力，不會(huì)讓其他人看著尷尬……
雖然沒(méi)有輸出它也不會(huì)直接影響規(guī)范在項(xiàng)目中的作用，但建議新人從第一次接觸開始就可以做嘗試，慢慢去過(guò)體會(huì)其中的區(qū)別。
3.3.1 全局框架版式的制定
除了價(jià)值觀外，規(guī)范中層級(jí)最高的東西，就是全局框架了。在前面的分享中我們已經(jīng)解釋過(guò)它是什么了：
全局框架：項(xiàng)目的主要模塊排版和布局，產(chǎn)品使用的主要依據(jù)和步驟
具體可以參考：從零講起 | B端設(shè)計(jì)規(guī)范和組件庫(kù)應(yīng)該怎么做？
全局框架的制定確定了整個(gè)產(chǎn)品的基本交互形式，它既是交互的要素，也直接影響界面的設(shè)計(jì)框架。主要制定的內(nèi)容包含下面幾個(gè)要素：
主要頁(yè)面布局
不同類型頁(yè)面
全局組件應(yīng)用
主要頁(yè)面布局
決定頁(yè)面的核心組件布局和交互方式，包含導(dǎo)航欄、工具欄、菜單欄、內(nèi)容區(qū)域等絕大多數(shù)頁(yè)面都會(huì)出現(xiàn)的組件。
比如下面案例就使用了完全不同的布局結(jié)構(gòu)：
但是，項(xiàng)目中往往會(huì)出現(xiàn)一些非常規(guī)性的頁(yè)面，比如演示、會(huì)員付費(fèi)、官方活動(dòng)頁(yè)等，我們也要在這個(gè)階段中盡量考慮進(jìn)去，描述包含哪些特殊的布局，應(yīng)用到哪些場(chǎng)景。
不同類型頁(yè)面
然后進(jìn)行細(xì)化，解釋幾種常用頁(yè)面類型的應(yīng)用和設(shè)計(jì)方向，包含展示類型和頁(yè)面類型。
展示類型就是頁(yè)面的展示載體，如獨(dú)立頁(yè)面、彈窗、抽屜形式，這在我們過(guò)去的分享也解釋過(guò)。
文章鏈接：B端交互 | 重新認(rèn)識(shí)頁(yè)面、浮層、彈窗和抽屜
頁(yè)面類型是頁(yè)面的功能類型，比如常見的表盤頁(yè)、列表頁(yè)、表單頁(yè)、詳情頁(yè)等等，同類頁(yè)面雖然在不同業(yè)務(wù)場(chǎng)景會(huì)有不同的字段，但它們會(huì)包含結(jié)構(gòu)上的共性，是可以在前期進(jìn)行整理提煉的。
比如表盤頁(yè)，統(tǒng)一采取卡片模塊拼接的模式。表格頁(yè)面，統(tǒng)一篩選模塊和表格模塊的布局位置。包擴(kuò)業(yè)務(wù)特有的一些頁(yè)面，也可以進(jìn)行整理，提升后續(xù)設(shè)計(jì)的統(tǒng)一性和效率。
全局組件應(yīng)用
最后，就是除了基本框架外的全局組件應(yīng)用規(guī)則，例如全局提示彈窗、消息窗口、固釘?shù)仍亍?/p>
雖然在 Ant、Tdesign 等開源框架是在組件章節(jié)才去解釋這些組件，但這和全局組件說(shuō)明還是有差異的。在我們自己的項(xiàng)目中，要在全局類別下完成對(duì)它們的布局說(shuō)明。
例如，包含幾種通知類型，窗口對(duì)應(yīng)出現(xiàn)的位置，觸發(fā)的條件。或者 Saas 的客服&幫助固釘，要懸浮固釘在頁(yè)面的哪個(gè)地方，受不受其他模態(tài)遮罩影響等。
這些元素對(duì)后續(xù)的界面都會(huì)有一定的影響，所以需要我們提前進(jìn)行解釋。同時(shí)，這些解釋并不是深入到組件本身的說(shuō)明上，僅僅是描述它們 “全局下的應(yīng)用”。具體的組件本身的設(shè)計(jì)、狀態(tài)、交互細(xì)節(jié)都可以在后面的組件部分進(jìn)行說(shuō)明。
3.3.2 柵格響應(yīng)規(guī)范的制定
可能有人會(huì)認(rèn)為柵格才應(yīng)該是框架規(guī)范中的第一步，這也是誤解。因?yàn)椤獤鸥?strong>是為框架服務(wù)的，而不是框架根據(jù)柵格來(lái)制定。
比如常見的導(dǎo)航欄位于左側(cè)的設(shè)計(jì)，導(dǎo)航本身是排除到柵格區(qū)域外的。如果應(yīng)用了可以展開的雙列導(dǎo)航，那么柵格的區(qū)域還會(huì)被壓縮。這在我們過(guò)去的 B 端柵格介紹中也有提及。
即使使用了 Ant 等開源框架的柵格系統(tǒng)，我們也要做柵格的規(guī)范制定。因?yàn)楣俜街皇翘峁┝艘惶鬃远x柵格工具，并對(duì)它的開發(fā)使用做出說(shuō)明。
這對(duì)于我們項(xiàng)目設(shè)計(jì)來(lái)講等于什么都沒(méi)說(shuō)，所以需要我們進(jìn)一步確認(rèn)柵格中運(yùn)用的參數(shù)，并在規(guī)范中進(jìn)行確認(rèn)，保證開發(fā)和后續(xù)的頁(yè)面使用固定的參數(shù)完成。
要重點(diǎn)關(guān)注參數(shù)如下：
列數(shù) Columm：柵格總共使用的列數(shù)，常見 12、16、24列
間距 Gutter：柵格格線之間設(shè)置的間距數(shù)值，一般為 8-16px
間距 Margin：整個(gè)柵格區(qū)域兩側(cè)的預(yù)留外邊距
空間 Space：柵格作用的區(qū)域，如前面不包含側(cè)邊導(dǎo)航或右側(cè)展開面板等
范圍 min-max：柵格支持的最小寬度和最大寬度區(qū)間
這幾個(gè)參數(shù)是柵格系統(tǒng)中最重要的說(shuō)明，其它的細(xì)節(jié)如列的兩側(cè)邊緣添不添加間距、Flex 流動(dòng)，都可以另外和開發(fā)商量。
很多 B 端設(shè)計(jì)師會(huì)錯(cuò)誤的把列寬 Column Width 數(shù)值標(biāo)注進(jìn)去，這就代表他們依舊沒(méi)有理解柵格是什么。列寬根據(jù)頁(yè)面寬和上方參數(shù)被計(jì)算出來(lái)，它是個(gè) “變量”，沒(méi)有固定的寬度值，它是響應(yīng)式中模塊布局寬度變化的參照對(duì)象。
沒(méi)有理解柵格的也可以看我們之前已經(jīng)做過(guò)的柵格解釋：
文章鏈接：B端交互｜從組件、柵格和響應(yīng)式入手來(lái)制定全局框架
3.3.3 間距數(shù)值應(yīng)用
布局還有個(gè)不是太起眼，但是非常重要的地方，就是間距的應(yīng)用。包含模塊間距、標(biāo)簽列表間距、模塊內(nèi)間距、按鈕內(nèi)間距等等。
間距的應(yīng)用是構(gòu)成整個(gè)頁(yè)面穩(wěn)定性的核心要素之一（另一個(gè)是對(duì)齊），要盡可能將整個(gè)項(xiàng)目的間距控制在幾個(gè)固定的間距數(shù)值之中。
比如 TDesign 中的間距制定：
對(duì)于我們自己的項(xiàng)目，間距的數(shù)值不需要和它們完全一致，但是只像它一樣列幾個(gè)參數(shù)顯然也太蒼白了。所以需要對(duì)每個(gè)間距數(shù)值的應(yīng)用給出一定的示例，確保內(nèi)部對(duì)間距應(yīng)用思路保持一致。
3.3.4 Z 軸層級(jí)關(guān)系制定
全局的最后一個(gè)模塊，就是針對(duì) Z 軸層級(jí)進(jìn)行制定。它用來(lái)表示頁(yè)面中元素的上下順序和疊加關(guān)系，類似設(shè)計(jì)軟件中圖層的順序。
要確定的內(nèi)容除了上方這種固定的 Z 軸順序以外，還包含活動(dòng)的層級(jí)，在原有圖層上 +1 級(jí)的高度。如：
下拉菜單
文字氣泡
操作氣泡
除了在后續(xù)設(shè)計(jì)中讓我們直接進(jìn)行覆蓋以外，Z 軸作為一種空間關(guān)系，被越來(lái)越多的設(shè)計(jì)規(guī)范結(jié)合到投影的使用上。比如 Android Material Design 2 中，不同 Z 軸高使用不同的投影參數(shù)。
如果項(xiàng)目中要應(yīng)用投影，就可以把它關(guān)聯(lián)到 Z 軸的應(yīng)用中，給對(duì)應(yīng)層級(jí)分配固定的投影類型，保證空間感的一致。
以上就是關(guān)于全局框架中需要記錄內(nèi)容的解釋了，具體的描述文案、內(nèi)容，可以參照 Ant、TDesign、Arco 的相關(guān)說(shuō)明，并自行優(yōu)化。
3.4.1 色彩規(guī)范的制定
進(jìn)入樣式的規(guī)范制定中，首先就圍繞顏色展開。顏色規(guī)范主要關(guān)注幾個(gè)固定的色彩類型，并通過(guò)一個(gè)畫布進(jìn)行記錄和展示。
主色：項(xiàng)目的主要用色，以及主色的相關(guān)變體
輔助色：用來(lái)配合主色提升項(xiàng)目?jī)?nèi)容辨識(shí)度和權(quán)重的色彩
中性色：項(xiàng)目中黑白灰的不同灰度值應(yīng)用
遮罩：相關(guān)遮罩層的色彩和透明度設(shè)置
漸變：應(yīng)用漸變色的相關(guān)角度、漸變跨度或固定漸變值
如果對(duì)這些色彩應(yīng)用沒(méi)概念，可以參考我們前面寫過(guò)的 B 端色彩說(shuō)明：
文章鏈接：B 端設(shè)計(jì) | 如何掌握 B 端配色技巧？
這里我要提個(gè)和大多數(shù)網(wǎng)上色彩規(guī)范分享不同的觀點(diǎn)，就是一個(gè)項(xiàng)目里，色彩應(yīng)用數(shù)量是越少越好的。99% 的項(xiàng)目壓根不需要制定完整的多色相衍生色板。
這在實(shí)際設(shè)計(jì)和開發(fā)環(huán)境下就是純粹的負(fù)擔(dān)，因?yàn)槲覀兠看芜x色都面臨著大量的選擇對(duì)象。而且這種情況還需要我們處理對(duì)應(yīng)的 Color Token 命名，和開發(fā)對(duì)齊規(guī)則應(yīng)用方式，投入是遠(yuǎn)遠(yuǎn)低于產(chǎn)出的。
如果想要實(shí)現(xiàn)類似按鈕懸浮、點(diǎn)擊之類的不同狀態(tài)的顏色調(diào)整，就可以通過(guò)黑色、白色遮罩的應(yīng)用來(lái)關(guān)聯(lián)不同交互行為。
要是項(xiàng)目確定使用了某套開源框架，且沒(méi)有固定的品牌色。那么就建議所有顏色都從官方的色卡選色，然后在色彩示例種備注對(duì)應(yīng)的顏色名稱（不是 Token）即可。
比如使用上方的色彩規(guī)范展示案例，直接替換成 TDesign 色卡中應(yīng)用的色彩和名稱：
3.4.2 字體規(guī)范的制定
色彩之后，就是字體的規(guī)范了。同樣，我們字體規(guī)范就是從完成界面中整理出對(duì)應(yīng)的字體規(guī)格，包含標(biāo)題、正文、注釋三個(gè)大類，以及特殊的英文、數(shù)字等類型。
每個(gè)類型要反應(yīng)字體、字號(hào)、字重、行高這幾個(gè)核心參數(shù)。因?yàn)樵O(shè)計(jì)軟件中可以直接查看，所以今天我們?cè)谔幚硪?guī)范的時(shí)候往往在畫布上把字體放上去就可以，往往不用獨(dú)立標(biāo)注。
其中，主要字體定義通常不會(huì)只有一個(gè)，會(huì)包含多個(gè)字體選項(xiàng)，根據(jù)打開網(wǎng)頁(yè)的系統(tǒng)環(huán)境進(jìn)行匹配。所以，我們要篩選出對(duì)應(yīng)的字體范圍進(jìn)行說(shuō)明。
如果對(duì)網(wǎng)頁(yè)字體本身認(rèn)知不夠清晰的，也可以參照我們前面做的規(guī)范說(shuō)明：
文章鏈接：B端設(shè)計(jì)｜全方位講解下字體設(shè)計(jì)規(guī)范
字體和色彩類似，規(guī)格數(shù)量一樣是越少越好，多了即不能提升實(shí)際的效果，還會(huì)拖累項(xiàng)目效率。
3.4.3 圖標(biāo)規(guī)范的制定
在項(xiàng)目中圖標(biāo)也是基本的組成要素，我們過(guò)去關(guān)于圖標(biāo)的分享做了不少了，相信大家都知道圖標(biāo)本身是具有一定繪制規(guī)范的。
雖然 Ant 它們都有一些自帶的圖標(biāo)柵格系統(tǒng)，但即使我們應(yīng)用了它們提供的圖標(biāo)苦，這些柵格對(duì)于我們來(lái)講也毫無(wú)意義。因?yàn)槟鞘撬麄儺媹D標(biāo)的標(biāo)準(zhǔn)，關(guān)我們的規(guī)范什么事……
首先我們要明確項(xiàng)目中不可能只使用完全相同參數(shù)的圖標(biāo)，最起碼在尺寸上會(huì)有不同，所以項(xiàng)目里就必然包含多套圖標(biāo)。
所以即使我們用了類似 iconpark 的圖標(biāo)庫(kù)，依舊要做幾個(gè)關(guān)鍵的規(guī)范要制定的，比如圖標(biāo)的尺寸，對(duì)應(yīng)的粗細(xì)設(shè)置等。
如果沒(méi)有用圖標(biāo)庫(kù)，完全由自己設(shè)計(jì)，那么就需要提供更豐富的規(guī)范內(nèi)容了。尤其是盡量包含不同規(guī)格下的柵格模版，因?yàn)闁鸥竦闹贫ㄔ诓煌叽缦率菚?huì)有不同細(xì)節(jié)調(diào)整的。
如果對(duì)圖標(biāo)的理解不夠深入，也可以看我們做過(guò)的 B 端圖標(biāo)說(shuō)明：
文章鏈接：B端圖標(biāo)不會(huì)做？一文講清B端圖標(biāo)如何設(shè)計(jì)和應(yīng)用
3.4.4 圓角模糊等細(xì)節(jié)制定
樣式中最后一步，就是視覺(jué)細(xì)節(jié)的總結(jié)了，包括圓角、背景模糊、線段、圖形比例等。
我們需要總結(jié)在項(xiàng)目設(shè)計(jì)中運(yùn)用到的可以總結(jié)出來(lái)的細(xì)節(jié)特征，并加以記錄和統(tǒng)一，防止在后續(xù)的設(shè)計(jì)中不斷膨脹出新的規(guī)格。
這些細(xì)節(jié)是構(gòu)成界面樣式豐富性的主要因素，也是最容易破壞項(xiàng)目視覺(jué)統(tǒng)一性的東西。比如圓角的設(shè)置，一些初級(jí) B 端設(shè)計(jì)師輸出的項(xiàng)目，就可以包含無(wú)數(shù)種規(guī)格，且圓角的大小并沒(méi)有清晰的使用邏輯，這是嚴(yán)重降低設(shè)計(jì)質(zhì)量的表現(xiàn)（當(dāng)然也是能力問(wèn)題）。
我們?cè)跉w納細(xì)節(jié)的時(shí)候就是防止不同設(shè)計(jì)師（尤其是剛?cè)腴T的新人），在后續(xù)設(shè)計(jì)中放飛自我。每個(gè)項(xiàng)目都會(huì)有不同的細(xì)節(jié)內(nèi)容和特征，就需要設(shè)計(jì)師自己去思考和總結(jié)出來(lái)了。
以上就是關(guān)于視覺(jué)部分樣式的說(shuō)明，每個(gè)類型可以在軟件中制作一個(gè)獨(dú)立的畫板，并放置對(duì)應(yīng)示例，并且只需要針對(duì)軟件面板中無(wú)法反應(yīng)的規(guī)則做注釋說(shuō)明，不要事無(wú)巨細(xì)把所有參數(shù)備注都寫出來(lái)。
以及可以添加到軟件樣式表中的，也在這個(gè)階段中完成，然后再開始整理后續(xù)的組件庫(kù)，確保組件庫(kù)中的屬性已經(jīng)完全關(guān)聯(lián)到對(duì)應(yīng)樣式上。
3.5.1 控件和組件規(guī)范記錄的標(biāo)準(zhǔn)
再?gòu)?qiáng)調(diào)一遍名詞的概念，控件在這邊指基礎(chǔ)的交互元素和單位，組件指包含復(fù)合操作的業(yè)務(wù)模塊，雖然本質(zhì)上它們都是 “組件 Compoent/Symbol/Kits”，但因?yàn)閺?fù)雜度不同，在規(guī)范的制作上自然會(huì)有一定的差異，這會(huì)再后面具體提及。
它們反而是整套設(shè)計(jì)規(guī)范中最簡(jiǎn)單的部分，因?yàn)?Ant 等框架對(duì)于組件的說(shuō)明和展示也已經(jīng)足夠完善，都是現(xiàn)成的參考案例。所以，我不打算像其他人分享的內(nèi)容一樣，逐一具體控件和組件進(jìn)行簡(jiǎn)單介紹。
制作組件庫(kù)和規(guī)范的主要難點(diǎn)，在我看來(lái)是怎么讓它們可以高效的被利用起來(lái)，所以這需要一個(gè)清晰的內(nèi)容索引機(jī)制。
Ant 等主流組件庫(kù)，如果有引用過(guò)它們組件庫(kù)直接做設(shè)計(jì)的同學(xué)應(yīng)該都會(huì)發(fā)現(xiàn)非常痛苦，不僅僅只是使用了各種編組和自動(dòng)布局的關(guān)系，還包含想要找到自己想要的組件得找很久。
原因就是因?yàn)檫@些組件庫(kù)不是他們團(tuán)隊(duì)真實(shí)的項(xiàng)目庫(kù)，只是 KPI 和任務(wù)。所以并不會(huì)太多考慮實(shí)際應(yīng)用難上的困難，直接使用英文排序來(lái)羅列組件，或者沒(méi)有任何規(guī)則。
比如下圖是 Ant 在即時(shí)中的組件存放面板（內(nèi)容應(yīng)該不完整…），一個(gè)大分類下堆滿了不同的組件，查找起來(lái)非常的低效。
所以針對(duì)我們自己的項(xiàng)目，就不能照搬這種模式。要充分利用軟件的頁(yè)面 Page、畫板 Artboard、鏈接 Link 功能來(lái)完成組件的索引和存放。
首先再回到前面準(zhǔn)備工作中的思維導(dǎo)圖，我們通過(guò)思維導(dǎo)圖記錄了一些會(huì)出現(xiàn)的組件內(nèi)容，這里我們要進(jìn)一步分類。每個(gè)二級(jí)分類對(duì)應(yīng)軟件中的頁(yè)面 Page，三級(jí)分類對(duì)應(yīng)畫板 Artboard，四級(jí)分類對(duì)應(yīng)畫板中存放的組件內(nèi)容。
整體遵循分類和層級(jí)清晰的原則，避免在同一畫板中堆砌沒(méi)有關(guān)聯(lián)性的組件，同時(shí)針對(duì)一份完整規(guī)范的要求，還要在前面添加引導(dǎo)頁(yè) Guide Page，樣式頁(yè) Style Page 即可。
完成結(jié)構(gòu)的創(chuàng)建以后，后面的組件內(nèi)容擺放就根據(jù)這個(gè)目錄來(lái)完成，雖然這個(gè)思維導(dǎo)圖大綱還是第一版，必然是不完善的。但只要前期這個(gè)框架形成體系，那么后面添加的內(nèi)容自然會(huì)根據(jù)這個(gè)結(jié)構(gòu)來(lái)補(bǔ)充。
每個(gè)畫板下方內(nèi)容怎么放，會(huì)在后面的兩個(gè)小節(jié)做解釋。這里重點(diǎn)說(shuō)下第一個(gè)引導(dǎo)頁(yè)面 Guide page，它作為打開規(guī)范看到的第一個(gè)頁(yè)面，是要承載一些必要的信息的，比如設(shè)計(jì)的原則、規(guī)范的使用說(shuō)明、版本的更新之類的解釋。
一定要牢記 “必要信息” 這個(gè)關(guān)鍵詞，不是鼓勵(lì)你們?cè)谑醉?yè)寫幾萬(wàn)字的內(nèi)容進(jìn)行自我感動(dòng)，而是在一個(gè)畫板內(nèi)用最精簡(jiǎn)的文字把該放的信息放進(jìn)去即可。
比如以 Arco 的說(shuō)明作為參照，大概就是這樣：
除此以外，首頁(yè)還有個(gè)最重要的功能，就是 “內(nèi)容目錄”。一個(gè)有效的索引機(jī)制可不僅僅是讓我們手動(dòng)查找，而是會(huì)創(chuàng)建一個(gè)用來(lái)快速跳轉(zhuǎn)的?內(nèi)容明細(xì)目錄。
原理就是可以選中畫板、圖層右鍵復(fù)制它的鏈接，然后再在對(duì)應(yīng)圖層中添加這個(gè)鏈接，就可以讓這個(gè)圖層成為跳轉(zhuǎn)到剛才元素位置的按鈕。
理解原理，之后就是創(chuàng)建目錄了。我們依舊可以使用自動(dòng)布局的功能，并根據(jù)剛才的結(jié)構(gòu)劃分，快速創(chuàng)建出一個(gè)可以自由調(diào)節(jié)并支持跳轉(zhuǎn)的目錄出來(lái)，比如下面的這樣的案例：
在這個(gè)引導(dǎo)頁(yè)中，目錄是權(quán)重更高的模塊，因?yàn)槠渌畔⒁话憧匆粌纱尉蛪蛄?，沒(méi)有特別的事情不會(huì)再看它，而目錄才是每次進(jìn)入這個(gè)頁(yè)面的價(jià)值所在，所以放的位置要顯眼，不要讓其它文本信息過(guò)度占據(jù)頁(yè)面的內(nèi)容。
完成目錄后，就可以在左側(cè)頁(yè)面 Page 列表創(chuàng)建對(duì)應(yīng)的組件分組，并進(jìn)行下一步工作了。
3.5.2 基礎(chǔ)控件規(guī)范制定要點(diǎn)
基礎(chǔ)控件因?yàn)樘?jiǎn)單，所以不需要用太多的文字內(nèi)容做解釋，單個(gè)解釋面板下包含的內(nèi)容只需要有：
標(biāo)題簡(jiǎn)介：簡(jiǎn)單描述這個(gè)控件是什么，有什么作用，最多幾十個(gè)字就夠了
樣式展示：把這個(gè)面板下包含的不同控件類型先統(tǒng)一展示一遍，然后使用簡(jiǎn)單的文字備注
狀態(tài)展示：把每個(gè)類型控件會(huì)出現(xiàn)的狀態(tài)羅列出來(lái)，對(duì)需要備注的地方進(jìn)行說(shuō)明
一定要牢記，自己的項(xiàng)目和線上的開源框架解釋是不同的，內(nèi)容不要太含糊。就比如上面的按鈕，我在項(xiàng)目中使用過(guò)幾個(gè)不同的高度和類型，那我一定會(huì)把它們都列出來(lái)，而不是簡(jiǎn)單放一個(gè)樣式和狀態(tài)就結(jié)束。
因?yàn)橐?guī)格不同，就肯定沒(méi)辦法用一個(gè)按鈕的變體組件來(lái)完成項(xiàng)目的全部按鈕設(shè)計(jì)，所以肯定要生成多個(gè)組件和變體。然后在狀態(tài)展示的部分，就可以直接將變體放進(jìn)去，并且給出對(duì)應(yīng)的注釋即可。
3.5.3 進(jìn)階組件規(guī)范制定要點(diǎn)
組件比控件復(fù)雜，復(fù)雜不只是視覺(jué)而已，而是更復(fù)雜的交互和業(yè)務(wù)邏輯，既然我們梳理規(guī)范了，那自然應(yīng)該把重要的交互解釋放進(jìn)來(lái)。
當(dāng)然，組件也分一般的基礎(chǔ)組件和復(fù)雜的業(yè)務(wù)組件?；A(chǔ)組件如下拉菜單等沒(méi)有交互說(shuō)明必要的和控件的做法別無(wú)二致，麻煩的是復(fù)雜的業(yè)務(wù)組件記錄和說(shuō)明。
且因?yàn)闃I(yè)務(wù)組件的特殊性，盡量在一個(gè)畫板中只展示一個(gè)組件，而不是硬湊到一起去。
復(fù)雜的業(yè)務(wù)組件的面板應(yīng)該包含的內(nèi)容如下：
標(biāo)題簡(jiǎn)介：簡(jiǎn)單描述組件是什么，以及對(duì)應(yīng)的用途
樣式展示：展示同一組件的主要狀態(tài)和樣式
交互說(shuō)明：對(duì)組件的交互創(chuàng)建連線和基本說(shuō)明
這里還延伸出一個(gè)問(wèn)題，就是關(guān)于項(xiàng)目交互文檔的問(wèn)題。在我們前面發(fā)過(guò)的分享中有專門解釋，一套完整的交互文檔會(huì)囊括非常全面的內(nèi)容和信息，但是正常的項(xiàng)目中，交互文檔一般只對(duì)應(yīng)一個(gè)版本和迭代，很難去維護(hù)一份總的交互文檔，來(lái)反應(yīng)項(xiàng)目中最新的交互內(nèi)容。
文章鏈接：B端UI設(shè)計(jì)師的交互文檔應(yīng)該怎么寫？
所以，在組件庫(kù)整理中，每次把交互的信息整理進(jìn)去，是最簡(jiǎn)單、有效的處理方式，不僅組件本身的各個(gè)狀態(tài)樣式能反映出來(lái)，交互的信息也不用到別的文檔查看，減少了文檔維護(hù)的壓力。
只要了解了這幾個(gè)核心的要點(diǎn)，那么整理整套組件庫(kù)就只是時(shí)間問(wèn)題了。
最后還要重復(fù)那句話，文檔格式是死的，人是活的。我們要根據(jù)前期對(duì)項(xiàng)目環(huán)境的分析，來(lái)決定規(guī)范應(yīng)該做到什么程度，該寫哪些說(shuō)明。不要在沒(méi)有充分考慮的情況下，把我例舉的案例直接作為標(biāo)準(zhǔn)在項(xiàng)目中實(shí)踐，很可能因?yàn)閮?nèi)容太多而最終放棄。
所以，盡量先從最精簡(jiǎn)的模式展開，先完成基本的框架搭建和樣式圖層置入。確保組件庫(kù)能滿足最基本使用需求后，再考慮逐漸優(yōu)化豐富相關(guān)信息。
3.6.1 規(guī)范的內(nèi)部評(píng)審會(huì)議
完成版本相關(guān)的規(guī)范以后，就一定要在內(nèi)部召開一次規(guī)范的評(píng)審會(huì)議，來(lái)統(tǒng)一相關(guān)成員的認(rèn)識(shí)。如果團(tuán)隊(duì)成員對(duì)規(guī)范還有意見，認(rèn)為有需要修改的地方，就要進(jìn)行協(xié)商并做進(jìn)一步優(yōu)化。
評(píng)審要解決以下三個(gè)領(lǐng)域的問(wèn)題：
產(chǎn)品/交互
UI 設(shè)計(jì)師
開發(fā)/測(cè)試
產(chǎn)品/交互
第一，讓產(chǎn)品經(jīng)理和交互設(shè)計(jì)師了解規(guī)范中的內(nèi)容有哪些，對(duì)應(yīng)的結(jié)構(gòu)和目錄，以及文件存放的位置，如何打開進(jìn)行查看、引用。
因?yàn)樵O(shè)計(jì)規(guī)范只要整理了，就絕對(duì)不是局限在視覺(jué)樣式上，必然會(huì)包含了框架、交互的內(nèi)容，在后續(xù)的版本迭代中產(chǎn)品和交互都要遵守。
比如提示和彈窗，產(chǎn)品和交互設(shè)計(jì)師都不能在后面的原型中隨心所欲的設(shè)計(jì)，想放哪放哪，必然是要根據(jù)設(shè)計(jì)規(guī)范來(lái)處理。如果一定要和原規(guī)范內(nèi)容不同（規(guī)范不適用新場(chǎng)景），那這就是一個(gè)新的產(chǎn)品需求，是要添加到版本迭代的條目里的。
同時(shí)，產(chǎn)品或者交互在完成一些新頁(yè)面原型的時(shí)候，如果頁(yè)面本身很簡(jiǎn)單，也是可以直接使用規(guī)范中的內(nèi)容直接拼裝高保真原型出來(lái)的，可以大大提升他們的原型有效性，而不是還在產(chǎn)出一些風(fēng)馬不相及的簡(jiǎn)陋原型，降低我們的工作壓力……
UI 設(shè)計(jì)師
第二，就是設(shè)計(jì)團(tuán)隊(duì)內(nèi)部的對(duì)齊了。如果你們團(tuán)隊(duì)人少，都參與了規(guī)范的搭建這步可以略過(guò)，但如果團(tuán)隊(duì)人多，部分設(shè)計(jì)師壓根不知道你做了什么，那就絕對(duì)不能忽略。
我們需要和他們講解規(guī)范文件所在的位置，引用樣式和組件庫(kù)的方法，以及如何進(jìn)行維護(hù)和迭代的說(shuō)明。確保設(shè)計(jì)規(guī)范可以在設(shè)計(jì)團(tuán)隊(duì)中正常的流通和應(yīng)用，而不是完全變成自嗨。
因?yàn)樵O(shè)計(jì)規(guī)范的應(yīng)用必然會(huì)和不同設(shè)計(jì)師原有工作方式有沖突，所以一方面我們要征求他們意見優(yōu)化，另一方面就是需要強(qiáng)制推行的（職場(chǎng)問(wèn)題），需要一開始就有部門的領(lǐng)導(dǎo)或者項(xiàng)目負(fù)責(zé)人發(fā)聲表態(tài)，并全力支持規(guī)范的執(zhí)行，不然規(guī)范的結(jié)果嘛……
開發(fā)/測(cè)試
規(guī)范的應(yīng)用，必然和前端有非常大的關(guān)聯(lián)，需要他們?cè)谶@個(gè)階段理解規(guī)范的內(nèi)容，以及思考模塊化開發(fā)的可能性和阻力，并給出優(yōu)化建議。
如果前端沒(méi)在評(píng)審階段對(duì)我們制作規(guī)范的工作表示認(rèn)可，那基本后面也不會(huì)照著規(guī)范的內(nèi)容做開發(fā)，這同樣需要有外部的不可抗力來(lái)強(qiáng)制他們執(zhí)行規(guī)范。
除了開發(fā)外，測(cè)試工程師也肯定要知道規(guī)范的內(nèi)容，這可以讓他們?cè)跍y(cè)試階段共同發(fā)現(xiàn)設(shè)計(jì)的問(wèn)題，而不是只讓設(shè)計(jì)師做程序還原度檢測(cè)。
這三個(gè)部分意見都統(tǒng)一了，這套規(guī)范才脫離自嗨的范疇，具備真正的生命力。
3.6.2 規(guī)范文件的應(yīng)用思路
最后，就是規(guī)范文件本身的注意要點(diǎn)了。
我們前面講過(guò)，規(guī)范直接使用設(shè)計(jì)軟件中的文件作為載體，在里面放置樣式、組件并添加文字說(shuō)明，然后進(jìn)行發(fā)布，就可以從別的文件引用它了。
常規(guī)的項(xiàng)目設(shè)計(jì)，會(huì)拆分成不同的模塊或流程，每個(gè)用一個(gè)獨(dú)立的設(shè)計(jì)文件。所以這種好處就是即保證文件獨(dú)立性，又支持我們?cè)谝?guī)范頁(yè)面優(yōu)化內(nèi)容批量修改所有引用頁(yè)面。
但這也衍生出一個(gè)新的問(wèn)題，當(dāng)進(jìn)入新的版本以后，我們會(huì)創(chuàng)建新的項(xiàng)目文件，那么按新設(shè)計(jì)更新了規(guī)范，那么老的引用它的文件不就也受到影響了嘛？
所以，我們不能在整個(gè)項(xiàng)目中只引用一個(gè)規(guī)范文件。而是要在每次新的版本中，創(chuàng)建一個(gè)新規(guī)范文件出來(lái)作為引用對(duì)象，并且能保證每個(gè)版本的規(guī)范文件被保存下來(lái)，且讓規(guī)范的文檔編號(hào)和項(xiàng)目的編號(hào)持平是最好的情況，而不是獨(dú)立一個(gè)規(guī)范的版本編號(hào)出來(lái)。
滿足完這點(diǎn)，那么規(guī)范的變動(dòng)就可以追溯，也便于長(zhǎng)期的維護(hù)和更新。我們的整套 B 端設(shè)計(jì)規(guī)范制作的分享也就結(jié)束了。
結(jié)尾
一套優(yōu)秀的規(guī)范輸出并落地，是規(guī)范制定者本身能力的直接反應(yīng)，需要具備扎實(shí)的設(shè)計(jì)基礎(chǔ)，豐富的知識(shí)點(diǎn)，充分的項(xiàng)目經(jīng)驗(yàn)，以及職場(chǎng)必備的同理心和執(zhí)行力。
它是檢驗(yàn)我們自身能力的一面鏡子，新手可以通過(guò)去構(gòu)建規(guī)范來(lái)檢查自己的缺點(diǎn)，以及找到提升的方向。
雖然還有很多細(xì)節(jié)沒(méi)有提，但不打算繼續(xù)拓展圖文內(nèi)容了，因?yàn)榍昂笠呀?jīng)寫了兩萬(wàn)字了。我在原子核中單獨(dú)開一個(gè)分支，會(huì)上一套獨(dú)立的規(guī)范制定視頻教學(xué)。
下方點(diǎn)擊觀看了～
希望對(duì)大家有所幫助……
我們下篇再賤！
