Все большие пальцы руки, почему навигация должна заменить Navbar в iOS Design

Navbar отключен

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

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

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

Сенсорные зоны Hurff иллюстрируют достижимость правой руки большого пальца.

По мере изменения устройств наш визуальный язык меняется вместе с ними. Пришло время отойти от навигационной панели в пользу навигации в пределах досягаемости большого пальца. Для целей данной статьи мы будем называть это Reach Navigation.

Почему Navbar не работает

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

  • Стандарт iOS Apple создала панель навигации, которая будет настраиваемой, масштабируемой, доступной и простой в реализации. Поскольку это стандарт iOS, его можно узнать по всем приложениям.
  • Навигация В левой и правой частях панели навигации есть место для кнопок. Левая область часто перемещает пользователей вверх по иерархии, а правая область предназначена для захвата. Кнопка «Назад» информирует пользователей о том, что они не в корневом представлении.
  • Заголовок Обеспечивает согласованное расположение текста, определяющего функцию представления. Так как навигационная панель всегда остается на экране, это помогает в дальнейшем установить информационную иерархию.
  • Сопоставление с панелью вкладок Если в нижней части экрана есть ряд всплывающих значков (а именно, панель вкладок), размещение других значков в верхней части экрана помогает отделить отношения между родителями и дочерними элементами.
  • Логотип Ваш клиент может разместить логотип здесь! Genius. Lol JK, я нахожу это безвкусно, но я отвлекся.
Некоторые образцы навигационных панелей для вашего удовольствия.

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

В таком случае давайте поговорим о минусах Navbar:

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

Отлично. Теперь мы знаем, как navbars могут быть дерьмом. Так что же мы делаем?

Доберитесь до навигации и Apple

Как дизайнер iOS, я поддерживаю свой тезис, указывая, как Apple уже использует Reach Navigation. Готовы? Начнем с двух очевидных способов, которыми Apple приспосабливает большие мобильные экраны.

Вместо кнопки «Назад» перейдите назад, проведя пальцем от левого края.

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

Слегка дважды нажав кнопку «Домой», вы сдвигаете контент вниз.

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

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

Apple Music изменится с iOS 9 (слева) на iOS 10 (справа). Удаление панели навигации позволило увеличить размер основной метки. Милая.

Теперь оба приложения используют лист, который можно пролистать вниз, чтобы отклонить.

Apple Maps меняется с iOS 9 (слева) на iOS 10 (справа). Пользовательский интерфейс почти полностью перевернут. Настройки карты и привязка к текущему местоположению труднее получить, тогда как поиск и результаты имеют приоритет.

Несколько кнопок «Назад» в Apple Music пережили блок рубок для iOS 10, но они будут помечены для удаления в будущей ОС. Глупо выделять столько горизонтального пространства для кнопки, которая занимает только 20 процентов недвижимости. Apple Music также вернулась к простой метке «Назад» вместо описания места возврата - краеугольного камня функциональности кнопки «Назад» в версии iOS 7.

Кнопка «Назад» в iOS 10 занимает здесь много недвижимости. Кажется временным, нет? Да.

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

Включая навигацию по досягаемости

Вот некоторые особенности того, как включить Reach Nav в свои приложения. Если вы работаете над:

Новое приложение с использованием панели вкладок:

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

Новое приложение без вкладки:

  • Попробуйте открыть ящик, например Карты, или листы, например Почту.
  • Должен ли я сказать это? Расположите по приоритетам кнопки в нижней части экрана.

Обновление устаревшего дизайна:

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

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

Примеры Reach Nav в дикой природе

Новые приложения Apple - не единственные продукты, которые начинают уважать Reach Nav. Lyft и Pokémon Go поместили все в одну руку.

Покемон Go и Lyft используют Reach Navigation.

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

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

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

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

Оставайтесь на связи

Navbar был неотъемлемой частью iOS с тех пор, как Apple выпустила первый комплект разработчика, и он нам хорошо послужил. Но пришло время отпустить.

Давайте согласимся прекратить прикреплять важные кнопки в верхней части экрана. Лучшая навигация в пределах досягаемости.

Брэд Эллис является основателем дизайнерского агентства Tall West, клиентами которого являются Airbnb и Target. Он является лауреатом Apple Design Award и получил два Webbys за дизайн приложения. Если вы хотите работать вместе, напишите ему на Брэда на Tallwest.com.

Авторы: Ронан Руни и Мэгги Мейсон