Material DesignUX DesignUI DesignДизайн ИнтерфейсовМобильные Приложения

Material Design на русском. Часть 50 — Распознавание объекта по картинке

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

На момент перевода эта часть гайда находилась в Beta версии.

Использование

Фотографии можно использовать для распознавания объектов, выполняя визуальный поиск (поисковый запрос, который использует изображение в качестве входных данных). Используя модели машинного обучения, результаты визуального поиска могут дать пользователям больше информации о товаре — будь то вид растения или товар для покупки.

«Статический» режим API распознавания объектов ML Kit позволяет обнаруживать до пяти объектов исходя из загруженного фото и отображать результаты с использованием вашей собственной модели классификации изображений.

Распознавание по картинке позволяет пользователю изучить сразу несколько результатов распознавания объектов.

Принципы

Дизайн этой функции основан на следующих принципах:

Держите изображения четкими и разборчивыми

Компоненты интерфейса должны быть выровнены либо по верхнему, либо по нижнему краям экрана, чтобы текст и иконки читались.

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

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

Обеспечь обратную связь

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

Баннеры — это заметный способ сообщить пользователям, что что-то пошло не так с их поиском. У них также есть кнопки для справки и для получения дополнительной информации.

Компоненты

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

Ключевые элементы на всех этапах визуального поиска статического изображения:

  1. Верхняя панель приложений
  2. Маркер объекта
  3. Всплывающая подсказка
  4. Карточки с результатами распознавания
  5. Обнаруженное изображение
  6. Модальный нижний список

Верхняя панель приложения

Верхняя панель приложений обеспечивает постоянный доступ к следующим действиям:

  • Кнопка для выхода из режима поиска
  • Переключатель для улучшения яркости (с помощью вспышки камеры)
  • Раздел справки для устранения неполадок поиска

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

Маркер объектов

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

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

Маркеры объектов анимированы, чтобы привлечь внимание пользователя

Подсказки

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

Правильно: Пиши короткие сообщения, используя термины, подходящие для твоей аудитории.

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

Неправильно: Не используй всплывающие подсказки для сообщений об ошибках. Для ошибок лучше всего подходит компонент баннер.

Карточки

Карточки — это предварительный просмотр результатов визуального поиска объекта. Они отображаются в виде горизонтально прокручивающейся карусели.

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

Карточки скролятся, маркеры увеличиваются, а если нажать на карточку, то откроется модальный нижний список.

Модальный нижний список

Данный список является доступом к результатам визуального поиска по каждому объекту с картинки.

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

Если обнаружено только одно совпадение, то можн окастомизировать макет списка в соответствии с его контентом.

Опыт

Визуальный поиск объекта по изображению происходит в три этапа:

  • Ввод: Выбери изображение для поиска
  • Распознавание: Обнаружение и идентификация объектов
  • Связь: Если совпадение было найдено, то будут показаны результаты

Ввод

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

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

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

Распознавание изображений

Когда один или несколько объектов были обнаружены по картинке, приложение должно:

  • Сообщить, что приложение ожидает результатов
  • Показать индикатор прогресса загрузки

Объекты, обнаруженные с помощью ML Kit Object Detection & Tracking API, затем сравниваются с набором изображений из вашей модели, которые используются для поиска результатов.

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

Правильно: Используй индикатор прогресса и всплывающую подсказку, чтобы информировать пользователя о том, что приложение в состоянии «Поиска»

Неправильно: Не располагай маркеры объектов до тех пор, пока поиск не будет завершен.

Внесение изменений

На обнаружение и идентификацию объектов могут влиять следующие факторы (этот список не является полным):

  • Плохое качество картинки
  • Малый размер объекта на картинке
  • Низкий контраст между объектом и фоном
  • Объект на фото нельзя распознать под отснятным углом
  • Качество Интернета

Правильно: Используй баннер, чтобы оповестить пользователя о том, что результатов нет.

Коммуникация

Когда объекты будут распознаны нужно:

  • Разместить маркеры объектов перед каждым обнаруженным объектом
  • Показать список карточек, на которых будут предварительно показаны результаты распознавания

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

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

Правильно: При открытии модального нижнего списка, не забудь отобразить также и миниатюру, чтобы пользователь мог сам сопоставить результат поиска и объект, который был на картинке.

Оценка результатов поиска

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

Результатов нет

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

  • Объект не является частью набора объектов из модели
  • Объект был обнаружен под неправильным углом
  • Изображение может быть низкого качества, что затрудняет распознавание ключевых аспектов объекта

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

Баннер нужен для объяснения и передачи ссылки на справочный контент, если результатов поиска отсутствуют.

Неточные результаты

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

Правильно: Ссылка на справку помогает, если контент был некорректно распознан ML Kit’ом

Темизация

Тут показано то, как можно кастомизировать отдельные визуальные элементы с учетом твоего вкуса и/или бренда.

Загрузка результатов имеет розоватый цвет затемнение и кастомизированный под логотип индикатор прогресса загрузки.

Кастомный цвет оформления результатов поиска, а также форма и типографика тоже кастомизированы.

Маркер

В данном случае показана кастомизация маркера объекта.

1 — Логотип приложения. 2 — Кнопка. 3 — Маркер объекта стилизованный под форму логотипа.

Вместо увеличения размеров маркера объектов, данное приложение использует цвет.

1 — Увеличение размера. 2 — Другая форма и цвета заливки и обводки.

Карточки

В карточках, которые являются результатом работы распознавания объектов, использованы кастомные цвета, типографика и стиль формы.

1 — Карточка по умолчанию. 2 — Кастомизированная карточка.

Как следить за обновлениями гайдлайна и переводом?

RRuslan Sharipov