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

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

Логотип Metro

Изначально был разработан для использования в 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]:

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

Изабель Анкона, консультант по пользовательскому опыту в 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. 1 2 Windows Phone 7 Series UI Design & Interaction Guide (англ.) (18 March 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 April 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, <http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/from-transportation-to-pixels.aspx> 
  6. Metro Design Language of Windows Phone 7 | Microsoft Design .toolbox (англ.). Microsoft.com. Дата обращения: 8 сентября 2011. Архивировано 15 мая 2013 года.
  7. UX guidelines for Windows Store Apps
  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 September 2009). Дата обращения: 19 февраля 2013. Архивировано 25 мая 2013 года.
  10. Zune HD 64GB Review (англ.). CNET. CBS Interactive (17 September 2009). Дата обращения: 19 февраля 2013. Архивировано 25 мая 2013 года.
  11. Warren, Tom Windows Phone wins IDEA 2011 – people’s choice design award (англ.). WinRumors (18 September 2011). Дата обращения: 19 февраля 2013. Архивировано 28 мая 2013 года.
  12. Windows Phone 7 (англ.). Industrial Designers Society of America (8 June 2011). Дата обращения: 3 ноября 2011. Архивировано 28 мая 2013 года.
  13. Bright, Peter Windows 8 on the desktop—an awkward hybrid (англ.). Ars Technica. Condé Nast Digital (25 April 2012). Дата обращения: 19 февраля 2013. Архивировано 25 мая 2013 года.
  14. Microsoft вынуждена сменить название интерфейса (англ.). BBC (3 August 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 August 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 года.

СсылкиПравить