Пользователь
0,0
рейтинг
3 ноября 2012 в 20:28

Дизайн → Подборка инструментов для создания веб-интерфейсов в стиле Metro

Представляю вашему вниманию подбору фреймворков, темплейтов, jquery-плагинов и иконок для создания интерфейсов в стиле Windows 8.



Фреймворки и темплейты


METRO UI CSS — один из самых популярных фреймворков на данный момент от украинского разработчика Сергея Пименова.



BootMetro — темплейт для Twitter Bootstrap, недавно вышла новая версия, которую уже можно использовать на рабочих проектах.



metro-bootstrap — аналогичная разработка с использованием LESS.



Metro UI template — еще один фреймворк, набирающий популярность, отличается качеством и большим количеством готовых «плиток»: RSS, Твиттер, погода и т.д.



Droptiles.com — стартовая страница в стиле Windows 8 (аналог iGoogle).



PHP Image Gallery In Metro UI — фотогалерея в метро-стиле.



jQuery-плагины


jq-metro — плагин, помогающий создать некоторые элементы metro-интерфейса: прогресс-бар, переключатели, панорама и т.д.



Metro JS — помогает создавать плитку и другие элементы.



jQuery Metro UI Plugin — тоже создатель metro-плитки.



jQuery Mobile Metro Theme — плагин для мобильной версии.



Metro UI Theme Builder For jQuery UI — создание отличных metro-элементов.



TileJS (не jQuery) — простой скрипт создания плиток.



Бесплатные иконки


Modern UI Icons в форматах .design, 48*48px PNG и как XAML-файлы.



Metro UI Dock Icon Set — в форматах 512*512px .PNG, 256*256px .ICO и .SVG



Metro Icons — 130 .PNG иконок.

@grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • +27
    Практически все библиотеки для создания «Modern UI»-подобного интерфейса пока полный шлак…
    • –1
      Кроме первого
      • 0
        У первого как начинаешь разбираться с версткой элементов — так хочется взять и написать все с 0.
        В частности строение горизонтального меню и блоков вроде футера (с их непонятной кучей padding'ов и margin'ов просто выводит.
    • +17
      Если посмотреть на эти сайтики с библиотечками, то может сложиться впечатление, что

      Metro UI = цветастые прямоугольники без круглых уголков + горизонтальные скроллбары + огромные иконки и минимум текста + много пустого места

      хотя на самом деле

      Metro UI = информация на первом месте

      Боюсь, что метро-юай ждёт та же печальная участь, что и риббоны — полностью исковеркают смысл изобретения в погоне за стилем, слепо скопировав внешний вид и создав до невозможности ужасные интерфейсы. Я до сих пор не видел ни одного нормального риббона (кроме мелкомягкоофисного). И, судя по увиденным сайтам, мне не суждено увидеть нормального метро-юая (кроме как в мелкомягкогом софте, как повелось).

      Но всё равно будут клепать. Модно же.

      (нецензурная брань)
  • –5
    Это пять!!! Большое спасибо за подборку!
    • +2
      Только реальной пользы от этой подборки нету, как это не печально.
  • +3
    Когда смотрю не вещи типа Droptiles.com, задаю себе вопрос, как можно было сделать так чертовски плохо элементарные вещи, и ещё демонстрировать. В опере с ним творится не понять что.
    • 0
      Возможно, проблема в Опере?
      • 0
        Возможно и проблема оперы но как так можно было написать, чтобы её найти? Я не первый год пишу на javascript, имею представления как писать подобное. То, что сделал автор сайта, уникально, нужно было ещё умудриться так написать.
  • 0
    Кстати, не нашел в списке Metro Dynamis. Выглядел первое время лучше других, жаль только что, кажется, больше полугода не обновлялся
    • 0
      так скажем — сейчас все самые «вкусные» плюшки стали платными ;) также проблему совместимости с браузерами и разными разрешениями там и не пофиксили полностью.
  • +3
    Не нравится мне что со стилем ссылок на сайтах в стиле Метро.

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

    И фиг с два же докажешь, что так нельзя, если Мсофт так делает…
    • 0
      вообще-то обычно ссылки выделяют другим цветом, смотрим например приложение Windows 8 Remote Desktop Connection — там это хорошо видно.
  • +6
    Удивительный парадокс: я еще ни разу не видел Metro UI «вживую», но он мне уже осточертел. Как-то его слишком много стало на Хабре.
    • +4
      Попробуйте пощупать аппарат на Windows Phone 7/8 и поймете, почему вокруг Modern UI такой ажиотаж.

      Windows 8 так не впечатлит. И да, примеры, представленные на этой странице, до каноничного Modern UI не дотягивают. То дерганно, то отступы не выдержаны, то лишнее оформление, то цветовая гамма не подобрана до уровню контраста. В общем чтобы сделать хороший интерфейс а-ля iOS можно быть посредственным дизайнером, но хорошим копировщиком идей, а чтобы сделать хороший Modern UI нужно быть изначально хорошим дизайнером и тут никакой copy-paste не поможет, поскольку интерфейс для каждой задачи должен быть уникальным
      • –2
        а если быть честным — то сейчас упоминания Metro нету — в офф. документах он называется Windows 8 UI (и для Phone версии тоже)
    • 0
      Это крутой мобилковый интерфейс.

      Но. Он всем осточертеет, рано или поздно. Не потому что он плохой, а потому что — пардон за мой французский — орда дизайнеров-идиотов будет пытаться копировать стиль без приложения мозга. Большинство ссылок в топике — яркий пример такого творчества.
  • +3
    Ничего против этого интерфейса не имею, но для меня этот интерфейс совершенно непонятен. Не интуитивен ни разу.
    Чтобы что-то найти, нужно либо цветом выделять (но на всех цветов не хватит, да и дизайнеры рекомендуют более трех цветов не использовать в интерфейсе — глаза режет), либо читать каждый кирпичик глазами (и с досадой понимать, что это не тот), либо запоминать место, куда поместил нужный блок (тогда зачем вообще огород городить, если заранее все нужно запомнить).

    Словом, моему глазу зацепиться не за что и оттого я ощущаю такой дискомфорт, «что кюшать не могу!» (к.ф. «Мимино»).

    Теперь ближе к теме, Win8 — ОС по описанию оснащения лучше Win7, кроме того по программе MS предлагают перейти на нее за 500р. Можно ли в Win8 использовать прежний интерфейс от Win7 или даже Win Classic?

    Просто апгрейдить до Win8 и искать возможность комфортной работы — не вариант, поскольку время дороже, да и боюсь, что downgrade не сделать потом.

    Друзья, подскажите, отключается ли Метро-интерфейс в Win8?

    (Написал бы в вопросы, но тут как раз тема про интерфейсы Метро)
    Заранее спасибо за советы!
    • +1
      Привыкание у меня наступило за 4 часа. У друга — за двое суток.
    • –1
      Новый интерфейс не отключается. Но на десктопе он не заменяет старый интерфейс, а работает лишь как лаунчер для софта, заменяя собой прежнее главное меню. А уж удобный ли из него лаунчер, это дело вкуса. Я вот жить без него уже не могу. :) А другим не нравится, и я понимаю, почему.

      А классический (упрощенный) интерфейс выпилили, как я понял.
      • 0
        Классическое меню пуск можно вернуть, если мне память не изменяет.
        • 0
          в релиз версии вроде должны были вырезать этот модуль фактически, но умельцы из Stardock сделали обвес в классик стиле.
        • 0
          Да не, ампутировали, насовсем. Самсунг вон уже погрозился воссоздать в ноутах «Пуск» сторонним софтом.
          • 0
            Я честно не понимаю, зачем? Как по мне довольно удобно сделали.
            • 0
              Чтобы не ходить в metro для того, чтобы посмотреть список установленных программ. Тем более, когда metro интерфейс не содержит все иконки, нужно делать дополнительные клики чтобы добраться до полного списка приложений.
              • 0
                А в обычном меню не нужно делать этот самый дополнительный клик?
                • 0
                  Давайте посмотрим.
                  Обычный интерфейс (стоит учитывать, что пользователи 7-ки привыкли к этому подходу):
                  — Кнопка WIN + клик на «All Programs».
                  — Кнопка WIN + поиск.

                  В metro (для пользователей это что-то новое и непривычное):
                  — Кнопка WIN + клик правой кнопки (чтобы показались дополнительные опции) + клик на «All Apps».
                  — Win + Q (для поиска). Я не знаю, ищет ли он приложения (под рукой нет установленной версии).

                  Есть ли другие способы?
                  • 0
                    Если честно не помню такого кейса, по которому нужно лесть просто так в список всех программ. Обычно все же там надо что-то найти. А так да — Win+Q — ищет и в программах, и в параметрах и по файлам. Да и можно просто нажать Win и начать вводить поисковой запрос.

                    Я не так часто лажу в меню пуск, у меня все запинено в бар и я просто делаю Win+1, Win+2 (со времен 7-ки собственно). Большинство же просто тянуться мышкой к таскбару, и в меню пуск особо не лазят. Ну это только по опыту моих знакомых-гуманитариев.
                    • 0
                      Если честно не помню такого кейса, по которому нужно лесть просто так в список всех программ.
                      А так да — Win+Q — ищет и в программах, и в параметрах и по файлам. Да и можно просто нажать Win и начать вводить поисковой запрос.

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

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

                      Я не так часто лажу в меню пуск, у меня все запинено в бар и я просто делаю Win+1, Win+2 (со времен 7-ки собственно).

                      Сам этим пользуюсь часто, но не люблю захломлять панель иконками, которые используешь раз в месяц. Аналогично с рабочим столом/metro оболочкой (на мой взгляд — это один из недостатков iOS).

                      Пользуюсь win 8 уже неделю, но до сих пор не привык к новому подходу, скучаю по «пуску».
                  • 0
                    Поиск работает так же: WIN + поиск.

                    А вот для All programs правда нужно еще правый клик делать. Но, хотя может это и не очевидно, поиск глазами в общем списке приложений происходит гораздо быстрее засчет развернутости, плюс не нужно заглядывать лишний раз в папки, как это было раньше, все пункты теперь раскрыты, так что получается что и кликов в конечном счете столько же.

                    Да и пользоваться этим приходится теперь гораздо реже, т.к. абсолютно всё что нужно цепляется на стартовый экран без ущерба юзабельности и запускается в один клик.
                    • 0
                      Чуть выше ответил. Дело привычки.
  • 0
    Ну вот, уже на метро-уй начинают мастурбировать. А еще совсем недавно плеваться изволили-с. Только стоит какой-то крупной компании изрыгнуть какую-нибудь фиговину и крупно ее прорекламировать, тут же все начинают себе обезьянничать и копипастить — то айфон-стайл, то фейсбук-стайл, то гугл-стайл, то гангнам-стайл майкрософт-стайл. Тьфу, смотреть противно.

    P. S. для идейных: ничего против Metro-UI (iPhone/G+/<свой вариант>) не имею, хай живет, но пихать его всюду — это уж слишком, извините.
  • +1
    Спасибо, попробуем эти плюшки.

    Добавлю от себя Metro Studio 2 — довольно удобная штука для работы с монохромными иконками. 1700 штук в комплекте, их можно редактировать по некоторым параметрам; экспортировать, автоматом клеить спрайты; делать иконки из шрифтов. Не реклама. :)
  • 0
    Если я не ошибаюсь, то стиль интерфейса Windows 8 называть «Metro» не корректно теперь.
    • 0
      Зато микрософт не засудит.
    • 0
      все верно, в SDK везде теперь он описывается как «Windows 8 UI» (после решения суда), а в ранних версиях «Metro UI»
  • +2
    Заказчику: «вы ничего не понимаете, это не у меня вкуса нет, это Metro UI».
  • 0
    Добавлю Subway Theme для WP и Joomla от YOOtheme
  • +3
    Авторы всех фреймворков наверное очень спешили выпустить в свет свой продукт. Отсюда столько косяков
  • 0
    > PHP Image Gallery In Metro UI — фотогалерея в метро-стиле.

    Мне даже страшно спрашивать, в чём заключается «метро-стиль» этой галереи.
  • 0
  • 0
    пока был дома на больничном вот что получилось, конечно далеко до metro ui, но старался инфу на передний план, правда это не законченная работа, кое-где размеры шрифтов подправить и хочу добавить респонсив. Не сочтите за рекламу, просто хочу услышать мнение потому как мне очень нравится изначальный концепт дизайна.
    • 0
      я не дизайнер, но это не красиво и не юзабельно.
      • 0
        я к счастью тоже не дизайнер, но намек понятен, кг/ам…
        впредь постараюсь такого не делать.
        • 0
          Да не, вы не бросайте, раз уж начали. Креатив надо выплескивать, освобождать место для нового креатива. :) Почитайте блог майкрософта, поизучайте гайдлайны, попробуйте проникнуться.

          Суть не в том, чтобы изъять текстуры и увеличить масштаб. Тут вообще другой подход к UX. Потребуется поменять парадигмы поведения и восприятия. И такой подход подойдет далеко не для каждой веб-страницы, об этом надо помнить.

          Надеюсь, не обидел. :) Желаю успехов. Обязательно покажите потом, когда доделаете.
  • –2
    Вчера поставил на ноут (без тача) этот ваш Уиндоус 8 и мной овладел долгий фейспалм…
    <angry>
    Ребята ну что вы делаете!? Ну зачем пихать свой Метро во все подряд? Ну нахрена он нужен на десктопе, а уж тем более на ноуте без тача. Я не говорю о том, что тачпад + Метро = ужас полнейший, пользоваться невозможно. Ладно хрен с ним с Метро, может кому-то нравятся все эти извращения, но… Зачееем, зачееем вы выпилили стандартный православный Пуск!??? >_< Мало того что его больше нет, так сей удобный элемент интерфейса невозможно вернуть стандартными средствами! Приходится ставить тулзы типа Start8. Это ли не пи*дец!?? Интеграция Метро и классического стиля — это эпопея идиотзима! Поставил Хром, открыл его в классик-стайле, перешел в Метро — а там он не запущен, при клике по плитке Хрома — открылся новый Хром с новым сеансом 0_o Спрашивается — зачем мне 2 Хрома??? Возможно это недоработка (или шутка :) Гугла, но как бы авторитетная крупная корпорация не могла пропустить такой косяк. И это лишь малая часть проблем. Идем далее, блютуз. Сижу в классическом стиле, пытаюсь отправить файл на смартфон, смартфон сообщил о сопряжении устройств, жду такого же оповещения в винде… долго ждал, несколько раз переподключался, эффекта нет. В итоге решил сходить по метро-параметрам… каково же было мое удивление — именно там и только там есть возможность разрешить сопряжение устройств, именно там и только там появляется Метро окно с оповещением о сопряжении причем без каких либо нотификаций в классический режим в котором я сижу, именно там и только там есть возможность выключить блютуз (какого-то фига пункт о его отключении выпилили из контекстного меню блютуз-адаптера в трее). Такая каша в интерфейсах и их разнообразие просто сводит на нет оптимальное и удобное пользование ОСью. Виндоус Стор обсуждать вообще нет смысла — там пока ничего интересного нет, несколько игрушек, погодный виджет, новостные плитки, остальное — шлак.
    В общем такого разочарования у меня еще ни одна винда не вызывала. Такого наплевательского отношения к разработке интерфейсов я еще не видел. Такого фейла у МС еще не было.
    </angry>

    … или может я не прав?
    • –1
      Нуу вы же видели скрины, как минимум, да? :) Знали на что идете, зачем злиться? Да и майкрософт сами говорят что это экспериментальная ось, переделанная семерка. Функционально там мало нового. Больше философии и изотерики. :))

      Лично я не заметил пока каких-то неудобств. Вообще. Серьезно, это дело привычек. И вкуса, конечно. Как любитель работы с клавиатурой, могу отметить высокую скорость поиска, в остальном юзкейс почти не изменился. Жмешь WIN, набираешь текст, жмешь ВВОД. То же самое, что и раньше. Только метро-пуск мелькает на две секунды перед глазами.

      А вы вообще на убунтовода похожи. :) Так что какой вам смысл привыкать к восьмерке и этой каше? Ждите девятку со спокойной душой. :) Ну или 14.04 LTS. :)
      • +1
        Нуу вы же видели скрины, как минимум, да? :) Знали на что идете, зачем злиться? Да и майкрософт сами говорят что это экспериментальная ось, переделанная семерка. Функционально там мало нового. Больше философии и изотерики. :))

        Во-первых: где это МС говорят что ОСь экспериментальная и переделанная семерка? Я че-то пропустил? Дайте ссылку.
        Во-вторых: если б это, как вы говорите, была экспериментальная ОСь, то какого черта ее пускают в продажу и пихают (начнут пихать) во все ноуты\компы?
        Лично я не заметил пока каких-то неудобств. Вообще. Серьезно, это дело привычек. И вкуса, конечно. Как любитель работы с клавиатурой, могу отметить высокую скорость поиска, в остальном юзкейс почти не изменился. Жмешь WIN, набираешь текст, жмешь ВВОД. То же самое, что и раньше. Только метро-пуск мелькает на две секунды перед глазами.

        Вся эта выезжающая хрень, постоянно разный интерфейс при нажатии Win-клавиши, плитки, даст иш квадратиш и прочая лабуда — это все очень интересно, но вы так и не ответили — нафига нужен Метро на десктопе? Вот реальный аргумент в защиту есть?
        А вы вообще на убунтовода похожи. :) Так что какой вам смысл привыкать к восьмерке и этой каше? Ждите девятку со спокойной душой. :) Ну или 14.04 LTS. :)

        Ну и? Что теперь винда — табу для всех кто пользуется линухом? ИМХО, адекватный ИТ-шник должен знать все популярные ОСи, ПО, железо и все что с этим связано, знать их плюсы и минусы. Я даже и не заикался о линухе, но вы почему-то решили его сюда приплести.
        • +1
          Ну как минимум я не испытываю дискомфорта от metro (к слову что вы подразумеваете под этим словом хоть?) в Win8 на моем ноуте. Пользуюсь с мая и уходить с нее не собираюсь. Скажем я не вижу смысла в Skype под метро на десктопе, но вас же никто и не заставляет его ставить. У вас просто есть выбор. Единственное что вот вообще никак не убрать — это «Пуск» в стиле метро. Причем я не вижу опять же и тут ничего плохого. Удобная навигация, удобный поиск по многим параметрам, все довольно просто, управление с клавиатуры… Нету теперь этих дурацких папок. Еще один пример где метро не так уж плохо смотрится — панель управления в режиме метро (ограниченна конечно, но смотрится куда лучше чем гора иконок). А таскменеджер новый вообще лепота.

          Словом это дело привычки. Если не брать в расчет расхождения во мнениях касательно интерфейса — то Win8 очень даже неплохая штука, в сравнении с той же семеркой. Да и для разработчиков приложений плюшек добавилось. Начиная WinRT и заканчивая виртуализацией из коробки.
          • 0
            Ну т.е. по сути только поиск, потому как таскменеджер обычному юзеру до фени. Почему же тогда они не удосужились сделать этот удобный поиск и в классической винде?
            Нету теперь этих дурацких папок

            Угу, ну плитки на пол экрана конечно же куда лучше :) Смешно читать.
            панель управления в режиме метро (ограниченна конечно, но смотрится куда лучше чем гора иконок)

            А гора плиток смотрится куда лучше? :) Не издевайтесь. Вы находите недостатки там, где их не было.

            В общем вы абсолютно не объективны и продолжать дискуссию бессмысленно. Попробуйте посмотреть на вин8 с позиции пользователя и поймете, что пользоваться ей не привычно и не удобно по сравнению с предыдущими виндами, которые хоть и меняли свой облик, но единство и общий принцип работы с ОС оставался тот же.
            • 0
              А с какой позиции, позвольте спросить, я смотрю на Win8, если я являюсь ее пользователем? Принцип работы ОС по сравнению с Win 7 и даже Win Vista не претерпел существенных изменений. Касательно меню Пуск — помниться люди по тем же причинам на XP включали меню из Win 98, так же потому, что было непривычно и неудобно. Но люди привыкли, и им стало удобно. Просто кому-то для этого нужно не так много времени, а кому-то наоборот.
        • 0
          разный интерфейс при нажатии Win-клавиши, плитки, даст иш квадратиш и прочая лабуда

          Ощущение, что вы предвзято относитесь, не разобравшийсь во всем. Повторяю в тысячный раз: это удобный и быстрый инструмент. Вот вы мне скажите, а у вас есть реальный аргумент в защиту пуска? Ну кроме православия. (Остальные аспекты работы с новым интерфейсом не будем учитывать, так как на десктопе они незначительны и ограничиваются запуском приложений и поиском, то есть заменяют старое меню)
          • 0
            Вот вы мне скажите, а у вас есть реальный аргумент в защиту пуска?

            Это отправная точка для всего. Как театр начинается с вешалки, так и винда начинается с Пуска. Вы вспомните что происходило после установки XP (именно в ХР появился улучшенный Пуск)? Правильно, открывалось меню Пуск. Открывалось небольшое, удобное (с т.з. пользователя) меню, которое имело функционал, необходимый для работы. Есть список прог которыми часто пользуешься\список всех прог, есть поле для запуска команд, оно же является строкой поиска, переход к дискам, к панели управления, выключение\перезагрузка компа, переход к файлам пользователя. Ко всему этому можно было перейти просто наведением курсора на пункт меню и кликом по нему левой кнопкой мыши. Что может быть проще и удобнее?
            • 0
              Так по сути ничего и не изменилось, разве что до кнопки выключения добраться стало сложно.
            • 0
              Всё верно, ничего не изменилось. Так же нажимаем кнопку и запускаем программу/ищем файл/ищем что-то еще. Только это растянулось на полный экран, зато формирование меню более гибкое, одновременно видно очень много программ, их можно группировать, выделять, очень быстро прокручивать. Полноэкранный режим, возможно, может быть спорным моментом. Но юзкейс исполняется один в один, как раньше. Те же списки программ/всех программ, те же документы. Плюс глобальный поиск по системе и приложениям. Например, я могу в [ четыре нажатия + набор ключевого слова ] начать смотреть фильм, или читать книгу, изучать кухонный рецепт, начать набирать новый имейл, и т.д.

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