DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 分享Facebook的設計團隊的設計理念
分享Facebook的設計團隊的設計理念
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:今天在Palo Alto的總部,Facebook的設計團隊分享了他們的設計理念,以及他們是如何為2.5億用戶設計產品的。

今天在Palo Alto的總部,Facebook的設計團隊分享了他們的設計理念,以及他們是如何為2.5億用戶設計產品的。特別的是,他們強調了以下幾點:

  • 要勤寫代碼(get your hands dirty)
  • 盡早且頻繁地分享設計(share early & often)
  • 設計過程要從項目開始延續到結束(be there from start to finish)
  • 不要愛上你的設計(don’t fall in love)

尤其重要的是確保設計師有足夠的技術能力來寫很多代碼。

其他一些信息:

  • Facebook設計團隊的工作包括產品設計、市場營銷、UI模式、品牌和前端開發。整個團隊由15個產品設計師、5個UI工程師、5個用戶體驗研究員、4個交互設計師和1個內容架構師。在這個約有1000個員工的公司中,設計團隊總共有25人。
  • 通過撰寫從前端到後端代碼全部代碼,將設計和技術融合進整個公司的文化。

1)設計師需要參與整個過程:從戰略到發布。這不同於其他公司。

  • Facebook花費了很多時間和精力來保證設計師能參與到整個產品開發流程。
  • 例如:3月的主頁改版發布,精簡信息架構和提高頁面信息的流動速度。這樣的改變需要同時涉及數據結構和視覺結構。
  • 在確定視覺風格後,開始寫代碼來制作原型。設計師通過寫代碼來了解真實的數據如何在頁面布局中工作。
  • 不斷地平衡取捨,通過不斷地迭代交互設計和視覺設計來做很多嘗試。
  • 給管理層和其他團隊展示靜態的產品原型並做交互演示。
  • 讓設計師寫代碼能發現細節問題並快速執行修改。

2)盡早且頻繁地分享想法。了解用戶能幫助實現更好的設計。

  • 在Facebook沒有創意總監,取而代之的是自下而上的設計團隊組織架構。這對於團隊能分享他們的創意至關重要。
  • 開發相應工具來實現高效地分享。其中一個工具叫Pixelcloud,類似於一個帶評論功能的在線圖庫。自從在3月發布了這個工具後,大約每天有15張創意圖片通過這個網站得到分享。
  • 整個工作組涵蓋視覺設計和前端開發,這確保了Facebook的設計保持一貫的風格。所有的工作組都有固定的時間來給設計師提供反饋。
  • 例如:隱私向導的設計。在項目立項階段(kickoff phase),召集12個用戶並向他們展示30個原型,以此來決定產品的開發方向。在產品開發階段,再次召集相對較少的用戶,向他們展示7個原型來決定具體的設計。
  • 反饋是有效的。盡可能多的和早的獲取反饋,這有助於節約項目時間。

3)勤動手,最重要的是理解代碼是如何運行的。所有的設計師都要寫一些HTML,CSS,甚至PHP。

  • 模糊設計和技術的區別。設計師也能調試代碼和創建快速原型。
  • 設計師往往錯在設計過於簡潔,而工程師則錯在提供過多功能。
  • 理解你所為之工作的媒介類型,然後不斷反思你的設計。
  • 快速行動。Facebook在許多領域有很多競爭對手,而用戶使用網絡的習慣也在持續改變,所以快速地迭代更新產品很重要。
  • 最核心的是,Facebook相信最有效的方式是快速發布產品,然後看看用戶是如何使用的。
  • 原型在說謊。它們通常缺乏內容和上下文聯系。因此需要使用真實的內容和頁面設計來理解具體的設計是如何工作的。
  • 為了快速反應,我們需要快速地制作原型。例如:評論的UI首先在內部測試並修改,然後才發布給用戶。新的設計打破了原有的信息流裡的視覺線路。
  • 設計師一般每周大約會提交40個版本的代碼。

4)不要愛上你的設計。軟件的生命是短暫的,它總是在變化,你需要接受這個事實。

  • 你的目的是確保設計工作正常並能持續改進。
  • 不要懷念今天的成就,要永遠向前看。作為一個設計師,你需要預測並思考在下一年事情將發生怎樣的變化。
  • 在Facebook,設計存在時間最長的是首頁,從2004年發布,歷時18個月。
  • 例如:全局導航的改版。在數月裡嘗試了無數的想法。甚至在昨天網站的頭部又變了。
  • 相比以往任何時候,我們的工作都遠沒有完成。
  • 對大多數功能都做A/B測試。清晰地定義度量效果的標准並進行測量,但切忌不要讓度量標准來驅動設計。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved