КОД9 | Как сделать музыкальное приложение

Содержание

Что такое Туттии
Изучили вводные
Провели R&D
Придумали визуал
Проработали интерфейс
Отказались от NFT
Справились со сложным UX
Весь процесс кратко

Что такое Туттии

Основа Туттии — музыкальный редактор, в котором собственный трек создаётся из кусочков других. Такие треки мы в статье называем ремиксами или мэшапами. Например, вокал Леди Гаги можно наложить на музыку Эда Ширана — это и будет ремиксом. По договорённости с заказчиком мы должны были собрать приложение для создания треков и магазин, где будут продаваться готовые мэшапы в формате NFT.

Изучили вводные

Создатели Туттии обратились к нам по рекомендации от другого нашего заказчика. Нас представили как студию, которая поможет со сложными задачами, даже если пока нет чёткого техзадания — это было именно то, что искали основатели сервиса. Они впервые брались за разработку и не знали, как создать музыкальное приложение.Идея возникла так. Одному из основателей интересна электронная музыка, и ему захотелось разработать сервис, в котором можно делать ремиксы на популярные треки, а затем продавать их.Вот вводные, которые мы получили на старте проекта:

Прототип интерфейса

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

Прототип, полученный от заказчика — Прототип, который показали заказчики

Файлы с описаниями

В них был текстовый рассказ о проекте и его особенностях. В основном это были требования и описания для трёх первостепенных направлений работы:

Экраны с инструкциями для новых пользователей.
Редактор для обработки музыки.
Интеграция с системой аналитики Amplitude Analytics.

Развёрнутого ТЗ для остальных функций приложения мы не получали, составляли его вместе с заказчиком на протяжении проекта. Для работы сделали гугл-документ, в который писали вопросы и там же получали обратную связь от заказчика. Время от времени клиенты предлагали идеи для новых фич и спрашивали, возможно ли воплотить их в проекте.Потом создали отдельный документ для отзывов о тестовых версиях приложения — оттуда тоже собирали фидбэк.

Провели R&D

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

Собрали User Scenarios

Вот основные пользовательские сценарии:

Возможность соединять любое число треков и дорожек в одном ремиксе. В приложении доступны дорожки двух видов — инструментальные и вокальные.
Инструменты для работы с мэшапами — регулировка скорости бита, тональности и громкости звуковых дорожек. Инструменты для сохранения и экспорта.
Встроенный маркетплейс, где пользователи могут продавать свои мэшапы или покупать ремиксы других авторов в формате NFT.

Выбрали технологии

Мы разобрались, как устроена обработка аудиофайлов, и поняли, что не придётся с нуля разрабатывать технологии для изменения темпа и тональности треков. Вместо этого мы использовали AudioKit — это открытая библиотека для создания аудио и работы со звуком. Это надстройка поверх базового AVFoundation, подходит для iOS.

Составили карту разделов

Наша UX-дизайнер изучила пользовательские сценарии и собрала схему разделов будущего приложения. Вот 5 основных:

Onboarding — стартовые страницы и экраны-инструкции для новых пользователей.
Editor — место для создания проектов.
Wallet — виртуальный кошелёк для финансовых операций.
My library — коллекция проектов для хранения и управления файлами.
Explore — навигация по артистам, оригинальным трекам и готовым ремиксам.

Собрали прототип

Мы проанализировали возможности похожих редакторов, разобрались в их устройстве и поняли, как создать своё музыкальное приложение. Вот каким был интерфейс Туттии в первом прототипе:

Экраны, где можно выбирать треки из библиотеки и менять тональность

Придумали визуал

После исследования продукта и создания структуры мы взялись за разработку визуальной составляющей приложения. Как мы к этому подошли:

Собрали примеры в Figma

Сделали мудборд с интерфейсами других мобильных сервисов. Изучили их и пришли к тому, что хотим использовать кислотно-неоновые цвета в качестве акцентных и что-то тёмное — в качестве фонового.Мы с заказчиками совпали в видении стиля приложения. Оно ассоциировалось у нас с чем-то космическим и футуристичным — показалось, что именно таким и должен быть современный развлекательный продукт с NFT-мэшапами.

Некоторые референсы. В основе тёмные цвета и неоновые акценты

Подобрали цветовые схемы

Мы отталкивались от примеров других интерфейсов и дизайна сайта Туттии — к тому моменту он уже запустился. Вот наши рабочие варианты, в итоге остановились на цветовой схеме слева:

Два варианта цветовых схем — Нам и заказчикам понравился правый вариант

Проработали интерфейс

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

Три экрана с макетами: библиотека треков, пустые дорожки и заполненные музыкальными фрагментами — Слева — библиотека треков. Посередине — пустые дорожки, а справа — заполненные музыкальными фрагментами

Создали рабочую панель

Перешли от первых набросков и прототипов к окончательному оформлению. Вот что изменилось в сравнении с первыми версиями:

Хронология вариантов макета: первый, детализированный и финальный — Слева направо: первый вариант, следующая более детализированная версия, финальный дизайн. Обратите внимание на изменения в верхней навигационной панели

Сделали больше регулятор громкости и убрали кнопку «Без звука». Теперь, чтобы выключить звук, можно коснуться значка динамика или опустить регулятор громкости до конца.
Переосмыслили элементы навигации, чтобы сделать кнопки контроля темпа и тональности удобнее. Для этого сдвинули кнопку воспроизведения на плеере влево — в прототипе она была по центру.
Убрали отдельную кнопку для отмены действий и добавили кнопку для сохранения. Пришли к тому, что её важнее оставить на рабочей панели.

Продумали выбор тональности

Мы сделали контроллер тональности в форме колёсика — сейчас расскажем, почему считаем это решение удачным. Но сначала введём в курс дела и объясним, как устроены тональности:

Мажор и минор — два основных типа тональностей в музыке. Минорные композиции обычно кажутся меланхоличными, а мажорные — весёлыми и торжественными.
Нот всего семь и они циклически повторяются: до, ре, ми, фа, соль, ля, си, и снова до. Между некоторыми из них есть и промежуточные звуки — полутона.
От каждой ноты можно построить гамму — звукоряд, который составляет тональность. Если от ноты «до» сыграть все семь нот, получится до мажор.

Поскольку нот ограниченное количество, то и тональностей тоже. А ещё они, как и ноты, повторяются по циклу. То есть нельзя бесконечно подниматься на тональность вверх — рано или поздно придёте обратно.

Каждая тональность имеет параллельную: в обеих одинаковые звуки, но они тяготеют к разным центрам. Если сыграть все звуки до мажора, но не от ноты «до», а от «ля», получится ля минор — параллельная тональность.

Контроллер-колёсико здорово иллюстрирует, что тональности цикличны и связаны. Мы хотели показать, как работает музыка, и дать возможность пользователю интерактивно изучить её устройство. Для нас важно, чтобы с музыкой экспериментировали.Кстати, контроллер тональностей почти не изменился по сравнению с прототипом:

Экран выбора тональнос�ти — Параллельные мажор и минор находятся вверху и внизу одной ячейки. Поворот меняет высоту на полтона

Добавили поиск

Тут пользователи могут искать композиции других авторов по разным стилям и настроению:

Раздел Explore, где можно найти мэшапы других авторов

Отказались от NFT

Пока мы создавали музыкальное приложение, в App Store изменилась политика: в новых правилах запретили продажу и покупку NFT внутри приложений. Поэтому мы отказались от маркета внутри Туттии и создали прототип только с музыкальным редактором.Поменяли раздел библиотеки. Оттуда исчезла вкладка с NFT и остались только треки:

Обновленный вид раздела Library — Новый вид раздела Library

Изменили флоу создания проекта

После изменений в политике App Store нам пришлось убрать часть экранов, связанных с NFT-платформой внутри приложения — ведь мэшапы теперь нельзя превращать в NFT.

Экраны, которы не вошли в приложение Туттии — Экраны, которых больше нет в Туттии 🙂

Справились со сложным UX

В Туттии встретилось много уникальных UX-элементов. Мы поговорили с нашими iOS-разработчиками и выяснили, что стало для них вызовом.

Drag&drop фрагментов музыки

из библиотеки в рабочее пространство. Фрагменты с голосом можно перетащить только в верхнюю дорожку рабочего пространства, а с мелодией и битом — только в нижнюю.На прототипах все музыкальные фрагменты были похожего размера. Но когда мы взялись за разработку, поняли, что в действительности длина фрагментов может быть разной. Это создавало проблемы.Когда пользователь переносит фрагмент трека из коллекции на рабочую панель, нужно показать его предварительное расположение на дорожке. Здесь было важно отрисовать состояние панелей и учесть длительность фрагментов.

Экраны приложения во время заполнения �дорожки аудиофрагментами из коллекции — В пустую дорожку переносятся аудиофрагменты из коллекции. Кроме мелодий, там есть паузы — blanks, нужно было придумать реализацию и для них

Колесо для выбора тональностей

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

Весь процесс кратко

Здесь собрали все шаги, которые нам потребовались, чтобы разработать музыкальное приложение:

Получили описание будущего сервиса

Заказчик сам собрал грубый прототип интерфейса и текстом описал идею.

Провели исследовательскую фазу

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

Определились со стилем будущего приложения

Собрали референсы, а затем подобрали фирменные цвета. За основу взяли тёмный фон с неоновыми акцентами и футуристичный дизайн.

Проработали интерфейс

Сделали прототипы и финальный дизайн. Разработали несколько интерфейсных решений, которые позволят людям без музыкального опыта создавать мэшапы.

Справились с разработкой технически сложных частей приложения

Например, реализовали drag&drop и колесо с выбором тональностей.

Сориентировались, когда Apple изменил политику

Пока мы разрабатывали сервис, в App Store изменилась политика: теперь в приложениях нельзя продавать NFT. Поэтому в первой версии будет только музыкальный редактор.