В то время как Android позволяет вам создавать практически любое пользовательское представление или пользовательский интерфейс, которые вам могут потребоваться, есть несколько шаблонов пользовательского интерфейса, которые, как было доказано, хорошо работают для пользователей в нужных ситуациях. В этом руководстве вы узнаете о некоторых из этих шаблонов и о том, как они могут помочь вашим пользователям, создавая отличный опыт при использовании вашего приложения.
Тебе легче учиться с видео? Почему бы не проверить наш курс:
-
AndroidНачало работы с Android
1. Главный экран
Первый экран, который видят ваши пользователи при открытии вашего приложения, часто является наиболее важным. Отсюда ваш пользователь должен быть в состоянии выполнить быстрое действие и продолжить свой день или углубиться в ваше приложение, чтобы уточнить то, что он пытается сделать.
Выберите шаблоны дизайна пользовательского интерфейса для этого экрана в зависимости от цели вашего приложения. Важно отметить, что большинство приложений используют более одного шаблона на своем домашнем экране, если это поддерживает общую цель их приложения.
Список и детали
Шаблон списка и деталей является одним из наиболее распространенных шаблонов, которые вы можете увидеть на мобильных устройствах. Как следует из названия, вы представляете данные в формате списка, и, когда щелкает элемент в этом списке, он открывает новый экран, который отображает дополнительные сведения.
Хотя этот шаблон называется списком и деталями, нет никаких причин, по которым вы не могли бы применить ту же логику и к сетке. Ключевой особенностью этого шаблона является то, что каждый элемент в списке / сетке, если он выбран, должен выполнять одно и то же действие для отображения большего количества деталей.
Пример этого шаблона можно увидеть в приложении Google Play Music, которое предоставляет пользователям сетку альбомов, которые можно выбрать для отображения песен, доступных для этого альбома. Hangouts — еще один пример списка и подробного шаблона. Hangouts позволяет выбрать беседу, чтобы увидеть весь разговор и взаимодействовать с ним.
карусель
Иногда одного списка недостаточно. Если в вашем приложении есть различные категории и способ хорошо представить контент с помощью изображения, то вам может пригодиться шаблон карусели. В этом паттерне вы берете список и детализированный паттерн и используете его несколько раз на одном экране. Разница в том, что элементы списка можно прокручивать по горизонтали, а не по вертикали.
Пример этого шаблона можно увидеть в приложении Google Play Store, в котором отображается карусель для нескольких категорий приложений, которые вы можете просматривать.
карта
Не все приложения построены вокруг необходимости отображения списка данных для пользователей. Одной из ключевых черт мобильных устройств является то, что они невероятно полезны для поиска вещей, когда пользователи находятся в мире. Карта часто делает отличный инструмент для этой цели.
Если ваше приложение построено на отображении местоположений, навигации или путешествий, то карта может быть идеальной для ваших пользователей. Хотя очевидным примером этого шаблона является Google Maps, многие другие приложения, такие как Waze и Uber , также построены с картой в качестве основной точки фокусировки.
2. Навигация и действия
Хотя вы только что узнали о некоторых шаблонах пользовательского интерфейса, которые вы можете использовать на домашнем экране вашего приложения, вам, вероятно, все еще нужен способ перехода к другим разделам в вашем приложении. К счастью, есть несколько часто используемых шаблонов навигации, с которыми знакомы пользователи Android, чтобы помочь вам создать отличное приложение для работы.
Вкладки
Вкладки часто используются в сочетании со списком и шаблоном детализации. Если у вас есть несколько списков, которые несколько связаны, но имеют разные категории, то использование ViewPager с вкладками для каждой категории может быть эффективным решением для навигации по вашему приложению.
Этот шаблон полезен, когда в вашем приложении всего несколько разделов, поскольку он предоставляет пользователям быстрый и простой способ изменить представление. Однако, если у вас есть пять или более элементов, которые вы хотите поместить во вкладки, то вам следует рассмотреть возможность перемещения ваших операций навигации в ящик.
В соответствии с рекомендациями по дизайну материалов для Android вкладки также могут существовать в нижней части экрана, как видно в приложении Google+.
Навигационный ящик
Панель навигации — это вид, который можно выдвинуть со стороны приложения, чтобы предоставить пользователю список параметров. Этот шаблон проектирования довольно регулярно используется в приложениях Android для предоставления возможности изменения разделов в приложении или выполнения глобальных действий, которые не обязательно привязаны к какому-либо одному экрану.
Поскольку этот шаблон хорошо подходит для навигации на верхнем уровне, его можно легко соединить с шаблоном вкладок для создания сложной схемы навигации в ваших приложениях.
Панель инструментов
Как вы, наверное, заметили, большинство страниц в приложении для Android содержат панель инструментов в верхней части экрана. По крайней мере, эта панель инструментов содержит заголовок раздела или приложения, но шаблон дизайна панели инструментов также облегчает размещение кнопок действий либо непосредственно на панели инструментов, либо в переполненном меню, которое позволяет пользователям выполнять задачи в этом разделе приложения.
Пример этого можно найти в приложении Google Keep, которое позволяет изменить цвет заметки, добавить других людей к этой заметке и ряд других действий, присутствующих в меню переполнения.
Плавающая кнопка действия
Шаблон плавающего действия позволяет разработчикам выделять одно действие, которое ваш пользователь может выполнять, находясь в разделе приложения. Примерами таких действий являются кнопка создания плавающего действия в почтовом клиенте, кнопка воспроизведения / паузы в музыкальном приложении или кнопка добавления в приложениях, которые управляют событиями или данными.
Этот шаблон не должен использоваться для незначительных действий или для чего-либо разрушительного, поскольку плавающая кнопка действия разработана, чтобы иметь сильное присутствие на экране при использовании.
3. Форм-факторы Android
Хотя некоторые из рассмотренных выше моделей поддаются другим форм-факторам, они в основном относятся к разработке приложений для телефонов или планшетов. Недавно Google перешел на использование Android на различных других устройствах, включая телевизоры и умные часы. Это требует новых шаблонов проектирования, чтобы получить максимальную отдачу от каждого форм-фактора.
Android Wear
Из-за меньшего размера экрана дисплея для Android Wear был представлен совершенно новый набор шаблонов дизайна пользовательского интерфейса. Wear работает с системой карточек и кнопок действий, между которыми пользователи могут перемещаться с помощью GridViewPager .
Вы также можете продолжать использовать список и шаблон детализации, но элементы списка должны быть больше и привязываться к ним, чтобы пользователи могли легко получить к ним доступ. Более подробную информацию о разработке для Android Wear можно найти в официальной документации .
телевидение
В то время как шаблоны проектирования для устройств Android Wear должны учитывать гораздо меньший размер экрана, проектирование для Android TV имеет противоположную проблему. Экраны намного больше, и пользователи, как правило, намного дальше от них
Мало того, что ваши телевизионные приложения должны учитывать эти две вещи, телевизоры также используют контроллер D-pad, а не сенсорные экраны для взаимодействия. По этой причине карусельный подход работает на удивление хорошо.
Пользователи могут перемещаться между рядами элементов, а затем прокручивать по горизонтали, чтобы просмотреть доступный им контент. Когда пользователь находит элемент, который он хочет просмотреть, он может выбрать его для просмотра подробного экрана, на котором представлен список действий для этого элемента.
Вывод
Хотя это далеко не исчерпывающий список шаблонов проектирования пользовательского интерфейса Android, вы познакомились с некоторыми из наиболее распространенных шаблонов на Android и с тем, как они используются для повышения удобства использования приложений.
Тем не менее, не все приложения одинаковы, и могут возникнуть ситуации, когда вам нужно будет найти креативное решение для взаимодействия пользователей с вашим приложением. Общим для всех шаблонов является то, что они просты, удобны в использовании и не мешают пользователю.
Продолжая использовать и изучать Android, вы приобретете опыт, необходимый для понимания того, что работает, а что нет в данной ситуации.