Делаем первый экран мобильного приложения и иконок в Pixso

Формирование технического задания и цели интерфейса

Первый экран мобильного приложения «Sonic Mode» разрабатывается на основе технического задания, сгенерированного с помощью нейросети. Цель приложения — позволить пользователю фиксировать своё текущее настроение с помощью коротких голосовых записей и выбора визуального образа. Первый экран должен быть максимально простым и ориентированным на одно ключевое действие — запись звука. Требования включают отображение даты, кнопку записи, выбор образа настроения, кнопку сохранения и отображение статуса операции. Нефункциональные требования указывают на необходимость минималистичного дизайна, использования приглушённой, но выразительной цветовой палитры, акцентного цвета для кнопки записи, современных читаемых шрифтов и интуитивно понятной иконографики. Весь процесс взаимодействия должен занимать не более трёх нажатий и 30 секунд, а интерфейс должен быть готов к локализации.

Проектирование центрального элемента интерфейса

Центральным элементом интерфейса становится крупная кнопка записи, расположенная в центре экрана. Её визуальный вес подчёркивается размером, акцентным цветом (приглушённый фиолетовый) и эффектами: добавляется мягкая тень и радиальный градиент для объёма. Для иконки микрофона используется собственная векторная иллюстрация, основанная на стандартных визуальных паттернах, но выполненная вручную. Иконка строится из базовых фигур — скруглённых прямоугольников — с соблюдением симметрии и единообразной толщины линий. После завершения иконка объединяется в единый элемент для удобства дальнейшей работы.

Работа с текстовыми и вспомогательными элементами

Над кнопкой записи размещаются текстовые элементы: подпись «Сегодня» и дата — «25 октября». Шрифты подбираются в соответствии с требованием о современности и читаемости, используется иерархия размеров и насыщенности для визуального различия важности элементов. Дополнительно добавляется краткая подсказка под кнопкой: «Нажмите на кнопку и расскажите о своём сегодняшнем настроении». Этот текст делается мелким и менее контрастным, чтобы не отвлекать пользователя при повторных использованиях приложения, но при этом обеспечивать понимание функции новичкам.

Создание нижнего навигационного меню

Вместо размещения иконок меню и истории в верхней части экрана принимается решение реализовать нижнее навигационное меню, что соответствует современным UX-практикам. Меню включает иконки для истории, уведомлений, профиля и настроек, а также дублирует центральную кнопку записи для удобства доступа. Все иконки создаются вручную в едином стиле: используются базовые геометрические формы, толщина линий строго 2 пикселя, а размеры упаковываются в одинаковые контейнеры (30×30 пикселей) для выравнивания. Цветовое решение и скругления соответствуют общей стилистике интерфейса. Подложка меню выполняется в приглушённых тонах с лёгкой обводкой для визуального отделения от основного фона.