Charisma.ai и Sky 'The Rope'
Общие сведения
Описание
Программы
- Figma
- Unity
- Adobe Illustrator
- Adobe Photoshop
Процесс
- UX дизайн
- UI дизайн
- Animation
- Figma
- Тестирование
- Adobe Photoshop
Моя роль
В качестве ведущего UX/UI дизайнера, я отвечала за разработку пользовательского интерфейса для проекта "The Rope", гарантируя удобство его использования на телевизионных платформах и гармоничное сочетание с визуальным стилем интерактивного проекта.
Дизайн
Поскольку проект предназначен для использования на экране телевизора, это создало для меня ряд вызовов при разработке элементов пользовательского интерфейса. Во-первых, в отличие от традиционных игр, где управление осуществляется с помощью клавиатуры, мыши или контроллера, в "The Rope" используется камера, отслеживающая жесты игрока. Это означает, что интерактивные элементы должны быть достаточно большими, чтобы обеспечить легкое взаимодействие, но при этом не занимать слишком много места на экране. Это также привело к другой задаче - обеспечить доступность пользовательского интерфейса, его легкую читаемость и удобство использования для игрока, независимо от того, насколько далеко он находится от экрана телевизора. Еще одним моментом, который необходимо было учитывать в процессе разработки дизайна, были меняющиеся условия окружающей среды в игре. Поскольку действие происходит под водой, в некоторых сценах окружающая среда намного светлее, а в некоторых - почти кромешная тьма.
Кнопки и субтитры
Дизайн различных элементов интерфейса прошел множество итераций, прежде чем был выбран окончательный вариант. Были исследованы различные стили для кнопок и субтитров, такие как простая капсула, дизайн в виде веревки, более футуристический вариант, а так же светящаяся капсула, которая и была выбрана в качестве финальной версии. На изображениях ниже показаны эти стили, а также два состояния кнопок - нажатая слева (темная версия) и ненажатая справа (светлая версия).
Команды игрока
Поскольку игра позволяет игроку общаться с персонажами вербально, много внимания было уделено дизайну поля ввода игрока. В отличие от традиционных игр, где для ввода текста используется клавиатура, в "The Rope" используется микрофон, позволяющий игроку просто произносить свои ответы. Это означает, что игрок должен иметь возможность прочитать свой ответ на экране перед отправкой, чтобы убедиться, что он был правильно интерпретирован игрой. Кроме того, если игрок передумал и хочет сказать что-то другое, он должен иметь возможность перезаписать свой ответ. Подобно кнопкам, дизайн поля ввода прошел через множество итераций, которые включали не только различные визуальные стили, но и различные варианты расположения на экране. Окончательный дизайн объединяет все элементы (кнопку «Говорить», ввод игрока и субтитры) в одном элементе «панели управления» в правом нижнем углу экрана. Кнопка «Говорить» остается неактивна (серая), пока не наступит очередь игрока говорить. Затем она начинает мигать, чтобы побудить игрока ответить. Как только игрок наводит на кнопку курсор, слово «Говорить» меняется на «Слушаю», и ответ игрока появляется в текстовом поле над кнопкой. Чтобы отправить ответ, игроку достаточно убрать руку с кнопки. Если он хочет перезаписать свой ответ, ему нужно убрать руку с кнопки, что активирует 5-секундный период ожидания, а затем снова навести курсор на кнопку.
Обучающие анимации
"The Rope" - это инновационный интерактивный проект, поэтому, чтобы игрокам было проще освоиться с управлением и получить наилучшие впечатления, я разработала и анимировала несколько обучающих материалов. Эти обучающие материалы были затем добавлены разработчиками в начало игры. Ниже представлена видеозапись экрана из Figma, которая показывает последовательность обучающей части проекта.
