[Разработка мобильных приложений, Тестирование мобильных приложений, Дизайн мобильных приложений] UI элементы и жесты в мобильных приложениях
Автор
Сообщение
news_bot ®
Стаж: 6 лет 4 месяца
Сообщений: 27286
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/51367e3f14358594f5afa1a886514525.jpg)
Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.
А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/588137548064c4968619aa51a905fa99.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/1e9f88cdf976330ec7b114a00b59279c.jpg)
Заглушка — название говорит само за себя: это элемент, сигнализирующий о какой-то проблеме(отсутствует интернет-соединение, сервер временно недоступен, ведутся технические работы, по вашему запросу ничего не найдено и т.п.). Обычно заглушка отображается там, где должен быть контент, но по каким-то причинам он не был получен.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/f91bceef95672cdac0daf676dacbd4ea.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/7a9a88276341ec0e6df11d7a28f4436a.jpg)
Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/3bda621d8eb49940b772768010cca55c.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/c77a7275fd3dc49f75c4f2ddb03fbb92.jpg)
Popup — всплывающее окно, которое появляется внезапно, без запроса пользователя, и отображается поверх экрана, на котором находился пользователь. Не стоит путать с диалоговым окном, которое появляется при совершении пользователем какого-либо действия.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/eda1204211c1aa9b4c510814f82a15b8.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/1548f1ff32ba9f3fca2a49b306a8a0d6.jpg)
Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/a35287b83e94e1f68d992c3ac9a6de26.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/77a152e3cae19b9ea7daed47a64eae23.jpg)
Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/3afe72c49a7ddc96de86bd4735ae112c.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/d6166a9eebc1d2e5e1931fdf00b2225b.jpg)
Toast — всплывающее уведомление, не блокирующее работоспособность приложения и плавно исчезающее спустя несколько секунд. Может сообщать о какой-то ошибке, о совершении какого-то действия (например, публикация каких-то изменений). Обычно тоаст содержит текстовую информацию, но может содержать и картинку.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/76be8a5507e03ec53acfbd0b0db55572.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/5fa3629fde03cb6aab03bf15e5169200.jpg)
Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/07d7e63773eec2fdafb668715fe6e071.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/b1cc97cbf0b876e199fd307ceadcd053.jpg)
TabBar — панель вкладок в нижней части экрана, позволяющая быстро переключаться между разделами приложения.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/868799f1db64542bfa626771d749b9c5.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/c7d7e6a6f68b2cef4668f5da76ccb247.jpg)
AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/beeb59a985265bbd5b64b0d43930654e.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/605ceb9e6b2b54112b314887f3fba1bf.jpg)
Alert — оповещение, которое передает важную информацию, связанную с состоянием приложения или устройства, и часто запрашивает обратную связь. Алерт состоит из заголовка, необязательного сообщения, одной или нескольких кнопок.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/b8834a8b8e2f9d571a8514d94b077c87.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/9f7d30841846abcb1c83da05722fadec.jpg)
Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/469dde88cefc5b1c74f1e534fff34c82.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/a18c509c3fc41d6adbd0216a40322027.jpg)
Bottomsheet — информационная панель, появляющаяся снизу экрана поверх текущего состояния при совершении какого-нибудь действия. Может содержать информацию, а также какие-либо действия.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/997a3dfd638839bd2f6ba7a5309b4941.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/0fff3f0f3a9b7c1ba463ad4227717a61.jpg)
Bubble — овальный элемент выбора какого-либо параметра, чаще всего используется в фильтрах.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/cd9a9cd05cd10838682c5b0cc392fb99.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/62f9d8f923cad780fd0aa89bc2c2be08.jpg)
Строка поиска — поле ввода для поискового запроса.
Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/18b90d3902eeed628428bd64751d0591.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/f000e0e62fac73b56dd7a9f0b19d6505.jpg)
Page Controls — элемент управления, который отображает текущее положение экрана в плоском списке страниц (на скринах — точки над кнопкой, отображающие текущее положение через изменение цвета).
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/25a3c05820fead633595d908d67eb3a5.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/c6a83443dfc44d8d192ce31086e05bfa.jpg)
Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/ee5344c8d7cd173037f96bb692f82dfd.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/522d8bc4c2bfd866c3bcbbe6e54566d4.jpg)
Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/61c143b1b59e0f45336b646815f713d1.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/028e324cec11b40c206be6a56f283b5d.jpg)
Tooltip — всплывающее сообщение, которое завязано на элемент и обучает использованию той или иной части приложения.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/9759012e7527065c18631c9f59b2274f.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/6b399eacb18ac0863cab02756e84baf5.jpg)
Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/1dd8edfac75d0a680a35060b67503b3c.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/c5d053f20bb6463d36ce6114edf7cfde.jpg)
Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/5d6abcc591af506fe1b2994114fa4735.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/414296b496c4b3444d11f6f18d6b906b.jpg)
Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/06d9e05016eec512dd0efe534f4d62a3.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/faeb471a85b561f80ad601db5e1903b0.jpg)
Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/996f363f117bf1138524e051aafccdbb.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/b1d5aaa97716684a688f8e1795aa6ad6.jpg)
Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/e8551cd81efdc8d3189903e5ac921551.jpg)
![Клик для увеличения](https://linkme.ufanet.ru/box/200x100/4bc848c9481aaa63deaa0f87ac1bc12f.jpg)
Жесты
Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.
Double tap — два коротких касания, двойной тап.
Мультитап — три и более тапов подряд по одному элементу.
Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.
Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.
Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.
Pull to refresh (p2r) — дословный перевод: «потяни для обновления».
Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!
Pinch — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?
===========
Источник:
habr.com
===========
Похожие новости:
- [Информационная безопасность, Тестирование мобильных приложений, Транспорт, Урбанизм, IT-компании] Как молодой девушке уехать на Яндекс.Такси в лес и пропасть без вести
- [Разработка мобильных приложений, Здоровье] Модель адаптивного усвоения углеводов часть 2: Разложение углеводов
- [Высокая производительность, Разработка под iOS, Разработка мобильных приложений, Разработка под Android, Микросервисы] Envoy как универсальный сетевой примитив
- [Разработка под iOS, Разработка мобильных приложений, Разработка под Android] Чего ждать от коробочных приложений?
- [Разработка мобильных приложений, Тестирование мобильных приложений, Управление проектами, Управление продуктом] Как распознавание паспортов замедлило пользователей, покупающих билеты: история провала фичи
- [Разработка под iOS, Разработка мобильных приложений, Разработка под Android, Аналитика мобильных приложений] Как мы просто сократили объем входящего в дата-центр трафика на 70%
- [Монетизация IT-систем, Agile, Развитие стартапа, Бизнес-модели, Будущее здесь] Нужна ли новая методология разработки?
- [Разработка мобильных приложений, Разработка под Android, Софт, Социальные сети и сообщества] Рейтинг приложения Robinhood опять опустили до 1 звезды
- [Разработка мобильных приложений, Разработка под Android, Kotlin, Учебный процесс в IT] Android Academy. Вы все пропустили! Но это не точно…
- [Разработка под iOS, Разработка мобильных приложений, Разработка под Android, C#, Xamarin] Использование сервисов и обработка их результатов в Xamarin
Теги для поиска: #_razrabotka_mobilnyh_prilozhenij (Разработка мобильных приложений), #_testirovanie_mobilnyh_prilozhenij (Тестирование мобильных приложений), #_dizajn_mobilnyh_prilozhenij (Дизайн мобильных приложений), #_testirovanie_mobilnyh_prilozhenij (тестирование мобильных приложений), #_testirovanie_po (тестирование по), #_testirovanie_prilozhenij (тестирование приложений), #_ui_testing, #_blog_kompanii_jula (
Блог компании Юла
), #_razrabotka_mobilnyh_prilozhenij (
Разработка мобильных приложений
), #_testirovanie_mobilnyh_prilozhenij (
Тестирование мобильных приложений
), #_dizajn_mobilnyh_prilozhenij (
Дизайн мобильных приложений
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 04-Июл 13:47
Часовой пояс: UTC + 5
Автор | Сообщение |
---|---|
news_bot ®
Стаж: 6 лет 4 месяца |
|
![]() Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы. А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье. 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 — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны. Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы? =========== Источник: habr.com =========== Похожие новости:
Блог компании Юла ), #_razrabotka_mobilnyh_prilozhenij ( Разработка мобильных приложений ), #_testirovanie_mobilnyh_prilozhenij ( Тестирование мобильных приложений ), #_dizajn_mobilnyh_prilozhenij ( Дизайн мобильных приложений ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 04-Июл 13:47
Часовой пояс: UTC + 5