Открыть сервис

SF Symbols

SF Symbols — это библиотека иконографических символов, разработанная компанией Apple Inc. для использования в операционных системах iOS, iPadOS, macOS, tvOS и watchOS. Представляет собой набор из более чем 6000 масштабируемых векторных значков, которые гармонично интегрируются с системным шрифтом San Francisco и поддерживают различные стили, веса и размеры. SF Symbols предназначены для унификации визуального оформления приложений и упрощения работы разработчиков, предоставляя готовые графические элементы, соответствующие дизайну интерфейсов Apple.

История

Библиотека SF Symbols была впервые представлена на Всемирной конференции разработчиков Apple (WWDC) в 2019 году. Первоначальная версия включала около 1500 символов. Основной целью создания было обеспечение единообразного отображения иконок на всех платформах Apple, а также устранение необходимости разработчикам создавать собственные значки с нуля. До появления SF Symbols разработчики часто использовали сторонние наборы иконок или рисовали их вручную, что приводило к несоответствию стилей и проблемам с масштабированием.

С каждым последующим обновлением операционных систем Apple расширяла библиотеку. В 2020 году с выходом iOS 14 и macOS Big Sur количество символов увеличилось до 2400, добавились новые категории, такие как «Здоровье», «Дом» и «Погода». В 2021 году, с релизом iOS 15, библиотека пополнилась ещё на 600 значков, включая символы для работы с камерой, мультимедиа и документами. К 2024 году, с выходом iOS 18, количество символов превысило 6000, а также были добавлены новые функциональные возможности, такие как поддержка переменных цветов и анимаций.

Классификация и типы символов

SF Symbols делятся на несколько категорий в зависимости от назначения и визуальных характеристик.

По тематике

Символы сгруппированы по тематическим разделам, которые соответствуют основным функциям операционных систем Apple. Основные категории включают:

  • Навигация и интерфейс — стрелки, кнопки, индикаторы (например, chevron.left, arrow.up.circle).
  • Мультимедиа — значки для аудио, видео, камеры (например, play.fill, camera, mic).
  • Коммуникации — символы для сообщений, телефона, почты (например, message, phone, envelope).
  • Утилиты и инструменты — значки для настроек, поиска, загрузки (например, gearshape, magnifyingglass, square.and.arrow.down).
  • Природа и погода — символы солнца, облаков, дождя (например, sun.max, cloud.rain).
  • Здоровье и фитнес — значки для медицинских приложений (например, heart, staroflife, figure.walk).
  • Транспорт — символы автомобилей, самолётов, велосипедов (например, car, airplane, bicycle).
  • Объекты и предметы — значки для мебели, одежды, еды (например, house, tshirt, fork.knife).

По стилю

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

  • Monochrome (монохромный) — символ отображается одним цветом, обычно чёрным или белым в зависимости от режима интерфейса.
  • Hierarchical (иерархический) — символ использует два или три оттенка одного цвета для выделения частей значка (например, контур и заливка).
  • Palette (палитра) — символ поддерживает до трёх произвольных цветов, которые разработчик может задать независимо для разных элементов.
  • Multicolor (многоцветный) — символ использует стандартные системные цвета (например, красный для сердца, зелёный для зелёного кружка).

По форме и наполнению

Внутри одной темы символы могут иметь разные варианты наполнения:

  • Без заливки (outline) — контурный значок, например heart.
  • С заливкой (fill) — закрашенный значок, например heart.fill.
  • С обводкой (circle, square, rectangle) — значок, помещённый в геометрическую фигуру, например heart.circle, heart.square.
  • С комбинированными модификаторами — например, heart.circle.fill (закрашенное сердце в круге).

Устройство и технические характеристики

SF Symbols основаны на векторной графике, что обеспечивает их масштабируемость без потери качества. Каждый символ представляет собой набор кривых Безье, описанных в формате SVG (Scalable Vector Graphics). Библиотека поставляется в виде файла SF Symbols.app для macOS, который позволяет разработчикам просматривать, копировать и экспортировать символы в различных форматах (PNG, PDF, SVG).

Масштабирование и веса

Символы поддерживают девять весов (от ultraLight до black) и три размера (small, medium, large). Это позволяет подстраивать толщину линий под контекст интерфейса. Например, для кнопок навигации может использоваться вес regular, а для заголовков — bold. Размеры символов измеряются в пунктах (pt) и соответствуют шкале от 13 до 30 pt, но могут быть масштабированы произвольно.

Переменные символы

Начиная с iOS 16, Apple внедрила поддержку переменных символов (variable symbols). Это значки, которые могут изменять свою форму или наполнение в зависимости от состояния. Например, символ wifi может отображать разное количество волн в зависимости от силы сигнала, а battery.0 — показывать уровень заряда. Переменные символы управляются через модификатор variableValue и позволяют создавать анимированные или динамические интерфейсы.

Поддержка локализации

SF Symbols включают символы, учитывающие культурные особенности. Например, для стран с левосторонним движением существуют зеркальные версии стрелок и указателей. Также библиотека содержит значки для различных письменностей, включая кириллицу, арабскую вязь и иероглифы.

Применение

SF Symbols широко используются в разработке приложений для платформ Apple. Основные области применения включают:

Разработка интерфейсов

Символы служат для обозначения кнопок, вкладок, пунктов меню и других элементов управления. Благодаря встроенной поддержке в Xcode (среда разработки Apple) и SwiftUI (фреймворк для построения интерфейсов), разработчики могут вставлять символы одной строкой кода, например: `` Image(systemName: "heart.fill") ``

Создание иконок приложений

Некоторые символы используются в качестве основы для иконок приложений. Например, значок staroflife часто применяется в медицинских приложениях, а leaf — в экологических. Apple рекомендует использовать SF Symbols для создания иконок, чтобы они соответствовали общему стилю операционной системы.

Анимация и интерактивность

Символы могут быть анимированы с помощью системных анимаций. Например, значок play.fill может плавно переходить в pause.fill при нажатии, а heart — заполняться цветом при добавлении в избранное. Переменные символы позволяют создавать анимации, зависящие от данных, например, изменение формы облака в зависимости от прогноза погоды.

Доступность

SF Symbols поддерживают функции доступности (accessibility). Каждый символ имеет встроенную текстовую метку (accessibility label), которая озвучивается VoiceOver для людей с нарушениями зрения. Разработчики могут переопределять эти метки, но Apple рекомендует использовать стандартные для обеспечения единообразия.

Примеры

Ниже приведены примеры популярных символов из библиотеки SF Symbols с их системными именами:

Системное имяВизуальное описаниеКатегория
heart.fillЗакрашенное сердцеЗдоровье
gearshape.fillЗакрашенная шестерёнкаНастройки
magnifyingglassУвеличительное стеклоПоиск
cloud.sun.fillСолнце за облакомПогода
message.fillЗакрашенный речевой пузырьКоммуникации
arrow.up.circle.fillСтрелка вверх в кругеНавигация
wifiЗначок Wi-Fi с волнамиСеть

Критика и ограничения

Несмотря на широкое распространение, SF Symbols имеют ряд недостатков, отмечаемых разработчиками и дизайнерами:

  • Ограниченная кастомизация — символы можно только масштабировать и менять цвет, но нельзя изменять их форму. Для уникальных значков разработчикам приходится создавать собственные векторные изображения.
  • Зависимость от платформы — библиотека доступна только для экосистемы Apple. Разработчики, создающие кроссплатформенные приложения (например, на Flutter или React Native), не могут использовать SF Symbols на Android или Windows, что требует дублирования иконок.
  • Сложность с переменными символамиработа с переменными символами требует дополнительного кода и понимания, что усложняет разработку для новичков.
  • Неполное покрытие тем — хотя библиотека постоянно расширяется, некоторые узкие темы (например, символы для специфических промышленных или научных областей) отсутствуют, что вынуждает разработчиков искать альтернативы.
  • Проблемы с локализацией — некоторые символы, такие как жесты или указатели, могут быть неправильно интерпретированы в разных культурах. Например, значок «ОК» (рука с пальцами) в некоторых странах считается оскорбительным.

Источники

  1. Документация Apple Developer: «SF Symbols» (Human Interface Guidelines).
  2. WWDC 2019: «Introducing SF Symbols» — видео сессии.
  3. WWDC 2021: «SF Symbols 3» — видео сессии.
  4. WWDC 2022: «What's new in SF Symbols 4» — видео сессии.
  5. Статья «SF Symbols: A Developer's Guide» на сайте Hacking with Swift (Paul Hudson).
  6. Официальный файл справки приложения SF Symbols (macOS).

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →