01

Обзор

Fast Reel — прототип приложения, которое превращает длинное видео в вертикальный ролик: речь расшифровывается, пользователь тыкает в нужные слова, остальное вырезается. Язык интерфейса — мягкий скевоморфизм без стекла: плотные матовые поверхности, суперэллипс вместо круглых углов, свет вместо обводок.

Из чего состоит

Чем этот язык отличается

02

Принципы

Семь правил, по которым собирается любой новый экран Fast Reel.

• Углы — суперэллипс, без исключений. Обычное круглое скругление допустимо только у настоящих кругов: аватар, круглая кнопка, тумблер, точка, полоса прогресса.
• Стекла нет. backdrop-filter отключён по всему прототипу принудительно. Полупрозрачность допустима, размытие подложки — нет.
• Глубина — светом. Сверху мягкий радиальный блик внутри поверхности, снизу рассеянная тень. Никаких внутренних «губ» и псевдообъёма.
• Выделение светится. Активное состояние — заливка акцентом плюс ореол наружу. Ореол никогда не обрезается: контейнеру нужен запас поля.
• Одна кривая на весь прототип. cubic-bezier(.22,1,.36,1) для появления, cubic-bezier(.65,0,.35,1) для переходов между экранами.
• Контент уезжает вниз, приходит снизу. Экраны не ездят вбок: содержимое уходит по частям вниз, следующий экран приезжает снизу тоже по частям.
• Фото — всегда в край или в форму. Кадр либо занимает всю площадь экрана и растворяется маской, либо лежит в блоке с суперэллипсом. Промежуточных вариантов нет.

03

Цвет

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

Поверхности

Акцент и сигналы

Текст

Правила цвета

• Зелёный — только сигнал. Он не бывает фоном, кнопкой или акцентом навигации: «Ready», галочка, зелёная подсветка после нажатия.
• Розовый живёт только в фоне: радиальный отсвет экрана и фон первого экрана. В компонентах его нет.
• Между --fr-surf и фоном экрана нет обводки. Разделяет их разница светлоты, а не линия.
• Текст на акценте — всегда чистый белый. --fr-ink-2 на #9179F2 даёт контраст ниже 4.5:1.

04

Типографика

Один шрифт на всё — Jost. Роли различает вес и кегль, не гарнитура. Ниже каждая роль показана живьём, тем же начертанием, что в прототипе.

Веса

Роли

05

Геометрия и ритм

Поля кратны 4, вертикальный ритм экрана держится на трёх числах: 16, 20 и 40.

Поля экрана

Радиусы

06

Суперэллипс

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

Контур угла — суперэллипс четвёртой степени: |x/r|⁴ + |y/r|⁴ = 1. У окружности показатель 2. Разница видна тем сильнее, чем большую долю стороны занимает радиус.

Четыре способа задать форму

Как выбрать

• Нужна только заливка формы (кнопка, строка, панель) — подложка-псевдоэлемент. Тень переносится на filter: drop-shadow, иначе форма её не повторит.
• Внутри есть фото или контент, который надо обрезать, — многослойная маска: четыре угловых тайла фиксированного размера плюс две прямоугольные полосы. Углы не растягиваются при любом размере элемента.
• Элемент квадратный и фиксированный — можно clip-path в процентах, он самый дешёвый.
• Если форму задаёт маска, собственный border-radius должен быть нулевым. Иначе overflow:hidden режет содержимое по окружности, и суперэллипса не видно.

07

Свет и подсветка

Объём в этом языке даёт не тень под объектом, а свет внутри него и ореол вокруг.

Три приёма

08

Движение

Две кривые, три длительности. Всё остальное — производные.

Переход между экранами

• Содержимое уходящего экрана уезжает вниз по частям: шаг задержки 35 мс, смещение 190px, прозрачность в ноль.
• Экран гаснет только после того, как содержимое уехало — задержка 0.32s.
• Приходящий экран собирается снизу по частям: шаг 55 мс, старт 0.26s, смещение 64px.
• Чипсы слов приезжают поштучно: задержка 0.34s + 0.022s × min(индекс, 18). Ограничение по индексу держит общую длительность около 0.75s.
• Экраны не ездят вбок. Боковой сдвиг в этом прототипе отключён принудительно.

Автопроигрывание

Прототип на странице кейса играет сам: 11 шагов сценария, у каждого своя длительность, суммарно около 33 секунд, затем цикл. Под телефоном — полоса перемотки и четыре кнопки: шаг назад, начало, пауза, шаг вперёд.

09

Каталог компонентов

В первой колонке — сам компонент, живой, тем же CSS, что и в прототипе. Селектор под названием ведёт к коду.

09b

Расширенный каталог

Компонентов, которых в прототипе пока нет, но которые понадобятся любому следующему экрану. Нарисованы в том же языке: те же поверхности, тот же акцент, та же форма угла. Это предложение, а не документация существующего кода — поэтому у них отдельное пространство имён .fx-*.

10

Экраны и каркас

Восемь экранов, один каркас. Различаются они тем, чем заполнена середина, — шапка и низ одинаковы везде.

Каркас

Сценарий

11

Кнопки

Главная кнопка одна на экран. Всё остальное — плашки, ссылки и круглые кнопки шапки.

Отклик

• Наведение — подъём на 1.5px плюс мягкая подсветка поверх заливки. Подсветка — накладка той же формы с переходом по прозрачности, а не filter:brightness: фильтр на 9-slice-картинке даёт рывок.
• Нажатие — scale(.98) и подсветка ярче. Никаких смещений вниз и «вдавленных» теней.
• Подпись центрируется по оптике, а не по геометрии: у Jost прописные сидят выше середины, поэтому текст опущен на 2px.

12

Чипсы слов

Главный элемент продукта: расшифровка — это не текст, а набор нажимаемых слов.

Правила ленты

• Запас поля сверху 24px, снизу 26px: ореол верхнего ряда при наведении иначе срезается краем прокрутки.
• Лента растворяется маской сверху и снизу. Верхний градиент включается только когда есть что прокручивать вверх — в начале ленты первый ряд должен быть полностью плотным.
• При прокрутке к элементу добавляется scroll-padding, равный полю, иначе прилипание сдвигает ленту.
• Во время Preview лента доезжает до текущего слова плавным твином, а не скачком scrollTop.
• Чипсы — единственный компонент, форму которого не обрезают маской: это срезало бы ореол.

13

Списки и плитки

Два способа показать видео: строка с описанием и плитка-кадр.

14

Формы и ввод

В продукте нет ни одного текстового поля — зато есть четыре нестандартных контрола. Ниже и они, и типовые поля на случай будущих экранов.

Типовые поля — на будущее

Обратная связь

15

Панели и меню

Три поверхности второго уровня: панель проигрывания, меню настроек, выпадающий список.

16

Прогресс и статусы

Расшифровка — самый долгий шаг сценария, поэтому у неё свой набор индикаторов.

• Полоса прогресса и её заливка — единственные элементы, которые остаются круглыми по всей длине.
• Числа идут таблично: проценты и секунды меняются каждые 380 мс.
• По достижении 100% экран сам уходит на следующий через 650 мс — без кнопки.

17

Медиа и фон

Кадр из видео — полноправный слой интерфейса, а не картинка в рамке.

• Поверх кадра всегда лежит затемняющий градиент — иначе белый текст на светлом кадре пропадает. Верх экрана «Поделиться» — исключение: там затемнение начинается с 30% высоты.
• Кадр на всех экранах сценария один и тот же — тот, что пользователь выбрал в списке. Экран «Сохранено» подхватывает его так же, как остальные.
• Фон первого экрана — отдельная картинка 1080×1935, мягкие размытые пятна в палитре проекта, центр темнее, чтобы контент читался.

18

Состояния и отклик

Каждый нажимаемый элемент отвечает движением и светом. Ничего не меняет размер скачком.

19

Доступность

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

• Зона нажатия — не меньше 44px. У чипа слова это задано явно через min-height, хотя текст в нём 14.5px.
• Кружки цвета и элементы колеса — настоящие <button> с aria-pressed и aria-selected, а не div с обработчиком.
• Колорпикер — role="slider" с aria-valuenow, стрелки влево-вправо меняют цвет шагом 4%.
• Фокус виден: :focus-visible даёт кольцо акцентом. Снимать обводку фокуса нельзя нигде.
• Текст на акценте — только чистый белый. Приглушённые градации на #9179F2 не проходят по контрасту.
• prefers-reduced-motion отключает все поэтапные появления и вспышки; состояния при этом остаются.

20

Чего не делать

Каждый пункт — реальная ошибка из работы над этим прототипом.

21

Токены

Все числа прототипа в одном месте.

Переменные темы

Радиусы по компонентам

Отступы и размеры

Время

22

Как пользоваться

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

1. Найти похожее в каталоге. Раздел 09 — таблица с живыми образцами; селектор под названием ведёт прямо к коду в index-v1-backup.html.
2. Взять размеры из раздела 21. Новых чисел не придумывать: если нужного размера нет, скорее всего подходит соседний.
3. Выбрать технику формы по разделу 06. Заливка — подложка-псевдоэлемент. Обрезает содержимое — многослойная маска. Квадрат — clip-path.
4. Проверить долю радиуса. Рядом стоящие компоненты должны иметь близкую долю радиуса к размеру, а не одинаковое число.
5. Не ставить обводку. Если элемент не отделяется от фона — менять светлоту поверхности, а не добавлять линию.
6. Проверить ореолы. У любого светящегося элемента контейнер должен иметь запас поля.
7. Прогнать по разделу 20. Двенадцать пунктов «чего не делать» — это ровно те ошибки, которые уже были допущены здесь.