Suer 記得很久之前看過(guò)朗咸平的<模式>，書(shū)里介紹了時(shí)尚快消品牌ZARA的“一條龍”服務(wù)，當(dāng)時(shí)的我被驚呆了，符合企業(yè)實(shí)際情況的生產(chǎn)設(shè)計(jì)規(guī)范幫助ZARA一步一步建立自己的時(shí)裝帝國(guó)。

還有各種咨詢(xún)公司建立的6-Sigma等等規(guī)范，統(tǒng)統(tǒng)都是為了提高生產(chǎn)力而制定的標(biāo)準(zhǔn)。
早在兩千多年前，秦國(guó)統(tǒng)一六國(guó)后，實(shí)施了書(shū)同文、度同制、車(chē)同軌、行同倫。當(dāng)時(shí)制定出了（我認(rèn)為）最早的一套產(chǎn)品設(shè)計(jì)規(guī)范——度量衡，還有車(chē)輪間距標(biāo)準(zhǔn)，這些東西都讓秦國(guó)更好的運(yùn)作起來(lái)。

國(guó)家尚且如此，那作為產(chǎn)品設(shè)計(jì)人員的我們又該如何？
互聯(lián)網(wǎng)行業(yè)的產(chǎn)品設(shè)計(jì)規(guī)范，大概就是將產(chǎn)品的一切交互行為、視覺(jué)樣式都要嚴(yán)格遵從可用性原則，并根據(jù)公司業(yè)務(wù)目標(biāo)，制定出涵蓋公司產(chǎn)品功能范圍內(nèi)的所有相關(guān)控件與相應(yīng)的展示樣式。

這等于定義了如何幫公司設(shè)計(jì)出一個(gè)好的產(chǎn)品。無(wú)論你的網(wǎng)站或app多漂亮多流暢，卻無(wú)法幫公司賺錢(qián)——窮死；產(chǎn)品只為了賺錢(qián)而忽略用戶(hù)體驗(yàn)，那就缺乏競(jìng)爭(zhēng)力，衰敗也就是時(shí)間問(wèn)題。這是老生常談了。

設(shè)計(jì)規(guī)范的意義

指導(dǎo)性

什么是好的設(shè)計(jì)規(guī)范——團(tuán)隊(duì)成員能高效地制作出既滿(mǎn)足業(yè)務(wù)需求，又能讓用戶(hù)輕易完成目標(biāo)的產(chǎn)品。每個(gè)公司或者團(tuán)隊(duì)，到了一定階段，都需要產(chǎn)品設(shè)計(jì)規(guī)范來(lái)突破瓶頸，提高效率，改善產(chǎn)品，讓產(chǎn)品和團(tuán)隊(duì)都能夠輕裝上陣，走得更遠(yuǎn)。

意味深長(zhǎng)與歷久彌新之美，蘊(yùn)涵于簡(jiǎn)約之中，于清晰之中，于高效之中。真正的簡(jiǎn)約遠(yuǎn)不止是刪繁就簡(jiǎn)，而是在紛繁里建立秩序?！狫onathan Ive

iOS 7的圖標(biāo)設(shè)計(jì)規(guī)范

在定義產(chǎn)品需求，討論布局的時(shí)候，設(shè)計(jì)師經(jīng)常會(huì)被非專(zhuān)業(yè)人員“指點(diǎn)江山”?；蛟S大家都對(duì)用戶(hù)體驗(yàn)有一定了解，而且都是一心為了產(chǎn)品好，但是體驗(yàn)設(shè)計(jì) 需要像血液一樣滲透到產(chǎn)品的每個(gè)部位，那可不是隨便腦暴幾個(gè)想法就能解決的。設(shè)計(jì)規(guī)范凝聚了設(shè)計(jì)師們用血換來(lái)的經(jīng)驗(yàn)，對(duì)產(chǎn)品與使用群體的深刻理解，還有結(jié) 合實(shí)際使用場(chǎng)景的綜合分析。實(shí)施規(guī)范之后，大家就能各安其職，當(dāng)然，是在理想狀態(tài)下……

有效性

規(guī)范必須是有效的——一個(gè)連按鈕的點(diǎn)擊效果都沒(méi)的規(guī)范是毫無(wú)用處的。從有效性這個(gè)角度來(lái)定義規(guī)范，其實(shí)就是產(chǎn)品各種已有模式或模板的集合。我們需要 根據(jù)產(chǎn)品的業(yè)務(wù)目標(biāo)來(lái)得出產(chǎn)品功能需求，然后根據(jù)用戶(hù)目標(biāo)和使用場(chǎng)景，窮盡所有可能性，制作出合理且可用的模板和組件。
這樣做出來(lái)的東西才敢說(shuō)是可以用的，合理是前提，有效是結(jié)果。

然后，該如何窮盡所有可能并逐步制定規(guī)范？那就要我們加深對(duì)公司產(chǎn)品目標(biāo)的認(rèn)識(shí)，參考先進(jìn)競(jìng)品，聽(tīng)取反饋意見(jiàn)，總結(jié)過(guò)往版本的不足等等，完善已有的模式，或創(chuàng)造出更優(yōu)秀的。
例如，”贊”這個(gè)功能已是產(chǎn)品社交化所需的基本元素，用戶(hù)通過(guò)操作”贊”按鈕，可增強(qiáng)與產(chǎn)品本身、還有共同用戶(hù)之間的互動(dòng)。

就算你很美，就算你會(huì)自動(dòng)消失，也只是一個(gè)彈窗。
以前的操作反饋總是過(guò)于簡(jiǎn)單粗暴—-直接彈窗告訴用戶(hù)”操作成功！”。我一直覺(jué)得這就像給了用戶(hù)一巴掌。
現(xiàn)在的技術(shù)日新月異不斷進(jìn)步，因此我們可以設(shè)計(jì)出非常優(yōu)雅的效果。

tumblr的“贊”

在設(shè)計(jì)規(guī)范的過(guò)程中，我們需要思考一切可能：通過(guò)操作”贊”按鈕，用戶(hù)應(yīng)該獲得多少種反饋？是否真的需要這些？全部情況都考慮到了嗎？如果服務(wù)器出 錯(cuò)或代碼效率低，導(dǎo)致反饋有延遲，是否需將反饋改為提前量？例如Instagram，用戶(hù)點(diǎn)贊后，它不管用戶(hù)有無(wú)網(wǎng)絡(luò)，都先用可愛(ài)的動(dòng)畫(huà)反饋告訴用戶(hù)已操 作成功，然后才后臺(tái)檢測(cè)網(wǎng)絡(luò)是否可用并發(fā)送數(shù)據(jù)。

在思考用戶(hù)的使用場(chǎng)景和習(xí)慣的同時(shí)，公司自身的產(chǎn)品后臺(tái)也要照顧得當(dāng)，并需要作出適當(dāng)反應(yīng)，例如這個(gè)贊的數(shù)據(jù)應(yīng)歸類(lèi)到哪里，運(yùn)營(yíng)同學(xué)對(duì)此有無(wú)更多的 需求，未來(lái)會(huì)否添加更多的接口？開(kāi)發(fā)同學(xué)需要有所準(zhǔn)備，以應(yīng)付突如其來(lái)的”需求”，就算開(kāi)發(fā)部沒(méi)有相關(guān)規(guī)范，也應(yīng)了然于胸，或者直接加入到產(chǎn)品設(shè)計(jì)歸范。

可復(fù)用

設(shè)計(jì)必需是簡(jiǎn)潔且而優(yōu)雅的，才能歷久彌新?！猄mashing Magazine

設(shè)計(jì)可以在各分枝系列產(chǎn)品里重復(fù)使用，這正是設(shè)計(jì)規(guī)范的精髓，不能復(fù)用的規(guī)范不是好規(guī)范。

可復(fù)用的規(guī)范對(duì)公司和產(chǎn)品來(lái)說(shuō)有啥好處？

• 對(duì)視覺(jué)設(shè)計(jì)師來(lái)說(shuō)，按鈕只需要有限的若干尺寸樣式，不同產(chǎn)品線(xiàn)或功能點(diǎn)只需換個(gè)顏色甚至直接套用。網(wǎng)格系統(tǒng)、頁(yè)面頭部更是全球唯一。
• 對(duì)于前端工程師來(lái)說(shuō)，只需要像Bootstrap一樣，根據(jù)視覺(jué)規(guī)范制作出1份CSS文件，全站都引用此文件即可，不同產(chǎn)品各取所需，特殊情況也只需定義少數(shù)代碼即可。
• 對(duì)公司來(lái)說(shuō)，上述兩位同事都提升了效率，那公司的整體效率當(dāng)然就更上一層樓了。另一方面，如果有人員流動(dòng)，簡(jiǎn)潔的規(guī)范也能讓新同學(xué)迅速上手并融入產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)，同時(shí)降低了公司的風(fēng)險(xiǎn)和損失。
• 對(duì)用戶(hù)來(lái)說(shuō)，簡(jiǎn)單的幾個(gè)樣式A穿整個(gè)產(chǎn)品，既降低學(xué)習(xí)成本易于使用，也能讓用戶(hù)更專(zhuān)注于內(nèi)容，這就是用戶(hù)體驗(yàn)的重要原則”一致性”，相關(guān)文章很多，這里就不作展開(kāi)了。

當(dāng)然，以上都是在理想狀態(tài)下……

LESS和SASS是前端工程師的規(guī)范化利器（圖片來(lái)自Dribbble）

約束

規(guī)范本身沒(méi)有約束或局限性，約束往往來(lái)自人?！艺f(shuō)的

規(guī)范本身的約束

很多同學(xué)看到規(guī)范就會(huì)說(shuō)，次奧，太落后了，怎么老用這東西來(lái)弄？
呵呵，罵得好。
誰(shuí)讓你弄個(gè)古董級(jí)的規(guī)范出來(lái)？誰(shuí)讓你一成不變？上面也提到了，設(shè)計(jì)要簡(jiǎn)潔、高效！這才能迅速迭代，不斷改進(jìn)。制作規(guī)范的過(guò)程，本來(lái)就是一個(gè)優(yōu)化和沉淀的過(guò)程。
好的設(shè)計(jì)歸范還需要站在一定的“高度”來(lái)定義產(chǎn)品，“高度”要控制得當(dāng)，不能太籠統(tǒng)——泛泛而談?wù)f了等于沒(méi)說(shuō)，也不能太細(xì)致——很多專(zhuān)題或者獨(dú)立產(chǎn) 品需要自己的空間。正所謂”站得高，看得遠(yuǎn)”，具備一定的前瞻性，才能指引產(chǎn)品走得更遠(yuǎn)。不與時(shí)俱進(jìn)，使用先進(jìn)的效果和技術(shù)，也很難說(shuō)服同事們采用我們的規(guī)范。

規(guī)范之外

設(shè)計(jì)規(guī)范所面臨的約束與局限，不一定來(lái)自于設(shè)計(jì)本身，而更多的是來(lái)自于“人”。
例如，在A頁(yè)面有一個(gè)圖片輪播模塊，是前端工程師1和視覺(jué)設(shè)計(jì)師2設(shè)計(jì)的，然后在同一級(jí)別的另一個(gè)頁(yè)面B也需要同一個(gè)模塊，負(fù)責(zé)這個(gè)頁(yè)面的前端3和視覺(jué)4都一致認(rèn)為：我也能寫(xiě)/畫(huà)出來(lái)，不需要套用已有代碼/PSD。

好的，我知道你們很優(yōu)秀，這是無(wú)可否認(rèn)的。但是最牛逼的大師通常都是深藏功與名的，前端大師能夠?qū)懗鲎屧O(shè)計(jì)師都能看懂的代碼，讓后繼者看到猶如自己寫(xiě)出來(lái)的代碼，這才叫Zen Coding；視覺(jué)大師直接發(fā)明輪子的替代品，而不需要用現(xiàn)有的輪子。
我說(shuō)得夠明白易懂不？

Dieter Rams, 1964, Braun FS80 TV

時(shí)機(jī)

總而言之，產(chǎn)品設(shè)計(jì)規(guī)范不但需要做，還需要適時(shí)地做，一旦完成，就要貫徹執(zhí)行，接收反饋，總結(jié)不足，不斷優(yōu)化。磨刀不誤砍柴工啊。
規(guī)范化不是鬧革命，因?yàn)橐徊恍⌒木蜁?huì)革了產(chǎn)品的命。在產(chǎn)品本身還沒(méi)準(zhǔn)備好的時(shí)候推出，只會(huì)增加負(fù)擔(dān)，降低效率。
規(guī)范化是“進(jìn)化”，在產(chǎn)品不斷的迭代過(guò)程中沉淀積累，最終形成的一套優(yōu)秀的設(shè)計(jì)方法。

題圖來(lái)自Dribbble
投稿人：Suer
原文地址：make it simple