Дизайн-система — это не каталог кнопок, а язык: с грамматикой, риторикой и культурной историей. Лекция разбирает атомарный дизайн, платформенные паттерны iOS и Android, строит мост от компонента до бренд-голоса — и через Хайдеггера объясняет разницу между Furcht (страх с адресом, то есть брендинг с целью) и Angst (безосновательный, то есть нигредо-дизайн).
На прошлом занятии мы были сочиняли и музицировали: ритм, пауза, свинг, поток. Мы научились слышать интерфейс как временну́ю конструкцию. Но у любой музыки есть инструмент — им сегодня и займёмся. Точнее, целым оркестром: дизайн-системой, платформенными паттернами и визуальным языком, на котором ваш сервис говорит с человеком.
Язык, а не каталог
Откройте Apple Human Interface Guidelines или Material Design 3. На первый взгляд — это справочник: кнопки, поля, таб-бары, навигация, иконки. Кажется, что достаточно скачать UI-Kit, собрать экраны из готовых деталей — и дело сделано.
Но это иллюзия. Примерно такая же, как если бы вы решили, что для написания романа достаточно орфографического словаря.
Дизайн-система — это не каталог компонентов, а язык. У него есть грамматика (правила сочетания), словарь (компоненты и паттерны), риторика (способы убеждения и навигации), культурная история (откуда эти формы взялись и почему выглядят именно так) и, наконец, диалект — то, как именно ваш сервис говорит на этом языке, отличаясь от других, но оставаясь понятным.
Изучить этот язык — значит понять не только его словарь, но и грамматику, историю и возможности поэзии.
Атомы, молекулы и бесконечная вложенность
В 2013 году Брэд Фрост предложил фреймворк Atomic Design — способ мыслить компоненты интерфейса по аналогии с химией:
● Атомы — неделимые элементы: кнопка, иконка, поле ввода, лейбл, цвет, шрифт.
● Молекулы — простые комбинации атомов: поле поиска (лейбл + инпут + кнопка), карточка товара (изображение + заголовок + цена).
● Организмы — сложные структуры из молекул: хедер, каталог товаров, лента уведомлений.
● Шаблоны — скелеты страниц: расположение организмов, структура без контента.
● Страницы — конкретные экземпляры шаблонов с реальным контентом.
Модель красивая. Она работает, но с ней есть проблема.
Atomic Design предполагает, что атомы — «неделимы». Что кнопка — это финальный элемент, дальше разбирать некуда. Но попробуйте разобрать кнопку: у неё есть скругление углов, тень (или её отсутствие), шрифт лейбла, цвет фона, цвет текста, высота, внутренний отступ, состояние при нажатии, анимация перехода, тактильный отклик (haptic feedback). Каждый из этих параметров — тоже объект. У шрифта есть начертание, кернинг, семейство, культурная история. У цвета — температура, насыщенность, ассоциативный шлейф.
Кнопка — не атом, а скорее — вселенная.
А теперь поднимемся выше по иерерхии вложенности: страница — часть экрана, экран — часть приложения, приложение — часть экосистемы Apple или Google, экосистема — часть цифровой культуры. Где заканчивается ваша дизайн-система? Нигде. Перед нами «объекты, завёрнутые в объекты, завёрнутые в объекты» — без конечного основания и без верхней границы.
Это значит, что когда вы работаете с дизайн-системой, вы имеете дело не с конструктором, а с живой, бесконечно сложной экосистемой вложенных объектов. Каждый уровень — автономен. Кнопка не «подчиняется» навбару. Цвет не «служит» кнопке. Они сосуществуют — и каждый несёт собственную реальность, которая не исчерпывается тем, что вы о нём знаете. Мы вернёмся к этой мысли в линзах.
Интерактив 1. Археология вашего телефона
Формат: индивидуально, 8 минут.
Задание: откройте любое приложение на вашем телефоне (не то, которое вы проектируете) и проведите «археологические раскопки»:
Уровень 1. Поверхность. Что вы видите? Назовите 5 компонентов на экране (кнопка, карточка, навбар…).
Уровень 2. Слой. Выберите один компонент. Разложите его на «атомы» — сколько параметров вы можете насчитать? (Цвет, шрифт, скругление, тень, отступ, анимация, состояния…)
Уровень 3. Глубина. Выберите один параметр. Откуда он? Почему именно этот цвет? Этот радиус скругления? Есть ли у него культурная история? (Подсказка: да, есть всегда.)
Уровень 4. Контекст. Теперь поднимитесь вверх: как этот компонент связан с платформой? Он стандартный (платформенный) или кастомный? Почему?
Формат ответа: запишите цепочку от «культуры» до «пикселя» — от самого верхнего контекста до самого мелкого параметра. Минимум 6 звеньев.
👁 Для исследовательского трека: задокументируйте момент, когда ваша «раскопка» наткнулась на что-то необъяснимое — параметр, который не имеет очевидной причины, но присутствует. Это ваш первый «изъятый объект» — вещь, чья внутренняя реальность скрыта от вас.
Культурология интерфейса: от скевоморфизма к жидкому стеклу
Прежде чем открывать гайдлайны, стоит понять, откуда взялись формы, которые мы в них найдём. У интерфейса — как у архитектуры — есть культурная история. И эта история циклична.
Цифровой премодерн: скевоморфизм
Скевоморфизм (греч. σκεῦος — «сосуд», μορφή — «форма») — приём, при котором цифровой элемент имитирует физический объект. Калькулятор в iOS 5 выглядел как калькулятор на столе. Блокнот — как кожаный блокнот с прошивкой. Bookshelf — как деревянная полка.
Зачем? Джони Айв объяснял: «Вы достаёте телефон, нажимаете на иконку Калькулятор — и телефон исчез. В вашей руке самый обычный калькулятор. Вы уже знаете, как им пользоваться». Скевоморфизм создавал защитную оболочку для цифровых абстракций — делал незнакомое знакомым.
В культурной логике это цифровой премодерн — imitatio Dei, воспроизведение «божественного» (что в данном случае означает — физического, вещественного, привычного) мира в новом материале. Как Chrysler Le Baron 1986 года с накладками «под дерево» — ностальгия по фургонам 1930-х.
Chrysler Le Baron Town & Country Station Wagon 1986 года
Любопытный нюанс: Владислав Головач связывает расцвет скевоморфизма не только с культурой, но и с технологическим детерминизмом. В середине 1990-х появились CD-ROM — 650 мегабайт, и интерфейсы «немедленно стали пышными: текстурированные окнами, каменные, льняные, градиентные». А в 2002-м MacOS X принесла реалистичные пиктограммы — «компьютеры стали настолько мощными, что такой интерфейс уже не потреблял существенных ресурсов процессора». Форма определяется не только культурой, но и вычислительной мощностью.
Mac OS X 10.0
Проблема: скевоморфизм — это «здание-утка» по Вентури: здание в форме утки, где продаются приманки для уток. Корзина на рабочем столе, которая выглядит как корзина. Форма = функция = метафора. Это, действительно элегантно, пока метафора работает. Но когда мы начинаем делать вещи, у которых нет физического аналога (ленту, сториз, свайп), это работать перестаёт.
Мартин Маурер. «Большая утка» — ферроцементное здание в форме утки, США, Фландрия, штат Нью-Йорк, Лонг-Айленд, 1931
Цифровой модерн: плоский дизайн
В 2013 году Джони Айв выпустил iOS 7 — и произвёл революцию. Кожа, дерево, войлок — всё исчезло. Вместо этого — чистые цвета, тонкие линии, минимум декора.
Борис Гройс точно описал эту логику (говоря о Лоосе, но применимо к flat UI): «Модернистский дизайн стремится к „апокалипсису сегодня“ — к апокалипсису, который снимет с вещей их покровы, очистит их от декора и даст нам увидеть их такими, каковы они есть на самом деле». Плоский дизайн — это цифровой модерн: орнамент — преступление, прозрачность — добродетель, «меньше — больше».
В терминах Вентури — переход от «утки» к «декорированному сараю»: простое укрытие (контейнер) со знаками (текст, иконки, цвет). Форма больше не изображает функцию — она просто ей не мешает.
Жилой комплекс «Прютт-Айгоу», Сент-Луис, штат Миссури, США
Но у модернизма есть тёмная сторона. Вспомните Pruitt-Igoe: жилой комплекс в Сент-Луисе, построенный по всем модернистским канонам — «солнце, пространство и зелень», «пуристский стиль, стерильная чистота, больничные метафоры», — ставший символом социальной катастрофы и взорванный в 1972 году. Дженкс: модернисты переоценили способность человека меняться в результате усилий дизайнера.
И вот данные: исследование МГУ (Бурмистров, Злоказова, Измалкова, Леонова, 2014) показало, что поиск плоских пиктограмм выполняется почти вдвое медленнее, чем реалистичных, при значительно большей когнитивной нагрузке. Обработка объектов на страницах в flat-стиле занимает больше времени и сопровождается ростом числа ошибок. Человечество, как оказалось, не вполне готово к flat UI — так же, как жители Pruitt-Igoe не были готовы к «машине для жилья».
Чистый модернизм игнорирует человека — его привычки, эмоции, культурную память. Чистый flat UI делает то же: обнуляет процессуальность, телесность, аффект. Все приложения начинают выглядеть одинаково. Если всё — «декорированный сарай», то мы живём в архитектуре складских ангаров.
Возврат материальности: глассморфизм и Liquid Glass
Цикл повторяется. После аскезы flat UI начинает возвращаться материальность — но уже не наивная (имитация физического мира), а осознанная.
Неоморфизм (2019–2020) — мягкие тени, вдавленные и выпуклые формы. Тактильность без буквальности.
Глассморфизм (2020–2024) — полупрозрачные панели с размытием фона. Стекло как метафора: видно, что за элементом что-то есть, но доступ — частичный.
И наконец — iOS 26 (Liquid Glass), анонсированный на WWDC 2025. Крупнейшее визуальное обновление со времён iOS 7. Что произошло:
● Новый материал Liquid Glass — полупрозрачные элементы, которые отражают и преломляют то, что за ними. Не просто размытие — реальное преломление света в реальном времени.
● Динамический таб-бар, который меняет форму в зависимости от контекста — плавающий, жидкий, адаптивный.
● Стеклянные контейнеры вместо непрозрачных карточек — контент «дышит» сквозь интерфейс.
● Обновление всех стандартных приложений: Почта, Календарь, Карты, Музыка — все переехали на Liquid Glass.
Почему это важно культурологически? Liquid Glass кажется возвратом к скевоморфизму, но всё несколько сложнее и интереснее. Жидкое стекло — это новый тип материальности: цифровая, но тактильная; прозрачная, но с глубиной; минималистичная, но не плоская. Если скевоморфизм — это премодерн, а flat — модерн, то Liquid Glass — это цифровой постмодерн: ироничное возвращение материальности, которое знает о собственной условности.
Дженкс выделял признаки постмодернистской архитектуры: множественное кодирование (здание говорит с разными аудиториями), метафоричность и ирония, историцизм, партиципаторность. Проверим Liquid Glass:
● Множественное кодирование? Да: для новичка — красиво и понятно; для опытного — слои, жесты, скрытые аффордансы.
● Историцизм? Да: стекло цитирует скевоморфную глубину, но иронически — не имитируя физику, а играя с ней.
● Партиципаторность? Да: интерфейс адаптируется к контенту пользователя, отражая и преломляя его обои, его фотографии.
Или, если угодно обратиться к классификации Вентури, перед нами «здание-достопримечательность» — диковинка, бог знает какое по счёту чудо света.
Интерактив 2. Стилистический хронотоп
Формат: в парах, 10 минут.
Задание: вы — культурологи интерфейса. Выберите одно из ваших любимых приложений и определите его «стилистический хронотоп» — место во времени интерфейсной культуры.
Шаг 1. К какому «стилю» оно ближе: скевоморфизм, flat, неоморфизм, глассморфизм? Или это гибрид?
Шаг 2. Найдите в нём элемент-«утку» (форма = функция) и элемент-«сарай» (контейнер + знак). Они оба присутствуют? Как сосуществуют?
Шаг 3. Спрогнозируйте: как это приложение могло бы выглядеть в эстетике Liquid Glass? Что изменилось бы? А что потерялось бы?
👁 Для исследовательского трека: найдите в интерфейсе приложения «стилистический сбой» — момент, где одна стилевая логика прорывается сквозь другую (например, скевоморфная иконка в flat-интерфейсе, или наоборот). Это культурный шов — запишите его.
Платформа как грамматика
Вернёмся к языковой метафоре. Если дизайн-система — язык, то платформа (iOS, Android) — это грамматика. Не рекомендация, а структура: набор правил, нарушение которых делает «речь» непонятной.
iOS: ясность, уважение к контенту, глубина
Human Interface Guidelines определяют три столпа iOS:
Ясность (Clarity). Текст читается при любом размере. Иконки чёткие. Негативное пространство, цвет и типографика подчёркивают содержание. Не интерфейс украшает контент — контент определяет интерфейс.
Дифференцированность (Deference). Интерфейс никогда не конкурирует с контентом. Прозрачность и размытость «намекают на большее». Минимум окантовки, градиентов, теней — лёгкость и воздушность.
Глубина (Depth). Визуальные слои, реалистичное движение — иерархия и навигация. С приходом Liquid Glass глубина становится буквальной: элементы преломляют то, что за ними, создавая физически ощутимую пространственность.
Но за тремя визуальными столпами стоят ещё два поведенческих принципа, которые формируют всю грамматику iOS:
Метафоры. Люди быстрее учатся, когда виртуальные объекты передают знакомый опыт. Они сдвигают экран, чтобы открыть контент под ним. Перетаскивают и смахивают. Переключают переключатели, двигают ползунки, перелистывают страницы. iOS — система прямого манипулирования: вы не «командуете» интерфейсом, а трогаете его.
Пользовательский контроль. В iOS всё контролируют люди, а не приложение. Приложение может подсказать или предупредить, но брать на себя решения — ошибка. Лучшие приложения находят баланс между свободой и защитой от нежелательных последствий.
**Ключевые правила HIG, которые стоит знать:
● Навигация: Tab Bar (2–5 вкладок), Navigation Bar (назад, заголовок, действие), модальные экраны для фокусных задач. Каждая вкладка запоминает своё состояние.
● Типографика: системный San Francisco (9 начертаний, 4 ширины), Dynamic Type. Второй нативный шрифт — антиква New York. Иерархия строится через начертание и цвет, а не через размер — это отличает iOS от большинства других систем.
● Цвет: системные цвета адаптируются к светлой/тёмной теме, акцентный цвет приложения — один, максимум два. В тёмной теме фоны сдвигаются в тёмную сторону, а не инвертируются.
● Жесты: свайп назад, pull to refresh, long press — платформенные конвенции, нарушать которые дорого.
● Safe Area: зоны, которые нельзя занимать контентом (Dynamic Island, индикатор Home).
● Зона касания: всё интерактивное — минимум 44×44 pt. Это не рекомендация, а закон.
Material Design 3: материал, экспрессия, адаптивность
Google мыслит интерфейс иначе. Material Design основан на метафоре цифрового материала — «бумаги» с необычными свойствами: она бесконечно растягивается, меняет форму, склеивается с другой бумагой, отбрасывает тень. Но — важный нюанс — этот материал не может вести себя как газ или жидкость, не может сворачиваться в трубочку. Ограничения намеренно заимствованы из физического мира: интерфейс-метафора работает, только если у метафоры есть границы. (Заметьте: Liquid Glass от Apple нарушает именно это правило — стекло течёт.)
Material Design 3 (Material You) добавляет динамическую персонализацию: система автоматически генерирует цветовую палитру из обоев пользователя, адаптируя все элементы. Интерфейс буквально становится «своим».
Различия двух платформ:
Когда следовать платформе, а когда — отклоняться
Вот простое правило: следуйте платформе в навигации — отклоняйтесь в содержании.
Пользователь ожидает, что Tab Bar будет внизу, что свайп влево вернёт назад, что модальный экран закроется свайпом вниз. Это грамматика — и если вы её нарушаете, вас не понимают.
Но внутри этой грамматики у вас есть свобода: ваша типографика, ваша цветовая система, ваши иконки, ваша анимация, ваш тон. Это риторика — и здесь начинается бренд.
Интерактив 3. Аудит платформенности
Формат: в группах по 3–4 человека, 12 минут.
Задание: откройте прототип вашего приложения (или wireframe, или даже описание экранов). Проведите аудит платформенности.
Для каждого ключевого экрана заполните карточку:
Правило: каждое «нет» должно иметь причину. «Потому что красиво» — не причина. «Потому что стандартный компонент не решает задачу X» — причина.
👁 Для исследовательского трека: найдите в вашем проекте одно место, где вы хотели бы нарушить платформенную конвенцию, но не можете сформулировать зачем. Это зона «интуиции дизайнера» — и это интересно. Запишите: что именно хочется нарушить, какое ощущение стоит за этим желанием, и что мешает его обосновать.
Цифровой брендинг внутри платформы
Брендинг в мобильном сервисе — это не отдельная вселенная. Это вопрос о том, как сервис выглядит, звучит и запоминается внутри платформенной нормы. Вы не строите свой дом — вы обживаете комнату в чужом доме. И задача — сделать эту комнату узнаваемо своей, не ломая стены.
Пять измерений цифрового бренда
1. Типографика. Системный шрифт или кастомный? San Francisco безопасен, но невидим. Кастомный шрифт сразу создаёт характер — но обязан работать в Dynamic Type, быть разборчивым на маленьких экранах, не конфликтовать с платформой. Золотое правило: кастомный шрифт — для заголовков и акцентов, системный — для основного текста.
2. Цвет. Один акцентный цвет, который работает и в светлой, и в тёмной теме. Не «красивый цвет», а цвет-подпись: узнаваемый в любом контексте. Spotify = зелёный. Telegram = голубой. Если ваш цвет не запоминается после трёх дней использования — у вас нет цвета.
3. Иконография. Свой стиль иконок или платформенный? SF Symbols дают консистентность, но одинаковость. Кастомные иконки — характер, но дополнительная работа и риск несовместимости. Компромисс: кастомные иконки для уникальных функций, системные — для стандартных.
4. Движение. Анимации, переходы, микровзаимодействия — это голос приложения. Быстрые и чёткие = профессиональный, деловой. Мягкие и пружинистые = дружелюбный, молодой. Намеренно медленные = премиальный, вдумчивый. Движение — самый недооценённый инструмент брендинга.
5. Микрокопирайтинг. Как приложение говорит с вами текстом? «Ошибка 404» vs «Кажется, мы заблудились» vs «Здесь ничего нет — и это нормально». Тон — это бренд. Обращение на «ты» или на «вы»? Эмодзи или нет? Технические термины или метафоры? Каждое слово — решение.
Важно: все пять измерений должны говорить об одном и том же. Если типографика кричит «минимализм», а иконки — «весёлый детский сад», у бренда нет голоса. Он бормочет.
Но вот вопрос, который редко звучит вслух: а в чём именно согласован ваш голос? Консистентный бренд — это система, заранее решившая, что пользователь должен почувствовать. Типографика, движение, тон — всё настроено на предсказуемый аффективный ответ. Это честнее, чем маскоты ради маскотов, — но онтологически та же логика: эмоция запланирована заранее. Не маскот производит её, а бренд-платформа. Механизм изощрённее, цель — та же.
⚫️ Минутка нигредо-дизайна: страх и ужас
Хайдеггер различал Furcht — страх перед конкретным объектом, который можно устранить, после чего страх рассеивается, — и Angst: тревогу без предмета, обнажающую фундаментальную необоснованность самого бытия. Нечего убить, некуда бежать. Брендовый голос работает в режиме Furcht: у него есть объект — логотип, анимация, тон микрокопирайтинга, — он дозируем и управляем, выключается при закрытии приложения. Нигредо-дизайн рискует выйти на территорию Angst: переживания без адреса и без заранее согласованного ответа. Плутчик перечисляет восемь базовых эмоций — и среди них ужас, горе, отвращение. Индустриальный «эмоциональный дизайн» молчаливо вычёркивает тёмный спектр как нежелательный. Но бренд, умеющий говорить только весело и тепло, — не полноголосый. Он аффективная оранжерея: живое внутри, но стекло вокруг.
👁 Для исследовательского трека: спросите себя — ваш брендовый голос знает, что такое тревога? Неловкость? Недоумение? Если ваш бренд умеет только улыбаться — это маска, а не характер.
Интерактив 4. Отпечаток бренда
Формат: индивидуально, 10 минут.
Задание: заполните Brand Fingerprint — карточку бренда вашего мобильного сервиса.
Тест: покажите карточку соседу. Может ли сосед, глядя только на неё, угадать, о каком типе сервиса идёт речь?
👁 Для исследовательского трека: допишите шестое измерение — звук. Если бы ваш сервис издавал один звук (при запуске, при успешном действии, при ошибке) — какой? Опишите его словами. Это может показаться странным, но после лекции о ритме вы уже знаете: звук — это тоже проектирование времени.
Три линзы, которые меняют оптику дизайн-системы
Линза 1. Бесконечная мереология: каждый компонент — вселенная
Грэм Харман предлагает мыслить реальность как бесконечную вложенность объектов — «объекты, завёрнутые в объекты, завёрнутые в объекты». Каждый объект на любом уровне — автономен: он не сводится ни к своим частям, ни к целому, частью которого является. Это называется бесконечная мереология.
Что это значит для дизайн-системы?
Atomic Design говорит: кнопка — атом, неделимый элемент. Харман возражает: кнопка — реальный объект, у которого есть скрытая внутренняя жизнь, недоступная ни дизайнеру, ни пользователю. Её скругление, её тактильный отклик, её тень — это не «свойства кнопки», а другие объекты, каждый со своей изъятой реальностью.
В книге «Нигредо» я рассказываю, что, когда мой iPod разобрали при мне, я увидел кусок ярко-голубого поролона, защищавшего жёсткий диск, — и испытал онтологический шок. Хайдеггеровский момент: инструмент перестаёт быть «подручным» и становится «наличным» — грудой металла, пластика и поролона. Дизайн-система скрывает эту изнанку. Но она есть.
И одновременно: кнопка не исчерпывается своей ролью в навбаре. Навбар не исчерпывается ролью на экране. Экран не исчерпывается ролью в приложении. Каждый уровень автономен — и никакая «система» не может полностью контролировать то, что происходит внутри её собственных компонентов.
Практический вывод:
● Не упрощайте. Компонент — не «просто кнопка». Каждый раз, когда вы решаете, какой у неё радиус, вы принимаете решение с бесконечным количеством последствий.
● Уважайте автономию уровней. Хорошая дизайн-система не «подчиняет» атомы молекулам. Она создаёт условия для их сосуществования — как анарх-акторная композиция, где каждый элемент ведёт свою «молчаливую игру», о которой мы можем не подозревать.
● Помните об изъятости. Даже самая детальная документация не исчерпывает компонент. Всегда есть нечто, что вы не предусмотрели — и это не баг, а онтологическое свойство любого объекта.
Линза 2. Интра-акция: UI и UX не существуют отдельно
Карен Барад предлагает заменить интер-акцию (взаимодействие между существующими сущностями) на интра-акцию — процесс, в котором сами сущности возникают из отношений. До интра-акции нет ни «аппарата», ни «объекта» — есть только поле потенциальностей. Только агентный разрез создаёт различие.
Что это значит для дизайн-системы?
Привычная модель: сначала — UX (логика, сценарии, информационная архитектура), потом — UI (визуальное оформление). Два слоя. Сначала «что», потом «как». Но Барад говорит: нет никакого «до». UI не «оформляет» UX. Они со-возникают — строго в момент контакта, обретая идентичность только в процессе взаимной настройки.
Скругление кнопки — это не «визуальное решение». Это агентный разрез, который одновременно конституирует:
● элемент интерфейса (UI), ● ожидание отклика у пользователя (UX), ● зону касания для пальца (аффорданс), ● культурную ассоциацию (мягкий = дружелюбный).
Изменение одного параметра меняет всю конфигурацию. Это не «дизайн, влияющий на опыт». Это один процесс, который наблюдатель разрезает на «дизайн» и «опыт» — но разрез не нейтрален.
Практический вывод:
● Перестаньте думать «сначала UX, потом UI». Начинайте с прототипа — с конкретного материального взаимодействия. Форма и функция рождаются вместе.
● Каждый компонент — это агентный разрез. Добавляя элемент в макет, вы не «размещаете вещь». Вы конституируете различие: вот здесь — кликабельное, а вот здесь — нет. Вот здесь — важное, а вот здесь — фоновое. Разрез создаёт обе стороны одновременно.
● Глитч как разрез. Когда компонент ломается — зависает, не отрисовывается, не откликается — это момент, когда привычный разрез (UI/UX) перестаёт работать. Пользователь видит не «интерфейс» и не «опыт», а нечто третье: саму инфраструктуру взаимодействия, обычно скрытую. Как вскрытый iPod — травматический, но честный.
Линза 3. Ритурнель: дизайн-система как территориальная песня
У Делёза и Гваттари есть концепт ритурнели (ritournelle) — повторяющегося мотива, который создаёт территорию. Ребёнок напевает в темноте — и тьма отступает: песня размечает безопасное пространство. Птица поёт на заре — и звуком маркирует свою территорию. Ритурнель — это не просто повторение. Это повторение, которое захватывает пространство и делает его обитаемым.
Ритм — вот быстрый ответ среды хаосу. <…> Нет ничего менее ритмичного, чем военный марш. — Делёз, Гваттари
Дизайн-система — это ритурнель.
Когда вы открываете приложение и видите знакомый таб-бар, знакомый синий акцент, знакомую анимацию перехода — это не «консистентность». Это территориальная песня: набор повторяющихся мотивов, которые сообщают вам — «вы здесь, вы в безопасности, вы знаете правила». Система токенов, типографических стилей, цветовой палитры — это нотная запись ритурнели.
Но — и вот ключевой поворот — ритурнель у Делёза никогда не повторяется точно. «Кажется, получилось нечто знакомое, но что-то сбилось, соскользнуло, мутировало». Каждое повторение вводит микроразличие — и именно это различие делает территорию живой, а не мёртвой. Вспомните свинг из прошлой лекции: ритурнель — это свинг, возведённый в принцип.
И ещё: ритурнель работает в двух направлениях — территориализация (песня создаёт границы) и детерриториализация (песня увлекает за пределы территории, открывает линию ускользания). Оса приближается к орхидее, орхидея «становится» осой — они обмениваются территориями, и возникает новая реальность — ризома. Хорошая дизайн-система делает то же: создаёт узнаваемую территорию и одновременно оставляет лазейки для побега — места, где нестандартное решение не ломает систему, а расширяет её.
Практический вывод:
● Дизайн-система — не тюрьма. Это песня, а не забор. Если ваши токены, компоненты и правила не позволяют ни единого отклонения — система мертва. Она стала военным маршем.
● Повторение должно производить различие. Одна и та же карточка товара в каталоге, в корзине, в истории заказов — это три исполнения одной ритурнели. Если они абсолютно идентичны, система не «дышит». Контекстуальные вариации — это не баг консистентности, а её высшая форма.
● Проектируйте линии ускользания. В системе токенов предусмотрите «дикую» зону — пространство, где правила ослабляются. Это может быть экран онбординга, пасхальное яйцо, режим «лаборатории», анимация при достижении цели. Территория без выхода — не территория, а клетка.
Интерактив 5. Карточка компонентного языка
Формат: индивидуально, 12 минут. Это чекпойнт — он собирает всё, что вы наработали сегодня.
Задание: создайте Component Language Card — карточку визуального языка вашего сервиса.
Часть 1. Территория (ритурнель). Перечислите 3–5 повторяющихся мотивов вашего сервиса — элементов, которые «поют» пользователю: «ты здесь, ты в безопасности». Это могут быть компоненты, цвета, типографические приёмы, жесты, звуки.
Часть 2. Грамматика (платформа). Для каждого ключевого экрана: какие элементы платформенные (iOS/Android), какие кастомные? Есть ли опасные отклонения?
Часть 3. Голос (бренд). Заполните одно предложение: «Мой сервис говорит как ___ (персонаж/тип голоса), потому что ___».
Часть 4. Линия ускользания. Укажите одно место в вашем сервисе, где дизайн-система намеренно нарушается. Где ваша территориальная песня допускает импровизацию? Если такого места нет — придумайте его.
👁 Для исследовательского трека: опишите один компонент вашего сервиса через три оптики линз:
● Как бесконечную вложенность (что внутри него? что снаружи?), ● Как агентный разрез (что он конституирует? какие различия создаёт?), ● Как ритурнель (что он повторяет? какое микроразличие вводит?).
Что вы должны вынести из этой лекции
Не список компонентов и не шпаргалку по HIG. А:
● Понимание того, что дизайн-система — язык, а не каталог. У неё есть грамматика (платформа), словарь (компоненты), риторика (бренд) и поэзия (отклонения).
● Культурологический взгляд на интерфейс: скевоморфизм → flat → Liquid Glass — это не «прогресс», а цикл, и понимание цикла позволяет принимать осознанные стилевые решения.
● Умение проводить аудит платформенности: где следовать правилам, где отклоняться, и почему каждое отклонение должно быть обосновано.
● Хотя бы набросок Brand Fingerprint — пять измерений голоса вашего сервиса.
● Ощущение того, что каждый компонент — не деталь конструктора, а автономный объект с собственной скрытой реальностью, и дизайн-система — не контроль, а территориальная песня, создающая пространство для жизни.
Домашнее задание
Визуальный язык сервиса: компоненты, платформа, бренд.
Часть 1. Компонентная карта (Figma/FigJam)
Соберите визуальную библиотеку ключевых компонентов вашего сервиса. Минимум 10 элементов. Для каждого:
● Компонент ● Уровень (атом / молекула / организм) ● Платформенный / кастомный ● Состояния (default, hover, pressed, disabled…)
Часть 2. Три стилевых решения
Опишите три осознанных решения в визуальном языке вашего сервиса:
● Одно платформенное соответствие — где и почему вы следуете HIG / Material Design буквально.
● Одно обоснованное отклонение — где и почему вы нарушаете гайдлайн. Что это даёт?
● Один брендинговый акцент — элемент, который делает ваш сервис узнаваемым (шрифт, цвет, анимация, микрокопирайтинг).
Часть 3. Brand Fingerprint (финальная версия)
Доработайте карточку из интерактива 4. Добавьте:
● Скриншот или мокап, демонстрирующий ваш акцентный цвет, типографику и иконки в действии. ● Один экран в двух вариантах: светлая и тёмная тема.
👁 Для исследовательского трека (дополнительно):
Напишите микро-эссе (300–500 слов): выберите один компонент вашего сервиса и опишите его как онтологический объект. Используйте хотя бы одну из трёх линз:
● Мереология: что внутри компонента? Что снаружи? Где заканчивается его «внутреннее»? ● Интра-акция: как компонент конституирует различие между «интерфейсом» и «опытом»? Что изменится, если его убрать? ● Ритурнель: как компонент участвует в территориальной песне вашего сервиса? Какое микроразличие он вводит при повторении?
Формат сдачи: Figma/FigJam (компонентная карта, Brand Fingerprint) + текст (стилевые решения, микро-эссе).
Итоговая формула
Дизайн-система — это не набор деталей, а язык, на котором ваш сервис говорит с человеком внутри чужого дома.
У этого языка есть грамматика — платформенные правила, нарушение которых делает речь непонятной. У него есть словарь — компоненты и паттерны, каждый из которых хранит бесконечную вложенность скрытых реальностей. У него есть голос — типографика, цвет, движение, тон, которые делают этот сервис этим, а не любым другим. И у него есть песня — ритурнель повторяющихся мотивов, которая создаёт территорию, обитаемую и живую.
Дизайнер мобильного сервиса — не сборщик из каталога, а лингвист и поэт. Он знает грамматику настолько хорошо, чтобы позволить себе метафору. Он уважает компоненты настолько глубоко, чтобы видеть в каждом из них — вселенную. И он помнит: самый консистентный интерфейс — не тот, где всё одинаково, а тот, где каждое повторение вводит живое, дышащее различие.
На следующем занятии мы возьмём всё, что накопили за этот модуль — гипотезу, исследование, сценарий, аффордансы, ритм, визуальный язык — и выйдем с этим на публику. Будем презентовать и защищать проект.
