Что такое долгий тап

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 — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.

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

Источник

Справочник жестов

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

Жесты

Руки являются прекрасным инструментом для коммуникаций с людьми и окружающей средой.

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

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

В этом справочнике мы рассмотрим все основные жесты, которые используются на мобильных устройствах: Tap (Тап), Swipe (Свайп), Long Press (Долгое нажатие), Long Press и Drag (Нажал и потянул), Pinch и Spread (Стягивание и растягивание), Double Tap (Двойное нажатие), Force Touch (Сильное нажатие).

Tap (Тап)

Тап – это клик в мире мобильных устройств. Однократное непродолжительное нажатие на элемент. Позволяет взаимодействовать с любыми доступными обьектами на экране.

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

Swipe (Свайп)

Свайп – это второй по распространённости жест после тапа. Он знаком каждому, кто когда-либо заходил в интернет с мобильного устройства.

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

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

Свайп иногда используется в качестве защитного дизайна. Когда необходимо защитить пользователей от случайного нажатия. Например, для разблокировки в iOS необходимо сделать свайп.

Long Press (Долгое нажатие)

Долгое нажатие является аналогом правого клика. На большинстве мобильных платформ долгое нажатие позволяет вызывать контекстные меню либо дополнительные действия связанные с нажимаемым обьектом.

На операционной системе Windows долгое нажатие работает точно так же, как правый клик – вызывает контекстное меню элемента.

Для пользователей Android, данный жест прекрасно знаком. Долго нажатие на любом элементе списка вызывает контекстное меню, которое позволяет проводить массовые манипуляции с элементами списка (удаление, перемещение).

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

На iOS есть аналог длинного нажатия – сильное нажатие (доступно начиная с iPhone 6S), которое позволяет вызывать дополнительные действия в зависимости от силы нажатия. Подробнее мы рассмотрим далее или же можно почитать в нашем обзоре 3D Touch.

Нажми и перетащи

Данный жест является анлогом функции drag and drop, которая знакома всем на стационарных компьютерах. Долгое нажатие на перемещаемом обьекте активирует возможность перемещать его путём перетаскивания.

Периодически встречается на всех платформах (например для смены расположения иконки на рабочем столе, смены порядка и расположения элементов и т.п.).

Pinch и Spread (Стягивание и растягивание)

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

Данный жест позволяет сразу видеть результат взаимодействия с обьектом.

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

Двойное нажатие

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

Сильное нажатие

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

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

Детально данная технология рассмотрена в статье о 3D Touch.

Плюсы и минусы жестов

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

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

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

Поэтому, если вы планируете дополнить приложение своими жестами, необходимо решить следующее:

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

Источник

Android для чайников №15. Основы работы с текстом

Павел Крижепольский

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

В качестве примера рассмотрим классическую Android клавиатуру от компании Google. На устройствах серии Nexus она установлена изначально, владельцы остальных смартфонов могут без труда скачать ее из официального магазина приложений Google Play. Ссылка на клавиатуру расположена чуть ниже.

В Android вам никогда не придется задумываться над тем, как именно вызвать клавиатуру. Просто нажмите на текстовое поле или окно, в котором необходимо ввести текст, и клавиатура автоматически появится на экране. Если она мешает – нажмите на телефонную кнопку «Назад» и она вновь исчезнет.

Сам процесс ввода текста мало чем отличается от печати на клавиатуре ПК или ноутбука.

Сменить язык ввода можно с помощью кнопки со значком глобуса .

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

Для того, чтобы ввести заглавную букву, необходимо нажать на клавишу Shift . Удерживая ее и продолжая печать можно ввести несколько заглавных букв подряд. Двойное нажатие по клавише Shift переведет клавиатуру в режим Caps Lock, во время которого все набранные буквы будут заглавными.

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

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

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

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

В клавиатуре Google экран с дополнительными символами открывается с помощью кнопки в левом нижнем углу экрана, а список смайликов – с помощью долго тапа по клавише Enter .

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

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

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

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

Источник

Если кнопка Назад в Chrome обратно не возвращает

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

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

К слову, в англоязычном сегменте Сети для таких фокусов даже отдельный термин придумали back button hijacking (буквально, «угон кнопки Назад»). И надо сказать, что придумали далеко не вчера. То бишь, проблема эта существует давно и успешно.

Google, как глобальный лидер и мегаавторитет в деле онлайн-поиска, конечно, со своей стороны, и с этой проблемой тоже борется давненько. Но раньше получалось как-то не очень…

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

что делать, когда кнопка Назад браузера обратно не возвращает

Новое решение специалисты Google реализовали, само собой, в фирменном браузере Chrome. Притом сейчас оно уже работает не только в обычной компьютерной, но и в Android-версии.

Так что, если в Сеть вы ходите посредством Chrome и каким-то образом снова попали на сайт, где кнопка Назад не работает, а точнее обратно на предыдущую страницу (или сайт) как положено не возвращает, то:

Теперь вот в Chrome есть и такое. На всякий случай отметим, что в Android-версии браузера (а конкретнее, в Chrome на Android 10) данная фича (список последних открытых страниц долгим тапом по стрелке «Назад») не работает, если в Chrome включено управление жестами.

И еще, справедливости ради, тоже отметим, что такая функция есть не только в Chrome. Аналогичное решение недавно появилось также в обычном и в мобильном Firefox.

Источник