Пользователь
0,0
рейтинг
30 октября 2012 в 13:38

Дизайн → Metro User Interface: Описание и примеры Веб Дизайна



Новый интерфейс в стиле 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 для вашего вдохновения. Для большинства из них, из метро особенностей, можно выделить в сетке плитки, мы видим на сайтах вдохновение в других важных аспектах, таких, как тип, выбор образов и иконографики.

Концепция пользовательского интерфейса Windows




Metro Dashboard




Windows 8 Дневной режим




Windows 8 Ночной режим




Zepppelin




Metro Dribbble




Metro web




Metro Style Form




Experiment with Metro UI




Portfolio




Metrofy




Metro – Personal Portfolio HTML5/CSS3 vCard




MetroStyle




Pressboard – Responsive Social Magazine Theme




Matrix – Responsive WordPress Theme




Windows Phone UK




WinRumors




The Verge


\

Первоисточник.

Заключение



На мой взгляд, Microsoft создала очень интересный дизайн. Мы можем спорить о многочисленных плюсах, и о не менее многочисленных минусах, но по крайней мере есть интересная концепция. И самое главное, операционная система имеет свое собственное лицо, которое отличает его на рынке.
idart @idart
карма
8,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (46)

  • +13
    Мне казалось что название Metro уже не употребляется, а вместо него Windows 8 UI. Или я не прав?
    • 0
      Правы, 'Metro User Interface' => 'Windows 8 style User Interface'
      • 0
        Modern UI
        • 0
          New windows UI, много названий используется.
    • +2
      Компанией Microsoft не употребляется из-за неадекватов из супермаркетов Metro. А обычными людьми во всем мире по-прежнему употребляется, т.к. название точно отражает суть идеи.
  • +5
    Какой-то запоздалый пост.
  • –1
    Чёрт, ну плохо же( Глаз разбегается и раздражает плоский интерфейс.
    • –2
      А доводы минусам?
      • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Меня тоже сначала удивил «новый современный» интерфейс своим плоским внешним видом. Ведь «трехмерность» один из текущих трендов. А то что в будущем все станет 3d, по поводу этого не возникает сомнений ни у меня, ни у писателей и режиссеров фантастических произведений и фильмов.
      • 0
        Что любопытно, в 3хмерном пространстве тоже можно следовать принципам метро. Фантасты говорят что интерфейс заполнит реальное пространство, а не то какой стиль они будут преследовать.
  • 0
    > Мы собрали несколько сайтов, имеющих дизайн Metro Style для вашего вдохновения.
    А где сами сайты? Самое интересное — картинки на дриббле.
    • +1
      Действительно не ссылок, ничего. Да и некоторые примеры, я бы сказал, о том как НЕ надо делать Metro.
    • 0
      Все картинки из списка примеров кликабельны.
      • +4
        То, что они кликабельны не делает их сайтами.
  • –4
    Metro UI на iPhone кощунство. Разве нет?
    image
    • +1
      ну это все-таки не метро =) мне кажется
      • –2
        Почему нет? Типографика, Инфографика, данный конкретный скрин выполнен вполне в соответствии с принципами. Но надо, конечно, смотреть в действии.
        • 0
          Потому что Metro на Windows Phone выглядит по-другому?
          • 0
            И что? Или вы тоже считаете, что метро — это цветные квадраты?
            • +1
              Типографика, Инфографика, данный конкретный скрин выполнен вполне в соответствии с принципами.
              Советую открыть гайдлайны, чтобы убедиться что на показанном концепте они нарушены чуть менее, чем полностью.
              • 0
                Гайдлайны wp7 частично нарушены. Но не стоит забывать, что гайдлайны wp7, это частная реализация принципов Metro. Так вот в этом примере, разве что к слишком явно выраженному градиенту можно придраться.
                Если вы не согласны, скажите, что можно убрать с экрана, без потери контента?
                • 0
                  Градиенты гайдлайнам не противоречат ни в коей мере, а вот мелкие шрифты, ссылки вместо группировки на табах, неверное размещение кнопки по добавлению контента — это все противоречит. Причем не только гайдлайнам, но и принципам организации контента и навигации в Metro.
                  • 0
                    Где сказано, где должна быть размещена кнопка добавления? Даже в wp7 на аппбар ее нужно переносить только в том случае, если она относится ко всему контенту экрана.
                    О каких ссылках идет речь?
                    Про навигацию, по одному скрину, я судить не берусь, о чем и говорил выше: надо смотреть это в движении. Я вполне вижу тут и табы а ля таббар, и пивот, да и другие варианты.
                    Когда мы говорим о Метро, то там говориться однозначно: нужно учитывать окружение. То есть весь тот пользовательский опыт, который предоставляет платформа, возможности платформы, формфактор устройства.
                    Я не говорю, что данный скрин идеален, но стиль он выдерживает.
    • 0
      Почему бы и не взять хорошие приемы в дизайне с другой платформы?
      Заметьте, это не копирование интерфейса. Это использование принципов Windows 8 UI.

      На iOS еще есть замечатльный Track 8, который точно копирует интрефейс Metro:
      itunes.apple.com/us/app/track-8/id519363162?mt=8
  • +6
    Нехорошо чужие статьи за свои выдавать.
    Укажите, что перевод.
    Вчера читал эту статью: designmodo.com/metro-ui/
  • +1
    Скажите, а почему с заглавных букв слова «Веб Дизайн»?
    • +3
      Потому же почему в качестве ссылок на «веб-дизайн» ссылки на концепции интерфейса программ: плохой перевод изначально неграмотной вдобавок статьи.
  • +1
    Вопрос тем, кто занимается разработкой ПО для win 8 сейчас.
    1. Есть ли библиотеки для разработки в стиле Метро на HTML/Javascript под WEB?
    2. Насколько оправдана разработка под win 8 на HTML5. Есть такой опыт?
    3. Как реализуется разработка интерфейса в стиле метро с использованием нативных технологий и .NET (С++, С#).
    К примеру, можно ли писать ПО с использованием GUI в стиле «Метро» с использованием API win 8 на C++?
    • +1
      3. для win 8 metro приложений есть расширение языка c++/cx
      • 0
        Я правильно понимаю, что фактически мы получим не нативный код, а .NET приложение?
        • +1
          Нет, это именно нативный код, расширенный для работы с объектами winRT.
    • +1
      Для web, самое интересное, кажется это metroui.org.ua/.
  • +3
    «Он должен „отвлечь и развлечь пользователя“»

    Мне почему-то всегда казалось, что интерфейс должен предоставлять пользователю возможность максимально удобно решать свои задачи. А отвлекать и развлекать есть телевизор. По-моему они там что-то перепутали.
    • 0
      Это явно ошибочное представление об анимации в контексте метро. Анимация тоже должна иметь смысл и подчеркивать связь между информацией.
  • 0
    Раньше это было страшной сеткой с большими падингами, а теперь везде это стиль Metro, во как!
    • 0
      Не стоит судить по данным примерам о стиле, они все (почти) попадают под него с весьма большой натяжкой.
      • 0
        Сделай уже что-нибудь, раскрой тайну стиля. Пожалуйста.
        • 0
          Зачем, об этом уже много писал kichik и тут и в своем блоге. Зачем плодить одну и ту же инфу?
          • 0
            Про веб дизайне есть? Не видел… Покажи.
            • 0
              Непосредственно применительно к веб-дизайну не видел.
  • 0
    когда смотрю на все эти скриншоты — сильно нравится концепция и чистота. люблю такой квадратный дизайн. но как вспомню, как был обладателем Omnia7 на WP7 и его убогий софт, то настроение портится (
    возможно сейчас на WP8 всё намного лучше, не знаю… наверное надо попробывать, но недорогих смартов на WP8 как-то не видно на горизонте…
  • +1
    << Например, Google уже много раз пыталась скопировать различные элементы MetroUI.
    хочется, как в вики: правка -> {{источник}}
  • 0
    Чего-то я не помню в метро где поезда ездят обрезанных надписей. А в windows phone везде! Места полно, а надписи сделаны аршинным шрифтом и обрезаны с двух сторон. Нафига?
  • 0
    В примеры я бы добавил MySpace
  • +1
    Ни о чем статья.
    Ну да, примеры без описания концепций… Ну да, акцент на контент, без примеров… Патенты, очень ценная информация для дизайнеров…

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.