4.7. Дизайн-система, платформенные паттерны и визуальный язык сервиса

На прошлом занятии мы сочиняли и музицировали: ритм, пауза, свинг, поток. Мы научились слышать интерфейс как временну́ю конструкцию. Но у любой музыки есть инструмент — им сегодня и займёмся. Точнее, целым оркестром: дизайн-системой, платформенными паттернами и визуальным языком, на котором ваш сервис говорит с человеком.Мы только подошли к визуальному оформлению. До сих пор вы работали со сценариями, гипотезами, смыслами, контекстом, телесностью, ритмом взаимодействия. У большинства ещё нет отрисованных экранов — и это нормально. Сегодня мы не проверяем «красоту макета», потому что макета ещё почти нет. Сегодня мы делаем первый перевод: из сценария — в экран, из смысла — в компонент, из интонации сервиса — в цвет, шрифт, ритм и платформенную грамматику.Фокус занятия: за один раз невозможно сделать полноценную дизайн-систему, брендбук, прототип и презентацию. Поэтому мы работаем как хирурги с ограниченным временем: выбираем главный нерв проекта и аккуратно выводим его на поверхность. На занятии будет три рабочих действия: экран-узел, платформенный скелет, черновой отпечаток бренда. Всё остальное наращивается следующими итерациями.

Откройте Apple Human Interface Guidelines или Material Design 3. На первый взгляд — это справочник: кнопки, поля, таб-бары, навигация, иконки. Кажется, что достаточно скачать UI-Kit, собрать экраны из готовых деталей — и дело сделано.Но это иллюзия. Примерно такая же, как если бы вы решили, что для написания романа достаточно орфографического словаря.Дизайн-система оказывается языком — не каталогом компонентов. У него есть грамматика (правила сочетания), словарь (компоненты и паттерны), риторика (способы убеждения и навигации), культурная история (откуда эти формы взялись и почему выглядят именно так) и, наконец, диалект — то, как именно ваш сервис говорит на этом языке, отличаясь от других, но оставаясь понятным.

Изучить этот язык — значит понять не только его словарь, но и грамматику, историю и возможности поэзии.Для вашего текущего этапа это означает совсем практичную вещь: не «сначала нарисовать всё приложение», а сначала собрать минимальный визуальный язык, который выдержит первый экран и ключевой путь. Если первый экран разваливается — вся будущая дизайн-система будет красивой мумией в Figma, а не рабочим телом сервиса.

В 2013 году Брэд Фрост предложил фреймворк Atomic Design — способ мыслить компоненты интерфейса по аналогии с химией:● Атомы — неделимые элементы: кнопка, иконка, поле ввода, лейбл, цвет, шрифт.● Молекулы — простые комбинации атомов: поле поиска (лейбл + инпут + кнопка), карточка товара (изображение + заголовок + цена).● Организмы — сложные структуры из молекул: хедер, каталог товаров, лента уведомлений.● Шаблоны — скелеты страниц: расположение организмов, структура без контента.● Страницы — конкретные экземпляры шаблонов с реальным контентом.

Модель красивая — она работает; но с ней есть проблема.Atomic Design предполагает, что атомы — «неделимы». Что кнопка — это финальный элемент, дальше разбирать некуда. Но попробуйте разобрать кнопку: у неё есть скругление углов, тень (или её отсутствие), шрифт лейбла, цвет фона, цвет текста, высота, внутренний отступ, состояние при нажатии, анимация перехода, тактильный отклик (haptic feedback). Каждый из этих параметров — тоже объект. У шрифта есть начертание, кернинг, семейство, культурная история. У цвета — температура, насыщенность, ассоциативный шлейф.Кнопка скорее вселенная, чем атом.А теперь поднимемся выше по иерархии вложенности: страница — часть экрана, экран — часть приложения, приложение — часть экосистемы Apple или Google, экосистема — часть цифровой культуры. Где заканчивается ваша дизайн-система? Нигде. Перед нами «объекты, завёрнутые в объекты, завёрнутые в объекты» — без конечного основания и без верхней границы.

Это значит, что когда вы работаете с дизайн-системой, вы имеете дело не с конструктором, а с живой, бесконечно сложной экосистемой вложенных объектов. Каждый уровень — автономен. Кнопка не «подчиняется» навбару. Цвет не «служит» кнопке. Они сосуществуют — и каждый несёт собственную реальность, которая не исчерпывается тем, что вы о нём знаете. Мы вернёмся к этой мысли в линзах.

Формат: индивидуально, 12 минут. Работать можно в Figma, FigJam, на бумаге или в заметках. Красота не оценивается; оценивается точность перевода сценария в экранную форму.Задание: выберите один момент вашего ключевого сценария, где пользователь впервые получает смысл: не регистрация, не приветственный экран, а первое действие, после которого он понимает, зачем здесь находится. Это и есть экран-узел.Заполните короткую карточку:

После карточки сделайте очень грубый набросок экрана: 5–7 прямоугольников, не больше. Сейчас нам нужен не интерфейс как картинка, а интерфейс как распределение внимания: что главное, что вторично, куда попадает палец, где начинается действие.Тест: если вы не можете назвать одно главное действие на экране, значит сценарий ещё не готов к визуализации. Вернитесь на шаг назад и уточните событие, которое здесь должно случиться.👁 Для исследовательского трека: выберите не «главный экран», а ключевой момент изменения восприятия. Что пользователь должен заметить, понять или почувствовать иначе после взаимодействия? Нарисуйте не интерфейс вообще, а место, где возникает это новое различение.

Прежде чем открывать гайдлайны, стоит понять, откуда взялись формы, которые мы в них найдём. У интерфейса — как у архитектуры — есть культурная история. И эта история циклична.

Скевоморфизм (греч. σκεῦος — «сосуд», μορφή — «форма») — приём, при котором цифровой элемент имитирует физический объект. Калькулятор в iOS 5 выглядел как калькулятор на столе. Блокнот — как кожаный блокнот с прошивкой. Bookshelf — как деревянная полка.

Зачем? Джони Айв объяснял: «Вы достаёте телефон, нажимаете на иконку Калькулятор — и телефон исчез. В вашей руке самый обычный калькулятор. Вы уже знаете, как им пользоваться». Скевоморфизм создавал защитную оболочку для цифровых абстракций — делал незнакомое знакомым.В культурной логике это цифровой премодерн — imitatio Dei, воспроизведение «божественного» (что в данном случае означает — физического, вещественного, привычного) мира в новом материале. Как Chrysler Le Baron 1986 года с накладками «под дерево» — ностальгия по фургонам 1930-х.Любопытный нюанс: Владислав Головач связывает расцвет скевоморфизма не только с культурой, но и с технологическим детерминизмом. В середине 1990-х появились CD-ROM — 650 мегабайт, и интерфейсы «немедленно стали пышными: текстурированные окнами, каменные, льняные, градиентные». А в 2002-м MacOS X принесла реалистичные пиктограммы — «компьютеры стали настолько мощными, что такой интерфейс уже не потреблял существенных ресурсов процессора». Форма определяется не только культурой, но и вычислительной мощностью.Проблема: скевоморфизм — это «здание-утка» по Вентури. Здание в форме утки, где продаются приманки для уток. Корзина на рабочем столе, которая выглядит как корзина. Форма = функция = метафора. Элегантно, пока метафора работает. Но когда мы начинаем делать вещи, у которых нет физического аналога (ленту, сториз, свайп), утка перестаёт работать.

В 2013 году Джони Айв выпустил iOS 7 — и произвёл революцию. Кожа, дерево, войлок — всё исчезло. Вместо этого — чистые цвета, тонкие линии, размытые подложки, минимум декора.

Борис Гройс точно описал эту логику (говоря о Лоосе, но применимо к flat UI): «Модернистский дизайн стремится к „апокалипсису сегодня“ — к апокалипсису, который снимет с вещей их покровы, очистит их от декора и даст нам увидеть их такими, каковы они есть на самом деле». Плоский дизайн — это цифровой модерн: орнамент — преступление, прозрачность — добродетель, «меньше — больше».В терминах Вентури — переход от «утки» к «декорированному сараю»: простое укрытие (контейнер) со знаками (текст, иконки, цвет). Форма больше не изображает функцию — она просто ей не мешает.Но у модернизма есть тёмная сторона. Вспомните Pruitt-Igoe: жилой комплекс в Сент-Луисе, построенный по всем модернистским канонам — «солнце, пространство и зелень», «пуристский стиль, стерильная чистота, больничные метафоры», — ставший символом социальной катастрофы и взорванный в 1972 году. Дженкс: модернисты переоценили способность человека меняться в результате усилий дизайнера.И вот данные: исследование МГУ (Бурмистров, Злоказова, Измалкова, Леонова, 2014) показало, что поиск плоских пиктограмм выполняется почти вдвое медленнее, чем реалистичных, при значительно большей когнитивной нагрузке. Обработка объектов на страницах в flat-стиле занимает больше времени и сопровождается ростом числа ошибок. Человечество, как оказалось, не вполне готово к flat UI — так же, как жители Pruitt-Igoe не были готовы к «машине для жилья».Чистый модернизм игнорирует человека — его привычки, эмоции, культурную память. Чистый flat UI делает то же: обнуляет процессуальность, телесность, аффект. Все приложения начинают выглядеть одинаково. Если всё — «декорированный сарай», то мы живём в архитектуре складских ангаров.

Цикл повторяется. После аскезы 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: ● Множественное кодирование? Да: для новичка — красиво и понятно; для опытного — слои, жесты, скрытые аффордансы. ● Историцизм? Да: стекло цитирует скевоморфную глубину, но иронически — не имитируя физику, а играя с ней. ● Партиципаторность? Да: интерфейс адаптируется к контенту пользователя, отражая и преломляя его обои, его фотографии.Или, если угодно обратиться к классификации Вентури, «здание-достопримечательность», диковинка, бог знает какое по счёту чуто света.

Это не отдельное задание со сдачей, а быстрая оптика для насмотренности. Мы используем её как переход от истории интерфейсных стилей к вашим будущим решениям.Вопросы для обсуждения: выберите одно приложение из своей повседневности и определите его «стилистический хронотоп» — место во времени интерфейсной культуры.Шаг 1. К какому «стилю» оно ближе: скевоморфизм, flat, неоморфизм, глассморфизм? Или это гибрид?Шаг 2. Найдите в нём элемент-«утку» (форма = функция) и элемент-«сарай» (контейнер + знак). Они оба присутствуют? Как сосуществуют?Шаг 3. Спрогнозируйте: как это приложение могло бы выглядеть в эстетике Liquid Glass? Что изменилось бы? А что потерялось бы?👁 Для исследовательского трека: найдите в интерфейсе приложения «глитч стиля» — момент, где одна стилевая логика прорывается сквозь другую (например, скевоморфная иконка в flat-интерфейсе, или наоборот). Это культурный шов — запишите его.

Вернёмся к языковой метафоре. Если дизайн-система — язык, то платформа (iOS, Android) — это грамматика. Не рекомендация, а структура: набор правил, нарушение которых делает «речь» непонятной.

В прежней редакции Human Interface Guidelines язык iOS часто объяснялся через ясность, уважение к контенту и глубину. Эта схема полезна как исторический слой:Ясность (Clarity). Текст читается при любом размере. Иконки чёткие. Негативное пространство, цвет и типографика подчёркивают содержание. Не интерфейс украшает контент — контент определяет интерфейс.Дифференцированность (Deference). Интерфейс никогда не конкурирует с контентом. Прозрачность и размытость «намекают на большее». Минимум окантовки, градиентов, теней — лёгкость и воздушность.Глубина (Depth). Визуальные слои, реалистичное движение — иерархия и навигация. С приходом Liquid Glass глубина становится буквальной: элементы преломляют то, что за ними, создавая физически ощутимую пространственность.

Актуальная редакция HIG выдвигает на первый план иерархию, гармонию и консистентность: элементы управления должны отделяться от контента; форма интерфейса — согласовываться с аппаратной и системной средой; платформенные конвенции — сохранять предсказуемость при разных размерах и устройствах (Apple HIG). Это не отмена прежних принципов, а смена акцента после Liquid Glass.За визуальным языком стоят поведенческие принципы, которые формируют грамматику iOS:Метафоры. Люди быстрее учатся, когда виртуальные объекты передают знакомый опыт. Они сдвигают экран, чтобы открыть контент под ним. Перетаскивают и смахивают. Переключают переключатели, двигают ползунки, перелистывают страницы. iOS — система прямого манипулирования: вы не «командуете» интерфейсом, а трогаете его.Пользовательский контроль. В iOS всё контролируют люди, а не приложение. Приложение может подсказать или предупредить, но брать на себя решения — ошибка. Лучшие приложения находят баланс между свободой и защитой от нежелательных последствий.Ключевые правила HIG, которые стоит знать:● Навигация: используйте стандартные tab bar, navigation bar, sidebar и модальные паттерны там, где они соответствуют структуре задачи. Конкретный компонент зависит от устройства и ширины, но человек не должен заново изучать способ вернуться, закрыть слой или сменить раздел.● Типографика: системное семейство San Francisco, антиква New York, встроенные текстовые стили и Dynamic Type. Иерархия строится размером, начертанием, интервалами и цветом; пользовательское увеличение текста не должно разрушать действие (Apple: Typography).● Цвет: системные цвета адаптируются к светлой/тёмной теме, акцентный цвет приложения — один, максимум два. В тёмной теме фоны сдвигаются в тёмную сторону, а не инвертируются.● Жесты: свайп назад, pull to refresh, long press — платформенные конвенции, нарушать которые дорого.● Safe Area: зоны, которые нельзя занимать конте

● Зона касания: для кнопки и другого частого интерактивного элемента закладывайте область не меньше 44×44 pt и достаточный воздух вокруг. Видимая иконка может быть меньше, тап-зона — нет (Apple: Accessibility).● Liquid Glass: используйте как функциональный слой навигации и управления поверх контента, не размножая стеклянные поверхности внутри самого контента. Стандартные компоненты уже получают системное поведение; кастомное стекло требует сдержанности и проверки контраста (Apple: Materials).

Google мыслит интерфейс иначе. Material Design основан на метафоре цифрового материала — «бумаги» с необычными свойствами: она бесконечно растягивается, меняет форму, склеивается с другой бумагой, отбрасывает тень. Но — важный нюанс — этот материал не может вести себя как газ или жидкость, не может сворачиваться в трубочку. Ограничения намеренно заимствованы из физического мира: интерфейс-метафора работает, только если у метафоры есть границы. (Заметьте: Liquid Glass от Apple нарушает именно это правило — стекло течёт.)Material Design 3 (Material You) добавляет динамическую персонализацию: система автоматически генерирует цветовую палитру из обоев пользователя, адаптируя все элементы. Интерфейс буквально становится «своим».

Ключевое различие двух платформ:

Вот простое правило: следуйте платформе в навигации — отклоняйтесь в содержании.Пользователь ожидает, что Tab Bar будет внизу, что свайп влево вернёт назад, что модальный экран закроется свайпом вниз. Это грамматика — и если вы её нарушаете, вас не понимают.Но внутри этой грамматики у вас есть свобода: ваша типографика, ваша цветовая система, ваши иконки, ваша анимация, ваш тон. Это риторика — и здесь начинается бренд.

Сейчас вам не нужно проектировать одновременно iOS, Android, веб-версию, тёмную тему, смарт-часы и духовный интерфейс для холодильника. Выберите одну основную платформу. Лучше один честно собранный путь, чем четыре полуоформленные версии, дрожащие в Figma как плохо закреплённые декорации.Три сигнала опасного отклонения:1. Пользователь не может вернуться назад привычным жестом.
2. Пользователь не понимает, что элемент — кликабельный.
3. Приложение «выбивается» из переключателя задач — выглядит так, будто оно из другой ОС.Три сигнала здорового отклонения:1. Пользователь запоминает приложение с первого раза — у него есть характер.
2. Нестандартный элемент решает задачу лучше, чем стандартный.
3. Отклонение консистентно внутри самого приложения (свой «диалект», а не ошибка).

Формат: в парах или малых группах, 12 минут. Если экранов ещё нет — это ожидаемая ситуация, а не провал. Работаем с карточкой сценария из первого интерактива.Задание: соберите платформенный скелет для вашего экрана-узла. Не рисуйте весь продукт. Определите, какие платформенные решения удерживают пользователя от потери ориентации.Заполните карточку:

Правило: каждое отклонение должно иметь причину. «Потому что красиво» — не причина. «Потому что стандартный компонент не решает задачу X» — причина. Если причины нет, оставьте платформенное решение и не мучайте интерфейс.👁 Для исследовательского трека: найдите одно место, где нарушение платформенной конвенции не украшает продукт, а меняет способ восприятия. Что именно должно стать странным, медленным, тревожным, внимательным, непривычным? Исследовательский интерфейс имеет право на сбой нормы, но должен понимать, какую мысль этот сбой открывает.

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

1. Типографика. Системный шрифт или кастомный? San Francisco безопасен, но невидим. Кастомный шрифт сразу создаёт характер — но обязан работать в Dynamic Type, быть разборчивым на маленьких экранах, не конфликтовать с платформой. Золотое правило: кастомный шрифт — для заголовков и акцентов, системный — для основного текста.2. Цвет. Один акцентный цвет, который работает и в светлой, и в тёмной теме. Не «красивый цвет», а цвет-подпись: узнаваемый в любом контексте. Spotify = зелёный. Telegram = голубой. Если ваш цвет не запоминается после трёх дней использования — у вас нет цвета.3. Иконография. Свой стиль иконок или платформенный? SF Symbols дают консистентность, но одинаковость. Кастомные иконки — характер, но дополнительная работа и риск несовместимости. Компромисс: кастомные иконки для уникальных функций, системные — для стандартных.4. Движение. Анимации, переходы, микровзаимодействия — это голос приложения. Быстрые и чёткие = профессиональный, деловой. Мягкие и пружинистые = дружелюбный, молодой. Намеренно медленные = премиальный, вдумчивый. Движение — самый недооценённый инструмент брендинга.5. Микрокопирайтинг. Как приложение говорит с вами текстом? «Ошибка 404» vs «Кажется, мы заблудились» vs «Здесь ничего нет — и это нормально». Тон складывается в бренд: обращение на «ты» или на «вы», эмодзи или нет, технические термины или метафоры — каждое слово оказывается решением.

Важно: все пять измерений должны говорить об одном и том же. Если типографика кричит «минимализм», а иконки — «весёлый детский сад», у бренда нет голоса. Он бормочет.Но вот вопрос, который редко звучит вслух: а в чём именно согласован ваш голос? Консистентный бренд — это система, заранее решившая, что пользователь должен почувствовать. Типографика, движение, тон — всё настроено на предсказуемый аффективный ответ. Это честнее, чем маскоты ради маскотов, — но онтологически та же логика: эмоция запланирована заранее. Не маскот производит её, а бренд-платформа. Механизм изощрённее, цель — та же.

Хайдеггер различал Furcht — страх перед конкретным объектом, который можно устранить, после чего страх рассеивается, — и Angst: тревогу без предмета, обнажающую фундаментальную необоснованность самого бытия. Нечего убить, некуда бежать. Брендовый голос работает в режиме Furcht: у него есть объект — логотип, анимация, тон микрокопирайтинга, — он дозируем и управляем, выключается при закрытии приложения. Нигредо-дизайн рискует выйти на территорию Angst: переживания без адреса и без заранее согласованного ответа. Плутчик перечисляет восемь базовых эмоций — и среди них ужас, горе, отвращение. Индустриальный «эмоциональный дизайн» молчаливо вычёркивает тёмный спектр как нежелательный. Но бренд, умеющий говорить только весело и тепло, — не полноголосый. Он аффективная оранжерея: живое внутри, но стекло вокруг.👁 Для исследовательского трека: спросите себя — ваш брендовый голос знает, что такое тревога? Неловкость? Недоумение? Если ваш бренд умеет только улыбаться — это маска, а не характер.

Формат: индивидуально, 15 минут. Это третий и последний рабочий блок занятия. На выходе должна появиться не готовая айдентика, а первый отпечаток визуального языка, который можно проверить на 1–2 экранах.Задание: заполните Brand Fingerprint v0 — черновую карточку визуального языка вашего мобильного сервиса. Не пытайтесь сейчас «сделать бренд». Выберите несколько решений, которые задают направление и не противоречат сценарию.

Тест: покажите карточку соседу. Может ли сосед, глядя только на неё, угадать, какое действие, состояние или тип сервиса за ней стоит? Не название проекта, а характер взаимодействия.👁 Для исследовательского трека: допишите шестое измерение — звук / пауза / шум. Если бы ваш сервис издавал один звук при ключевом изменении восприятия — какой? Или, наоборот, где ему нужна тишина? После лекции о ритме вы уже знаете: звук — это тоже проектирование времени.

Мереология — формальная область, изучающая отношения частей и целого. Грэм Харман использует мереологические вопросы внутри объектно-ориентированной онтологии: объект не исчерпывается материалом, из которого собран, и не растворяется в системе, куда включён. Машина состоит из деталей и входит в транспортную сеть, однако ни разбор до винта, ни описание её функции не отменяют автономии машины как объекта. Формула бесконечной мереологии в названии линзы — наше рабочее усиление этой мысли, а не отдельный общепринятый закон Хармана с готовой UX-методикой.Что это значит для дизайн-системы?В методе Atomic Design Брэда Фроста «атом» означает минимальный интерфейсный строительный блок, а не метафизически неделимую частицу. Харман не спорил с Фростом; столкновение устраиваем мы. Кнопка оказывается объектом, который можно разложить на надпись, форму, обработчик события и тактильный отклик, а можно включить в навигацию, сценарий и платформенный контракт. Ни один масштаб не получает права объявить остальные иллюзией.

В книге «Нигредо» я рассказываю, что, когда мой iPod разобрали при мне, я увидел кусок ярко-голубого поролона, защищавшего жёсткий диск, — и испытал онтологический шок. Хайдеггеровский момент: инструмент перестаёт быть «подручным» и становится «наличным» — грудой металла, пластика и поролона. Дизайн-система скрывает эту изнанку. Но она есть.И одновременно: кнопка не исчерпывается своей ролью в навбаре. Навбар не исчерпывается ролью на экране. Экран не исчерпывается ролью в приложении. Каждый уровень автономен — и никакая «система» не может полностью контролировать то, что происходит внутри её собственных компонентов.Практический вывод:● Не упрощайте. Компонент — не «просто кнопка». Каждый раз, когда вы решаете, какой у неё радиус, вы принимаете решение с бесконечным количеством последствий.● Уважайте автономию уровней. Хорошая дизайн-система не «подчиняет» атомы молекулам. Она создаёт условия для их сосуществования — как анарх-акторная композиция, где каждый элемент ведёт свою «молчаливую игру», о которой мы можем не подозревать.● Помните об изъятости. Даже самая детальная документация не исчерпывает компонент. Всегда есть нечто, что вы не предусмотрели — и это не баг, а онтологическое свойство любого объекта.Вопрос к проекту: какой компонент выглядит простым лишь потому, что его состояния, содержание и телесный отклик пока спрятаны?Вмешательство: разверните один компонент в матрицу состояний — default, pressed, disabled, loading, error, длинный текст, крупный системный шрифт — и поправьте контракт там, где объект распался.

Карен Барад вводит интра-акцию в рамках агентного реализма, наиболее полно изложенного в книге «Meeting the Universe Halfway» (2007). Обычная «интеракция» предполагает заранее готовые независимые сущности, которые затем вступают в отношение. В интра-акции границы и свойства участников определяются внутри материально-дискурсивного явления; агентный разрез временно проводит различие между измеряющим аппаратом и объектом. Это онтологический и эпистемологический тезис, выросший из чтения квантовой физики Нильса Бора, поэтому перенос на UI требует осторожности.Что это значит для дизайн-системы?Привычная модель: сначала — UX (логика, сценарии, информационная архитектура), потом — UI (визуальное оформление). Два слоя. Сначала «что», потом «как». Но Барад говорит: нет никакого «до». UI не «оформляет» UX. Они со-возникают — строго в момент контакта, обретая идентичность только в процессе взаимной настройки.Скругление кнопки оказывается агентным разрезом — не просто «визуальным решением»; он одновременно конституирует: ● элемент интерфейса (UI), ● ожидание отклика у пользователя (UX), ● зону касания для пальца (аффорданс), ● культурную ассоциацию (мягкий = дружелюбный).Изменение одного параметра меняет всю конфигурацию — перед нами один процесс, который наблюдатель разрезает на «дизайн» и «опыт»; но разрез не нейтрален.Практический вывод:● Перестаньте думать «сначала UX, потом UI». Начинайте с прототипа — с конкретного материального взаимодействия. Форма и функция рождаются вместе.● Каждый компонент — это агентный разрез. Добавляя элемент в макет, вы не «размещаете вещь». Вы конституируете различие: вот здесь — кликабельное, а вот здесь — нет. Вот здесь — важное, а вот здесь — фоновое. Разрез создаёт обе стороны одновременно.● Глитч как разрез. Когда компонент ломается — зависает, не отрисовывается, не откликается — это момент, когда привычный разрез (UI/UX) перестаёт работать. Пользователь видит не «интерфейс» и не «опыт», а нечто третье: саму инфраструктуру взаимодействия, обычно скрытую. Как вскрытый iPod — травматический, но честный.

Вопрос к проекту: какой визуальный параметр меняет само поведение, хотя кажется «слоем оформления»?Вмешательство: соберите две микроверсии одного действия, меняя один параметр — форму цели, контраст, движение, плотность, — и проверьте, как сдвигается ожидание и способ действия.

Делёз и Гваттари разворачивают концепт ритурнели (ritournelle) в главе «1837 — О ритурнели» книги «Тысяча плато» (1980). Ребёнок напевает в темноте и создаёт хрупкий центр устойчивости; затем круг очерчивает территорию; наконец, линия выводит наружу, к импровизации и космосу. Птичья песня тоже территориальна, но ритурнель шире музыкального припева: это выразительный материал, который одновременно собирает место и открывает возможность его покинуть.

Дизайн-система живёт как ритурнель.Когда вы открываете приложение и видите знакомый таб-бар, знакомый синий акцент, знакомую анимацию перехода — это не «консистентность». Это территориальная песня: набор повторяющихся мотивов, которые сообщают вам — «вы здесь, вы в безопасности, вы знаете правила». Система токенов, типографических стилей, цветовой палитры — это нотная запись ритурнели.Ритурнель способна закостенеть и стать закрытым припевом, а способна варьироваться и открыть линию ускользания. Фраза «что-то сбилось, соскользнуло, мутировало» здесь передаёт нашу проектную интерпретацию, а не цитирует Делёза и Гваттари. Связь со свингом из прошлой лекции тоже учебный монтаж: знакомый мотив удерживает территорию, микроразличие не даёт ей превратиться в строевой плац.Ритурнель участвует в территориализации и детерриториализации: мотив создаёт границы, затем способен увлечь за их пределы. Пример орхидеи и осы у Делёза и Гваттари относится к становлению и ризоме, а не служит буквальным эпизодом главы о ритурнели; мы соединяем эти мотивы ради проектного вопроса. Хорошая дизайн-система создаёт узнаваемую территорию и оставляет санкционированные выходы, где нестандартное решение расширяет язык, не маскируя случайность под свободу.Практический вывод:● Дизайн-система — песня, а не тюрьма и не забор. Если ваши токены, компоненты и правила не позволяют ни единого отклонения — система мертва. Она стала военным маршем.● Повторение должно производить различие. Одна и та же карточка товара в каталоге, в корзине, в истории заказов — это три исполнения одной ритурнели. Если они абсолютно идентичны, система не «дышит». Контекстуальные вариации — это не баг консистентности, а её высшая форма.● Проектируйте линии ускользания. В системе токенов предусмотрите «дикую» зону — пространство, где правила ослабляются. Это может быть экран онбординга, пасхальное яйцо, режим «лаборатории», анимация при достижении цели. Территория без выхода — не территория, а клетка.Вопрос к проекту: какой повторяющийся мотив сообщает «вы всё ещё здесь», и где ему разрешено выйти из собственного такта?

Вмешательство: сформулируйте одно правило мотива как токен или компонентный контракт и одну санкционированную вариацию, которая расширяет систему, сохраняя узнаваемость.

Соберите короткий DESIGN.md: платформа, токены, компоненты, состояния, правила типографики, один экран-узел. Передайте его вместе с ключевыми экранами модели или кодовому инструменту и попросите найти дублирующиеся токены, пропущенные состояния, расхождения между правилами и макетом, сомнительные платформенные решения. Если инструмент умеет собирать интерфейс, пусть сгенерирует один тестовый экран строго по контракту — это проверка спецификации, а не конкурс красоты.Потом ищите обратное: где результат стал безличным, какая деталь уничтожила отпечаток бренда, что не выдерживает крупного текста, тёмной темы или длинного русского слова. Qwen, Kimi, DeepSeek, локальная модель, доступный кодовый агент или обычный скрипт проверки токенов подходят; агентская инфраструктура ускоряет сборку, но не входит в критерии оценки.Артефакт занятия: diff токенов; матрица компонентов и состояний; список платформенных отклонений; один отвергнутый универсальный стиль с объяснением, какой голос он стёр.

Это не четвёртый интерактив. В аудитории мы его отдельно не делаем, потому что три рабочих действия на одно занятие — уже предел нормальной человеческой переработки. Используйте эту карточку дома как проверку того, что ваш первый визуальный спринт не распался на случайные красивости.Задание для самопроверки: создайте Component Language Card — карточку визуального языка вашего сервиса. Она может быть одной страницей в FigJam или блоком рядом с первыми экранами в Figma.Часть 1. Территория (ритурнель). Перечислите 3–5 повторяющихся мотивов вашего сервиса — элементов, которые «поют» пользователю: «вы здесь, вы в безопасности». Это могут быть компоненты, цвета, типографические приёмы, жесты, звуки.Часть 2. Грамматика (платформа). Для 1–2 первых экранов: какие элементы платформенные (iOS/Android), какие кастомные? Есть ли опасные отклонения? Пока не нужно закрывать весь продукт.Часть 3. Голос (бренд). Заполните одно предложение: «Мой сервис говорит как ___ (персонаж/тип голоса), потому что ___».Часть 4. Линия ускользания. Укажите одно место в вашем сервисе, где дизайн-система может намеренно нарушаться. Не обязательно реализовывать это сейчас; достаточно понять, где у будущей системы появится право на импровизацию.👁 Для исследовательского трека: опишите один компонент вашего сервиса через одну из трёх оптик. Не надо героически делать всё сразу; лучше одна точная мысль, чем три философских муляжа.● Как бесконечную вложенность (что внутри него? что снаружи?), ● Как агентный разрез (что он конституирует? какие различия создаёт?), ● Как ритурнель (что он повторяет? какое микроразличие вводит?).

Вот что остаётся после — помимо списка компонентов и шпаргалки по HIG:● Понимание того, что дизайн-система — язык, а не каталог. На вашем текущем этапе это не энциклопедия всех компонентов, а первый договор между сценарием, платформой и визуальным голосом сервиса.● Культурологический взгляд на интерфейс: скевоморфизм → flat → Liquid Glass — перед нами цикл, а не линейный прогресс, и понимание цикла позволяет принимать осознанные стилевые решения.● Умение собирать платформенный скелет ещё до готовых экранов: выбрать платформу, навигацию, главный CTA, первое состояние и одно возможное отклонение.● Набросок Brand Fingerprint v0 — не финальный бренд, а первый отпечаток визуального языка, который можно проверить на одном экранном узле.● Ощущение того, что каждый компонент — не деталь конструктора, а автономный объект с собственной скрытой реальностью, и дизайн-система — не контроль, а территориальная песня, создающая пространство для жизни.

Визуальный спринт v0: первый экранный каркас сервиса.Домашнее задание запускает визуальный спринт, из которого уже можно вырастить прототип и финальную презентацию.Часть 1. Два ключевых экрана (Figma)Отрисуйте два экрана в low/mid fidelity:● Экран-узел — момент первого смысла из интерактива 1.● Соседний экран — то, что происходит до него или после него: пустое состояние, результат действия, ошибка, переход, экран выбора.Не нужно делать 15 экранов. Лучше два экрана, где видно мышление, чем десять одинаковых прямоугольников, которые ещё не знают, зачем родились.Часть 2. Минимальный визуальный словарьРядом с экранами соберите маленькую компонентную зону:

Часть 3. Короткое пояснение и план итерацийКоротко, по 2–4 предложения на пункт:● Платформенное соответствие — где и почему вы буквально следуете HIG / Material Design.● Отклонение или зона риска — где хочется нарушить правило, но нужно объяснить зачем. Если пока не готовы нарушать — так и напишите.● Брендинговый акцент — что делает сервис узнаваемым: цвет, шрифт, движение, тон, пустое состояние, способ обращения.В конце добавьте маленький календарь из четырёх шагов — как самоконтроль на оставшиеся итерации:

Часть 4. Аудит визуального контрактаПриложите diff токенов, матрицу состояний хотя бы одного компонента и список найденных расхождений. Покажите одно машинное решение, которое вы отвергли как безличное или платформенно неверное.👁 Для исследовательского трека (дополнительно):Напишите микро-эссе 200–300 слов: выберите один компонент или экран-узел и опишите его через одну линзу.● Мереология: что внутри компонента? Что снаружи? Где заканчивается его «внутреннее»? ● Интра-акция: как компонент создаёт различие между «интерфейсом» и «опытом»? Что изменится, если его убрать? ● Ритурнель: как компонент участвует в территориальной песне вашего сервиса? Какое микроразличие он вводит при повторении?Формат сдачи: Figma: 2 экрана + визуальный словарь v0 + Brand Fingerprint v0. Текст: три решения словами + план на месяц. Для исследовательского трека — микро-эссе отдельным блоком рядом с макетом или в Google Doc.

Дизайн-система — язык, на котором ваш сервис говорит с человеком внутри чужого дома.У этого языка есть грамматика — платформенные правила, нарушение которых делает речь непонятной. У него есть словарь — компоненты и паттерны, каждый из которых хранит бесконечную вложенность скрытых реальностей. У него есть голос — типографика, цвет, движение, тон, которые делают этот сервис этим, а не любым другим. И у него есть песня — ритурнель повторяющихся мотивов, которая создаёт территорию, обитаемую и живую.Но сейчас вам нужен не весь язык сразу, а первый произносимый фрагмент: два экрана, несколько компонентов, один акцент, одно платформенное решение, одно объяснённое отклонение. Так проект начинает говорить — сначала хрипло, неуверенно, с заиканием, но уже собственным голосом. Через месяц этот голос должен стать защитимой системой.Дизайнер мобильного сервиса — не сборщик из каталога, а лингвист и поэт. Он знает грамматику настолько хорошо, чтобы позволить себе метафору. Он уважает компоненты настолько глубоко, чтобы видеть в каждом из них — вселенную. И он помнит: самый консистентный интерфейс — не тот, где всё одинаково, а тот, где каждое повторение вводит живое, дышащее различие.На следующем занятии мы возьмём всё, что накопили за модуль — гипотезу, исследование, сценарий, аффордансы, ритм, первые визуальные решения — и начнём собирать из этого финальный показ. Не как экскурсию по Figma, а как аргумент: что вы проверяете, что уже сделали, где проект ещё тёмный, и какой свет из этой тьмы всё-таки выходит.