UX/UI · INTERACTIVE PROTOTYPE · MOTION
ALTERОт фотографии
к новому образу.
Дизайн сервиса AI-аватаров: понятный путь от загрузки фотографии до выбора стиля и готового результата.
Попробовать прототип ↓Превращение фото
в понятный сценарий.
Задача
Спроектировать интерфейс, в котором человек загружает фотографию, выбирает визуальный стиль и получает аватар. Сделать каждый этап понятным, а ожидание генерации — частью единого опыта.
Моя роль
Пользовательский сценарий, визуальная концепция, макеты для компьютера и телефона, компоненты и состояния, интерактивный прототип. Подготовка анимационной демонстрации в After Effects.
Решение
Четыре последовательных шага, выразительный портрет в центре внимания и одно основное действие на каждом этапе. Предусмотрены смена стиля, повторный вариант и сравнение с исходной фотографией.
Четыре шага.
Одна цель.
Прогресс показывает место в сценарии. Результат остаётся связан с исходной фотографией — его можно сравнить и продолжить поиск образа.
- 01Фотография
Загрузка своего портрета или знакомство на примере.
- 02Стиль
Мультфильм, керамика или постер с наглядным превью.
- 03Создание
Отдельное состояние ожидания и индикация процесса.
- 04Результат
Сравнение, ещё один вариант и действие скачивания.
Мобильная версия.
Адаптировал загрузку фото, выбор стиля и экран результата для телефона. Сохранил последовательность действий и единое оформление элементов.
Общие правила.
Связанные элементы.
Палитра, типографика и повторяющиеся компоненты объединяют экраны. Изменения в базовых элементах помогают поддерживать согласованность интерфейса.
Кнопка — компонент
со состояниями.
Основные, вторичные и текстовые кнопки собраны в варианты для desktop и mobile. Состояния обычной, наведённой, нажатой, сфокусированной и недоступной кнопки описаны в одном наборе.
Карточки и контент
с общей структурой.
Компоненты карточек стилей сохраняют единый принцип выбора. Портреты организованы в варианты, а Auto Layout в ключевых повторяющихся блоках управляет отступами и расположением содержимого.
В Figma отдельно собраны карточки, уведомления и портреты для примеров и генерации.
Попробовать ALTER
Выбрать фотографию на примере, переключить стиль и сравнить готовый аватар с оригиналом.
Интерфейс
в движении.
Motion-презентация связывает основные этапы: загрузку фотографии, выбор стиля, процесс генерации и появление готового аватара.
Обратная связь
Реакции элементов помогают связать действие пользователя и изменение интерфейса.
Момент генерации
Исходное фото исчезает, а анимация внутри превью обозначает создание нового образа.
Завершение сценария
Появление результата и сравнение с оригиналом завершают историю преобразования.
От логики сценария
до живого интерфейса.
Макеты для компьютера и телефона, система компонентов, интерактивный прототип и motion-презентация. Проект объединяет работу с пользовательским путём, визуальным языком и поведением интерфейса.