[Перевод] История интерфейса Firefox от самых первых версий

История UI Firefox важна для меня потому что мой личный проект компенсирует недостатки его UI Proton и наследует сильные стороны разных UI Firefox.

Кроме того, это один из способов избежать раскола сообщества, ведь каждый раз при серьёзных изменениях в UI возникало множество форков.

Первые версии (v1 ~ v3)


-ajiom5ap-5iffmfkwmuu3wtk1o.png


Phoenix (сентябрь 2002 года) возрождается из пепла Netscape [см. историю первых версий Firefox].

Выделяются крупные оранжевые кнопки. Историю Netscape см. в статье A Visual Browser History, from Netscape 4 to Mozilla Firefox.

_6ov6h9vzqj_mp0xmll6kqwrude.png


Firefox v1 (ноябрь 2004 года), v2 (октябрь 2006 года), v3 (июнь 2008 года) [The Importance and Problems of Autoupdate].

Версии примерно с v1 по v3 имеют классический UI, который вы помните, если работали с ним в начале 2000-х. В значках есть цвета и не реализована абстракция.
Похожая ситуация была и с Internet Explorer 6.

iqzaup8_tw8momkuvhpgbirf4ko.png


Internet Explorer 6(2001, 08) [Internet Explorer 6… Despite how bad this browser was, its layout gives me a nostalgic feeling of surfing the web at a young age…]

Особенности


  • Понятно, что каждый значок выполняет только одну задачу.
  • Уникальный цвет для каждого значка.


Ограничения.


  • Не связан с UI операционной системы.
  • Высота UI.
  • Противоречит современной философии интерфейсов, поскольку отсутствуют абстракции.
  • Несогласованные размеры и текстуры значков.


Объяснение


Проблемы интерфейса версии 3.0 подробно задокументированы в 3.0 Windows Default Theme Issues.

z6afq0s5owqawaddmqg4rnlfzj4.png


jkxrrrnjay6vbjq22tp18w5vct0.png


2zsudaqu2kzqe-k0o-d4kk5kv0i.png


Internet Explorer 7, Chrome, Firefox v3.5 [Википедия]

Как видите

  • Панель меню занимает место.
  • Интерфейс несовместим с Aero Glass.
  • Сложная структура панелей.


Подобные проблемы были распространены.

dmni8uln1wovirmcmthfahyoz58.png


Сравнение высот UI

canlg1mcynytzptr0lwd_gdypic.png


Сложная структура

Соответствующий форк


UI того времени сохранился в форке SeaMonkey, который был создан, чтобы сохранить такие функции пакета Mozilla, как почта, новостные группы и потоки, а также IRC-чат.

mbkhk_hh0al7_pkbtvfs74feqpk.png


SeaMonkey

Классическая версия (v4, март 2011 года)


После запуска крупномасштабного проекта по реконструкции UI была выпущена версия 4.0. Это самый долго живший UI, любимый многими. Обычно его называют классической темой.

kmfl-cogj3nqh61wuuxh10aw8vi.png


Firefox Classic

Особенности


  • Оранжевая кнопка приложения в левом верхнем углу как символ.
  • Более спокойные интонации.
  • Поддержка Win7 Aero Glass.
  • Остановка/перезагрузка/переход соединены в одну кнопку.
  • Вкладки перенесены наверх.


Ограничения.


  • Незнакомый интерфейс с крупномасштабными изменениями.


Объяснение


Самый вдохновляющий элемент Classic UI — дизайн кнопки приложения. В панель меню включили все меню, которые сложно включить в базовый UI, занимают существенное пространство и до которых неудобно добираться через подменю.

В отличие от ситуации в Safari и Chrome, где все пункты меню разделены на отдельные страницы или кнопки инструментов, они помещены в кнопку приложения, по возможности сохраняя конфигурацию имеющейся панели меню и компенсируя недостатки.


udrbsqu2wdtcyggk18a5v70yjt0.png


Меню приложения, отличная композиция, которая без проблем сохранилась до 2021 года. [How to Display the Menu Bar in Firefox]

Кроме того, в обычном Firefox (оранжевый), приватном режиме (фиолетовый) и nightly (синий) цвет менялся в зависимости от состояния программы или канала распространения и служил для идентификации, поэтому мы можем считать, что это было хорошо для брендинга.

trcporjm2mkwgqwypo2n3u79ply.png


Фиолетовое меню приложения в приватном режиме. [How to turn on private browsing in Mozilla Firefox?]

e2ptehezrkzmq9shnthjtxzzjeg.png


Синее меню приложения для канала Nightly [Modifiy Australis UI #4 — icons + text mode]

Такой интерфейс очень символический, но он хорошо спроектирован, поэтому если в будущем появится userChromeJS, то мне бы хотелось создать опцию для восстановления кнопки меню приложения (без панели меню — панель меню — кнопка меню).

Однако я планирую воспользоваться некоторыми из преимуществ современного UI и спроектировать его так, чтобы основная часть места использовалась с огромным раскрывающимся списком, а также максимизировать скорость реакции/использование пространства меню аналогично меню Amazon.

gvjayoit6ptqxxy8bwg7potj1so.png


Огромное раскрывающееся меню Amazon [Breaking down Amazon«s mega dropdown]

Вторым по важности изменением является появление абстракций UI и систематических взаимодействий.

Кнопки Stop / Go / Reload в панели URL для упрощения объединены в одну, которая превращается в Go при вводе адреса, Stop при загрузке и в Reload после загрузки. Кроме того, при наведении курсора или нажатии изменили взаимодействие, сделав его систематическим.

ienauzfazecv8nxnm_hbgimr2vu.png


Каждая строка имеет обычное состояние, состояние при наведении и состояние при нажатии.

Кроме того, мы видим, что Mozilla сильно потрудилась над тем, чтобы создать UI, оптимизированный под Windows, Linux и Mac.

Соответствующий форк


pfxn6atuwbim35eth0hjkupvq3y.png


Pale Moon

Хорошо сохраняет Classic UI форк Pale Moon.

Australis (v29, апрель 2014 года)


По сравнению с Proton UI Australis имел много поклонников и противников. В нём много усилий было вложено в простоту.

Australis


Australis в Linux, Mac, Windows [Firefox and Flux: A New, Beautiful Browser is Coming]

Особенности


  • Изогнутые вкладки.
  • Кастомизация UI при помощи Drag & Drop.
  • Всплывающие окна UI параметров заменены на формат вкладок.
  • Анимация.


Ограничения


  • Панельный UI выглядит как планшет.
  • Убрана строка состояния.


Объяснение


Разработчики Firefox хотели, чтобы UI казался быстрым и плавным.

Australis oncept sketch


Скетч концепции [(Re)Designing Firefox]

На текущий момент UI с закруглениями является трендом (Apple Bigsur, Microsoft Fluent, Google Material You), поэтому решение сделать его плавным кажется хорошим.

Soft texture


Curved Tab


Плавный, гладкий UI [Firefox User-Experience Toronto Workweek]

Общая схема меню сделана на основе тепловых карт. Вероятно, сложно сохранить баланс дизайна из-за немного отличающихся размеров, но его тщательно проектировали, чтобы минимизировать побочные эффекты.

image


image


image


Есть API для задания цвета и фона основного меню, упрощающий кастомизацию.

Light weight theme


Светлая тема, которая может содержать фоновое изображение

Настраиваемый UI, позволяющий свободно перемещать функции на панелях и меню перетаскиванием — огромное преимущество по сравнению с другими браузерами, которые по-прежнему сложно настраивать под себя.

Drag & Drop customizing UI


UI, настраиваемый через Drag & Drop

Также мы видим панельный UI (всплывающее окно гамбургерного меню); у него тоже было много как поклонников, так и противников. Я слышал, что многие люди говорят, что это похоже на планшетную схему, но на самом деле разработчики Firefox приняли амбициозное решение отойти от PC (Windows, Linux, Mac) и обеспечить единство дизайна с мобильными платформами (телефонами и планшетами на Android, Windows 8 Metro UI, Firefox OS).

В конечном итоге этой цели достичь не удалось, а мнения пользователей сильно разделились.

Multi platform plan


Multi platform UI


Стремление к многоплатформенности

Ещё одно важное изменение коснулось UI параметров. В предыдущих версиях Firefox, когда экран параметров был сконфигурирован в виде всплывающих окон и добавлялись новые функции, происходил вот такой кошмар:

Settings popup UI


UI всплывающих окон параметров [Firefox«s Redesigned Preferences Feel More like the Web]

Однако после создания UI на основе содержимого, который управляется вкладками

Contents based Setting UI


UI параметров на основе содержимого

в различных аспектах произошли улучшения.

  • Согласованность между устройствами/операционными системами: браузер может отображаться с похожим интерфейсом и на PC, и на мобильных.
  • Управление в виде вкладок: параметры отображаются как вкладки, что избавляет от необходимости находить отдельные окна и повышает согласованность с веб-средой.
  • Функциональность: вкладки больше, чем всплывающие окна, поэтому можно отображать больше содержимого и есть меньше функциональных ограничений.


Элементы, в которых можно заметить другие изменения:

Australis UI detail


Детали Australis UI

  • Переход вперёд возможен, только если можно двигаться вперёд.
  • Кнопка скачивания доступна только тогда, когда что-то можно скачать.
  • Объединение закладок и меню закладок.


Bookmark animation


Анимация закладок

Соответствующий форк


Существует браузер-форк под названием Basilisk.

Basilisk's customization UI


UI кастомизации Basilisk

Photon (v57, ноябрь 2017 года)


Обновление UI под названием Photon пользователи в целом восприняли хорошо, его использовали до июня 2021 года, когда появился Proton.

dcyaru2srlzzlebfnxe-np-pte4.png


Photon UI

Особенности


  • Компоненты: действия с панелями и страницами на основе списков, меню библиотеки.
  • Анимация: добавлена анимация к действиям кнопок, вкладок, панелей и т. п.
  • Визуальный редизайн: вкладки, значки, плотность и т. п.
  • Производительность: улучшена инициализация, пересчёт положения элементов синхронизации и т. п.


Ограничения


  • Выглядит немного сложным.
  • Разрешены только легковесные темы.


Объяснение


С точки зрения визуального редизайна форма вкладок стала прямоугольной, а значок превратился из PNG в SVG.

Tab UI


UI вкладок

Панели сеточного типа, которые ненавидели многие пользователи, заменили на формат списка. Возможно, кто-то не согласится, но мне кажется, формат списка приемлем.

Сетка против списка

Когда использовать режим сетки:
  • Если для пользователя самым важным является изображение получившегося элемента.
  • Если пользователю нужно иметь возможность сравнивать элементы визуально (например, сравнивать обувь).

Когда использовать список:
  • Если результатам нужны описания или сопровождающий текст.
  • Если все изображения похожи и нужно описание, чтобы отличить их друг от друга.

— UI cheat sheet: list vs grids
  • Режим списка уменьшает количество скроллинга: многие дизайнеры используют режим сетки, потому что он привлекательнее для глаз. Но проблема в том, что режим сетки заставляет пользователей больше скроллить. В режиме сетки есть изображения, которые делают страницу намного длиннее.
  • Режим списка предотвращает торопливый выбор: режим сетки не только заставляет пользователей больше скроллить, но и заставляет их делать торопливый выбор. Пользователей настолько стимулируют изображения, что они выбирают первый вариант, который кажется им привлекательным.

— List vs. Grid View: When to Use Which on Mobile


List panel


Панель-список в Windows 10 и Mac [Photon Engineering Newsletter]

Меню действий страницы был элементом, обеспечивающим удобство и кастомизацию адресной строки.

Page action menu


Меню действий страницы

В комбинированном меню закладок появилось меню библиотеки, объединяющее в себе множество разных элементов.

Libray button


Значок библиотеки

При внедрении дизайна Photon элементом отличия от других браузеров являлась анимация.

Значения кубической кривой демонстрируют, что дизайнеры хотели, чтобы Photon выделялся на фоне других и был ​​отзывчивым, и что в нём используются преимущества compositor благодаря технике SVG filmstrip.

Overflow menu animation


Меню Overflow

Download button animation


Начало/выполнение/завершение скачивания

Bookmark / Pocket / Overflow Animation


Анимация закладок/Pocket/Overflow

Индикатор загрузки вкладок отличает его от других браузеров


Лично мне нравятся полноэкранные анимации Firefox, они чистые и плавные.
Панель заголовка спроектирована так, чтобы использовать особенности ОС, например, цвет подсветки в Windows и прозрачный фон в Mac.

Highlight color of window title bar


Цвет подсветки полосы заголовка окна

Mac Vibrancy Effect


Эффект Mac Vibrancy

Кроме того, благодаря настройке плотности и настройке места для перетаскивания интерфейс поддерживает различные размеры экрана и устройства ввода.

Density setting


Настройка плотности

bn49-pchtj5pw0eiaxdwfle9mam.gif


Настройка места для перетаскивания

Также в Photon активно пытались реализовать улучшения производительности в рамках Firefox Quantum.

В то время XUL имел множество проблем (1, 2, 3), поэтому расширения на основе XPCOM/XUL были удалены, был выполнен переход на веб-расширения Chromium, а UI начали заменять на интерфейс на основе веб-компонентов.

Соответствующий форк


Waterfox G3 — это форк на основе Photon с формой вкладок из Australis.

Waterfox


Waterfox

Proton (v89, июнь 2021 года)


В это время я начал работать над темами.

Proton


Proton

Особенности


  • Аккуратно упорядоченное меню.
  • Значок, похожий на иконку Edge.
  • Некоторые анимации, которые мне понравились, и каркасные экраны (skeleton screens).
  • Стильная цветовая схема.
  • Умеренное скругление.
  • Тщательная реализация.


Ограничения


  • Чрезмерно широкие отступы.
  • Из меню убрали значки.
  • Запутанные индикаторы вкладок.
  • Из адресного поля убрано меню действий страницы.
  • Анимации и иллюстрации удаления закладок/библиотеки.
  • Размер значков содержимого новой вкладки.
  • Изменено поле поиска новой вкладки.


Объяснения


О недостатках дизайна Proton мы поговорим отдельно, а пока сосредоточимся на положительных аспектах.

Больше всего в Proton мне нравится то, что меню и модальные окна тоже стилизованы, а сообщения стали чётче.

Context menu


Контекстное меню

Photon tooltip


Proton tooltip


Подсказка

Dialog


Popup Box


Диалоговое и всплывающее окно [Content design considerations for the new Firefox]

При сравнении цветов и значков мы видим более последовательные оттенки цветов, более тонкие значки и скругление.

Photon's UI


Разнообразные цвета/толстые значки/прямые углы в Photon

Proton's UI


Последовательные цвета/тонкие значки/скругление в Proton

Также мне понравились общие изменения в анимациях.

Reload animation


Download animation


Анимация обновления и скачивания

Ещё одно важное изменение заключается в появление каркасного экрана, чтобы запуск казался быстрее (только в Windows).

Before skeleton


After skeleton


Прогресс загрузки [Performance in progress]

Skeleton Screen


Каркасный экран (Skeleton Screen)

Ещё одно небольшое, но полезное изменение — если нет информации о фавиконке, эта ситуация правильно обрабатывается и отображается в новой вкладке.

Empty


Site preview


В Photon фавиконка была пустой

Automatically generated


Автоматически сгенерированные фавиконки (верхний ряд)

Одним из самых загадочных решений в Proton стало удаление кнопки меню Page Actions. Вот тепловые карты, полученные телеметрией:

Photon Hitmap


Тепловая карта Photon [Modern, clean new Firefox clears the way to all you need online]

Смысл меню действий страницы заключался в чёткой навигации по нечасто используемым функциям.

Низкая частота тепловой карты оправдывала его цель и не является причиной избавления от меню.

В Australis меню тоже было упорядочено на основании тепловой карты, но это ограничивалось объединением функций или изменением их расположения, а не удалением функций, играющих существенную роль.

Australis Heatmaps


Тепловые карты Australis

© Habrahabr.ru