Рисовальщик навигации

Документы разработчика

Создание рисовальщика навигации

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

Отображение рисовальщика навигации

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

Рисовальщик навигации расширяется, перекрывая содержание, но не панель действий. Когда рисовальщик полностью выдвинут, панель действий регулирует своё содержание, заменив имеющийся заголовок панели действий с именем приложения и удаляя все контекстные действия, чтобы показать ниже рисовальщик навигации. Меню переполнения со стандартными пунктами действий для Настройки и Справки остаются видимыми.

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

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

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

Убрать навигационный рисовальщик

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

  • Касаясь содержимого вне панели рисовальщика
  • Проведите пальцем влево в любое место экрана (в том числе от правого края)
  • Прикоснитесь к иконке/названию приложения на панели действий
  • Нажмите Назад

Когда использовать рисовальщик навигации

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

Вот некоторые примеры, где навигационные рисовальщики работают лучше:

Более 3-х представлений верхнего уровня

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

Кросс-навигации от более низких уровней

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

Рисовальщик навигации делает возможным кросс-навигацию с более низких уровней.

Глубокие ветки навигации

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

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

Навигационные концентраторы

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

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

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

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

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

Значок приложения с индикатором рисовальщика навигации.

Содержимое рисовальщика навигации

Держите содержимое рисовальщика навигации ориентированным на навигацию приложения. Сделайте навигационные центры вашего приложения в виде элементов списка внутри рисовальщика навигации - один элемент на строку.

Заголовки, иконки, и счетчики

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

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

Используйте заголовки и иконки для организации своего рисовальщика.
Сворачиваемые элементы навигации разделены. Используйте левую сторону для навигации и правую для сворачивания и разворачивания элементов.

Сворачиваемые элементы навигации

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

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

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

Рисовальщики навигации и панели действий

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

Чтобы избежать путаницы, откорректируйте содержание панели действий по следующему правилу, как только рисовальщик полностью появится:

  • Значок приложения
  • Название приложения
  • Удалите действия из панели действий, являющиеся контекстными к представлению (такие как Создавать Новый, Обновить). Вы можете сохранить действия глобальной области, такие как "Поиск".
  • Меню переполнения с ожидаемыми навигационными целями, такими как Настройки и Справка.
Очистите панель действий, когда рисовальщик полностью раскрылся. Удалите действия, которые не нужны, и покажите имя вашего приложения в области заголовка.

Действия

Держите действия на правой стороне панели действий и в переполнении

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

Это также относится и к общим навигационным целям, таким как доступ к Справке или Настройки приложения. По соглашению руководства по стилю Справка и Настройки всегда расположены в меню переполнения действий.

Держите Справку и Настройки в переполнении.

Контекстные панели действий

Иногда пользователь будет в состоянии, когда контекстная панель действий (КПД) появляется вместо панели действий приложения. Это обычно происходит, когда пользователь выделяет текст или выбирает несколько элементов после жеста нажми и подержи. В то время как КДП видна, вы все равно должны позволить пользователю открывать рисовальщик навигации с помощью жеста от края экрана. Тем не менее, заменить КПД стандартной панелью действий пока открыт рисовальщик навигации. Когда пользователь закрывает рисовальщик, повторно отобразите КПД.

Прячьте контекстные панели действий пока рисовальщик виден.

Если пользователь уходит от представления с выбранным содержимым, снимите выбор до перехода к новому представлению.

Подробности взаимодействия

Представьте пользователю рисовальщик при первом запуске

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

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

Дайте пользователю быстро глянуть

Если пользователь прикасается к очень левому краю экрана (в пределах 20 dp слева), заставьте рисовальщик выглянуть, как только палец дотронется до дисплея. Это препятствует случайному открытию и обеспечивает более богатую ответную реакцию.

Рисовальщик навигации выглядывает, когда пользователь прикасается близко к левому краю экрана.

Подсветка

При открытии рисовальщика навигации с экрана, который представлен в рисовальщике, выделите его в рисовальщике. И наоборот, если вы открываете рисовальщик с экрана, который не перечислен в рисовальщике, ни один из пунктов рисовальщика не следует выделять.

Влияние рисовальщика на общую навигацию приложения

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

Обратите особое внимание на следующие ситуации:

Системный Назад в верхнем уровне приложения

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

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

Системное действие Назад после кросс-навигации к более нижним уровням иерархии

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

Сброс стека действия Назад, если представление нижнего уровня имеет прямого родителя.

Стиль

Ширина рисовальщика навигации зависит от содержания, которое должно отображаться, но должна быть между минимумом 240 dp и максимум 320 dp. Высота отдельных позиций не должна опускаться ниже 48 dp. Смотри руководство по создаю макетов ниже с рекомендациями по обивке и промежутках.

Руководящие принципы макета для рисовальщика навигации.

Выберите фон рисовальщик наиболее соответствующий теме вашего приложения. Смотри следующие примеры рисовальщика для тем Holo Light и Holo Dark.

Навигационные рисовальщики в темах Holo Light и Holo Dark.

Контрольный список рисовальщика навигации

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

  • Панель действий остается на месте и корректирует свое содержание.
  • Ваша рисовальщик навигации перекрывает содержание.
  • Любое представление изображенное в рисовальщике имеет индикатор рисовальщика навигации в его панели действий, который позволяет открыть рисовальщик, нажав на иконку приложения.
  • Вы воспользовались переходом на новый визуальный рисовальщик.
  • Любое представление не представленное в рисовальщике поддерживает традиционный индикатор Вверх в его панели действий.
  • Вы остаётесь в синхронизации с общими шаблоном навигационных действий Вверх и Назад.