idart Oct 30 2012 at 13:38

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

6 min

82K

Web design*

Comments 46

zim32 Oct 30 2012 at 13:44

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

SergeiStartsev Oct 30 2012 at 13:49

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

egavrin Oct 31 2012 at 09:54

Modern UI

ad1Dima Oct 31 2012 at 10:01

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

gok Oct 30 2012 at 13:55

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

SergeiStartsev Oct 30 2012 at 13:48

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

UFO landed and left these words here

danilf Oct 31 2012 at 00:06

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

ad1Dima Oct 31 2012 at 09:42

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

TAURUSiv43 Oct 30 2012 at 14:36

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

ad1Dima Oct 30 2012 at 15:24

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

idart Oct 30 2012 at 15:34

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

TAURUSiv43 Oct 30 2012 at 15:36

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

imater Oct 30 2012 at 14:40

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

Eskimo Oct 30 2012 at 14:59

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

ad1Dima Oct 30 2012 at 15:19

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

ichik Oct 30 2012 at 15:39

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

ad1Dima Oct 30 2012 at 15:40

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

ichik Oct 30 2012 at 15:47

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

ad1Dima Oct 30 2012 at 15:57

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

ichik Oct 30 2012 at 16:10

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

ad1Dima Oct 30 2012 at 16:35

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

alexpestov Oct 30 2012 at 15:03

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

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

alexpestov Oct 30 2012 at 15:00

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

achekalin Oct 30 2012 at 15:29

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

ichik Oct 30 2012 at 15:34

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

xaoc80 Oct 30 2012 at 15:35

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

ad1Dima Oct 30 2012 at 15:39

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

xaoc80 Oct 30 2012 at 15:41

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

ad1Dima Oct 30 2012 at 15:43

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

UFO landed and left these words here

dixx Oct 30 2012 at 15:49

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

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

ad1Dima Oct 30 2012 at 15:59

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

SeVit Oct 30 2012 at 17:50

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

ad1Dima Oct 30 2012 at 17:55

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

vitaly44 Oct 31 2012 at 11:43

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

ad1Dima Oct 31 2012 at 14:12

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

vitaly44 Oct 31 2012 at 14:27

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

ad1Dima Oct 31 2012 at 15:01

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

eklektikos Oct 30 2012 at 19:58

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

nick4fake Oct 30 2012 at 20:58

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

ShadowMaster Oct 30 2012 at 23:12

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

Keyten Oct 30 2012 at 23:20

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

vitaly44 Oct 31 2012 at 03:14

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