Кнопка Деньги

1. Постановка задачи

— Создать чат-интерфейс для быстрого оформления микрозаймов.

— Сделать процесс максимально простым и прозрачным.

— Сформировать современный и доверительный визуальный стиль.

2. Вдохновение и лучшие практики

— Учтены паттерны из Dribbble/Behance: авто-рост пузырьков при наборе текста и адаптивная верстка.

— Цветовые решения: тёмный/светлый контраст и мягкие оттенки для системных блоков.

— Использование иконок и аватаров для различия бота и пользователя.

3. Проработка UX

— Введена бесконечная прокрутка для удобства чтения истории диалога.

— Добавлены чёткие разграничения между сообщениями бота и пользователя.

— Отображаются дата и время последних сообщений.

— Реализован авто-рост поля ввода и плавные состояния при отправке сообщений.

— Добавлены аватары или инициалы для наглядного различия участников.

4. Дизайн и визуальный стиль

— Цветовая палитра: фирменный красный для акцентов, зелёные CTA-кнопки, нейтральные оттенки пузырьков.

— Разница яркости между сообщениями отправителя и получателя выдержана в пределах 15–20%.

— Сообщения пользователя и бота отличаются цветом и стилем.

— Скруглённые углы и аккуратные отступы создают современный облик интерфейса.

5. Реализация в Figma

— Auto-layout для динамических размеров пузырьков и адаптивности.

— Variants для разных состояний сообщений (отправка, ошибка, доставлено).

— Smart Animate для плавных переходов и появления (fade-in + slide-up).

— Timed Reset для автоматической смены статусов сообщений.

6. Описание в портфолио

— Быстрый чат с динамическим вводом, плавными анимациями и прозрачными статусами.

— Auto-layout и Variants обеспечивают адаптивность и масштабируемость под любой объём переписки.

— Чёткая цветовая иерархия и аватары повышают читаемость и доверие к сервису.