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

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

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

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

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

The Yahoo! Style Guide

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

品牌元素

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

文字

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

布局

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

鏈接和按鈕

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

導(dǎo)航

定義各級導(dǎo)航的視覺風(fēng)格及交互方式，特別是對于那些具有層級關(guān)系的導(dǎo)航項來說，要完整的展示出嵌套關(guān)系及展開方式。

視覺繼承

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

圖片與圖標(biāo)

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

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

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

表單和驗證

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

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

還需要些什么？

多元化

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

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

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

代碼

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

文件規(guī)范

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

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

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

評論和論壇

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

可下載、可打印

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

做的漂亮些

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

參考范例

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

文章來源：Be For Web

---

pmcaff合作媒體：Chinaz

更多精彩推薦

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

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

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

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

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

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

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

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

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

回復(fù)“40”——【干貨】從蘋果ios8的發(fā)布，來細數(shù)那些精彩紛呈的引導(dǎo)頁

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

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

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

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