美國最高法院在 6 月 27 日裁定同性婚姻在全美國都是一項閤法權益。這當然引發許多慶祝活動 就連白宮也透過燈光將整棟建築物染上彩虹色。其中 FB實習生如何72小時打造瘋狂濾鏡「Celebrate Pride」 - 趣味新聞網

發表日期 2015-07-09T15:29:36+08:00

    美國最高法院在 6 月 27 日裁定同性婚姻在全美國都是一項閤法權益。這當然引發許多慶祝活動，就連白宮也透過燈光將整棟建築物染上彩虹色。其中，在網路上能見度最高的慶祝活動之一，應該就是成韆上萬齣現在 Facebook 、套上六色彩虹濾鏡的頭像瞭吧？不少名人，例如 Mark Zuckerberg 也響應瞭這樣的活動，每個人的頭像更新都會伴隨一行預設的字：「 Created with facebook.com/celebratepride 」。

    Facebook 的團隊最近發錶瞭一篇文章，跟大傢分享由兩名實習生做齣來的小工具，在 72 小時內變成真正在 Facebook 上綫的産品，讓用戶可以展現自己對 LGBTQ 社群的支持。這個小産品在周末吸引瞭全球 2,600 萬名使用者更新瞭自己的大頭貼，這些照片一共引發瞭五億次的互動。

    72 小時

    其實，這全都是起始於兩位實習生 Austin Freel 和 Scott Buckfelder 在一場內部 Hackathon 發想齣來的濾鏡工具，設計靈感來自於 Facebook 位於 Menlo Park 園區內的大型彩虹旗，並且運用公司既有的程式代碼做齣迭加在照片之上的彩虹旗濾鏡，結果這個小工具相當受到員工的歡迎，而且大傢很有興趣把它發展成真正的産品，分享給全球用戶。這樣一來，團隊會需要更多成員，例如設計師和産品經理的加入。

    這個項目在一開始就被設定隻要花很短的時間就做齣來，因為當一小群人在周二早上聚在一起討論時發現，如果要趕在周末各種 Pride 活動之前完成，甚至要在周五就做齣來（他們也預料到裁決應該在周末之前就​​會宣布），那麼剩下來的時間其實很少，大約隻有三天。

    簡單，不簡單

    首先，要讓大傢很容易就可以透過這個工具秀齣他們對 LGBTQ 社群的支持，操作必須非常簡單，還要能夠及時體驗效果。

    於是 Celebrate Pride 作成瞭一個網頁，畫麵中央，在彩虹濾鏡底下，載入的就是使用者目前在 Facebook 的頭像照片，讓大傢知道完成後的樣子。底下有一個文字框讓大傢輸入想說的話，上頭的預設文字是：「 Created with facebook.com/celebratepride 」，最後按下那個藍色的按鈕，就大功告成啦！

    當然，那張頭像並不是「真正」的完成品。為瞭使用者體驗，必須很快地上傳到頁麵上，於是團隊先用 CSS 做齣最後的效果，並不是將照片真的套上濾鏡，真的套上濾鏡的步驟要等到使用者按下更新頭像後纔會開始，這樣一來整個預覽過程花費的資源會少很多。

    團隊移除瞭所有多餘的伺服器 processing 和 UI 潤飾，就是為瞭要讓使用者更換大頭照的整個過程可以很簡單、迅速。

    同時，考慮到流量來源的大宗會是行動使用者，團隊利用 Facebook 既有的 web stack 將桌麵和行動上的內容優化。他們先開發桌麵版的，再將程式代碼用到 iOS/Android app ，以及行動版網頁。整個過程大概隻花瞭幾個小時。産品上綫後果然證明瞭團隊的假設正確：大部份用戶都是用行動裝置來為自己的頭像加上彩虹濾鏡。

    拂曉上綫

    Facebook 的員工解釋，通常團隊都是在下午纔釋齣更新版産品，但為瞭要在周五一大早就上綫，他們決定用當天淩晨兩點的 code push 。這套産品上綫的流程是六月初倫敦和台拉維夫的工程團隊做的，事實證明，沒有他們先前的貢獻，「 Celebrate Pride 」根本無法上綫。

    囧，濾鏡套用的失敗率有點高

    産品上綫之後還沒結束，團隊持續監控産品的錶現，然而很快地團隊就發現瞭一個問題：使用者大頭照套用濾鏡的失敗率很高！下圖藍色綫圖代錶有多少人按下「更新頭像」按鈕，紅色綫圖代錶的是「成功更新」，我們可以看齣藍色和紅色的綫圖有明顯的差距，而且逐漸擴大。

    團隊深入調查後發現，原來是因為大圖（最大可到 2048X2048 ）被一個時間復雜度是 O(n^2) 的函數處理時會齣問題，這樣的大圖會用到高達 400 萬次的循環去處理每一個像素，使得有些使用者會遭遇「逾時」（time out）的狀況。

    經過一番修正之後，團隊於週五下午再做瞭一次 code push ，我們從綫圖可以看到，修正版推齣之後，紅綫很快地就接近藍綫瞭。

    在同一次 code push ，團隊也修正瞭「 Celebrate Pride 」在 News Feed 上的顯示方式，首先他們加入瞭 Open Graph headers ：

    其次是調整 facebook.com/celebratepride 的位置，讓這段文字可以跟人們自己寫的文字排在同一行，讓大傢比較會注意到要去哪裏使用這個濾鏡。根據團隊的描述，這兩項改變大大地加速瞭産品的成長。

    Overall, this project was a great success that touched many lives. We are proud that with the support of a small team, two interns were able to turn a hackathon project into a product used by millions of people within 72 hours.

    整體而言，這個項目非常成功，感動瞭許多生命。我們對於一個這麼小的團隊和兩位實習生便能將一個誕生自 Hackathon 的項目變成一個在 72 小時內讓全球數韆萬人使用的産品，感到非常驕傲。

    快、快、快

    從 Celebrate Pride 這個産品，我們可以看齣來 Facebook 這樣充滿駭客文化的模式其實一直都沒變，利用短時間、強調速度的做法一直是這傢公司的精神，過去更曾齣現在 12 天內做齣一款嚮 Snapchat 「緻敬」的 app 「 Poke 」––當時他們必須趕在 App Store 停止接受 app 送審前做齣來，因為聖誕節快到瞭，而且就連 Mark Zuckerberg 也跳下來寫程序。

    至於 Austin Freel 和 Scott Buckfelder ，他們的點子因為 Facebook 的緣故，在短短的時間內接觸到全球數韆萬人，想必會成為難忘的經驗吧？

分享鏈接