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

На прошлом занятии мы были сочиняли и музицировали: ритм, пауза, свинг, поток. Мы научились слышать интерфейс как временну́ю конструкцию. Но у любой музыки есть инструмент — им сегодня и займёмся. Точнее, целым оркестром: дизайн-системой, платформенными паттернами и визуальным языком, на котором ваш сервис говорит с человеком.

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

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

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

Но это иллюзия. Примерно такая же, как если бы вы решили, что для написания романа достаточно орфографического словаря.

Дизайн-система — это не каталог компонентов, а язык. У него есть грамматика (правила сочетания), словарь (компоненты и паттерны), риторика (способы убеждения и навигации), культурная история (откуда эти формы взялись и почему выглядят именно так) и, наконец, диалект — то, как именно ваш сервис говорит на этом языке, отличаясь от других, но оставаясь понятным.

Изучить этот язык — значит понять не только его словарь, но и грамматику, историю и возможности поэзии.

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

В 2013 году Брэд Фрост предложил фреймворк Atomic Design — способ мыслить компоненты интерфейса по аналогии с химией:

● Атомы — неделимые элементы: кнопка, иконка, поле ввода, лейбл, цвет, шрифт.

● Молекулы — простые комбинации атомов: поле поиска (лейбл + инпут + кнопка), карточка товара (изображение + заголовок + цена).

● Организмы — сложные структуры из молекул: хедер, каталог товаров, лента уведомлений.

● Шаблоны — скелеты страниц: расположение организмов, структура без контента.

● Страницы — конкретные экземпляры шаблонов с реальным контентом.

Модель красивая. Она работает, но с ней есть проблема.

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

Кнопка — не атом, а скорее — вселенная.

А теперь поднимемся выше по иерархии вложенности: страница — часть экрана, экран — часть приложения, приложение — часть экосистемы Apple или Google, экосистема — часть цифровой культуры. Где заканчивается ваша дизайн-система? Нигде. Перед нами «объекты, завёрнутые в объекты, завёрнутые в объекты» — без конечного основания и без верхней границы.

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

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

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

Заполните короткую карточку:

Момент сценария Что именно происходит с пользователем?

Главное действие Что он должен сделать на этом экране? Одно действие.

Главный объект С чем он взаимодействует: карта, карточка, список, камера, форма, календарь, чат?

Платформа iOS / Android / пока не решили. Почему?

Первый компонент Какой элемент нужно спроектировать первым: CTA, карточку, поиск, таб-бар, пустое состояние?

Риск Где пользователь может не понять, что делать?

После карточки сделайте очень грубый набросок экрана: 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 делает то же: обнуляет процессуальность, телесность, аффект. Все приложения начинают выглядеть одинаково. Если всё — «декорированный сарай», то мы живём в архитектуре складских ангаров.

Возврат материальности: глассморфизм и 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:

● Множественное кодирование? Да: для новичка — красиво и понятно; для опытного — слои, жесты, скрытые аффордансы.

● Историцизм? Да: стекло цитирует скевоморфную глубину, но иронически — не имитируя физику, а играя с ней.

● Партиципаторность? Да: интерфейс адаптируется к контенту пользователя, отражая и преломляя его обои, его фотографии.

Или, если угодно обратиться к классификации Вентури, перед нами «здание-достопримечательность» — диковинка, бог знает какое по счёту чудо света.

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

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

Шаг 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 будет внизу, что свайп влево вернёт назад, что модальный экран закроется свайпом вниз. Это грамматика — и если вы её нарушаете, вас не понимают.

Но внутри этой грамматики у вас есть свобода: ваша типографика, ваша цветовая система, ваши иконки, ваша анимация, ваш тон. Это риторика — и здесь начинается бренд.

Сейчас вам не нужно проектировать одновременно 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 — черновую карточку визуального языка вашего мобильного сервиса. Не пытайтесь сейчас «сделать бренд». Выберите несколько решений, которые задают направление и не противоречат сценарию.

Тест: покажите карточку соседу. Может ли сосед, глядя только на неё, угадать, какое действие, состояние или тип сервиса за ней стоит? Не название проекта, а характер взаимодействия.

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

Это не отдельное задание, а смена оптики перед домашним визуальным спринтом. Линзы нужны не для того, чтобы усложнить вам жизнь, а чтобы вы не приняли набор красивых UI-деталей за проектное мышление.

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

И одновременно: кнопка не исчерпывается своей ролью в навбаре. Навбар не исчерпывается ролью на экране. Экран не исчерпывается ролью в приложении. Каждый уровень автономен — и никакая «система» не может полностью контролировать то, что происходит внутри её собственных компонентов.

Практический вывод:

● Не упрощайте. Компонент — не «просто кнопка». Каждый раз, когда вы решаете, какой у неё радиус, вы принимаете решение с бесконечным количеством последствий.

● Уважайте автономию уровней. Хорошая дизайн-система не «подчиняет» атомы молекулам. Она создаёт условия для их сосуществования — как анарх-акторная композиция, где каждый элемент ведёт свою «молчаливую игру», о которой мы можем не подозревать.

● Помните об изъятости. Даже самая детальная документация не исчерпывает компонент. Всегда есть нечто, что вы не предусмотрели — и это не баг, а онтологическое свойство любого объекта.

Линза 2. Интра-акция: UI и UX не существуют отдельно

Карен Барад предлагает заменить интер-акцию (взаимодействие между существующими сущностями) на интра-акцию — процесс, в котором сами сущности возникают из отношений. До интра-акции нет ни «аппарата», ни «объекта» — есть только поле потенциальностей. Только агентный разрез создаёт различие.

Что это значит для дизайн-системы?

Привычная модель: сначала — UX (логика, сценарии, информационная архитектура), потом — UI (визуальное оформление). Два слоя. Сначала «что», потом «как». Но Барад говорит: нет никакого «до». UI не «оформляет» UX. Они со-возникают — строго в момент контакта, обретая идентичность только в процессе взаимной настройки.

Скругление кнопки — это не «визуальное решение». Это агентный разрез, который одновременно конституирует:

● элемент интерфейса (UI), ● ожидание отклика у пользователя (UX), ● зону касания для пальца (аффорданс), ● культурную ассоциацию (мягкий = дружелюбный).

Изменение одного параметра меняет всю конфигурацию. Это не «дизайн, влияющий на опыт». Это один процесс, который наблюдатель разрезает на «дизайн» и «опыт» — но разрез не нейтрален.

Практический вывод:

● Перестаньте думать «сначала UX, потом UI». Начинайте с прототипа — с конкретного материального взаимодействия. Форма и функция рождаются вместе.

● Каждый компонент — это агентный разрез. Добавляя элемент в макет, вы не «размещаете вещь». Вы конституируете различие: вот здесь — кликабельное, а вот здесь — нет. Вот здесь — важное, а вот здесь — фоновое. Разрез создаёт обе стороны одновременно.

● Глитч как разрез. Когда компонент ломается — зависает, не отрисовывается, не откликается — это момент, когда привычный разрез (UI/UX) перестаёт работать. Пользователь видит не «интерфейс» и не «опыт», а нечто третье: саму инфраструктуру взаимодействия, обычно скрытую. Как вскрытый iPod — травматический, но честный.

Линза 3. Ритурнель: дизайн-система как территориальная песня

У Делёза и Гваттари есть концепт ритурнели (ritournelle) — повторяющегося мотива, который создаёт территорию. Ребёнок напевает в темноте — и тьма отступает: песня размечает безопасное пространство. Птица поёт на заре — и звуком маркирует свою территорию. Ритурнель — это не просто повторение. Это повторение, которое захватывает пространство и делает его обитаемым.

Ритм — вот быстрый ответ среды хаосу. <…> Нет ничего менее ритмичного, чем военный марш. — Делёз, Гваттари

Дизайн-система — это ритурнель.

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

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

И ещё: ритурнель работает в двух направлениях — территориализация (песня создаёт границы) и детерриториализация (песня увлекает за пределы территории, открывает линию ускользания). Оса приближается к орхидее, орхидея «становится» осой — они обмениваются территориями, и возникает новая реальность — ризома. Хорошая дизайн-система делает то же: создаёт узнаваемую территорию и одновременно оставляет лазейки для побега — места, где нестандартное решение не ломает систему, а расширяет её.

Практический вывод:

● Дизайн-система — не тюрьма. Это песня, а не забор. Если ваши токены, компоненты и правила не позволяют ни единого отклонения — система мертва. Она стала военным маршем.

● Повторение должно производить различие. Одна и та же карточка товара в каталоге, в корзине, в истории заказов — это три исполнения одной ритурнели. Если они абсолютно идентичны, система не «дышит». Контекстуальные вариации — это не баг консистентности, а её высшая форма.

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

Это не четвёртый интерактив. В аудитории мы его отдельно не делаем. Используйте эту карточку дома как проверку того, что ваш первый визуальный спринт не распался на случайные красивости.

Задание для самопроверки: создайте Component Language Card — карточку визуального языка вашего сервиса. Она может быть одной страницей в FigJam или блоком рядом с первыми экранами в Figma.

Часть 1. Территория (ритурнель). Перечислите 3–5 повторяющихся мотивов вашего сервиса — элементов, которые «поют» пользователю: «вы здесь, вы в безопасности». Это могут быть компоненты, цвета, типографические приёмы, жесты, звуки.

Часть 2. Грамматика (платформа). Для 1–2 первых экранов: какие элементы платформенные (iOS/Android), какие кастомные? Есть ли опасные отклонения? Пока не нужно закрывать весь продукт.

Часть 3. Голос (бренд). Заполните одно предложение: «Мой сервис говорит как ___ (персонаж/тип голоса), потому что ___».

Часть 4. Линия ускользания. Укажите одно место в вашем сервисе, где дизайн-система может намеренно нарушаться. Не обязательно реализовывать это сейчас; достаточно понять, где у будущей системы появится право на импровизацию.

👁 Для исследовательского трека: опишите один компонент вашего сервиса через одну из трёх оптик. Не надо героически делать всё сразу; лучше одна точная мысль, чем три философских муляжа.

● Как бесконечную вложенность (что внутри него? что снаружи?), ● Как агентный разрез (что он конституирует? какие различия создаёт?), ● Как ритурнель (что он повторяет? какое микроразличие вводит?).

Вот что остаётся после — помимо списка компонентов и шпаргалки по HIG:

● Понимание того, что дизайн-система — язык, а не каталог. На вашем текущем этапе это не энциклопедия всех компонентов, а первый договор между сценарием, платформой и визуальным голосом сервиса.

● Культурологический взгляд на интерфейс: скевоморфизм → flat → Liquid Glass — перед нами цикл, а не линейный прогресс, и понимание цикла позволяет принимать осознанные стилевые решения.

● Умение собирать платформенный скелет ещё до готовых экранов: выбрать платформу, навигацию, главный CTA, первое состояние и одно возможное отклонение.

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

● Ощущение того, что каждый компонент — не деталь конструктора, а автономный объект с собственной скрытой реальностью, и дизайн-система — не контроль, а территориальная песня, создающая пространство для жизни.

Визуальный спринт: первый экранный каркас сервиса.

До сессии остаётся месяц. Поэтому домашнее задание — не «сделать всю дизайн-систему», а запустить визуальный спринт, из которого уже можно вырастить прототип и финальную презентацию.

Часть 1. ==Два ключевых экрана (Figma)=

Отрисуйте два экрана в low/mid fidelity:

● Экран-узел — момент первого смысла из интерактива 1.

● Соседний экран — то, что происходит до него или после него: пустое состояние, результат действия, ошибка, переход, экран выбора.

Не нужно делать 15 экранов. Лучше два экрана, где видно мышление, чем десять одинаковых прямоугольников, которые ещё не знают, зачем родились.

Часть 2. Минимальный визуальный словарь

Рядом с экранами соберите маленькую компонентную зону:

Типографика. 1–2 текстовых стиля: заголовок, основной текст / подпись Цвет. Фон, текст, один акцентный цвет CTA. Основное действие + состояние pressed/disabled, если успеваете Карточка / список / форма. Главный объект вашего сценария. Навигация. Таб-бар, навбар, нижняя навигация или другое решение Микрокопирайтинг. Одно сообщение ошибки или пустого состояния

Часть 3. Короткое пояснение и план на месяц

Коротко, по 2–4 предложения на пункт:

● Платформенное соответствие — где и почему вы буквально следуете HIG / Material Design.

● Отклонение или зона риска — где хочется нарушить правило, но нужно объяснить зачем. Если пока не готовы нарушать — так и напишите.

● Брендинговый акцент — что делает сервис узнаваемым: цвет, шрифт, движение, тон, пустое состояние, способ обращения.

В конце добавьте маленький календарь из четырёх понедельных шагов — не как отдельное задание, а как самоконтроль на оставшийся месяц:

1. 2 ключевых экрана + визуальный словарь v0
2. Ключевой путь 6–8 экранов, связанные переходы
3. Проба на 3–5 пользователях, фиксация проблем
4. Правки, финальная презентация, ИИ-пайплайн и журнал отсечений

👁 Для исследовательского трека (дополнительно)

Напишите микро-эссе 200–300 слов: выберите один компонент или экран-узел и опишите его через одну линзу.

● Мереология: что внутри компонента? Что снаружи? Где заканчивается его «внутреннее»? ● Интра-акция: как компонент создаёт различие между «интерфейсом» и «опытом»? Что изменится, если его убрать? ● Ритурнель: как компонент участвует в территориальной песне вашего сервиса? Какое микроразличие он вводит при повторении?

Дизайн-система — язык, на котором ваш сервис говорит с человеком внутри чужого дома.

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

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

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

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