Екатеринбург:

+7 (343) 219-08-80
Главная / Блог / Что такое Метро (Metro User Interface)

Что такое Метро (Metro User Interface)

Что такое Метро (Metro User Interface)

13 августа 2014 | 96 просмотров

Блог

«Метро» начал зарождаться в 90-х годах. На основе стиля, который впервые Microsoft применил для Windows Phone 7, и появился дизайн под названием «Metro». Самое распространенное мнение о происхождении такого названия - вдохновение от знаков, используемых в системе общественного транспорта по пути к зданию Microsoft возле Сиэтла.
 
 
Для Windows Phone 7, в компании Microsoft разработали смпециальное семейство шрифтов Segoe. Основной задачей ставилась читаемость шрифта даже при маленьких разрешениях.
 
 
Как на практике выглядит Metro?
 
Дизайн такого пользовательского интерфейса основан на квадратах (плитках), в которых представлен текст, а не изображения. Все шрифты большие и четкие, из семейства Segoe. Для устройств с сенсорным экраном, такой стиль наиболее актуален. В качестве плиток часто используются различные шаблоны, например, обложка музыкального альбома.
 
 
Основные принципы
 
Microsoft перечислил четыре основных принципа, которые помогут унифицировать интерфейсы в стиле метро:
 
1. Чистое содержание (в оригинале «content not chrome»). Это означает, что дизайн ограничивается только различием цвета фонов: страницы и плиток (под текстом). Также не используются градиенты, обрамления, тени и другие элементы, не несущие смысловой нагрузки, с целью не отвлекать от чтения текста.
 
Примечание: «хром» - термин, обозначающий элемент обрамления, он никак не относится к браузеру Google Chrome.
 
2. Типографика. Её использование должно быть не только ради красоты, прежде всего, она должна нести смысловую нагрузку. В данном случае, под типографикой понимается использование различных параметров шрифтов (размер, насыщенность, цвет и прочее), отличных от тех, которые используются для основной информации (содержания, контента). Хороший пример использования типографики - структурирование информации.
 
3. Движение. Анимация, используемая при переходах, приводит интерфейс к жизни. Это позволяет прочувствовать глубину и измерение, что улучшает восприятие и производительность системы в общем.
 
4. Честность. Интерфейс Metro не предполагает воссоздание физических объектов из реального мира. Здесь правит цифровой мир, состоящий из пикселей, который предназначен только для подачи информации.
 
Основа дизайна Metro - концентрация внимания на содержании.
 
Юзабилити сайтов с Metro UI
 
Любой пользовательский интерфейс должен быть построен так, чтобы без всякой документации, человек сам легко и интуитивно смог с ним взаимодействовать. Стремительными темпами веб-дизайн развивается в сторону мобильных устройств. И в связи с этим, в мобильном интернете четко просматриваются две грани дизайна: сайтов и приложений. 
 
Существенные различия между стандартным дизайном сайта и современных приложений - разрешение экрана и способ манипуляции (компьютерная мышь, прикосновения). Исходя из этих различий, не стоит применять интерфейс для широких мониторов, используя мобильный дизайн, и наоборот. В первую очередь, это касается элементов навигации - ссылок. 
 
Пользуясь мышью, удобно чтобы ссылки были относительно небольшими. Для сенсорного экрана - наоборот, они должны быть крупными, чтобы легче было попасть пальцем. Metro UI изначально был разработан для смартфона. Внедрять его по стандартам Microsoft в широкоформатные сайты нужно очень осторожно и с умом.
 
Разрешение экрана сильно влияет на способ считывания информации. Стандартный дизайн сайта привычен для широких мониторов, применяя вместо него дизайн Metro, мы сталкиваемся с беспорядком. На мобильном же устройстве с привыканием все будет гармонично и лаконично. Еще одной особенностью дизайна Metro является горизонтальная прокрутка, которая чужда для обычных мониторов.
 
Вывод
 
При создании адаптивного дизайна следует учитывать все аспекты юзабилити. Metro UI не привычен обычным пользователям, особенно тем, кто не пользуется смартфонами. На обычном сайте с дизайном Metro очень сложно разобраться, где элемент навигации, а где обычное изображение. Поэтому в чистом виде его использовать не стоит. Самый оптимальный вариант - используя принципы Metro создать свой удобный, живой интерфейс.
 
Большинство людей живет в реальном мире, а не в цифровом. Неспроста, реалистичные изображения вызывают доверие, спокойствие, гармонию и множество других положительных эмоций. Metro выглядит футуристично и нашему поколению придется либо приспособиться, либо отказаться от такого дизайна.
 
Автор: Галина Белоусова
Источник: dizajn.by, designmodo.com
Картинки: designmodo.com, 2web-master.ru

Сегодня 1 просмотр этой страницы
На сайте site365.ru мы не собираем и не храним никакую информацию без вашего согласия.
Cookie используются для сбора статистики и информации технического характера и хранятся на вашем устройстве.

Принять и закрыть