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 — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?
Android для чайников №3. Строка состояния
Один из самых функциональных и информативных элементов в Android-смартфоне.
Здравствуйте, уважаемые читатели, мы продолжаем нашу серию статей для начинающих пользователей. Сегодня речь пойдет о строке состояния, важном элементе Android-смартфона. Строка состояния находится в верхней части экрана, в ее правом углу расположены часы и индикатор батареи, а в левом — иконки с уведомлениями. Фактически, при взгляде на строку состояния вам сразу становится понятно, есть ли у вас новые уведомления или нет.
Строку состояния можно раскрывать, для этого достаточно провести пальцем от верхнего края экрана вниз. В раскрытом виде строку состояния еще иногда называют «шторкой», я также буду использовать это название, так что не пугайтесь.
После раскрытия строки состояния вы можете более детально просмотреть все ваши уведомления, это особенно удобно в случае SMS-сообщения, либо нового письма, когда достаточно одного взгляда, чтобы понять насколько важное сообщение пришло. Чтобы убрать уведомление, вам достаточно смахнуть его горизонтальным жестом влево или вправо. Чтобы скрыть все уведомления, нажмите кнопку, похожую на ступеньки сверху. В некоторых приложениях можно сразу же ответить на сообщение не покидая строку состояния.
Со строки состояния также можно получить быстрый доступ ко всем переключателям беспроводных интерфейсов, для этого вам нужно опустить шторку двумя пальцами. Переключатели на всех смартфонах выглядят по-разному, я решил использовать пример из Android 4.2, на котором построено большинство бюджетных смартфонов. короткое нажатие на переключатель включает/отключает интерфейс, а долгое открывает его настройки.
Также в отдельных оболочках (TouchWiz, Emotion UI) есть отдельный ползунок регулировки яркости, управлять подсветкой смартфона с его помощью очень удобно.
Заключение
К сожалению, из-за того, что большинство производителей изменяют интерфейс Android, я не мог написать единого гида по строке состояния, но общие принципы вроде смахивания уведомлений, открытия переключателей двойным опусканием шторки и т.д. должны работать на любом смартфоне.
Уважаемые продвинутые читатели. В статьях этого цикла будет особо строгая модерация, поэтому попытки поупражняться в остроумии могут закончиться для вас баном.
Как настроить домашний экран устройства Android
Главный экран Android может быть полезным, если Вы потратите время на его настройку. Хотя это и не исчерпывающее руководство по домашнему экрану, это руководство должно помочь Вам использовать Android.
Что такое лаунчер
Лаунчер Android — это первое, что Вы видите, когда нажимаете кнопку «Домой». В большинстве случаев в нем находятся приложения, панель приложений, виджеты и много другой полезной информации. Дело в том, что не все лаунчеры (или домашние экраны) созданы одинаково. Лаунчер может выглядеть и работать по-разному, в зависимости от производителя телефона. Это может сделать понимание домашних экранов проблемой от телефона к телефону.
Тем не менее, можно разбить большинство лаунчеров на несколько ключевых частей:
- Домашние экраны: это главные страницы, отображаемые в лаунчере. В большинстве случаев Вы можете выбрать один или несколько начальных экранов. Все зависит от того, как Вы хотите настроить устройство.
- Панель приложений: это область быстрого запуска, где Вы размещаете свои любимые приложения для быстрого доступа. Там же Вы обычно найдете кнопку, чтобы открыть панель приложений. Одна и та же панель приложений появляется независимо от того, на какой домашний экран Вы смотрите.
- Список приложений: здесь Вы найдете все свои приложения. Доступ к нему обычно осуществляется с помощью кнопки в панели приложений, или жестом смахивания вверх.
- Виджеты: это то, что делает домашние экраны Android уникальными (по крайней мере, по сравнению с iOS, где виджеты ограничены Вашим экраном блокировки). Виджеты предоставляют быструю информацию без необходимости открывать приложение. Вот несколько простых примеров: часы, календари и погода, но в Play Store есть буквально тысячи различных типов виджетов.
К сожалению, эти правила не всегда применяются. Некоторые производители устанавливают лаунчеры на своих телефонах, чтобы предложить более упрощенный вид, который помещает все значки приложений на домашний экран и не предлагает такие вещи, как панель приложений, виджеты и т. п. — они больше похожи на домашний экран iPhone.
Настройка Вашего домашнего экрана
Ключом к тому, чтобы заставить лаунчер Вашего телефона работать на Вас, является настройка начальных экранов. Организация приложений для быстрого доступа, стратегическое размещение виджетов, чтобы Вы могли быстро собрать информацию, и максимальное использование панели приложений.
Главный экран
Сначала очистите домашний экран. Если из настроек по умолчанию лежит куча мусора — вещи, которые Вы не используете — избавьтесь от этого! Нажмите и удерживайте значок и перетащите его в верхнюю часть экрана или просто перетащите его вверх, чтобы быстро избавиться от него. Не волнуйтесь, Вы не удаляете эти приложения, а просто удаляете их с главного экрана.
После того, как Вы избавитесь от всего этого мусора, Вы можете вместо этого начать помещать значимые приложений. Начните с важного вопроса: какие приложения я запускаю чаще всего? Это даст Вам хорошее представление о том, что Вы хотите видеть на домашних экранах.
Продолжайте перетаскивать все, что Вы используете ежедневно, на свой главный экран — просто откройте панель приложений, нажмите и удерживайте значок, а затем перетащите его на домашний экран. Если Вы используете много приложений каждый день, они могут заполнить первый экран и перейти на второй. Это нормально! Вы можете добавить дополнительные экраны, нажав и удерживая значок приложения, а затем перетащив его к самому краю экрана; через несколько секунд должна появиться новая страница главного экрана, где Вы можете оставить значок.
Как только у Вас все появится на домашнем экране, начните искать сходства между приложениями, чтобы Вы могли распределить их по папкам. Например, если Вы используете Twitter, Facebook и Instagram каждый день, все они являются главными кандидатами в папку «Социальные сети». Нажмите и удерживайте один значок приложения и перетащите его поверх другого, чтобы объединить их в папку. Оттуда, просто нажмите и перетащите другие значки на папку, чтобы добавить их тоже.
Сделайте это для всего на Вашем домашнем экране.
Может потребоваться некоторое время, чтобы выяснить, как лучше организовать собственные приложения и папки. Вам нужно будет передвигать иконки приложений, когда Вы начнете уделять больше внимания тому, как Вы используете свой телефон, и помните: не все должно идти в папку!
Панель приложений
Наряду с домашним экраном обратите внимание на панель приложений. Именно здесь большинство людей хранят свои наиболее часто используемые приложения.
И это делает панель приложений лучшим местом для приложений, которые Вы используете постоянно: он всегда доступен, независимо от того, на каком домашнем экране Вы находитесь.
Виджеты
Наконец, пришло время добавить виджеты. Это отличные дополнения к любому домашнему экрану, поскольку они могут предлагать быструю информацию.
И это действительно то, что требуется от виджетов: быстрый доступ к информации, а также возможность быстрого запуска приложения, если Вам нужно больше информации. Это избавляет Вас от необходимости иметь виджет и значок приложения, которые служат той же цели.
Вы можете добавить виджеты на главный экран, нажав и удерживая палец на главном экране, а затем выбрав опцию «Виджеты». Это покажет Вам все, что уже установлено на Вашем телефоне.
Как мы уже говорили ранее, в Play Store есть тысячи и тысячи вариантов виджетов, и многие из Ваших любимых приложений, вероятно, также предлагают какой-то виджет.
О кастомных лаунчерах
Как и в большинстве случаев на Android, Вы не обязаны использовать лаунчер, предустановленный на Вашем телефоне. В Play Store доступно много приложений, большинство из которых предлагают гораздо более продвинутые функции, чем Вы можете найти в своем стандартном лаунчере.
Мы отдаем предпочтение Nova Launcher. Он полон настроек и является одним из самых мощных лаунчеров, которые вы найдете на Android сегодня.