Любое средство доставки, используемое для перемещения между экранами в вашем интерфейсе – это навигация
Как только вы соедините в приложении два экрана вместе, вы получите навигацию. Это соединение – что бы это ни было – это транспортное средство, которое перемещает пользователей между этими экранами. И хотя создание навигации относительно простой процесс, создание правильной навигации для ваших пользователей не всегда просто. В этой статье мы рассмотрим некоторые из наиболее распространенных навигационных паттернов, используемых на Android, как они влияют на навигацию на системном уровне, а также как смешивать и подбирать шаблоны в соответствии с вашим интерфейсом и вашими пользователями.
Определение навигации
Прежде чем вникать в общие шаблоны навигации, стоит отступить и найти отправную точку для размышлений о навигации в вашем приложении. Инструкция Material Design имеет несколько отличных рекомендаций относительно подхода к определению навигационных структур, но исходя из целей этой статьи мы можем свести все до двух простых пунктов:
- Создавайте навигацию исходя из задач и контента
- Создавайте навигацию для людей
Построение навигации на основе задач и контента означает разделение задач, которые будут выполняться людьми, то, что они будут видеть на этом пути, и определения отношений между ними. Определите, как задачи связаны друг с другом – какие задачи более или менее важны, какие задачи родственны, какие из них вложены внутри друг друга и какие задачи будут выполняться более или менее часто. Вот где начинается строительная навигация для людей – люди, использующие ваш интерфейс, могут рассказать вам, подходит ли это для них или нет, и ваша навигация должна строиться вокруг цели помочь им добиться успеха в вашем приложении. Как только вы узнаете, как задачи в вашем приложении работают вместе, вы можете решить, какой контент пользователи должны видеть, когда и как его представить – эта задача должна стать основой решения, какие шаблоны лучше всего подходят для вашего приложения. Более подробное руководство по разделению задач и функциональных возможностей навигации в руководстве Material Design.
Вкладки
Определение
Вкладки обеспечивают быструю навигацию между родственными представлениями внутри одного и того же родительского экрана. Они лежат в одной плоскости, что означает, что их можно пролистывать, и они находятся в расширяемой, легко распознаваемой панели вкладок. Вкладки отлично подходят для фильтрации, сегментации или обеспечения глубины связанным фрагментам контента. Для несвязанных частей контента или контента с его собственной глубокой иерархией больше подходит использование других навигационных шаблонов. Более детально о проектировании вкладок можете прочитать здесь, а об их реализации здесь.
Вкладки в действии
[gallery size="full" link="none" ids="37937,37938,37939"]
Play Music, Google+, Play Newsstand
Play Music (выше, слева) использует вкладки, чтобы добавить глубину в библиотеку музыки, организуя один и тот же общий контент разными способами для размещения различных способов исследования. Google+ (выше, в центре) использует вкладки для разделения на сегменты Collections – один тип контента, который приводит к очень разнородному контенту глубже в приложении. Play Newsstand (выше, справа) использует вкладки на экране библиотеки, чтобы представить разные наборы одной и той же информации – одна вкладка представляет собой целостную многослойную коллекцию, а другая – сжатый набор заголовков.
История
Вкладки существуют вместе на одном уровне, внутри одного и того же родительского экрана. Поэтому для навигации между вкладками не следует создавать историю ни для системной кнопки «назад», ни для кнопки «вверх».
Nav drawers (букв. – навигационные ящики)
Определение
Шаблон navigation drawer, как правило, представляет собой вертикальную панель, прикрепленную к левому краю холста. Такие шаблоны могут проявляться за пределами экрана постоянно или нет, но они всегда имеют общие характеристики. Как правило, nav drawer составляет список родительских пунктов назначения, которые одного уровня или родственные друг с другом. Navigation drawer может использоваться в приложениях с несколькими основными пунктами назначения, а также некоторыми уникальными второстепенными пунктами назначения, такими как настройки или помощь. Если вы комбинируете navigation drawer с другим основным навигационным компонентом – например, с нижней навигацией, то navigation drawer может содержать дополнительные или важные пункты назначения, которые не следуют непосредственно в иерархии нижней навигации. При использовании шаблона navigation drawer, знайте, какие типы пунктов назначения вы представляете – добавление слишком большого количества пунктов назначения или пунктов назначения, которые представляют разные уровни в иерархии приложения, может запутать пользователя. Также обратите внимание на визуальную доступность – этот шаблон может быть хорош для уменьшения видимости или уплотнения навигации вдали от области основного содержимого, но это также может быть недостатком в зависимости от того, как должны быть представлены и доступны пункты назначения в вашем приложении. ? Ознакомьтесь с подробным руководством по проектированию navigation drawer здесь, и его реализацией здесь.
Nav drawers в действии
[gallery size="full" link="none" ids="37941,37943,37942"]
Play Store, Google Camera, Inbox
Play Store (сверху, слева) использует шаблон navigation drawer для указания на разные разделы магазина, каждый из которых посвящен определенному типу контента. Google Camera (сверху, в центре) использует этот паттерн для поддержки второстепенных пунктов назначения – это главным образом пункты назначения, которые увеличивают накопление опыта, а также дают путь к настройкам. Inbox (выше, справа) имеет расширяемый шаблон navigation drawer, который может быть слишком длинным. В верхней части находятся основные пункты назначения, которые представляют разные сегменты вашей электронной почты, а ниже – второстепенные сегменты. Поскольку шаблон navigation drawer в Inbox может быть очень длинным, элементы «настройки» и «помощь и обратная связь» представлены на постоянном листе, доступном из любого места в шаблоне.
История
Шаблоны navigation drawers должны обычно создавать историю для системной кнопки «Назад», когда приложение имеет отдельный пункт назначения «Домой». В Play Store домашний пункт назначения – Apps Games, которое фактически предоставляет пользователю навигацию по вкладкам, чтобы увидеть выделенное содержимое всех типов. Таким образом, Play Store создает историю, чтобы вернуться к этому пункту назначения из других областей приложения. Google Camera также возвращает пользователей к стандартным основным режимам захвата за вычетом любого увеличения. [gallery size="full" link="none" ids="37944,37945,37946"]
Функция «начать движение» увеличивает основной вид карты
То же самое относится и к Google Maps (выше) – любой пункт назначения в этом шаблоне представлен, как слой сверху или шаг на основной экран карты, поэтому кнопка «Назад» возвращает нас к чистому листу. [gallery size="full" link="none" ids="37947,37948,37949"] Вы можете заметить, что Play Store (выше) не меняет индикатор navigation drawer на панели инструментов на кнопку «вверх» после перехода к пункту назначения. Это связано с тем, что основные пункты назначения в этом шаблоне находятся на равном уровне в иерархии навигации приложения. Поскольку вы не продвигаетесь глубже в приложение, выбрав «Кино и телевидение», вы не сможете идти дальше. Вы все еще находитесь на верхнем уровне, просто на параллельном экране.
Нижняя навигация
Определение
В Android компонент нижней навигации включает в себя от трех до пяти основных пунктов назначения. Важно отметить, что пункт «Больше» (More) не является пунктом назначения. Равно как и меню с диалогами. Нижняя навигация работает лучше всего, когда ваше приложение имеет ограниченное количество разрозненных пунктов назначения верхнего уровня, которые должны быть мгновенно доступны (нижняя навигация никогда не должна прокручиваться). Одним из основных преимуществ «нижней панели» является возможность мгновенно перейти с дочернего экрана на несвязанный родительский экран без возврата назад к текущей родительской навигации. Важно отметить, что, в то время, как пункты назначения в нижней панели должны быть равнозначными в иерархии навигации приложения, элементы в нижней панели не лежат в одной плоскости, как вкладки. Пролистывание между пунктами назначения в нижней панели указывает на отсутствие связи между пунктами назначения. Каждый пункт назначения должен быть дискретным родителем, а не родственным другим пунктам назначения. Если пункты назначения в вашем приложении похожи или содержат аналогичный контент, им больше подойдет шаблон вкладок. Найдите более подробное руководство по проектированию нижней навигации здесь, а здесь детали ее реализации
Нижняя навигация в действии
[gallery size="full" link="none" ids="37951,37952,37953"]
Google Photos
У нижней навигации есть некоторые интересные особенности, выходящие за рамки ее основного определения. Вероятно, наиболее сложным является понятие о том, насколько постоянной должна быть нижняя панель. Ответ, как и многие дизайнерские решения, «зависит от ситуации». Обычно нижняя панель сохраняется во всем приложении, но есть некоторые случаи, которые могли бы оправдать скрытие нижней панели. Если пользователь открывает очень поверхностную иерархию – одноцелевые экраны, такие как написание сообщений или, если приложение хочет представить более захватывающий опыт на шаг или два в глубину иерархии, нижняя панель может быть скрыта. В Google Photos (выше) нижняя навигация исчезает внутри альбомов. Альбомы представлены как вторичный уровень в иерархии, и единственное дальнейшее навигационное действие – это открытие фотографии, которая сама открывается поверх пользовательского интерфейса альбома. Эта реализация удовлетворяет «одноцелевому» правилу скрытия нижней навигации, одновременно служа цели создания более захватывающего опыта, когда пользователь выходит за пределы верхнего уровня.
Дополнительные ограничения
Если панель постоянно отображается во всем приложении, следующим логическим ограничением будет режим работы при переходе между пунктами назначения с помощью панели. Если пользователь имеет несколько уровней в иерархии, исходящих из одного пункта назначения, и они переключаются на другой пункт назначения, а затем переключаются обратно на первый, что они должны увидеть? Родительский экран или дочерний экран, на котором они остановились? Это решение должно основываться исходя из того, кто использует ваше приложение. Как правило, нажатие элемента на нижней панели должно привести непосредственно к соответствующему экрану, а не к более глубокому слою иерархии, но, как и с любым правилом – есть исключения.
История
Нижняя навигация не должна создавать историю для системной кнопки "Назад". Идя глубже в иерархии, связанные с пунктами назначения нижней навигации, вы можете создать историю для системной кнопки "Назад" и кнопки «Вверх» приложения, но нижняя панель также может служить своего рода исторической навигацией. Нажатие на элемент в нижней навигации приведет вас прямо к соответствующему пункту назначения, и повторное нажатие снова должно вернуть вас к родительскому уровню или обновить родительский уровень, если пользователь уже там.
Контекстная навигация
Определение
Контекстная навигация состоит из любого навигационного взаимодействия вне компонентов, описанных выше. Это включает в себя такие вещи, как кнопки, плитки, карточки и все остальное, что направляет пользователя в другое место приложения. Контекстная навигация обычно менее линейна, чем явная навигация. Взаимодействия могут переносить пользователя через иерархию, между различными шагами в дискретных иерархиях или к полному выходу из приложения. Больше рекомендаций по контекстной навигации здесь.
Контекстная навигация в действии
[gallery size="full" link="none" ids="37955,37956,37957"]
Clock, Google и Google Calendar
В приложении Clock (выше, слева) есть Floating Action Button. Приложение Google (выше, в центре) полагается прежде всего на информацию, размещенную внутри карточек. А Google Calendar (выше, справа) создает плитки для событий. [gallery size="full" ids="37958,37959,37960"] Активация Floating Action Button в Clock (выше, слева) приводит к экрану выбора мировых часов, нажатие на карточку погоды в приложении Google (выше, в центре) приводит вас к странице результатов поиска для «погоды» а нажатие на плитку события в Calendar (выше, справа) приводит вас к деталям этого мероприятия. Мы также видим на этих скриншотах различные способы навигации по контексту, которые могут переносить пользователя. В приложении Clock мы находимся на одном уровне с часами, в приложении Google мы очутились, по существу, на дополнении основного экрана, а в Calendar мы открыли полноэкранный диалог.
История
Нет жесткого правила для создания истории посредством контекстной навигации. Создана ли история, зависит полностью от того, какую контекстную навигацию использует приложение, и куда перешел пользователь. В тех случаях, когда неясно, какую историю нужно создать, хорошо знать, что в целом делают кнопки «вверх» и «назад».
↖️ Кнопки «вверх», «назад» и «закрыть»
- Кнопка «Вверх» находится на панели инструментов приложения, когда пользователь спустился вниз по иерархии приложения. Она перемещает пользователя назад по иерархии в хронологическом порядке до тех пор, пока он не достигнет родительского экрана. Поскольку кнопка «вверх» не отображается на родительских экранах, она никогда не должна выводить пользователя из приложения.
- Кнопка «Назад» всегда присутствует в навигационной панели системы. Она перемещает пользователя назад хронологически, независимо от иерархии приложения, даже если предыдущий хронологически экран находился в другом приложении. Она также закрывает временные элементы, такие как диалоги и нижние листы.
- Кнопка «Закрыть» обычно используется для закрытия переходных слоев интерфейса или отмены изменений в полноэкранном диалоговом окне. Рассмотрим экран подробностей мероприятия в Календаре Google (показан ниже). Временная природа экрана подробностей становится более понятной на больших экранах. В Inbox (ниже) переход к сообщению предполагает, что сообщение является слоем поверх Inbox, поэтому кнопка закрытия подходит. Gmail (ниже) устанавливает сообщение, как отдельный уровень приложения и использует кнопку «вверх».
[gallery size="full" link="none" ids="37962,37963,37964"]
Calendar, Inbox и Gmail
Обратите особое внимание на функциональные возможности кнопок «вверх» и «назад» в руководстве Material Design здесь.
Смешанные шаблоны
На протяжении всего этого руководства мы видели примеры приложений, которые успешно реализуют каждый из различных навигационных компонентов. Многим из этих примеров также удается комбинировать шаблоны навигации, чтобы сформировать структуру, которая имеет смысл для пользователей. В завершение, давайте рассмотрим пару этих примеров. [gallery size="full" link="none" ids="37965,37966,37967"]
Google+
Возможно, наиболее очевидным примером является Google+ (выше), в котором сочетаются все шаблоны, которые мы рассмотрели: вкладки, nav drawer, нижняя навигация и контекстная навигация. Нижняя навигация является ключевой в Google+. Она обеспечивает доступ к четырем пунктам назначения верхнего уровня. Вкладки дополняют два из этих пунктов назначения, разделяя их контент на разумные категории. Nav drawer содержит другие пункты назначения, как первичные, так и вторичные, к которым обращаютя менее часто. [gallery size="full" link="none" ids="37968,37969,37970"]
Play Store
Play Store (выше) в основном использует nav drawer, а иногда контекстную навигацию, и вкладки. В вышеприведенных скриншотах мы видим, что пункты назначения достигаются через nav drawer. Он по-прежнему доступен на этих экранах, потому что все они являются основными пунктами назначения. Прямо под панелью инструментов мы видим пример навигации по контексту, используемый для перемещения по отфильтрованным фрагментам контента. [gallery size="full" link="none" ids="37972,37973,37974"]
Google Calendar
В Google Calendar (выше) используется шаблон nav drawer и контекстная навигация и обе используются действительно интересными способами. Шаблон nav drawer в Google Calendar нестандартен, используется в основном для дополнения календаря. Сам календарь контролируется расширяющейся панелью инструментов, а цветные плитки приводят пользователей к деталям событий. Читайте больше о комбинированных шаблонах навигации здесь.
Есть еще вопросы?
Навигация – это сложная тема. Надеюсь, это пособие для начинающих послужит хорошей основой для понимания общих принципов навигации на Android. Если у вас все еще есть вопросы, оставьте комментарий или торопитесь принять участие в нашей первой сессии ответов на вопросы #AskMaterial с командами по Material Design Design Relations в Twitter здесь! Спасибо, Nick Butcher и Barbara Eldredge.
Перевод статьи Liam Spradlin
Топ коментарі (0)