Как называется меню сверху на андроиде

Как правильно пользоваться режимом многозадачности на телефоне

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

Многозадачность — ключ к успеху

Меню открытых приложений

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

⚡ Подпишись на Androidinsider в Дзене, где мы публикуем эксклюзивные материалы

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

Для вызова меню многозадачности предусмотрена специальная кнопка

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

При использовании жестового управления нужно сделать свайп вверх

Переключение между приложениями

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

С полноэкранным индикатором переключаться удобнее

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

❗ Поделись своим мнением или задай вопрос в нашем телеграм-чате

Как закрепить приложение

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

1. Откройте меню многозадачности.
2. Задержите палец на окне программы, которую нужно закрепить.
3. В контекстном меню нажмите на значок замка.

Закрепленные приложения не выгружаются из оперативной памяти и продолжают работать в фоне

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

Разделение экрана на Андроид

Функции, о которых я рассказал ранее, помогают быстро переключаться между запущенными программами. Допустим, когда вы прочитали все новости в нашем телеграм-канале, после чего решили перейти к просмотру видео в YouTube. Однако, начиная с Android 7.0, на смартфонах появилась еще более полезная опция — разделение экрана на телефоне. Она делит рабочее пространство на части, позволяя выполнять 2 задачи одновременно. Например, читать инструкцию на Androidisider.ru и приводить ее в действие. Круто, правда? Вот, как сделать разделение экрана:

1. Откройте список запущенных приложений.
2. Задержите палец на программе, которая будет отображаться сверху (при использовании альбомной ориентации — слева).
3. Нажмите кнопку разделения экрана.
4. Выберите второе приложение.

Разделение экрана уместно на смартфоне с большим дисплеем

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

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

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

Режим «Картинка в картинке»

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

�� Загляни в телеграм-канал Сундук Али-Бабы, где мы собрали лучшие товары с АлиЭкспресс

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

После сворачивания приложения воспроизведение перейдет в режим окна

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

Как сделать плавающее окно

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

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

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

Эта функция доступна не на всех смартфонах

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

⚡ Подпишись на Androidinsider в Пульс Mail.ru, чтобы получать новости из мира Андроид первым

Смартфон для работы — какой он

Смартфон для работы — понятие растяжимое, но вполне характеризуемое

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

• хороший процессор, набирающий минимум 200-300к баллов в AnTuTu;
• по меньшей мере 4-6 ГБ оперативной памяти стандарта не ниже LPDDR4x;
• внутренний накопитель стандарта UFS 2.1 и выше;
• большой экран (6 дюймов и более);
• операционная система Android 9 и выше.

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

Теги

• Новичкам в Android

UI-элементы и жесты в мобильных приложениях

Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.

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

Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.

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

Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:

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

Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.

Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.

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

Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).

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

AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.

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

Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.

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

Bubble — овальный элемент выбора какого-либо параметра, чаще всего используется в фильтрах.

Строка поиска — поле ввода для поискового запроса.

Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).

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

Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).

Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.

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

Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.

Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.

Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).

Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.

Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):

Жесты

Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.

Double tap — два коротких касания, двойной тап.

Мультитап — три и более тапов подряд по одному элементу.

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

Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.

Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.

Pull to refresh (p2r) — дословный перевод: «потяни для обновления».

Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!

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

Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?

• тестирование мобильных приложений
• тестирование по
• тестирование приложений
• ui testing

• Блог компании Юла
• Разработка мобильных приложений
• Тестирование мобильных приложений
• Дизайн мобильных приложений

Меню

Android поддерживает несколько типов меню. Первый — на телефоне есть отдельная кнопка Menu (в старых телефонах), нажатие которой вызывает меню. В новых устройствах отдельную кнопку убрали, заменив на значок меню в виде трёх точек в вертикальной ориентации. Второй тип — контекстное меню, которое появляется при нажатии и удерживания пальца на экране в нужном месте (также можно нажать и удерживать центральную кнопку на телефоне). Контекстное меню в свою очередь может иметь подменю. Сегодня мы познакомимся с первым типом меню. В данной статье будет рассматриваться работа с меню на новых устройствах под управлением Android 4.0 и выше.

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

Создайте новый проект на основе Empty Activity и запустите его. Никакого меню пока нет.

Создадим несколько строковых ресурсов в файле res/values/strings.xml, которые будут отвечать за пункты меню:

 Settings Кот Кошка Котёнок 

Теперь создайте новую папку menu в папке res (правый щелчок мыши на папке res, | New | Directory). Далее создайте в созданной папке файл menu_main.xml — имя указывает, что меню относится к основной активности MainActivity (правый щелчок мыши на папке menu | New | Menu Resource File). Если вы будете создавать приложение с несколькими экранами, то у каждой активности будет отдельное меню со своими настройками. Пока откроем файл menu_main.xml и добавим в полученный шаблон свой код:

Откроем файл MainActivity. Сейчас в нём только один метод onCreate(). Добавим новый метод onCreateOptionsMenu(). Именно данный метод отвечает за появление меню у активности. Сразу после метода onCreate() начинайте вводить первые символы метода и дальше студия сама покажет список подходящих методов.

Найдите нужный метод и заготовка будет создана автоматически.

 override fun onCreateOptionsMenu(menu: Menu?): Boolean

Добавляем в заготовку метод, который берёт данные из ресурсов меню и преобразует их в пункты меню на экране.

 override fun onCreateOptionsMenu(menu: Menu?): Boolean

В методе inflate() вы указываете ресурс меню (R.menu.menu_main) и объект класса Menu.

По английски «inflate» переводится как надувать, по замыслу разработчиков Android, мы как бы надуваем данными объект, например, меню.

Ваш браузер устарел. Видео с котом не увидите

По другой версии слово «inflate» происходит от словосочетания in flat — в квартиру. Существует старинная традиция запускать в квартиру первым кота, который исследует все закоулки дома и заявляет о своём согласии жить в нём. Так и мы запускаем данные из XML-файла в объект MenuInflater.

Запустите проект. Теперь в правой части заголовка вы увидите значок из трёх точек, выстроенных в вертикальную линию. Нажмите на значок, чтобы увидеть пункт меню Settings.

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

Запустите проект и попробуйте снова вызвать меню. Вы увидите три новых пункта.

Параметры id и title не нуждаются в объяснениях. Параметр orderInCategory позволяет задать свой порядок вывода пунктов меню. Предположим вы создали пять пунктов меню, но пока не определились с порядком их вывода на экране. Чтобы не перемещать постоянно целые блоки кода для пунктов меню в нужном порядке, можно воспользоваться данным параметром.

И, наконец, важный атрибут app:showAsAction определяет поведение меню в ActionBar. Значение never означает, что элемент меню не должен выводиться в заголовке, а только в всплывающем меню, т.е. находиться за тремя точками. Если вы установите значение always, то пункт Settings сразу появится в заголовке вашего приложения. Также доступны значения ifRooms, withText и collapseActionView. Попробуйте самостоятельно. Например, ifRoom выводит пункт меню, если позволяет место. Если пунктов будет много, то они будут только мешаться. Как правило, в таком варианте выводят очень короткое слово или значок для частых операций, чтобы избежать лишнего щелчка на три точки.

Обратите внимание на атрибут app:showAsAction, который относится к пространству имён xmlns:app=»http://schemas.android.com/apk/res-auto». Было время, когда такого пространства имён не существовало и в проектах использовался атрибут android:showAsAction из стандартного пространства имён. Если студия будет ругаться на ошибку, то отредактируйте код.

Пока пункты меню не выполняют полезной работы. Любое нажатие на пункт просто закрывает меню без видимых последствий. Мы ещё не написали код для обработки нажатий.

Выбор пунктов меню

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

 override fun onOptionsItemSelected(item: MenuItem): Boolean

Параметр item отвечает за пункт меню. Вам следует получить идентификатор меню через метод getItemId() и указать для него код (в Kotlin вместо метода используется свойство itemId). Так как обычно меню состоит из нескольких пунктов, то удобно использовать конструкцию when. Для вывода информации воспользуемся текстовой меткой. Добавьте на экран активности компонент TextView. Можете использовать имеющийся TextView с надписью «Hello World!», только присвойте ему идентификатор.

Добавим код в заготовку для выбранного пункта меню:

 override fun onOptionsItemSelected(item: MenuItem): Boolean < when (item.itemId) < R.id.action_cat1 -> < textView.text = "Вы выбрали кота!" return true >R.id.action_cat2 -> < textView.text = "Вы выбрали кошку!" return true >R.id.action_cat3 -> < textView.text = "Вы выбрали котёнка!" return true >> return super.onOptionsItemSelected(item) > 

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

Переключатели

Внешний вид пунктов меню можно изменить на вид с переключателями. Для этого нужно добавить элемент group с атрибутом android:checkableBehavior=»single»:

Большого смысла в этом режиме я не вижу. И рассматривать его не будем.

Режим Design

В Android Studio 2.2 добавили графический режим построения меню, которых похож на панель инструментов для добавления новых компонентов на экран. У меню панель состоит из четырёх элементов: Menu Item, Search Item, Menu, Group.

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

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

Пример на Java

Код на Java не сильно отличается. Создание элементов меню на XML остаётся без изменений. Осталось только написать кода в классе активности.

Выберите в студии меню Code | Override Methods. и в следующим окне начинайте вводить название метода по первым буквам. Можно вводить по первым заглавным буквам, т.е. ocom (onCreateOptionsMenu), чтобы быстро найти нужную строку. Нажимаем кнопку OK и получаем заготовку.

 @Override public boolean onCreateOptionsMenu(Menu menu)

Добавляем в заготовку метод, который берёт данные из ресурсов меню и преобразует их в пункты меню на экране.

 @Override public boolean onCreateOptionsMenu(Menu menu)

 @Override public boolean onOptionsItemSelected(MenuItem item)

Добавим код в заготовку для выбранного пункта меню:

 @Override public boolean onOptionsItemSelected(MenuItem item) < // получим идентификатор выбранного пункта меню int TextView infoTextView = findViewById(R.id.textView); // Операции для выбранного пункта меню switch (id) < case R.id.action_cat1: infoTextView.setText("Вы выбрали кота!"); return true; case R.id.action_cat2: infoTextView.setText("Вы выбрали кошку!"); return true; case R.id.action_cat3: infoTextView.setText("Вы выбрали котёнка!"); return true; default: return super.onOptionsItemSelected(item); >> 

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

Существует альтернативный способ через XML, похожий на обработку щелчков кнопки (начиная с Android 3.0). Вы можете добавить атрибут android:onClick в ресурсах меню, и вам не нужно использовать вызов метода onOptionsItemSelected(). При помощи android:onClick вы можете указать нужный метод при выборе пункта меню. Добавьте данный атрибут к пункту Settings

Теперь в коде активности напишем следующее:

 // у атрибута пункта меню Settings установлено значение android:onClick="onSettingsMenuClick" public void onSettingsMenuClick(MenuItem item)

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

По мере того, как наши телефоны становятся все больше, нам нужно отрегулировать создание и разработку мобильных веб-сайтов. Можем ли мы что-то позаимствовать из дизайна приложений и тапбаров? Можем ли мы исправить навигацию на мобильных версиях наших сайтов, чтобы снизить стоимость взаимодействия? Из этой статьи мы узнаем ответы на эти вопросы. Когда вы слышите словосочетание «мобильная навигация», что первым приходит на ум? Я бы подумал о выдвижном гамбургер-меню. Этот паттерн дизайна использовался с первых дней адаптивного дизайна, и, хотя с тех пор многое изменилось, он остался неизменным. Почему? Как мы начали использовать верхнюю панель навигации с гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы.

История верхней панели навигации и гамбургер-меню

Первые иконки гамбургер-меню начали появляться в 80-х годах. Они были разработаны Нормом Коксом для Xerox Star – первого в мире графического пользовательского интерфейса. Он также разработал иконку документа для того же интерфейса. Эту историю описал Geof Allday (который написал на email Норму). Вы можете прочитать их переписку, нажав здесь. Позже они появились в Windows 1 и DOS. Нынешняя мобильная навигация, как мы ее знаем, была популяризирована книгой Итана Маркотта «Отзывчивый веб-дизайн» еще в 2011 году. С тех пор верхняя панель навигации и гамбургер-меню стали отраслевым стандартом. https://vimeo.com/61556918

За последние 10 лет размер экрана мобильного телефона увеличился вдвое

Со времен оригинального iPhone, мобильные продажи росли год от года. 2019 год – это первый год, когда рынок достиг точки насыщения, и продажи начали снижаться. Но это не значит, что люди не пользуются телефонами. По данным Quartz и Ciodive к 2020 году мы будем тратить 80% времени, проведенного в Интернете на мобильных телефонах. Сравните это с 2010 годом, когда только четверть интернет-пользователей пользовались телефоном. По мере роста продаж телефонов размеры их экранов также увеличились более, чем в два раза. Средний размер экрана смартфонов увеличился с 3,2 дюйма до 5,5 дюймов. В 2017 году производители устройств начали использовать более высокое соотношение сторон 18: 9 для 5,7-дюймовых и 6-дюймовых дисплеев. Теперь мы видим, что 6-дюймовые дисплеи с соотношением сторон 18: 9 становятся новым стандартом во флагманском и среднем ценовом сегментах, поскольку имеют большую площадь экрана, чем 5,5-дюймовые дисплеи с соотношением сторон 16: 9, сообщает XDA-Developers. Обзор того, как изменились размеры экрана мобильных телефонов (Источник изображения: Scientamobile) В основном, размер экрана мобильного телефона становится все больше и больше. Это хорошо, но как мы адаптируем наши паттерны дизайна, чтобы отразить эти изменения?

Дизайн, управляемый большим пальцем

Впервые я услышал термин «дизайн, управляемый большим пальцем» (thumb-driven design) от Виталия Фридмана. Он основан на исследованиях Стивена Хубера и Джоша Кларка о том, как люди держат свои устройства. Суть в том, что почти в каждом случае три основных хвата были наиболее распространенными. 49% пользователей держали свои телефоны одной рукой, 36% держали телефон одной рукой и тыкали указательным или большим пальцем другой руки, а оставшиеся 15% приняли молитвенную позу BlackBerry держа телефон двумя руками, и набирая текст большими пальцами, утверждает Джош Кларк. Стивен Хубер обнаружил, что 75% пользователей касаются экрана только одним большим пальцем. Отсюда и термин, «управляемый большим пальцем». Есть три основных способа, которыми мы держим наши телефоны В 2016 году Саманта Ингрэм написала статью под названием «Зона большого пальца: проектирование для мобильных пользователей», в которой подробно рассматриваются эти идеи. Она определила легкодоступные, труднодоступные и промежуточные зоны. Карта зоны большого пальца, объясненное Самантой Ингрэм Тем не менее, я бы сказал, что с увеличением размера телефона эта карта немного изменилась: Новая карта зоны большого пальца для дисплеев больших размеров Когда телефоны были маленькими, большинство областей экрана были легкодоступными. По мере того, как наши экраны становились больше, стало практически невозможно дотянуться до их верхней части без настройки телефона. Из приведенного выше примера видно, где находится самое дорогое полезное пространство на экране. Тем не менее, этим часто пренебрегают на веб-страницах. Как мы можем это исправить?

Паттерн нижней панели навигации

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

Первичные и вторичные элементы

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

Вайфрейм переосмысленных первичных и вторичных элементов навигации

Как это повлияет на скролл в больших меню?

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

Вайрфрейм переосмысленного большого меню

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

Где размещать логотип?

У вас могут возникнуть вопросы с размещением логотипа. Есть два способа сделать это:

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

Как видите, я использовал в вайфрфрейме метку меню. Кевин Робинсон обнаружил, что размещение метки рядом с иконкой увеличило вовлеченность на 75%:

Вайрфрейм логотипа расположен вверху, а меню – внизу

Как это работает с Handlebars?

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

iOS Handlebars и безопасные зоны

Если вы разместите логотип в центре, ссылка может конфликтовать с функциональностью handlebar. В этом случае поможет внутренний отступ.

Будут ли пользователи приспосабливаться к этому паттерну или посчитают его дезориентирующим?

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

В качестве контраргумента закону Якоба я бы хотел предложить Закон Фиттса. В нем утверждается, что время для достижения цели зависит от расстояния и размера цели. По сути, чем меньше и дальше цель, тем выше стоимость взаимодействия. У NN/g есть замечательное видео, объясняющее это более подробно:

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

Как это будет интегрироваться с паттерном тапбара?

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

Дизайон тапбара от Mengyuan Sun

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

Nielsen утверждает, что скрытая навигация (гамбургер-меню) значительно снижает удобство работы как для мобильных устройств, так и для декстопных. На мобильных устройствах люди использовали скрытую навигацию в 57% случаев, а комбинированную – в 86% случаев, то есть в 1,5 раза больше! Комбинированная навигация, на которую ссылается Nielsen, представляет собой шаблон панели вкладок в сочетании с гамбургер-меню – вот пример:

Пример приложения Samsung от Ризки Рахмат Ридха для Muzli

Может показаться, что тапбар – идеальное решение, но у него тоже есть свои проблемы. Фабиан Себастьян отметил, что это подходит только для представлений верхнего уровня. Это не работает с дополнительными элементами навигации. Чтобы решить эту проблему, появился гибрид гамбургер / тапбар. Если вы обратите внимание на приложение Samsung, то увидите, что последний пункт меню – это кнопка «More», которая вызывает гамбургер-меню.

По сути, паттерн нижний панели навигации довольно хорошо интегрируется в паттерн тапбара, если вы хотите объединить их оба. Вы можете найти много хороших примеров в мире мобильных приложений.

Переосмысление некоторых популярных сайтов

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

Давайте сначала посмотрим на Bloomberg:

Сайт Bloomberg с переосмысленной нижней навигацией

Далее, давайте посмотрим на Invision:

Сайт Invision с переосмысленной нижней навигацией

И последнее, но не менее важное: старый добрый Reddit:

Сайт Reddit с переосмысленной нижней навигацией

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

Это звучит замечательно, но как мне убедить своих клиентов?

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

• Мобильные приложения уже много лет размещают важные пункты меню в нижней части экрана. Просто отправьте им эти две статьи для начинающих:
• «Золотые правила дизайна нижней навигации» от NickBabich
• «Базовые шаблоны для мобильной навигации: учебник для начинающих», от RalucaBudiu
• Я заметил случаи, когда популярные мобильные приложения начали сдвигать важные элементы навигации вниз. Хорошим примером является Uber. В их приложении строка поиска является одним из самых важных элементов на экране. В старом дизайне она располагалась вверху. Теперь ее переместили вниз.

Старый и новый дизайн панели поиска Uber

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

Выводы

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

Понимаю, что все это не является надежным решением для всех случаев использования, но оно того стоит. Оно поможет немного улучшить опыт. Интересно узнать, что вы думаете по этому поводу!