основные элементы интерфейса мобильного приложения

20.07.202220.07.2022 admin 0 Comments

Руководство администратора

Структура интерфейса мобильного приложения

Управление мобильным приложением осуществляется через специальные наборы элементов управления (контролов) на экране устройства. Элементы управления отображаются пользователю в пользовательском интерфейсе, а настраиваются в режиме администрирования «Первой Формы». Мобильное приложение 1F поддерживает следующие элементы управления:

• дашборд (рабочий стол) — набор плиток, доступен из бокового\нижнего меню в пунктах с названием «Главная». Рабочий стол может отображать разные данные — например, для широких плиток Категорий и Задач он может загружать сокращенные тексты задач.

• верхнее (выпадающее) меню — отображается в разделе «Лента», открывается нажатием на название раздела.

Схема мобильного интерфейса. Контейнеры.

Принципы настройки мобильного интерфейса

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

Контейнер — это упорядоченный список элементов интерфейса. Каждый экран приложения состоит из контейнеров, одного или нескольких (за исключением ненастраиваемых экранов загрузки и авторизации). Система поддерживает 5 видов контейнеров: рабочий стол ( Dashboard ), нижнее меню ( TabBar ), главное меню ( MainMenu ), меню Избранное ( FavouritesMenu ), верхнее меню ( CategorySelectorMenu ).

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

Все ID и названия контейнеров, шаблонов, полей и блоков являются регистрозависимыми: TabBar и tabBar — это разные ID.

Если у пользователя в мобильном приложении есть несколько аккаунтов (учетных записей), при переключении между ними некоторые контейнеры перестраиваются (например, нижнее меню свое для каждого аккаунта), а некоторые контейнеры объединяются (например, в боковом левом меню отображаются данные для всех аккаунтов, они следуют друг за другом).

Источник

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

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

Источник

Общие принципы в создании мобильных приложений для начинающего UX/UI-дизайнера

Привет! После предыдущих моих постов мне часто писали ребята, которые начинают изучать тему UI/UX. Это так классно, спасибо вам! И в этой статье я делюсь принципами, которые будут интересны и полезны новичку.

Обучение (Onboarding)

Начинать знакомство с приложением через onboarding — хорошо. Для чего это нужно? Когда пользователь скачивает приложение, он «примерно» представляет себе функционал. При старте удобно показать основные функции приложения, чтобы пользователь не путался и начал им пользоваться.

Ещё они нужны, когда выходит классное обновление в приложении, и грех его не выделить.

Яндекс.Транспорт рассказывает о новых фишках.

Среднее количество слайдов 3-4, больше читать неинтересно.

Методические рекомендации (guidelines)

Например, в iOS основное меню находится снизу в Tab bar, а в Android –– это боковое меню.

Пример отображения экрана на iOS и Android.

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

Шрифт (iOS)

9-ая операционная система поддерживается не на всех устройствах, т.е. рисуя макеты для iPhone 6, используя шрифт SF, необходимо понимать, что у некоторых пользователей будет старая добрая гельветика. (Это нестрашно, разве что, может помешать в максимальном значении символов в одной строке)

В принципе, разница не раздражает, а кому-то и совсем не видна.

Элементы (iOS)

Использовать прилипающую кнопку в дизайне не стоит. Это связано с тем, что она хорошо смотрится на продуманном (прорисованном) макете, но на других экранах перекрывает большую часть вместе с клавиатурой. Тут есть два выхода:

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

Один экран на разных разрешениях.

Nothing

Красота в деталях. Особенно приятно, когда в приложении продуманы все мелочи: что делать, если контента пока нет? Не загрузился? Загрузилась часть? Отвалился интернет? Всё это необходимо отрисовать и отдать разработчику, иначе он всё сделает за вас.

Удобно выработать эти принципы для себя, вынести их на отдельный файл и при случае всегда отдавать разработчику.

Недавно я столкнулась с тем, что в Аndroid каждая компания задает свой шрифт, т.е. может получиться такая ситуация, что в модели нет шрифта roboto. Или пользователь установил свой шрифт в смартфоне (рукописный или др.). Что делать в этом случае? Идеальная картина на nexus, это слишком маленький процент, чтобы ориентироваться только на него.

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

А ещё можно встретить вот такие баги.

Элементы (Android)

Здесь ситуация ещё интереснее, чем в iOS. Размеров смартфонов даже в одной ветке (XH, например) много, и сделать на всех устройствах идеально невозможно. Но может помочь выработка принципа отображения элементов. Как вариант, выяснить для себя, что отображение функций на экране девайса 2:1 и передать эту информацию разработчику.

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

Пожалуйста, любите детали!

Вы знали, что клавиатуру в iOS по-хорошему сворачивать нельзя, если она появляется по умолчанию, а в Android можно? И тогда остается пустое, незаполненное пространство.

Источник

Как спроектировать интерфейс мобильного приложения

Как вы приступаете к созданию интерфейса? Насколько сильно вы ориентируетесь на web-интерфейсы? Помните о 5 самых важных аспектах проектирования UI для мобильных приложений.

1. Правила взаимодействия с пользователем не отменяются

Вспомним 4 ключевых правила интерактивного дизайна:

2. Понимание пользователей

Есть пара тактик, позволяющих понять поведение пользователей и проектировать интерфейс с его учетом:

— Внедрение персонажей
Результатом небольшого брейнсторма становятся один или несколько персонажей, являющихся классическими представителями вашей аудитории. Этот метод очень подробно описывал А. Купер, и даже рекомендовал давать имя этим персонажам и придавать им личные характеристики, чтобы приблизить их к реальным людям.
Соответственно, вы проектируете интерфейс только для них, а не для абстрактного «пользователя».

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

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

3. План потоков

Пример: банковское приложение. Сценарий: настройка пополнения депозитного счета.

Автоматическое пополнение депозита
[Установить]
Выберите частоту пополнения
[Раз в месяц] [Два раза в месяц] [Раз в несколько недель] [Каждую неделю]
Один раз в месяц
[Выберите дату]
Подтвердить
Введите сумму
[Введите сумму]
[Установить автоматическое пополнение счета]

4. Ориентация на поведенческие шаблоны, привычки и неписанные стандарты. Учет движений

По этой причине навигационные кнопки, как правило, находятся в нижней части экрана:

В книге «Шаблоны мобильных интерфейсов», выпущенной UXPin, рассматриваются два вида взаимодействия: жесты и анимация.

Пользователи уже привыкли к возможности использовать разные жесты для различных ситуаций:

И распространенные типы анимации также вызывают ряд ожиданий, основанных на предыдущих опытах взаимодействия с приложениями.
Посмотреть, какими они бывают можно на Capptivate и UseYourInterface.

Именно так выглядят схемы наиболее удобных для человека жестов.

94% времени пользователи держат смартфон в вертикальном положении.

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

И большинство пользователей используют смартфоны с диагональю экрана в пределах 4-5,5 дюймов.

5. Использование итеративного подхода

Бонус: web-помощники для проектировщика интерфейсов приложений

1. Как подобрать хорошо сочетающиеся цвета для мобильного приложения? Используйте эти сервисы:
getuicolors.com
www.coleure.com
bootflat.github.io/color-picker.html

2. Изучите готовые примеры отличных интерфейсов, чтобы лучше понять необходимый уровень:
www.mobile-patterns.com/

Тем, кто хочет разрабатывать под мобильные устройства, рекомендуем профессию «Разработчик мобильных приложений».