在2008年，我開始在那里工作的時(shí)候，F(xiàn)acebook的視覺形象已經(jīng)值得我們?nèi)プ隽?。他們選擇了一個(gè)大膽的并且簡單的配色方案，有一個(gè)簡單的精心設(shè)計(jì)的文字商標(biāo)，并謝天謝地避免了在當(dāng)時(shí)很盛行的光滑的web 2.0的審美。不過，我認(rèn)為有很大的需要改進(jìn)的機(jī)會。這樣的機(jī)會，再加上自身的使命和企業(yè)文化，就是為什么我想在那里工作的一大原因。

不幸的是，提煉一個(gè)似乎工作正常的視覺形象并沒有在優(yōu)先級列表中排在靠前位置。在我們努力跟上Facebook快速增長的過程中，設(shè)計(jì)師經(jīng)常做一些新產(chǎn)品或舉措的一次性設(shè)計(jì)。這種低效率的使用時(shí)間也導(dǎo)致了非常零散的視覺景觀。

最初解決這個(gè)問題的努力中，有一個(gè)是在2009年的一個(gè)黑客馬拉松，當(dāng)同行設(shè)計(jì)師Everett Katigbak和Mark Bixby在一個(gè)練習(xí)中加入我們，一起重新思考Facebook的文字商標(biāo)。我通過寫Facebook的形象準(zhǔn)則，說明指南和設(shè)計(jì)資源wiki來跟上這件事的步伐。

　　Everett Katigbak，Mark Bixby和我在2009年黑客馬拉松思考Facebook的文字商標(biāo)

　　來自黑客馬拉松，這是我在重繪文字商標(biāo)的首次嘗試

　　測繪Facebook品牌的早期嘗試

多年來我在這個(gè)系統(tǒng)上的各個(gè)部分有一定的進(jìn)展，倡導(dǎo)任何愿意的人來聽，并且也有過數(shù)次失敗。我始終認(rèn)為，更有意義的努力是有必要的。Facebook擁有項(xiàng)目被組織內(nèi)充滿熱情的個(gè)體自發(fā)完成的悠久歷史，并在2012年我決定制定一個(gè)全面的并且有凝聚力的視覺形象系統(tǒng)。

　　2012——我怎么根據(jù)觀眾和情境來考慮Facebook的視覺景觀

相機(jī)應(yīng)用

我第一個(gè)大的機(jī)會嘗試其中一些想法是在2012年的時(shí)候，當(dāng)時(shí)我注意到一些實(shí)體模型用于即將到來的傳播在Pixel Cloud（Facebook分享模型的內(nèi)部工具）上的相機(jī)應(yīng)用。該產(chǎn)品設(shè)計(jì)師們建議使用字體Klavika用于相機(jī)的文字商標(biāo)。雖然Klavika確實(shí)有良好的質(zhì)量，但我一直覺得它用作Facebook的商標(biāo)太僵硬、機(jī)械。尋找一個(gè)機(jī)會，我接觸它們，盡管距離推出還有幾天，它們笑看我。我很快就開始重繪用于相機(jī)文字商標(biāo)的Klavika字體，使其多一點(diǎn)人文主義。

　　未修改的Klavika——由Jorn van Dijk設(shè)計(jì)的應(yīng)用程序圖標(biāo)

　　Ben重繪的Klavika

　　最終應(yīng)用程序的文字商標(biāo)

字體

盡管相機(jī)應(yīng)用程序的成果有限，自定義類型收到很好的內(nèi)部評價(jià)。再次修改自己其他項(xiàng)目的Klavika之后，我們決定委托Eric Olson（Klavika的初始設(shè)計(jì)者）采取辦法制定完整的字樣。目前字樣有兩種——常規(guī)和半黑體，并支持超過75種語言。

　　Facebook常規(guī)字體

　　實(shí)體模型實(shí)現(xiàn)字體

　　圖標(biāo)

在相機(jī)與字體開發(fā)之后，我就開始把相同的理念應(yīng)用于形象的其余部分。盡管有完整的文字商標(biāo)，圖標(biāo)已經(jīng)變成了Facebook的主要形象標(biāo)志，并且有些正在進(jìn)行的努力在用圖標(biāo)替換產(chǎn)品的文字商標(biāo)。Facebook此前在提供這些資源給公眾方面做得很差，結(jié)果導(dǎo)致很多人常常自己做自己的。即使他們沒有找到官方的，雙色的設(shè)計(jì)也導(dǎo)致很多人修改圖標(biāo)。所有這一切，你可以想象，導(dǎo)致了有些不成體系。

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

這種分化不會一直如此糟糕，但即使Facebook本身也存在不一致。下面顯示的是它主要使用的兩個(gè)圖標(biāo)設(shè)計(jì)，當(dāng)然還有其他的。

　　舊的圖標(biāo)

嘗試解決這個(gè)問題，我們創(chuàng)建了一個(gè)新的圖標(biāo)，它足夠強(qiáng)大、靈活，能在任何情況下工作。和Aaron Sittig（最初的圖標(biāo)設(shè)計(jì)者）進(jìn)行合作，我們的做法是重繪“F”、調(diào)整比例、取出底部高亮條等等，這樣新圖標(biāo)的核心是一個(gè)簡單的單一顏色字形。

　　新圖標(biāo)

之前圖標(biāo)存在的一個(gè)問題是它們只在某些背景或在某些情況下使用。單一顏色字形的一個(gè)明顯的優(yōu)點(diǎn)是，它可以作為一個(gè)積極或消極形態(tài)的工作。

我與設(shè)計(jì)師Jorn van Dijk和Brandon Walkin一起工作，為產(chǎn)品界面所有需要的各種尺寸探索新的圖標(biāo)。

新圖標(biāo)的另一個(gè)重要的考慮因素是設(shè)計(jì)時(shí)考慮到模塊化的邊界半徑。只要有可能，我們使用默認(rèn)半徑，但為了容納某些界面或背景，像IOS的，其中不同的半徑是理想的，該圖標(biāo)可以調(diào)整。

最后，新圖標(biāo)的設(shè)計(jì)也充分考慮不同的視覺風(fēng)格。而形狀和比例不應(yīng)該被改變，除了邊界半徑，圖標(biāo)本身可以改變樣式以匹配特定界面或背景的視覺美感。這里展示的是由Jorn van Dijk設(shè)計(jì)的iOS和Android的圖標(biāo)。

所有這一切都有望使第三方更容易整合和設(shè)計(jì)的字形的界面，而無需改變形狀或比例。下面是一些實(shí)體模型結(jié)合了新的圖標(biāo)。

　　之前的iPhoto

　　之后的iPhoto

　　之前的Windows 8

　　之后的Windows 8

　　之前的Instagram

　　之后的Instagram

子品牌

基本完成字體和新圖標(biāo)的開發(fā)后，我為創(chuàng)建新的子品牌開發(fā)標(biāo)準(zhǔn)和模板。子品牌只是從屬的任何產(chǎn)品，服務(wù)、團(tuán)隊(duì)、組、網(wǎng)頁等。多年來，子品牌已經(jīng)開發(fā)了一個(gè)一次性的做法——每個(gè)設(shè)計(jì)師都一遍又一遍地解決同樣的問題。這不僅導(dǎo)致了非?；靵y的視覺設(shè)計(jì)，而且它也是一個(gè)令人難以置信的設(shè)計(jì)時(shí)間的低效率使用。

　　Facebook子品牌現(xiàn)有的視覺標(biāo)識示例

對于整個(gè)系統(tǒng)，我的方法可以概括為使用工具而不是規(guī)則。與其創(chuàng)造一堆規(guī)則告訴人們“不”，我試圖盡可能地創(chuàng)造一個(gè)靈活的、詳細(xì)記錄的資源系統(tǒng)，它比替代品更容易使用。有一個(gè)規(guī)則我確實(shí)覺得有必要實(shí)行，永遠(yuǎn)不要為一個(gè)子品牌而納入圖標(biāo)到一個(gè)新的標(biāo)志。叫第三方不能修改我們的圖標(biāo)然后我們轉(zhuǎn)身自己做，這是虛偽的。

考慮到這一點(diǎn)，Jorn van Dijk和我開發(fā)了指南，用于為子品牌創(chuàng)建新圖標(biāo)。每個(gè)基本水平的圖標(biāo)需要用作單色字形，但它也可以以全色說明性型式呈現(xiàn)。

在對現(xiàn)有的Facebook子品牌做詳盡調(diào)查后，我試圖創(chuàng)建一個(gè)廣泛的系統(tǒng)，它能鎖死各種想要使用子品牌的人。與其試圖變得非常嚴(yán)格，我想嘗試在推動我們走向一致的同時(shí)適應(yīng)過去。

這些子品牌公開展示的其中一個(gè)地方是在Facebook上運(yùn)行的網(wǎng)頁，所以設(shè)計(jì)師Kris Brady和我曾與在新系統(tǒng)中運(yùn)行頁面更新圖標(biāo)的隊(duì)伍合作過。這些簡單的單一顏色字形在執(zhí)行產(chǎn)品界面所需的所有尺寸時(shí)要更好。

　　文字商標(biāo)

雖然它不被那么頻繁的使用，為相機(jī)和字體申請相同的方法制定、重繪Facebook文字商標(biāo)依然重要。這是合理的，但遺憾的是自從我從Facebook辭職后一直沒有實(shí)施。

　　舊的Facebook文字商標(biāo)，由古巴議會Joe Kral設(shè)計(jì)

　　新的Facebook文字商標(biāo)，核準(zhǔn)但尚未執(zhí)行

在此之前，F(xiàn)acebook關(guān)于它的文字商標(biāo)為數(shù)不多的規(guī)則之一是，它應(yīng)該永遠(yuǎn)是白色逆轉(zhuǎn)淘汰較暗的顏色。這種往往打破的規(guī)則終于在這一制度中廢除了。

　　Like圖標(biāo)

原來的16×16像素的在界面中使用的Like圖標(biāo)是Soleio Curvo繪制的。我負(fù)責(zé)調(diào)整所有的像素圖標(biāo)移入更大的矢量插圖在營銷材料中使用。在這個(gè)視覺形象的重新設(shè)計(jì)中，我趁機(jī)簡化我以前繪制的圖標(biāo)，并且與國際化團(tuán)隊(duì)一起打造翻譯Like按鈕的圖形圖標(biāo)。

　　文檔

這個(gè)項(xiàng)目中最重要并且費(fèi)時(shí)的方面是寫文檔和創(chuàng)建途徑來把資源輕松地分發(fā)到每個(gè)人。在內(nèi)部，我建立、編寫、維持內(nèi)部wiki上的設(shè)計(jì)資源中心網(wǎng)頁。我還與設(shè)計(jì)師Kris Brady以及營銷團(tuán)隊(duì)建立一個(gè)外部面臨的品牌資源中心。

　　訪問facebookbrand.com下載Facebook官方的資源

系統(tǒng)使用

2014年離開Facebook后，我非常興奮能看到這個(gè)系統(tǒng)被Facebook正在使用。該圖標(biāo)的第三方實(shí)現(xiàn)也是一個(gè)巨大的進(jìn)步。下面是我沒有設(shè)計(jì)的系統(tǒng)的使用。

　　最后的思考

Facebook作為一個(gè)產(chǎn)品和組織，發(fā)展速度非?？?，并且設(shè)計(jì)一個(gè)可以在許多媒體和背景中靈活使用的系統(tǒng)極具挑戰(zhàn)。從視覺設(shè)計(jì)工作中獨(dú)立出來，難以置信的任務(wù)是創(chuàng)造意識、獲得支持、并最終建立一個(gè)跨職能的團(tuán)隊(duì)來批準(zhǔn)和實(shí)施這些變革。即使沒有系統(tǒng)是完美的，我為我們的成就感到自豪，并期待看到Facebook繼續(xù)發(fā)展他們的視覺形象。