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