Управление голосом в Adobe XD: Как успешно его реализовать

AdobeXDзарекомендовал себя как мощный инструмент для прототипирования. Особенно интересна возможность интеграции голосового управления. Эта функция позволяет вам взаимодействовать с вашим прототипом с помощью устных команд. В этом руководстве вы узнаете, как реализовать голосовое управление в Adobe XD. Таким образом, ваш прототип станет не только более удобным для пользователей, но и поднимет интерактивность на новый уровень.

Основные выводы

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

Руководство по шагам

Создайте свою рабочую область

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

Добавьте текст

Теперь пришло время для актуальной коммуникации. Используйте инструмент текста, чтобы добавить текстовое поле с вопросом «Что я могу для вас сделать?». Отформатируйте текст таким образом, чтобы он выделялся. Шрифт размером 90 пунктов – идеален, чтобы быть заметным, не перегружая при этом дизайн.

Визуальные подсказки для голосового управления

Чтобы сигнализировать пользователю о том, что голосовые команды возможны, вам следует создать символ микрофона. Вы можете нарисовать округлый прямоугольник и использовать инструмент круга, чтобы создать наглядный микрофон. Убедитесь, что декоративные элементы объединены так, чтобы создать привлекательный дизайн.

Добавьте второе текстовое поле

Теперь добавьте еще одно текстовое поле, в котором отображаются текстовые сообщения, такие как «Закрыть это приложение». Выберите соответствующее форматирование текста, чтобы выделить его. Цель – активно показывать пользователям, какие голосовые команды они могут выполнять.

Создание анимаций

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

Синхронизируйте анимации

Используйте настройки анимации, чтобы установить переходы между экранами. Вы можете использовать Auto-Animate, чтобы обеспечить бесшовность анимации для этапов загрузки. Это создаст положительный опыт использования, пока пользователи ждут свои команды.

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

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

Тестируйте прототип

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

Итог – эффективно использовать голосовое управление в Adobe XD

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