Вы когда-нибудь задумывались, почему иконки на iPhone выглядят именно так? Их форма кажется одновременно простой и уникальной — округлые углы, равномерные отступы, характерная «подушка» по краям. Но как официально называется эта фигура? Спойлер: у неё есть не только название, но и строгие математические параметры, которые Apple регламентирует для всех разработчиков.
В этой статье мы разберём не только терминологию, но и эволюцию формы иконок — от первых версий iOS до современных iPhone 15. Вы узнаете, почему скруглённые прямоугольники стали визитной карточкой системы, как их правильно создавать для App Store, и чем они отличаются от иконок Android. А ещё — малоизвестные факты о «скрытой геометрии», которую Apple не афиширует публично.
Официальное название фигуры иконок iOS
Форма иконок в iOS называется «Squircle» (от англ. square + circle — «квадрат-плюс-круг»). Этот термин придумал в 2010 году дизайнер Apple Сьюзен Каре, работавшая над интерфейсом первых Macintosh. Однако в официальной документации Apple использует более формальное определение: «скруглённый прямоугольник с равномерной кривизной» (rounded rectangle with uniform curvature).
Но почему не просто «скруглённые углы»? Дело в том, что иконки iOS имеют уникальную кривизну, которая описывается не стандартной дугой окружности, а специальной математической функцией — суперэллипсом. Это придаёт форме более «мягкий» переход между сторонами и углами, чем у обычного скруглённого прямоугольника.
- 🔹 Squircle — неофициальное, но широко используемое название (включая внутренние документы Apple).
- 📏 Суперэллипс — математическое описание формы (уравнение: |x|n + |y|n = rn, где n > 2).
- 🖥️ Sketch/App Icon Shape — так форму называют в инструментах для дизайна (например, в Figma или Adobe XD).
Интересно, что Apple никогда не раскрывала точные параметры скругления в публичных гайдлайнз. Дизайнеры вынуждены использовать шаблоны из Xcode или восстанавливать форму по пиксельным маскам. Это часть стратегии компании по контролю над визуальной идентичностью платформы.
Эволюция формы иконок: от iOS 1 до iOS 17
Первые иконки iPhone (2007 год) имели радиус скругления всего 10 px — это были почти прямые углы с едва заметной кривизной. Но уже в iOS 7 (2013) под руководством Джони Айва форма кардинально изменилась: радиус вырос до 22 px, а сама иконка стала «плавающей» на прозрачном фоне. Это был переход от скевоморфизма к плоскому дизайну (flat design).
С тех пор геометрия Squircle претерпела ещё несколько изменений:
| Версия iOS | Год | Радиус скругления (px) | Особенности формы |
|---|---|---|---|
| iOS 1–6 | 2007–2012 | 10–12 | Скевоморфные иконки с «реалистичными» текстурами (кожа, металл). |
| iOS 7–10 | 2013–2016 | 22 | Плоский дизайн, убраны тени и градиенты. Введена «подушка» (padding) внутри иконки. |
| iOS 11–13 | 2017–2019 | 24–26 | Добавлены полупрозрачные фоновые слои для глубины. |
| iOS 14–17 | 2020–2023 | 28–30 | Адаптивные иконки с поддержкой App Clips и виджетов. Форма стала более «мягкой». |
В iOS 14 Apple впервые разрешила разработчикам использовать альтернативные формы иконок для виджетов (например, круглые или квадратные). Однако основной Squircle остаётся обязательным для приложений в App Store.
Почему в iOS 7 иконки стали «плоскими»?
Переход к плоскому дизайну был часть стратегии Apple по унификации интерфейсов на всех устройствах (iPhone, iPad, Mac). Джони Айв считал, что скевоморфизм отвлекает от контента, а плоские иконки делают взаимодействие более «честным». Кстати, первые прототипы iOS 7 имели иконки с радиусом скругления 30 px, но тесты показали, что 22 px выглядят сбалансированнее на экранах Retina.
Технические требования Apple к иконкам приложений
Если вы разработчик, то знаете: Apple предъявляет жёсткие требования к иконкам. Основные правила из Human Interface Guidelines:
- 📱 Размеры: от
20×20 px(для Spotlight) до1024×1024 px(для App Store). Обязательны версии для1x,2xи3x(Retina). - 🎨 Форма: должна точно повторять шаблон Squircle из Xcode. Самостоятельное скругление углов не допускается.
- 🖼️ Прозрачность: фон иконки должен быть непрозрачным (кроме App Clips). «Подушка» внутри иконки — обязательна.
- 🚫 Запреты: нельзя использовать скриншоты интерфейса, текст (кроме логотипа), фотографии реальных объектов.
Для проверки соответствия формы Apple предоставляет .sketch-шаблоны и инструмент Icon Composer в Xcode. Если иконка не проходит валидацию, приложение не опубликуют в App Store.
☑️ Проверка иконки перед отправкой в App Store
Одно из малоизвестных требований: иконка должна выглядеть гармонично на чёрном и белом фоне. Это связано с тем, что в iOS используется тёмный и светлый режим интерфейса. Например, иконка Apple Music имеет градиент, который адаптируется под тему системы.
Сравнение с иконками Android: почему формы разные
В отличие от iOS, где форма иконок жёстко стандартизирована, Android позволяет разработчикам использовать любые формы — от кругов до произвольных многоугольников. Однако с 2019 года Google рекомендует придерживаться адаптивных иконок (Adaptive Icons), которые автоматически обрезаются под форму системы (круг, скруглённый прямоугольник, квадрат).
Основные различия:
| Параметр | iOS (Squircle) | Android (Adaptive Icons) |
|---|---|---|
| Форма | Фиксированная (суперэллипс) | Зависит от производителя (круг, скруглённый прямоугольник и др.) |
| Размеры | Строго регламентированы (до 1024×1024) | Гибкие (основной размер 108×108 dp, но обрезается до 72×72 dp) |
| Прозрачность | Запрещена (кроме App Clips) | Разрешена (фон может быть прозрачным) |
| Адаптивность | Нет (одна форма для всех устройств) | Да (форма меняется в зависимости от лаунчера) |
Интересно, что некоторые производители Android-устройств (например, Samsung или Xiaomi) модифицируют форму иконок под свой фирменный стиль. Так, в оболочке One UI иконки имеют более острые углы, чем в стоковом Android.
Как создать иконку в форме Squircle: инструменты и лайфхаки
Если вы не дизайнер, но хотите сделать иконку для своего приложения, вот пошаговая инструкция:
- Скачайте официальный шаблон из Apple Developer Resources (файл
AppIcon.appiconset). - Используйте векторные редакторы:
- 🖌️ Figma/Sketch: есть плагины для автоматического применения формы Squircle (например,
iOS App Icon Generator). - 🎨 Adobe Illustrator: инструмент
Rounded Rectangleс радиусом28–30 px(для иконки 1024×1024).
- 🖌️ Figma/Sketch: есть плагины для автоматического применения формы Squircle (например,
10% от ширины.3x (например, 180×180 px для версии 60×60).Для быстрого результата можно воспользоваться онлайн-генераторами, например: AppIcon или MakeAppIcon. Они автоматически обрежут ваше изображение под Squircle и сгенерируют все нужные размеры.
Один из самых распространённых ошибок новичков — игнорирование «безопасной зоны»** (safe area). Это область внутри иконки, где контент не будет обрезан при скруглении. В шаблонах Apple она отмечена зелёным контуром. Например, если ваш логотип касается краёв, после применения Squircle он может оказаться срезанным.
Скрытые детали: что вы не знали о форме иконок iOS
Мало кто обращает внимание, но у Squircle есть несколько скрытых особенностей:
- 🔍 Несимметричная кривизна: верхние и нижние углы иконок в iOS 14+ имеют чуть больший радиус скругления, чем боковые. Это заметно только при увеличении.
- 🎨 Динамический цвет: в тёмном режиме иконки автоматически подстраиваются под цветовую палитру системы (например, иконка Notes становится менее насыщенной).
- 📱 Адаптивные углы: на iPad радиус скругления иконок больше, чем на iPhone (до
32 pxпротив28 px). - 🔒 Защита от копирования: Apple патентовала форму Squircle в 2012 году (патент US8086966B2), что теоретически позволяет запретить её использование в других ОС.
Ещё один любопытный факт: в iOS 13 Apple экспериментировала с «живыми иконками»** (dynamic icons), которые могли менять цвет в зависимости от времени суток. Например, иконка Weather отображала текущую погоду. Однако функцию убрали из-за жалоб пользователей на отвлекающий эффект.
Почему иконки в App Store иногда выглядят иначе?
При просмотре приложений в App Store иконки автоматически обрабатываются серверами Apple: к ним добавляется тень и легкий градиент для 3D-эффекта. Это не влияет на саму иконку в системе, но может создавать иллюзию «другой формы» на скриншотах.
Частые ошибки при работе с иконками iOS
Даже опытные разработчики иногда допускают ошибки, которые ведут к отказу в публикации приложения. Вот самые распространённые:
⚠️ Внимание: Если ваша иконка содержит текст (например, название приложения), её отклонят. Исключение — логотипы брендов, где текст является частью фирменного стиля (например, Facebook или Twitter).
- ❌ Неправильный радиус скругления: использование стандартного
border-radiusв CSS/Figma вместо точного Squircle. - ❌ Прозрачный фон: иконка должна быть на непрозрачном фоне, даже если он белый.
- ❌ Несоответствие размеров: забывают экспортировать версии для
1x(устаревшие устройства) или3x(новые iPhone). - ❌ Слишком сложный дизайн: иконка должна быть узнаваемой даже в размере
20×20 px(для Spotlight).
Ещё одна типичная проблема — цветовые артефакты при экспорте. Например, если вы сохраняете иконку в JPEG вместо PNG, вокруг скруглённых краёв могут появиться белые пиксели. Всегда используйте PNG-32 с поддержкой альфа-канала (даже если прозрачность не нужна).
Если ваше приложение отклонили из-за иконки, в письме от Apple будет указана конкретная причина (например, "Icon does not meet the required shape"). В этом случае исправьте ошибку и загрузите новую версию через App Store Connect.
FAQ: Ответы на частые вопросы
Можно ли использовать круглые иконки в iOS?
Официально — нет. Apple требует форму Squircle для основных иконок приложений. Однако круглые иконки разрешены для App Clips (мини-приложений) и виджетов на главном экране (начиная с iOS 14).
Почему моя иконка выглядит размытой на iPhone?
Скорее всего, вы загрузили версию с недостаточным разрешением. Например, для iPhone 15 с экраном 3x нужна иконка 180×180 px, а не 120×120 px. Всегда проверяйте, что экспортировали версии для всех масштабов (1x, 2x, 3x).
Можно ли анимировать иконку приложения?
Нет, статичные иконки — требование Apple. Однако вы можете использовать Dynamic Island (на iPhone 14 Pro+) или виджеты для отображения динамической информации (например, таймер в иконке Clock).
Где взять точный шаблон Squircle для дизайна?
Официальный шаблон входит в пакет Xcode (путь: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/). Также его можно скачать с сайта Apple Design Resources.
Почему у некоторых иконок в App Store есть тень, а у моей нет?
Тень добавляется автоматически при отображении в App Store, но не влияет на саму иконку в системе. Если ваша иконка выглядит плоско, проверьте, что она имеет достаточный контраст и глубину (например, с помощью градиентов или теней внутри иконки).