Интерфейс Metro¶

Интерфейс Metro (также известный как Modern UI, Microsoft Design Language 2, а впоследствии — Fluent Design) — это графический язык проектирования пользовательских интерфейсов, разработанный корпорацией Microsoft. Он характеризуется типографикой, плоскими элементами, отсутствием излишних текстур и градиентов, акцентом на контент, а также использованием живых плиток (Live Tiles) и жестовых взаимодействий. Интерфейс был впервые представлен в 2010 году как часть операционной системы Windows Phone 7, а затем стал основным визуальным стилем для Windows 8, Windows 8.1, Windows RT, а также для ряда веб-сервисов и приложений Microsoft (например, Xbox One, Office 2013).

¶История

¶Предпосылки и разработка

К концу 2000-х годов графический интерфейс Windows, основанный на концепции «Aero» (с прозрачностью, сглаживанием и трёхмерными эффектами), начал подвергаться критике за избыточность и неоптимальную работу на сенсорных экранах. Развитие мобильных устройств, в частности планшетов, требовало нового подхода к взаимодействию, ориентированного на касание, а не на мышь и клавиатуру. В 2009 году Microsoft начала работу над проектом «Windows Phone 7», в рамках которого дизайнеры и инженеры под руководством Джо Бельфьоре и Альберта Шума разработали принципиально новый интерфейс. Вдохновением послужили системы навигации в аэропортах и метро (отсюда кодовое название «Metro»), а также типографические плакаты швейцарского стиля.

¶Запуск и эволюция

Официально термин «Metro» был представлен в 2010 году вместе с Windows Phone 7. В 2011 году на конференции Build была анонсирована Windows 8, которая перенесла Metro на настольные ПК и ноутбуки. В 2012 году, после юридических споров с немецкой компанией Metro AG (владевшей торговой маркой «Metro»), Microsoft отказалась от публичного использования этого названия, заменив его на «Modern UI» и «Microsoft Design Language 2» (MDL2). В 2017 году на смену MDL2 пришла система Fluent Design, которая сохранила базовые принципы Metro, но добавила элементы глубины (свет, тень, материалы, анимация).

¶Основные принципы и характеристики

¶Типографика и контент

Главный принцип Metro — «контент превыше хрома» (Content before chrome). Интерфейс строится вокруг текста и данных, а не вокруг декоративных рамок и кнопок. Шрифт Segoe WP (а затем Segoe UI) используется для заголовков и основного текста, причём заголовки часто набираются крупным кеглем и располагаются в одну строку. Элементы управления (кнопки, ползунки) минимизированы и появляются только при необходимости (например, при наведении курсора или касании).

¶Плоский дизайн и отсутствие иллюзий

Metro отвергает скевоморфизм — имитацию физических материалов (кожа, дерево, ткань). Вместо этого используются плоские прямоугольники, однотонные заливки, чёткие линии и минимальное количество теней. Градиенты и отражения практически отсутствуют. Иконки выполняются в стиле «линейных» или «залитых» силуэтов.

¶Живые плитки (Live Tiles)

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

¶Навигация и жесты

В Metro навигация построена на жестах: смахивание от левого края экрана открывает список запущенных приложений (переключение задач), смахивание от правого края вызывает панель чудо-кнопок (Charms — поиск, общий доступ, настройки), смахивание от верхнего или нижнего края закрывает приложение. Классические кнопки «Пуск», «Назад» и «Закрыть» в привычном виде отсутствуют; вместо них используется панель с чудо-кнопками и контекстные меню.

¶Адаптивность

Metro изначально проектировался для работы на устройствах с разными разрешениями и форм-факторами: от смартфонов (4–5 дюймов) до планшетов (10–12 дюймов) и настольных мониторов (20+ дюймов). Элементы интерфейса масштабируются, а макеты перестраиваются в зависимости от ширины окна (например, в режиме «Snap» приложение занимает часть экрана).

¶Классификация и варианты

¶Windows Phone 7/8/8.1

Первая реализация Metro. Характеризовалась строгими чёрно-белыми цветами с акцентными оттенками (акцентный цвет задавался пользователем). Плитки были квадратными и прямоугольными, а список приложений — вертикальным и алфавитным. В Windows Phone 8.1 появилась поддержка фоновых изображений на экране «Пуск».

¶Windows 8/8.1

Настольная версия Metro. Экран «Пуск» заменил классическое меню «Пуск» и рабочий стол. Приложения Metro (Modern UI) запускались в полноэкранном режиме, а классические приложения (Win32) — на рабочем столе. В Windows 8.1 была добавлена возможность показывать список всех приложений в виде сетки, а также кнопка «Пуск» в виде плитки на панели задач.

¶Windows RT

Версия Windows для ARM-устройств (например, Surface RT). Интерфейс Metro был основным, а классические приложения (Win32) не поддерживались. Вместо этого использовались только приложения из магазина Windows Store.

¶Xbox One (2013)

Консоль Xbox One получила интерфейс на основе Metro, с акцентом на плитки для игр, приложений и медиаконтента. В 2015 году интерфейс был обновлён до более гибридного стиля, но базовые принципы Metro сохранились.

¶Office 2013

Приложения Microsoft Office (Word, Excel, PowerPoint) получили интерфейс с элементами Metro: плоские ленты, отсутствие трёхмерных кнопок, использование белого фона и крупных заголовков. Однако внутри самих документов сохранились традиционные элементы.

¶Критика и недостатки

¶Проблемы с юзабилити на настольных ПК

Metro был разработан в первую очередь для сенсорных экранов. На настольных компьютерах с мышью и клавиатурой многие жесты (смахивания) были неудобны или неочевидны. Отсутствие классического меню «Пуск» в Windows 8 вызвало массовое недовольство пользователей, привыкших к традиционному интерфейсу. Это привело к появлению сторонних утилит (например, Classic Shell) для возврата старого меню.

¶Путаница с двумя интерфейсами

Windows 8 предлагала два режима: Metro (экран «Пуск» и приложения Modern UI) и классический рабочий стол. Переключение между ними было неинтуитивным, а приложения Metro не могли работать в окнах (только полноэкранно). Это создавало разрыв в пользовательском опыте.

¶Ограниченная функциональность приложений

Первые приложения Metro (например, почтовый клиент, календарь) были значительно проще своих классических аналогов. Отсутствие поддержки многозадачности в привычном виде (приложения могли быть приостановлены или закрыты) раздражало опытных пользователей.

¶Отказ от названия «Metro»

Юридический спор с компанией Metro AG привёл к тому, что Microsoft перестала использовать это название в официальных материалах. Это вызвало путаницу в сообществе дизайнеров и разработчиков, которые привыкли к термину «Metro» как к общепринятому.

¶Влияние и наследие

¶Влияние на другие платформы

Принципы Metro (плоский дизайн, типографика, акцент на контент) оказали значительное влияние на развитие интерфейсов в целом. В 2013 году Apple выпустила iOS 7, которая также отказалась от скевоморфизма в пользу плоского дизайна. Google в Android 5.0 Lollipop (2014) представила Material Design, который, хотя и отличается от Metro, также использует плоские элементы и анимацию.

¶Переход к Fluent Design

В 2017 году Microsoft анонсировала Fluent Design System, которая стала эволюцией Metro. Fluent сохранил базовые принципы (типографика, плоские элементы), но добавил глубину, свет, тени, материалы (акрил, металл) и анимацию. Fluent используется в Windows 10, Windows 11, а также в приложениях Microsoft 365.

¶Современное состояние

Хотя термин «Metro» больше не используется официально, его наследие продолжает жить в современных интерфейсах Microsoft. Элементы Metro (живые плитки, плоские кнопки, крупные заголовки) можно увидеть в Windows 10 (режим планшета), в приложениях UWP, а также в веб-версиях Office. В Windows 11 живые плитки были заменены на виджеты, но общий подход к типографике и минимализму остался.

¶Интересные факты

• Название «Metro» было выбрано из-за сходства с навигационными табличками в метрополитене (например, в Лондоне и Нью-Йорке), которые используют крупный шрифт и чёткие указатели.
• В ранних прототипах Windows Phone 7 интерфейс был цветным и содержал множество текстур, но команда дизайнеров решила отказаться от них в пользу чёрно-белой основы с одним акцентным цветом.
• В Windows 8 была функция «Сенсорная клавиатура» с разделёнными клавишами, которая также была частью концепции Metro.
• Microsoft выпустила официальные руководства по дизайну Metro (Metro Design Guidelines), которые были доступны для разработчиков и дизайнеров. Эти руководства содержали подробные правила по типографике, цветам, анимации и макетам.
• Несмотря на критику, Windows 8 с Metro была продана тиражом более 200 миллионов лицензий за первый год после выхода.