各行各業(yè)都有著自己的規(guī)范，那么我們在做設計規(guī)范的時候，常常會面臨著一些問題。本文大致總結了兩個問題：規(guī)劃缺乏生長性和可復用性。那么該如何解決這兩個問題呢？作者對此進行總結，希望對你有所幫助。

最近一段時間筆者正好在梳理設計規(guī)范，在做設計規(guī)范的時候，經常面臨如下幾個問題：

（1）由于業(yè)務發(fā)展，規(guī)范不斷在更迭，今天做的設計組件卻并不適合1個月之后客戶的需求。

簡而言之，規(guī)范缺乏對未來的規(guī)劃，缺少生長性。

（2）規(guī)范主要集中在業(yè)務組件上的思考，但是缺乏對業(yè)務流程的梳理，導致流程上復用率低。

（3）缺乏對整體信息架構的梳理，缺少全局上對產品的思考。這個優(yōu)勢在于避免重復造車輪，有利于合并同類項，讓產品更輕量，更易用。

簡而言之，規(guī)劃缺乏生長性和可復用性。

一、應該如何預留生長性

大部分做中后臺系統的同學，大抵都會站在“巨人的肩膀”上重新規(guī)劃、設計組件?！熬奕说募绨颉崩鏏NT DESIGN，大而全，在列表和表單組件引用時非常絲滑，但是卻缺少精細化和對業(yè)務訴求的承載。

因此，大部分的同學都會結合業(yè)務訴求，形成一套對公司業(yè)務有強支撐和專業(yè)化的組件，做到小而精。問題是，設計同學在設計規(guī)范時，心里的那桿秤始終擺不平。定的太嚴謹，未來業(yè)務變化后，組件又需要重新開發(fā)，不可預期的提高了開發(fā)成本，定的太松弛，前端引用時會bug頻出。

其實導致“秤不平”，最重要是缺少了生長性的砝碼。那么什么是生長性，生長性的邊界又在哪里，該怎樣預留生長性呢？

1. 什么是生長性

生長性指的是產品方向變更時，設計組件仍能支撐業(yè)務訴求。比如原有組件設計時只考慮靜態(tài)交互，而業(yè)務變化后需要新增可拖拽功能，方便用戶快速處理信息。如果在設計組件時，就預留了生長性和空間，后期改動就只需要往上加，而不需要大改動。

再比如規(guī)范建立初期，業(yè)務是以國內為主，但由于疫情之后，國內僧多粥少，企業(yè)考慮未來出海，走差異化競爭。此時，國際化最直觀的變化在文字和行高規(guī)范，多門語言，多種文字在相同場景下會出現承載空間不夠或過于富余等問題。不同國家對部分結果頁指示也會有文化禁忌，此時就需要盡量避免引起語意沖突的部分。如果規(guī)范預留了足夠的生長性，業(yè)務迅速調整時，設計和開發(fā)也能無縫跟上，節(jié)約時間，搶占市場。

2. 生長性的邊界在哪里

規(guī)范總體來說，是設計和開發(fā)共同的指引。生長性的邊界在于“是否能做到清晰的指引”：開發(fā)在引用時，能否應對各種報錯、能否處理極端場景，能否應對產品經理臨時的小需求等等。這些都是判斷生長性區(qū)間范圍的衡量標準。

3. 如何在組件中預留生長性？

（1）通盤考慮報錯

在設計報錯提示組件時，需要整合多個業(yè)務場景下，除了需要通盤考慮樣式之外，也需要和前端同學討論是否會影響性能的變化。

大部分的報錯可以分為：表單報錯、列表報錯、全局報錯、業(yè)務場景新組件報錯。報錯提示如若不能同時適應這四種場景，就需要將組件做樣式微調，分成四種報錯樣式，整合到規(guī)范中。

（2）定義極端場景

比如由于很多場景下，業(yè)務訴求很可能會在原有組件中加內容、加層級，而增加的工作量往往產品會直接交付前端同學實現，因此如果定義好了極端場景，設計同學就不必每個需求下都需要做微調，前端同學對極端場景做判斷，即可輕松實現效果。（涉及到工作流程的問題）

（3）提前預留承載空間

首先，就需要厘清現有業(yè)務控件承載，比如頁面區(qū)域工具欄，工具欄本身區(qū)域有限，而業(yè)務方在不停加工具，在設計初期就需要規(guī)劃好，頁面承載空間不夠時，應如何處理，這樣利于后期的延展。

（4）多端視覺和交互規(guī)范，確保品牌延展性

比如中臺產品支持PC端、Pad端，就需要考慮同樣組件在Pad下可點擊區(qū)域大小、Pad交互習慣等。

比如，醫(yī)療SaaS產品，大部分私人醫(yī)院都會要求產品支持Pad端。私人醫(yī)院相對公立醫(yī)院，更重視醫(yī)療體驗，以及微營銷?；颊咴诤蛟\或者做康復醫(yī)療時，需要做健康宣導或者活動營銷等。

因此在設計組件時，如果我們通盤考慮了該組件在PC端和移動端、Pad端的可承載性，便可以讓品牌得到了最大化延展。

（5）無障礙設計

規(guī)范建立初期，服務的是大多數身心健康人士。隨著業(yè)務拓展，企業(yè)品牌建立，對于殘障人士的無障礙設計、老年人關愛模式，是否需要考慮其中。需要同時結合公司品牌定位，為產品預留生長性。而無障礙設計的規(guī)范，國內外很多知名企業(yè)已經根據殘障人士的特點，有一套該如何搭建的引導，設計同學只需要順延，結合業(yè)務，搭建自有的無障礙規(guī)范即可。

二、應該如何最大化規(guī)范的可復用性

流程上復用率低、產品過重缺乏全局思考根本原因在于，過度重視原子組件搭建，而忽略了整體架構和流程的梳理。

（1）引入共性流程規(guī)范

往往我們在工作中搭建規(guī)范時，會過度重視原子組件搭建，而忽略了流程梳理。規(guī)范上忽略了流程梳理，設計稿中也會難免遺漏一些場景，導致實際上線時用戶體驗不佳或者流程不絲滑。

舉個例子：

例如在金融軟件中，涉及到貸款流程，小微貸，企業(yè)貸，消費貸等，由于屬性的不同，各個貸款流程在細微上有差異，也有共性。在梳理設計規(guī)范時，就可以提煉共性的貸款流程，封裝組件。在前端開發(fā)時就可以節(jié)省不少人力。

再比如醫(yī)療SaaS軟件中，會診流程和日程流程：

• 日程：發(fā)起日程-邀約日程-再次邀約（未及時加入提醒）-記錄日程。
• 會診：發(fā)起會診-邀約會診-再次邀約（未及時同意提醒）-線上視頻會診（線下記錄會診內容）-上傳會診記錄-跟進會診后患者狀況。

本質上，會診也是日程的一個分類，但由于會診涉及到多個角色的協同，分為普通會診和多學科會診，比普通日程更加復雜，是屬于長期的工作流，因為會診除了會診之外，同時需要關注會診后患者的治療，以便下次會診復盤。

將日程和會診的共性流程進行封裝，將為開發(fā)帶來諸多便利。

（2）梳理信息架構

Z軸分布包含平面內部的分布和空間上的排序。平面的分布可以梳理各個一級頁面、二級頁面的框架層，便于設計組內同學在設計新頁面時參照規(guī)范快速出稿。而Z軸上的空間分布，包含浮層、彈窗、提示等的出現次序和排列。提前規(guī)劃好排列順序，有利于組件沖突時，有可供參考的規(guī)范引導。

（3）文案規(guī)范

文案往往體現產品氣質。梳理文案規(guī)范，有利于從產品上提升企業(yè)氣質和形象?？梢詫⑽陌阜譃橐龑ь愇陌?、描述類文案、報錯類文案等。而文案規(guī)范梳理應該放在成熟期的產品使用。業(yè)務在蓬勃發(fā)展期間，還是應探索業(yè)務組件為主，文案規(guī)范可以往后延展。

以上是筆者結合項目經驗的一點心得，希望能幫助到大家。