![](https://habrastorage.org/webt/vu/6u/1x/vu6u1xecovpuuin5pprxi2yatbc.jpeg)
Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.
А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.
![](https://habrastorage.org/webt/m8/an/cx/m8ancxjvqa8cxdsbj_ibzb6lsy4.jpeg)
![](https://habrastorage.org/webt/kr/av/fp/kravfpiktipiwk798ah5wpplxck.jpeg)
Заглушка — название говорит само за себя: это элемент, сигнализирующий о какой-то проблеме(отсутствует интернет-соединение, сервер временно недоступен, ведутся технические работы, по вашему запросу ничего не найдено и т.п.). Обычно заглушка отображается там, где должен быть контент, но по каким-то причинам он не был получен.
![](https://habrastorage.org/webt/i3/io/nt/i3iontvfdoep2i2hepohydj2yka.jpeg)
![](https://habrastorage.org/webt/2s/kl/1-/2skl1-butarbandkifgca0csglo.jpeg)
Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:
![](https://habrastorage.org/webt/bq/3p/wq/bq3pwqqse1jlx1xs4scies0dgre.jpeg)
![](https://habrastorage.org/webt/st/di/ma/stdima302ggtgarznzuccyscem0.jpeg)
Popup — всплывающее окно, которое появляется внезапно, без запроса пользователя, и отображается поверх экрана, на котором находился пользователь. Не стоит путать с диалоговым окном, которое появляется при совершении пользователем какого-либо действия.
![](https://habrastorage.org/webt/ks/k2/4k/ksk24kyuwa2irexm1ihfwov1tjm.jpeg)
![](https://habrastorage.org/webt/bi/7u/zw/bi7uzwjg4xn_zohizkmzznbb-ss.jpeg)
Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.
![](https://habrastorage.org/webt/vh/7b/6p/vh7b6pcn0y0t5uccqffuligtanw.jpeg)
![](https://habrastorage.org/webt/t_/mw/e6/t_mwe6gu3qqickplsptuomusb7s.jpeg)
Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.
![](https://habrastorage.org/webt/mc/sa/da/mcsadacsx382vs6pvbugpytfo8i.jpeg)
![](https://habrastorage.org/webt/ex/xv/5m/exxv5mda7xgygau66w6uoanjlbq.jpeg)
Toast — всплывающее уведомление, не блокирующее работоспособность приложения и плавно исчезающее спустя несколько секунд. Может сообщать о какой-то ошибке, о совершении какого-то действия (например, публикация каких-то изменений). Обычно тоаст содержит текстовую информацию, но может содержать и картинку.
![](https://habrastorage.org/webt/0i/xq/yr/0ixqyr6lmva1tyf6mmpksx8pcoa.jpeg)
![](https://habrastorage.org/webt/ho/f3/z0/hof3z0wwfroxvdoibdewembd9ao.jpeg)
Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).
![](https://habrastorage.org/webt/c9/jn/30/c9jn30dkrsb4fj5sbcyiswc2ako.jpeg)
![](https://habrastorage.org/webt/ap/jt/vw/apjtvwf4bqza6iga1_mwdizehru.jpeg)
TabBar — панель вкладок в нижней части экрана, позволяющая быстро переключаться между разделами приложения.
![](https://habrastorage.org/webt/20/0s/u-/200su-u9d5j6uoxrafut5yqbmvc.jpeg)
![](https://habrastorage.org/webt/2j/ks/fs/2jksfsptqgbruere_bnze6pxweq.jpeg)
AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.
![](https://habrastorage.org/webt/cg/46/_p/cg46_p3xf6sn4f1htae1ccahb3e.jpeg)
![](https://habrastorage.org/webt/2_/gv/fs/2_gvfspc_0ktrg6qy1wqijtiima.jpeg)
Alert — оповещение, которое передает важную информацию, связанную с состоянием приложения или устройства, и часто запрашивает обратную связь. Алерт состоит из заголовка, необязательного сообщения, одной или нескольких кнопок.
![](https://habrastorage.org/webt/cy/av/jz/cyavjzfp2ya6kszbp5vjdy72o3s.jpeg)
![](https://habrastorage.org/webt/q3/ue/wq/q3uewq3pn_xsvzd_quo0q_xo2nq.jpeg)
Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.
![](https://habrastorage.org/webt/xp/-j/qj/xp-jqjknjhxyi4epjukbqfhu8u0.jpeg)
![](https://habrastorage.org/webt/_1/jd/zv/_1jdzvv-ssoji63fqgxk41wxlt0.jpeg)
Bottomsheet — информационная панель, появляющаяся снизу экрана поверх текущего состояния при совершении какого-нибудь действия. Может содержать информацию, а также какие-либо действия.
![](https://habrastorage.org/webt/b5/zh/p4/b5zhp4mitbb-i7agnhdn59l4bpg.jpeg)
![](https://habrastorage.org/webt/4u/w4/nh/4uw4nh_abu55magcd5uady6iyrq.jpeg)
Bubble — овальный элемент выбора какого-либо параметра, чаще всего используется в фильтрах.
![](https://habrastorage.org/webt/fk/pb/px/fkpbpx7vxuvvz21tqmprzpvmvzc.jpeg)
![](https://habrastorage.org/webt/v2/da/d7/v2dad7xn2l0ufmysw78ugzmzfwi.jpeg)
Строка поиска — поле ввода для поискового запроса.
Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).
![](https://habrastorage.org/webt/6r/p8/cm/6rp8cmdmmzep0-tz2op-eo4qhdo.jpeg)
![](https://habrastorage.org/webt/k_/aa/a7/k_aaa7nrq-xq6cbpb7iyfpmfsqs.jpeg)
Page Controls — элемент управления, который отображает текущее положение экрана в плоском списке страниц (на скринах — точки над кнопкой, отображающие текущее положение через изменение цвета).
![](https://habrastorage.org/webt/wz/fi/ba/wzfibasgmhnzh6md2frzvjajoqm.jpeg)
![](https://habrastorage.org/webt/qg/1d/ef/qg1defivq4fekiww4gwfol17q9e.jpeg)
Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).
![](https://habrastorage.org/webt/oc/p8/g0/ocp8g0ogjyiur3x0ralnvf96bl4.jpeg)
![](https://habrastorage.org/webt/wn/ln/u4/wnlnu4htmeqz8bm3hjod392tt2m.jpeg)
Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.
![](https://habrastorage.org/webt/ax/yt/wh/axytwhuwhqbrhdtba7vtbczlgq0.jpeg)
![](https://habrastorage.org/webt/ym/wv/mm/ymwvmmjofldcx-yyktibajmb7bi.jpeg)
Tooltip — всплывающее сообщение, которое завязано на элемент и обучает использованию той или иной части приложения.
![](https://habrastorage.org/webt/kn/h8/lr/knh8lrrx4m4exopbso1076beobs.jpeg)
![](https://habrastorage.org/webt/rc/l6/lv/rcl6lvak_z3sd2_kl13cugtrbie.jpeg)
Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.
![](https://habrastorage.org/webt/5b/p9/up/5bp9upgryixzdlqbxfxe-osc7go.jpeg)
![](https://habrastorage.org/webt/-c/jm/wy/-cjmwyjfk4iptak8h72-rvafpag.jpeg)
Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.
![](https://habrastorage.org/webt/lt/on/uu/ltonuuas0q625hnhtg7mrsvkmwq.jpeg)
![](https://habrastorage.org/webt/ov/cx/xx/ovcxxxx0gnmvkntj6a0f4-awdoa.jpeg)
Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).
![](https://habrastorage.org/webt/ka/iv/1i/kaiv1izrz5binz5eicbvrglsjz0.jpeg)
![](https://habrastorage.org/webt/pk/pl/ev/pkplevuhns5cvkux2feqyswlbus.jpeg)
Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.
![](https://habrastorage.org/webt/3b/38/-m/3b38-mtbcppjgapuipusjh72qro.jpeg)
![](https://habrastorage.org/webt/gv/g-/eo/gvg-eo_zks_jjy1-6zejcwg46mg.jpeg)
Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):
![](https://habrastorage.org/webt/y3/-9/nk/y3-9nk1kwrw7moo3hrbk640ixqk.jpeg)
![](https://habrastorage.org/webt/ia/kh/qv/iakhqv_ucrz265avbq0dvvfxi-u.jpeg)
Жесты
Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.
Double tap — два коротких касания, двойной тап.
Мультитап — три и более тапов подряд по одному элементу.
Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.
Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.
Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.
Pull to refresh (p2r) — дословный перевод: «потяни для обновления».
Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!
Pinch — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?