精選干貨|如何制作一套互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)規(guī)范?
我最近對(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ī)范。
作者:酈橙錦妖
來(lái)源:https://zhuanlan.zhihu.com/p/24764675
本文由 @酈橙錦妖 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
全英文的?。靠粗美?。就不能搞個(gè)中文版的么
??