Учебник по Android-навигации

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

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

Navigation Определение навигации

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

Спецификация Material Design имеет некоторые отличные рекомендации о том, как подходить к определению структур навигации, но для целей этого поста мы можем свести все к двум простым пунктам:

  • Построить навигацию на основе задач и контента
  • Постройте навигацию для людей

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

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

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

Найти более подробное руководство по разбивке задач и поведения для навигации в спецификации материалов.

🗂 вкладки

Определение

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

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

Найти все подробности о разработке вкладок здесь и о реализации вкладок здесь.

Вкладки в действии

Play Music, Google+, Play Newsstand

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

Google+ (вверху, по центру) использует вкладки для сегментирования коллекций, одного типа контента, который приводит к очень разнородному контенту в приложении.

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

история

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

Навигационные ящики

Определение

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

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

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

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

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

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

Навигационные ящики в действии

Play Store, Google Камера, Входящие

Магазин Play Store (вверху слева) использует навигационную панель для указания на разные разделы магазина, каждый из которых посвящен разному типу контента.

Камера Google (вверху по центру) использует ящик для поддержки мест назначения - в основном это места назначения, которые расширяют возможности захвата, а также путь к настройкам.

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

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

история

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

Google Camera также возвращает пользователей к основному режиму захвата по умолчанию за вычетом любых расширений.

Запись «начать движение» дополняет основной вид карты

То же самое относится и к Google Maps (см. Выше) - любой пункт назначения в ящике представлен либо в виде слоя сверху, либо в виде дополнения к основному экрану карты, поэтому кнопка «Назад» возвращает нас на новый уровень.

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

Nav Нижняя навигация

Определение

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

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

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

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

Найдите более подробное руководство по проектированию для нижней навигации здесь и подробности реализации здесь.

Нижняя навигация в действии

Google Фото

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

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

В Google Фото (выше) нижняя навигация исчезает внутри альбомов. Альбомы представлены как вторичный слой в иерархии, и единственное дальнейшее навигационное действие - это открытие фотографии, которая сама открывается поверх пользовательского интерфейса альбома. Эта реализация удовлетворяет правилу «единого назначения» для скрытия нижней навигации, одновременно служа цели создания более захватывающего опыта, когда пользователь выходит за пределы верхнего уровня.

Дополнительные соображения

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

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

история

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

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

🕹 Контекстная навигация

Определение

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

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

Ищите дополнительные инструкции по контекстной навигации здесь.

Контекстная навигация в действии

Часы, Google и Календарь Google

В приложении Часы (вверху слева) есть FAB; приложение Google (выше, посередине) опирается главным образом на информацию, размещенную внутри карточек; и Календарь Google (вверху справа) создает плитки для событий.

Активация FAB в приложении «Часы» (вверху, слева) открывает экран выбора мировых часов, нажатие карты погоды в приложении Google (вверху, по центру) приводит к переходу на страницу результатов поиска «Погода» и нажатию на плитку события в Календарь (вверху справа) перенесет вас к деталям этого события.

Мы также видим на этих скриншотах различные способы, которыми контекстная навигация может транспортировать пользователя. В приложении «Часы» мы на один уровень ниже самих часов, в приложении «Гугл» мы в основном получили увеличение основного экрана, а в «Календаре» открыли полноэкранное диалоговое окно.

история

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

Кнопки «Вверх», «Назад» и «Закрыть»

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

  • Up находится на панели инструментов приложения, когда пользователь спустился по иерархии приложения. Он перемещается назад по иерархии в хронологическом порядке, пока пользователь не достигнет родительского экрана. Поскольку кнопка «вверх» не появляется на родительских экранах, она никогда не должна выходить из приложения.
  • Назад всегда присутствует в системной навигационной панели. Он перемещается назад в хронологическом порядке, независимо от иерархии приложения, даже если предыдущий хронологический экран был внутри другого приложения. Он также отклоняет временные элементы, такие как диалоги, нижние листы и наложения.
  • Close обычно используется для отклонения переходных уровней интерфейса или отмены изменений в полноэкранном диалоге. Рассмотрите подробный экран события в Календаре Google (показан ниже). Временная природа подробного экрана становится еще более ясной на больших экранах. В папке «Входящие» (ниже) переход от папки «Входящие» к сообщению предполагает, что сообщение является слоем поверх папки «Входящие», поэтому кнопка закрытия является подходящей. Gmail (ниже) позиционирует сообщение как отдельный уровень приложения и использует кнопку «вверх».
Календарь, Входящие и Gmail

Обратитесь конкретно к поведению резервного копирования в спецификации материалов здесь.

Patterns Объединение моделей

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

Google+

Возможно, наиболее очевидный пример - Google+ (выше), который смешивает все шаблоны, которые мы обсуждали - вкладки, навигационный блок, нижняя навигация и контекстная навигация.

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

Магазин игр

Play Store (выше) в основном использует навигационный ящик, часто использует контекстную навигацию и иногда использует вкладки.

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

Календарь Google

Календарь Google (см. Выше) использует навигационную панель и контекстную навигацию, и использует оба по-настоящему интересным образом.

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

Узнайте больше о комбинировании шаблонов навигации здесь.

Есть еще вопросы?

Навигация - сложная тема. Надеемся, что этот учебник послужит хорошей основой для понимания общих принципов навигации в Android. Если у вас все еще есть вопросы, оставьте ответ или посмотрите нашу первую сессию #AskMaterial с командами Material Design & Design Relations в Twitter здесь!