Что значит «вариативный»? Объясняем простыми словами
2026-02-21 01:09 Diff
https://skillbox.ru/media/design/variable-prostymi-slovami/

#статьи

  • 13 апр 2023
  • 0

Что значит «вариативный»? Объясняем простыми словами

Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: «И как это понимать?»

Иллюстрация: Оля Ежак для Skillbox Media

Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.

Термин «вариативный» встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?

Простыми словами объясняют, что такое «вариативный», эксперт в шрифтовом дизайне Родион Илюхин и эксперт в разработке Зуфар Сунагатов.

Дизайнер интерфейсов днём, шрифтовой дизайнер вечером и по выходным. Убеждён, что шрифт — ДНК проекта.

Вариативность — это способность объекта к изменениям. В дизайне вариативность встречается не только в шрифтах, но и в айдентике, но айдентику чаще называют динамической.

Динамический логотипДинамическая айдентика для финансовой платформы от Pentagram
Источник

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

  • он позволяет пользователю получить любой промежуточный результат между этими начертаниями;
  • весит намного меньше, чем шрифтовое семейство из нескольких статичных начертаний;
  • позволяет интерактив в вебе. Внешний вид текста можно привязать к чему угодно — ховеру, скорости ветра за окном, уровню таяния льдов в Арктике.
Совместный проект студии Dinamo и агентства Collins для Симфонического оркестра Сан-Франциско. Онлайн-редактор позволяет составить типографическую композицию по пресету или на основе звуков из микрофона в реальном времени
Изображение: Collins

Для того, чтобы шрифт стал вариативным, необходимы два разных начертания, называемых мастерами, между которыми будет осуществляться интерполяция.

Чтобы интерполяция производилась правильно, оба контура должны содержать одинаковое количество опорных точек и манипуляторов.

Пример двух мастеров шрифта LPM Scurille в редакторе Glyphs
Изображение: из личного архива Родиона Илюхина

Интерполяция (от лат. interpolis — разглаженный, преобразованный) — нахождение неизвестных промежуточных значений внутри заданного набора. Скорее всего, вы знакомы с этим термином, если хоть раз анимировали что-либо. Ключевые точки, или кейфреймы, в анимации — это то же самое, что и мастера. Между ними тоже производится интерполяция.

Несмотря на то что вариативные шрифты появились относительно недавно, концепцию «много начертаний — один файл» ещё в 1991 году представила компания Adobe под названием Multiple Master. Но концепция так и не стала востребованной из-за сложности работы: пользователю предлагалось настроить необходимое начертание в отдельной программе Adobe Type Manager, выгрузить статичный файл и установить его в систему.

Adobe Type Manager для Mac
Изображение: Adobe

В 1997 году Adobe и Microsoft представили формат OpenType с расширенным знаковым составом — их количество выросло с 256 до 65 000. Это позволило одному шрифтовому файлу содержать множество альтернативных глифов: минускульные цифры, капители, дроби, росчерки, символы верхнего и нижнего индекса, заглавные буквы, контекстуальные и стилистические альтернативы, а также полный набор лигатур.

OpenType features в Figma и пример части фич шрифта Apoc Revelations Regular
Изображение: Родион Илюхин / Matthieu Salvaggio / Tomorrow Type / Blaze Type

Спустя 19 лет, в 2016 году, на шрифтовой конференции AtypI была представлена новая версия формата — OpenType Font Variables, которой мы сейчас и пользуемся. По сути, это и был тот же самый Multiple Master, только встроенный в редакторы и браузеры, без необходимости генерировать выбранное начертание. В 2021 году добавили поддержку цвета в шрифтах.

Буквально на днях представили спецификацию AVAR2, которая добавляет очень важные фичи:

  • Ограничение дизайн-пространства шрифта, чтобы исключить не задуманные дизайнером шрифта результаты интерполяции.
The Developing Univers (1965) — спесимен шрифта Univers Адриана Фрутигера, наглядно иллюстрирующий ограничение дизайн-пространства. Отсутствующие ячейки — это исключённые автором начертания
Изображение: American Type Founders / Letterform Archive
  • Сокращение количества мастеров — это облегчает создание развитых семейств со множеством начертаний.
  • Критичное сокращение размеров шрифта (около 80%).
  • Нелинейную интерполяцию.
Higher Order Interpolation (HOI) — интерполяция не по прямой, а по кривой Безье
Изображение: UnderwareПроект студии Dumbar для железных дорог Нидерландов
Изображение: Studio DumbarГлавный экран сайта киностудии Telescope films. Вариативный шрифт — центральная часть айдентики, и он обыгрывает название студии
Изображение: Gabriel Lefebvre / Rachel Lecompte / Emile Lord Ayotte / BehanceПроект студии Lopez Design для платформы AND Academy. Главный визуальный ход с типографикой обыгрывает рост студента
Изображение: Lopez DesignКонтраст ширины, толщины и наклона — характерная черта стиля дизайнера Kris Andrew
Изображение: Kris Andrew Small
  • Variable Fonts — каталог всех существующих вариативных шрифтов.
  • TypeTrials — инструмент проверки вариативных шрифтов.
  • vartype beta — песочница для проверки и анимации.

Ведущий бэкенд-разработчик проекта Lloyd’s of London.

Ведёт телеграм-канал для айтишников, проводит менторинг-сессии со всеми желающими на ADPList, пишет айтишные статьи.

Вариативность — это прекрасно.

В общем смысле слова «вариативный», «вариативность» подразумевают наличие нескольких или многих вариантов чего-либо — различного поведения или разных результатов при выполнении определённых действий.

Изображение: Public Domain

В разработке вариативными могут быть множество вещей.

Например, в некоторых языках программирования встречается концепция вариативных аргументов. Эта фича позволяет сделать код более гибким и удобным в работе: благодаря вариативным аргументам можно вызывать метод с переменным числом аргументов без явного создания массива.

В Python, например, можно использовать символ звёздочки *, чтобы определить аргумент как вариативный. В Java и C# для этого используется оператор троеточия ….

Для практики давайте представим ситуацию. Вы сидите с друзьями в ресторане, и у вас есть такая традиция: раз в месяц кто-то из вашей компании оплачивает весь чек. Но вот незадача: как честно определить того, кто платит на этот раз? Тянуть соломинку? Слишком старомодно!

Мы напишем программу, функцию chooseLuckyOne (*names), на языке Python*,* которая принимает на вход произвольное количество имён друзей на встрече, а возвращает произвольное имя того, кто и оплатит весь чек.

Изображение: Зуфар Сунагатов

Так, в прошлом месяце вы собрались втроём.

Изображение: Зуфар Сунагатов

А в этом месяце вас уже четверо.

Изображение: Зуфар Сунагатов

И так вышло, что оба раза выпала Оля ?

Кадр: «Настоящие домохозяйки Беверли-Хиллз» / @smudge_lord

Прости, Оль, это всё ради примера ?

Усвоили? Отлично!

Давайте теперь разберём пример вариативности посложнее.

Представьте, что вам нужно разработать веб-сайт, причём вы хотите, чтобы он работал и выглядел одинаково во всех браузерах. То есть он должен быть адаптирован ко всем вариантам веб-браузеров Safari, Google Chrome, Mozilla Firefox, Internet Explorer. В каждом есть уникальные особенности, и это может привести к тому, что некоторые элементы веб-страниц будут отображаться по-разному.

Кадр: фильм «Властелин колец»

Чтобы обеспечить правильное отображение элементов веб-сайта во всех этих браузерах, вы можете применить CSS-стили, которые поддерживаются всеми популярными браузерами. Это будет гарантировать, что веб-страницы будут выглядеть одинаково везде.

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

Пример с браузерами был довольно простым?

Давайте победим финального босса ?

Рассмотрим, насколько могут быть вариативными, а точнее вариантными, типы данных в языках программирования.

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

Кстати, а вы любите фрукты? Надеюсь, что да, так как дальше они помогут нам разобраться с вариантностью.

Рассмотрим следующую иерархию типов:

Изображение: pch.vector / jcomp / Freepik

Здесь Fruit (Фрукт) является базовым типом данных, а Apple (Яблоко) и Orange (Апельсин) наследуются от него.

В коде на языке Java эта иерархия будет выглядеть именно так:

Изображение: Зуфар Сунагатов

На основе этой иерархии типов данных рассмотрим три типа вариантности: ковариантность, контравариантность и инвариантность.

Ковариантность — это свойство типов данных, которое сохраняет иерархию наследования исходных типов в производных типах в том же порядке.

Так, если тип данных Apple (Яблоко) и Orange (Апельсин) наследуются от типа данных Fruit (Фрукт), тогда благодаря свойству ковариантности коллекция с типом данных Apple и коллекция с типом данных Orange будут потомками коллекции с типом данных Fruit. То есть, например, «список из пяти яблок или апельсинов» — это частный случай «списка из пяти фруктов».

В коде это будет выглядеть так:

Изображение: Зуфар Сунагатов

В таком случае говорят, что тип (в данном случае обобщённый интерфейс) Collесtion<T> ковариантен своему параметру-типу T.

Некоторые преимущества ковариантности:

  • Позволяет использовать объекты производных типов данных вместо объектов базовых типов данных, что упрощает работу с более абстрактными типами данных.
  • Позволяет использовать коллекции (списки, массивы и так далее) с элементами производных типов данных вместо базовых типов данных, что делает код более компактным и понятным.
  • Позволяет передавать аргументы производных типов данных без необходимости явного преобразования типов для функций, ожидающих аргументы базовых типов данных.

Контравариантность — это противоположное ковариантности свойство типов данных, которое обращает иерархию наследования исходных типов данных на противоположную в производных типах, если производный тип ведёт себя как общий.

Так, если типы данных Apple (Яблоко) и Orange (Апельсин) наследуются от типа данных Fruit (Фрукт), тогда благодаря свойству контравариантности мы можем добавлять обьекты типа данных Apple (Яблоко) и Orange (Апельсин) в коллекцию с типом данных Fruit (Фрукт). Таким образом, мы можем использовать коллекцию с более общим типом данных вместо коллекции с более специфичным типом данных.

В коде это будет выглядеть так:

Изображение: Зуфар Сунагатов

Некоторые преимущества контравариантности:

  • Позволяет использовать объекты базовых типов данных вместо объектов производных типов данных, что упрощает работу с более конкретными типами данных.
  • Позволяет использовать коллекции (стеки, очереди и так далее) с элементами базовых типов данных вместо производных типов данных, что делает код более компактным и понятным.
  • Позволяет передавать аргументы базовых типов данных без необходимости явного преобразования типов для функций, ожидающих аргументы производных типов данных.

Инвариантность — это случай, когда у типов данных отсутствуют свойства как ковариативности, так и контравариативности.

Так, несмотря на то что тип данных Apple (Яблоко) и Orange (Апельсин) наследуются от типа данных Fruit (Фрукт), коллекция с типом данных Apple и коллекция с типом данных Orange не будут подтипом коллекции с типом данных Fruit.

В коде это будет выглядеть так:

Изображение: Зуфар Сунагатов

Некоторые преимущества инвариантности:

  • Гарантирует строгую типизацию, где объекты могут быть использованы только с объектами того же точного типа, без допущения преобразования типов или замены на производные или базовые типы данных.
  • Улучшает ясность и понятность кода, так как не допускает неявных преобразований и требует явного указания точного типа данных, что может помочь предотвратить путаницу и ошибки.
Изображение: Public Domain

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

Удачи вам в изучении мира айти и разработки в частности ?

Попробуйте бесплатно 4 топовые профессии в дизайне
Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→