Добавить в корзинуПозвонить
Найти в Дзене
Дизайн-шоу Figma Master

Мое первое мобильное приложение • Эпизод №1

Предисловие Всем привет! Меня зовут Константин. Более 5 лет я занимаюсь дизайном веб-приложений для профессионалов: сотрудники службы поддержки, оценщики движимого и недвижимого имущества, ребята из отдела по борьбе с мошенничеством. Недавно я начал уставать от ПО с высоким порогом входа для пользователей и от платформы web в целом. В целях самообразования и борьбы с выгоранием, я запускаю дизайн-шоу, где буду рисовать мое первое мобильное приложение в нескольких эпизодах. Задача Так как я обожаю переписываться, делиться gif-анимациями и идиотскими стикерами, моим первым мобильным приложением станет мессенджер. В качестве примеров для подражания и бесстыдного копирования были выбраны Telegram, VK и Discord. Чтобы сделать тренировку более суровой, я начну рисовать макеты для незнакомой мне платформы Android 12. Экран чата Если бы я сейчас работал, а не развлекался, мне пришлось бы потратить недели или месяцы на исследования, согласование дорожной карты разработки, постановку и декомпози
Оглавление

Предисловие

Всем привет! Меня зовут Константин. Более 5 лет я занимаюсь дизайном веб-приложений для профессионалов: сотрудники службы поддержки, оценщики движимого и недвижимого имущества, ребята из отдела по борьбе с мошенничеством.

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

Задача

Так как я обожаю переписываться, делиться gif-анимациями и идиотскими стикерами, моим первым мобильным приложением станет мессенджер. В качестве примеров для подражания и бесстыдного копирования были выбраны Telegram, VK и Discord.

Чтобы сделать тренировку более суровой, я начну рисовать макеты для незнакомой мне платформы Android 12.

Экран чата

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

Но сегодня у меня счастливый день, потому что я сразу делаю то, что мне самому нравится — рисую главный экран чата, да еще и в темной теме! Шах и мат продуктовая команда, вам не остановить мою фантазию, потому что я рисую сам для себя! Ха-ха!

Экран чата в темной и светлой теме
Экран чата в темной и светлой теме

Согласно инструкциям Google Material Design 3, я создаю основные компоненты: status bar, navigation bar, app bar, keyboard. Вдохновляясь богатыми возможностями кастомизации системы, выбираю собственную шрифтовую пару Fira Sans и Lekton. На клавиатуре используется Roboto, а системная гарнитура часов Google Sans.

Основные компоненты экрана чата
Основные компоненты экрана чата

Проектируем компоненты таким образом, чтобы меняя родительский, автоматически менялись дочерние. Данная схема позволит гибко добавлять и контролировать множество состояний компонента: нажатие, наведение, пустота, заполненность, ошибка и прочее.

Если поместите все компоненты в библиотеку, то сможете добиться полного контроля над макетами продукта, который разбит на множество проектов с сотнями экранов.

Анатомия сообщения

Облако сообщения оказалось очень насыщенным по содержанию компонентом. Сообщение может иметь множество статусов: получено, отправлено, ожидает связи, доставлено, ошибка.

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

Анатомия сообщения
Анатомия сообщения

Облако сообщения

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

Дочерний компонент облака сообщения во всех состояниях. Знаете как сделать его проще? Пишите в комментариях.
Дочерний компонент облака сообщения во всех состояниях. Знаете как сделать его проще? Пишите в комментариях.

Да, было сложно. Но я верю, что мои инвестиции окупились сполна! Теперь мне требуется буквально минута, чтобы нарисовать диалог любого объема и содержания. Мне всего лишь нужно копировать компоненты и переключать атрибуты. Большую часть работы теперь делает Auto Layout, а не я.

Рисуем длинный диалог с цитатами за одну минуту
Рисуем длинный диалог с цитатами за одну минуту

Заключение

Надеюсь вам что-нибудь понравилось из моего рассказа, а может быть вы даже узнали что-то новое и полезное. Подписывайтесь, если вам интересно!

В следующем эпизоде вы увидите:

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