меню три точки как называется
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 — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?
Кебаб-меню Kebab-menu
Кебаб-меню содержит действия с объектом.
Кебаб — потому что три точки, расположенные вертикально, напоминают люля-кебаб. Кебаб-меню и бургер-меню — это разные вещи, и путать их может только новичок, ничего не понимающий в приготовлении интерфейсов.
Когда использовать
Используйте меню, чтобы сэкономить место и скрыть малоиспользуемые ссылки и действия.
Если действия важны и часто используются, не убирайте их в меню. Пользователь может не найти их. Ему придется постоянно открывать меню, чтобы выполнить действия.
Если одно-два действия важнее и чаще используются — оставьте их рядом с меню.
Описание работы
Показывайте меню на странице постоянно, а не только по наведению.
При клике на меню появляется раскрывающийся список. Направления открывания списка: вправо вниз, влево вниз, вправо вверх, влево вверх. Иконка открытого списка подсвечена серым кругом.
При клике в любом месте за пределами меню оно закрывается. Открытый список не блокирует скролл и нажатия на другие контролы на странице.
Вариант-максимум — при клике правой кнопкой мыши по элементу открывайте кебаб-меню вместо контекстного меню браузера. Меню возникает из того места, куда кликнул пользователь.
Фокус и работа с клавиатурой
При переходе к меню клавишей Tab меню получает фокус — появляется синяя рамка:
Если нажать клавишу Enter — меню откроется и первый пункт получит фокус:
Клавиши ↓ ↑ переводят фокус между строками списка. Переход между строками не цикличен — с последней строки фокус не переходит на первую, как и с первой на последнюю.
Клавиша Enter выполняет выбранное действие.
Клавиша Esc закрывает меню.
Дизайн
Используйте для меню символ  из шрифта Kontur Iconic.
Кебаб-меню может быть трех размеров. Используйте большой кебаб в таблицах и крупных списках.
Маркер наведения — черный круг #000 с прозрачностью 9 %. Прозрачный черный круг одинаково контрастно выглядит на разных фонах.
Учебник. Расширенный курс
Особенности работы на планшетном компьютере
Основные особенности работы на планшете касаются процесса ввода информации и управления программами.
Виртуальные клавиатуры в разных операционных системах могут немного отличаться. Но принцип используется один. Всегда есть слева кнопки, переключающие регистр, язык, цифры и буквы. А справа размещены кнопки Delete (удаление знака) и кнопка Enter.
Отличительная особенность планшета и смартфона – небольшие экраны, поэтому многие кнопки в программах и приложениях не подписаны. Это инфозначки, они интуитивно понятны.
Значок три горизонтальных линии или три точки – меню.
Три соединенных точки – поделиться.
Скрепка – прикрепить файл к сообщению.
Стрелочка – переход на другую страницу или возврат к предыдущей.
Стрелочка вниз – кнопка «скачать». Такой значок в левом верхнем углу экрана планшета показывает, что идет загрузка какого-то файла.
Изображение фотоаппарата – возможность прикрепить фотографию или сделать фотографию.
Корзина – кнопка «удалить».
Шестеренка – кнопка настроек программы или системы.
Знак вопроса – помощь или возможность задать вопрос.
Изображение карандаша – кнопка «написать».
Трубка – кнопка «позвонить».
Обращайте внимание на значки и учитесь их читать. Их оформление может отличаться в зависимости от операционной системы или приложения.
Начало работы, регистрация в системе
Работа на планшетном компьютере начинается со включения устройства.
При первом включении планшета нужно пройти стандартную процедуру активации устройства, установить дату, время, выбрать язык, интернет-соединение. В некоторых случаях при активации планшета необходимо обязательное подключение к сети интернет, поскольку данные о зарегистрированном планшете автоматически отправляются компании-разработчику, и если возникают ошибки или какие-то неполадки, разработчики будут получать отчет и исправлять работу устройства.
Также при первом включении устройства вам могут предложить пройти регистрацию в системе компании-производителя планшета. Вы можете сделать это позже в разделе «Настройки».
Регистрация своего аккаунта в системе компании–производителя дает возможность данные планшета просматривать на другом компьютере или смартфоне. Для этого нужно будет зайти на сайт производителя и ввести свои данные: логин и пароль, то есть зайти в свой аккаунт. Это удобно, если вы решили поменять планшет и хотите все данные со старого устройства перенести на новое.
Также это дает возможность обращаться за онлайн–поддержкой по вопросам работы устройства к специалистам компании.
Кроме этого, необходимо будет зарегистрироваться (завести аккаунт) в самой операционной системе, установленной на планшете. Только в этом случае вы сможете получить доступ к магазинам программ и приложений, а значит, сможете их устанавливать на планшет.
Главный экран. Основные кнопки
На примере выше справа вверху отображаются:
уровень заряда аккумулятора;
значок соединения с интернетом по Wi-Fi. Если он не окрашен, значит, Wi-Fi не работает. На планшете или смартфоне этот значок чаще всего располагается вверху слева или справа.
Также здесь будут отображаться значки: подключение к интернету по мобильной сети 3G или 4G 
, значок будильника 
, блютуз (bluetooth)-подключения 
, беззвучного режима 
, если вы эти функции активировали.
Слева вверху появляются значки уведомлений от операционной системы (например, о необходимости обновления, о состоянии безопасности), от различных программ и приложений.
Прикоснувшись к кнопке «Назад», вы вернетесь на предыдущий экран. При отображении экранной клавиатуры кнопка меняется на изображение направленной вниз стрелки. Прикосновение к ней позволяет скрыть экранную клавиатуру, не возвращаясь на предыдущий экран.
Кнопку «Начальный экран» или «Домой» используйте для возвращения на главный экран.
Кнопка «Недавно использованные приложения» позволяет посмотреть все открытые на планшете приложения. Прокрутите список и коснитесь нужного приложения, чтобы открыть его. Чтобы удалить приложение из списка недавно использованных, смахните строчку вправо.
Приложение «Настройки
Приложение «Настройки» позволяет управлять возможностями планшетного устройства. Вы часто будете обращаться к нему, чтобы откорректировать те или иные функции. Чаще всего это значок в виде шестеренки.
Здесь же можно посмотреть подробную информацию о самом планшете.
Например, можем полистать предложенные варианты оформления, тут же посмотреть, как они выглядят на экране.
Здесь вы также сможете скачанные приложения и программы удалить, а предустановленные и неиспользуемые вами остановить, сделав неактивными.
Подключение интернета к планшетному компьютеру
Чтобы подключить планшетный компьютер к сети интернет через Wi-Fi, нужно включить эту функцию. Для этого зайдите в приложение «Настройки». В разделе «Беспроводные сети» напротив строчки Wi-Fi передвиньте ползунок вправо. Он окрасится в синий цвет. Функция включена.
Затем нужно выбрать Wi-Fi сеть и подключиться к ней.
Выберите нужную, коснитесь данной строчки. Если понадобится, введите пароль и нажмите «Подключить».
Чтобы подключить планшет к интернету по мобильной сети, нужно вставить SIM-карту, активировать передачу данных с помощью мобильной сети, а также указать данные точки доступа мобильного оператора.
Через некоторое время проверьте, подключился ли планшет к интернету. Если нет, вероятно, что данные точки доступа нужно будет ввести вручную. Вновь зайдите в «Настройки сети». Откройте пункт «Точка доступа (APN)». Выберите интернет-соединение и затем введите данные точки доступа.
Эти данные можно найти на сайте оператора или в инструкции к SIM-карте. Также настройки могут прийти SMS-сообщением при активации SIM-карты в планшете.
Работа со встроенным модулем Bluetooth
То есть, если у вас нет провода, а нужно передать какой-то файл с планшета на ноутбук, вы можете включить блютуз (Bluetooth) и передать файл на другое устройство. Точно так же можно подключить к компьютеру по блютуз (Bluetooth) клавиатуру и мышь. И управлять компьютером по беспроводному соединению. Можно слушать музыку в беспроводных наушниках, подключенных, например, к вашему планшету по блютуз (Bluetooth).
Чтобы подключить устройство к планшету по блютуз (Bluetooth)связи, нужно активировать данную функцию в планшете и в устройстве и установить соединение.
Включите Bluetooth на устройстве, которое хотите подсоединить к своему планшету.
Если вы подключаете по блютуз, например, смартфон или планшет, обычно на экранах устройств появляется сообщение с кодом доступа и полем для его ввода. Это код защиты, чтобы доступ к информации на вашем планшете не был открыт для чужих устройств.
Обратите внимание, что быстро выключить и включить Wi-Fi или Bluetooth можно в меню быстрых настроек на главном экране. Для этого проведите пальцем от правого верхнего угла к центру экрана. Затем в открывшемся окне нажмите пункт «Bluetooth».
Перемещение значков приложений и виджетов на главный экран
На планшетном компьютере программы и приложения обозначаются значками (ярлыками, иконками). Два основных приема работы с ними:
Эти приемы работают для всех операционных систем. Возможность перетаскивать и удалять значки программ и приложений позволяет оформить главный экран так, как вам удобнее, оставив под рукой самые часто используемые программы.
Зайдите на основной (второй) рабочий стол, нажав на кнопку меню внизу главного экрана.
Выберите значок нужной программы или приложения, которое хотите поместить на главный экран.
Нажмите на этот ярлык, удерживая палец. Значок как бы прилипнет к вашему пальцу, а изображение на экране изменится. Появится изображение главного экрана.
Значок будет удален с главного экрана, но он по-прежнему останется на основном (втором) рабочем столе.
На главном экране также можно разместить полезные для вас виджеты. Виджет – это тоже ярлык, но дающий доступ к конкретному действию, к элементу программы или приложения, например, погода в определенном городе, ситуация с пробками на дорогах, переводчик с русского на английский, поисковая строка браузера и т.д.
Алгоритм добавления виджета на главный экран практически такой же, как и значка программы или приложения.
С помощью долгого нажатия перемещаем виджет в нужное место на главном экране.
Возможно, приложение откроется и попросит выбрать, на какое действие вы хотите создать виджет (например, выбрать город в приложении погода, выбрать язык в приложении переводчик и т.д.).
Обмен данными: планшет – компьютер – смартфон
Есть несколько вариантов для обмена данными между компьютерными устройствами.
С помощью карты-памяти, если у планшета есть слот для данного устройства хранения информации. Можно перенести нужную информацию из памяти телефона на карту памяти, а затем извлечь карту памяти из планшета и вставить в смартфон, ноутбук или компьютер (возможно с помощью переходника- картридера).
Подключите переходник к планшету, в разъем провода вставьте флеш-накопитель. Также с помощью приложения файловый менеджер перенесите на флеш-накопитель нужную информацию. Извлеките флешку из планшета и вставьте ее в компьютер или ноутбук.
(Подробнее о работе с флеш-накопителем – в главе 2 модуля 1 «Возможности компьютера» расширенного курса программы «Азбука интернета»).
Затем на компьютере откройте раздел «Компьютер» или «Проводник». Планшет обозначится как дополнительное устройство хранения информации. (Принцип работы на компьютере с подключенным планшетом такой же, как и с подключенным флеш-накопителем).
Затем просто перетащите их на компьютер. Точно так же вы можете перенести на планшет нужные файлы с компьютера
Обмениваться информацией можно также через интернет по электронной почте (или через социальные сети). Для этого нужно будет через браузер выйти в интернет, зайти в свой ящик электронной почты и прикрепить в письме нужные файлы. Если вы часто пользуетесь электронным почтовым ящиком, лучше установить специальное приложение (например, если электронный ящик на yandex.ru, то Яндекс-почту).
Также для обмена данными можно выкладывать данные (фото, видео, музыку) в облачные хранилища. Такие приложения чаще всего уже предустановлены на планшете. В системе Android – это Гугл. диск. Но можно установить приложения Яндекс.диск или облачное хранилище Облако Mail.Ru. Все зависит от того, каким вариантом вы привыкли пользоваться.
Чтобы добавить файл в облако, откройте его. Нажмите на кнопку «Поделиться» 