閑話念叨到這，進(jìn)入正文，關(guān)于設(shè)計(jì)規(guī)范、風(fēng)格指南的話題。就我個(gè)人的經(jīng)歷來(lái)說(shuō)，從零開(kāi)始創(chuàng)建設(shè)計(jì)規(guī)范其實(shí)不是易事，包括公司和產(chǎn)品的實(shí)際情況、規(guī)范的目的、面向的使用者、開(kāi)工的時(shí)間點(diǎn)等等因素都是需要充分考慮的，而且很容易在過(guò)程當(dāng)中跑偏，產(chǎn)出一些并沒(méi)有實(shí)際參考價(jià)值的、單純?yōu)榱艘?guī)范而創(chuàng)建的規(guī)范。接下來(lái)我們一起看看這篇譯文，看看作者的一些看法和建議，還有一些不錯(cuò)的范例。走起。

不是所有的網(wǎng)站或移動(dòng)應(yīng)用都需要設(shè)計(jì)規(guī)范。你表弟的博客就未必需要，你鄰居自己搭建的用來(lái)賣(mài)貓草的小電商網(wǎng)站也不那么需要，當(dāng)然這也要看他能賣(mài)掉多少，能做到多大規(guī)模。

通常，只有那些需要維護(hù)專(zhuān)業(yè)形象和品牌一致性的產(chǎn)品才真正需要設(shè)計(jì)規(guī)范(或是風(fēng)格指南一類(lèi)的說(shuō)法)。不要把這事兒想的太容易，真正意義上的設(shè)計(jì)規(guī)范需要你花費(fèi)大量的時(shí)間成本去創(chuàng)建并持續(xù)維護(hù)，所以在決定動(dòng)手之前，最好確認(rèn)一下你的產(chǎn)品是否真的需要設(shè)計(jì)規(guī)范，它所需要投入的成本是否能夠被接受。

什么是設(shè)計(jì)規(guī)范？

在確認(rèn)是否需要設(shè)計(jì)規(guī)范之前，我們首先應(yīng)該明確一下設(shè)計(jì)規(guī)范到底是什么。簡(jiǎn)單的說(shuō)，它就是一份由很多范例組成文檔(電子文檔、印刷文檔或HTML文件等)，用來(lái)描述和展示你的產(chǎn)品應(yīng)該具有怎樣的外觀和交互方式。它就是一份指南，讓你在創(chuàng)建和更新網(wǎng)站或應(yīng)用時(shí)知道在什么地方使用怎樣的風(fēng)格標(biāo)準(zhǔn)。設(shè)計(jì)規(guī)范可以幫助你了解一些典型的問(wèn)題包括“這里應(yīng)該使用怎樣的配色？”、“H1標(biāo)題要用多大的字號(hào)？”、“這部分文字內(nèi)容應(yīng)該左對(duì)齊還是兩側(cè)對(duì)齊？”等等。

The Yahoo! Style Guide

你需要設(shè)計(jì)規(guī)范嗎？何時(shí)需要？

答案取決于你的產(chǎn)品類(lèi)型，以及設(shè)計(jì)規(guī)范的使用者會(huì)有哪些。這里所說(shuō)的使用者包括設(shè)計(jì)師、開(kāi)發(fā)人員、內(nèi)容創(chuàng)建者等角色。搞清楚“規(guī)范的使用者是誰(shuí)”，這非常重要——很多管理人員或設(shè)計(jì)師會(huì)告訴你，如果我們創(chuàng)建一份設(shè)計(jì)規(guī)范，它會(huì)在接下來(lái)很長(zhǎng)一段時(shí)間內(nèi)幫助團(tuán)隊(duì)節(jié)省大量的時(shí)間，叭啦叭啦；但實(shí)際情況是，你們很有可能在投入了巨大的時(shí)間與人力成本去做這件事之后，卻發(fā)現(xiàn)這份規(guī)范當(dāng)中的內(nèi)容對(duì)團(tuán)隊(duì)里的任何一個(gè)職能類(lèi)型都沒(méi)有很大的參考價(jià)值；最壞的情況是，無(wú)論設(shè)計(jì)師還是開(kāi)發(fā)人員，他們壓根就不會(huì)去看它。

“時(shí)間”也是一個(gè)重要的因素。如果你們當(dāng)前正忙于新產(chǎn)品的設(shè)計(jì)開(kāi)發(fā)，那么顯然無(wú)法抽出足夠的時(shí)間去做規(guī)范方面的事情。設(shè)計(jì)規(guī)范是一項(xiàng)長(zhǎng)期投資，如果眼下不確定自己有足夠的資源可以投入，那么就不要去做，但你可以從現(xiàn)在開(kāi)始為此做些準(zhǔn)備，在新產(chǎn)品的設(shè)計(jì)開(kāi)發(fā)過(guò)程中留意那些有可能寫(xiě)入設(shè)計(jì)規(guī)范的方方面面，將它們作為素材搜集起來(lái)，到創(chuàng)建規(guī)范的時(shí)候加以整理。

你也可以試著回答如下這些問(wèn)題，如果其中大部分的答案都是肯定的，那么你可以考慮創(chuàng)建一份設(shè)計(jì)規(guī)范了：

• 你是否想節(jié)省腦細(xì)胞？

• 你是否希望在產(chǎn)品中落實(shí)良好的用戶體驗(yàn)？

• 你是否覺(jué)得有必要在產(chǎn)品的設(shè)計(jì)方面保持一致性？

• 除了當(dāng)前的網(wǎng)站或應(yīng)用之外，你的品牌和產(chǎn)品在將來(lái)是否延續(xù)性和擴(kuò)展性？

• 是否有第三方合作者會(huì)用到你的品牌元素？

• 你的產(chǎn)品當(dāng)中是否會(huì)有頻繁而規(guī)律的內(nèi)容更新？

• 在自己的團(tuán)隊(duì)之外是否有第三方的內(nèi)容提供者？

• 你的產(chǎn)品是否有提供給第三方設(shè)計(jì)師與開(kāi)發(fā)人員的API接口？

• 你是否準(zhǔn)備以公司的形式長(zhǎng)期維護(hù)當(dāng)前產(chǎn)品或是繼續(xù)開(kāi)發(fā)新產(chǎn)品？

• 你是否就職于一家大公司？

Netflix的API規(guī)范（pdf)

怎樣創(chuàng)建設(shè)計(jì)規(guī)范？

如果你確定自己需要一份設(shè)計(jì)規(guī)范，那么怎樣著手進(jìn)行創(chuàng)建呢？正如前面提到的，這也要取決于你的產(chǎn)品和團(tuán)隊(duì)的實(shí)際情況。有可能你只需要為自己創(chuàng)建設(shè)計(jì)規(guī)范，這時(shí)它更像是一種備忘或歸納，那么你就沒(méi)必要做的非常細(xì)致，也不需要在表現(xiàn)形式上花費(fèi)太多時(shí)間；而多數(shù)情況下，設(shè)計(jì)規(guī)范是面向產(chǎn)品系列及大中型團(tuán)隊(duì)的，這時(shí)你就必須在個(gè)各方面都深入的進(jìn)行，同時(shí)保證必要的細(xì)節(jié)。

我列了兩個(gè)清單，分別是“包含哪些內(nèi)容？”和“還需要些什么？”。其中第一個(gè)清單里列出了設(shè)計(jì)規(guī)范當(dāng)中通常需要涉及到的內(nèi)容，后者則包括了你有可能需要進(jìn)行額外處理的內(nèi)容。當(dāng)然，這兩份清單并不是標(biāo)準(zhǔn)摸板一類(lèi)的東西，你只需要在創(chuàng)建規(guī)范時(shí)結(jié)合自己的實(shí)際情況對(duì)這些要點(diǎn)加以考慮。

包含哪些內(nèi)容？

品牌元素

給出官方logo和標(biāo)準(zhǔn)配色方案的定義及范例，介紹logo在全彩、黑白或不同背景色等狀況下的使用方式，提供標(biāo)準(zhǔn)配色的HEX及RGB值，另外也可以提供logo文件的下載，包括.png、.jpg甚至是.ai或.psd文件。

文字

對(duì)頁(yè)頭、段落、引用、標(biāo)簽、表單標(biāo)題等任何有可能出現(xiàn)格式化文字的地方進(jìn)行規(guī)范定義，包括字體、字號(hào)、行高、字間距等方面。

布局

定義不同的區(qū)塊和元素在界面當(dāng)中的位置，還有它們彼此之間的關(guān)系。對(duì)于那些在全局范圍內(nèi)普遍適用的外間距(margin)、內(nèi)邊距(padding)、網(wǎng)格模式等規(guī)則也要作以說(shuō)明；另外，有些元素會(huì)根據(jù)界面環(huán)境的不同產(chǎn)生相應(yīng)的變化，這些也需要在規(guī)范中也要進(jìn)行說(shuō)明，最好可以搭配圖片進(jìn)行展示。

鏈接和按鈕

定義鏈接和按鈕的視覺(jué)風(fēng)格，為不同模塊中的鏈接以及不同類(lèi)型表單中的按鈕提供色值及圖例。這個(gè)過(guò)程也有可能幫助你對(duì)一些過(guò)于復(fù)雜的界面進(jìn)行簡(jiǎn)化。

導(dǎo)航

定義各級(jí)導(dǎo)航的視覺(jué)風(fēng)格及交互方式，特別是對(duì)于那些具有層級(jí)關(guān)系的導(dǎo)航項(xiàng)來(lái)說(shuō)，要完整的展示出嵌套關(guān)系及展開(kāi)方式。

視覺(jué)繼承

定義頁(yè)頭、標(biāo)題、段落、圖片等元素是怎樣在視覺(jué)上保持關(guān)聯(lián)性的，提供必要的圖例，并通過(guò)文字描述出視覺(jué)繼承關(guān)系對(duì)于整個(gè)產(chǎn)品的外觀氣質(zhì)的影響作用。

圖片與圖標(biāo)

對(duì)內(nèi)容和界面元素當(dāng)中的圖片及圖標(biāo)進(jìn)行定義，包括文件類(lèi)型、尺寸、文件大小、比例、風(fēng)格等方面。內(nèi)容中是否會(huì)有特色圖片？正文中的圖片是左右浮動(dòng)還是居中？是否有一套特定的圖標(biāo)素材？

UI標(biāo)準(zhǔn)

定義不同的UI元素所對(duì)應(yīng)的交互模式，以及它們的視覺(jué)表現(xiàn)形式，例如在哪些情況下使用復(fù)選框(check box)或單選按鈕(radio button)。可以試著將網(wǎng)站涉及到的所有類(lèi)型的UI元素都陳列出來(lái)，提供圖例及前端代碼。

表單和驗(yàn)證

定義表單的整體風(fēng)格及元素布局，對(duì)表單涉及到的功能流程進(jìn)行描述；定義表單的驗(yàn)證規(guī)則以及各種有可能出現(xiàn)的錯(cuò)誤提示等。

W3C - logo的使用規(guī)范

還需要些什么？

多元化

有時(shí)你也許需要面向不同的使用者創(chuàng)建不同版本的規(guī)范。例如，對(duì)于某些類(lèi)型的網(wǎng)站來(lái)說(shuō)，有著不同級(jí)別和權(quán)限的內(nèi)容創(chuàng)建者與管理人員，最有效的做法是針對(duì)不同的角色提供特定的規(guī)范指導(dǎo)；當(dāng)然你也可以將完整版本的規(guī)范面向不同職能的人員進(jìn)行訂制性的簡(jiǎn)化。

目標(biāo)任務(wù)

為了使相關(guān)配合部門(mén)在大方向上達(dá)成默契，你也許需要在設(shè)計(jì)規(guī)范中結(jié)合具體內(nèi)容對(duì)整個(gè)的產(chǎn)品目標(biāo)及階段性的工作任務(wù)加以描述，這也可以讓大家充分理解規(guī)范的必要性，理解一致化的表現(xiàn)風(fēng)格及用戶體驗(yàn)對(duì)產(chǎn)品策略的推動(dòng)作用。

代碼

根據(jù)設(shè)計(jì)規(guī)范所面向的人員范圍的實(shí)際情況，可以考慮將前端代碼標(biāo)準(zhǔn)及最佳實(shí)踐模式配合圖例進(jìn)行展示，包括HTML、CSS、JavaScript等。

文件規(guī)范

你也許需要面向所有的內(nèi)容創(chuàng)建者制訂文件使用方面的規(guī)范，包括文件類(lèi)型限定、命名規(guī)則、版本號(hào)更新方式等。從長(zhǎng)遠(yuǎn)的角度來(lái)看，這樣可以避免很多瑣碎的潛在問(wèn)題。

內(nèi)容標(biāo)準(zhǔn)

面向內(nèi)容的創(chuàng)建者及管理者，你也有必要在規(guī)范中對(duì)人工生成的內(nèi)容進(jìn)行格式化的定義，例如正文內(nèi)容的長(zhǎng)度、標(biāo)題的字符數(shù)等等。另外對(duì)于內(nèi)容的基調(diào)，提交與編輯操作的流程、版權(quán)處理方式等等也要作以具有實(shí)際指導(dǎo)意義的說(shuō)明。

評(píng)論和論壇

如果你的產(chǎn)品為用戶提供了評(píng)論功能，或是開(kāi)設(shè)了相關(guān)的論壇，那么你同樣需要對(duì)這些方面的管理進(jìn)行規(guī)范。例如，評(píng)論內(nèi)容的審核標(biāo)準(zhǔn)是什么，怎樣回復(fù)用戶的評(píng)論，怎樣處理負(fù)面內(nèi)容，在哪些情況下需要關(guān)閉評(píng)論功能等等。

可下載、可打印

如果你通過(guò)在線的方式創(chuàng)建的設(shè)計(jì)規(guī)范，那么要盡量確保相關(guān)人員可以將它下載或打印出來(lái)，方便離線使用。不過(guò)這里也存在一個(gè)問(wèn)題，就是在更新規(guī)范的時(shí)候無(wú)法對(duì)他人手中的離線版本進(jìn)行同步處理。這種情況下可以嘗試通過(guò)郵件通知的方式加以彌補(bǔ)。

做的漂亮些

既然是設(shè)計(jì)規(guī)范，那么其自身的外觀形象也是很重要的。在時(shí)間允許的情況下盡量多的使用圖片范例，即保證內(nèi)容形式上的豐富，也能對(duì)設(shè)計(jì)開(kāi)發(fā)人員更有直觀的參考價(jià)值。從某種程度上講，設(shè)計(jì)規(guī)范也是產(chǎn)品整體質(zhì)量和形象的一個(gè)組成部分。當(dāng)然，如果涉及規(guī)范只是供內(nèi)部設(shè)計(jì)開(kāi)發(fā)使用，不涉及第三方合作的話，那么在資源和成本上進(jìn)行充分的控制也是合理的，譬如一個(gè)內(nèi)部wiki系統(tǒng)就可以滿足最基本的需求。

參考范例

最后我們來(lái)看一些設(shè)計(jì)規(guī)范的實(shí)際范例；這些實(shí)例主要展示了設(shè)計(jì)規(guī)范在品牌元素的使用規(guī)則方面起到的作用。

文章來(lái)源：Be For Web

---

pmcaff合作媒體：Chinaz

更多精彩推薦

回復(fù)“31”——【干貨】騰訊產(chǎn)品大拿告訴你，用戶體驗(yàn)是這樣設(shè)計(jì)的！！！

回復(fù)“32”——【專(zhuān)訪】小米產(chǎn)品經(jīng)理顛覆早教行業(yè)，欲送給孩子1000萬(wàn)美金的人生

回復(fù)“33”——【產(chǎn)品】阿里產(chǎn)品經(jīng)理內(nèi)訓(xùn)：能力模型解讀

回復(fù)“34”——【重溫經(jīng)典】張小龍：微信背后的產(chǎn)品觀

回復(fù)“35”——【專(zhuān)訪】PP租車(chē)張丙軍：“打虎親兄弟“，好團(tuán)隊(duì)才能書(shū)寫(xiě)互聯(lián)網(wǎng)傳奇

回復(fù)“36”——【干貨】產(chǎn)品經(jīng)理的需求管理

回復(fù)“37”——【干貨】APP解構(gòu)重構(gòu)，讓你用戶不再流失

回復(fù)“38”——【干貨】產(chǎn)品經(jīng)理解決問(wèn)題七步法則

回復(fù)“39”——【運(yùn)營(yíng)】你不知道的HTML5的概念、方法和推廣實(shí)戰(zhàn)指南

回復(fù)“40”——【干貨】從蘋(píng)果ios8的發(fā)布，來(lái)細(xì)數(shù)那些精彩紛呈的引導(dǎo)頁(yè)

文章推薦可直接回復(fù)公眾賬號(hào)或者發(fā)送至xiaoxi@pmcaff.com，可根據(jù)推薦質(zhì)量將推薦人邀請(qǐng)至pmcaff智囊團(tuán)預(yù)備群中，原創(chuàng)或者推薦均可，歡迎來(lái)稿~

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的PMcaff-产品 | 教你做好产品设计规范，提升工作效率的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。