Всем привет! Меня зовут Константин. Более 5 лет я занимаюсь дизайном сложных веб-приложений для банков. В целях самообразования, борьбы с выгоранием и получения удовольствия от работы в Figma, я решил изучить дизайн мобильных приложений через копирование Telegram, Discord и VK.
Расширяем компонент
В первом эпизоде моего дизайн-шоу я рассказывал о создании компонента облака сообщения, которое содержит текст, вложенные документы, а также гибко настраиваеться с помощью атрибутов Figma. Теперь я хотел бы оживить диалоги с помощью стикеров.
Если раньше родительский компонент облака обращался к одному единственному типу содержимого "текст + вложения", то сейчас добавился второй тип "стикер", который хорош тем, что не может содержать ничего кроме картинки и цитаты.
Рисуем клавиатуру
Стикеры хочется не только смотреть, но и отправлять. Поэтому к обычной клавиатуре Android 12, я добавляю клавиатуру со стикерами. Чтобы было интереснее, я закладываю возможность переключаться между разными наборами стикеров с помощью вкладок.
Нажатием на иконку со смайликом, можно перейти в режим отправки стикеров, а чтобы вернуться, требуется нажать на иконку с клавиатурой. В одном из следующих эпизодов я планирую нарисовать прототипы с описанием подобных сценариев.
Генерируем стикеры
Я не хочу рисовать свои стикеры и скачивать готовые наборы тоже, поэтому буду генерировать новые нейросетью Midjourney в Discord. Очень хочу набор с покемонами! А мой любимый конечно же Sonic.
Оживляем диалог
Наконец-то диалог на макете приобрел некую осмысленность и чем-то похож на мои собственные беседы с людьми.
Заключение
Лично я кайфанул от создания прикольных компонентов и генерации стикеров, надеюсь вы тоже. Буду рад, если вы подскажете мне как сделать статьи лучше. В следующем эпизоде:
- Добавляем список контактов
- Рисуем голосового помощника
- Добавляем голосовые сообщения
- Рисуем простейшую user flow diagram
Вот ссылка на первый эпизод. Удачи!