7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

從一個產品到另外一個產品，UI模式、色彩、圖標、甚至字體樣式都不一樣，整體的體驗就顯得頗為過時了，同F(xiàn)acebook 用戶如今的日常個人生活也顯得比較脫節(jié)。
7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

所以，我們希望制作出擁有一致且滿意用戶體驗的產品，讓Facebook 真正服務與商業(yè)用戶，也產生足夠的情感關聯(lián)。我還希望通過這些他們所使用、依賴的工具，來展示我們對于這些業(yè)務的承諾。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

一個系統(tǒng)，多重體驗7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

雖然我知道這個項目將會是一個團隊項目，但是真正開始的時候，我依然被嚇到了。截至目前，我曾為模擬人生設計過UI，為 SFMOMA創(chuàng)建過泛用型的風格指南，但是這些項目大多都是面對單一用戶或者是單一產品?？墒窍朐谖乙鎸Φ模且豁棛M跨多類型用戶群體、囊括了數(shù)百萬小企業(yè)、大品牌和代理機構、涵蓋不同廣告工具、迎合多樣營銷需求的一個視覺系統(tǒng)，這甚至和我們日常所面對的各種極端挑戰(zhàn)還來的復雜。簡單的說，我們所需要設計的產品，需要匹配上體驗完全不同的多個產品，統(tǒng)一150位設計師的設計，協(xié)力完成。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

我不知道終這個設計系統(tǒng)會是什么樣子，但是我清楚它一定不能太精確，不能限制得過死。它需要是可擴展的，靈活的，并且擁有優(yōu)秀的成長性和可進化性。在真正開始視覺設計之前，我希望知道我們對于產品和用戶之間的交互有怎么樣的預期。我們想到了一系列不同的語匯來對其進行描述，比如人性化、專業(yè)、值得信賴、友善等。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

與利益相關方保持一致7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

接下來，我將所有Facebook 旗下的商業(yè)產品、消費者側寫以及色彩進行了基本的審核。隨后，我將整體體驗和視覺上的脫節(jié)之處，展現(xiàn)給了相關的所有團隊。之后，我們針對不同的團隊展開了研討會，并且通過投票和貼紙?zhí)顚懸庖姷姆绞?，快速地統(tǒng)一并協(xié)調出了我們共同認為的成功的設計。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

當我們在大方向上達成一致的時候，我們基本上就敲定了我們所要的風格——“抽象幾何風格”，并且之后我們在此基礎上進行了多輪修改?，F(xiàn)在我們有了一個明確的方向，但是我們仍然需要尋找一條通用的方法來將它應用到不同的產品，重塑整體的體驗。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

有效的整合7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

接下來我將這個系統(tǒng)當作一個整體來審視。我試著重新訪問重塑之后的每一個部分，我發(fā)現(xiàn)整個體驗已經被協(xié)調到比較一致的程度，接下來只需要針對特定的用戶和產品進行微調即可。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

舉個例子，我們希望 Power Editor 是一個主要由廣告代理商和專業(yè)人事使用的廣告界面工具，所以它的界面應該被設計的更為先進、進階，同時，主要面向中小型企業(yè)的Pages 則需要做的更加簡單、平易近人。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

在色彩上也是一樣。一部分訪客可能需要的是值得信賴和沉靜的界面，有的則向看到感覺友好的控件。所以，我研究過整個色彩系統(tǒng)之后，嘗試將它映射到Facebook 真?zhèn)€業(yè)務體系中。我將各個項目的用戶需求維度和相應的配色匹配起來，這使得我們可以一致和系統(tǒng)地針對所有客戶進行有規(guī)律的調整。不過這個事情并不那么容易。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

開發(fā)一套能夠覆蓋所有的客戶也用戶的配色系統(tǒng)，并且還要保持其中一些部分的個性和特色，這無疑是一項巨大的挑戰(zhàn)。為了滿足這些條件，多個團隊之間進行了大量的協(xié)作。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

我們通過色調和色調之間的協(xié)同來強化 Facebook 的品牌，并且盡力在消費者和商業(yè)需求之間創(chuàng)造一致性的特征。在整體方案中，我們盡量讓不同的產品擁有不同的配色方案，創(chuàng)造出讓用戶易于辨別的明顯差異性。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

  7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

保持人性7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

配色這件事，只是我們?yōu)檫@些商業(yè)工具帶來不同體驗保持適當差別的諸多努力中的一項。Facebook 本質上是為了連接不同的人，如果我們的商業(yè)工具——即使是先進的那種——都讓人感覺和人有距離感，它們就開始出離于我們所熟知的Facebook了。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

我希望我們的新的視覺體系是通用而簡單的，傳遞出足以同世界上絕大多數(shù)用戶能夠產生共鳴的情感。我在視覺設計規(guī)范中寫明了許多代表性的用戶的相關指南，涵蓋了膚色、發(fā)型等信息，具備多樣性的特征。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

人相關的因素也不得不涵蓋了用戶的工作場所。而于消費者相關的參數(shù)則應該像日常我們所熟知的各種真實的人類一樣，描述不應該類似冷硬的機器人。在所有的產品當中，人們都習慣使用故事來呈現(xiàn)信息，永遠不要使用隨機信息作為占位符。每個案例都應該清晰地闡述他們和產品之間的關聯(lián)。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

我從中學會的5件事7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

隨著項目的推進，越靠后我能從中獲得的經驗和教訓就越多。其中有一些和Facebook 這個獨特平臺有關系，但是我希望我從中獲得的經驗教訓能夠為大家服務，這樣在你進行大型的視覺系統(tǒng)設計的時候，不再走我走過的彎路。下面是我獲得5個關鍵性的經驗：7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

·和多個團隊協(xié)作的時候，要盡早界定明確的目標。我所參與的這個項目有許多模糊的地方，也有許多產品、服務是相互關聯(lián)的。在研究階段，我們同每個設計團隊和業(yè)務團隊進行了極為密集的研討會議。在此過程中我們獲得了許多建議和意見，這對于制定明確的目標和指導規(guī)則非常有幫助。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

·負責。一旦這些規(guī)范和原則得到了確認，就不要隨意更改了。漫長的、情緒化的討論會讓設計中混合太多的個人想法和情緒，如有疑問，參考第一條。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

·和演進的目標保持聯(lián)系。許多產品和業(yè)務隨著設計的推進會逐步變化。在整個設計過程中應該和這些團隊以及團隊利益相關者保持聯(lián)系，密切溝通，這和他們的工作內容息息相關，而我們的設計需求也與之有關。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

·推廣與普及。 對其他人普及這個設計體系以及解釋它的重要性是我所要做的重要的工作之一。我們通過不同的設計團隊來廣泛傳播這個系統(tǒng)和它相關的Q&A 來推廣。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

·保持參與。無論這個設計系統(tǒng)的連貫性和靈活性有多突出，我相信它是需要持續(xù)地關注和維護的。所以，為了確保這個設計體系始終正常運轉，我并沒有單純作為一個信息源而存在，而是盡量作為一個傾聽者，并且提供意見和反饋。我會常常同設計團隊溝通，了解他們所面臨的挑戰(zhàn)和解決、實現(xiàn)的方法，確保設計系統(tǒng)在正常有效的演進。7Xx北京網站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)