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

早期版本(v1 ~ v3)

早期版本：Phoenix (2002, 09)

該版本名稱一直保留到 2003 年 4 月 ，后來因?yàn)榕c BIOS 制造商Phoenix 的商標(biāo)糾紛而更改。 在 Firefox 早期版本歷史中可以查看更多細(xì)節(jié)。

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

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

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

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

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

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

該版本最大的改動(dòng)是引入了左上角的“應(yīng)用按鈕”，該按鈕把瀏覽器的功能選項(xiàng)都收進(jìn)去，通過子菜單進(jìn)行選擇，使界面變得簡(jiǎn)潔美觀。

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

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

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

Australis (v29, 2014.04)

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

”柔軟“特性，從設(shè)計(jì)草圖到成品都是柔和的流線型：

支持自定義拖放 UI 布局：

引入動(dòng)畫效果，如添加書簽

噩夢(mèng)級(jí)的”彈出式設(shè)置 UI“：

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

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

Photon (v57, 2017.11)

Photon 是一個(gè)廣受好評(píng)的 UI 設(shè)計(jì)體系，一直使用到 2021 年 6 月。

該版本對(duì)于 UI 視覺進(jìn)行了大量的重新設(shè)計(jì)，比如選項(xiàng)卡的形狀改為直角，圖標(biāo)從 PNG 更改為基于 SVG。

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

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

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

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

• 組件：基于列表的面板、頁面操作、庫菜單
• 動(dòng)畫：為按鈕、選項(xiàng)卡、面板等的操作添加大量動(dòng)畫。
• 視覺重新設(shè)計(jì)：標(biāo)簽、圖標(biāo)、密度、形狀等。
• 性能：改進(jìn)初始化、同步回流等性能。

Proton (v89, 2021.06)

最新版本的 UI ，所有功能菜單都獲得了對(duì)應(yīng)的樣式設(shè)計(jì)：

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

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

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

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

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

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

本文轉(zhuǎn)自O(shè)SCHINA

本文標(biāo)題：Firefox 的 UI 進(jìn)化史：從 2002 到 2021

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