或許您已經知道，前陣子 Mozilla 發行了某樣東西，過去我們稱呼它為 Australis，現在可以就叫做 Firefox 了。
我們在上面真的花了很多時間。
全心全意投入一個專案，是個絕妙的經驗。你無時無刻想著它，不管是早晨、晚餐、看電影前、在浴室，甚至睡夢中，以及你該睡覺的時候……
它終於足夠成熟到能夠出外闖蕩，你終究得放飛它了。這相當令人興奮、但同時也令人緊張— 你永遠不知道一路上做出的各項決定是否正確。我想趁這個發行後的激情時刻，花點篇幅在這邊回顧一下。
歷史
左邊：Firefox 4, 右邊：Firefox29
我們在 2011 年 3 月發佈 Firefox 4，那是 Firefox 3 以來的大改變。它加入了 Firefox 按鈕、改頭換面的附加元件管理員、移除了狀態列、整合了停止、繼續與重新整理按鈕，還包含了全面的視覺更新，同時也花了些時間試做與取捨了一些新功能與改造原型。
它尚未達到完美，從設計到發行的過程中，累積了不少粗糙的痕跡。
Firefox 4 是我們轉移到快速釋出週期前的最後一個版本。六週的釋出週期看來很適合反覆雕琢這些眉角，所以我開始了一個新專案做這件事。
理念
這個我創造來反覆雕琢的專案，最終迅速轉變成全面的大翻修。
六月初時整個 UX 團隊舉辦了 Firefox 4 發行後的首次辦公室外會議，議程上顯著的大標題是「下一步呢？」整個團隊齊聚在一個房間，相互激盪新主意，討論開發 Firefox 4 時所遇到，尚未解決的問題。
漸漸的有個主題浮現在共識之中—Firefox 的最大特色是自訂化，你應該要能夠感受它屬於你個人。
對我們剛釋出的介面，這代表什麼意義呢？很多點子被丟出來，一個基本原則成形 —打造我們所能做出最好的核心經驗，並讓使用者去加上或改變那些對他們最重要的東西。
新 Firefox 的基礎，就是打造一個簡單有趣的自訂模式，搭配上更有彈性的 Firefox 選單。
視覺設定
狐線、空氣動力
該場會議也提出了一些後來名為「Australis」的元素。主要是：統合主視窗中各式各樣的書籤元件、重新設計視覺、整合相關聯與多重的功能、並流線化分頁列。
對於這個重設計來說，自訂模式將會是新體驗的核心，而重設計的流線流線分頁列則改變整個 Firefox 的外在印象。
我們探索了許多增加元素讓 Firefox 感覺更快更流暢的新點子，當中確實有一些過於大膽了。
在設計會議中，受 Trond 的原型啟發，而發展出來的這個帶有曲線的分頁草圖，馬上就得到所有人的共鳴。
它也包含了另一個重要的設計調整—只描繪前景分頁的形狀，減少視覺雜訊、使前景頁面更為凸顯，並讓您更容易聚焦在分頁列上。
初期嘗試的數種不同曲線形狀。一開始的角度太小、後來的又太過圓潤；有的太矮、有的又太高，最終總算是找到最佳的感覺。
後來我們瞭解，在有靜態背景的環境中，去除背景分頁的形狀會容易許多。Windows 7 的半透明視窗有著各式各樣的明度，而 Windows 8 則有各種顏色的扁平視窗，這表示我們需要自己做個靜態的背景。
為確保背景分頁具有良好的辨識度，我們做了一些不同嘗試。一開始我們試著做出融合背景的區塊，但他看起來太重了。我們甚至考慮過保持背景分頁的外框，並以其他方式凸顯目前的分頁。
最終我們決定使用一個背景「迷霧」，放置在分頁與視窗前景之間。可以把它想成是介面上的三明治—底層的玻璃、上層的曲線分頁、中間夾著美味的霧面。
我們也試著確保加上曲度後，不會增加分頁的寬度，而犧牲分頁列上寶貴的「地皮」。在沒有 favicons 的網站上，我們也移除原本預設的空白圖示，用小小的調整來爭取更多的標題空間。
選單面板與自訂化
重新設計 Firefox 選單
網路瀏覽器這般複雜又因人而異的東西，絕非用一個尺碼就得以適用所有人。附加元件一直以來都讓 Firefox 成為可徹底自訂的瀏覽器。然而，整理這些元件體驗，一向都不是很好。
但在我們開始對付自訂化行為之前，我們先重新想想 Firefox 選單。
主工具列是存取常用功能的主要介面，選單則是取用那些較少用功能的次要介面。我們希望使用者可以在這些介面之間移動項目，如此他們就可以自己定製 Firefox 以符合所需。
我們從「圖示網格」的點子開始設計新版面。網格系統能好好收納那些在工具列上的圖示， 而且會讓移出移入呈現一致性的感覺。
較大的 3x3 網格加上標籤—Alex Faaborg 製
最初我們設計的網格比較寬、圖示較小且沒有標籤，很快的就變成三欄式網格，配合上較大的圖示與標籤。在維持同樣的效果下，更為清晰且容易辨識。
並非所有 Firefox 選單中的項目都會放入新的版面中。我們增加了特別的小工具—又名「Wide Widgets」—來提供剪下 / 複製 / 貼上與頁面縮放控制。我們也增加了底部那些無法被客製化掉的項目，避免使用者陷入沒得恢復的爆炸版面中。
對於使用圖示網格還是傳統的目錄清單，我們進行了許多激烈的爭辯。網格系統有一些缺點：當有很多項目時，它不很容易掃視、也無法縮放，但這回圖示網格因為更佳的視覺性而獲選，它更貼近我們想要的拖曳自訂化，也有對於觸控系統更友善的效果。
有些 Firefox 選單中的項目，包含無法直接簡化成單一動作的子目錄，例如網頁開發工具、歷史、書籤、說明與編碼，直接在旁邊跳出子選單感覺怪怪的，對此我們有幾個點子：行內展開的選單、抽屜（可動原型，點擊 History 看看）與面板內導覽列。
我們選擇了一個叫 Subviews（可動原型） 的方案，簡單的說就是會滑入覆蓋主選單的列表。點選滑入選單之外的任何區域，都會回到主選單—關閉整個選單並重開。
希望這個新的選單介面，能讓 Firefox 出廠即適用於大部分使用者，再加上新的自訂模式，你可以真正把 Firefox 訂製成你要的樣子。如果您有興趣更深入了解如何可以怎樣的，請看看 Zhenshuo Fang 的這篇好文章。
全面客製化！
現在該來面對 Firefox 老舊的客製化體驗了，從一開始我們的志向就很宏大，希望可以整合自訂工具列、佈景主題與附加元件到同一個介面中。這個點子帶來了一個早期原型可以讓我們試試感覺如何（他的確稍微能動，提示：點工具按鈕→加號按鈕）。
這個測試介面展現了幾個問題：1) 納入附加元件會相當複雜 2) 我們需要可以直接呈現的目錄選單，而非一個示意的介面。這進展成為一些其他的設計稿，包含更平面化的介面並精簡掉附加元件。後來我做了第二份設計稿，去掉佈景主題選擇介面，更接近後來發行的版本。然後 Blake Winton 把他變成一個很棒的可動原型。
這些展示與原型，幫助我們快速得到他人的回饋。我們所聽到的其中一個抱怨是：進入不同模式時感覺不明顯。 我們試做了很多樣版嘗試不同點子，用視覺回饋讓人們了解已經進入可以重新排列這些東西的狀態。最終我們定下了一個藍圖式樣，並在 Madhava 的建議下增加一些動畫與間隙。
打包上架
感謝所有投注時間與精力於此的人。如果你想要了解更多 Firefox 29 的製作人員與過程，Madhava 寫了一篇不錯的概要。
這是從 Firefox 4 到 Firefox 29 的介面演進過程：
小心：全都是大圖片，在慢一點的網路中可能需要一些時間載入。
我想我的「後發行興奮感」也退的差不多了，該回去繼續把 Firefox 打造得更好嘍。
原文 / (Re)Designing Firefox | Mozilla UX、同時刊登於此
作者 / Stephen Horlander
授權 / 創用 CC 姓名標示-相同方式分享-3.0
φ Mika、Irvin 編譯
沒有留言:
張貼留言