致力于改進 Firefox UI 的 black7375 總結(jié)了 Firefox 瀏覽器的 UI 進化史，記錄了每個 UI 版本的特性和存在的一些問題。從該進化歷程中，我們也可以一窺互聯(lián)網(wǎng)的設計美學發(fā)展史。

早期版本(v1 ~ v3)

早期版本：Phoenix (2002, 09)

該版本名稱一直保留到 2003 年 4 月 ，后來因為與 BIOS 制造商Phoenix 的商標糾紛而更改。 在 Firefox 早期版本歷史中可以查看更多細節(jié)。

該版本以碩大的橙色按鈕為主題...

Firefox v1(2004.11)、v2(2006.10)、 v3(2008.6)

早期版本 UI 特性 ：每個圖標只做一件事，功能清晰，而且每個圖標都具有其特有的顏色。

早期版本 UI 缺點：圖標大小和紋理不一致、未能與操作系統(tǒng)的 UI 融合，菜單欄很復雜而且占用大量空間。

經(jīng)典版本(v4，2011.3)

在啟動大規(guī)模 UI 重構(gòu)后，F(xiàn)irefox 4.0 版本發(fā)布了。它是壽命最長的 UI，通常稱為Classic theme，經(jīng)典主題。

該版本最大的改動是引入了左上角的“應用按鈕”，該按鈕把瀏覽器的功能選項都收進去，通過子菜單進行選擇，使界面變得簡潔美觀。

此外，還應用按鈕在不同版本的 Firefox 上的顏色也各異，分別是普通版本(橙色)、隱私模式(紫色)、nightly 版本(藍色)：

該版本的 UI 特性總結(jié)：能與系統(tǒng) UI 交互(比如支持 Win7 的航空玻璃質(zhì)感)，菜單欄縮減至只剩一行，看起來更簡潔。

不足之處是新的界面和 UI 變化太大，新的功能按鈕把大部分功能標簽都藏起來了，讓用戶有種陌生感，一時間難以適應(怎么感覺在變相地夸)

Australis (v29, 2014.04)

該版本最大的特性是”柔軟“的設計理念，首次引入了一些動畫效果、支持拖放 UI 進行自定義布局、以及飽受詬病的彈出式設置 UI 。

”柔軟“特性，從設計草圖到成品都是柔和的流線型：

支持自定義拖放 UI 布局：

引入動畫效果，如添加書簽

噩夢級的”彈出式設置 UI“：

被瘋狂吐槽后，換成了下面的單頁面分類設置界面：

該 Australis 版本的原意是設計為 PC/移動/平板...等多端通用的 UI ，讓用戶擁有一致的 Firefox 視覺體驗，然而該目標明顯失敗了，這版本的 UI 被用戶吐槽”在哪看起來都像平板電腦“。

Photon (v57, 2017.11)

Photon 是一個廣受好評的 UI 設計體系，一直使用到 2021 年 6 月。

該版本對于 UI 視覺進行了大量的重新設計，比如選項卡的形狀改為直角，圖標從 PNG 更改為基于 SVG。

功能菜單從網(wǎng)格式面板更改為現(xiàn)代化的列表格式菜單，下圖為 Windows 10 和 Mac 上的列表面板：

Photon 設計充分利用了帶有 SVG 幻燈片技術(shù)的合成器，讓動畫效果看起來更多維：

瀏覽器的標題欄支持自定義的高亮顏色，同時也支持跟隨操作系統(tǒng)的顏色：

總結(jié)一下該版本特性：

• 組件：基于列表的面板、頁面操作、庫菜單
• 動畫：為按鈕、選項卡、面板等的操作添加大量動畫。
• 視覺重新設計：標簽、圖標、密度、形狀等。
• 性能：改進初始化、同步回流等性能。

Proton (v89, 2021.06)

最新版本的 UI ，所有功能菜單都獲得了對應的樣式設計：

上下文菜單分離開來，獲得了獨立區(qū)域

更一致的色調(diào)、更精細的圖標，以及在不同顏色下的精彩呈現(xiàn)：

整體的動畫變得非常整潔，且富有指示性，比如刷新和下載動畫：

另一個重要的變化是引入了骨架屏，使啟動感覺更快(僅限 Windows):

然而該版本也有一些問題，比如過寬的填充、圖標太小導致難以精準點擊，還刪除了很多常用的圖標(如地址欄中的頁面操作菜單)和一些保守好評的動畫效果(如添加書簽)。

總而言之，F(xiàn)irefox 每隔 3-4 就會出一版新的 UI ，而且每次都是大改動。而 Chrome 和首發(fā)時的模樣沒啥區(qū)別...

本文轉(zhuǎn)自OSCHINA

本文標題：Firefox 的 UI 進化史：從 2002 到 2021

本文地址：https://www.oschina.net/news/188715/firefox-ui-history