Что характерно для стиля интерфейса metro

Обновлено: 05.07.2024

Эта история началась в далеком 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.

Взгляд на Modern (Metro) интерфейс Windows (Phone/RT) 8

Я не являюсь дизайнером, не имею ни малейшего представления о правилах, тонкостях и нюансах UI, и уж тем более не претендую на авторитетное мнение по данному вопросу. Являясь пользователь телефона на Android и имея богатый опыт общения с iOS девайсами, начиная аж с iPhone 2G, я имею в своем распоряжении, в качестве одной из установленных ОС — Windows 8 RTM. Собственно она, а точнее мысли, навеянные работой с новым видом пользовательского интерфейса от компании Microsoft и побудили меня, к написанию данной статьи. Я хочу заострить свое внимание на особенностях интерфейса на планшетных компьютерах, но так как такового у меня под рукой нет, то это будут лишь теоретические рассуждения, которые, возможно, буду расходиться с ощущениями, полученными на практике.

Всем, кому интересно, прошу под кат

Новые идеи, новое направление

На самом деле, новый интерфейс в Windows 8 не такой уж и новый. Корпорация экспериментировала с ним еще на Windows Phone 7, но тогда это казалось мне чем-то угловатым, сырым, непонятным, не похожим на так приевшиеся и казавшиеся стандартами UI продукты от Google и Apple. Ну действительно, что же может быть полезного от этих плиток в пол экрана? Где же куча одинаковых иконок, ровно и по стойке смирно стоящих в ряд? Да и представители самой компании Microsoft на Student Day 2.0 рассказывали, что их вдохновителями стали дизайнеры 50-х годов прошлого века, которые «придумали» угловатый интерфейс, на основе прямоугольников.

После этого я долгое время не видел это «нечто» и не мог пощупать эти живые плитки, тайлы. Но вот, наконец, выходит rtm версия этой чудной (ударение можно поставить в зависимости от предпочтений каждого) системы, которая наконец-то работает без глюков (все предыдущие версии, вплоть до release preview вызывали на моем ноутбуке freeze системы). С первых же моментов после установки я начал изучать особенности Modern интерфейса новой системы. Естественной реакцией была мысль «все это оптимизировано для планшетов». Навигация и управление мышкой работают без проблем, все достаточно интуитивно понятно, но на этом же интуитивном уровне хочется «тыкнуть» в эти плитки, хочется пролистать пальцем список приложений, увеличивать и уменьшать изображение.

Данная мысль, что все это шикарно смотрелось бы на планшетах, не покидала меня и я решил сравнить существующие решения с новым предложением от Microsoft.

Немножко картинок и сравнений

Сравнивать интерфейсы, вполне логично, я буду с планшетными адаптациями интерфейсов iOS и Android. Ключевое слово здесь — адаптация. Корпорации решили не ломать сложившиеся стереотипы и парадигмы своих продуктов, решили не переучивать и не пугать пользователей, таким образом планшетные версии их операционных систем являются лишь адаптацией существующих мобильных решений. Это является их главной, на мой взгляд, проблемой. Они не могут привнести новую струю, они пытаются по инерции ехать на своих интерфейсах дальше (ну а также на своих брендах и практически отсутствии альтернатив).

Давайте же посмотрим на типичные экраны Android и iOS в их планшетных вариантах.

Сначала iPad с iOS, потом Samsung Galaxy Tab 10.1 c Android

Что же мы видим? Мы видим мертвые, статичные, одинаковые, однотипные иконки приложений. Стандартных размеров, уложенных в один ряд, имеющих красивенькие закругленненькие уголочки, но все равно мертвые. Максимум какой интерактив мы можем от них получить — циферку справа вверху, обозначающую количество каких-то событий. А каких, от кого, зачем, почему — нам не скажут, пока не откроем и не поищем сами.
Android конечно спасает то, что у него еще есть виджеты, которые добавляют некоторый интерактив, и тем самым частично решают проблему статичности всего содержимого, но эти лишь полумера.
Интерфейс не живет, он уже устаревает, он статичен. Мы живем в мире с огромным потоком информации, и интерфейс должен также динамично нам ее представлять, он должен быть интерактивен, он должен выделяться.

телефон для людей
как уникален каждый человек, так и уникален его телефон.

Также радует возможность (если я ничего не путаю) писать эти metro приложения на основе html+css+js, чего нет у конкурентов. Это, на мой взгляд, правильный шаг в нужном направлении, который я видел лишь в KDE. К этому можно добавить и полную поддержку в совсем недавно запущенной Visual Studio 2012 и открытие Windows Store, и интеграцией всей системы с облаком, чтобы позволит без проблем переносить свою информацию, и разрабатывать качественные и красивые, а самое главное живые и тесно интегрированные в систему приложения.

Вместо вывода

На мой взгляд корпорация Microsoft угадала с направлением. Они отказались от клонирования существующих решений и тем самым выиграли. Они имеют оригинальную систему с оригинальным дружелюбным пользовательским живым интерфейсом. Зачем загромождать экран планшета десятками однотипных иконок или полуживых разношерстных виджетов? Размеры экрана нужно использовать рационально, позволять размещать на нем информацию, а не иконки, динамику, а не статику.
По-моему Modern дизайн выполняет поставленную задачу на все 100.

Новая операционная система вполне может завоевать свое место под солнцем, Microsoft создала новое направление, но станет ли оно трендом? Компания сильно проигрывает, выходя на данный рынок так поздно. Смогут ли они пробиться и изменить сложившуюся ситуацию как в мире интерфейсов так и в мире доминирующих операционных систем — покажет грядущий старт продаж устройств и самой ОС. Лично мне хотелось бы, чтобы у Microsoft с ее Windows 8 это получилось, так как я, как конечный пользователь, очень доволен проделанной работой и представленным результатом, и с радостью поигрался бы с планшетом, чтобы подтвердить свои предположения относительно удобства интерфейса, но были бы средства — студенты во все времена жили не в достатке :)

В конце хочется повторить, что это лишь мое субъективное мнение, не подкрепленное какими-то профессиональными знаниями в области интерфейсов, а также добавить, что к сожалению видно, что Google и Apple обгоняют Microsoft, в развитии функциональности и привнесении инноваций в функциональность ОС, например, в виде голосовых наборов, голосовых помощников, семантических «роботов», подсказывающих пользователю на основе его предпочтений итд итп, так что в этом направлении хочется пожелать Рэдмондской компании удачи, догнать конкурентов и более релизов ОС с оттачиванием идеологии их интерфейса и совершенствованием функциональных возможностей системы.

Шрифт [ ]

Новая версия используемого в типографике Metro шрифта Segoe UI (внизу), созданная для Windows 8.

Все эти шрифты в основном отличаются только незначительными деталями. Наиболее очевидные различия между Segoe UI и Segoe WP видны в цифровых символах. Версия Segoe UI, используемая в Windows 8, похожа на Segoe WP. Символы с заметными типографскими изменениями в этой версии включают 1, 2, 4, 5, 7, 8, а также I и Q.

Metro

Отказ от использования названия Metro [ ]

Для обозначения созданных в стиле Metro приложений для Windows 8 употребляются термины «приложение в стиле Windows 8» ( Шаблон:Lang-en ), и «приложение Магазина Windows» ( Шаблон:Lang-en ).

Интерфейс Metro. Описание основных возможнойстей ч.1

Разберемся, какие элементы на нем присутствуют и как их использовать.

Разноцветные прямоугольные значки – это плитки.

Файлы, папки, ярлыки, программы - все выполнено в виде плиток. Они обеспечивают доступ к различным объектам системы. С плитками можно выполнять множество операций - запускать закрепленные за ними объекты, копировать, перемещать, выделять, удалять, изменять размер и т. д.

Контекстное меню

У любого объекта Windows 8 есть контекстное меню, вызываемое щелчком правой кнопкой мыши. Оно содержит действия, которые можно выполнять с конкретным объектом. Например, большинство из них можно скопировать, удалить или переименовать. Для выполнения этих команд нужно выбрать соответствующий пункт контекстного меню.

Щелкните правой кнопкой мыши на плитке и внизу экрана увидите панель» которая и будет контекстным меню. Нажав, например, значок Q , вы измените размер плитки.

Полоса прокрутки

В предыдущих версиях Windows документы или списки, которые не помещались на экране целиком, прокручивали вертикально, сверху вниз. Характерная особенность интерфейса Metro - горизонтальная прокрутка (влево-вправо). Удобнее всего перемещаться по экрану Пуск с помощью колесика мыши, но можно использовать и полосу прокрутки.

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

Горячие углы

Горячие углы - это еще одно нововведение Windows 8, в предыдущих версиях системы ничего подобного не было. Они работают в любом приложении операционной системы, а не только на экране Пуск. Рассмотрим подробнее каждый из углов.

Правый верхний

Переместите указатель мыши в правый верхний угол экрана - вы увидите панель с которой мы уже сталкивались во время выключения компьютера. В официальной документации Microsoft она называется панелью Charms .

Ее можно вызвать в любой момент как перемещением указателя, так и с помощью альтернативного способа - сочетания клавиш Windows + C .

Если после отображения панели провести указателем мыши вдоль правого края экрана, то слева откроется окно с датой, временем и другой полезной информацией.

На правой панели расположены следующие пять кнопок.

• Поиск - открывает одноименную панель

Это функциональное нововведение Windows 8: по сравнению с предыдущими версиями Windows поиск стал гораздо шире - теперь можно найти место на карте, информацию из приложений, элемент панели управления и т. д. В предыдущих версиях объектами поиска были только файлы и папки.

• Отправка - открывает панель, через интерфейс которой можно обмениваться информацией с другими пользователями, которые имеют доступ к вашему компьютеру. Если вы не подключали свой компьютер к локальной сети, данная кнопка вам не нужна.

• Пуск - возвращает вас на экран Пуск, в какой бы программе вы ни находились. Ее функционал повторяет клавиша Windows - нажать ее иногда бывает удобнее и быстрее.

• Устройства - нажав эту кнопку, вы получите доступ к одноименной панели и сможете управлять подключенными к компьютеру периферийными устройствами (принтером, сканером, дополнительным монитором ит. д.) при условии, что таковые есть.

• Параметры - вызывает одноименную панель которая предоставляет доступ к настройкам компьютера, а также позволяет выполнять другие действия, например изменять уровень громкости звука, выключать или перезагружать компьютер, управлять уведомлениями и сетью.

Правый нижний

Перемещение указателя мыши в правый нижний угол также вызовет панель Charms . Кроме нее здесь присутствует еще один маленький элемент - кнопка JJJ , с помощью которой можно уменьшить размер экрана Пуск, чтобы он принял следующий вид.

Эту кнопку удобно использовать для перехода к нужной части экрана Пуск, если на нем расположено слишком много плиток. Кроме того, она нужна во время работы с группами плиток.

Левый верхний

Перемещение указателя мыши в левый верхний угол приводит к отображению в нем последней запущенной программы. Если переместить указатель вниз, то слева появится панель с плитками всех открытых приложений в стиле Metros .

Вызвать ее также можно сочетанием клавиш Windows + Tab . Для перемещения по списку, удерживая Windows , нажимайте Tab . Для запуска программы, которая выделена в данный момент, отпустите клавишу Windows .

Левый нижний

Левый нижний угол служит для перехода к последней запущенной программе, если вы находитесь на экране Пуск, и для перехода к последнему, если вы открыли какое-нибудь приложение. Если ни одно приложение не запущено, левый нижний угол ничего не покажет.

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

Оценки [ ]

Принципы [ ]

Microsoft разработала Metro специально для укрепления группы общих задач для ускорения использования. Это достигается за счёт исключения лишней графики и вместо этого опоры на фактическое содержание, для функционирования в качестве основного пользовательского интерфейса.

Примерно одновременно с официальным выпуском Windows 8 (26 октября 2012 года), поскольку всё больше разработчиков и партнёров Microsoft начали работать над созданием новых приложений в стиле Metro, по этой теме были созданы многие веб-сайты с ресурсами, в том числе UX guidelines for Windows Store Apps от Microsoft.

Читайте также: