Metro ui что это
Обновлено: 13.05.2024
Новый интерфейс в стиле Metro является ключевой особенностью мобильной ОС Windows Phone 7. Но не только её одной: уже сейчас ясно, что этот пользовательский интерфейс, будет используется Microsoft во всех продуктах, в том числе и во флагманской Windows 8. Таким образом, интерфейс Metro так или иначе будет существовать в течение длительного времени, и это стоит того, чтобы познакомиться с ним поближе.
В этой статье мы остановимся на интерфейсе: принципы его работы, сетка, структура и основные элементы.
Что такое Метро, для чего он используется, и т.д.
Метро новый «язык дизайна» от Microsoft. Новая концепция нацелена на изменение логики построения и работы операционной системы и приложений, а также схемы взаимодействия между пользователем и электронным устройством.
Основные принципы построения и внешний вид были в значительной степени позаимствованы из информационных систем транспортных узлов. Надписи и графические элементы, в рамках этих систем имеют вполне конкретные требования: очень высокая читаемость и визуальная восприятие информации, отсутствие отвлекающих элементов, чистое и четкое представление о всех внешних элементах.
В идеале, человек должен быстро воспринимать информацию представленную на них, и получать четкие и недвусмысленные указания на необходимые действия. Но не только это: внешний вид должен быть приятным, аккуратным и оставить хорошее впечатление на пользователя.
Уже более года, представители Microsoft активно рассказывают о концепции и особенностях нового интерфейса. Судя по тому, что тексты выступлений различных специалистов очень похожи, информация была тщательно подготовлена и проверена отделом PR. С одной стороны, в современном мире, это вполне естественно. С другой стороны, теряя живую связь и эмоциональный контакт с авторами, с дизайнерами. Они видят копию, но не оригинал. Люди пытаются бороться с ней с живыми выступлениями авторов.
Таким образом, Metro стиль. Microsoft называет это «наш новый язык дизайна».
Для стиля Metro, были разработаны собственные принципы, используемой Microsoft для создания собственной операционной системы и приложений. Компания рекомендует разработку приложений сторонних разработчиков, которые используют те же принципы.
Основным принципом системы, является ее фокусировка на контенте пользователя. В конце концов, при работе с электронным устройством, пользователь хочет получить доступ к своим данным судебного разбирательства или решить некоторые из других задач быстро, удобно и минимально отвлекаться на другие вещи. Роль интерфейса быстро и удобно направлять пользователей туда, где он сможет сделать то, что он хочет. Интерфейс теряет свое значение «лица» устройства, превращается в просто указатель на пути к функции, запрошенной пользователем. Следуя этой логике, Microsoft называет это „очистить“ интерфейс: удалить весь фон и декоративные элементы, которые только отвлекают пользователя, оставляя только самые важные вещи. Это должно облегчить передвижение пользователя по навигации и восприятие информации.
Конечно, интерфейс должен иметь приятный внешний вид и оставлять хорошее впечатление. Но красота не может быть в ущерб простоте, скорости и доступности информации. Дизайнерам оставили не так уж и много инструментов работы. Но Microsoft считают, что средств достаточно для достижения желаемых результатов.
Во-первых, мы должны обратить внимание на особенности шрифтов и их атрибутов. Размер, стиль и расположение надписи само по себе может рассказать о многом. Иногда визуальное впечатление от надписи можно быть даже сильнее, чем информационная составляющая ─ и это нужно использовать.
Для Windows Phone 7, Microsoft разработала специальное семейство шрифтов Segoe.
При разработке шрифтов, особое внимание было уделено их читаемости. Шрифт остается читаемым даже при очень малых размерах. Наконец, и это особенно подчеркивает Microsoft, шрифт просто визуально красив.
Еще одна важная задача: интерфейс должен быть динамичным и сосредоточенным на движении. Это довольно трудно объяснить словами, но идея в том, что сама конструкция и внешний вид интерфейса должны подталкивать пользователей, чтобы двигаться вперед, показать ему, что, есть еще больше возможностей и дополнительной информации. Например, хорошо известная особенность интерфейса, когда часть названия следующей страницы, появляется на правой стороне экрана.
В концепции Metro, очень важная роль отводится анимации интерфейса. Он должен „отвлечь и развлечь пользователя“. Красиво анимированный интерфейс с интересными переходами и эффектами сам формирует очень хорошее впечатление от работы с ним. Анимация делает интерфейс яркими. Microsoft настоятельно рекомендует, укреплять это впечатление. Например, активные элементы и кнопки должны реагировать, когда нажаты.
Переход с одного экрана на другой должны осуществляться с анимированным эффектом.
Анимированные переходы, можно маскировать во время обработки системой команд пользователя. В идеале, хорошая продуманная анимация та, что пользователь не заметит вообще, что приложение „думает“. Благодаря красивой анимациии, он не заметит вообще, что переход от одной страницы к другой занимает некоторое время.
Microsoft советует отказаться от копирования объектов и эффектов реального мира в виртуальном интерфейсе, но вместо этого рекомендует более активно использовать возможности, предоставляемых виртуальным пространством. Таким образом, переход к иконографике и инфографике способствует Metro интерфейсу.
Меню сегодня почти всегда построены на иконках, то есть на статических изображениях, которые позволяют не только найти, но и запустить приложение.
В общем, иконка является своего рода идентификатором приложения, которое является статическим. Таким образом, разработчики намерены создавать наиболее привлекательные иконки для приложений, как правило, кнопки в стиле (3D и т.д.) ведь визуальный компонент имеет важное значение.
Особенность инфографики является в том то, что элемент меню должно не только обеспечить запуск приложения, но и обеспечить пользователя необходимой информацией, связанной с этим приложением: текущий статус, новые уведомления, другая информация.
Таким образом, для пользователя, главное меню это не только загрузчик, а полноценный информационный щит, где он может наблюдать новые системные события, и быстро реагировать.
В этом кратком описании идеологии интерфейса Metro, мы использовали советы Microsoft, опустив все вторичные элементы, и, сосредоточившись на главном.
Запатентованная Концепция Metro UI
18 августа 2011 года USPTO агентство утвердило заявку на патент от Microsoft, которая звучит довольно абстрактно: „Визуальное движение для обратной связи пользовательского интерфейса“. Отрывок из документа, который является абстрактным описанием интерфейса, прямо указывает на особенности MetroUI.
»Аспект пользовательского интерфейса, который обеспечивает визуальную обратную связь в ответ на ввод данных, сделанных пользователем. Например, края экрана могут быть использованы для создания эффектов визуальных подсказок для пользователя, указав например, что он достиг конца прокрутки списка. Другим примером такой обратной связи является то, что некоторые параллельные элементы интерфейса можно перемещать отдельно и с разной скоростью в ответ на действия пользователя. Другим примером является моделирование инерции при движении элементов пользовательского интерфейса, используемого для обеспечения более естественного вида сенсорного ввода. Различные комбинации этих функций были описаны в патенте".
Подтверждение патента очень важно для Microsoft. Действительно, в ближайшем будущем, интерфейсы всех основных продуктов этой компании будет в некотором роде на основе этой концепции. Windows Phone, Xbox и Windows 8. Кроме того, она обеспечивает дополнительную защиту от элементов MetroUI, используемых конкурентами. Например, Google уже много раз пыталась скопировать различные элементы MetroUI.
Примеры стиля Metro UI в веб-дизайне
Мы собрали несколько сайтов, имеющих дизайн Metro Style для вашего вдохновения. Для большинства из них, из метро особенностей, можно выделить в сетке плитки, мы видим на сайтах вдохновение в других важных аспектах, таких, как тип, выбор образов и иконографики.
Metro 4 — путь длиною в 6 лет. Краткая история Metro UI CSS
Эта история началась в далеком 2012 году, когда широкими шагами по планете начала свой путь Windows 8. Находясь под впечатлением плиточного интерфейса стартовой страницы это операционной системы, я решил сделать такую же на HTML, CSS и JavaScript.
Тогда не было и мысли делать библиотеку компонентов, просто набор стилей и их применение и чтобы в браузере и чтобы красиво и чтобы работало. И понеслась. Сначала были просто плитки (тайлы), затем они обрели различные эффекты, а затем этого стало мало. На просторах интернета (шучу, на сайте Microsoft) был найден Microsoft Developer Guide for Windows 8 UI. Почитав немного сие творение инженеров Microsoft, было принято решение начать делать библиотеку компонентов, потихоньку, для личных нужд, без рекламы и ажиотажа.
Ну, как говорится, сказано — сделано. Проект был запущен по кодовым названием Metro UI CSS.
Первая версия, которая, к слову сказать, так и не получила номер 1, а осталась в истории с номером 0.95 имела базовые стили и десяток компонент.
К работе над проектом присоединились Сергей Волков из России и Валерио Баттаглия из Швейцарии. Сразу, хочу сказать им огромное спасибо за их работу в проекте.
Хотя проект нигде не рекламировался, но все таки был замечен сообществом. Количество посетителей страницы проекта быстро дошло до цифры в 2000 хостов ежедневно, начали потихоньку накапливаться звездочки на GitHub странице проекта.
Через какое то время проект был замечен менеджерами программы Microsoft Bizspark и вскоре получил соответствующий статус как участник программы BizSpark, а мы все, кто работал на проектом, получили плюшки от Microsoft в виде лицензий на программное обеспечение от софтверного гиганта.
Чуть позже проект также получил поддержку от компании JetBrains (компания активно поддерживает open source) в виде лицензий на их замечательную IDE PhpStorm.
В июне 2013 года было принято решение прекратить работу над версией 0.95 и начать разработку версии 2.0. К этому времени накопился некоторый опыт, пришло осознание, что было сделано не так, что нужно улучшить, а что убрать совсем. Общий TODO получился таким обширным, что не было смысла вносить исправления и дополнения в версию 0.95, а целесообразнее было начать разработку с чистого листа.
Так начала свою жизнь версия 2.0.
При разработке версии 2.0 были учтены ошибки и неверные решения в версии 0.95. Были оптимизированы базовые стили, а набор компонент был расширен в 3 раза до 30 штук, добавлена возможность инициализировать компоненты с использованием декларативного подхода через атрибут HTML элемента data-role.
Положительные отзывы сообщества показали, что это был правильный шаг — отказаться от продолжения работы над 0.95 в пользу полностью новой Metro UI CSS 2.0.
К сожалению, в начале работы над версией 2.0 была потеряна связь, по тем или иным причинам, с Сергеем и Валерио и далее проект писался одним человеком. Это была трудная, но очень интересная работа. Вообще я заметил, что если твоя работа приносит кому то пользу, это дарит автору такой себе профит, который не купишь за деньги и ощущения от этого имеют свою собственную, ни с чем не сравнимую психологическую окраску.
Версия 2.0 просуществовала 2 года. Так как все развивается, развивался и проект, как в мыслях так и в коде. В августе 2015 года пришло понимание, что в проекте нужно что то менять и менять коренным образом и так, что бы это пошло на пользу тем, кто использовал библиотеку для своих задач.
Одним из ключевых решений для выпуска версии 3.0 стало решение отойти еще дальше от функциональной инициализации компонент и сделать ее максимально декларативной и дать возможность верстать страницы сайтов людям, не имеющим опыта программирования на JavaScript (например СЕО специалисты) и чтобы эти страницы сохранили свою интерактивность.
Основным недостатком в декларативном подходе в версии 2.0 был тот факт, что он работа только для заранее сверстанных компонентов. Если компонент загружался на страницу через Ajax или создавался JavaScript кодом, то единственной возможностью его инициализации оставался вызов соответствующей функции.
В конце августа 2015 года я начал работу над 3-й версией Metro UI CSS.
В третьей версии был сильно оптимизирован код базовых стилей, написан механизм инициализации компонент и отслеживания их появления на странице с последующей автоматической инициализацией. Набор компонент и их функциональные возможности были расширены, код компонент был переписан для поддержки функций инициализации и отслеживания. Нововведения были к месту, о чем говорили большое количество положительных отзывов пользователей библиотеки.
В апреле 2018 года, в очередной раз пересматривая исходный код Metro UI CSS и сайтов, написанных на Metro 3, я пришел к мысли о том, что уж очень много HTML кода приходится писать программисту и нужно с этим что то делать.
Так было принято решение, что пусть весь лишний оберточный HTML код, а многие компоненты к тому времени имели над собой обертку из HTML элементов для обеспечения своей работоспособности, пишет не программист, а библиотека сама с этим справляется. Еще одной проблемой было то, что Metro 3 никак не отслеживало изменение значений ключевых атрибутов компонент, изменение которых влекло за собой изменение поведения компонента. Два этих фактора привели меня к необходимости написания Metro 4.
Подготовительные работы заняли три месяца, за это время был составлен план по реструктуризации Metro 3, определения, что нужно и как это делать. В августе я начал работу на 4-й версией, которая к тому времени даже в названии поменялась с Metro UI CSS в просто Metro 4. Изменение названия тоже было не просто так сделано. Библиотека, хоть и сохранила визуальную базу, заложенную в предыдущих трех версиях, но уже не была только стилизацией элементов Windows 8. Это стало нечто большее. Все было переписано с нуля. Количество компонент было увеличено в 2 раза до 70+ и продолжает увеличиваться.Теперь это стал самодостаточный продукт, отпала необходимость во многих сторонних компонентах и библиотеках (кроме jQuery Core, пока это основная и единственная зависимость).
Итак что же такого в Метро 4 особенного, чего нет в других библиотеках, например Bootstrap? На самом деле даже сравнивать не буду! Это личное мое виденье, это мой мир, который я строил несколько лет. Если Вас полностью устраивает Bootstrap или нека другая библиотека, то Вы можете продолжать их использовать, но если Вам захочется попробовать чего то нового и большего в этой жизни (к черту скромность!), милости просим в мир Metro 4.
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 – простота и лаконичность. В стремлении сделать интерфейс максимально доступным и свободным от посторонних элементов разработчики убрали все лишние детали. Возможно, иногда они даже переусердствовали, как с исчезающей иконкой уровня заряда батареи, но в целом следование этому принципу дало свои результаты. Вместо иконок здесь активные панели – тайтлы, вместо меню программ - лаконичный список, вместо ярлыков, которые разбросаны по рабочим столам - строгая вертикальная лента, в которую пользователь может добавлять новые панельки.
Следующий принцип Metro UI, ставший одним из основных для Windows Phone – качественная типографика. Для WP7 разработчики предлагают использовать специальный шрифт Segoe WP в разных его начертаниях: классическом, наклонном, полужирном и других. Естественно, также для шрифта предусмотрены разные размеры. Единый шрифтовой стиль делает текст в операционной системе легко читаемым и при длительной работе в ОС глаза устают куда меньше, чем уставали бы при просмотре буйства разных типов шрифта.
Кроме того, разработчики Windows Phone акцентируют внимание пользователя на информации и контенте, а все элементы управления в ОС минимизированы или сделаны таким образом, чтобы не мешать пользователю при чтении информации любого типа. Это третий основной принцип Metro UI.
Просто Windows Phone
Вместе все принципы интерфейса делают систему простой и понятной. Хитрость Windows Phone в том, что новичок освоится с ней за пару часов, даже если никогда до этого не работал со смартфонами, а пользовался простейшим телефоном. Потому что тот интерфейс, который есть в новой системе от Microsoft, максимально прост и понятен. Более того, он даже проще, чем современные интерфейсы в обычных недорогих мобильных телефонах. И это, конечно, серьезное преимущество Windows Phone перед конкурентами. Чтобы начать работать с системой, не придется читать руководства или додумывать некоторые вещи, принципы работы ОС. Все ясно после первого включения смартфона на базе Windows Phone.
[Нам пишут] Заметки с экрана. Windows 8 Metro UI. Часть вторая
В прошлый раз мы остановились на том, что приборная панель и отделка салона в предлагаемом нам автомобиле под названием Windows 8, нам понравилась. Несмотря на то что это совсем не тот автомобиль, который мы в итоге можем купить, а лишь образец, на него можно уже сейчас сделать предзаказ. Но прежде чем принять окончательное решение, предлагаю продолжить знакомство с остальными частями автомобиля.
После того как почта заработала, а заодно с ней и приложение People, которое стало показывать фото всех моих контактов из адресной книги с Google, было решено удалить ненужный мне Live ID аккаунт из почты, но не тут-то было. Можно изменить или удалить Google почту, но не Live ID, что я в дальнейшем и сделал. В общем, или вентиляция в машине работает вместе с освежителем воздуха, или никак. Не то чтобы меня это сильно беспокоит, но все-таки как-то не по себе. Наверное, исправят к окончательному релизу.
Подпись можно стереть руками и тогда ничего прилетать получателю не будет, но как это убрать для всей почты раз и навсегда, я пока не разобрался.
Также пока не разобрался и как вставить смайлик, не выделяя никакого текста, т.к. всплывающая менюшка, дающая доступ к ним, появляется только тогда, когда выделяешь что-то в письме. Вроде бы не совсем логично, думаю что исправится.
Пока все-таки зачет, хотя и авансом.
Вот тут и произошло самое интересное. Приложения Skype, которое было следующим на очереди, в магазине приложений Windows Store я не нашел и решил скачать и установить его напрямую с сайта производителя.
Итак, мне понадобился Internet Explorer 10, который, как оказалось, в системе не один, а целых два и они разные. Причем разные до такой степени, что зайдя на один из сайтов Microsoft, я получил предупреждение о том, что мне необходимо запустить другой, второй Internet Explorer, иначе я не смогу посмотреть содержание страницы целиком. Вот так, нежданно-негаданно, в нашем автомобиле обнаружилось два руля.
Но об этом в следующем выпуске заметок с экрана.
Буду ждать ваших комментариев, конструктивной критики, предложений и замечаний.
Читайте также: