Статьи

Быстрый старт вашего пользовательского интерфейса приложения Android с шаблоном дизайна материала

Google Material Design — один из немногих языков дизайна, который смог выдержать испытание временем. Он существует уже более пяти лет и до сих пор продолжает пользоваться широкой популярностью среди пользователей Android. SystemUI платформы Android придерживается принципов этого языка дизайна, как и большинство популярных приложений, доступных в Google Play сегодня.

  • Шаблоны приложений
    20 лучших шаблонов для Android-приложений 2019 года
    Нона Блэкман
  • Мобильная разработка
    10 лучших многоцелевых шаблонов приложений для Android
    Нона Блэкман
  • Шаблоны приложений
    15 лучших шаблонов приложений для электронной коммерции Android
    Нона Блэкман
  • Android
    9 шаблонов Android, чтобы вдохновить ваш следующий проект
    Лорка Локасса Са

Хотя рекомендации Material Design хорошо документированы и просты для понимания, их правильная реализация с использованием Android SDK и AndroidX требует много тщательного кодирования и тестирования, в первую очередь потому, что вам необходимо поддерживать несколько плотностей пикселей, размеры экрана, ориентацию устройства и версии Android. Однако, используя MaterialX , вы можете сэкономить все это время и силы.

MaterialX, разработанный Envato Elite, автором Dream Space , представляет собой премиальную библиотеку компонентов пользовательского интерфейса Material Design, доступную на CodeCanyon . В дополнение к базовым компонентам пользовательского интерфейса, таким как кнопки, карточки и ползунки, он предлагает сотни уникальных макетов Material Design, созданных вручную, которые вы можете непосредственно использовать в своих приложениях. Таким образом, при работе с этими макетами вам не придется беспокоиться о таких задачах, как расположение компонентов пользовательского интерфейса, настройка их полей и отступов или даже их анимация.

Давайте теперь подробнее рассмотрим, что может предложить MaterialX.

Очень важно, чтобы у вас был привлекательный интерфейс, позволяющий пользователям переходить с одного экрана вашего приложения на другой. Material Design перечисляет несколько компонентов, которые вы можете использовать для создания такого интерфейса, и у MaterialX есть реализации для всех них.

Самым популярным таким компонентом в наши дни является нижняя панель навигации. На данный момент MaterialX предлагает восемь красивых нижних панелей навигации. Вот два таких бара:

Пример нижней панели навигации

Если вы предпочитаете использовать выдвижные ящики, этот шаблон предоставляет вам несколько вариантов, каждый из которых предназначен для разных типов приложений. Например, если вы создаете новостное приложение, вы можете использовать компонент Drawer News . Точно так же, если вы создаете почтовое приложение, вы можете использовать компонент Drawer Mail .

Образцы ящиков

Вкладки, которые обычно дополняют верхние панели приложений, также широко используются в приложениях Android. MaterialX имеет множество видов вкладок, которые хорошо смотрятся как в светлых, так и в темных темах. Как и следовало ожидать, все они поддерживают жест горизонтальной прокрутки.

Пример вкладки компонентов

Списки являются неотъемлемой частью приложений для Android, и хорошо продуманный список может значительно улучшить работу вашего приложения. MaterialX предлагает почти дюжину различных типов списков, включая секционные, анимированные и множественные списки. Он также предлагает несколько списков приложений, таких как списки новостных приложений.

Примеры списка

Если вам нужно показать более одного элемента подряд, вам придется использовать одну из шести различных сеток, которые есть в этом шаблоне. В дополнение к обычно используемым основным и секционным сеткам, MaterialX имеет сетки для приложений галереи и приложений вызывающих абонентов.

Образцы сеток

Карты часто используются как со списками, так и с сетками. Поскольку MaterialX имеет шаблоны карт для обработки большинства случаев использования, теперь вы можете избежать создания собственных карт с нуля. Некоторые шаблоны карточек также можно использовать для создания вводных или обучающих экранов.

Пример карты

Стоит отметить, что MaterialX имеет отдельные компоненты для отображения небольших списков, таких как списки тегов и списки предпочтений.

Создавать формы сложно. Убедить пользователей заполнить и отправить формы еще сложнее. К счастью, MaterialX поставляется с большим количеством красивых шаблонов для форм, которые ваши пользователи получат удовольствие от заполнения.

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

Образцы форм

Чтобы облегчить вашу жизнь, MaterialX также имеет целые макеты, посвященные определенным типам форм. Поскольку эти привлекательные макеты служат полноценными контейнерами для форм, вам не придется добавлять какие-либо другие компоненты пользовательского интерфейса в макет при их использовании. В настоящее время существуют схемы для форм входа в систему, форм проверки телефонных номеров и форм оплаты.

Dedicated form layouts

Обратите внимание, что многие из шаблонов форм также имеют альтернативы на темную тему.

Если вы заинтересованы в создании форм самостоятельно, вместо непосредственного использования элементов формы Android по умолчанию, вы можете попробовать использовать элементы, доступные в MaterialX. Они обычно выглядят лучше и обеспечивают более интересный пользовательский опыт.

Шаблон имеет множество кнопок, палитр и ползунков, как вы можете видеть на скриншотах ниже:

Form elements offered by MaterialX

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

Интуитивно понятная панель инструментов, отображающая множество своевременных и контекстно-зависимых данных, может быть идеальным домашним экраном для многих видов приложений, таких как фитнес-приложения, приложения для путешествий и приложения, связанные с криптовалютами. В настоящее время MaterialX имеет 11 панелей мониторинга, каждая из которых ориентирована на отдельный домен. Например, вот две схемы панели инструментов: одна для приложений электронной коммерции, а другая для туристических приложений:

Sample dashboards

Все доступные панели инструментов являются всеобъемлющими, хорошо продуманными и визуально приятными. Таким образом, вы обычно можете начать использовать их без каких-либо настроек.

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

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

Sample profile page layouts

Кроме того, MaterialX имеет макеты для отображения пользовательских каналов и временных шкал. Если вы пытаетесь реализовать функциональность, подобную Twitter, в своем приложении, вы найдете эти макеты чрезвычайно полезными.

Layouts for user timelines

Наконец, если вы хотите, чтобы ваши пользователи могли общаться между собой или с вашей командой в режиме реального времени, MaterialX предлагает макеты, очень похожие на те, которые вы видите в приложениях, таких как WhatsApp и Telegram.

У вас уже есть блог на WordPress? С MaterialX вы можете легко создать приложение для Android.

Шаблон имеет большое разнообразие макетов, которые вы можете использовать для отображения ваших сообщений. Эти приятные макеты могут плавно отображать как текст, так и изображения.

Sample blog layout

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

Search page and about us page samples

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

MaterialX — один из самых полных шаблонов приложений для Android, доступных на CodeCanyon. С более чем 2250 продажами и в основном пятизвездочными отзывами, это также один из самых популярных шаблонов. На мой взгляд, это необходимо для разработчиков Android, которые хотят значительно улучшить внешний вид своих приложений.

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

Если вы нашли эту статью полезной, взгляните также на следующие статьи:

  • React Native
    Красивые материалы для дизайна приложений с компонентами Antiqueruby React
  • Материал Дизайн
    Лучшие шаблоны материалов для Android-приложений
    Нона Блэкман
  • Шаблоны приложений
    20 лучших шаблонов для Android-приложений 2019 года
    Нона Блэкман
  • Мобильная разработка
    17 способов сделать ваше мобильное приложение красивым с элементами Envato
    Нона Блэкман
  • Android
    9 шаблонов Android, чтобы вдохновить ваш следующий проект
    Лорка Локасса Са
  • Android SDK
    10 лучших игровых шаблонов для Android