企業(yè)級B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務(wù)復(fù)雜、服務(wù)角色多等特點(diǎn)，在大型迭代項(xiàng)目中，如何做好設(shè)計協(xié)同，把握設(shè)計一致性和還原度常常讓很多設(shè)計團(tuán)隊感覺無從下手，找不到切入點(diǎn)。在長期的項(xiàng)目實(shí)踐中我們發(fā)現(xiàn)，做好設(shè)計規(guī)范能規(guī)范可以幫助個人、團(tuán)隊以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗(yàn)統(tǒng)一。

一、為什么要做設(shè)計規(guī)范？

 以我們設(shè)計團(tuán)隊為例，隨著業(yè)務(wù)不斷擴(kuò)大，定制化需求不斷增加，大型迭代項(xiàng)目做不好設(shè)計和開發(fā)協(xié)同，導(dǎo)致出現(xiàn)“體驗(yàn)一致性差”“設(shè)計效率低”“還原度不可控”等問題。如何有效解決這些問題呢？可以通過構(gòu)建設(shè)計規(guī)范，以保證一致性，實(shí)現(xiàn)工作提效。

 

 

 

 

從不同角度出發(fā)，構(gòu)建設(shè)計規(guī)范都能發(fā)揮積極的作用。

 

對企業(yè)來說：有利于實(shí)現(xiàn)產(chǎn)品經(jīng)理、設(shè)計和研發(fā)的輸出一致。設(shè)計側(cè)主動建立產(chǎn)品設(shè)計規(guī)范，很大程度上是為了做好設(shè)計管控，實(shí)現(xiàn)原型、設(shè)計稿到線上頁面統(tǒng)一的設(shè)計語言，從根本上提升設(shè)計質(zhì)量和還原度，提高用戶滿意度。

 

對個人來說：當(dāng)多個設(shè)計師共同協(xié)作同一項(xiàng)目時，由于設(shè)計理解不一致等原因，容易出現(xiàn)設(shè)計控件使用混亂等問題。若有詳細(xì)的設(shè)計規(guī)范作為引導(dǎo)，有利于實(shí)現(xiàn)產(chǎn)品各個模塊間的一致性。組件化的工具也能減少機(jī)械重復(fù)性的工作，讓設(shè)計師將更多精力投入到用戶研究和提升用戶體驗(yàn)上。

 

 

二、建立設(shè)計規(guī)范的時機(jī)？

 

產(chǎn)品有不同發(fā)展階段，設(shè)計規(guī)范同樣也有，不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多，保證投入產(chǎn)出比最大化；同時也要構(gòu)建一個合理的規(guī)范迭代思路。

 

產(chǎn)品探索初期：

該階段的產(chǎn)品核心目標(biāo)是「驗(yàn)證產(chǎn)品或商業(yè)模型」，業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長狀態(tài)，存在著“先滿足功能，再優(yōu)化體驗(yàn)”的情況，導(dǎo)致該階段的產(chǎn)品體驗(yàn)往往不太過關(guān)。

 

搭建目的：通過定義原則，梳理關(guān)鍵頁面和流程，搭建基本的規(guī)范框架。既讓團(tuán)隊對產(chǎn)品有統(tǒng)一的設(shè)計價值觀和認(rèn)知判斷；從頁面到流程，又能對應(yīng)設(shè)計參照標(biāo)準(zhǔn)；同時業(yè)務(wù)可以在規(guī)定的框架下發(fā)展，不僅讓產(chǎn)品體驗(yàn)的根基牢固，而且不會限制功能設(shè)計自由。

 

搭建范圍：「全局說明」「頁面布局」「通用流程」

 

產(chǎn)品穩(wěn)定發(fā)展期：

該階段的產(chǎn)品基本形態(tài)已穩(wěn)定，也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程，但探索期產(chǎn)品的自由生長，會導(dǎo)致不少設(shè)計細(xì)節(jié)不一致，從而影響了產(chǎn)品整體的體驗(yàn)和效率。

 

搭建目的：通過回溯整理過往設(shè)計，沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗(yàn)，進(jìn)一步優(yōu)化流程和效率， 讓整個產(chǎn)品體驗(yàn)達(dá)到相對穩(wěn)定的狀態(tài)。

 

搭建范圍：「全局說明」「頁面布局」「通用流程」「基礎(chǔ)組件」「業(yè)務(wù)組件」

 

 

三、一個好的設(shè)計規(guī)范是什么樣的？

 

好的設(shè)計規(guī)范有很多優(yōu)秀的例子，例如Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計風(fēng)尚的公司，設(shè)計規(guī)范已經(jīng)上升為設(shè)計語言，指導(dǎo)旗下所有產(chǎn)品的設(shè)計。國內(nèi)做的優(yōu)秀的案例，比如Ant Design，Element，arco.design等，像這類的產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致，把交互、前端和視覺的事情一并解決了，是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計規(guī)范都包含以下幾個特點(diǎn)：靈活性，可擴(kuò)展性，系統(tǒng)性和標(biāo)準(zhǔn)性。

 

一般團(tuán)隊內(nèi)部構(gòu)建的設(shè)計規(guī)范都源于某一產(chǎn)品或者業(yè)務(wù)，因?yàn)橹饕菆F(tuán)隊內(nèi)部成員使用，追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設(shè)計規(guī)范的基礎(chǔ)上，適度參考行業(yè)設(shè)計規(guī)范，能復(fù)用的直接參考，同時專注于業(yè)務(wù)本身，具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮，使整個規(guī)范制定效率更高，科學(xué)性、指導(dǎo)性更強(qiáng)。

 

 

四、如何制定設(shè)計規(guī)范？

 

設(shè)計規(guī)范的執(zhí)行和推動主要分為四大步驟：

類型梳理：分析業(yè)務(wù)場景，整理和歸類組件，評估具體組件優(yōu)先級和迭代計劃；

全局說明：統(tǒng)一布局，色板，字體，常用樣式，規(guī)范設(shè)計語言；

抽象設(shè)計：將設(shè)計共性抽象出來，構(gòu)建組件通用方案；

效果驗(yàn)證：通過定性/定量數(shù)據(jù)追蹤效果，分析原因，迭代改進(jìn)；

 

 

第一步：類目梳理

 

收集現(xiàn)有設(shè)計頁面，分析業(yè)務(wù)場景，再參考行業(yè)通用規(guī)范的定義，整理和歸類組件，可以先羅列完整，再根據(jù)產(chǎn)品實(shí)際業(yè)務(wù)需要進(jìn)行增刪改。

 

全局說明：明確影響整站各個模塊、各個頁面設(shè)計的原則和規(guī)范，指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計。包括統(tǒng)一布局，色板，字體，樣式等設(shè)計規(guī)則。

 

基礎(chǔ)組件：可參考行業(yè)通用規(guī)范中的基礎(chǔ)組件分類和組成，因?yàn)榇蟛糠只A(chǔ)組件都具有一定的通用性，站在巨人的肩膀上更高效。這里我們根據(jù)實(shí)際情況，將基礎(chǔ)組件分為導(dǎo)航，通用，數(shù)據(jù)展示，數(shù)據(jù)錄入，反饋5個大模塊，每個模塊下再細(xì)分各小類，構(gòu)成基礎(chǔ)組件的類目。

 

業(yè)務(wù)組件：根據(jù)業(yè)務(wù)需求，可以定義屬于自己的業(yè)務(wù)組件，這也是區(qū)別于其他通用行業(yè)組件庫的一個核心部分。

 

 

第二步：全局說明

 

因?yàn)樵诖篌w量產(chǎn)品設(shè)計中，每個模塊都由不同的同學(xué)負(fù)責(zé)，這樣全局產(chǎn)品的把握就會降低，需要去補(bǔ)充全局規(guī)范說明去維持產(chǎn)品全局通用部分的一致性。包括布局，色彩規(guī)范，字體，樣式等；

 

 

第三步：抽象設(shè)計

抽象設(shè)計是設(shè)計規(guī)范中最核心，工作量最大，難度最高的一個環(huán)節(jié)。我們可以將它拆解成幾個部分，先做出基礎(chǔ)組件，再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計業(yè)務(wù)組件，最后抽象成頁面模板。

基礎(chǔ)組件

組件庫的搭建，就一定要提到原子思維。道爾頓原子論認(rèn)為，物質(zhì)世界的最小單位是原子，原子是單一的，獨(dú)立的，不可被分割的，在化學(xué)變化中保持著穩(wěn)定的狀態(tài)。這個原子理論同樣適用于設(shè)計系統(tǒng)中。

 

其中，最小單位設(shè)計元素就是基礎(chǔ)組件。我們在做設(shè)計系統(tǒng)的時候希望當(dāng)你改動任何一個原子，你有自信其他所有依賴于這個原子的部件全部自動更新。只有滿足了這一點(diǎn)，設(shè)計系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會真正實(shí)現(xiàn)。例如，在sketch中，分享樣式和嵌套符號的使用。

業(yè)務(wù)組件

在構(gòu)建完基礎(chǔ)組件后，可以根據(jù)業(yè)務(wù)需求，將使用頻率較高的組件進(jìn)行評估，抽象成業(yè)務(wù)組件。

一般業(yè)務(wù)組件可分成兩大類：

一類是由多個基礎(chǔ)組件組成的帶有業(yè)務(wù)需求復(fù)合組件，如：復(fù)合標(biāo)簽，快捷時間選擇器等；

另一類是針對特定業(yè)務(wù)場景的業(yè)務(wù)組件：如地圖，站點(diǎn)等；

 

頁面模版

在完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建后，我們可以根據(jù)全局說明，利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率，也能提供很好的組件使用示范效應(yīng)，加強(qiáng)設(shè)計說明和組件之間的結(jié)合。

 

第四步：效果驗(yàn)證

組件質(zhì)量評估：從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標(biāo)準(zhǔn)化覆蓋的好壞。

系統(tǒng)應(yīng)用層面的評價：

系統(tǒng)是否幫助業(yè)務(wù)提效；

當(dāng)業(yè)務(wù)不能直接應(yīng)用系統(tǒng)，能否靈活改動；

系統(tǒng)是否幫助業(yè)務(wù)變得更有競爭力、更創(chuàng)新；

五、迭代方案和機(jī)制提效

迭代機(jī)制

當(dāng)我們完成設(shè)計規(guī)范的整體構(gòu)建后，對于新需求，通過評估復(fù)用性、通用性和優(yōu)先級，低級別的走定制設(shè)計完成交付。高級別的通過抽象設(shè)計、內(nèi)審、沉淀到組件庫中。

機(jī)制提效

在完成設(shè)計規(guī)范的構(gòu)建后，我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師，幫助每個環(huán)節(jié)的人員快速搭建產(chǎn)出物，推動上下游機(jī)制提效。

例如，我們會基于設(shè)計規(guī)范，為產(chǎn)品經(jīng)理提供符合設(shè)計規(guī)范的Axure元件庫，產(chǎn)品經(jīng)理使用元件庫，可以快速搭建原型，產(chǎn)出prd，與設(shè)計師、開發(fā)的溝通也更加順暢。簡單的修改可以跳過設(shè)計師出圖這一步驟，直接和開發(fā)溝通，極大加快前期的節(jié)奏。甚至通過借助元件庫，產(chǎn)品經(jīng)理可以搭建出高保真原型，用于直接和用戶確認(rèn)或者給客戶進(jìn)行demo的演示。

 

基于設(shè)計規(guī)范，推動研發(fā)實(shí)現(xiàn)組件代碼化，通過設(shè)計標(biāo)準(zhǔn)化可以達(dá)到研發(fā)工業(yè)化。通過定義標(biāo)準(zhǔn)規(guī)范，提高流程、組件的復(fù)用率，開發(fā)側(cè)就可以制定相應(yīng)組件，形成前端腳手架，方便后期迭代的組件化使用，有效地避免不必要的分歧點(diǎn)和重復(fù)造輪子，同時減少上線前設(shè)計走查、測試的工作量，保證落地效果，提升生產(chǎn)力。

 

 

以上就是我們在構(gòu)建自己的企業(yè)設(shè)計規(guī)范的流程，最后，給大家展示一下，我們目前的企業(yè)設(shè)計規(guī)范和部分應(yīng)用情況。