2014年6月24日

(重)設計 Firefox

或許您已經知道,前陣子 Mozilla 發行了某樣東西,過去我們稱呼它為 Australis,現在可以就叫做 Firefox 了。

我們在上面真的花了很多時間。

全心全意投入一個專案,是個絕妙的經驗。你無時無刻想著它,不管是早晨、晚餐、看電影前、在浴室,甚至睡夢中,以及你該睡覺的時候……

它終於足夠成熟到能夠出外闖蕩,你終究得放飛它了。這相當令人興奮、但同時也令人緊張— 你永遠不知道一路上做出的各項決定是否正確。我想趁這個發行後的激情時刻,花點篇幅在這邊回顧一下。

歷史

左邊:Firefox 4, 右邊:Firefox29

所以我們是如何從這樣變成那樣的?

我們在 2011 年 3 月發佈 Firefox 4,那是 Firefox 3 以來的大改變。它加入了 Firefox 按鈕、改頭換面的附加元件管理員、移除了狀態列、整合了停止、繼續與重新整理按鈕,還包含了全面的視覺更新,同時也花了些時間試做與取捨了一些新功能改造原型。

它尚未達到完美,從設計到發行的過程中,累積了不少粗糙的痕跡。

Firefox 4 是我們轉移到快速釋出週期前的最後一個版本。六週的釋出週期看來很適合反覆雕琢這些眉角,所以我開始了一個新專案做這件事。

理念

這個我創造來反覆雕琢的專案,最終迅速轉變成全面的大翻修。

照片中的人:Sinchan Banerjee、Alex FaaborgBrian DilsTrondStephen Horlander(我的腿)、Jennifer BorissFrank YanAlex Limi;拍照的人是 Madhava Enros

六月初時整個 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 選單中的項目都會放入新的版面中。我們增加了特別的小工具—又名「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 編譯

沒有留言:

張貼留言