干貨 | Facebook品牌視覺系統(tǒng)【規(guī)范大全】

轉(zhuǎn)載贊2 收藏9 評(píng)論1

舉報(bào) 2015-06-03

掃描,分享朋友圈

來源：Arting365

采編：wxn@Arting365.com

這篇文章是由一位已經(jīng)離職的Facebook設(shè)計(jì)師所寫的，其中詳盡的描述了Facebook的vi系統(tǒng)組建過程，看完之后，也許大家對(duì)Facebook，對(duì)VI會(huì)有更為清晰的認(rèn)識(shí)。

以下為正文內(nèi)容：

當(dāng)我2008年在Facebook工作開始，它在視覺識(shí)別（visual identity）方面已經(jīng)做了不少研究了。他們選擇了一種簡(jiǎn)單大膽的配色方案，運(yùn)用了精心設(shè)計(jì)的簡(jiǎn)單井字標(biāo)，令人慶幸的是避免了web2.0時(shí)代的流行審美。但是我相信，這其中仍然有巨大的改進(jìn)機(jī)會(huì)。這樣的機(jī)會(huì)與公司文化就是我為什么要在那里工作的主要原因。

有些不幸的是，在優(yōu)先事項(xiàng)列表中，精煉更好的vi排名這件事并不高。在我們努力跟上Facebook快速增長(zhǎng)的同時(shí)，設(shè)計(jì)師經(jīng)常只是單純的設(shè)計(jì)新產(chǎn)品或者提議，所以，在這種效率低下的狀況之下，就導(dǎo)致了非常零碎的視覺效果。首次解決這個(gè)問題是在2009年，我的合作設(shè)計(jì)者Everett Katigbak和Mark Bixby加入了我在平時(shí)考慮過的Facebook文字。我通過描寫Facebook的身份準(zhǔn)則、插圖準(zhǔn)則和維基設(shè)計(jì)資源跟進(jìn)了這件事。

2009年Everett Katigbak、Mark Bixby和我開始了對(duì)Facebook字標(biāo)使用的重新思考。

這是我第一次嘗試重繪字標(biāo)

早期對(duì)映射Facebook品牌的嘗試

多年來，我在各個(gè)版本系統(tǒng)上都取得了進(jìn)步，當(dāng)然也有過失敗。我一直堅(jiān)信我們的努力還不夠。Facebook在我看來有悠久的歷史和充滿熱情的員工，這些員工通常會(huì)自發(fā)的發(fā)起項(xiàng)目。所以在2012年，我也決心開發(fā)一個(gè)全面、統(tǒng)一的vi系統(tǒng)。

2012——基于聽眾和背景，我在考慮關(guān)于Facebook視覺景觀的問題

相機(jī)APP

第一次機(jī)會(huì)是在2012年的時(shí)候，我注意到即將到來的相機(jī)APP循環(huán)像素云的版面排版，這是由Facebook內(nèi)部共享的設(shè)計(jì)模擬工具完成的。產(chǎn)品設(shè)計(jì)師建議使用相機(jī)文字體Klavika。雖然Klavika確實(shí)不錯(cuò)，但我一直覺得這個(gè)字體太過僵硬了，F(xiàn)acebook這個(gè)品牌使用的話太過機(jī)械化了。我覺得這是一個(gè)機(jī)會(huì)，所以聯(lián)系了他們，他們也遷就了我的觀點(diǎn)，所以很快，我就開始為相機(jī)字標(biāo)重繪Klavika，使得這個(gè)字體更為人性化。

修改過的Klavika

重繪的Klavika

最終版的字標(biāo)

字體

盡管相機(jī)APP的成功很有限，但是對(duì)于修改后的Klavika，我們決定向Eric Olson——Klavika 的原始設(shè)計(jì)者商議，開發(fā)一個(gè)完整的字體。目前，這款字體有兩種類型——普通和加粗兩個(gè)版本，并且支持超過75種語言。

Facebook常規(guī)版

實(shí)施這款字體的版面排版

小圖標(biāo)

這個(gè)字體開發(fā)之后不久，我開始將這個(gè)理念灌輸?shù)搅似渌糠帧１M管這個(gè)圖標(biāo)已經(jīng)成為Facebook的主識(shí)標(biāo)記，但大家仍然開始設(shè)法在產(chǎn)品中替換成新的圖標(biāo)。而后Facebook開始向公眾提供這些修改過的標(biāo)記，融進(jìn)了大家的日常運(yùn)用中，到最后大家發(fā)現(xiàn)了官方的雙色設(shè)計(jì)，很多人開始修改圖標(biāo)。所有的這一切，正是想象造成的。

谷歌圖片搜索中的Facebook圖標(biāo)

即使Facebook本身并不一致，但這樣的設(shè)計(jì)不會(huì)一直那么糟糕。下面顯示的是它使用的兩種主要圖標(biāo)設(shè)計(jì)。

老圖標(biāo)

我們?cè)噲D解決這個(gè)問題，創(chuàng)建的新圖標(biāo)需要足夠強(qiáng)大和靈活，可以在任何上下文中工作。與第一個(gè)圖標(biāo)的設(shè)計(jì)師Aaron Sitti合作，我們的方法是重繪“f”調(diào)整比例，并刪除底部的突出顯示欄。所以新的圖標(biāo)，是一個(gè)簡(jiǎn)單的顏色標(biāo)志符號(hào)。

新圖標(biāo)

與以前的圖標(biāo)相比，一個(gè)顏色標(biāo)志符號(hào)的明顯好處是可以作為積極或者消極的形狀。

我與設(shè)計(jì)師Jorn van Dijk、Brandon Walkin暗示產(chǎn)品接口中所需的所有尺寸的圖標(biāo)。

設(shè)計(jì)新圖標(biāo)另一個(gè)需要重要考慮的地方是模塊化邊界半徑的問題。只要有可能，我們?cè)敢馐褂媚J(rèn)的半徑，但是要滿足某些接口或者上下文，就像IOS一樣，可以理想的調(diào)整該圖標(biāo)的不同半徑。

最后新圖標(biāo)還設(shè)計(jì)了不同的視覺造型。盡管除了邊界半徑之外，形狀和比例不應(yīng)該修改，因?yàn)樵搱D標(biāo)本身就擁有可以匹配上下文的視覺美感。這里展示的是ios 和Android的圖標(biāo)區(qū)別。

所有這一切的修改是為了讓他們可以納入更多的內(nèi)容，下面是一些版面排版將納入的新圖標(biāo)。

之前的iphoto

之后的iphoto

之前的windows8

之后的windows8

之前的INS

之后的INS

子品牌

做完字體和新圖標(biāo)的發(fā)展，就可以為子品牌制定標(biāo)準(zhǔn)和創(chuàng)建新模板了。一個(gè)子品牌只是服務(wù)于任何從屬的產(chǎn)品、服務(wù)、團(tuán)隊(duì)、小組、頁面等。多年來，每一個(gè)子品牌的設(shè)計(jì)者都一遍又一遍的解決相同的問題。這不僅會(huì)造成一個(gè)非常混亂的視覺設(shè)計(jì)，也會(huì)使得設(shè)計(jì)師的工作變得十分低效。

一個(gè)Facebook現(xiàn)有子品牌的vi樣本

我對(duì)著整個(gè)系統(tǒng)的看法可以歸納為不規(guī)則的，我們?cè)趪L試盡可能創(chuàng)建一個(gè)靈活實(shí)用的系統(tǒng)。其中一條必須的規(guī)則就是永遠(yuǎn)不會(huì)再將這個(gè)圖標(biāo)納入一個(gè)子品牌成為一個(gè)新標(biāo)志，這是很虛偽的做法，新標(biāo)志需要轉(zhuǎn)過身來自己做。

考慮到這一點(diǎn)，Jorn van Dijk和我開始創(chuàng)建子品牌的新圖標(biāo)。雖然是一個(gè)顏色標(biāo)志符號(hào)，但它所需的每個(gè)圖標(biāo)也可以在全彩的插圖版中呈現(xiàn)。

經(jīng)過詳盡的調(diào)查現(xiàn)有Facebook的分品牌，我試圖去創(chuàng)建一個(gè)子品牌，不會(huì)試圖去做限制性很強(qiáng)的品牌。

這些子品牌公開露面的場(chǎng)所之一是在Facebook的頁面上，所以我們要更新系統(tǒng)頁內(nèi)的圖標(biāo)。所以這些簡(jiǎn)單的單色字形必須適應(yīng)產(chǎn)品界面的大小。

字標(biāo)

對(duì)于字標(biāo)來說，重要的還是要應(yīng)用同樣的方法來開發(fā)攝像頭和字體，甚至還需要重繪Facebook字體本身。這個(gè)當(dāng)時(shí)就已經(jīng)被批準(zhǔn)了，但是不幸的是我離開以后，F(xiàn)acebook還沒有開始實(shí)施。

舊版的Facebook文字

新版的Facebook文字

以前Facebook對(duì)其文字要求的規(guī)則是需要白色扭轉(zhuǎn)較暗的顏色。

像圖標(biāo) 原始的16*16像素是由Soleio cuervo所畫。而我負(fù)責(zé)把所有的像素圖標(biāo)改編成大矢量的插圖，并對(duì)它進(jìn)行重新設(shè)計(jì)，使得它能夠在營(yíng)銷材料中使用。我借此機(jī)會(huì)簡(jiǎn)化了先前繪制的圖標(biāo)。

文檔

這一項(xiàng)目最重要和最耗時(shí)的方面之一是編寫文檔和創(chuàng)意方式共享的問題。在內(nèi)部，我建立、描述和維護(hù)內(nèi)部設(shè)計(jì)資源的中心頁，我也曾與設(shè)計(jì)師Kris Brady以及營(yíng)銷團(tuán)隊(duì)打造品牌資源中心。

請(qǐng)?jiān)L問facebookbrand.com，下載官方Facebook資源

使用中的系統(tǒng)

自我2014年離開facebook以后，令人興奮的是看到Facebook這個(gè)系統(tǒng)已經(jīng)開展了。第三方快捷圖標(biāo)的建立也是一個(gè)巨大的進(jìn)步。下面是我沒有設(shè)計(jì)的各種系統(tǒng)：

最后的想法 Facebook的發(fā)展速度非常快，嘗試設(shè)計(jì)一個(gè)能夠靈活運(yùn)用在諸多介質(zhì)和上下文中的系統(tǒng)是一項(xiàng)挑戰(zhàn)。這些分開的視覺設(shè)計(jì)工作最終能夠建立起一個(gè)跨職能的團(tuán)隊(duì)確實(shí)是一個(gè)不敢想象的任務(wù)。盡管沒有哪個(gè)系統(tǒng)是完美的，但是我還是為我們之前的成就所感到自豪，也期望能夠看到未來Facebook把他們的vi繼續(xù)發(fā)展下去。