各行各業(yè)都有著自己的規(guī)范，那么我們?cè)谧鲈O(shè)計(jì)規(guī)范的時(shí)候，常常會(huì)面臨著一些問(wèn)題。本文大致總結(jié)了兩個(gè)問(wèn)題：規(guī)劃缺乏生長(zhǎng)性和可復(fù)用性。那么該如何解決這兩個(gè)問(wèn)題呢？作者對(duì)此進(jìn)行總結(jié)，希望對(duì)你有所幫助。

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

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

簡(jiǎn)而言之，規(guī)范缺乏對(duì)未來(lái)的規(guī)劃，缺少生長(zhǎng)性。

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

（3）缺乏對(duì)整體信息架構(gòu)的梳理，缺少全局上對(duì)產(chǎn)品的思考。這個(gè)優(yōu)勢(shì)在于避免重復(fù)造車(chē)輪，有利于合并同類(lèi)項(xiàng)，讓產(chǎn)品更輕量，更易用。

簡(jiǎn)而言之，規(guī)劃缺乏生長(zhǎng)性和可復(fù)用性。

一、應(yīng)該如何預(yù)留生長(zhǎng)性

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

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

其實(shí)導(dǎo)致“秤不平”，最重要是缺少了生長(zhǎng)性的砝碼。那么什么是生長(zhǎng)性，生長(zhǎng)性的邊界又在哪里，該怎樣預(yù)留生長(zhǎng)性呢？

1. 什么是生長(zhǎng)性

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

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

2. 生長(zhǎng)性的邊界在哪里

規(guī)范總體來(lái)說(shuō)，是設(shè)計(jì)和開(kāi)發(fā)共同的指引。生長(zhǎng)性的邊界在于“是否能做到清晰的指引”：開(kāi)發(fā)在引用時(shí)，能否應(yīng)對(duì)各種報(bào)錯(cuò)、能否處理極端場(chǎng)景，能否應(yīng)對(duì)產(chǎn)品經(jīng)理臨時(shí)的小需求等等。這些都是判斷生長(zhǎng)性區(qū)間范圍的衡量標(biāo)準(zhǔn)。

3. 如何在組件中預(yù)留生長(zhǎng)性？

（1）通盤(pán)考慮報(bào)錯(cuò)

在設(shè)計(jì)報(bào)錯(cuò)提示組件時(shí)，需要整合多個(gè)業(yè)務(wù)場(chǎng)景下，除了需要通盤(pán)考慮樣式之外，也需要和前端同學(xué)討論是否會(huì)影響性能的變化。

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

（2）定義極端場(chǎng)景

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

（3）提前預(yù)留承載空間

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

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

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

比如，醫(yī)療SaaS產(chǎn)品，大部分私人醫(yī)院都會(huì)要求產(chǎn)品支持Pad端。私人醫(yī)院相對(duì)公立醫(yī)院，更重視醫(yī)療體驗(yàn)，以及微營(yíng)銷(xiāo)?；颊咴诤蛟\或者做康復(fù)醫(yī)療時(shí)，需要做健康宣導(dǎo)或者活動(dòng)營(yíng)銷(xiāo)等。

因此在設(shè)計(jì)組件時(shí)，如果我們通盤(pán)考慮了該組件在PC端和移動(dòng)端、Pad端的可承載性，便可以讓品牌得到了最大化延展。

（5）無(wú)障礙設(shè)計(jì)

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

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

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

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

往往我們?cè)诠ぷ髦写罱ㄒ?guī)范時(shí)，會(huì)過(guò)度重視原子組件搭建，而忽略了流程梳理。規(guī)范上忽略了流程梳理，設(shè)計(jì)稿中也會(huì)難免遺漏一些場(chǎng)景，導(dǎo)致實(shí)際上線時(shí)用戶(hù)體驗(yàn)不佳或者流程不絲滑。

舉個(gè)例子：

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

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

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

本質(zhì)上，會(huì)診也是日程的一個(gè)分類(lèi)，但由于會(huì)診涉及到多個(gè)角色的協(xié)同，分為普通會(huì)診和多學(xué)科會(huì)診，比普通日程更加復(fù)雜，是屬于長(zhǎng)期的工作流，因?yàn)闀?huì)診除了會(huì)診之外，同時(shí)需要關(guān)注會(huì)診后患者的治療，以便下次會(huì)診復(fù)盤(pán)。

將日程和會(huì)診的共性流程進(jìn)行封裝，將為開(kāi)發(fā)帶來(lái)諸多便利。

（2）梳理信息架構(gòu)

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

（3）文案規(guī)范

文案往往體現(xiàn)產(chǎn)品氣質(zhì)。梳理文案規(guī)范，有利于從產(chǎn)品上提升企業(yè)氣質(zhì)和形象。可以將文案分為引導(dǎo)類(lèi)文案、描述類(lèi)文案、報(bào)錯(cuò)類(lèi)文案等。而文案規(guī)范梳理應(yīng)該放在成熟期的產(chǎn)品使用。業(yè)務(wù)在蓬勃發(fā)展期間，還是應(yīng)探索業(yè)務(wù)組件為主，文案規(guī)范可以往后延展。

以上是筆者結(jié)合項(xiàng)目經(jīng)驗(yàn)的一點(diǎn)心得，希望能幫助到大家。