商周

啟動成功關鍵,隨時掌握商周.com最新資訊

提供第一手新聞解析、財經趨勢、專屬活動

已加入收藏
已取消收藏
帳號頭像 帳號選單下拉箭頭
/
熱搜內容
現正閱讀
Celebrate Pride》讓全球數億人瘋狂的彩虹頭貼,原來全靠這兩個臉書實習生開發出來的!
畫重點
段落筆記
新增筆記
「請稍等」英文別直接中翻英說please wait a minute!一次掌握,常用的電話對談英文
0
/500
不公開分類 公開分類
儲存
至頂箭頭

財經 | 產業動態

Celebrate Pride》讓全球數億人瘋狂的彩虹頭貼,原來全靠這兩個臉書實習生開發出來的!

撰文者:Hank

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

廣告

Facebook 的團隊最近發表了一篇文章,跟大家分享他們是如何將這個原本誕生自內部駭客松、由兩名實習生做出來的小工具,在 72 小時內變成真正在 Facebook 上線的產品,讓使用者可以用來展現自己對 LGBTQ 社群的支持。這個小產品在週末吸引了全球 2,600 萬名使用者更新了自己的大頭貼,這些照片一共引發了五億次的互動。

72 小時

其實,這全都是起始於兩位實習生 Austin Freel 和 Scott Buckfelder 在一場內部駭客松發想出來的濾鏡工具,設計靈感來自於 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. 整體而言,這個專案非常成功,感動了許多生命。我們對於一個這麼小的團隊和兩位實習生便能將一個誕生自駭客松的專案變成一個在 72 小時內讓全球數千萬人使用的產品,感到非常驕傲。

快、快、快

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

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

本文獲「Inside」授權轉載,原文在此

作者簡介_Inside

Inside是台灣科技媒體領導品牌,成立於2009年11月底,係由一群熱愛網路的人所成立的共筆部落格。我們專注於觀察創新、科技、新媒體與網路的趨勢發展,報導新創公司、創業家、網站、行動平台、社群媒體、行銷與數位內容。

Inside硬塞的網路趨勢觀察網站首頁

「Inside硬塞的網路趨勢觀察」專欄文章列表

下滑箭頭 下滑載入更多報導 下滑箭頭
瘋狂 彩虹 全球 頭貼
Inside 硬塞的網路趨勢觀察
Inside 硬塞的網路趨勢觀察
Inside
展開箭頭

Inside是台灣科技媒體領導品牌,成立於2009年11月底,係由一群熱愛網路的人所成立的共筆部落格。我們專注於觀察創新、科技、新媒體與網路的趨勢發展,報導新創公司、創業家、網站、行動平台、社群媒體、行銷與數位內容。

廣告
留言討論