在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ā)展他們的視覺形象。