@錦妖_BCJ2嚶?：我最近對(duì)設(shè)計(jì)規(guī)范（Design Guidelines）很有興趣，收集了不少有用的資料，包括什么是設(shè)計(jì)規(guī)范，做設(shè)計(jì)規(guī)范的最佳時(shí)機(jī)，如何制作設(shè)計(jì)規(guī)范等，全是精選干貨，在此分享給大家。

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

首先是幾家公司的案例，有些網(wǎng)址可能在墻外，麻煩大家自己翻一翻了。

Salesforce - Lightning Design System（規(guī)范地址）

IBM - Design Language（規(guī)范地址）

Google - Material Design（規(guī)范地址）

Facebook - Brand Guidelines（規(guī)范地址）

MailChimp - Patterns（規(guī)范地址）

GitHub - Primer（規(guī)范地址）

Yelp - Styleguide（規(guī)范地址）

這些設(shè)計(jì)規(guī)范不盡相同。

有的非常概括，比如IBM的Design Language；有的非常細(xì)致，比如Salesforce的Lightning；有的側(cè)重于企業(yè)內(nèi)部復(fù)用元素，減少工作時(shí)的摩擦，例如MailChimp的Patterns；有的側(cè)重于對(duì)接外部的設(shè)計(jì)，比如Google的Material Design；有的側(cè)重于外觀和模版資源，例如Facebook的Brand Guidelines；有的側(cè)重于代碼，例如GitHub的Primer；有的形式是一個(gè)網(wǎng)站，例如蘋(píng)果的HIG；有的形式是一個(gè)app，例如Airbnb的DLS（僅內(nèi)部可見(jiàn)，不確定，感覺(jué)是）。

IBM講了很多high level的設(shè)計(jì)原則

Salesforce的設(shè)計(jì)規(guī)范比Material Design還仔細(xì)。

MailChimp的規(guī)范寫(xiě)明了柵格系統(tǒng)，字體字號(hào)等各種元素。

Google的Material Design和蘋(píng)果的HIG可能是大家最熟悉的設(shè)計(jì)規(guī)范。

Facebook對(duì)外可見(jiàn)的規(guī)范主要是品牌規(guī)范，也有assets可以下載。

GitHub的規(guī)范基本上是一份代碼文檔。

什么時(shí)候應(yīng)該做設(shè)計(jì)規(guī)范？

做一份設(shè)計(jì)規(guī)范可能會(huì)花不少時(shí)間和精力，什么時(shí)候應(yīng)該做設(shè)計(jì)規(guī)范，又怎樣促使管理層同意這個(gè)提議呢？

先說(shuō)什么時(shí)候還不需要設(shè)計(jì)規(guī)范：

在產(chǎn)品初始階段，通常一份Sketch文件就包括了所有設(shè)計(jì)，只要把Symbol和Styled Text利用好，就可以保證設(shè)計(jì)的整潔有序了。

在人力不足的時(shí)候，建立和維護(hù)一份設(shè)計(jì)規(guī)范是很奢侈的。我自己在小團(tuán)隊(duì)中做創(chuàng)新產(chǎn)品的時(shí)候，就選擇把Sketch文件存在Dropbox，頻繁溝通，確保團(tuán)隊(duì)成員了解版本的變更和對(duì)他們工作的影響。

什么時(shí)候應(yīng)該考慮制作設(shè)計(jì)規(guī)范：

在一些產(chǎn)品做出一次大的設(shè)計(jì)變更之后，通常會(huì)產(chǎn)生出一份嶄新的全面的設(shè)計(jì)稿。在這個(gè)稿子的基礎(chǔ)上，發(fā)展設(shè)計(jì)規(guī)范更容易。

舊版的Asana。

Asana經(jīng)歷了一個(gè)大改版，很可能會(huì)維持這個(gè)樣子好幾年，所以適合制作一個(gè)規(guī)范。

除了大改版，有時(shí)設(shè)計(jì)師也會(huì)做facelift（意為只改外觀，不改邏輯），如果有規(guī)范，就可以依據(jù)規(guī)范一點(diǎn)一點(diǎn)地改，而不擔(dān)心會(huì)遺漏了。AOL新舊版交替的時(shí)候，404頁(yè)面就拖了很久，一是優(yōu)先級(jí)不高，二是存在感太低很容易被遺忘在角落。

如果旗下有一個(gè)以上產(chǎn)品，又想保持品牌的一致性，有設(shè)計(jì)規(guī)范作參考會(huì)容易很多。比如Facebook的F8大會(huì)上，設(shè)計(jì)師曾經(jīng)提到過(guò)他們?cè)谠O(shè)計(jì)新功能的時(shí)候，從設(shè)計(jì)規(guī)范中把小頭像的縮略圖直接拖到新設(shè)計(jì)上，復(fù)用了這個(gè)元素，既節(jié)約時(shí)間，也避免了用戶(hù)體驗(yàn)的割裂。

對(duì)內(nèi)的規(guī)范應(yīng)該設(shè)置為所有員工都可以瀏覽，部分員工有權(quán)更改，每一次更改都需要記錄。在規(guī)范里標(biāo)明品牌個(gè)性，設(shè)計(jì)原則，各種可復(fù)用的元素等等，可以減少設(shè)計(jì)和開(kāi)發(fā)之間的摩擦。

平臺(tái)型產(chǎn)品可以做一份對(duì)外的設(shè)計(jì)規(guī)范，以統(tǒng)一相關(guān)產(chǎn)品的樣式，擴(kuò)大影響力。唯有統(tǒng)一，才能有區(qū)分度。如果不統(tǒng)一，產(chǎn)品形象會(huì)混亂模糊。

與全球的設(shè)計(jì)師分享制作設(shè)計(jì)規(guī)范的經(jīng)驗(yàn)，以及它如何影響了設(shè)計(jì)流程和團(tuán)隊(duì)協(xié)作。一方面為設(shè)計(jì)師社群做貢獻(xiàn)，另一方面塑造了重視設(shè)計(jì)的公司形象，對(duì)PR和人才招募有利。

制作設(shè)計(jì)規(guī)范需要什么？

一個(gè)計(jì)劃：

首先要確定這個(gè)項(xiàng)目的scope，明確設(shè)計(jì)規(guī)范的類(lèi)別，預(yù)估所需要的人力，規(guī)劃項(xiàng)目時(shí)間和項(xiàng)目結(jié)束后的安排。

對(duì)于設(shè)計(jì)規(guī)范的類(lèi)別，如果你的產(chǎn)品是一個(gè)復(fù)雜的網(wǎng)站，你可能更想做一個(gè)動(dòng)態(tài)的，不斷更新的代碼庫(kù)，而不是一個(gè)畫(huà)滿(mǎn)標(biāo)注的PDF。確定類(lèi)別后，可以考慮有哪些內(nèi)容應(yīng)該加入進(jìn)去，比如styles，components，patterns等等。

對(duì)于人力，依據(jù)團(tuán)隊(duì)的大小有所區(qū)別，有些大公司會(huì)有人全職負(fù)責(zé)設(shè)計(jì)規(guī)范，小一點(diǎn)的可能有人在主業(yè)之余負(fù)責(zé)維護(hù)這個(gè)規(guī)范。

對(duì)于項(xiàng)目時(shí)間和結(jié)束后的安排，建議用一段時(shí)間集中建設(shè)設(shè)計(jì)規(guī)范，然后長(zhǎng)期地維護(hù)它。

額外加分項(xiàng)是，給這個(gè)設(shè)計(jì)規(guī)范起個(gè)好名字吧，像Spotify的GLUE（Global Language for a Unified Experience）就很不錯(cuò)。

一些經(jīng)驗(yàn)：

WeWork - Plasma Design System??（文章）

Airbnb - Design Language System（文章）

Spotify - Scaling Design at Spotify（文章）

這是三家知名公司分享的設(shè)計(jì)經(jīng)驗(yàn)，WeWork的最新也最詳細(xì)。除了參考文章，也可以參考下面的其他公司的設(shè)計(jì)規(guī)范。

更多設(shè)計(jì)規(guī)范

設(shè)計(jì)師Andrew Couldwell找到的設(shè)計(jì)規(guī)范列表

一個(gè)收集設(shè)計(jì)規(guī)范的小站 The Way Products Are Built

「如何看懂iOS 10 的設(shè)計(jì)規(guī)范指南」

1. 看趨勢(shì)變化丨《從IOS 10設(shè)計(jì)指南變化看設(shè)計(jì)的新趨勢(shì)》
2. 看交互啟示丨《從IOS 10 的交互設(shè)計(jì)中學(xué)到的3個(gè)設(shè)計(jì)啟示》
3. 看使用方法丨《一份超詳細(xì)的「IOS 10 UI KIT」使用手冊(cè)（附源文件）》

原文地址：zhihu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com