超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

長(zhǎng)文多圖!FACEBOOK的視覺(jué)系統(tǒng)是如何養(yǎng)成的?

2015-6-3    周周

藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:優(yōu)設(shè)網(wǎng)

 如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

facebook-visual-system-design-1

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

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

當(dāng)我2008年在Facebook工作開(kāi)始,它在視覺(jué)識(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)致了非常零碎的視覺(jué)效果。首次解決這個(gè)問(wèn)題是在2009年,我的合作設(shè)計(jì)者Everett Katigbak和Mark Bixby加入了我在平時(shí)考慮過(guò)的Facebook文字。我通過(guò)描寫(xiě)Facebook的身份準(zhǔn)則、插圖準(zhǔn)則和維基設(shè)計(jì)資源跟進(jìn)了這件事。

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

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

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

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

2012——基于聽(tīng)眾和背景,我在考慮關(guān)于Facebook視覺(jué)景觀的問(wèn)題

相機(jī)APP

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

修改過(guò)的Klavika

重繪的Klavika

最終版的字標(biāo)

字體

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

Facebook常規(guī)版

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

小圖標(biāo)

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

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

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

老圖標(biāo)

我們?cè)噲D解決這個(gè)問(wèn)題,創(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è)需要重要考慮的地方是模塊化邊界半徑的問(wèn)題。只要有可能,我們?cè)敢馐褂媚J(rèn)的半徑,但是要滿足某些接口或者上下文,就像IOS一樣,可以理想的調(diào)整該圖標(biāo)的不同半徑。

最后新圖標(biāo)還設(shè)計(jì)了不同的視覺(jué)造型。盡管除了邊界半徑之外,形狀和比例不應(yīng)該修改,因?yàn)樵搱D標(biāo)本身就擁有可以匹配上下文的視覺(jué)美感。這里展示的是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ì)、小組、頁(yè)面等。多年來(lái),每一個(gè)子品牌的設(shè)計(jì)者都一遍又一遍的解決相同的問(wèn)題。這不僅會(huì)造成一個(gè)非?;靵y的視覺(jué)設(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)過(guò)身來(lái)自己做。

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

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

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

字標(biāo)

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

舊版的Facebook文字

新版的Facebook文字

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

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

文檔

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

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

使用中的系統(tǒng)

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

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

 

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔