Practice Log n Share

Сентябрь 2026

@@ ++ [] [] @@ [] ++ [] ++ ++ ++ ++ @@ ++ ## ## ## [] [] [] [] [] [] [] [] []
## @@ [] [] @@ ++ [] ## @@ ++ ## [] ++ @@ ++ ++ @@ [] [] [] [] [] [] [] [] []
++ @@ ## [] ++ ## ## ## @@ ## ++ ## ## ## ++ @@ ## [] [] [] [] [] [] [] [] []
@@ ++ ## [] @@ ## @@ @@ ## ++ ++ ++ ++ ## [] ## ## [] [] [] [] [] [] [] [] []
## [] ++ @@ [] @@ @@ @@ @@ [] ## ++ ## ## @@ ++ [] [] [] [] [] [] [] [] [] []
++ [] ## ## @@ ## @@ @@ ## @@ [] ## ++ @@ @@ ++ [] [] [] [] [] [] [] [] [] []
++ ++ @@ @@ ++ ++ [] ## ## @@ [] [] @@ [] @@ ++ [] [] [] [] [] [] [] [] [] []

Обзор

Записывать занятия одним касанием, а на уроке показывать преподавателю тот же экран. Я задумал и спроектировал это приложение для iPhone для собственных занятий на саксофоне и реализовал его совместно с ИИ.

Экран записи. Сверху — сетка истории занятий, ниже — полоса за сегодня (всего 54 минуты) и карточки категорий. Работа над пьесами длится уже более 27 минут; активная карточка выделена светлым цветом и белой рамкой. — Слева — запись, справа — показ итогов. Касание категории запускает таймер, а на уроке можно показать сводку занятий между уроками. На экранах — вымышленные данные для иллюстрации. На снимках экрана показан исходный японский интерфейс.

Экран для показа преподавателю. Итоги с урока 17 сентября по 24 сентября: 4 часа 38 минут, полосы по категориям и таблица по дням, где все категории видны без горизонтальной прокрутки. — Слева — запись, справа — показ итогов. Касание категории запускает таймер, а на уроке можно показать сводку занятий между уроками. На экранах — вымышленные данные для иллюстрации. На снимках экрана показан исходный японский интерфейс.

Моя роль: Концепция, UX/UI-дизайн и реализация (совместно с Claude Code и Codex)
Период: Сентябрь 2026
Технологии: React · TypeScript; Swift (WKWebView, Live Activity, StoreKit, iCloud)

Попробовать веб-демо (содержит мои записи занятий по состоянию на 20 сентября 2026 года)

Отправная точка — «Как идут занятия?»: я не мог ответить

На уроках раз в две недели ответ «в основном гаммы» не объяснял, что именно и сколько я практиковал. Писать в бумажном дневнике с саксофоном на шее неудобно, а опробованные приложения учёта времени были рассчитаны на самостоятельный просмотр записей.

Верхние полосы — ежедневные занятия, красные рамки — дни уроков. На уроке я показываю сводку за промежуток. Даты и время вымышлены; суммарная длительность верхних и нижней полос совпадает.

Запись — С инструментом в руках, одним касанием

Во время занятий я касаюсь только карточек категорий. Касание запускает таймер, другая карточка переключает категорию, повторное касание той же останавливает отсчёт.

Один день — Заполненная полоса остаётся заполненной

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

Занятия сегодня — 1 ч 05 мин

Выбрано

Отклонено

Сравнение при 65 минутах занятий. Сверху — выбранный вариант: итог задаёт правую границу при минимальной шкале в один час. Снизу — отклонённый, где шкала расширяется с 60 до 90 и 120 минут. Сразу после первого часа пустота возвращается только в нижнюю полосу.

Накопление — Всё видно с самого первого дня

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

Сетка истории. Насыщенность зелёного показывает объём занятий с июня по сентябрь; красные рамки отмечают уроки раз в две недели. — Пять уровней: 0 минут, менее 30, менее 60, менее 90 и 90 или больше. Открывая приложение, сначала видишь накопленную практику.

Развитие — Карточки как панель управления занятиями

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

Первая версия от 9 сентября. Шесть небольших карточек и сегодняшний итог в 40 минут находятся в разных областях экрана записи. — Первая и веб-версии используют одинаковые вымышленные данные (шесть категорий, 40 минут за сегодня). В iOS 1.0 — другой набор вымышленных данных.

Веб-версия от 21 сентября. Категория и время за сегодня объединены в крупных карточках; текущие 10 минут чтения нот выделены светлым цветом. — Первая и веб-версии используют одинаковые вымышленные данные (шесть категорий, 40 минут за сегодня). В iOS 1.0 — другой набор вымышленных данных.

Название и время вместе: Я крупно разместил время за сегодня на карточке, связав содержание занятий с их длительностью.
Текущее состояние с первого взгляда: Сделал светлой только карточку с работающим таймером, приглушив остальные.
Управление в пределах экрана: Прокрутка останавливается там, где ряд карточек целиком помещается на экране.

Ближе к концу я около 15 раз повторил цикл: Claude Code предлагал возможные проблемы, Codex проверял и исправлял их, а я решал, какие изменения принять.

Ощущение — Выбрать характер остановки на практике

Одних слов было мало, чтобы добиться ощущения «плавно движется и чётко останавливается». Вместе с ИИ я создал инструмент для мгновенного переключения способов и параметров, сравнил пять способов на реальном устройстве и выбрал встроенную привязку прокрутки браузера.

Модель с горбом

Прогноз конечной точки

Встроенный proximity
Выбрано

Встроенный mandatory

Без привязки

Позиции после отпускания пальца в одном масштабе. Пунктирный ноль — точка привязки. Из журналов устройства выбраны по пять жестов на способ со скоростями 0,6–1,8 px/ms, рассчитанными по позициям за предыдущие 60 ms, в порядке близости к 1,2 px/ms. Настройки, начальные позиции и направления у жестов различаются.

Инструмент настройки прокрутки. Переключатели пяти способов привязки и их параметры рядом с экраном телефона для проверки ощущений от взаимодействия. — Я сравнивал остановку прокрутки на реальном устройстве, записывая расстояние и скорость. Откройте изображение для увеличения.

Как продукт — За пределами занятий

Оформление следует настройкам устройства. Записи хранятся на устройстве и автоматически копируются в iCloud.

Светлая тема. Экран записи. Сверху — сетка истории занятий, ниже — полоса за сегодня (всего 54 минуты) и карточки категорий. Работа над пьесами длится уже более 27 минут; активная карточка выделена светлым цветом и белой рамкой. — Один и тот же экран записи в светлой и тёмной темах.

Тёмная тема. Экран записи. Сверху — сетка истории занятий, ниже — полоса за сегодня (всего 54 минуты) и карточки категорий. Работа над пьесами длится уже более 27 минут; активная карточка выделена светлым цветом и белой рамкой. — Один и тот же экран записи в светлой и тёмной темах.

Значок в заголовке приложения можно выбрать под свои занятия: 47 для музыки, 15 для спорта, 15 для языков и учёбы, 11 для искусства, 14 для творчества и быта, 7 для самовыражения. Саксофон основан на Qlementine Icons (лицензия MIT).

В использовании — Следующий вопрос: насколько подробно записывать

Я пользовался приложением во время утренних занятий и показал экран преподавателю на уроке. Он отметил, что содержание занятий понятно с первого взгляда и что запись видов гамм сделала бы приложение ещё полезнее (пересказ). Рассматриваю дополнительный уровень под категориями, чтобы сохранять больше деталей без усложнения записи.

Материалы

Веб-демо позволяет попробовать запись и показ итогов. Оно содержит мои записи занятий по состоянию на 20 сентября 2026 года; изменения сохраняются только в используемом браузере.