Google вызвал большой резонанс, когда в 2014 году выпустил новый язык дизайна «Material Design». Его появление в Android 5.0 Lollipop было нацелено на преодоление мостов между различными устройствами и создание согласованного пользовательского интерфейса. Как оказалось, Material Design получил большее распространение, чем Lollipop, он используется большим количеством веб-сайтов, приложений и служб, не связанных с Google. Учитывая, что год назад язык дизайна KitKat Holo все еще использовался и рекомендовался, рост популярности Material Design поразителен.
На SitePoint мы предоставили анализ Material Design и его влияние на дизайн на протяжении многих лет . Это проиллюстрировало аспекты дизайна, лежащие в основе материала Material Design.
Хотя официальный Справочник Google является хорошим местом для начала экспериментов с Material Design, тем, кто предпочитает создавать прототипы, прежде чем углубляться в разработку, может пригодиться Proto.io . В прошлом году мы рассказывали о Proto.io , но недавно компания объявила о запуске своей новой библиотеки Material Design, которая позволит вам запустить прототипирование с использованием ресурсов, эффектов и рекомендаций Material Design.
В этой статье мы сосредоточимся на инструментах, предлагаемых Proto.io для создания качественных прототипов материалов, а не на пошаговых инструкциях.
Начиная
Если вы еще не зарегистрировали аккаунт, сделайте это здесь . Новые пользователи могут бесплатно пользоваться премиум-аккаунтом в течение 15 дней, после чего вы можете создавать прототипы с некоторыми ограничениями. Прочитайте о доступных планах и посмотрите, подходят ли они вашим потребностям и бюджету.
Премиум-функции позволяют вам увеличить количество активных проектов, опубликовать свои прототипы и неограниченное количество рецензентов.
Если вы создали свою учетную запись и зарезервировали свое место, вы готовы создать новый проект. Поскольку мы имеем дело с Material Design, давайте продолжим работу над экраном устройства Android Google Nexus 5 с пустым шаблоном.
В редакторе вы выполняете большинство задач. Убедитесь, что в правом верхнем углу выбрана библиотека конструирования материалов, поэтому будут отображаться нужные активы.
Не стесняйтесь настраивать масштаб холста, используя панель инструментов в верхней части, чтобы вы могли иметь надлежащий обзор ваших проектов. Вы также можете скрыть или изменить размер различных панелей инструментов на вашем экране.
Proto.io автоматически сохраняет ваш прототип (смотрите в правом верхнем углу), но вы также можете сохранить вручную, когда вам это нужно. Резервные копии ваших прототипов доступны, когда вам нужно вернуться к определенной версии.
Игра с материалом
Теперь давайте добавим некоторые активы в наше рабочее пространство .
Я начал с базового интерфейса, добавив такие элементы, как фиксированная панель вкладок, панель инструментов и 3 кнопки (среди них знаменитый морфинговый гамбургер> значок стрелки).
Не стесняйтесь добавлять ресурсы из библиотеки ресурсов и заполнять свой холст. Не будьте слишком перфекционистом, вы сможете настроить различные параметры позже. Я добавил список и контрольный список, чтобы создать быстрый прототип приложения со списком покупок.
Если вас устраивает экран, вы можете индивидуально настроить атрибуты элемента.
Могут быть настроены специфические эффекты дизайна материала, такие как рябь или круглые аватары Вы можете изменять свои активы изображения, обеспечивая гибкость и сводя к минимуму использование внешних инструментов обработки изображений.
Полный набор значков Google Material Design доступен для немедленного использования в редакторе Proto.io.
Google выпустил значки материалов дизайна под лицензией Creative Commons Attribution 4.0, что означает, что вы можете использовать их даже в коммерческих целях, если вы даете указание. Вы можете найти их на GitHub с полезной ссылкой на имена иконок (также удобно при создании прототипов в Proto.io)
Делиться заботой
Отсюда вы можете добавлять новые экраны, связывать их, менять ориентацию и многое другое. Мы оставляем это для вас, чтобы изучить возможности, хотя волновые эффекты вызывают привыкание!
Если вы хотите поделиться прототипами со всем миром, вы можете создать пространство для своих творений в Proto, io Spaces (это также доступно пользователям с бесплатным планом). Вы можете найти пример, который я создал для этой статьи здесь .
Импортируйте пример в свою учетную запись Proto.io, нажав кнопку импорта под предварительным просмотром справа.
Если у вас есть платный план, вы можете публиковать или экспортировать свои прототипы в различные форматы, такие как HTML или PDF.
Бонус: бесплатные материалы по дизайну
Уже в настроении Material Design? Ниже приведены некоторые полезные ресурсы для начинающих с Material Design, которые вы можете использовать в своих проектах на коммерческой основе.
IconShock Материал Дизайн Иконки
Основанные на оригинальных значках дизайна материалов, эти иконки предлагают более красочную альтернативу оригиналу. Имея более 1400 значков различных размеров и форматов, это хорошее место для начала, если вы ищете значки. Они лицензируются по лицензии Creative Commons Attribution 4.0 .
UI Kit Material Design
PSD UI Kit, хотя и не официальный, является хорошим справочным материалом, если вам не хватает вдохновения или вы застряли в UX вашего прототипа. Он ориентирован не только на мобильные устройства, поэтому вы можете увидеть, что Material Design предлагает и на других устройствах / носителях.
Эскиз готового материала Дизайн иконок
Если вы используете Sketch, вы можете воспользоваться этими измененными значками Material Design, которые уже содержат границы.
Кнопки дизайна материалов CSS
Здесь вы можете получить код CSS различных кнопок дизайна материалов.
Вывод
Material Design открывает совершенно новый мир возможностей для широкого спектра устройств и экранов. Теперь вы можете создавать прототипы с помощью Material Design, чтобы понять его потенциал и принципы его работы в ваших проектах. Дайте нам знать ваши мысли и опыт в комментариях, особенно приветствуются ваши мысли о дизайне материалов.