Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>13 апр 2023</li>

3 <li>0</li>

4 </ul><h2>Что значит "вариативный"? Объясняем простыми словами</h2>

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

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

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

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

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

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

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

12 Динамический логотипДинамическая айдентика для финансовой платформы от Pentagram<a>Источник</a>Вариативный шрифт - это шрифтовой файл, содержащий несколько начертаний. Перед набором статичных шрифтов у вариативного есть несколько преимуществ:

13 <ul><li>он позволяет пользователю получить любой промежуточный результат между этими начертаниями;</li>

14 <li>весит намного меньше, чем шрифтовое семейство из нескольких статичных начертаний;</li>

15 <li>позволяет интерактив в вебе. Внешний вид текста можно привязать к чему угодно - ховеру, скорости ветра за окном, уровню таяния льдов в Арктике.</li>

16 </ul>Совместный проект студии Dinamo и агентства Collins для Симфонического оркестра Сан-Франциско. Онлайн-редактор позволяет составить типографическую композицию по пресету или на основе звуков из микрофона в реальном времениИзображение:<a>Collins</a>Для того, чтобы шрифт стал вариативным, необходимы два разных начертания, называемыхмастерами, между которыми будет осуществлятьсяинтерполяция.

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

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

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

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

21 OpenType features в Figma и пример части фич шрифта Apoc Revelations RegularИзображение: Родион Илюхин / Matthieu Salvaggio / Tomorrow Type /<a>Blaze Type</a>Спустя 19 лет, в 2016 году, на шрифтовой конференции AtypI была представлена новая версия формата -OpenType Font Variables, которой мы сейчас и пользуемся. По сути, это и был тот же самый Multiple Master, только встроенный в редакторы и браузеры, без необходимости генерировать выбранное начертание. В 2021 году добавили поддержку цвета в шрифтах.

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

23 <ul><li>Ограничение дизайн-пространства шрифта, чтобы исключить не задуманные дизайнером шрифта результаты интерполяции.</li>

24 </ul>The Developing Univers (1965) - спесимен шрифта Univers Адриана Фрутигера, наглядно иллюстрирующий ограничение дизайн-пространства. Отсутствующие ячейки - это исключённые автором начертанияИзображение: American Type Founders /<a>Letterform Archive</a><ul><li>Сокращение количества мастеров - это облегчает создание развитых семейств со множеством начертаний.</li>

25 <li>Критичное сокращение размеров шрифта (около 80%).</li>

26 <li>Нелинейную интерполяцию.</li>

27 </ul>Higher Order Interpolation (HOI) - интерполяция не по прямой, а по кривой БезьеИзображение:<a>Underware</a>Проект студии Dumbar для железных дорог НидерландовИзображение:<a>Studio Dumbar</a>Главный экран сайта киностудии Telescope films. Вариативный шрифт - центральная часть<a>айдентики</a>, и он обыгрывает название студииИзображение: Gabriel Lefebvre / Rachel Lecompte / Emile Lord Ayotte /<a>Behance</a>Проект студии Lopez Design для платформы AND Academy. Главный визуальный ход с типографикой обыгрывает рост студентаИзображение:<a>Lopez Design</a>Контраст ширины, толщины и наклона - характерная черта стиля дизайнера Kris AndrewИзображение:<a>Kris Andrew Small</a><ul><li><a>Variable Fonts</a> - каталог всех существующих вариативных шрифтов.</li>

28 <li><a>TypeTrials</a> - инструмент проверки вариативных шрифтов.</li>

29 <li><a>vartype beta</a> - песочница для проверки и анимации.</li>

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

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

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

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

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

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

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

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

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

39 Изображение: Зуфар СунагатовТак, в прошлом месяце вы собрались втроём.

40 Изображение: Зуфар СунагатовА в этом месяце вас уже четверо.

41 Изображение: Зуфар СунагатовИ так вышло, что оба раза выпала Оля ?

42 Кадр: "Настоящие домохозяйки Беверли-Хиллз" / @smudge_lordПрости, Оль, это всё ради примера ?

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

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

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

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

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

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

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

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

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

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

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

54 Изображение: pch.vector / jcomp / FreepikЗдесь Fruit (Фрукт) является базовым типом данных, а Apple (Яблоко) и Orange (Апельсин) наследуются от него.

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

56 Изображение: Зуфар СунагатовНа основе этой иерархии типов данных рассмотрим три типа вариантности: ковариантность, контравариантность и инвариантность.

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

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

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

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

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

62 <ul><li>Позволяет использовать объекты производных типов данных вместо объектов базовых типов данных, что упрощает работу с более абстрактными типами данных.</li>

63 <li>Позволяет использовать коллекции (списки, массивы и так далее) с элементами производных типов данных вместо базовых типов данных, что делает код более компактным и понятным.</li>

64 <li>Позволяет передавать аргументы производных типов данных без необходимости явного преобразования типов для функций, ожидающих аргументы базовых типов данных.</li>

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

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

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

68 Изображение: Зуфар СунагатовНекоторые преимущества контравариантности:

69 <ul><li>Позволяет использовать объекты базовых типов данных вместо объектов производных типов данных, что упрощает работу с более конкретными типами данных.</li>

70 <li>Позволяет использовать коллекции (стеки, очереди и так далее) с элементами базовых типов данных вместо производных типов данных, что делает код более компактным и понятным.</li>

71 <li>Позволяет передавать аргументы базовых типов данных без необходимости явного преобразования типов для функций, ожидающих аргументы производных типов данных.</li>

72 </ul>Инвариантность - это случай, когда у типов данных отсутствуют свойства как ковариативности, так и контравариативности.

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

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

75 Изображение: Зуфар СунагатовНекоторые преимущества инвариантности:

76 <ul><li>Гарантирует строгую типизацию, где объекты могут быть использованы только с объектами того же точного типа, без допущения преобразования типов или замены на производные или базовые типы данных.</li>

77 <li>Улучшает ясность и понятность кода, так как не допускает неявных преобразований и требует явного указания точного типа данных, что может помочь предотвратить путаницу и ошибки.</li>

78 </ul>Изображение: Public DomainВариативность в разработке может быть, как ни странно, вариативной, местами сложной и довольно запутанной. Но это точно полезная особенность, которая даёт программисту больше возможностей делать работу хорошо, а плохо не делать. Главное - использовать её с умом!

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

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