Предисловие
Всем привет! Меня зовут Константин. Более 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, а не я.
Заключение
Надеюсь вам что-нибудь понравилось из моего рассказа, а может быть вы даже узнали что-то новое и полезное. Подписывайтесь, если вам интересно!
В следующем эпизоде вы увидите:
- генерация дебильных стикеров нейросетью;
- расширение компонента сообщения,
- клавиатура и настройка стикеров.