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

Материал из Википедии — свободной энциклопедии
(перенаправлено с «Windows 8-style (язык дизайна)»)
Перейти к: навигация, поиск
Логотип Metro
Дизайн рабочего стола и главного экрана в Windows 10 в стиле Modern UI

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

Изначально был разработан для использования в Windows Phone, также использовался при создании пользовательского интерфейса в Microsoft 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. Архивировано 16 мая 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. Архивировано 16 мая 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. Архивировано 10 марта 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 года.

Ссылки[править | править вики-текст]