Карусель

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

Пример

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

Требования

Этот визуальный компонент в настоящее время поддерживает настройку .

Имя поля Необходимый? Ограничения/настройки
Изображение товара Нет
  • Выберите одно из трех различных соотношений сторон изображения: квадратное, альбомное и портретное.
  • Размер по умолчанию зависит от размера экрана и соотношения сторон; любое дополнительное пространство будет заполнено полосами.
  • Источник изображения — это URL. Если ссылка на изображение не работает, вместо нее используется изображение-заполнитель.
  • Замещающий текст необходим для доступности.
  • Настраиваемая форма изображения (угловые или закругленные углы).
Карточный фон Нет
  • Настраиваемое изображение или цвет.
Основной текст Да
  • Основной текст каждого элемента должен быть уникальным (для поддержки голосового выбора).
  • Обычный текст по умолчанию. Фиксированный шрифт и размер.
  • Рекомендуется не более 2 строк. В зависимости от поверхности дополнительные символы будут обрезаны.
Вторичный текст

Также называется основным или форматированным текстом.

 Нет
  • Простой текст. Фиксированный шрифт и размер.
  • Рекомендуется не более 2 строк. В зависимости от поверхности дополнительные символы будут обрезаны.

Количество предметов

  • Максимум: 10
  • Минимум: 2

Последовательность

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

Интерактивность

  • Проведите пальцем по карусели, чтобы открыть разные карты.
  • Касание: когда пользователи касаются элемента, название элемента принимается в качестве пользовательского ввода, начиная следующий ход в диалоговом окне.
  • Голос/Клавиатура: ответ с названием карты аналогичен выбору этого элемента.

Руководство

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

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

  • можно наиболее осмысленно просматривать с помощью сканирования изображений (например, постеры фильмов, обложки альбомов, рецепты, одежда)
  • могут быть осмысленно разделены на прямоугольные фрагменты (например, твиты, новости)

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

Делать.

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

Не.

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

Рассмотрите возможность включения информации о следующем:
  • Сколько предметов в карусели (например, «В вашем списке желаний 7 предметов».)
  • Почему были выбраны именно эти товары (например, «Вот наши самые популярные букеты»).
  • Любые критерии выбора элементов (например, «концерты на этих выходных»)
  • В каком порядке расположены элементы (например, «начиная с самого последнего порядка», если в обратном хронологическом порядке)

Делать.

Сообщите пользователю, почему вы предложили именно эти элементы.

Не.

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

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

Делать.

Дайте пользователю понять, что ему нужно выбрать что-то из карусели. Здесь чипы позволяют им выбрать «ничего из этого» или уточнить результаты (например, показывая только «лоскутные кроссовки»).

Не.

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

Назад
Просмотр карусели
Далее
Список