四週Firefox OS手機變平板 – 見證奇蹟的時刻

四週Firefox OS手機變平板 – 見證奇蹟的時刻

一個月前我們在 Computex 2013 發表了 Firefox OS 在平板上的預覽版,吸引了不少人的目光。(如果你還沒看過,本文最後有精華短片。)

雖然只是展示機器,但是當拿在手裡,身為工程師的我們,都會興奮的想讓它變成真的可以動的。


「那麼就來試試看吧!」我們有四週的時間。

現在就把時光倒回去,來看看我們如何用不到一個月的時間,做出可以操作的實機展示版(非成品)。

Week 0 » UX 重新設計版面


首先,我們的 UX 設計師針對平板的畫面大小以及平板不同於手機的使用方式,重新設計版面,包含:圖片大小、解析度、版面配置、佈景主題… 等等,也根據硬體規格,選擇要刪除的功能,以及要新增的功能,把更動範圍預估到是四週內可能完成的。
下面是一張設計師的草稿:針對虛擬鍵盤的按鍵大小、間距重新做了調整,完全參考真實鍵盤的配置(聽說他們精密測量了很久),讓使用者打字更順手。

四週Firefox OS手機變平板 – 見證奇蹟的時刻

Week 1 » Milestone 1 大處著眼


後端工程師們拿到測試裝置後,一鍵把 Firefox OS 系統刷進去,竟然就能動了!不過繪圖速度有點慢,還有其他小細節需要調整。沒關係!還有三週可以慢慢調整。
前端工程師們開了 branch,並根據設計列出 issues、切 milestones,方便討論實作細節、掌握進度、回報新問題。這週我們的工作重點有幾項:

  1. 把不需要的功能移除。
  2. 能夠編譯出符合平板解析度的版本。
  3. 先進行畫面上比較大的版面更動,比如新的解鎖畫面、主畫面上的 App 按鈕變大且分散、設定變成雙欄設計… 等等。

利用 Firefox 的「適應式設計檢視模式」工具 (Responsive Design View) 可以切換到平板的解析度,讓手機版變平板版的工作簡單許多!


同時設計師團隊在製作各個 App 需要更動的設計稿圖(spec),以及繪製高解析度的圖片。
這時候我們的畫面還很陽春,看起來是這樣:


四週Firefox OS手機變平板 – 見證奇蹟的時刻

Week 2 » Milestone 2 小處著手


後端工程師針對繪圖晶片、螢幕觸控感應器、以及其他硬體開始進行調整。這是一個困難的任務,要從 log 中找出一些蛛絲馬跡,調整各種可能的設定,仔細地檢查與測試。
前端工程師針對設計圖稿開始細部的調整,比如圖示大小與位置、系統視窗大小與置中、套用高解析度圖片…等等。當然不免會有一些更動後所造成的問題,也要記得開 issue 把它修掉。

此時我們也拿著這個半成品給設計師團隊看。這時候他們有了驚人之語:

「我覺得少了一點平板的特色… 我們加個數位相框功能吧!」

前端工程師們花了一個早上討論是否能在死線 (deadline) 之前把數位相框的效果做出來,結果發現是可行的!(尖叫歡呼)

設計師團隊當然也不是只出餿主意而已,他們馬上開始設計使用流程和相關設定。同時還要繪製新的開機動畫以及桌面背景。

這時候我們的畫面看起來是這樣:


四週Firefox OS手機變平板 – 見證奇蹟的時刻

Week 3 » Milestone 3 精雕細琢


後端工程師還埋首在 log 與設定調校之間,硬體開始表現得比較正常。

而前端工程師則開始精雕細琢每個 App 的細節,新的數位相框功能則由一位前端工程師開始實作。(沒錯,一人就可以。)新的解鎖畫面完成、令人眼睛為之一亮的俏皮狐狸開機動畫也放上去了。

 

設計師團隊一邊補上所有高解析度圖片、一邊檢視我們的成果,哪怕只是一個像素的誤差,都難逃他們的法眼。

這時候我們的畫面已經變成這樣:


四週Firefox OS手機變平板 – 見證奇蹟的時刻

Week 4 » Milestone 4 大致底定


後端工程師把螢幕觸控調整正常,繪圖速度也達到一般水準。開始針對幾台展示機做一次整體的校準,並檢查是否有異常的機器。

前端工程師把數位相框實作完成、bug 們也通通修掉,其他 App 的細節也陸陸續續修改完畢。影片變成 3D 立體牆、桌面變成美麗大方的狐狸,也把展示時需要的資料放入。
「Firefox OS 平板展示機終於看起來有模有樣了!」

設計師團隊不停地把玩我們的成果,同時也開始錄製展示影片。

死線就在眼前,其實我們還有一些想做的… 但先就這樣吧!

2013年6月3日 » Computex 展示

最後列出平板預覽版與手機版差異的項目,讓大家參考。秉持着 Mozilla 開放原始碼與公開討論的精神,這一切的更動軌跡,有興趣的人不妨到我們的 Github 上面去追尋。

原始碼:https://github.com/gaia-local
Issues (以 Milestone 分):https://github.com/gaia-local/gaia/issues/milestones?state=closed
更動項目:

  • App 版面更動:系統、瀏覽器、主畫面、設定、圖庫、音樂、影片、鍵盤
  • 重新製作 & 新功能:解鎖畫面、數位相框、3D 影片牆
  • 未展示功能:電信通話相關、藍牙、相機