Guitar Notes Helper (App)

Фичи

Задача

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

Поддержать десктопный проект www.guitarnoteshelper.com и усилить бренд Giutar Notes Helper

Аналитика

Для теста были выбраны приложения которые выдаются в первой десятке по ключевым запросам, из них были исключены приложения функционал которых не соответствует запросу (например песенники, тренажеры).

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

Guitar notes helper занял первое место как по общему количеству фич так и по ключевым фичам

По результатам средней скорости обработки операций Guitar Notes Helper также взял первое место во всех категориях

Структура

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

Гриф

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

Чтобы снизить количество уникальных оттенков нот был добавлен черный (серый) цвет, так количество уникальных оттенков уменьшилось до шести.

Цвет первой и последней ноты цвет был выбран из логических соображений. Для первой ноты (до) – красный, что соответствует первому цвету спектра RGB. Для последней ноты (си) – черный, что соответсвует отсутствию спектра или конечному цвету. Остальные пять нот получили оранжевый, светло-зеленый, зеленый, синий и фиолетовый цвета. Чтобы снизить пересечение тонов рядом стоящих нот, был изменен порядок окраса.

Ширина ладов основана на реальной мензуре построенной от минимально допустимой ширины 24-го лада с последующим даунскейлингом мензуры до вмещения первых четырех ладов в ширину экрана в портретном режиме и 12 ладов в альбомном. Для этого процесса используется специальный алгоритм масштабирования грифа в реальном времени под заданную ширину с сохранением реальных пропорций ширины ладов. Аналогичный алгоритм используется в десктопной версии сервиса

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

Главная

На главной всегда отображается гриф со всеми нотами, ниже, в зависимости от выбора режима, блок гамм или аккордов. Блок гамм по-умолчанию. В блоке отображаются кнопка переключения режима гамм/аккордов, кнопка списка гамм/аккордов, избранные группы гамм/аккордов.  По-умолчанию в каждом блоке добавлены по 4 популярные группы.

Список групп гамм/аккордов

Модальное окно со списком групп гамм/аккордов открывается по кнопке Все гаммы/аккорды. Строчка содержит название группы,  мажорный модификатор ступеней и кнопку добавления группы в избранное. Избранное можно сбросить на значение по-умолчанию

Гамма

Экран гаммы содержит блок выбора тоники, блок опций,  блок избранного (аналогичен блоку на главной) и футер с дублирующей кнопкой закрытия экрана. Чтобы экран не скакал по высоте, заголовок выполнен в одну строчку, при этом в шапке дублируется название на случай если слишком длинное название группы становится неясным после обрезания.

Под блоком тоники располагается блок опций, уникальный для каждого режима. В гаммах это ступени и аккорды гаммы в разных позициях, в аккордах – интервалы и гаммы аккорда. При скролле фиксируется блок заголовка и грифа.

Аккорд

Функционально раздел аккордов идентичен разделу гамм, отличается только блок опций.  Для подробного описания смотри раздел Гаммы.

Фильтр

Фильтр открывается в модальном окне по кнопке расположенный в шапке справа от поиска, доступен на главном и экране с гаммой/аккордом. Содержит фильтрацию по октаве, знакам альтерации и нотам. В качестве индикатор активного фильтра используется заливка кнопки.

Поиск

Поиск открывается в отдельном окне по форме поиска расположенной в шапке, доступен только с главного экрана. Особенность поиска это возможность искать гамму или аккорд вместе с тоникой, так можно быстро открыть гамму в нужном ключе, например Ре минор. В случае с аккордами есть нюанс, так как навигация по аккордам использует группы (для единообразия с гаммами) невозможно найти аккорд по короткому названия, например чтобы найти аккорд Am7, нужно набрать A minor seventh. Такое под силу только опытному теоретику, но тем лучше для новичка, с такой структурой придет быстрее понимание того как организуются аккорды в теории музыки

Меню

Боковое меню открывается по кнопке в шапке слева от формы поиска. Содержит разделы Обновить до PRO, тема, настройки, о сервисе,  а также кнопки Сменить язык и Поделиться.

Боковое меню открывается по кнопке в шапке слева от формы поиска. Содержит разделы Обновить до PRO, тема, настройки, о сервисе,  а также кнопки Сменить язык и Поделиться.

Темная тема

Доступны два темных режима темный и черный

Альбомный режим

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

Лого

Лого выполнено в монохромных тонах, чтобы не создавать неуместных ассоциаций с цветами нот и не отвлекать от контента. Лого состоит из нескольких образов, это буква G (первая буква слова Guitar, в переводе на русский – гитара), символа помощи (+) и круг, символизирующий контейнер ноты используемый для визуализации нот на грифе