為什么要做設(shè)計(jì)規(guī)范决左？（why）

如果說工作兩年我養(yǎng)成了什么習(xí)慣的話构捡，那一定是在做任何需求之前，都先問問自己“為什么要做這件事”她我。整理規(guī)范也是一樣，做之前先要想清楚為什么要做規(guī)范迫横？清楚的了解做一件事的價(jià)值有助于我們產(chǎn)生心理認(rèn)同番舆，從而更好的實(shí)施。

1.保證平臺(tái)統(tǒng)一性

統(tǒng)一性是交互設(shè)計(jì)的一個(gè)基本原則矾踱，在一個(gè)長(zhǎng)期迭代多人合作的項(xiàng)目中恨狈，不同的設(shè)計(jì)師會(huì)負(fù)責(zé)不同的模塊，每個(gè)人都有各自的思路呛讲，就有可能會(huì)對(duì)相同的元素做出了不同的方案禾怠，對(duì)于用戶來說容易造成困惑返奉，對(duì)品牌整體形象的建設(shè)也沒有好處。所以對(duì)于較大型的產(chǎn)品吗氏，最好有設(shè)計(jì)規(guī)范來定義基本的元素芽偏，幫助眾多設(shè)計(jì)師一起做出有統(tǒng)一性的產(chǎn)品。

2.提升團(tuán)隊(duì)工作效率

對(duì)于同一個(gè)基本元素弦讽，如果沒有設(shè)計(jì)規(guī)范污尉，交互設(shè)計(jì)師需要設(shè)計(jì)一次交互方式，視覺設(shè)計(jì)師需要設(shè)計(jì)一次外形往产，UI開發(fā)同學(xué)需要開發(fā)一次十厢，每個(gè)不同的設(shè)計(jì)師遇到這個(gè)元素時(shí)都可能重新設(shè)計(jì)一遍。但如果有了設(shè)計(jì)規(guī)范捂齐，只需設(shè)計(jì)一次蛮放，團(tuán)隊(duì)中任何一個(gè)設(shè)計(jì)師需要用的時(shí)候直接拿來用就可以了，也不需要再進(jìn)行視覺和開發(fā)奠宜，極大的提升了效率包颁。

3.打磨細(xì)節(jié)體驗(yàn)

在整理每個(gè)元素的規(guī)范時(shí)，設(shè)計(jì)師都需要對(duì)其場(chǎng)景压真、狀態(tài)考慮清楚娩嚼。在整理的過程中，經(jīng)常會(huì)發(fā)現(xiàn)一些以前沒注意到的問題滴肿，并進(jìn)行優(yōu)化岳悟。把一個(gè)小元素單獨(dú)拎出來仔細(xì)考量，寫成一篇完整規(guī)范的過程泼差，其實(shí)就是在打磨細(xì)節(jié)的過程贵少。

什么時(shí)候做設(shè)計(jì)規(guī)范？（when）

雖說最理想的情況是在做設(shè)計(jì)前把設(shè)計(jì)準(zhǔn)則堆缘、風(fēng)格滔灶、規(guī)范都定義清楚，但在實(shí)際項(xiàng)目中很少能有條件這樣做吼肥。項(xiàng)目初期總是小步快跑录平、先上再說，產(chǎn)品在不斷試錯(cuò)的同時(shí)設(shè)計(jì)也是在不斷試錯(cuò)缀皱，在一開始就能定義一個(gè)完全“正確”的規(guī)范其實(shí)是不太現(xiàn)實(shí)的斗这。

通常情況下，在產(chǎn)品發(fā)展日趨平穩(wěn)啤斗，產(chǎn)品定位和品牌形象都比較確定的時(shí)候表箭；參與設(shè)計(jì)的人越來越多，統(tǒng)一性和效率的問題漸漸顯現(xiàn)出來的時(shí)候争占，就是需要定義和整理設(shè)計(jì)規(guī)范的時(shí)候燃逻。

什么樣的規(guī)范是好規(guī)范序目？（what）

規(guī)范是給人閱讀的，寫好一篇規(guī)范就像是設(shè)計(jì)好一個(gè)界面伯襟，我們也應(yīng)該確定目標(biāo)用戶猿涨、用戶目標(biāo)、設(shè)計(jì)目標(biāo)后姆怪，再進(jìn)行設(shè)計(jì)執(zhí)行叛赚。

一.用戶目標(biāo)

設(shè)計(jì)規(guī)范的目標(biāo)用戶有可能只是一個(gè)團(tuán)隊(duì)內(nèi)的設(shè)計(jì)師，有可能是第三方的工作人員稽揭，有可能是公開給所有人都可以查看的俺附。不管是哪種類型的用戶，都會(huì)有一個(gè)基本一致的目標(biāo)溪掀，那就是“快速的在規(guī)范中找到有效信息并獲得指導(dǎo)”事镣。在這個(gè)一致的目標(biāo)下又有所不同之處。

1.團(tuán)隊(duì)內(nèi)設(shè)計(jì)師——準(zhǔn)確使用

團(tuán)隊(duì)內(nèi)的設(shè)計(jì)師通常情況下需要盡可能的依據(jù)規(guī)范做出“準(zhǔn)確”的設(shè)計(jì)揪胃，保證元素使用在正確的場(chǎng)景下璃哟，保證整個(gè)平臺(tái)的一致性。所以給團(tuán)隊(duì)內(nèi)的設(shè)計(jì)師看的規(guī)范相對(duì)來說會(huì)詳細(xì)很多喊递，以騰訊云內(nèi)部設(shè)計(jì)規(guī)范為例随闪，需要包含實(shí)際的交互場(chǎng)景舉例及說明幫助交互設(shè)計(jì)師理解和判斷，需要包含視覺標(biāo)注幫助視覺設(shè)計(jì)師和UI工程師查閱等骚勘。

2.第三方團(tuán)隊(duì)——快速上手

給第三方工作人員的設(shè)計(jì)規(guī)范又有所不同铐伴，他們的目標(biāo)更側(cè)重在合作時(shí)快速上手，直接將團(tuán)隊(duì)內(nèi)部詳細(xì)的長(zhǎng)篇大論拿給他們看很難保證他們有耐心閱讀俏讹，因此很難保證他們遵循規(guī)范当宴。針對(duì)這種情況，更適合整理出典型頁面藐石，UI Kit即供，加之簡(jiǎn)單易懂的說明給他們定拟，讓他們快速了解頁面應(yīng)該怎么布局于微，可以用現(xiàn)成的元素進(jìn)行快速拼接就可以了。

3.公開大眾——尋求參考

公開給大眾的設(shè)計(jì)規(guī)范有非常詳細(xì)的青自，也有比較簡(jiǎn)單直接的株依，主要還是要根據(jù)公開的目的來確定。通常情況下只是起到參考作用的公開指南延窜，內(nèi)容會(huì)比團(tuán)隊(duì)內(nèi)部的設(shè)計(jì)規(guī)范精煉的多恋腕，大都只是展示定義描述、樣式逆瑞，再配以正確和錯(cuò)誤示范幫助理解荠藤。而某些公開規(guī)范同時(shí)起到給合作方使用的功能時(shí)伙单，就會(huì)包含更多詳細(xì)的內(nèi)容，詳細(xì)的描述哈肖、視覺標(biāo)注吻育、代碼等等。

二.設(shè)計(jì)目標(biāo)

確定用戶目標(biāo)之后淤井，設(shè)計(jì)目標(biāo)就很清晰了布疼，一個(gè)好的規(guī)范應(yīng)該是高效的、簡(jiǎn)單易懂的币狠，以內(nèi)部設(shè)計(jì)規(guī)范為例游两，具體執(zhí)行時(shí)，我們應(yīng)該確保分類合理漩绵、規(guī)范本身保持一致贱案、布局排版易讀，來提升設(shè)計(jì)師查閱的效率止吐；確保定義清晰轰坊、描述準(zhǔn)確、場(chǎng)景完備祟印，來幫助設(shè)計(jì)師理解和使用肴沫。

1.分類合理

一整套規(guī)范的內(nèi)容通常都很多，為了能讓用戶快速查找蕴忆，合理的分類必不可少颤芬。

2.保持一致

每篇規(guī)范包含的內(nèi)容保持一致、格式保持一致可以給用戶構(gòu)建心理預(yù)期套鹅，讓他們看一篇規(guī)范就知道每篇都包含哪些部分站蝠，可以找到哪些信息。

3.排版易讀

通過合適的字體字號(hào)卓鹿、間距留白減少用戶閱讀的疲勞感菱魔，圖片與說明清晰的結(jié)合，正確和錯(cuò)誤示例要能明顯區(qū)分吟孙，使用表格來組織信息澜倦。

4.定義清晰、描述準(zhǔn)確杰妓、場(chǎng)景完備

用簡(jiǎn)單易懂的語句進(jìn)行定義和描述藻治，幫助用戶了解是什么、怎么用巷挥、哪些場(chǎng)景可用桩卵。（規(guī)范不可能包含所有場(chǎng)景，但應(yīng)該包含大多數(shù)常見場(chǎng)景。）

如何系統(tǒng)的整理規(guī)范雏节？（how）

一.制定一個(gè)計(jì)劃

整理設(shè)計(jì)規(guī)范是一個(gè)涉及廣周期長(zhǎng)的項(xiàng)目胜嗓，所以有一個(gè)清晰的計(jì)劃可以幫助這個(gè)項(xiàng)目更好的推進(jìn)。制定計(jì)劃的流程如下圖所示：

1.整理規(guī)范內(nèi)容及分類

做之前先明確我們需要整理哪些內(nèi)容钩乍，這些內(nèi)容的分類是怎樣的兼蕊，下圖是我們整理騰訊云規(guī)范時(shí)列的內(nèi)容及分類，初始時(shí)列舉的內(nèi)容可能不全件蚕，但沒有關(guān)系孙技，先把最基礎(chǔ)的分類和內(nèi)容定義好，后續(xù)發(fā)現(xiàn)有遺漏的內(nèi)容再添加進(jìn)去即可排作。

2.確定優(yōu)先級(jí)與分工

由上圖可以看出牵啦，一整套規(guī)范包含的內(nèi)容非常的多，所以內(nèi)容和分類整理好后妄痪，還需要確定每塊內(nèi)容的優(yōu)先級(jí)和分工哈雏。從大的模塊上說，首先應(yīng)當(dāng)確定整體的設(shè)計(jì)風(fēng)格和框架衫生，整體確定后才好確定細(xì)節(jié)的風(fēng)格裳瘪；其次的優(yōu)先級(jí)最好是控件、組件罪针、場(chǎng)景彭羹，因?yàn)榭丶M成組件，控件和組件組成場(chǎng)景泪酱，所以先確定小的控件后派殷，組件和場(chǎng)景更容易確定。至于分工墓阀，規(guī)范的制定是整個(gè)團(tuán)隊(duì)的事情毡惜，最好團(tuán)隊(duì)中的設(shè)計(jì)師都能夠參與，互相分擔(dān)工作量以提高規(guī)范整理的效率斯撮，也能夠確保規(guī)范是在大家的討論下制定而成经伙，每個(gè)人都參與過并贊同結(jié)論。

3.確定規(guī)范展示形式及推進(jìn)流程

其實(shí)確定規(guī)范展示形式也是確定規(guī)范目標(biāo)用戶勿锅，要確定規(guī)范是給誰看的帕膜，展示在網(wǎng)站上還是直接用文檔承載，網(wǎng)站是否對(duì)公眾開放等問題粱甫。確定了這些問題后就可以確定規(guī)范的詳細(xì)程度泳叠、大體的展示形式。

推進(jìn)流程指的是整個(gè)項(xiàng)目要怎么跑茶宵，涉及到每個(gè)設(shè)計(jì)師接到分工后如何輸出，何時(shí)討論宗挥，怎么輸出乌庶，交接給誰等等問題种蝶。例如我們的推進(jìn)流程是每周固定時(shí)間開規(guī)范討論會(huì)，每次確定幾個(gè)要討論的內(nèi)容瞒大，負(fù)責(zé)的設(shè)計(jì)師整理問題螃征，在會(huì)議上和大家一起討論敲定結(jié)果，經(jīng)過兩周討論后輸出最終版本透敌，交給下一個(gè)負(fù)責(zé)人盯滚。

4.制定規(guī)范的規(guī)范

規(guī)范本身要遵循什么規(guī)則，也是需要事先確定的酗电，我認(rèn)為包括兩個(gè)部分魄藕，一是設(shè)計(jì)原則，二是輸出物規(guī)范撵术。

根據(jù)整個(gè)產(chǎn)品的目標(biāo)用戶背率、用戶及產(chǎn)品目標(biāo)可以確定我們的設(shè)計(jì)原則，所有的規(guī)范梳理都要遵循最基礎(chǔ)的設(shè)計(jì)原則嫩与，以滿足用戶及產(chǎn)品需求寝姿，提升整體的體驗(yàn)。

之前有提到過規(guī)范自身保持一致性是提高規(guī)范閱讀效率的一部分划滋，而且為了提升設(shè)計(jì)師輸出的效率饵筑，事先制定好規(guī)范輸出物的規(guī)范可以幫助設(shè)計(jì)師按照一個(gè)既定的格式進(jìn)行輸出，同時(shí)又能保持一致性处坪。我們的輸出物規(guī)范中包括：

規(guī)范包含的內(nèi)容翻翩，需要有描述、類型及場(chǎng)景稻薇、使用說明嫂冻、視覺規(guī)范、補(bǔ)充說明塞椎、相關(guān)下載桨仿、負(fù)責(zé)設(shè)計(jì)師

規(guī)范插圖的尺寸、背景色案狠、板式服傍、字體及用色、正確及錯(cuò)誤示例圖樣式等

二.單個(gè)規(guī)范的整理流程

整體計(jì)劃制定好之后骂铁，就需要開始一個(gè)個(gè)整理規(guī)范內(nèi)容了吹零。整理單個(gè)規(guī)范的內(nèi)容也是有流程可尋的，如下圖所示拉庵。下面以整理“對(duì)話框”規(guī)范為例灿椅，講解一下單個(gè)規(guī)范整理的流程。

1.收集場(chǎng)景

給已經(jīng)趨于成熟的產(chǎn)品整理規(guī)范，第一步就是要先收集場(chǎng)景茫蛹。以對(duì)話框?yàn)槔俚叮瑢?duì)話框可能出現(xiàn)的地方很多，類型也各有不同婴洼，在沒有規(guī)范之前骨坑，產(chǎn)品中可能會(huì)有各種各樣的對(duì)話框，每個(gè)設(shè)計(jì)師做的可能都有些差別柬采，所以第一步欢唾，是把產(chǎn)品中所有出現(xiàn)過的對(duì)話框都收集起來。

2.歸納分類

場(chǎng)景收集完后粉捻，就要對(duì)收集到的所有場(chǎng)景進(jìn)行歸類礁遣，例如對(duì)話框按照樣式不同可以分為“模態(tài)對(duì)話框”和“非模態(tài)對(duì)話框”，在模態(tài)對(duì)話框中按照功能不同又可以分成“確認(rèn)類對(duì)話框”杀迹、“反饋&警示類對(duì)話框”亡脸、“表單類對(duì)話框”。歸納分類的作用在于树酪，可以把眾多的場(chǎng)景收攏成幾個(gè)典型的種類浅碾，只對(duì)典型種類進(jìn)行定義和詳細(xì)描述就可以很好的給用戶起到指導(dǎo)作用；同時(shí)歸類之后減少了規(guī)范對(duì)象的種類续语，更好的保證產(chǎn)品的一致性垂谢。

3.給出定義

分類確定好后就可以開始給出定義了，首先給出整個(gè)規(guī)范對(duì)象的定義疮茄，例如對(duì)話框是什么滥朱，什么情況下適合用對(duì)話框等。除了整體的定義外力试，每個(gè)類型也需要有定義徙邻，幫助用戶理解每種類型有何差別，什么場(chǎng)景選用哪種類別等畸裳。

4.優(yōu)化方案

分類和定義都確定后缰犁，需要對(duì)各類型進(jìn)行優(yōu)化輸出最終的規(guī)則，對(duì)于這些細(xì)節(jié)規(guī)則怖糊，無法確定的時(shí)候可以尋找一些優(yōu)秀案例來參考帅容，例如優(yōu)秀的產(chǎn)品、有名的設(shè)計(jì)指南等伍伤。同時(shí)可以根據(jù)實(shí)際場(chǎng)景輸出多種優(yōu)劣不同的方案并徘，和大家一起討論對(duì)比。

5.宣講討論

規(guī)范整理出后可以在討論會(huì)議上同步給大家扰魂，最好事先把所有需要大家一起討論確定的問題列出來麦乞，把對(duì)比方案都做好蕴茴，提高討論的效率，和大家一起來敲定最終的方案路幸，同時(shí)也讓每個(gè)設(shè)計(jì)師都了解規(guī)范的細(xì)節(jié)荐开。

6.最終輸出

所有問題都敲定后即可按照輸出物規(guī)范進(jìn)行輸出付翁，輸出后交接給視覺設(shè)計(jì)師简肴。

規(guī)范整理完之后還有什么工作？

如所有的設(shè)計(jì)工作一樣百侧，輸出并不代表完結(jié)砰识。

設(shè)計(jì)稿輸出后還需要確保還原度、保證其正常上線佣渴、收集反饋意見不斷進(jìn)行優(yōu)化辫狼。設(shè)計(jì)規(guī)范也一樣，做完規(guī)范后也要確保還原度辛润，推動(dòng)新的規(guī)范落地膨处；不斷收集遺漏的部分補(bǔ)充進(jìn)規(guī)范中，發(fā)現(xiàn)問題并不斷優(yōu)化砂竖，持續(xù)的維護(hù)更新規(guī)范文檔真椿。

有了完善的規(guī)范如何進(jìn)行創(chuàng)新？

規(guī)范和創(chuàng)新從來都不是對(duì)立的乎澄。

1.規(guī)范不可能囊括所有場(chǎng)景突硝，即不可能所有場(chǎng)景都需要100%遵循規(guī)范。

對(duì)于一些規(guī)范中沒有包含的場(chǎng)景置济，或者不適合遵循規(guī)范的場(chǎng)景解恰，例如一些特殊的運(yùn)營活動(dòng)，一些特別的功能點(diǎn)浙于，還是有可以創(chuàng)新的余地的护盈。

2.體驗(yàn)好是第一要義。

遵循規(guī)范是為了保證一致性從而保證體驗(yàn)羞酗，如果在某些場(chǎng)景下不遵循規(guī)范也不會(huì)因?yàn)橛绊懸恢滦远绊戵w驗(yàn)腐宋，反而對(duì)特定場(chǎng)景有更好的效果時(shí)，不遵循規(guī)范也沒什么關(guān)系整慎。

3.規(guī)范不是永恒不變的脏款，還有優(yōu)化的空間。

規(guī)范也需要不斷的優(yōu)化裤园、迭代更新撤师，優(yōu)化規(guī)范本身也是創(chuàng)新的過程。例如樣式風(fēng)格隨著時(shí)間的變化需要更新拧揽，例如交互方式也有可能會(huì)有新的場(chǎng)景需要補(bǔ)充等等剃盾。

整理規(guī)范可以鍛煉哪些能力腺占？

寫一篇分類簡(jiǎn)單合理，場(chǎng)景痒谴、細(xì)節(jié)考慮完備衰伯，展示清晰易讀的規(guī)范，也不能算是一件很簡(jiǎn)單的事情积蔚，需要用到設(shè)計(jì)師的很多基礎(chǔ)能力意鲸，例如：

1.收集信息的能力

在整理規(guī)范時(shí)，收集場(chǎng)景尽爆、收集定義怎顾、收集優(yōu)秀案例都可以鍛煉到我們的收集信息能力，這個(gè)基本能力在日常工作中也經(jīng)常需要用到漱贱，例如做需求前需要先收集需求背景相關(guān)信息槐雾，了解清楚是什么、為什么幅狮、怎么做的問題募强。

2.歸納總結(jié)的能力

將收集到的信息進(jìn)行歸納整理，得出簡(jiǎn)單合理的分類的過程崇摄，就是鍛煉我們歸納總結(jié)能力的過程擎值。在設(shè)計(jì)時(shí)，大到信息架構(gòu)的設(shè)計(jì)配猫，小到表單信息分類展示幅恋，都需要此能力幫助我們更好的處理信息，更好的將信息展示給用戶泵肄。

3.全面思考的能力

我一直認(rèn)為捆交，全面思考的能力是交互設(shè)計(jì)師最重要的能力。在整理規(guī)范時(shí)腐巢，既需要對(duì)全局全面思考品追，例如什么情況適合用對(duì)話框，什么情況不適用冯丙，不同類型的對(duì)話框應(yīng)該在哪些場(chǎng)景用等等肉瓦；也需要對(duì)細(xì)節(jié)全面思考，例如對(duì)話框中需要放幾個(gè)按鈕胃惜、按鈕順序應(yīng)該怎么定泞莉、按鈕文案怎么才好理解等等。在日常工作中也是一樣船殉，既要思考全局的問題鲫趁，例如用戶目標(biāo)、產(chǎn)品目標(biāo)利虫、整體使用流程等挨厚，也要思考細(xì)節(jié)的問題堡僻，例如異常情況怎么辦、極限情況有哪些等疫剃。

4.清晰表述的能力

在整理過程中和大家討論钉疫，可以鍛煉自己的表達(dá)能力和說服對(duì)方的能力；在輸出規(guī)范時(shí)巢价，又能鍛煉清晰的描述能力牲阁，幫助用戶快速抓住重點(diǎn)。表述能力也是交互設(shè)計(jì)師的必備能力之一蹄溉，因?yàn)槿粘９ぷ髦薪?jīng)常需要和上下游各類同事溝通咨油、PK您炉，清晰的表述能力可以幫助設(shè)計(jì)師把全面思考的結(jié)果告知他人柒爵，并說服他人，推動(dòng)工作更好的進(jìn)展下去赚爵。

最后

再來回顧一下全文的主要內(nèi)容：

在產(chǎn)品發(fā)展到穩(wěn)定階段棉胀、參與的人越來越多時(shí)，還是十分有必要整理設(shè)計(jì)規(guī)范的冀膝，因?yàn)樗梢詭椭覀兲嵘a(chǎn)品統(tǒng)一性唁奢、團(tuán)隊(duì)工作效率以及細(xì)節(jié)體驗(yàn)。

好的設(shè)計(jì)規(guī)范應(yīng)該是能讓用戶高效獲取到有效信息的窝剖，但針對(duì)不同的受眾麻掸，規(guī)范本身也會(huì)有不同的側(cè)重點(diǎn)。

規(guī)范的制定最好能有系統(tǒng)的組織赐纱、遵循一定的流程來完成脊奋，以確保規(guī)范有條不紊的整理和推進(jìn)。

規(guī)范輸出后并不代表完成疙描，還需要推動(dòng)落地诚隙、迭代優(yōu)化、維護(hù)更新起胰。

有了規(guī)范也不代表設(shè)計(jì)師就沒有創(chuàng)新的空間了久又，規(guī)范和創(chuàng)新從來都不是對(duì)立的。

整理規(guī)范對(duì)設(shè)計(jì)師的基本能力有很好的鍛煉作用效五，所以各位設(shè)計(jì)師們整理規(guī)范時(shí)不要嫌瑣碎麻煩地消，它可以讓我們慢慢變強(qiáng)！