Кнопки навигации: Sorry, this page can’t be found.

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

У меня есть горизонтальная панель с 3 кнопками: назад, далее и отмена. Я сделал горизонтальное выравнивание вправо, но только кнопки Next и Cancel следуют за этим выравниванием. Вот код:…

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

Вот над чем я работаю: www.buymaengdakratom.com Я пытаюсь сделать так, чтобы элементы панели навигации расширялись по всей ширине тени коробки, чтобы ни один белый фон тени коробки не был виден. Вот…

По умолчанию панель инструментов MFC закреплена в верхнем ряду по левому краю. Может ли кто-нибудь сказать мне, как закрепить панель инструментов MFC в верхнем ряду с выравниванием по правому краю…

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

Проблема После обновления до XCode 9 и переноса моего кода на Swift 4 я столкнулся с несколькими проблемами, которых не ожидал. Одна из них заключается в том, что панель навигации в моем приложении…

Мне нужно добавить знак $ к плавающим значениям, которые идут в поле, которое одновременно имеет ширину AND с правым выравниванием. Он достаточно прост в использовании system.out.printf($%8.2f,…

У меня есть ConstraintLayout , который содержит 3 кнопки по горизонтали. Я хочу, чтобы 3 кнопки имели фиксированную ширину и были равномерно распределены по ширине макета.

Есть ли вообще возможность изменить цвет кнопки навигации назад по умолчанию? Я использую SwiftUI с NavigationView

— обзор

Дизайн, основанный на ценностях

В реальном мире с ограниченными возможностями команды вынуждены срезать углы, работать с меньшими ресурсами и предоставлять больше функций за меньшее время. Это оставляет доступность в руках нескольких преданных своему делу членов команды, которые должны отстаивать дело включения как армия из немногих. Риск заключается в том, что без достоверных данных, подтверждающих эти усилия, благородные намерения могут потерпеть неудачу. Мы совершенствуем наш подход к техническим параметрам, которые можно измерить, модернизируя модель взаимодействия с учетом наших лучших предположений.Это дизайнерская ловушка, в которой функции создаются в соответствии с логикой, которая имеет смысл только для нас, а не для людей, которые могут на самом деле использовать наши продукты. «Могу ли я спуститься на лыжах со скоростью 60 миль в час?» — спросил слепой президент Sendero Group Майк Мэй. «Да», — ответил он, отвечая на свой вопрос. «Могу ли я использовать микроволновую печь с плоским экраном? Нет.» Такова природа проектирования для цифровых изгоев.

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

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

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

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

▪

89% слепых потребителей полагаются на какой-то экранный ридер для каждого онлайн-сеанса

▪

Опрошенные слепые пользователи Интернета пропускают навигацию 66% время, при этом менее половины слепых пользователей просматривают всю домашнюю страницу

▪

Почти 82% слепых пользователей подтвердили, что ищут функциональные возможности поиска сразу после загрузки страницы

▪

61% перескочили на первое пустое текстовое поле с предположением, что оно предназначено для поиска

▪

90% пользователей переходили по заголовкам хотя бы часть времени, а более половины либо никогда, либо редко используют навигационную карту сайта

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

Положительная избыточность — предоставили ли мы возможность выполнять одну и ту же задачу несколькими способами в соответствии с индивидуальными способностями?

Подход, основанный на принципах — можем ли мы рассматривать доступность как нечто большее, чем контрольный список, руководствуясь как деловыми, так и социальными намерениями?

Путь наименьшего удивления — улучшили ли мы удобство использования, удалив неприятные сюрпризы, связанные с определенными сегментами инвалидности?

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

Отличное упражнение — прослушать веб-сайт с помощью онлайн-программы чтения с экрана, такой как WebAnywhere от Вашингтонского университета (http: // webanywhere.cs.washington.edu/wa.php). Приятно слышать, как плохо переводится большинство сайтов, даже тех, которые предположительно соответствуют Разделу 508 или рекомендациям W3C. Имейте в виду, что большинство рекомендаций являются общими по необходимости и что соблюдение стандартов не гарантирует качественного взаимодействия с пользователем для тех, кто полагается на вспомогательные технологии.

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

Добавление тегов к изображениям, помогающее пользователям

Слепые люди не могут видеть изображения на своих ноутбуках, но программа чтения с экрана по-прежнему требует учета изображений, размещенных на веб-странице. Обычно это делается путем вставки фрагмента текста (называемого атрибутом alt) в код, отображающий изображение. Для изображения горизонта Бостона это может выглядеть примерно так:

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

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

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

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

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

Структурирование содержимого для лучшей читаемости

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

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

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

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

Принцип ценности — Обеспечение доступности контента — это больше, чем просто соблюдение веб-стандартов.Разумная структура контента не мешает естественному чтению.

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

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

Существует способ запрограммировать веб-сайты так, чтобы страницы можно было вызывать одним нажатием клавиши, называемой клавишей доступа .Использование клавиш доступа может быть очень заманчивым — представьте, с какой легкостью человек с недостаточностью двигательных навыков может перейти на домашнюю страницу, просто нажав клавишу «h», или как он или она могут получить доступ к функции поиска, нажав «s». ” Но есть проблема. Люди, использующие вспомогательные клавиатуры, обычно настраивают нажатия клавиш в соответствии со своими потребностями; Фактически, программы чтения с экрана имеют заранее заданные клавиши доступа для управления их функциями. Слепой пользователь может не знать о ключе доступа к веб-сайту до тех пор, пока он не встанет на пути к чему-то еще, что он хотел бы сделать (рисунок 3.3).

РИСУНОК 3.3. Использование клавиш доступа может быть очень заманчивым, но это не поможет пользователям программ чтения с экрана, которые настроили клавиатуру в соответствии со своими потребностями.

Таким образом, хотя доступность сайта может быть незначительно улучшена путем добавления настраиваемых ключей доступа (после того, как человек выяснил, что они делают), существуют веские причины игнорировать ключи доступа при публикации в Интернете. Сказав это, иногда решение принимается, и команда проекта решает пойти по этому пути.По этой причине — если использование ключей доступа считается действительно ценным для конечного пользователя — лучше всего помнить о следующих стандартах, используемых в Соединенном Королевстве с 2004 года:

S — Пропустить навигацию

1 —Главная страница

2 — Что нового

3 — Карта сайта

4 — Поиск

5 — Часто задаваемые вопросы (FAQ)

6 — Помощь

7 —Процедура рассмотрения жалоб

8 — Положения и условия

9 — Форма обратной связи

0 — Доступ к ключевым деталям

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

Ссылки, ярлыки и лазейки

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

Однако слово «навигация» может вызвать проблемы. Кто-то, кто всю свою жизнь был слепым, возможно, никогда не видел печатной карты. Другие могут не совсем понять его ссылку как архетип. Хотя ссылка технически соответствует требованиям, есть более эффективные способы ее формулировки — фраза «Перейти к основному содержанию» дает четкое и краткое указание на то, что ожидается при выборе ссылки. (Например, программы чтения с экрана по-разному интерпретируют слова. Включение модификатора «main» дополнительно гарантирует, что слово « con tent» будет интерпретироваться как существительное, в отличие от прилагательного «cont ent », обозначающего счастье.) Это улучшает впечатления не только для слабовидящих, но и для тех, у кого есть проблемы с познавательной способностью.

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

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

Панели навигации — Панели — iOS — Руководство по человеческому интерфейсу

Панели навигации

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

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

Для руководства разработчика см. UINavigationBar.

Заголовки панели навигации

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

Используйте крупный заголовок, если хотите выделить контекст. Большие заголовки никогда не должны конкурировать с контентом, но в некоторых приложениях большой жирный текст большого заголовка может помочь сориентировать людей при просмотре и поиске. Например, в макете с вкладками большие заголовки могут помочь прояснить активную вкладку и указать, когда люди прокручиваются вверх. Phone использует этот подход, в то время как Music использует большие заголовки, чтобы различать области контента, такие как альбомы, исполнители, списки воспроизведения и радио. В iOS 13 и более поздних версиях большая панель навигации заголовка по умолчанию не содержит фонового материала или тени.Кроме того, большой заголовок переходит в стандартный заголовок, когда люди начинают прокручивать контент. Инструкции для разработчиков см. В разделе prefersLargeTitles.

Стандартное название

Большое название

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

Элементы управления панелью навигации

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

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

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

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

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

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

Попрощайтесь с привычными кнопками навигации Android

Попрощайтесь с тремя знакомыми кнопками, которые появляются в нижней части экрана на телефонах Android.Грядущий Android P заменяет их одной экранной кнопкой в ​​форме таблетки.

Дэйв Берк, вице-президент по разработке Android, продемонстрировал обновление сегодня на Google I / O во время краткого обзора больших изменений, ожидаемых в Android P. Об изменении кнопки ходили слухи с тех пор, как Google выпустила предварительную версию мобильной ОС для разработчиков в начале этого года. , но это был первый раз, когда Google продемонстрировал, как пользователи будут взаимодействовать со своими телефонами в будущем.

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

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

#AndroidP упрощает использование телефона. Наслаждайтесь новой системой навигации, удобными регуляторами громкости и многим другим. # io18 pic.twitter.com/aa0o5c6uVM

— Android (@Android) 8 мая 2018 г.

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

Это не единственное изменение в навигации Android. Регуляторы громкости перемещены в вертикально ориентированное окно, совмещенное с физическими кнопками громкости на вашем телефоне. Это похоже на расположение окон «Завершение работы» и «Перезагрузка» уже в Android Oreo.

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

Ringer будет просто переключателем в Android P. Переключиться в режим «Не беспокоить» будет еще проще: просто переверните телефон экраном вниз на стол, и Shush автоматически отключит отвлекающие факторы.

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

Это лишь некоторые из изменений, которые появятся в Android P, который сегодня выпускается в виде бета-версии.

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

Google утверждает, что пользователи Android предпочитают эргономику трехкнопочной навигации жестам

Спустя день после выпуска финальной бета-версии Android Q, Google делает самые прямые аргументы в пользу того, почему новые элементы управления навигацией с помощью жестов в Q являются улучшением по сравнению с тем, что было раньше. The Verge сообщил о рассуждениях компании ранее сегодня, а теперь Google опубликовал более подробное объяснение в своем блоге разработчиков Android. «Переходя к модели жестов для системной навигации, мы можем предоставить приложениям больше экрана, чтобы обеспечить более захватывающий опыт», — написали менеджеры по продуктам пользовательского интерфейса Android Аллен Хуанг и Рохан Шах .

Никто не оспаривает эту выгоду, но проблема, с которой столкнулся Google, связана с функцией Android «назад» и выяснением лучшего способа сохранить ее с помощью жестов — и сделать это решение второй натурой для конечного пользователя.«Мы поставили эту цель выше, чем другие менее частые средства навигации, такие как выдвижные ящики и последние», — написали Хуанг и Шах.

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

Ниже представлена ​​тепловая карта областей телефона, в которых пользователи могут «комфортно» выполнять жесты при использовании устройства одной рукой. Как видите, это хороший аргумент в пользу того, чтобы «вернуться» в сторону телефона, как это сделал Google в Android Q:

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

Самым интересным лакомым кусочком для меня является следующее: на самом деле пользователи предпочитают эргономику традиционной трехкнопочной навигации Android, которая использовалась годами до того, как Google переключился (по крайней мере, на Pixel) в прошлом году на Android P. эргономика кнопок получила оценку 5,78 против 5,39 для жестов Android Q.

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

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

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

Google обнаружил, что люди реже использовали обратную функцию в те первые дни, когда пробовали Android Q и знакомились с ним.«По истечении этого периода среднее количество нажатий назад [в день] в конечном итоге будет таким же, как у трех кнопок и нашей навигации P».

Итак, окончательное решение Google было продвинуть вперед жестовую навигацию. Компания подтвердила, что основные производители телефонов Android, включая Samsung, LG, OnePlus, Motorola, Xiaomi, HMD Global и Oppo, согласились включить новую систему Google как по умолчанию на устройствах, которые поставляют с Android Q.

Но Google также дал понять, что у клиентов будет возможность придерживаться классической трехкнопочной панели навигации Android в Android Q, если они того пожелают. Выбор — это не просто то, что есть у бета-версии; он будет присутствовать в полной версии. И после принуждения владельцев Pixel 3 к использованию жестов, Google распространит на них ту же навигацию по выбору.

В сообщении Google признается, что жестовая навигация «распространилась» за последние несколько лет.Нет, компания не упомянула iPhone X, но сделала дань уважения Palm Pre за лидерство.

Navbar · Bootstrap

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

Как это работает

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

• Навбары требуют упаковки .navbar с .navbar-expand {-sm | -md | -lg | -xl} для гибкого сворачивания и классов цветовой схемы.
• Навигационные панели и их содержимое по умолчанию являются гибкими. Используйте дополнительные контейнеры, чтобы ограничить их горизонтальную ширину.
• Используйте наши служебные классы spacing и flex для управления интервалом и выравниванием внутри навигационных панелей.
• Навигационные панели по умолчанию реагируют, но вы можете легко изменить их, чтобы это изменить. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.
• Навигационные панели по умолчанию скрыты при печати. Принудительно распечатать их, добавив .d-print к .navbar . См. Служебный класс дисплея.
• Обеспечьте доступность с помощью элемента

Прочтите пример и список поддерживаемых подкомпонентов.

Поддерживаемое содержимое

Navbars имеют встроенную поддержку нескольких подкомпонентов. При необходимости выберите из следующего:

• .navbar-brand для вашей компании, продукта или названия проекта.
• .navbar-nav для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков).
• .navbar-toggler для использования с нашим плагином свертывания и другими режимами переключения навигации.
• .form-inline для любых элементов управления и действий формы.
• .navbar-text для добавления вертикально центрированных строк текста.
• .collapse.navbar-collapse для группировки и скрытия содержимого панели навигации по родительской точке останова.

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

В этом примере используются служебные классы цвета ( bg-light ) и интервала ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).

Марка

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

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

Nav

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

Активные состояния — с .active — для обозначения текущей страницы могут быть применены непосредственно к .nav-link s или их непосредственному родительскому .nav-item s.

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

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

Формы

Разместите различные элементы управления и компоненты формы на панели навигации с помощью .форма-строка .

При необходимости выровняйте содержимое встроенных форм с утилитами.

Группы ввода тоже работают:

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

Главная кнопка Меньшая кнопка

Текст

Навбары могут содержать фрагменты текста с помощью .navbar-text . Этот класс регулирует вертикальное выравнивание и горизонтальный интервал для строк текста.

Текст на панели навигации со встроенным элементом

При необходимости комбинируйте с другими компонентами и утилитами.

Цветовые схемы

Создание тем для навигационной панели еще никогда не было таким простым благодаря комбинации классов тем и утилит background-color .Выберите .navbar-light для использования со светлыми фоновыми цветами или .navbar-dark для темных фоновых цветов. Затем выполните настройку с помощью утилит .bg- * .

Контейнеры

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

Когда контейнер находится внутри вашей панели навигации, его горизонтальное заполнение удаляется в точках останова ниже указанного вами .navbar-expand {-sm | -md | -lg | -xl} class. Это гарантирует, что мы не будем излишне удваивать отступы на нижних окнах просмотра, когда ваша панель навигации свернута.

Размещение

Используйте наши служебные программы для размещения навигационных панелей в нестатических положениях.Выберите фиксированный вверху, закрепленный внизу или прикрепленный к вершине (прокручивается вместе со страницей, пока не достигнет вершины, а затем остается там). Фиксированные панели навигации используют положение : фиксированное , что означает, что они извлекаются из обычного потока DOM и могут потребовать настраиваемого CSS (например, padding-top на ), чтобы предотвратить перекрытие с другими элементами.

Также обратите внимание, что .sticky-top использует позицию : sticky , которая не полностью поддерживается в каждом браузере .

Отзывчивое поведение

Navbar может использовать .navbar-toggler , .navbar-collapse и .navbar-expand {-sm | -md | -lg | -xl} классов для изменения, когда их содержимое сворачивается за кнопкой. В сочетании с другими утилитами вы можете легко выбрать, когда показывать или скрывать определенные элементы.

Для панелей навигации, которые никогда не сворачиваются, добавьте класс .navbar-expand на панель навигации. Для панелей навигации, которые всегда сворачиваются, не добавляйте класс .navbar-expand .

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

Navbar по умолчанию выровнены по левому краю, но если они следуют за родственным элементом, таким как .navbar-brand , они автоматически выровняются по крайнему правому краю. Изменение разметки изменит положение переключателя на противоположное. Ниже приведены примеры различных стилей переключения.

Без .navbar-brand отображается в самой низкой точке останова:

С названием бренда слева и переключателем справа:

С переключателем слева и торговой маркой справа:

Внешний контент

Иногда вы хотите использовать плагин свертывания, чтобы активировать скрытый контент в другом месте страницы.Поскольку наш плагин работает с сопоставлением id и data-target , это легко сделать!

Свернутое содержимое

  

  

    

       
 Свернутое содержание 
 
       Можно переключать с помощью бренда на панели навигации. 
    
  
  
  

Изменить то, что отображается на панели навигации

Настройка панели навигации

1. На панели навигации щелкните .

2. Щелкните Параметры навигации .

   • Чтобы изменить количество отображаемых представлений, измените число на Максимальное количество видимых элементов .

   • Чтобы изменить порядок просмотра, щелкните вид, а затем нажмите Переместить вверх или Переместить вниз .

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

Примечание: В Outlook 2013 и Outlook 2016 вы можете открыть журнал, нажав Ctrl + 8. Он никогда не появляется на панели навигации.

Компактный вид

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

1. На панели навигации щелкните .

2. Щелкните Параметры навигации .

3. Установите флажок Compact Navigation .

Изменение размера панели навигации

• Укажите на правую границу области навигации , и когда указатель станет двунаправленной стрелкой перетащите границу влево или вправо.

Изменение кнопок на панели навигации

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

Чтобы изменить порядок кнопок, выполните следующие действия:

1. В нижней части области навигации нажмите Кнопки настройки , а затем щелкните Параметры области навигации .

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

Примечание: Чтобы восстановить расположение кнопок по умолчанию, нажмите Сбросить .

Чтобы изменить количество кнопок, выполните следующие действия:

• В нижней части области навигации нажмите Кнопки настройки , а затем нажмите Показать больше кнопок или Показать меньше кнопок .

Чтобы добавить или удалить кнопки, выполните следующие действия:

• В нижней части области навигации нажмите Кнопки настройки , нажмите Добавить или удалить кнопки , а затем нажмите нужную кнопку.

  Примечания:

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

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

  • Чтобы просмотреть все свои папки, а не только папки электронной почты, измените кнопку Список папок на большую кнопку, а затем переместите ее над кнопкой Mail или удалите кнопку Mail из области навигации .

Свернуть панель навигации

Вы можете увеличить объем рабочего пространства в окне Outlook, используя свернутую область навигации. Свернутая область навигации сворачивается в вертикальную полосу кнопок, которая по-прежнему обеспечивает доступ к наиболее часто используемым папкам и представлениям.

Чтобы скрыть или показать свернутую область навигации, выполните следующие действия:

Чтобы просмотреть папки из свернутой области навигации , нажмите кнопку Папки .

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

Как использовать элементы управления жестами в Android 11

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

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

Как включить жестовую навигацию

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

Шаг 1: Проведите по экрану сверху вниз, чтобы развернуть панель уведомлений, а затем коснитесь значка шестеренки.

Шаг 2: Нажмите Система .

Шаг 3: Касание Жесты .

Шаг 4: Нажмите Системная навигация .

Здесь вы найдете три варианта:

• Трехкнопочная навигация — Традиционная система навигации Android с кнопками «Назад», «Домой» и «Обзор / Последние» внизу.
• Двухкнопочная навигация — Навигация с помощью жестов, представленная в Android 9.0 Pie, с тонкой линией в качестве кнопки «Домой» и кнопкой «Назад», появляющейся по мере необходимости.
• Навигация с помощью жестов — коснитесь этой опции, чтобы включить ее. Чтобы снова выключить его, просто коснитесь одной из других опций в том же меню.

Как использовать жестовую навигацию в Android 11

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

Возврат к главному экрану в Android 11

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

Возвращение в Android 11

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

Шаг 1: Проведите пальцем от любой точки по правому или левому краю экрана.

Шаг 2: Появится значок стрелки назад. Отпустите палец, чтобы вернуться.

Если чувствительность функции «Назад» кажется вам не совсем правильной — срабатывает ли она слишком легко или почти не срабатывает — тогда вы можете изменить чувствительность. Просто зайдите в Настройки > Система > Жесты > Системная навигация, и коснитесь значка шестеренки справа от Gesture Navigation , чтобы внести изменения.

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

Как открыть список недавних приложений в Android 11

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

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

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

Активация Google Ассистента в Android 11

В старых версиях Android доступ к Google Assistant без слов «Окей, Google» легко выполнялся, удерживая кнопку «Домой».Android заменил эту кнопку на панель поиска Google в нижней части главного экрана, начиная с версии 10. Чтобы активировать Google Assistant, просто коснитесь значка справа от панели поиска.

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

Чтобы выйти из Google Assistant, проведите пальцем вверх от тонкой линии внизу.

Поворот экрана в Android 11

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

Чтобы отключить автоматический поворот экрана, сделайте следующее:

Шаг 1: Проведите пальцем сверху вниз, чтобы развернуть панель уведомлений.

Шаг 2: Коснитесь значка Автоповорот , отображаемого в меню быстрых настроек. Он напоминает две стрелки, образующие наклонный прямоугольник.Если вы не видите этого значка, разверните меню быстрых настроек, проведя вниз от ручки панели (белая линия).

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

Как открыть режим разделенного экрана

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

Шаг 1: Откройте первое приложение.

Шаг 2: Проведите пальцем вверх от тонкой линии внизу, пока телефон не начнет пульсировать и не появится список последних приложений.

Шаг 3: Найдите и коснитесь значка ярлыка второго приложения в верхней части окна предварительного просмотра.

Шаг 4: Нажмите Split Screen в раскрывающемся меню.

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

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

Чтобы избавиться от режима разделенного экрана, нажмите «Приложения» на главном экране. Выберите Settings , затем Multi Window . Когда вы увидите переключатель, нажмите, чтобы выключить его. Как всегда, нажмите кнопку «Домой», чтобы вернуться на главный экран.

Управление жестами — развлечение с кривой обучения

Google наконец-то предоставил Android впечатляющую схему навигации с помощью жестов, сопоставимую с iOS от Apple. Этот последний выпуск содержит множество забавных функций, которые обязательно порадуют убежденных поклонников Android и iOS. Мы рекомендуем изучить все эти новые жесты, так как они познакомят вас почти со всеми функциями, которые вы, возможно, еще не обнаружили на своем Android-устройстве. Нужно немного научиться, и мы не стесняемся признать, что самая сложная часть может быть запоминать, какой жест выполняет какое действие.