漲姿勢！Facebook的視覺系統(tǒng)是如何養(yǎng)成的？

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

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

　　2009年Everett Katigbak、Mark Bixby和我開始了對Facebook字標使用的重新思考。

　　這是我第一次嘗試重繪字標

　　早期對映射Facebook品牌的嘗試

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

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

　　相機APP

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

　　修改過的Klavika

　　重繪的Klavika

　　最終版的字標

　　字體

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

　　Facebook常規(guī)版

　　實施這款字體的版面排版

　　小圖標

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

　　谷歌圖片搜索中的Facebook圖標

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

　　老圖標

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

　　新圖標

　　與以前的圖標相比，一個顏色標志符號的明顯好處是可以作為積極或者消極的形狀。

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

　　設(shè)計新圖標另一個需要重要考慮的地方是模塊化邊界半徑的問題。只要有可能，我們愿意使用默認的半徑，但是要滿足某些接口或者上下文，就像IOS一樣，可以理想的調(diào)整該圖標的不同半徑。

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

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

　　之前的iphoto

　　之后的iphoto

　　之前的windows8

　　之后的windows8

　　之前的INS

　　之后的INS

　　子品牌

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

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

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

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

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

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