TypeFlow стал ClickHit. Новый бренд, строгие уроки и личный кабинет

01Почему не TypeFlow

TypeFlow звучало как десяток других сервисов: «type» и «flow» есть в названиях половины текстовых редакторов и шрифтовых утилит. Имя ничего не обещало и плохо запоминалось со слуха.

ClickHit короче в произношении и описывает само действие: клик по клавише и попадание в неё. Две прописные буквы, C и H, делят слово на два слога и дают логотипу ритм. Тренажёр живёт по адресу clickhit.xroyse.ru, и адрес стал частью оформления: он идёт вертикальной подписью по корешку окна набора.

Название всегда пишется как ClickHit: C и H прописные, остальные строчные.

02Знак: клавиша

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

• Красная каретка – место, где вы сейчас печатаете. В окне набора она выглядит точно так же.
• Две капсулы – выступы на клавишах «А» и «О» (F и J), по которым пальцы вслепую находят домашний ряд.
• Прорезь внизу – нижняя грань клавиши, та же, что у клавиш экранной клавиатуры.

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

03Надпись и правила

Буквы нарисованы вручную на сетке, а не набраны шрифтом. Штрих 16 при высоте 100, углы срезаны под 45°. Прописные C и H занимают полную высоту, строчные - 70%, точка у «i» квадратная, как клавиша.

Вокруг логотипа остаётся охранное поле в четверть стороны знака. Минимальный размер знака - 16px, логотипа целиком - 20px по высоте. Знак живёт на трёх поверхностях системы, и каретка на всех остаётся красной:

04Шрифты и цвет

У заголовков теперь свой голос: Tektur со срезанными углами продолжает геометрию логотипа. Интерфейс и текст остались на Geologica, а набираемый текст и таймер - на моноширинном JetBrains Mono.

Палитра - «чёрный блокнот»: серая стена, чёрные обложки, белые плашки и один красный. Красный означает только то, что важно прямо сейчас: каретку, следующую клавишу, нужный палец, остаток теста. Есть тёмная тема «Ночь», по умолчанию тема следует системе.

05Окно набора

Главный экран - окно набора на чёрной обложке. Над ним шапка урока: номер, глава, совет, новые клавиши и условие зачёта. Справа красная полоса-резинка укорачивается по мере теста, сверху - живые метрики.

1. Шесть режимов – уроки, время (15–120 с), слова, цитаты классиков, слабые клавиши и свой текст.
2. Две раскладки – ЙЦУКЕН и QWERTY, переключаются в шапке.
3. Схема рук – нужный палец горит красным, над ним подпись: «Правый средний · клавиша К».
4. Экранная клавиатура – зоны пальцев различаются по светлоте, а не по оттенку, поэтому читаются и без цветового зрения.
5. Защита от ложных ошибок – если в системе включена другая раскладка или Caps Lock, тренажёр подскажет, а не засчитает промах. Уход со страницы ставит таймер на паузу.

06Уроки по порядку

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

Зачёт - точность от 95% и скорость не ниже цели урока. Следующий урок открывается только после зачёта предыдущего. У каждой карточки своя пиксельная мини-клавиатура с клавишами урока.

07Строгость и подсказки

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

• Стоп на ошибке – курсор ждёт верную клавишу; или ошибка остаётся в тексте, а Backspace можно запретить.
• Обрыв теста – после 1, 3 или 5 ошибок, для режима без права на ошибку.
• Строгий Shift – заглавные только Shift противоположной рукой, Caps Lock считается ошибкой.
• Подсказки – следующая клавиша всегда, через секунду промедления или никогда; подписи клавиш можно скрыть.

08Результат и статистика

После теста - вердикт словами («Урок зачтён» или чего не хватило), скорость в зн/мин и сл/мин, график скорости по секундам и клавиши, на которых были ошибки. Ниже клавиатура превращается в тепловую карту.

На странице статистики - средняя и лучшая скорость, серия дней, история тестов, тепловая карта ошибок по всем тренировкам и список трудных клавиш. Из них собирается режим «Слабые клавиши».

09Аккаунт и вход

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

Слева на экране входа логотип собирается по кругу: капсулы влетают со шлейфом, клавиша «щёлкает», слово ClickHit печатается и стирается. При входе с нового устройства результаты гостя добавляются к аккаунту. Пароли хранятся в bcrypt, сессия - в защищённой cookie.

10Личный кабинет

• Уровень – от «Новичка» до «Профи» по лучшей скорости, с полоской до следующего.
• Календарь активности – 16 недель, чем больше тестов в день, тем ярче клетка.
• Курсы – пиксельная карта пройденных клавиш для каждой раскладки.
• Управление – имя, смена пароля, список устройств, выгрузка всех данных в JSON и удаление аккаунта.

11Ошибки и офлайн

Даже страницы ошибок сделаны в стиле тренажёра: крупные клавиши по очереди «нажимаются».

• Нет интернета – можно тренироваться дальше: результаты ждут в очереди и сохраняются, когда связь вернётся.
• Сервер не отвечает – экран с проверкой и режимом «без сохранения».
• Телефон – ClickHit рассчитан на физическую клавиатуру, поэтому с телефона показывается предупреждение, но доступ не закрывается.