Firefox 57 最全面的設計通信??

隨著即將到來的 57 版本 Photon 主題的上線，Mozilla 上線了一個 Photon Design System 的網站，和 iOS 的 HIG 與 Material Design 一樣。對 Firefox 來說將來設計新功能都會遵循，對用戶來說，開發者可以根據這套規範設計出更加能夠融入 Firefox 的擴展，或者如果想重新編譯 Firefox 版本，設計上有哪些可以參考等等。目前這套標準還待完善，我簡單選出一些對用戶來說變化比較大的介紹。

有關 Photon 主題的詳細介紹可參考：代號 Photon，一些關於 Firefox 界面的傳聞匯總

Photon 的設計原則：

這裡列舉了六條原則，每條原則分別用了 emoji 代表（不得不說近些年 emoji 真是火啊）這六條原則是：

1. ?? 普適的
2. ?? 友好的
3. ?? 有意識的
4. ?? 快速的
5. ?? 可支持的
6. ?? 異想天開的

這些原則表示，Firefox 產品應該能讓任何人使用，從新用戶（操作簡單的控制項，注重使用過程中的幫助/激勵），到經驗豐富的 Mozillians（能夠定製/控制整個瀏覽器體驗）。產品開放和包容，Firefox 能夠理解用戶，並提供有效的工具來保護上網安全，同時獲得更好地瀏覽。最後添加了些許創造性元素。

設計規模

這裡談到設計語言對 Firefox 產品或功能的重要性，以及在設計語言有衝突時是否遵循平台慣例。

提倡「重複使用」

如果在構建新功能時可以使用之前已有的框架，則最好不要重新構建，這裡可以理解為「改進」優於「改良」，舉個例子：之前曾用到一個擴展，這個擴展的功能對書籤結構進行了改變，但它在地址欄新建了一個書籤按鈕，也就是說安裝擴展後，工具欄會出現兩個書籤按鈕，而原來的書籤按鈕仍會打開默認的書籤。這會讓一部分用戶感到困惑，這裡提倡的就是儘可能的對原有功能進行改變。

先確定更高的可見性的內容

預期可見性越高，符合 Photon 設計就越重要。如果預期的可見性比較有限，則完全匹配的優先順序較低。可以先使用平台組件，直到有時間更好地完善。

舉個例子：Android 上添加書籤的操作，第一步是點擊「星號」圖標。 最後一步是用戶在保存前更改書籤名稱，位置和關鍵字。

對於點擊「星號」圖標（具有很高的可見性）的第一步，這項操作的各個方面（圖標、點按效果等）都需要符合 Photon Design System。 但對於最後的步驟（可見性較低，用戶不一定能接觸到），可以先使用 Android 系統對話框（如上圖所示），因為它實現起來更容易，並且與 Android 平台保持一致。

平衡 Firefox 風格和平台慣例

做平台適應性（意為更符合平台原有設計）太多和太少都會讓用戶感覺操作不便。

這張圖縱坐標為「用戶是否熟悉操作」，橫坐標為「更符合 Firefox 還是平台的設計」，區域 1 可用性較差，區域 2 是比較平衡的點（Sweet Spot），平台設計過多則會造成區域 3 這樣用戶難以感受到產品風格，最後區域 4 完全無法體現產品品牌。

使用 Firefox 的設計風格，視覺外觀以及色調，並遵循平台操作規範。這樣的原則將使產品或功能讓既能夠讓新用戶熟悉，又能體現 Firefox 的風格。在使用平台設計元素方面，比較推薦的是使用原平台的字體，UI 模式（比如 Windows 和 macOS 三大金剛鍵左右的區分），顏色搭配上（Windows 的純色，macOS / iOS 的模糊效果）體現。

而一些原有平台不常見的 UI 元素，則以 Firefox 的設計體現，例如「漢堡菜單」，它並不算是平台的原生元素，但同時又在其他平台上有所體現（PC，Android，iOS 都使用了這個 UI 元素），而且與其他平台的設計也沒有衝突，那麼這時我們最好使用 Firefox 的設計。

相關平台的設計參考：

• Platform Guideline Android：Material Design
• iOS：iOS Human Interface Guidelines
• Linux：Ubuntu App Design Guides. And others depending on distribution
• macOS：macOS Human Interface Guidelines
• Windows：Windows Desktop Applications Design

字體和元素留空

網格基於4像素的倍數，用來控制每個組件的比例，平衡和垂直對齊。

字體上 Firefox 各平台使用平台本身的標準字體：

• Android：RobotoNoto for all languages not covered by Roboto n
• iOS, macOS：San Francisco
• Linux：Ubuntu. Fallback to distribution system font if not available n
• Web：Fira Sans
• Windows：Segoe UI

其他則用 Open Sans 作為補充，Open Sans 是非常全面的一個字符集，這裡吐槽一下新的 MDN 設計就是因為全面採用了 Zilla 字體沒有設置 fallback 導致東亞語系的顯示效果非常差……

內容和選項字型大小做了要求，可以實現天然分隔：

Error 頁面：

內建菜單：

選項頁面：

注意部分字體大小的變化。

強調風格：

當需要從常規內容中突出一部分內容時，使用強調風格。（又是 emoji）

顏色：

Firefox 給自己的定位是：大膽，充滿活力和有吸引力。在視覺顏色上選擇了比較跳躍的色彩，其實太過鮮明的顏色對比會干擾網頁閱讀，Firefox 也提供了不同對比度等級，用於區分不同使用場合。

藍色是主色之一，Firefox 使用藍色作為突出顯示按鈕，鏈接和活動狀態的強調。

圖標

Firefox 對自己圖標的定位是信息豐富，有趣且友好。

目前默認的圖標庫已經給出來了：Firefox Icons，擴展作者也可以重複利用現有圖標。其餘關於柵格設計和 Android 以及 iOS 相差不大。

圖標顏色需要根據主題進行區分，詳細參考顏色的說明：

插圖

（是的規範里還有這種東西……）

Firefox 插圖應該是平易近人，可支持說明文本和異想天開的。

使用場景：

插圖是視覺和情感上強大的工具。因此更應該謹慎使用，並仔細區分使用情況。如果插圖僅作為裝飾元素，可能會使用戶放棄文字上的交互分散他們的注意力。

插圖應該用來鼓勵那些（因為操作失敗）沮喪或失落的用戶。如果是異常操作，用戶處於某個危險的狀態（賬號丟失，安全頁面），則請勿使用圖示。

錯誤頁面：

使用插圖來介紹功能：

動效

對動畫曲線的要求。

這裡講的比較常規，例如控制在150毫秒至250毫秒之間，感知性能優於技術基準，對用戶有導向性等等，此外建議使用曲線速率而不是剛性直線，這樣看起來更自然。曲線變化可以參考：cubic-bezier.com

文字說明：

「更多」 vs 「了解更多」

使用「更多」來指示展開的文本區域，使用「了解更多」來指向另一個界面或網頁的鏈接。

「按鈕」 vs 「鏈接」

使用「帶超鏈接的文本」指向到另一個界面或網頁的鏈接，使用「按鈕」表示刷新當前屏幕或將信息發送到應用程序的用戶操作，例如提交，更新首選項等。

觸摸屏手勢

在設計 Android 應用時，優先使用 Android 術語：touch, swipe, drag, pinch in, pinch out

在設計 iOS 應用時，優先使用 Apple 術語：tap, swipe, drag, pinch

分別在這兩個設計文檔中查看。

人稱說明

優先使用第二人稱（你）來對 Firefox 用戶進行說明，避免使用第一人稱（我），因為它可能會使用戶對「當前誰在處理操作」產生混淆。這一用法加強了「Firefox 是為你服務」的信息。n

PC 版對文字的大小寫的要求：

按鈕標題單詞的首字母大寫：

規定了一些場景下句子和鏈接是否加點號：n

Android 與 iOS 遵循原生規範：

Android：

iOS：

此外還對逗號，破折號，省略號等其他符號的使用場景進行了說明。

以上就是 Photon 主題在 11 月即將發布的 Firefox 57 和之後版本在各大平台的設計說明，可以看出 Firefox 在很多地方都變得更加「輕盈」，另外在一些位置上採用了之前少有的趣味性元素，例如插圖，emoji 等等。總體來說 Mozilla 可能希望通過這種方式在用戶引導時更易於讓新用戶理解，喜歡上 Firefox，這種設計是否能在使用效率上得到更好的體現我們可以期待一下。

此外 Firefox Nightly 56 版本已默認開啟了 Photon 主題的語言，有興趣的同學可以下載嘗鮮下。

參考資料：Photon Design System