Подготовка графических материалов для GUI

Метафоры и дизайн иконок для различных платформ

Графический пользовательский интерфейс (GUI) — это не просто набор кнопок и картинок. Это язык, на котором программа общается с пользователем. Чтобы это общение было эффективным, дизайнеры используют визуальные образы, которые мгновенно считываются мозгом. В этой лекции мы разберем фундамент интерфейсной графики: от концептуальных метафор до технических требований к иконкам на разных операционных системах.

Использование метафор в дизайне

Метафора в интерфейсе — это перенос свойств знакомого объекта из реального мира на объект виртуальный. Это способ объяснить пользователю, как работает новая функция, опираясь на его прошлый опыт.

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

Зачем нужны метафоры?

Снижение когнитивной нагрузки. Пользователю не нужно учить новые правила, он интуитивно понимает: если это «Корзина», значит, туда можно выкинуть ненужное.

Ускорение обучения. Знакомые образы позволяют начать работу с программой без чтения инструкции.

Эмоциональная связь. Удачная метафора делает интерфейс дружелюбным.

Однако метафоры стареют. Иконка «Дискета» для сохранения файла понятна всем, хотя физические дискеты вышли из обихода более 15 лет назад. Это пример устоявшейся метафоры, которая превратилась в идиому.

!Эволюция визуальной метафоры от реализма к абстракции

Иконки и пиктограммы: классификация и различия

Часто термины «иконка» и «пиктограмма» используют как синонимы, но в профессиональной среде между ними есть разница.

* Пиктограмма — это статичный графический символ, передающий конкретное значение или информацию (например, значок «Выход» или «Не курить»). Ее главная цель — информировать. * Иконка — это интерактивный элемент интерфейса. На иконку можно нажать, она меняет состояние (активна/неактивна, нажата/отпущена). Ее цель — действие.

Виды иконок по семантике

Ресемблирующие (Подобные). Прямо изображают объект, с которым происходит действие. Пример: иконка принтера для печати.

Произвольные (Условные). Не имеют визуальной связи с действием, их значение нужно выучить. Пример: «Гамбургер» (три полоски) для меню.

Символические. Используют абстракцию для передачи идеи. Пример: «Замок» для безопасности или HTTPS-соединения.

Стилистические виды

* Контурные (Outline). Легкие, воздушные, хорошо работают в навигационных панелях. * Залитые (Filled/Solid). Визуально более тяжелые, привлекают больше внимания. Часто используются для обозначения активного состояния (выбранной вкладки). * Глифы. Упрощенные монохромные формы, идеально подходящие для мелких размеров.

Использование цвета и размера при разработке иконок

Цвет и размер — это инструменты иерархии и функциональности, а не просто украшение.

Размер и сетка

Иконки никогда не рисуются в произвольном размере. Они создаются в рамках жесткой пиксельной сетки (Pixel Grid). Это гарантирует четкость линий на экранах с низким разрешением.

Стандартные размеры контейнеров для иконок: * 16x16, 24x24, 32x32 px — для системных иконок и тулбаров. * 48x48, 64x64 px — для иконок приложений и крупных элементов управления.

Важно различать оптический размер и размер контейнера. Круглая иконка в контейнере 24x24 будет казаться меньше, чем квадратная иконка в том же контейнере. Чтобы компенсировать это, дизайнеры используют «ключевые формы» (keyline shapes) — шаблоны внутри сетки, выравнивающие визуальный вес разных фигур.

!Сетка построения иконок и ключевые формы для выравнивания визуального веса

Цвет и контраст

Функциональный цвет. Красный — ошибка или удаление, зеленый — успех, желтый — предупреждение. Нарушение этих правил дезориентирует пользователя.

Состояние. Неактивная иконка обычно серая или полупрозрачная. Активная — окрашена в акцентный цвет бренда.

Доступность. Контраст иконки относительно фона должен быть достаточным (коэффициент не менее 3:1 для крупных элементов и 4.5:1 для мелких), чтобы люди с нарушениями зрения могли ее различить.

Особенности дизайна под различные платформы

При разработке кроссплатформенного приложения нельзя просто скопировать иконки из iOS в Android. У каждой платформы есть свой гайдлайн (руководство).

Google Material Design (Android)

Google проповедует философию «материального» дизайна, где интерфейс ведет себя как физические объекты (бумага, чернила).

* Сетка: Базовая сетка 24dp (density-independent pixels). * Стилистика: Геометричность, использование простых форм. Допускается легкая тень для создания объема. * Touch Target: Минимальная область нажатия — 48x48dp. Даже если иконка 24x24, область вокруг нее должна реагировать на палец.

Apple Human Interface Guidelines (iOS)

Apple стремится к легкости и элегантности.

* Толщина штриха: Иконки часто имеют более тонкие линии (1px или 2px), чем в Material Design. * Форма: Активное использование скругленных углов. Иконки приложений имеют форму «суперэллипса» (squircle) — это не просто квадрат со скругленными углами, а сложная математическая кривая. * Заполненность: В iOS принято использовать контурные иконки для неактивного состояния и залитые — для активного (в нижней панели навигации).

Web и Desktop

В вебе больше свободы, но есть технические ограничения. * Формат: Стандартом де-факто стал SVG (Scalable Vector Graphics). Это векторный формат, который идеально выглядит на экранах с любой плотностью пикселей (Retina, 4K). * Favicon: Не забывайте про иконку вкладки браузера (обычно 16x16 или 32x32 px).

Инфографика: виды и правила разработки

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

Виды инфографики в GUI

Статистическая. Графики, диаграммы (круговые, столбчатые), гистограммы. Используется для отображения количественных данных.

Процессная (Flowcharts). Схемы, показывающие алгоритм действий или статус заказа (например, трекинг посылки: Принято -> В пути -> Доставлено).

Сравнительная. Таблицы сравнения тарифов, характеристик товаров.

Навигационная. Карты, схемы метро, планы помещений.

!Основные типы инфографики в пользовательских интерфейсах

Правила разработки качественной инфографики

* Упрощение. Убирайте все лишнее. «Мусор» (лишние линии сетки, тени, градиенты) мешает восприятию данных. Это принцип Data-Ink Ratio: чернила должны тратиться на данные, а не на декор. * Честность масштаба. Если один столбик диаграммы в два раза выше другого, числовое значение должно быть ровно в два раза больше. Искажение масштаба — это манипуляция пользователем. * Последовательность. Используйте одну цветовую палитру для связанных данных. Например, «Доходы» всегда зеленые, «Расходы» всегда красные на всех экранах приложения.

Итоги

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

Иконки требуют точного построения по пиксельной сетке. Визуальный вес разных фигур (круга и квадрата) выравнивается с помощью ключевых форм.

Платформы (iOS, Android, Web) имеют разные требования к стилистике, толщине штриха и области нажатия. Игнорирование гайдлайнов делает приложение чужеродным для системы.

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

Инфографика и визуализация данных в интерфейсах

Современные интерфейсы перенасыщены информацией. Пользователи административных панелей, CRM-систем и фитнес-приложений сталкиваются с огромными массивами данных. Задача дизайнера — не просто украсить эти данные, а превратить их в понятный инструмент для принятия решений. В этой лекции мы разберем принципы построения инфографики специально для графического интерфейса (GUI).

Отличие инфографики в GUI от маркетинговой инфографики

Важно разделять два понятия, которые часто путают:

Маркетинговая инфографика — это статичная картинка (обычно длинный вертикальный плакат), рассказывающая историю. Ее цель — развлечь и привлечь внимание.

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

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

Основные типы визуализации в интерфейсах

Выбор типа графика зависит от характера данных. Неправильный выбор формы может исказить смысл информации.

1. Линейные графики (Line Charts)

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

* Особенности в GUI: Часто используются «спарклайны» (sparklines) — миниатюрные графики без осей и подписей, встроенные прямо в таблицы или карточки, чтобы показать общую тенденцию (рост/падение).

2. Столбчатые диаграммы (Bar Charts)

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

* Вертикальные: Хороши, когда категорий мало (до 10-12) и подписи короткие. * Горизонтальные: Незаменимы, когда категорий много или их названия длинные (например, список товаров).

3. Круговые и кольцевые диаграммы (Pie & Donut Charts)

Используются для показа долей целого. В современном UI чаще применяют кольцевые диаграммы (Donut charts), так как вырезанная середина позволяет разместить там итоговую цифру или иконку, экономя пространство.

> Важно: Не используйте круговые диаграммы, если категорий больше 5-6. Сектора станут слишком тонкими, и их будет невозможно различить.

4. Индикаторы прогресса (Gauges & Progress Bars)

Специфичный для интерфейсов элемент. Показывает статус выполнения задачи или текущее значение относительно нормы (загрузка файла, уровень заряда, заполненность профиля).

!Основные типы графиков в пользовательском интерфейсе

Принципы чистоты данных: Data-Ink Ratio

Эдвард Тафти, пионер визуализации данных, ввел понятие Data-Ink Ratio (коэффициент «данные-чернила»). Этот принцип гласит: большая часть чернил (или пикселей) на графике должна тратиться на отображение самих данных, а не на оформление.

Формула эффективности графика выглядит так:

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

Что нужно удалять (уменьшать без потери ):

Тяжелые сетки. Линии сетки должны быть едва заметными или отсутствовать вовсе, если значения подписаны.

Рамки и обводки. График не обязательно заключать в прямоугольник.

Лишние цвета. Если все столбцы показывают «Продажи», они должны быть одного цвета. Раскрашивать их в радугу — ошибка, так как пользователь начнет искать смысл в разнице цветов.

3D-эффекты. Объемные столбики и пироги искажают восприятие пропорций и добавляют визуальный шум.

Чем выше коэффициент , тем быстрее пользователь считывает информацию.

Работа с цветом в визуализации

Цвет в инфографике — это функциональный кодировщик, а не декор.

Семантические палитры

Используйте общепринятые ассоциации: * Зеленый/Синий: Положительная динамика, рост, норма. * Красный/Оранжевый: Падение, ошибка, критическое значение. * Серый: Отсутствие данных или прогноз.

Категориальные палитры

Если на графике несколько линий (например, сравнение продаж товаров А, Б и В), цвета должны быть контрастными по отношению друг к другу, но равнозначными по яркости. Нельзя делать линию товара А ярко-красной, а товара Б — бледно-серой, если только вы не хотите специально выделить товар А.

Доступность (Accessibility)

Около 8% мужчин имеют нарушения цветовосприятия (дальтонизм). Никогда не полагайтесь только на цвет. Дублируйте информацию формой или подписями. Например, в линейном графике одна линия может быть сплошной, а другая — пунктирной.

!Применение принципа Data-Ink Ratio: избавление от визуального шума

Адаптивность и интерактивность

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

Интерактивность

Тултипы (Tooltips). При наведении курсора или нажатии пальцем на точку графика должно всплывать окно с точным значением. Это позволяет не загромождать график подписями каждой точки.

Фильтрация. Дайте пользователю возможность отключать лишние линии на графике, кликая по легенде.

Зум (Zoom). Возможность приблизить участок графика для детального рассмотрения (актуально для биржевых терминалов).

Адаптация под мобильные устройства

Большой график с 12 столбцами (по месяцам) отлично смотрится на десктопе, но на смартфоне он превратится в «кашу».

Стратегии адаптации: * Скролл. Оставить график широким, но поместить его в контейнер с горизонтальной прокруткой. * Упрощение. Показать на мобильном только последние 3 месяца вместо 12. * Трансформация. Превратить график в список значений.

Техническая подготовка графики

При подготовке макетов для разработчиков учитывайте следующие моменты:

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

Библиотеки. Разработчики редко рисуют графики с нуля. Они используют библиотеки (Chart.js, D3.js, Highcharts). Дизайнеру полезно знать возможности этих библиотек, чтобы не нарисовать то, что невозможно или слишком дорого реализовать.

Состояния. Отрисуйте не только идеальный график («happy path»), но и пограничные состояния:

* График пуст (нет данных). * Данные загружаются (скелетон или спиннер). * Ошибка загрузки данных. * Одно значение экстремально большое, а остальные маленькие (как поведет себя масштаб?).

Итоги

Цель визуализации в GUI — быстрое считывание информации для принятия решений, а не украшение интерфейса.

Тип графика должен строго соответствовать типу данных: линии для трендов, столбцы для сравнения, кольца для долей.

Принцип Data-Ink Ratio требует удалять все элементы, которые не несут информационной нагрузки (лишние сетки, 3D-эффекты, декоративные цвета).

Интерактивность (тултипы, зум) компенсирует недостаток пространства и позволяет скрыть детали до момента востребования.

Техническая реализация подразумевает использование векторной графики и учет состояний ошибки или отсутствия данных.

Проектирование сложных элементов интерфейса и персонажей

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

Модальные окна и перекрытие контента

Модальное окно (Modal/Dialog) — это элемент, который блокирует взаимодействие с основным интерфейсом до тех пор, пока пользователь не выполнит действие или не закроет окно. С точки зрения графики, здесь важны два аспекта: контейнер и затемнение (scrim).

Визуальное разделение планов

Чтобы модальное окно воспринималось как объект, находящийся «над» контентом, дизайнеры используют метафору высоты по оси Z. Основной инструмент здесь — тень (Drop Shadow).

Для создания реалистичной тени в графическом редакторе часто используют формулу наложения нескольких теней:

Ambient shadow: Мягкая, рассеянная тень для общего объема.

Key shadow: Направленная, более темная тень, показывающая источник света (обычно сверху).

Затемнение фона (Scrim)

Подложка под модальным окном выполняет функцию фокусировки внимания. Это не просто черный прямоугольник с прозрачностью. Часто используется размытие фона (Backdrop Blur), чтобы полностью скрыть детали заднего плана.

При подготовке макета важно указать разработчику параметры цвета и прозрачности в формате RGBA или Hex с альфа-каналом. Например, #000000 с непрозрачностью 60%.

!Схема, показывающая слои: основной контент, слой затемнения (scrim), тень и само модальное окно

Слайдеры и элементы ввода диапазонов

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

Анатомия слайдера

Трек (Track): Линия, по которой движется ползунок. Обычно состоит из двух цветов: активная часть (слева от ползунка) и неактивная (справа).

Ползунок (Thumb): Управляющий элемент. Часто имеет тень для обозначения интерактивности.

Метки (Ticks): Опциональные засечки на треке.

Тултип (Value Label): Всплывающая подсказка со значением при перетаскивании.

Область нажатия против видимой области

Критическая ошибка — рисовать ползунок размером ровно 10x10 пикселей и отдавать его в разработку «как есть». Палец пользователя перекроет такой элемент, и попасть в него будет сложно. Визуально ползунок может быть маленьким, но его сенсорная зона должна быть не менее 44x44 px (для iOS) или 48x48 dp (для Android).

Таблицы и визуализация данных

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

Чересстрочная заливка (Zebra Striping)

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

Выравнивание данных

Графическое правило верстки таблиц: * Текст выравнивается по левому краю. * Числа выравнивается по правому краю. Это позволяет сравнивать разряды чисел (единицы под единицами, десятки под десятками). * Заголовки столбцов выравниваются так же, как и данные в них.

Маршруты и маркеры на картах

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

Маркеры (Pins)

Маркер должен иметь четкую точку привязки (anchor point). Если вы рисуете «булавку», ее острие должно указывать точно на координаты объекта. Если вы рисуете круглую иконку, центром координат будет центр круга.

Состояния маркера:

Default: Обычное состояние.

Selected: Маркер увеличен, изменен цвет, появился «хвостик».

Cluster: Кружок с цифрой, показывающий, что в этой точке сгруппировано несколько объектов.

Маршруты

Линия маршрута должна быть контрастной. Часто используют обводку (stroke) линии другим цветом, чтобы отделить её от дорог на самой карте. Например, синяя линия маршрута с белой внешней обводкой.

Параллакс-эффекты и многослойные фоны

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

Для подготовки графики под параллакс дизайнер должен разбить изображение на независимые слои (Background, Middleground, Foreground) и экспортировать их отдельно (обычно в PNG с прозрачностью).

Принцип смещения рассчитывается по формуле:

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

Обычно для фона (движется медленнее контента), а для переднего плана (движется быстрее).

!Иллюстрация, где фон — горы, средний план — деревья, передний план — персонаж, и стрелками показана разная скорость их движения при скролле

Графические подсказки и онбординг

Графические подсказки помогают пользователю освоить интерфейс.

Тултипы (Tooltips)

Тултип — это небольшой контейнер с текстом, указывающий на элемент интерфейса. Важная деталь — «хвостик» (стрелка), исходящий из тултипа. Он должен визуально связывать подсказку с объектом. При экспорте графики хвостик часто делают частью SVG-контейнера тултипа или отдельным элементом, который программно позиционируется.

Эффект прожектора (Spotlight)

Для акцентирования внимания на элементе используется затемнение всего экрана с «вырезанным» отверстием над нужной кнопкой. Это реализуется через SVG-маску или наложение полупрозрачного слоя с прозрачным кругом внутри.

Персонажи в интерфейсе

Персонажи (маскоты) — это мощный инструмент эмоциональной связи. Они превращают бездушную программу в собеседника.

Сценарии использования

Онбординг: Персонаж проводит экскурсию по приложению.

Пустые состояния (Empty States): Когда в корзине нет товаров или нет входящих сообщений, грустный или спящий персонаж сглаживает негативное впечатление.

Ошибки (404, разрыв соединения): Персонаж, который «чинит» провода или выглядит растерянным, снижает уровень стресса пользователя.

Технические требования к персонажам

Персонажи должны быть отрисованы в векторном формате (SVG). Это позволяет: * Масштабировать их без потери качества на любых экранах. * Анимировать отдельные части (глаза, руки) с помощью CSS или JS-библиотек (например, Lottie). * Менять цвета программно (например, для темной темы).

При создании персонажа разрабатывается «карта эмоций» — набор поз и выражений лица для разных ситуаций (Радость, Ожидание, Успех, Ошибка).

!Три варианта одного персонажа: приветствующий (для входа), задумчивый (для загрузки) и сломанный (для ошибки 404)

Итоги

Сложные элементы (модальные окна, слайдеры) требуют проработки всех составных частей и состояний, а не только статичной картинки.

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

Параллакс создается за счет разделения изображения на слои и присвоения им разных коэффициентов скорости движения.

Персонажи в интерфейсе выполняют функциональную роль: они направляют внимание, обучают и снижают негатив при ошибках.

Векторный формат (SVG) является предпочтительным для сложной графики и персонажей, так как обеспечивает качественное масштабирование и возможности анимации.

Анимация интерфейсов и техническая оптимизация графики

Создание красивого макета — это только половина работы дизайнера интерфейсов. Чтобы графический интерфейс (GUI) стал полноценным продуктом, статические картинки должны ожить с помощью анимации, а графические файлы — быть оптимизированы для мгновенной загрузки и четкого отображения на любых экранах. В этой лекции мы разберем, как проектировать движение в интерфейсе и как готовить графику к передаче разработчикам.

Функциональная анимация в интерфейсе

Анимация в UI (User Interface) — это не просто украшение. Это функциональный слой, который помогает пользователю понять, что происходит в системе. Если кнопка при нажатии мгновенно меняет цвет без перехода, это выглядит резко и неестественно. В реальном мире действия имеют продолжительность и инерцию.

Основные задачи интерфейсной анимации

Обратная связь (Feedback). Подтверждение того, что система приняла действие. Пример: кнопка «вдавливается» или пускает «волну» (ripple effect) при нажатии.

Фокусировка внимания. Движение привлекает глаз быстрее, чем цвет или форма. Анимация может подсказать, куда смотреть (например, подпрыгивающая иконка уведомления).

Пространственная ориентация. Анимация переходов показывает, откуда появился новый экран. Если меню выезжает слева, пользователь понимает, что для возврата нужно смахнуть вправо.

Маскировка загрузки. Скелетоны (мерцающие серые блоки) и прелоадеры снижают психологическое ожидание, показывая, что процесс идет.

Принципы физики и тайминга

Главное отличие хорошей анимации от плохой — это изинг (easing). В реальном мире объекты не начинают двигаться мгновенно с максимальной скоростью и не останавливаются как вкопанные. Они разгоняются и тормозят.

Линейная анимация (Linear) выглядит механической и неестественной. Для интерфейсов используют кривые Безье (Cubic Bezier), которые задают ускорение и замедление.

!Сравнение динамики движения: линейная скорость против естественного ускорения и торможения

Стандартные длительности анимаций: * Микровзаимодействия (кнопки, тогл): 100–300 мс. * Переходы между экранами: 300–500 мс. * Сложные иллюстративные анимации: 500 мс и более.

Если анимация длится дольше 500 мс без веской причины, интерфейс начинает казаться «тормозящим».

Техническая реализация анимации: Lottie и Rive

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

Сегодня стандартом индустрии является Lottie. Это библиотека, которая позволяет рендерить векторную анимацию в реальном времени.

Как это работает?

Дизайнер создает анимацию в Adobe After Effects.

С помощью плагина Bodymovin анимация экспортируется в формат JSON.

Разработчик подключает этот JSON-файл в код (iOS, Android, Web).

Преимущества Lottie: * Векторность: Идеальная четкость на любом разрешении. * Вес: JSON-файл весит в десятки раз меньше, чем GIF или MP4. * Управление: Разработчик может программно менять скорость, цвет элементов или запускать анимацию по триггеру (например, при скролле).

Оптимизация графики под различные разрешения

Главная боль разработчика — получить от дизайнера одну картинку icon.png и услышать: «Ну, она же нормальная». В мире существуют тысячи устройств с разной плотностью пикселей (Pixel Density).

Понятие плотности пикселей

Экраны делятся на обычные (1x) и экраны высокой четкости (Retina, HiDPI). На экране высокой четкости в один физический дюйм помещается больше пикселей.

Чтобы интерфейс выглядел одинаково физически (например, кнопка всегда была размером с палец), используется абстрактная единица измерения: * dp (density-independent pixel) — в Android. * pt (point) — в iOS.

Формула пересчета физических пикселей выглядит так:

где — количество физических пикселей на матрице экрана, — размер элемента в независимых пикселях (пунктах), — коэффициент плотности экрана (1, 2, 3 и т.д.).

Пример: Иконка размером 24x24 dp. * На старом мониторе (Scale = 1): размер файла 24x24 px. * На iPhone с Retina (Scale = 2): размер файла 48x48 px. * На современном флагмане (Scale = 3): размер файла 72x72 px.

Если вы экспортируете растровую графику (PNG, JPG) только в размере 1x, на современных телефонах она будет выглядеть размытой («мыльной»). Поэтому растр всегда экспортируется набором: @1x, @2x, @3x.

!Демонстрация детализации иконки при экспорте в коэффициентах @1x, @2x и @3x

Подготовка векторной графики (SVG)

Векторная графика (SVG) решает проблему масштабирования, так как она описывается математическими формулами, а не пикселями. Однако SVG тоже нужно оптимизировать.

Правила чистого SVG

Замкнутые контуры. Избегайте незамкнутых линий с обводкой (stroke), если это возможно. Переводите обводки в кривые (Outline Stroke), чтобы толщина линий масштабировалась предсказуемо.

Целые пиксели. Все точки привязки должны стоять на целых координатах (X: 10, Y: 10, а не X: 10.43, Y: 9.88). Дробные значения создают «антиалиасинг» — полупрозрачные пиксели по краям, что делает иконку нечеткой.

Удаление мусора. Графические редакторы добавляют в SVG много метаданных: название программы, слои, скрытые элементы. Перед передачей в разработку прогоняйте файлы через оптимизаторы (например, SVGO), которые удаляют лишний код, уменьшая вес файла на 30–70%.

Спрайты и атласы

Хотя сегодня HTTP/2 позволяет загружать много мелких файлов параллельно, техника объединения графики все еще актуальна для игровой индустрии и сложного веба.

* Текстурный атлас (Sprite Sheet): Это один большой файл изображения, на котором размещены все иконки и элементы интерфейса. Программа «вырезает» нужный кусочек по координатам. * SVG-спрайт: Единый файл, содержащий коды всех иконок, к которым обращаются по ID.

Это снижает количество запросов к серверу, ускоряя загрузку страницы.

Передача макетов в разработку (Handoff)

Финальный этап — передача ассетов. Хороший тон — именовать файлы системно.

Структура имени файла: category_function_name_size.format

Пример: * ic_nav_home_24px.svg — иконка (ic), для навигации (nav), «домой» (home), базовый размер 24px. * img_bg_profile_@2x.png — изображение (img), фон (bg), профиль, двойное разрешение.

Использование пробелов, кириллицы или верхнего регистра (Icon Domoy.png) в названиях файлов строго запрещено, так как это может вызвать ошибки при сборке приложения.

Итоги

Анимация — это инструмент коммуникации, а не декор. Используйте кривые изинга (easing) для создания естественного движения и соблюдайте тайминги (200–500 мс).

Lottie (JSON) — предпочтительный формат для сложной векторной анимации, обеспечивающий малый вес и идеальное качество.

Плотность пикселей требует экспорта растровой графики в нескольких вариантах (@1x, @2x, @3x), чтобы изображение было четким на всех устройствах.

Векторная графика (SVG) должна быть очищена от лишнего кода и метаданных, а координаты точек привязаны к пиксельной сетке.

Системное именование файлов (без пробелов и спецсимволов) предотвращает технические ошибки на этапе сборки проекта.

Практическая подготовка материалов для верстки и кода

Дизайн интерфейса не заканчивается на утверждении макетов заказчиком. Самый ответственный этап — передача работы в разработку (Design Handoff). Если дизайнер не подготовит макеты технически грамотно, верстка «поедет», отступы станут случайными, а графика будет мыльной. В этой лекции мы разберем процесс подготовки файлов, спецификаций и ассетов, чтобы разработчик смог воплотить ваш замысел с точностью до пикселя.

Гигиена макета и структура файлов

Разработчик видит макет иначе, чем дизайнер. Ему не важна красота композиции слоев, ему важна структура. Хаос в слоях (Rectangle 54 copy 2) приводит к ошибкам в коде.

Удаление мусора

Перед передачей макета необходимо провести «генеральную уборку»:

Удалите скрытые слои. Если вы скрыли вариант кнопки «на всякий случай», разработчик может случайно экспортировать его или запутаться в иерархии.

Схлопните лишние группы. Глубокая вложенность (группа в группе в группе) усложняет инспекцию кода.

Превратите объекты в компоненты. Все повторяющиеся элементы (кнопки, инпуты, карточки) должны быть инстансами (экземплярами) компонентов. Это гарантирует, что разработчик увидит единый источник правды, а не 50 разных кнопок с ручными правками.

Системное именование (Naming Convention)

Имена слоев и ассетов переходят в имена классов в CSS и названия файлов в репозитории. Используйте английский язык и понятную логику.

Формула идеального имени файла:

где — итоговое имя файла, — категория элемента (например, icon, btn, img), — название функционального блока (например, menu, submit), — разновидность (например, primary, ghost), — состояние (например, hover, disabled).

Пример правильного именования: * btn_primary_large_default * icon_nav_home_active

!Разбор составных частей имени файла: префикс, название, модификатор и состояние

Дизайн-токены: язык общения с разработчиком

В современной разработке не принято использовать «сырые» значения (hardcoded values). Вместо того чтобы писать «цвет #007AFF», разработчики используют переменные. Дизайнер должен подготовить список этих переменных — дизайн-токенов.

Типы токенов

Цветовые токены. Не просто палитра, а семантическое значение.

* Плохо: Blue-500 (описывает вид). * Хорошо: Primary-Action-Background (описывает функцию).

Типографические токены. Наборы стилей (Заголовок H1, Body Text, Caption), включающие шрифт, размер, интерлиньяж и трекинг.

Токены отступов (Spacing). Шаг сетки. Обычно используется шаг 4px или 8px. Вместо случайных отступов (13px, 21px) используются значения переменных: space-s (8px), space-m (16px), space-l (24px).

Использование токенов позволяет менять дизайн глобально. Если бренд сменит синий цвет на красный, достаточно изменить значение одного токена, и весь интерфейс обновится автоматически.

Подготовка графических ассетов (Slicing)

Нарезка графики — это процесс экспорта картинок для внедрения в код. Здесь важно понимать концепцию контейнера.

Контейнеры и оптическая компенсация

Иконки и иллюстрации никогда не экспортируются «по границе контура». Они всегда должны находиться внутри прозрачного контейнера (фрейма) фиксированного размера (например, 24x24 px).

Зачем это нужно:

Выравнивание. Разработчик выравнивает контейнеры, а не кривые линии иконки.

Замена. Если иконку «Дом» нужно заменить на иконку «Самолет» (которая шире), верстка не поедет, так как обе иконки находятся в одинаковых квадратах 24x24.

Клики. Контейнер увеличивает область нажатия.

!Правильный экспорт иконки внутри контейнера для сохранения выравнивания

Форматы экспорта

* SVG: Для иконок, логотипов и простых иллюстраций. Это код, который весит мало и масштабируется бесконечно. * PNG: Для фотографий и сложных растровых изображений с прозрачностью. Обязательно экспортируйте в x1, x2, x3 для разных экранов. * WebP: Современная замена PNG и JPG. Обеспечивает лучшее сжатие без потери качества. Рекомендуется как основной формат для растра в вебе.

Спецификации и Redlines

Даже в инструментах вроде Figma Dev Mode или Zeplin не все очевидно. Дизайнер должен оставить пояснения (аннотации) для сложной логики.

Box Model (Блочная модель)

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

Формула полной ширины элемента:

где — итоговая ширина, занимаемая элементом на странице, — ширина контента (текста или картинки), — внутренний отступ (padding), — толщина границы (border), — внешний отступ (margin).

Дизайнер должен четко показать, где заканчивается padding (внутри кнопки) и начинается margin (расстояние до соседней кнопки).

!Схема, показывающая Content, Padding, Border и Margin вокруг элемента

Состояния и поведение (Behavior)

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

Переполнение контентом. Что произойдет, если имя пользователя будет «Константин Константинопольский-Задунайский»? Текст перенесется на вторую строку или обрежется с троеточием (...)?

Резиновость. Как ведет себя карточка товара, если экран станет шире на 200 пикселей? Растянется картинка или увеличится белое поле?

Интерактивные состояния. Hover (наведение), Focus (выделение клавиатурой), Active (нажатие), Disabled (неактивно), Loading (загрузка).

Адаптивность и брейкпоинты

Нельзя нарисовать только десктоп (1920px) и мобилку (375px). Нужно объяснить, что происходит между этими значениями.

Брейкпоинты (Breakpoints) — это контрольные точки ширины экрана, на которых макет перестраивается. Например, на ширине 768px (планшет) сетка меняется с 12 колонок на 8, а меню превращается в «бургер».

При подготовке макета используйте Auto Layout (в Figma) или аналогичные функции. Это позволяет разработчику увидеть логику: «этот элемент прибит к левому краю», «этот элемент заполняет все доступное пространство».

Design QA (Авторский надзор)

После того как разработчик сверстал макет, работа дизайнера не закончена. Наступает этап Design QA (Quality Assurance).

Вы открываете тестовую версию продукта и сравниваете её с макетом. Частые ошибки: * Шрифты: Подключился не тот шрифт или слетела насыщенность (Bold стал Regular). * Отступы: Разработчик определил отступ «на глаз». * Изображения: Картинки растянуты с нарушением пропорций.

Для проверки пропорций изображений полезно знать формулу соотношения сторон (Aspect Ratio):

где — соотношение сторон (часто записывается как 16:9 или 4:3), — ширина изображения, — высота изображения. Если в коде задано жесткое соотношение, а вы загрузили картинку с другим , она либо обрежется, либо исказится.

Итоги

Порядок в слоях и системное именование файлов (category_name_state) — основа качественного переноса дизайна в код.

Дизайн-токены заменяют жесткие значения цветов и размеров на переменные, обеспечивая гибкость и поддержку тем.

Контейнеризация графики обязательна: иконки должны быть в прозрачных фреймах одинакового размера для корректного выравнивания.

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

Design QA — обязательный этап, на котором дизайнер проверяет соответствие реализованного интерфейса макетам, уделяя внимание шрифтам, отступам и пропорциям.