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.