Metro (интерфейс)

Иное название этого понятия — «Modern UI»; см. также другие значения.

Логотип Metro

Metro — внутреннее кодовое название художественного стиля оформления графического интерфейса пользователя продукции компании Microsoft. Характерные особенности — ориентация на типографику и акцент на текст, графический минимализм, плавная анимация, один из отличительных элементов стиля — плоские прямоугольные «плитки».

Изначально был разработан для использования в Windows Phone, также использовался при создании пользовательского интерфейса в энциклопедии Encarta и MSN 2.0, а также Zune и Windows Media Center. Позже на основе Metro был построен интерфейс Windows Phone, веб-сайта Microsoft, Xbox 360, Windows 8^[1], Xbox One, Windows 10 (частично).

История

Знаки в системе перевозок King County Metro, послужившие вдохновением для создания Metro

По собственной версии дизайнеров Microsoft считается, что прототипом художественного решения послужили знаки, часто встречающиеся в системах общественного транспорта — например, расположенные в системе перевозок King County Metro^[2], которая обслуживает большую область Сиэтла, где расположена штаб-квартира Microsoft.

Ранние элементы стиля Metro встречаются Windows Media Center для Windows XP Media Center Edition, который использует текст в качестве основной формы навигации. Этот интерфейс был также перенесён в более поздние версии Media Center. В 2006 году интерфейс Zune был обновлён с использованием этих принципов. Дизайнеры Microsoft решили перепроектировать интерфейс с бо́льшим упором на чистую типографику. Эти принципы и новый пользовательский интерфейс Zune были использованы в Windows Phone, многие решения которой были использованы в Windows 8. Плоские цветные «живые плитки» были введены в Metro на ранних стадиях разработки Windows Phone. Microsoft начала интеграцию этих элементов в другие свои продукты, с прямым влиянием, усматриваемым в более новых версиях Windows Live Messenger, Live Mesh и Windows 8^[1].

Принципы

Стиль Metro основан на принципах дизайна швейцарского стиля. Основными принципами Metro являются акцент на хорошей типографике и крупный текст, который сразу бросается в глаза. Microsoft называет Metro «простым, чистым, современным», а также «обновлением» по сравнению с основанными на значках интерфейсами Windows, Android и iOS^[3].

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

Большую роль играет анимация. Microsoft рекомендует плавные переходы и взаимодействие с пользователем на основе реальных движений (таких, как нажатие или перемещение). Это создаёт у пользователя впечатление «живого» и отзывчивого интерфейса с «добавленным ощущением глубины»^[4][5].

Microsoft составила внутренний список принципов, считающихся основой Metro^[6].

Примерно одновременно с официальным выпуском Windows 8 (26 октября 2012 года), поскольку всё больше разработчиков и партнёров Microsoft начали работать над созданием новых приложений в стиле Metro, по этой теме были созданы многие веб-сайты с ресурсами, в том числе особые правила разработки графических интерфейсов для Windows Store^[7].

Шрифт

Новая версия используемого в типографике Metro шрифта Segoe UI (внизу), созданная для Windows 8.

• В качестве основного шрифта используются шрифты из семейства шрифтов Segoe, разработанного Стивом Мэттсоном^[англ.] из Agfa Monotype и лицензированного Microsoft. Для Zune Microsoft создала специальную версию под названием Zegoe UI^[8], а для Windows Phone — семейство шрифтов «Segoe WP». Для Windows 8 также была создана специальная версия с тем же названием Segoe UI.

Все эти шрифты в основном различаются только незначительными деталями. Наиболее очевидные различия между Segoe UI и Segoe WP видны в цифровых символах. Версия Segoe UI, используемая в Windows 8, похожа на Segoe WP. Символы с заметными типографскими изменениями в этой версии включают 1, 2, 4, 5, 7, 8, а также I и Q.

Оценки

Ранняя реакция на Metro была в целом положительной. В обзоре Zune HD Engadget сказал: «Microsoft продолжает свой рывок к большой, большой типографике здесь, обеспечивая сложный, аккуратно разработанный макет, который почти настолько же функционален, насколько привлекателен»^[9]. CNET похвалил Metro, говоря, «он немного более смелый и неформальный, чем жёсткие, стерильные „сетки“ из значков и похожее на картотеку меню iPhone и iPod touch»^[10].

Общество промышленных дизайнеров Америки (англ. The Industrial Designers Society of America, IDEA) наградило Windows Phone, который использует Metro, золотой наградой «Народный выбор дизайна», а также премией «Лучший на выставке»^[11]:

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

Оригинальный текст (англ.)

The innovation here is the fluidity of experience and focus on the data, without using traditional user interface conventions of windows and frames. Data becomes the visual elements and controls. Simple gestures and transitions guide the user deeper into content. A truly elegant and unique experience.

— Изабель Анкона, консультант по пользовательскому опыту в IDEA^[12]

25 августа 2012 года Питер Брайт (англ. Peter Bright) из Ars Technica сделал обзор предварительной версии Windows 8, посвятив первую часть обзора сопоставлению экрана «Пуск» Windows 8 (построенного с помощью Metro) и его предыдущей версии в Windows 7 и ранее. Перебирая их плюсы и минусы, Питер Брайт пришёл к выводу, что экран «Пуск», хотя и не лишён некоторых проблем, является явным победителем^[13].

Отказ от использования названия Metro

В августе 2012 года начали циркулировать слухи, что один из розничных партнёров Microsoft — германская компания Metro AG — угрожала судебным иском против Microsoft за нарушение прав на товарный знак «Metro». Разработчикам и сотрудникам Microsoft была разослана памятка, призывавшая отказаться от использования термина «Metro» в связи с результатами переговоров с «важным европейским партнёром»^[14][15]. Microsoft временно называет язык дизайна «Modern UI».

9 августа 2012 выяснилось, что Microsoft планирует использовать термин «Windows 8», чтобы заменить «Metro» в потребительских материалах, а термин «Modern UI» предназначен для разработчиков, которые планируют создавать программное обеспечение на основе новых принципов дизайна^[16]. С сентября 2012 года в документации MSDN используется термин «язык дизайна Microsoft» (англ. Microsoft design language), когда речь идет о языке дизайна^{[17][18][19][20]}. Кроме того, на конференции разработчиков Microsoft Build 2012 компания также использует название «язык дизайна Microsoft»^[21][22].

Для обозначения созданных в стиле Metro приложений для Windows 8 употребляются термины «приложение в стиле Windows 8» (англ. Windows 8-style app), и «приложение Магазина Windows» (англ. Windows Store app).

См. также

• Windows Aero
• Windows RT
• Windows Runtime
• Универсальное приложение Windows

Примечания

1. Windows Phone 7 Series UI Design & Interaction Guide (англ.) (18 марта 2010). Дата обращения: 9 октября 2010. Архивировано 15 мая 2013 года.
2. Metro Design Language of Windows Phone 7 (англ.). microsoft.com. Дата обращения: 5 октября 2012. Архивировано 24 мая 2013 года.
3. Browse Blackboard Home. Metro - Blackboard (англ.). Businessinsider.com (25 апреля 2011). Дата обращения: 3 ноября 2011. Архивировано 24 мая 2013 года.
4. Windows Phone UI and Design Language (англ.). Дата обращения: 9 октября 2010. Архивировано 24 мая 2013 года.
5. From Transportation to Pixels (англ.), Windows team blog, 2011-02-16, Архивировано 18 февраля 2011, Дата обращения: 24 мая 2013 Источник  (неопр.). Дата обращения: 24 мая 2013. Архивировано 18 февраля 2011 года.
6. Metro Design Language of Windows Phone 7 | Microsoft Design .toolbox (англ.). Microsoft.com. Дата обращения: 8 сентября 2011. Архивировано 15 мая 2013 года.
7. UX guidelines for Windows Store Apps  (неопр.). Дата обращения: 15 мая 2013. Архивировано 30 ноября 2012 года.
8. Long Zheng. “Zegoe”, the new Zune font. (англ.). istartedsomething.com (14 Novemver 2007). Дата обращения: 15 октября 2012. Архивировано 25 мая 2013 года.
9. Topolsky, Joshua Zune HD review (англ.). Aol (17 сентября 2009). Дата обращения: 19 февраля 2013. Архивировано 25 мая 2013 года.
10. Zune HD 64GB Review (англ.). CNET. CBS Interactive (17 сентября 2009). Дата обращения: 19 февраля 2013. Архивировано 25 мая 2013 года.
11. Warren, Tom Windows Phone wins IDEA 2011 – people’s choice design award (англ.). WinRumors (18 сентября 2011). Дата обращения: 19 февраля 2013. Архивировано 28 мая 2013 года.
12. Windows Phone 7 (англ.). Industrial Designers Society of America (8 июня 2011). Дата обращения: 3 ноября 2011. Архивировано 28 мая 2013 года.
13. Bright, Peter Windows 8 on the desktop—an awkward hybrid (англ.). Ars Technica. Condé Nast Digital (25 апреля 2012). Дата обращения: 19 февраля 2013. Архивировано 25 мая 2013 года.
14. Microsoft вынуждена сменить название интерфейса (англ.). BBC (3 августа 2012). Дата обращения: 19 февраля 2013. Архивировано 9 марта 2013 года.
15. Microsoft to drop 'Metro' name for Windows 8 (англ.). BBC News. Дата обращения: 26 мая 2013. Архивировано 26 мая 2013 года.
16. Microsoft officlally renaming Metro UI to Modern UI (англ.). The Register (1 августа 2012). Дата обращения: 26 мая 2013. Архивировано 26 мая 2013 года.
17. Make great Windows Store apps  (неопр.). MSDN. Дата обращения: 17 сентября 2012. Архивировано 26 мая 2013 года.
18. Design case study: iPad to Windows Store app (англ.). MSDN. Дата обращения: 1 ноября 2012. Архивировано 26 мая 2013 года.
19. Guidelines for typography (англ.). MSDN. Дата обращения: 1 ноября 2012. Архивировано 26 мая 2013 года.
20. Roadmap for Windows Store apps using DirectX and C++ (англ.). MSDN. Дата обращения: 1 ноября 2012. Архивировано 26 мая 2013 года.
21. The Microsoft design language (англ.). Channel 9 (Microsoft). Дата обращения: 1 ноября 2012. Архивировано 26 мая 2013 года.
22. Mary Jo Foley. Microsoft Design Language: The newest official way to refer to 'Metro' (англ.). Дата обращения: 1 ноября 2012. Архивировано 26 мая 2013 года.

Ссылки

• MSDN: Общие принципы дизайна приложений в стиле Windows 8
• Windows Phone Design System — Codename Metro (англ.)
• Шрифт в интерфейсе Windows 8
• Mike Kruzeniski. From Transportation to Pixels (англ.). Microsoft (17 февраля 2011). — Сообщение в официальном блоге Windows о подобном дизайне. Дата обращения: 21 сентября 2014.