Математика рамок iOS: больше, чем стандартный border-radius

Когда разработчики создают пользовательские интерфейсы или генерируют мокапы, стандартным решением для скругления углов обычно является обычное свойство CSS: border-radius: 24px;. Это вычислительно дешево и всем понятно. Однако, если вы изучите современное оборудование iPhone или иконки приложений iOS, вы заметите, что углы выглядят заметно более плавными, чем те, что может создать стандартная дуга CSS. Язык дизайна Apple не полагается на стандартные прямоугольники со скругленными углами; он структурно построен на squircle (суперэллипсе), или, выражаясь математическим языком, на суперэллипсе.

G1-разрыв и непрерывная кривизна

В стандартном прямоугольнике со скругленными углами в CSS идеально прямая линия резко переходит в дугу окружности. В том самом пикселе, где линия встречается с кривой, кривизна мгновенно прыгает от нуля до фиксированного значения. В промышленном дизайне и CAD-моделировании этот резкий переход известен как G1-разрыв (G1 discontinuity). Человеческий глаз легко улавливает этот переход как резкий излом, а свет неравномерно отражается от таких краев, из-за чего цифровые активы и оборудование выглядят слегка недоработанными.

Чтобы решить эту проблему, Apple использует непрерывную кривизну (continuous curvature). В этой геометрической модели кривизна не меняется скачкообразно. Вместо этого она постепенно увеличивается от нуля вдоль прямого края, достигает пика точно в углу и плавно возвращается к нулю. В основе этой формы лежит формула кривой Ламе (суперэллипса): |x/a|ⁿ + |y/b|ⁿ = 1.

n = 2: Идеальный математический круг.
n = 4: Настоящий суперэллипс (squircle).
n ≈ 5: Квинтическая форма суперэллипса, которую Apple максимально точно аппроксимирует для рамок своих устройств и сетки иконок iOS.

Эта геометрия была примечательно использована датским архитектором Питом Хейном в 1959 году для решения проблемы транспортного затора в Стокгольме. Спустя десятилетия она стала строгим стандартом для аппаратных и программных интерфейсов Apple.

Геометрический конфликт в мокапах для App Store

Это математическое различие создает практическую проблему для разработчиков, готовящих ассеты для App Store Connect. Apple требует строгого соблюдения определенных размеров скриншотов, таких как обязательные форматы дисплеев 6,5 и 5,5 дюймов.

Большинство стандартных инструментов дизайна и готовых шаблонов для ASO (App Store Optimization) используют базовый border-radius для отрисовки рамок устройств. Поскольку скриншот iOS по своей природе содержит элементы интерфейса в форме суперэллипса (такие как док-панель, виджеты и нативные модальные окна), размещение его внутри мокапа со стандартным скруглением углов приводит к конфликту геометрий. Результатом становятся несовпадающие зазоры в углах, «выползание» пикселей (pixel bleeding) и обрезка краев устройства.

Более того, многие популярные генераторы мокапов построены на устаревших архитектурах, ориентированных на видео, которые медленно рендерят статические изображения. Они часто ограничивают важные требования App Store — такие как экспорт в высоком разрешении или Feature Graphic 1024x500 — платными тарифами, усложняя процесс релиза для инди-разработчиков.

Применение математики в AppScreenStudio

Работа с точной геометрией устройств при управлении глобальными метаданными App Store является серьезным узким местом в рабочем процессе. AppScreenStudio был спроектирован как высокопроизводительный нативный инструмент дизайна, а не просто очередная обертка для ИИ, чтобы программно обрабатывать эти специфические технические требования.

Для устранения геометрических и структурных трений в ASO его архитектура обеспечивает:

Геометрия, соответствующая «железу»: Редактор включает специальный переключатель Squircle. Это позволяет обойти стандартное скругление CSS и использовать в рамках мокапов настоящую непрерывную кривизну. Ваши скриншоты идеально вписываются в рамки без «выползания» пикселей, точно отражая современное оборудование устройств.

Понимание геометрии платформ, для которых вы создаете продукты, позволяет выпускать ассеты более высокого качества. Если вы хотите автоматизировать свой процесс ASO с помощью математически точных рамок устройств, вы можете использовать переключатель squircle прямо на AppScreenStudio.com.