Оптимизируем свои трудозатраты при разработке приложения в Google Material Design

  • Tutorial


Данный материал может быть полезен как профессиональным дизайнерам интерфейсов, так и разработчикам, чьи познания в графических пакетах находятся ниже уровня “продвинутого пользователя”.

Итак, перед нами стоит задача: опираясь на готовые решения в открытом доступе, максимально оптимизировать затраченный труд на разработку приложения в стиле Google Material Design.

Стадия раз: прототипирование


Оно нужно, как минимум, для представления объемов приложения и состава экранов. Очень помогает в продумывании tap/click-путей (переходы между экранами). Я предпочитаю Axure, т.к. многие hot-keys сделаны 1 в 1 как в Adobe Photoshop (про остальные похожие продукты читайте в других статьях (в разделе “Дизайн” каждый третий пост на эту тему).

В него нужно установить три библиотеки:

Android_MaterialDesignV1.1 (Я.диск)

Достаточно навороченная библиотека, которая позволит составить прототип по всем гайдлайнам GMD. Особенность: многие элементы уже “приведены в действия”. Например pull to refresh работает сразу в скомпилированном html. Я думаю подойдет больше тем, кто хочет в прототипе уже “покликать”.


material-design-8 (Я.диск)

Более лёгкая и простая библиотека. Минимум готовых компонентов, но всё основное есть: чёрная и светлая темы, списки, карточки, кнопки, табы, диалоги, слайдеры и т.п… Отдаю ей предпочтение, так как чем меньше выбора, тем быстрее находится нужный элемент и перетягивется в прототип.


google-material-design-icons (Я.диск)

~750 векторных иконок от Google. Конечно можно использовать и дефолтный для Axure: Font awersome. Однако, реальные иконки придадут реальности прототипу.

upd: камрад ShLShepherd делится своей собственной коллекцией векторных material иконок (взято из каментов)


Стадия два: дизайн


Как я упомянул выше, я отдаю предпочтение графическим пакетам Adobe. Значит нужно воззвать к дизайнерскому коммьюнити. Стоит поискать энтузиазтов, которые уже собрали GMD UI kit, в котором элементы расставлены и выглядят в соответствии со спецификацией гугла. Отступы, шрифты, размеры и т.п. Из бесплатных мне понравилось два:

sepia_ui_kit (Я.диск 142mb)


Есть всё необходимое, но мало кастомных идей. Тем не менее, прорисовано все экраны 1 в 1, которые сам Гугл использовал в своей официальной документации по GMD. Минус только в том, что долго искать по подпапкам нужный элемент в собственном отдельном исходнике.

Cooking (Я.диск 434mb)


Этот ui kit наоборот чрезмерно богат кастомными идеями. Но авторы немного перегнули планку. Явный педант в этом исходнике заметит, что как минимум интенсивность шрифта кое-где не совпадает с документацией. Есть немного графиков, фривольных кнопок. Поможет “скреативить” собственный элемент, но остаться в стиле.
Суперская навигация: из первью есть ссылка в отдельный исходник по каждому экрану. Достаточно сделать двойной клик. Просто прекрасно!

Стадия три: разработка


Ваш безответственный дизайнер не хочет отдавать все иконки отдельными файлами строго по спецификациям? Я Вас очень понимаю. Идите на materialdesignicons.com и спокойно скачивайте либо SVG с нужной иконкой, либо полноценный zip-архив с png под все разрешения смартфонов. Можно найти и не только сеты гугловских родных иконок. В базе много кастомных пиктограмм, выполненных членами дизайнерского сообщества. Как говорится “Это Бесплатно, и это всегда будет Бесплатно”. Непосредственно для девелоперов удалось вообще найти праздник готовых решений (github). Например таких:


Или вот таких:


Должно хватить…

Рад, если Вам пригодился этот пост! Ну а если хотите, почитать как я проецировал GMD на десктопный продукт и какие выводы сделал, то начните с первой части (всего их четыре).

А если вам требуются услуги UX/UI-дизайнера
Я могу быть полезен для вашего мобильного/десктопного продукта! Разрабатываю интерфейсы для любых систем и платформ. Оказываю услуги по юзабилити консалтингу. Использую инженерно-итуитивный подход для построения оптимальных пользовательских сценариев. Обладаю врождённой способностью поставить себя на место пользователей и выявить возможные неоптимальности их будущего опыта. Понимаю, что в хорошем интерфейсе многое строится на мелочах, поэтому педантично отношусь к каждому пикселю. Пишите в скайп: creativiter / или почтой: kamushken@gmail.com


Метки:
Поделиться публикацией
Похожие публикации
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 16
  • +2
    У меня только одна просьба, ко всем разработчикам интерфейсов с такой или похожей анимацией.

    Сделайте ее отключаемой, полностью! А настройки можно брать из системных настроек разработчиков, там где настраивается скорость анимации и ее отключение, обычно это просто плавная прокрутка списков, но будет просто отлично, если можно будет отключать всю ненавистную, идиотскую, надоедливую, тормозную, бесящую,…
    • 0
      Откуда такая ненависть к анимации? На KitKat ее нету, завидую тем у кого lp
      • +1
        Включите developer mode и уменьшайте/отключайте любую анимацию.
        • 0
          это если разработчики приложений будут эту настройку учитывать!
          • 0
            xiaomi redmi 3 pro, miui 6, настройки производительности (там есть опция — отключить всю анимацию) и настройки скорости анимации в developer mode не влияют ни на что.
        • +4
          На мой взгляд, название не совсем точно отражает суть статьи. Б`ольшая её часть относится не к разработке приложения, а к его прототипированию и советы на самом деле позволяют оптимизировать этот процесс.

          Но про разработку сказано лишь то, где брать иконки и где можно поискать готовые компоненты.

          Если вы на самом деле хотели рассказать про то, как оптимизировать время на разработку в стиле Google Material Design, то стоило бы осветить плюсы и минусы как раз тех готовых компонент, ссылку на которые Вы дали (и поднять вопрос что лучше использовать — одну библиотеку с несколькими компонентами или отдельные библиотеки для разных компонент, с демонстрацией примеров).
          • –2
            В конце показаны два самых плохих паттерна Андроид — уезжающая за экран от пользователя навигация и меню для которого нужна вторая рука.
            • 0
              спасибо, что придрались… сходите по ссылке, там найдёте еще 10 примеров хуже, и около 50 — горазло лучше.
            • 0
              в яНдексе видимо какая то внутренняя политика запрещает пользоваться Github'ом.
              • 0
                В Яндексе почти вся разработка в GitHub. О чём вы?
                • 0
                  о ссылках на я.диск.
              • 0
                Библиотека иконок никакая не векторная.

                Делюсь своей собственной библиотечкой, все иконки перерисованы акшуровским pen'ом и реально масштабируются без потери качества.
                Плюс добиваю туда анимацию и прочие красивости.

                • 0
                  делись, но и линку не забывай :))
                  • +1
                    Почему-то линка не отобразилась…
                    Короче вот https://www.dropbox.com/s/a6ob31vy811dyau/Material.rplib?dl=0

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