為什么要做規(guī)范（why）
相信大家在日常工作中，對(duì)于搭建整理規(guī)范并不陌生。如果說工作的這幾年我養(yǎng)成了什么習(xí)慣的話裆熙，那一定是在做任何需求之前，都先問問自己“為什么要做這件事”。整理規(guī)范也是一樣入录，做之前先要想清楚為什么要做規(guī)范蛤奥？清楚的了解做一件事的價(jià)值有助于我們產(chǎn)生心理認(rèn)同，從而更好的實(shí)施僚稿。
1.保證平臺(tái)統(tǒng)一性
統(tǒng)一性是交互設(shè)計(jì)的一個(gè)基本原則凡桥，在一個(gè)長期迭代多人合作的項(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ì)一次外形，前端開發(fā)同學(xué)需要開發(fā)一次方库，每個(gè)不同的設(shè)計(jì)師遇到這個(gè)元素時(shí)都可能重新設(shè)計(jì)一遍结序。但如果有了設(shè)計(jì)規(guī)范，只需設(shè)計(jì)一次纵潦，團(tuán)隊(duì)中任何一個(gè)設(shè)計(jì)師需要用的時(shí)候直接拿來用就可以了徐鹤，也不需要再進(jìn)行設(shè)計(jì)和開發(fā)，極大的提升了效率邀层。
3.打磨設(shè)計(jì)細(xì)節(jié)
在整理每個(gè)元素的規(guī)范時(shí)返敬，設(shè)計(jì)師都需要對(duì)其場景、狀態(tài)考慮清楚被济。在整理的過程中救赐，經(jīng)常會(huì)發(fā)現(xiàn)一些以前沒注意到的問題，并進(jìn)行優(yōu)化只磷。把一個(gè)小元素單獨(dú)拎出來仔細(xì)考量经磅，寫成一篇完整規(guī)范的過程，其實(shí)就是在打磨細(xì)節(jié)的過程钮追。
什么時(shí)候做規(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ī)范是好規(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ì)首有，保證元素使用在正確的場景下，保證整個(gè)平臺(tái)的一致性枢劝。所以給團(tuán)隊(duì)內(nèi)的設(shè)計(jì)師看的規(guī)范相對(duì)來說會(huì)詳細(xì)很多井联，以二手車之家PC設(shè)計(jì)規(guī)范為例，需要包含實(shí)際的交互場景舉例及說明幫助交互設(shè)計(jì)師理解和判斷您旁，需要包含視覺標(biāo)注幫助UI設(shè)計(jì)師查閱等烙常。（熟知的一些BAT團(tuán)隊(duì)規(guī)范中甚至?xí)嚓P(guān)的前端開發(fā)代碼）
2.第三方團(tuán)隊(duì)——快速上手
給第三方工作人員的設(shè)計(jì)規(guī)范又有所不同，他們的目標(biāo)更側(cè)重在合作時(shí)快速上手鹤盒，直接將團(tuán)隊(duì)內(nèi)部詳細(xì)的長篇大論拿給他們看很難保證他們有耐心閱讀蚕脏，因此很難保證他們遵循規(guī)范。針對(duì)這種情況侦锯，更適合整理出典型頁面驼鞭，UI Kit，加之簡單易懂的說明給他們尺碰，讓他們快速了解頁面應(yīng)該怎么布局挣棕，可以用現(xiàn)成的元素進(jìn)行快速拼接就可以了译隘。
3.公開大眾——尋求參考
公開給大眾的設(shè)計(jì)規(guī)范有非常詳細(xì)的，也有比較簡單直接的洛心，主要還是要根據(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)該是高效的、簡單易懂的苫幢，以內(nèi)部設(shè)計(jì)規(guī)范為例访诱，具體執(zhí)行時(shí)，我們應(yīng)該確保分類合理韩肝、規(guī)范本身保持一致触菜、布局排版易讀，來提升設(shè)計(jì)師查閱的效率哀峻；確保定義清晰涡相、描述準(zhǔn)確、場景完備剩蟀，來幫助設(shè)計(jì)師理解和使用催蝗。
1.合理分類
一整套規(guī)范的內(nèi)容通常都很多，為了能讓用戶快速查找育特，合理的分類必不可少丙号。
2.保持一致
每篇規(guī)范包含的內(nèi)容保持一致、格式保持一致可以給用戶構(gòu)建心理預(yù)期缰冤，讓他們看一篇規(guī)范就知道每篇都包含哪些部分犬缨，可以找到哪些信息。
3.排版易讀
通過合適的字體字號(hào)锋谐、間距留白減少用戶閱讀的疲勞感遍尺，圖片與說明清晰的結(jié)合，正確和錯(cuò)誤示例要能明顯區(qū)分涮拗，使用表格來組織信息乾戏。
4.定義清晰迂苛、描述準(zhǔn)確、場景完備
用簡單易懂的語句進(jìn)行定義和描述鼓择，幫助用戶了解是什么三幻、怎么用、哪些場景可用呐能。（規(guī)范不可能包含所有場景念搬，但應(yīng)該包含大多數(shù)常見場景。）
如何系統(tǒng)的整理規(guī)范（how）
一.制定計(jì)劃
整理設(shè)計(jì)規(guī)范是一個(gè)涉及廣周期長的項(xiàng)目摆出，所以有一個(gè)清晰的計(jì)劃可以幫助這個(gè)項(xiàng)目更好的推進(jìn)朗徊。制定計(jì)劃的流程如下圖所示：
1.整理規(guī)范內(nèi)容及分類
做之前先明確我們需要整理哪些內(nèi)容，這些內(nèi)容的分類是怎樣的偎漫，下圖是我最近做車網(wǎng)內(nèi)嵌看到汽車之家平臺(tái)規(guī)范有感重新列的二手車之家PC規(guī)范內(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í)最好是控件头镊、組件蚣驼、場景魄幕，因?yàn)榭丶M成組件，控件和組件組成場景颖杏，所以先確定小的控件后纯陨，組件和場景更容易確定。至于分工留储，規(guī)范的制定是整個(gè)團(tuán)隊(duì)的事情翼抠，最好團(tuán)隊(duì)中的設(shè)計(jì)師都能夠參與，互相分擔(dān)工作量以提高規(guī)范整理的效率获讳，也能夠確保規(guī)范是在大家的討論下制定而成阴颖，每個(gè)人都參與過并認(rèn)同結(jié)論。當(dāng)然丐膝，團(tuán)隊(duì)不同量愧，具體的分工情況及成員的參與度也不能一概而談钾菊。為便于理解，插圖示意：
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í)討論，怎么輸出朱监，交接給誰等等問題稀火。當(dāng)然小的團(tuán)隊(duì)里，這些也許就是一個(gè)人來完成赌朋。
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)容愈诚，需要有描述她按、類型及場景、使用說明炕柔、視覺規(guī)范酌泰、補(bǔ)充說明、相關(guān)下載匕累、負(fù)責(zé)設(shè)計(jì)師
● ?規(guī)范插圖的尺寸陵刹、背景色、板式欢嘿、字體及用色衰琐、正確及錯(cuò)誤示例圖樣式等
二.單個(gè)規(guī)范的整理流程
整體計(jì)劃制定好之后巡验，就需要開始一個(gè)個(gè)整理規(guī)范內(nèi)容了。整理單個(gè)規(guī)范的內(nèi)容也是有流程可尋的碘耳，如下圖所示显设。下面以整理“廣告及界面功能入口”規(guī)范為例，講解一下單個(gè)規(guī)范整理的流程辛辨。
1.收集場景
給已經(jīng)趨于成熟的產(chǎn)品整理規(guī)范捕捂，第一步就是要先收集場景。以界面功能入口為例斗搞，功能入口可能出現(xiàn)的地方很多指攒，類型也各有不同，在沒有規(guī)范之前僻焚，產(chǎn)品中可能會(huì)有各種各樣的廣告范式允悦，每個(gè)設(shè)計(jì)師做的可能都有些差別，所以第一步虑啤，是把產(chǎn)品中所有出現(xiàn)過的廣告及界面功能入口都收集起來隙弛。
2.歸納分類
場景收集完后，就要對(duì)收集到的所有場景進(jìn)行歸類狞山，例如廣告及功能入口出現(xiàn)的頁面全闷、位置、承接功能點(diǎn)萍启。歸納分類的作用在于总珠，可以把眾多的場景收攏成幾個(gè)典型的種類，只對(duì)典型種類進(jìn)行定義和詳細(xì)描述就可以很好的給用戶起到指導(dǎo)作用勘纯；同時(shí)歸類之后減少了規(guī)范對(duì)象的種類局服，更好的保證產(chǎn)品的一致性。
3.給出定義
分類確定好后就可以開始給出定義了驳遵，首先給出整個(gè)規(guī)范對(duì)象的定義淫奔，例如界面功能入口是什么，什么情況下適合用業(yè)務(wù)專題頭圖等超埋。除了整體的定義外搏讶，每個(gè)類型也需要有定義，幫助用戶理解每種類型有何差別霍殴，什么場景選用哪種類別等。
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í)際場景輸出多種優(yōu)劣不同的方案，和大家一起討論對(duì)比帽衙。
5.公開告知
規(guī)范整理出后可以組織討論會(huì)并同步給大家菜皂，最好事先把所有需要大家一起討論確定的問題列出來，把對(duì)比方案都做好厉萝，提高討論的效率恍飘，和大家一起來敲定最終的方案，同時(shí)也讓每個(gè)設(shè)計(jì)師都了解規(guī)范的細(xì)節(jié)谴垫。商榷好所有細(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ī)范不可能囊括所有場景抒线，即不可能所有場景都需要100%遵循規(guī)范。
對(duì)于一些規(guī)范中沒有包含的場景渣慕，或者不適合遵循規(guī)范的場景嘶炭，例如一些特殊的運(yùn)營活動(dòng)，一些特別的功能點(diǎn)逊桦，還是有可以創(chuàng)新的余地的眨猎。
2.體驗(yàn)好是第一要義。
遵循規(guī)范是為了保證一致性從而保證體驗(yàn)强经，如果在某些場景下不遵循規(guī)范也不會(huì)因?yàn)橛绊懸恢滦远绊戵w驗(yàn)睡陪，反而對(duì)特定場景有更好的效果時(shí)，不遵循規(guī)范也沒什么關(guān)系。
3.規(guī)范不是永恒不變兰迫，隨時(shí)間推進(jìn)優(yōu)化迭代信殊。
規(guī)范也需要不斷的優(yōu)化、迭代更新汁果，優(yōu)化規(guī)范本身也是創(chuàng)新的過程涡拘。例如樣式風(fēng)格隨著時(shí)間的變化需要更新，例如交互方式也有可能會(huì)有新的場景需要補(bǔ)充等等据德。
最后
再來回顧一下全文的主要內(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ì)立的。
