Плитка на стартовом экране умела показывать погоду, письма и заголовки новостей задолго до того, как панели виджетов добрались до свежих версий Windows. Называлась эта механика Live Tiles, живые плитки, и была не украшением, а целой философией: значок приложения обязан сообщать что-то полезное ещё до первого щелчка. За неполное десятилетие идея переехала с телефона на рабочий стол, обросла полноценным API для программистов и тихо сошла со сцены. Ниже история того, где родились живые плитки, кому они обязаны взлётом и почему десктоп так и не принял их всерьёз.
Истоки Metro в типографике и медиацентрах до появления Windows Phone
Прямые предки плиток живут не в коде, а в графике. Дизайнеры Microsoft опирались на швейцарскую школу типографики с её культом крупного шрифта, простых фигур и жёсткой сетки, а ещё на вывески станций метро: короткие надписи, которые читаются на ходу за долю секунды. Отсюда и рабочее имя языка дизайна, Metro, которое позже пришлось убрать из официальных документов.
Первые опыты в этом духе заметны ещё в энциклопедии Encarta 95 и в оболочке MSN 2.0, но по-настоящему стиль выкристаллизовался в Windows Media Center и в плеере Zune, интерфейс которого освежили в 2007 году. Там окончательно оформился принцип "контент важнее рамок": минимум кнопок и панелей, максимум самого содержимого, тонкий шрифт семейства Segoe. В ранних проработках Windows Phone появились плоские цветные "живые плитки", и это был не каприз художников, а ответ на вопрос, что вообще показывать на маленьком экране, где каждый пиксель на счету.
Windows Phone 7 в 2010 году и первые живые плитки
Публичный дебют Metro состоялся в 2010 году вместе с Windows Phone 7. Стартовый экран телефона выглядел инородно на фоне ровных сеток одинаковых значков у конкурентов: перед глазами лежали широкие прямоугольники со строкой последнего письма, числом непрочитанных сообщений, фотографией из альбома, сменявшей одна другую. Плитка не просто запускала приложение, она работала витриной его содержимого, и телефон этим гордился.
Размеров на телефоне было два, средний и широкий, и переключение между ними делало одну и ту же плитку то лаконичной, то говорливой. Плитка почты показывала отправителя и строку письма, плитка календаря подсказывала ближайшую встречу, плитка фотографий тасовала снимки, как калейдоскоп. Уже здесь проявился главный фокус идеи: интерфейс не ждал, пока пользователь откроет программу, он сам приносил первые слова от неё на стартовый экран.
Идея оказалась убедительной настолько, что жюри премии IDEA от общества промышленных дизайнеров Америки на церемонии 2011 года отдало Windows Phone 7 сразу три награды: Gold Interactive, People's Choice и Best in Show. Джо Бельфиоре, один из архитекторов Metro, на конференции Nokia World 2011 объяснял, что интерфейс должен быть художественным в тексте и значках, а плитки, движущиеся точки и кинетическая прокрутка создают ощущение живого механизма. В 2012 году вышла Windows Phone 8 с ядром NT, общей с настольной системой файловой базой NTFS и графикой DirectX, и мобильная платформа стала кровной родственницей Windows 8. Казалось бы, дальше нужно было только масштабировать успех.
Экран Пуск в Windows 8 в 2012 году и конфликт с классическим столом
26 октября 2012 года Microsoft сделала то, на что раньше не решалась: в Windows 8 привычное меню Пуск заменили полноэкранным стартовым экраном с плитками. Рабочие программы жили в окнах, а новые приложения из магазина раскрывались на весь экран и общались с пользователем на языке плиток. Первые отзывы были жёсткими: интерфейс называли неловким гибридом, части которого тянут пользователя в разные стороны, а навязанная полноэкранность бьёт по многозадачности.
Ориентироваться в новом мире предлагалось краями экрана: углы открывали панель с чудо-кнопками, переключение между запущенными приложениями шло через полосу у левого края. Для сенсорного планшета задумка выглядела стройно, для мыши превращалась в квест на скорость и точность.
Показательной вышла и судьба имени. В августе 2012 года внутренняя записка Microsoft предписала отказаться от термина Metro на фоне разговора о товарном знаке с европейским торговым партнёром Metro AG, а в сентябре стиль официально стал называться Microsoft design language. Плитки между тем продолжали совершенствоваться: в Windows 8.1 2013 года вернули кнопку Пуск, плитки научились менять размер в четыре ступени, а каталог шаблонов уведомлений дожил до второй версии. Чтобы изменить размер плитки, пользователь нажимал на неё правой кнопкой мыши на стартовом экране, затем в панели снизу выбирал Изменить размер → Широкая или Изменить размер → Большая. Начальный экран легко персонализировать: приложение закреплялось из общего списка командой Закрепить на начальном экране, плитки перетаскивались мышью и складывались в именованные группы вроде Работа или Игры. В Windows 8.1 здесь же появился полный список всех программ, до которого добирались стрелкой вниз, а любимые приложения получали крупные квадратные плитки.
TileUpdateManager и шаблоны уведомлений плиток для разработчиков
Живость плитки обеспечивал обычный программный интерфейс, а не чудеса. Класс TileUpdateManager из пространства имён Windows.UI.Notifications создаёт объекты TileUpdater, которые меняют вид плитки приложения в меню Пуск, а метод GetTemplateContent выдаёт XML заготовку из каталога шаблонов: на Windows 8 система отдаёт шаблоны версии 1, на Windows 8.1 версии 2. Имена говорят сами за себя: TileWide310x150Text03 означает широкую плитку со строкой крупного текста, TileWideImageAndText01 выдаёт связку картинки с текстом, а подобных заготовок в каталоге десятки.
Обновление отправлялось коротким фрагментом на C#, который размещали в коде приложения, например в обработчике нажатия кнопки или в фоновой задаче; строку с CreateTextNode меняют под реальные данные программы, после чего плитка обновляется сразу:
var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWide310x150Text03);
var tileText = tileXml.GetElementsByTagName("text");
tileText[0].AppendChild(tileXml.CreateTextNode("Отчёт готов")); // здесь подставляют свой текст
var tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);Порядок работы программиста выглядел одинаково почти всегда:
- выбрать в каталоге TileTemplateType заготовку нужного размера;
- получить её XML методом GetTemplateContent;
- подставить свои строки, числа и адреса картинок;
- завернуть заготовку в объект TileNotification;
- вызвать Update у TileUpdater и увидеть свежую плитку на стартовом экране.
Плитка умела держать очередь из пяти уведомлений и показывала их по очереди, как кадры диафильма. Обновления приходили по расписанию или через периодические опросы сервера с заданным интервалом, а тот же механизм принимал команды от облачного сервиса уведомлений WNS, поэтому письма и новости прилетали на плитку даже при закрытом приложении. Рядом с плиткой жил числовой бейдж со счётчиком непрочитанного. Отдельные методы API обслуживали вторичные плитки, которые приложение создавало под конкретную задачу, скажем под отдельный город в прогнозе погоды или под конкретный чат.
Если программа ни разу не присылала обновление, её плитка оставалась статичной карточкой с логотипом. Поэтому живой экран был обязанностью, а не бонусом: чтобы интерфейс дышал, каждой программе требовался собственный поток событий, и ленивые приложения сразу выдавали себя мёртвыми прямоугольниками.
Адаптивные и вторичные плитки в Windows 10
В Windows 10, вышедшей в 2015 году, жёсткий каталог шаблонов дополнила адаптивная разметка: программист описывает содержимое тегами и подсказками hint, а плитка сама подстраивает вид под плотность пикселей и размер экрана. Появились четыре размера: TileSmall, TileMedium, TileWide и TileLarge, при этом старые заготовки из каталога времён Windows 8 продолжали работать. Подсказки управляли всем: hint-style задавал стиль шрифта от caption в 12 эффективных пикселей до header в 46, hint-wrap включал перенос строк, hint-weight делил плитку на колонки с весами, hint-overlay затемнял фон на любой процент от 0 до 100, hint-crop обрезал фотографию в круг.
Разметка плитки хранится в XML полезной нагрузки уведомления, который приложение собирает в своём проекте; текст в тегах text и значение атрибута template меняют под свой контент:
<tile>
<visual branding="nameAndLogo">
<binding template="TileWide">
<text hint-style="subtitle">Отчёт готов</text>
<text hint-style="captionSubtle">Проверка завершена без ошибок</text>
</binding>
<binding template="TileMedium">
<text hint-style="base">Отчёт готов</text>
</binding>
</visual>
</tile>Проверять вид плитки без сборки проекта позволяло бесплатное приложение Notifications Visualizer с мгновенным предпросмотром, а для C# вышел пакет Microsoft.Toolkit.Uwp.Notifications, где плитки описываются классами вместо ручного XML. Вторичные плитки в UWP закреплялись прямо из приложения кнопкой Закрепить на начальном экране: так город в прогнозе, папка или плейлист получали собственную плитку со своими обновлениями через CreateTileUpdaterForSecondaryTile. В арсенале появились и фоновые изображения, и картинки peek, выезжающие сверху с анимацией, поверх которых плитка умела наливать тёмный слой для читаемости текста. Сетевые картинки жили под жёстким лимитом: до осени 2017 года плитка принимала не больше 200 килобайт по сети, после лимит вырос до 3 мегабайт на обычной связи и до 1 мегабайта на тарифицируемой.
Причины провала живых плиток на рабочем столе
На телефоне плитка решала задачу дефицита места: один взгляд, и всё важное перед глазами. За рабочим столом всё встало с ног на голову, места с избытком, зато привычки оказались твёрже гранита. Пользователь Windows ищет в меню Пуск программу и запускает её за пару секунд, а лента новостей внутри кнопки Пуск выглядит красивым, но лишним пассажиром. Полноэкранные приложения, навязанные той же реформой, ломали работу с окнами и не давали быстро переключаться между делами.
Забавно, что Windows лишилась маленьких настольных гаджетов как раз к выходу Windows 8, а взамен получила их гигантскую версию на весь экран. Хуже того, сама витрина со временем потускнела: мобильная платформа так и не набрала долю рынка, к 2017 году Microsoft свернула активную разработку Windows 10 Mobile из-за слабого интереса пользователей и разработчиков, поддержка закончилась 14 января 2020 года, а к ноябрю 2021 года на платформу приходилось около 0,01 процента мирового мобильного рынка. Без телефонов не было и смысла: классические программы жили в окнах, живая плитка оставалась привилегией узкого круга приложений из магазина, и обновлять её многим было попросту незачем. Вышел странный парадокс: стиль жив, а контента, ради которого он затевался, всё меньше. В 2017 году Microsoft анонсировала систему Fluent Design, и Metro официально уступила дорогу.
Windows 11 убрала плитки и закрыла страницу истории
Точку поставила Windows 11, представленная 24 июня 2021 года и вышедшая 5 октября того же года. Меню Пуск переехало в центр панели задач и предстало аккуратными блоками Закреплённые и Рекомендуем без всякой живой динамики. Живые плитки в новой системе не поддерживаются вовсе, и сама платформа прямо именует Live Tiles возможностью Windows 10, рекомендуя новым приложениям обычные значки. Тем, у кого на компьютере ещё стоит Windows 10, управлять остатками системы удобно через Параметры → Персонализация → Начало, а отдельные плитки настраиваются правой кнопкой мыши.
Наследие идеи при этом виднее, чем кажется. Гибкая разметка, придуманная для адаптивных плиток, перекочевала во всплывающие уведомления Windows, панель виджетов в Windows 11 продолжила линию "информация до клика", а счётчики-бейджи дожили до наших дней в самых разных системах. Урок живых плиток прост и полезен каждому, кто проектирует интерфейсы: витрина выигрывает спор только там, где её неустанно наполняют свежим содержимым, а пустая витрина хуже её отсутствия. Контекст, в котором идея родилась, исчез вместе с телефонами на Windows, и вслед за ним сошла со сцены сама витрина.