Карусель

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

Пример

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

Требования

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

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

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

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

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

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

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

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

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

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

Руководство

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

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

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

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

Делать.

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

Не.

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

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

Делать.

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

Не.

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

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

Делать.

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

Не.

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

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