Facebook是一個(gè)連接全球數(shù)十億人的社交工具。 面對(duì)這一視覺(jué)系統(tǒng)，設(shè)計(jì)師遇到了前所未有的挑戰(zhàn)

雖然每個(gè)工具都能很好地履行其預(yù)期的功能，但它們并沒(méi)有提供令人滿(mǎn)意的整體經(jīng)驗(yàn)。設(shè)計(jì)的UI模式，使用顏色和圖像每個(gè)產(chǎn)品都是不同的。整體看起來(lái)不僅過(guò)時(shí)，而且與Facebook的這些專(zhuān)業(yè)人士在個(gè)人生活中使用也脫離聯(lián)系。

我們希望制作出一致，令人滿(mǎn)意的用戶(hù)體驗(yàn)，值得我們的商業(yè)產(chǎn)品為公司和人們喜歡。我們還希望通過(guò)改進(jìn)他們所依賴(lài)的工具來(lái)展示我們對(duì)這些業(yè)務(wù)的承諾。

一個(gè)系統(tǒng)，很多經(jīng)驗(yàn)

我知道這個(gè)項(xiàng)目將是一個(gè)團(tuán)隊(duì)的努力，但我是被嚇倒的。到目前為止，我為“模擬人生”設(shè)計(jì)了UI，并為SFMOMA創(chuàng)建了一個(gè)廣泛的風(fēng)格指南，但這些項(xiàng)目只有一個(gè)觀(guān)眾和一個(gè)產(chǎn)品。創(chuàng)建一個(gè)連貫的視覺(jué)系統(tǒng)，跨越不同客戶(hù)群體的多個(gè)廣告工具，包括數(shù)百萬(wàn)小企業(yè)，大品牌和代理機(jī)構(gòu)以及我們的營(yíng)銷(xiāo)網(wǎng)站，是一個(gè)完全不同的挑戰(zhàn)規(guī)模，比任何都更加復(fù)雜，曾經(jīng)做過(guò) 每個(gè)產(chǎn)品不僅具有不同的外觀(guān)和感覺(jué)，而且這些產(chǎn)品中有150位設(shè)計(jì)師; 該系統(tǒng)必須為所有這些工作。 

我不知道系統(tǒng)會(huì)是什么樣子，但我知道這不是太規(guī)范。它必須是可擴(kuò)展的和靈活的，隨著我們的成長(zhǎng)而發(fā)展的能力。在潛入視覺(jué)效果之前，我需要了解我們希望人們?nèi)绾误w驗(yàn)我們的產(chǎn)品。我開(kāi)始與我們的設(shè)計(jì)領(lǐng)導(dǎo)團(tuán)隊(duì)合作來(lái)定義我們的屬性。如何想要體驗(yàn)感受？我們想出了一個(gè)范圍不同的情況下，像描述的人，專(zhuān)業(yè)，值得信賴(lài)，和友好的。

利益相關(guān)方

接下來(lái)，我對(duì)所有Facebook的商業(yè)產(chǎn)品以及我們的消費(fèi)者插圖和顏色進(jìn)行了審核。我展示了我們不同的團(tuán)隊(duì)，整體體驗(yàn)如何脫節(jié)。然后，我為不同的團(tuán)隊(duì)提供了研討會(huì)，使用點(diǎn)投票和貼紙寫(xiě)作來(lái)快速識(shí)別我們認(rèn)為成功的設(shè)計(jì)。

一旦我們達(dá)成了一個(gè)基本方向的協(xié)議 - 我們稱(chēng)之為“抽象幾何風(fēng)格” - 我們經(jīng)歷了許多輪次的改進(jìn)。我們現(xiàn)在有一個(gè)明確的方向，但是我們?nèi)匀恍枰环N共同的方式來(lái)了解如何將其應(yīng)用于系統(tǒng)將重塑的所有不同的產(chǎn)品。

把它們捆綁在一起

我回頭看整個(gè)系統(tǒng)。當(dāng)我重新審視了我們?yōu)榱硕x品牌屬性而進(jìn)行的練習(xí)時(shí)，我發(fā)現(xiàn)他們可以應(yīng)用我們旨在匯集的不同體驗(yàn)。這只是一個(gè)根據(jù)觀(guān)眾和產(chǎn)品在頻譜上調(diào)整每個(gè)屬性的強(qiáng)度的問(wèn)題。 

例如，我們希望Power Editor是一種主要由廣告代理商的專(zhuān)業(yè)人士使用的廣告界面，可以感受到更為先進(jìn)的功能。另一方面，使用Pages的人大多是中小企業(yè)，所以產(chǎn)品應(yīng)該更簡(jiǎn)單，更平易近人。

顏色也一樣。一個(gè)用戶(hù)可能需要它是值得信賴(lài)和平靜的，而另一個(gè)用戶(hù)需要它來(lái)感覺(jué)友好。我研究了色彩系統(tǒng)，并嘗試將其映射到我們?yōu)镕acebook業(yè)務(wù)開(kāi)發(fā)的維度。通過(guò)在項(xiàng)目影響的所有經(jīng)驗(yàn)中應(yīng)用這樣的維度，我開(kāi)始看到我們?nèi)绾我砸恢潞拖到y(tǒng)的方式解決所有的用戶(hù)。 

這并不意味著很容易。開(kāi)發(fā)可以在所有消費(fèi)者和商業(yè)產(chǎn)品上工作的調(diào)色板 - 將它們放在一起而不消除有意義的差異 - 是我們面臨的最大挑戰(zhàn)之一。滿(mǎn)足它需要多個(gè)團(tuán)隊(duì)之間的大量協(xié)作。

我們使用音調(diào)來(lái)加強(qiáng)Facebook品牌，并在消費(fèi)者和商業(yè)插圖中創(chuàng)造更多的一致性。在總體方案中，我們?yōu)椴煌纳虡I(yè)產(chǎn)品使用不同的配色方案，以創(chuàng)造出表面之間的明顯區(qū)別，幫助人們保持領(lǐng)導(dǎo)。

保持人性

顏色只是我們努力制作商業(yè)工具的一部分，這些商業(yè)工具帶來(lái)不同的經(jīng)驗(yàn)，同時(shí)保持適當(dāng)?shù)膮^(qū)別。如果我們的商業(yè)工具 - 即使是進(jìn)的 - 都感覺(jué)到非人性化，他們不會(huì)像Facebook的一部分。 

我們需要我們的新視覺(jué)系統(tǒng)，簡(jiǎn)單而通用，足以使感情上與世界各地使用我們的工具的人的廣泛聯(lián)系。我在我們的視覺(jué)系統(tǒng)中編寫(xiě)了代表人物的指南，包括許多不同的膚色和發(fā)型，以表示多樣性。

人物也不得不反映各種各樣的工作場(chǎng)所（例如代理與餐館）。消費(fèi)者的數(shù)字應(yīng)該像日常人一樣，從不僵硬或機(jī)器人。在所有產(chǎn)品中，人們應(yīng)該習(xí)慣于講故事或傳達(dá)一個(gè)信息 - 從不隨機(jī)放置在作品中。每個(gè)例子需要清楚地說(shuō)明它們與我們的產(chǎn)品有關(guān)。

我學(xué)到的五件事

從項(xiàng)目開(kāi)始就越遠(yuǎn)，其最大的教訓(xùn)就越明顯。其中一些具體針對(duì)Facebook的獨(dú)特規(guī)模，但我希望其他人對(duì)任何人構(gòu)建視覺(jué)系統(tǒng)的各種經(jīng)驗(yàn) - 或領(lǐng)先的綜合設(shè)計(jì)項(xiàng)目是有用的。

1. 與團(tuán)隊(duì)合作，盡早界定明確的目標(biāo)。這個(gè)項(xiàng)目有很多模糊性和依賴(lài)性。在研究階段，我們與所有的業(yè)務(wù)設(shè)計(jì)團(tuán)隊(duì)進(jìn)行了密集的工作會(huì)議。我們獲得的見(jiàn)解幫助我們制定了明確的指導(dǎo)原則。

2. 負(fù)責(zé)。一旦這些原則得到確定，不要超越民主。漫長(zhǎng)的情緒充沛的辯論可以導(dǎo)致一個(gè)設(shè)計(jì)，把每個(gè)人的想法混在一起，缺乏強(qiáng)烈的個(gè)性。

3. 與移動(dòng)目標(biāo)保持聯(lián)系。我們的許多業(yè)務(wù)產(chǎn)品在這項(xiàng)工作正在發(fā)展的同時(shí)被重新命名。在正確的時(shí)間與這些團(tuán)隊(duì)的正確的利益相關(guān)者進(jìn)行溝通，有助于我們影響他們的工作。它也幫助我們更好地了解他們的設(shè)計(jì)需求。

4. 教育，教育，教育。很多我最重要的工作重點(diǎn)是建立對(duì)系統(tǒng)的更廣泛的了解以及為什么它是重要的。我們通過(guò)不同的設(shè)計(jì)團(tuán)隊(duì)通過(guò)廣泛的事件和問(wèn)答來(lái)早日傳播系統(tǒng)。

5. 保持參與 無(wú)論系統(tǒng)的連貫性和靈活性如何，相信它將需要持續(xù)的主動(dòng)維護(hù)。為了幫助保持我們所有的移動(dòng)部件的軌道，我一直在參與，不僅僅是作為答案的來(lái)源，而且作為聽(tīng)眾。向設(shè)計(jì)團(tuán)隊(duì)詢(xún)問(wèn)他們的挑戰(zhàn)使我們能夠?qū)嵤┮恍└倪M(jìn)，使設(shè)計(jì)人員更容易將其工作融入系統(tǒng)。