apple-design

Apple Design — это набор правил для веб-интерфейсов, которые должны ощущаться продолжением действия пользователя, а не набором разрозненных экранов. Источник связывает такую физичность прежде всего с отзывчивостью, непрерывностью движения, возможностью прервать переход и понятной пространственной связью между причиной и результатом. Это редакционная методика для проектирования и ревью интерфейса, а не готовый компонент и не обязательная библиотека анимации. Главное требование к отклику — дать обратную связь уже на pointer-down, а не ждать отпускания кнопки или завершения жеста. Проверять нужно всю цепочку задержек: debounce, искусственные таймеры, задержки переходов и устаревшую задержку касания около 300 мс. Во время drag или перемещения состояние должно обновляться непрерывно и следовать за указателем один к одному. Для прямого управления источник рекомендует Pointer Events и setPointerCapture, чтобы отслеживание не прекращалось при выходе указателя за границы элемента. Начальную позицию следует считать от фактического места захвата, а для продолжения движения после отпускания хранить короткую историю позиции и времени, из которой получается скорость. Ключевая идея — interruptibility: пользователь должен иметь возможность схватить объект в середине анимации, изменить направление и не ждать окончания прежнего перехода. Новую анимацию нужно начинать от текущего presentation value, то есть от реально показанного на экране transform, а не от логической конечной позиции. Для жестовых взаимодействий источник предостерегает от фиксированных CSS transition и keyframes: они не дают плавно перехватить движущийся объект. Spring-переход сохраняет непрерывность, если новая цель выбирается из текущего состояния. Для независимых осей рекомендуется использовать отдельные X- и Y-spring, потому что у осей могут быть разные скорости. Spring описывается не фиксированной длительностью, а damping ratio и response. Критическое затухание с damping 1.0 подходит как спокойное значение по умолчанию; damping ниже 1.0 даёт перелёт и колебания и уместен, когда предшествующий flick или throw действительно передал движению импульс. В приведённых примерах для перемещения используется damping 1.0 и response 0.4, для вращения — 0.8 и 0.4, для drawer или sheet — 0.8 и 0.3. В API Motion или Framer Motion этим параметрам близки bounce и duration: duration здесь является параметром spring-модели, а не обещанием жёсткого времени завершения. При завершении drag скорость пальца или указателя должна перейти в spring без видимого скачка. Если API ожидает нормированную скорость, источник приводит отношение gestureVelocity к разнице между targetValue и currentValue; если принимает абсолютную скорость в пикселях в секунду, можно передать исходное значение. Место остановки flick следует выбирать по прогнозу инерции, а не только по ближайшей границе от точки отпускания. В источнике приведена экспоненциальная формула Apple: projectedEndpoint равен текущей позиции плюс (v/1000) умноженное на d и делённое на (1-d), где для обычного scroll feel d примерно 0.998. После проекции выбирается ближайшая snap point, а spring получает исходную скорость. Пространственная консистентность требует возвращать панель тем же путём, которым она появилась, привязывать popover или sheet к элементу-источнику и зеркалить easing на обратном переходе. На границе вместо резкого hard stop применяется rubber-band: сопротивление постепенно растёт с величиной выхода за предел. Для кадровой плавности источник советует requestAnimationFrame и compositor-friendly свойства transform и opacity. Прозрачные панели, toolbar и sheet могут использовать backdrop-filter и полупрозрачный фон, но вес материала должен отражать иерархию; несколько лёгких полупрозрачных слоёв подряд ухудшают читаемость. Доступность встроена в тот же подход. При prefers-reduced-motion нужно заменить slide, spring и parallax на короткий opacity cross-fade или статическое состояние, сохранив полезную обратную связь. При prefers-reduced-transparency поверхность должна стать более непрозрачной, а blur — отключиться; при prefers-contrast: more нужен почти сплошной фон и контрастная граница. Для типографики tracking зависит от размера: крупному тексту обычно требуется отрицательное межбуквенное расстояние, основному тексту — значение около нуля; leading, вес и размер образуют одну иерархию. Системный шрифт предпочтителен, если нет причины использовать другой. Методика также задаёт восемь проверяемых оснований дизайна: purpose, agency, responsibility, familiarity, flexibility, simplicity, craft и delight. Это означает тратить внимание пользователя только на полезные функции, сохранять контроль и undo, учитывать приватность и возможный вред, опираться на знакомые модели, поддерживать разные устройства и способности, убирать лишние шаги без сокрытия нужного контекста, доводить детали и не подменять понятность декоративным эффектом. В процессе предлагаются интерактивный прототип, совместная работа над визуалом и взаимодействием и тестирование с реальными людьми в реальном контексте. Ограничение подхода очевидно: приведённые значения spring, формулы проекции, визуальные материалы и жестовые правила требуют проверки на конкретном продукте, размере экрана и настройках доступности. Они не разрешают блокировать ввод во время перехода, игнорировать reduced motion или считать «Apple-style» самоцелью. Практический результат ревью — непрерывный отклик, предсказуемая геометрия, переданная скорость, контролируемые границы, читаемая типографика и доступный эквивалент движения, а не просто больше анимаций.