Windows Phone. Что такое Metro UI и при чем здесь «городской дизайн»?

Многие пользователи, которые впервые знакомятся с операционной системой Windows Phone лично или даже просто где-то слышат о ней, первым делом задаются вопросом: «при чем здесь Metro»? И действительно, одна из фишек и особенностей этой ОС – Metro UI, а что это такое и зачем нужно – не совсем понятно.

На самом деле, все просто: Metro UI — это название интерфейса Windows Phone. Однако это не просто имя для оболочки, это идеология ОС, и то, что лежит в ее основе – логика работы с окнами, меню, логика отображения программ, шрифтов и многое другое. Давайте посмотрим, чем же отличается Metro UI от существующих интерфейсов, и почему именно «Metro»?

История вдохновения

Компания Microsoft, разрабатывая новую Windows Phone, решила начать с нуля. С чистого листа. С одной стороны, такое решение имело серьезный недостаток – ни о какой совместимости с предыдущей ОС и программами для нее, миллионами программ, не было и речи. Для новой системы нужно было делать новый софт, потому что старый на ней просто не заработает. С другой, был и огромный плюс – компания имела возможность разработать новую систему с учетом всех современных реалий, требований пользователей и разработчиков. Проще говоря, сделать правильную и аккуратную систему как с точки зрения дизайна, управления и интерфейса, так и с точки зрения удобства разработки софта под нее. Так появилась Windows Phone и так было решено использовать Metro UI.

В основу разработки Metro UI были положены идеи простоты и лаконичности, характерные для шведских дизайнеров, а также работы Massimi Vignelli, дизайн-студия которого известна своим городским дизайном, в частности, схемой и типографикой для нью-йоркского метро, а также разработкой дизайна для авиакомпании American Airlines.

В стремлении сделать новый интерфейс максимально простым и понятным, а также красивым, разработчики Metro UI для Windows Phone выработали несколько основных принципов этого интерфейса, которые позднее легли в основу Design Guidelines for Windows Phone, руководства, которое без проблем можно сегодня найти на просторах интернета. Рассмотрим некоторые из этих принципов.

Основные принципы Metro UI

Главный принцип нового интерфейса Windows Phone – простота и лаконичность. В стремлении сделать интерфейс максимально доступным и свободным от посторонних элементов разработчики убрали все лишние детали. Возможно, иногда они даже переусердствовали, как с исчезающей иконкой уровня заряда батареи, но в целом следование этому принципу дало свои результаты. Вместо иконок здесь активные панели – тайтлы, вместо меню программ — лаконичный список, вместо ярлыков, которые разбросаны по рабочим столам — строгая вертикальная лента, в которую пользователь может добавлять новые панельки.

C активными панелями связан еще один принцип Metro UI – в этом интерфейсе практически каждый элемент несет в себе динамически изменяемую информацию. Именно поэтому панели очень информативны, в отличие от простых иконок в других ОС. Панели в Windows Phone меняются вместе с информацией внутри них. Так, если это панель «Телефон», то внутри нее показываются новые звонки, если «Сообщения» — количество новых сообщений. В панели «Календарь» отображается текущий день недели и дата, а если на этот день есть событие, то и оно будет отображено. И этот принцип применим практически ко всем панелям системы, не только от стандартных программ, но и от сторонних разработчиков.

Следующий принцип Metro UI, ставший одним из основных для Windows Phone – качественная типографика. Для WP7 разработчики предлагают использовать специальный шрифт Segoe WP в разных его начертаниях: классическом, наклонном, полужирном и других. Естественно, также для шрифта предусмотрены разные размеры. Единый шрифтовой стиль делает текст в операционной системе легко читаемым и при длительной работе в ОС глаза устают куда меньше, чем уставали бы при просмотре буйства разных типов шрифта.

Кроме того, разработчики Windows Phone акцентируют внимание пользователя на информации и контенте, а все элементы управления в ОС минимизированы или сделаны таким образом, чтобы не мешать пользователю при чтении информации любого типа. Это третий основной принцип Metro UI.

И еще, в системе есть «хабы», это специальные части системы, в которых сосредоточена информация одного типа. Например, в хабе «Контакты» пользователь видит как сам список контактов, так и избранные контакты и активность своих друзей, их последние сообщения в Facebook или Twitter, почтовые и текстовые сообщения. В хабе «Музыка» отображаются альбомы, исполнители, часто проигрываемые композиции и многое другое, а для перемещения между этими данными достаточно просто листать страничку хаба влево или вправо.

Просто Windows Phone

Вместе все принципы интерфейса делают систему простой и понятной. Хитрость Windows Phone в том, что новичок освоится с ней за пару часов, даже если никогда до этого не работал со смартфонами, а пользовался простейшим телефоном. Потому что тот интерфейс, который есть в новой системе от Microsoft, максимально прост и понятен. Более того, он даже проще, чем современные интерфейсы в обычных недорогих мобильных телефонах. И это, конечно, серьезное преимущество Windows Phone перед конкурентами. Чтобы начать работать с системой, не придется читать руководства или додумывать некоторые вещи, принципы работы ОС. Все ясно после первого включения смартфона на базе Windows Phone.

[an error occurred while processing this directive]

Что такое приложение Windows Metro style

Может ли кто-нибудь простым языком объяснить, что такое приложение Windows Metro style? Какова цель и какое приложение мы можем сделать, используя это?

Любая ссылка для начинающих будет очень полезна..

4 ответа

Я работаю с Visual studio 2012 ultimate на Windows 8. Я разрабатываю html5/js metro-style-application. Я хочу динамично загрузить свой JS-файл из интернета. Нравится; Но приложение metro говорит; APPHOST9601: не удается загрузить.

Я переношу приложение из Windows Phone 7 в стиль метро Windows 8. На Windows Phone 7 я использовал класс DeviceStatus, чтобы получить некоторые значения памяти: DeviceStatus.ApplicationMemoryUsageLimit DeviceStatus.ApplicationCurrentMemoryUsage DeviceStatus.ApplicationPeakMemoryUsage.

«Приложения в стиле Metro — это полноэкранные приложения, адаптированные к потребностям ваших пользователей, адаптированные к устройству, на котором они работают, адаптированные для сенсорного взаимодействия и адаптированные к пользовательскому интерфейсу Windows. Windows помогает вам взаимодействовать с вашими пользователями, а ваши пользователи-с вашим приложением» .

При разработке приложений Metro вы можете выбирать из множества языков и технологий:

• HTML + JS + CSS
• XAML + (C# или VB)
• XAML + (C++ или C)

Приложение в стиле Metro-это приложение, построенное с использованием HTML5, XAML+(C#,VB или C++), на новом Microsoft APIs-короче говоря, это an app-widget-kinda-thing. Обратите внимание, что это кросс-платформенная совместимость (Windows 8 будет поддерживать ARM с приложениями metro) и что стандартные приложения x86, построенные на «old way», все еще будут продолжать работать, но не считаются приложениями metro и не являются кросс-платформенными. Существует также магазин приложений для приложений metro.

Из — за отсутствия system APIs эти приложения довольно ограничены-подумайте о приложениях в стиле iOS, где они находятся в песочнице. Приложения Metro также используют cloud больше, чем когда-либо, для хранения данных и должны оставаться открытыми (пользователь не должен выходить из приложения metro), если только он не перезагрузится или не воспользуется диспетчером задач.

Метро стиле приложений переделывается Windows пользовательский интерфейс (больше сосредоточиться на чистой типографии, а не на UI хром),полный экран UI, ввел плоские цветные “живые плитки”(обновление пользователей о приложении и обратить их в приложение) ,вздымалась сенсорных стиле, предназначен для многозадачности(прикрепленном представлении, заполненное представление),может быть упакована и распространяться через “Windows магазин приложений ” и может быть развернуто на нескольких местных языках.

Я хочу перенести свое приложение Windows Phone 7 на a Windows 8. Я начал делать это после этой документации: http://msdn.microsoft.com/en-us/library/windows/apps/hh465136.aspx Вот эти шаги: Запустите Microsoft Visual Studio Express 2012 RC для Windows 8 и создайте новое приложение в стиле Metro с.

Кто-нибудь использовал стиль Microsoft Metro Api для разработки веб-страниц, поддерживаемых во всех основных браузерах, а не Windows 8? Я немного новичок в этом (jquery, Metro styles), и мне нужно сделать веб-страницу, которая в значительной степени действует как приложение Metro style, с живыми.

Metro apps — это touch-screen-friendly приложений, написанных специально для программных интерфейсов Microsoft WinRT.

Устройства на базе ARM Windows RT, такие как планшет Surface, смогут запускать только приложения Metro. Устройства под управлением Windows 8 смогут запускать как приложения Metro, так и приложения Win32.

Приложения Metro будут доступны для распространения в магазине Windows.

Похожие вопросы:

Я работал над разработкой приложений Windows Phone 7, теперь я хочу создавать приложения в стиле metro. У меня есть ряд сомнений по поводу настройки окружающей среды :- 1)нужен ли нам Windows 8 OS.

Я пишу приложение, чтобы показать youtube видео. В WPF на windows 7 я использую управление WebBrowser, и оно отлично работает. Но когда я использую элемент управления WinRT WebView для отображения.

как добавить пакет Visual C++ Runtime Package в приложение metro style C# в windows 8? Добавление этого показывает ошибку в проекте.

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

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 (частично).

Содержание

История

По собственной версии дизайнеров 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] :

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

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. ↑ 12Windows 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 ,
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, JoshuaZune 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, TomWindows 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, PeterWindows 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 года.

Ссылки

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

Что такое wiki2.info Вики является главным информационным ресурсом в интернете. Она открыта для любого пользователя. Вики это библиотека, которая является общественной и многоязычной.

Основа этой страницы находится в Википедии. Текст доступен по лицензии CC BY-SA 3.0 Unported License.

Wikipedia® — зарегистрированный товарный знак организации Wikimedia Foundation, Inc. wiki2.info является независимой компанией и не аффилирована с Фондом Викимедиа (Wikimedia Foundation).