Firefox new UI
本文是翻譯自Stephen Horlander在5/09貼的(Re)designing Firefox
英文不好，中文也很爛，所以建議看原文比較好～
--
現在可以就叫做Firefox
我們在上面花了很多時間～
全心全意投入一個專案是個絕妙的經驗。你無時無刻想著它，不管是早晨、晚餐、準備看電影前、在浴室，甚至睡夢中，以及你該睡覺的時候。
突然間你要放飛它了，因為它終於夠成熟去闖蕩了。這相當令人期待同時也令人緊張。
你永遠不會知道這一路走來做出的決定是否正確。
我想趁這個發行後的激情時刻花點篇幅在這邊回顧一下。
歷史
左邊：Firefox 4, 右邊：Firefox29
所以我們是如何從這樣變成這樣的？
我們在2011年3月發行了 Firefox 4。相較於 Firefox 3 那是個大改變，首先它出現了 Firefox 按鈕，
改頭換面的附加元件管理，移除了狀態列，整合了停止、繼續與重新整理按鈕，還包含了全面的視覺升級，
然而它並非完美，在專案從設計到發行的過程中累積了不少粗造的痕跡。
Firefox 4 是我們轉移到快速發行前的最後一版，六周的周期時間看來很適合反覆雕琢這些眉角。
理念
我開的這個反覆雕琢專案最終變成一個全面性的大改造。
在六月開始整個UX團隊舉辦了Firefox 4發行後第一次的辦公室外會議，議程上寫著「下一步？」整個團隊聚在一個房間內相互激盪新主意與未解決的問題，還有那些在開發 Firefox 4 中遇到的問題。漸漸有個主題浮現在共識之海上 ----> Firefox 最大的特色是自訂化，它必須代表個人化的東西。
這對我們做介面的來說是甚麼意義呢？很多點子被丟出來，然後一個基本原則成形了─>打造我們所能做出最好的核心經驗，並讓使用者去增加或改變那些他們認為影響最大的東西。
新的 Firefox 基本就是打造一個有趣簡易與容易使用的自訂模式，與之搭配的是更有彈性的Firefox 選單。
視覺設定
彎曲, 流線
該場會議也帶來了一些後來稱之為Australis的元素。一開始，先統一些毫不相干的釘選元件到主要視窗中，
修飾一下視覺設計，合併相關與更多的功能，並把分頁列流線化。
對於這個重新設計來說，自訂模式將會是新體驗的核心，而新設計的流線分頁列則是改變了Firefox 的外在印象。
“讓它看起來更快。不～不對！它需要更多的開孔”
Firefox 4 流體力學草圖 — 2010
我們探索了許多新點子，增加一些元素讓 Firefox 感覺更快更流暢，當中確實是有一些想法稍微太超過了。
曲線分頁草圖 — 2011，6月
Trond 的原型在設計會議中由發展而來出來這個有曲線的分頁草圖，馬上就得到所有人的共鳴。
這也包含另一個重要的設計修改，只展現目前頁面的分頁形狀，目的是減少視覺雜訊使目前頁面更被凸顯，並讓您使用分頁列時更容易聚焦。
初期嘗試了機種不同的曲線形狀。一開始是導角太小，後來的又太過圓潤，有的也太短或太高，
最終總算是找到最佳的感覺。
在Windows上嘗試的一些背景分頁設計 — 2011, 10月
後來我們瞭解在有靜態的背景下把背景分頁的形狀去除會簡單許多，Windows 7 的半透明視窗有各式各樣顏色，
而 Windows 8 則是多種顏色的平面，這表示我們需要自己做個靜態背景。
為確保背景分頁具有良好的辨識度，我們做了一些嘗試，一開始我們試做了統一的色塊背景，
但他看起來太重了，我們甚至考慮過保持背景分頁的外框並以其他方式凸顯目前頁面。
最終，我們決定使用一個霧化的背景，位在分頁與視窗之間，把它當作一個介面的三明治，
玻璃是底層，曲線分頁是上層而中間夾著美味的霧面
我們也要確保加上曲度後不會增加寬度而犧牲寶貴的分頁列空間，
我們也移除沒有使用favicons 網站原本預設的空白圖示，用小小的調整來爭取更多的標題空間。
目錄面板與自訂化
重新設計Firefox目錄
少有東西同網路瀏覽器這般複雜又因人而異，絕非一個尺碼就可以適用所有人。
附加元件一直以來讓 Firefox 成為一個可完全自訂化的瀏覽器，然而，組合這些東西體驗一向都不是很好。
但在我們開始對付自訂化之前，我們先來看看Firefox 選單，主要工具列是一些常用的動作的第一啟動層，
而功能表則是次要層，通常是為了一些比較少用的功能，我們希望使用者可以在這些層之間移動項目，
如此他們將可以自己訂做 Firefox 來符合所需。
我們一開始是從網格化一些圖示開始新排版，這個網格系統很好的呈現這些在工具列出現過的圖示，
而且會讓移動它們進出不同層有適當的拖曳力道。
較大的3x3格線加上標籤—Alex Faaborg 製作
我們設計的初版網格比較大，圖示比較小且沒有標籤，很快的就變成三欄式的網格配合上較大的圖示與標籤。
新版的設計可以更清晰的達成目的並避免擁塞感
並非所有Firefox目錄中的項目都會移植到新的版面，我們增加了一些特別的小工具給剪下、複製、貼上與頁面縮放，
對於要使用圖示網格還是傳統的目錄列表，我們進行了許多激烈的辯論，
網格系統有一些缺點，當有很多項目時它不是很容易掃視也無法縮放，
但這回圖示網格因為它更佳的視覺性獲選，它更貼近我們想要的拖曳自訂化，也比較適用於觸控系統。
有些原本Firefox 目錄的項目包含子項所以無法直接簡化成一個動作，
像是開發人員工具、歷史、書籤、幫助與編碼。在旁邊疊上巢狀選項感覺怪怪的。
藉由這個新選單模式希望 Firefox 可以在安裝完即適用大部分使用者，
不過再加上新的自訂模式你可以更全面的把 Firefox 訂製為你要的樣子，
全面客製化！
現在是該來面對 Firefox 老舊的客製化體驗了，從一開始我們的志向就很宏大，
這個測試展現了幾個問題：1) 把附加元件包含近來會相當複雜 2) 我們需要直接展開的目錄項目而不只是一個捷徑，
最終的客製模式
這些試做頁面與原型幫助我們快速得到他人的回饋與想法。其中一個抱怨說當進入不同模式時感覺不明確。
打包上架
我想這個發行後的興奮體驗到此為止了，該回去繼續把Firefox打造得更好摟。
留言