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

[zim32]

Мне казалось что название Metro уже не употребляется, а вместо него Windows 8 UI. Или я не прав?

[SergeiStartsev]

Правы, 'Metro User Interface' => 'Windows 8 style User Interface'

[egavrin]

Modern UI

[ad1Dima]

New windows UI, много названий используется.

[gok]

Компанией Microsoft не употребляется из-за неадекватов из супермаркетов Metro. А обычными людьми во всем мире по-прежнему употребляется, т.к. название точно отражает суть идеи.

[SergeiStartsev]

Какой-то запоздалый пост.

[danilf]

Меня тоже сначала удивил «новый современный» интерфейс своим плоским внешним видом. Ведь «трехмерность» один из текущих трендов. А то что в будущем все станет 3d, по поводу этого не возникает сомнений ни у меня, ни у писателей и режиссеров фантастических произведений и фильмов.

[ad1Dima]

Что любопытно, в 3хмерном пространстве тоже можно следовать принципам метро. Фантасты говорят что интерфейс заполнит реальное пространство, а не то какой стиль они будут преследовать.

[TAURUSiv43]

> Мы собрали несколько сайтов, имеющих дизайн Metro Style для вашего вдохновения.
А где сами сайты? Самое интересное — картинки на дриббле.

[ad1Dima]

Действительно не ссылок, ничего. Да и некоторые примеры, я бы сказал, о том как НЕ надо делать Metro.

[idart]

Все картинки из списка примеров кликабельны.

[TAURUSiv43]

То, что они кликабельны не делает их сайтами.

[imater]

Metro UI на iPhone кощунство. Разве нет?

[Eskimo]

ну это все-таки не метро =) мне кажется

[ad1Dima]

Почему нет? Типографика, Инфографика, данный конкретный скрин выполнен вполне в соответствии с принципами. Но надо, конечно, смотреть в действии.

[ichik]

Потому что Metro на Windows Phone выглядит по-другому?

[ad1Dima]

И что? Или вы тоже считаете, что метро — это цветные квадраты?

[ichik]

Типографика, Инфографика, данный конкретный скрин выполнен вполне в соответствии с принципами.
Советую открыть гайдлайны, чтобы убедиться что на показанном концепте они нарушены чуть менее, чем полностью.

[ad1Dima]

Гайдлайны wp7 частично нарушены. Но не стоит забывать, что гайдлайны wp7, это частная реализация принципов Metro. Так вот в этом примере, разве что к слишком явно выраженному градиенту можно придраться.
Если вы не согласны, скажите, что можно убрать с экрана, без потери контента?

[ichik]

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

[ad1Dima]

Где сказано, где должна быть размещена кнопка добавления? Даже в wp7 на аппбар ее нужно переносить только в том случае, если она относится ко всему контенту экрана.
О каких ссылках идет речь?
Про навигацию, по одному скрину, я судить не берусь, о чем и говорил выше: надо смотреть это в движении. Я вполне вижу тут и табы а ля таббар, и пивот, да и другие варианты.
Когда мы говорим о Метро, то там говориться однозначно: нужно учитывать окружение. То есть весь тот пользовательский опыт, который предоставляет платформа, возможности платформы, формфактор устройства.
Я не говорю, что данный скрин идеален, но стиль он выдерживает.

[alexpestov]

Почему бы и не взять хорошие приемы в дизайне с другой платформы?
Заметьте, это не копирование интерфейса. Это использование принципов Windows 8 UI.

На iOS еще есть замечатльный Track 8, который точно копирует интрефейс Metro:
itunes.apple.com/us/app/track-8/id519363162?mt=8

[alexpestov]

Нехорошо чужие статьи за свои выдавать.
Укажите, что перевод.
Вчера читал эту статью: designmodo.com/metro-ui/

[achekalin]

Скажите, а почему с заглавных букв слова «Веб Дизайн»?

[ichik]

Потому же почему в качестве ссылок на «веб-дизайн» ссылки на концепции интерфейса программ: плохой перевод изначально неграмотной вдобавок статьи.

[xaoc80]

Вопрос тем, кто занимается разработкой ПО для win 8 сейчас.
1. Есть ли библиотеки для разработки в стиле Метро на HTML/Javascript под WEB?
2. Насколько оправдана разработка под win 8 на HTML5. Есть такой опыт?
3. Как реализуется разработка интерфейса в стиле метро с использованием нативных технологий и .NET (С++, С#).
К примеру, можно ли писать ПО с использованием GUI в стиле «Метро» с использованием API win 8 на C++?

[ad1Dima]

3. для win 8 metro приложений есть расширение языка c++/cx

[xaoc80]

Я правильно понимаю, что фактически мы получим не нативный код, а .NET приложение?

[ad1Dima]

Нет, это именно нативный код, расширенный для работы с объектами winRT.

[dixx]

«Он должен „отвлечь и развлечь пользователя“»

Мне почему-то всегда казалось, что интерфейс должен предоставлять пользователю возможность максимально удобно решать свои задачи. А отвлекать и развлекать есть телевизор. По-моему они там что-то перепутали.

[ad1Dima]

Это явно ошибочное представление об анимации в контексте метро. Анимация тоже должна иметь смысл и подчеркивать связь между информацией.

[SeVit]

Раньше это было страшной сеткой с большими падингами, а теперь везде это стиль Metro, во как!

[ad1Dima]

Не стоит судить по данным примерам о стиле, они все (почти) попадают под него с весьма большой натяжкой.

[vitaly44]

Сделай уже что-нибудь, раскрой тайну стиля. Пожалуйста.

[ad1Dima]

Зачем, об этом уже много писал kichik и тут и в своем блоге. Зачем плодить одну и ту же инфу?

[vitaly44]

Про веб дизайне есть? Не видел… Покажи.

[ad1Dima]

Непосредственно применительно к веб-дизайну не видел.

[eklektikos]

когда смотрю на все эти скриншоты — сильно нравится концепция и чистота. люблю такой квадратный дизайн. но как вспомню, как был обладателем Omnia7 на WP7 и его убогий софт, то настроение портится (
возможно сейчас на WP8 всё намного лучше, не знаю… наверное надо попробывать, но недорогих смартов на WP8 как-то не видно на горизонте…

[nick4fake]

<< Например, Google уже много раз пыталась скопировать различные элементы MetroUI.
хочется, как в вики: правка -> {{источник}}

[ShadowMaster]

Чего-то я не помню в метро где поезда ездят обрезанных надписей. А в windows phone везде! Места полно, а надписи сделаны аршинным шрифтом и обрезаны с двух сторон. Нафига?

[Keyten]

В примеры я бы добавил MySpace

[vitaly44]

Ни о чем статья.
Ну да, примеры без описания концепций… Ну да, акцент на контент, без примеров… Патенты, очень ценная информация для дизайнеров…