Способы отказаться от верхней навигации в iOS — советы дизайнера

iOS-разработчик Брэд Эллис о том, как сделать управление приложениями для больших экранов современных смартфонов более комфортным.

iOS-разработчик Брэд Эллис о том, как сделать управление приложениями для больших экранов современных смартфонов более комфортным.

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

Затем продажи телефонов настолько резко возросли, что востребованность iPhone 7 Plus превзошла востребованность iPad mini. Если вы владелец современного iPhone, то панель навигации может показаться вам достаточно трудноуправляемой. А говоря точнее, до неё просто сложно добраться.

Постоянно увеличивающийся размер экранов означает, что расстояние между панелью навигации и большим пальцем тоже растёт. Экран iPhone 7 Plus настолько большой, что если вы хотите дотянуться до кнопок на панели одной рукой, нужно, чтобы длина большого пальца увеличилась на 150%. Нужны одна или две дополнительные фаланги. Пустяк.

Области касания по <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fscotthurff.com%2Fposts%2Fhow-to-design-for-thumbs-in-the-era-of-huge-screens&postId=25441" rel="nofollow noopener" target="_blank">версии</a> Скотта Херффа иллюстрируют зоны, куда может дотянуться большой палец

Устройства меняются, и визуальный язык меняется вместе с ними. Пришло время отказаться от классической навигационной панели в пользу той, что будет размещена в зоне доступа большого пальца. Для удобства мы назовём это Reach Navigation — доступной навигацией.

Навигационная панель — это базовый элемент «системного стандарта», который применяется в «Телефоне», «Сообщениях», «Почте», «Календаре» и многих других приложениях. Есть много причин, по которым он заслужил признание:

Стандарт iOS. Apple создала навигационную панель с возможностью индивидуальной настройки и изменения размера — удобную и простую с точки зрения разработки. Так как речь идет о стандарте iOS, то панель узнаваема во всех приложениях.
Навигация. Слева и справа на навигационной панели есть место для кнопок. Левая сторона позволяет пользователям передвигаться по вертикали, а правая сторона подходит для захвата. Кнопка «Назад» сообщает пользователю, что он находится не в корневом каталоге.
Название. Это поле для текста, который определяет функциональность экрана. Так как панель навигации всегда остается на экране, она помогает в дальнейшем установить структуру приложения.
Компаньон для панели вкладок. Если внизу экрана расположен ряд иконок, на которые можно нажимать (панель вкладок), то размещая остальные иконки вверху экрана, вы определяете отношения между родительскими и дочерними элементами.
Логотип. Клиент может разместить вверху логотип. Гениально. Конечно, я просто шучу — лично мне кажется, что это уже давно устарело.

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

Вернуться назад сложнее. Жест «свайп» пригодится только тогда, когда на экране нет горизонтальной прокрутки. Но если она есть, то пользователю придется тянуться.
Названия для всех режимов просмотра — это боль. Не всем экранам требуется постоянное название, а у некоторых из них слишком длинная подпись. Однако если оставить область навигации пустой, то вы напрасно потратите экранное пространство, да и смотреться это будет неважно.
Для навигации требуются обе руки. Если можно держать устройство одной рукой, то должна быть предусмотрена и возможность работать с ним одной рукой. Так гораздо лучше и удобнее в мире, где пока ещё приходится возить тележки для покупок и носить ребенка.
Простые приложения становятся сложнее, чем хотелось бы. Часто панель навигации ведет к появлению очень распространенной информационной архитектуры. Легко разрабатывать горизонтальное поэтапное предоставление информации, а вот увеличить количество подставляемых элементов или использовать вкладки — гораздо сложнее.

Начнем с двух наиболее очевидных примеров того, как Apple приспосабливается к большим мобильным экранам.

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

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

Легкое двойное касание кнопки «Домой» сдвигает контент вниз

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

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

Apple Music изменился: слева — iOS 9, справа — iOS 10. Когда панель навигации исчезла, метка основного режима просмотра увеличилась в размере

Теперь оба приложения (и «Карты», и «Музыка») используют вкладки, смахнув которые, можно закрыть экран.

Изменения Apple Maps от iOS 9 (слева) к iOS 10 (справа). Стало сложнее достать настройки карты и кнопку «Закрепить текущее местоположение», в то время как поиск и результаты теперь стоят на первом месте

Несколько кнопок в Apple Music в iOS 10 ещё не заблокированы, но уже помечены на удаление в будущей ОС. Очень глупо резервировать столько горизонтального пространства под кнопку, которая на самом деле занимает 20% полезной площади рабочей поверхности.

Кнопка «Назад» в iOS 10 занимает слишком много рабочей поверхности

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

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

Если работаете над новым приложением с панелью вкладок:

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

Если работаете над новым приложением без панели вкладок:

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

Если работаете над переделкой дизайна, доставшегося вам по наследству:

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

Safari перенес адресную строку вниз, убрал панель инструментов и при этом сохранил функциональность

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

Не только новые встроенные приложения Apple начинают считаться с концептом доступной навигации. Приложения Lyft и Pokemon Go также разместили всё необходимое в зоне, доступной для управления одной рукой.

Pokemon Go и Lyft используют доступную навигацию

Некоторые другие приложения, как, например, Overcast, начали использовать экраны, которые можно смахнуть вниз.

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

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

#Интерфейсы