encyclopedia
Экранная графика — изображение как интерфейс
На экране изображение обязано не только показывать, но и отвечать: оно является органом управления.
Редакционный тезис
Экранная графика важна тем, что изображение здесь имеет состояние: оно реагирует на курсор, размер окна, тему оформления и настройки пользователя.
Вопрос читателя
Чем проектирование экранного изображения отличается от проектирования печатного?
Короткий ответ
Печатное изображение имеет один окончательный вид, экранное — множество состояний, и проектируется правило их порождения, а не отдельная картинка.
1. Определение и границы
Экранная графика — изображение, существующее в интерактивной среде с переменными условиями отображения. Определяющим является не носитель, а наличие состояний.
2. Пиксель как единица и как ложь
Логический пиксель давно не соответствует физическому: устройства отображают несколько физических точек на одну логическую. Проектирование ведётся в условных единицах, а не в точках экрана.
3. Плотность экрана
Одна и та же графика должна работать при разной плотности. Растровое изображение требует нескольких вариантов, векторное масштабируется само — отсюда практическое доминирование вектора в интерфейсе.
4. Вектор и растр
Вектор описывает форму как набор кривых и потому не зависит от размера; растр описывает результат. Выбор между ними определяется не качеством, а тем, что именно изображено.
5. Разметка как изображение
Векторный формат в вебе является частью документа и потому доступен для стилизации и скриптов. Изображение здесь перестаёт быть вложением и становится элементом структуры.
6. Состояния элемента
Кнопка существует минимум в пяти состояниях: обычном, при наведении, в фокусе, нажатом и недоступном. Проектируется набор, и пропуск любого состояния является дефектом.
7. Фокус как обязательное состояние
Видимая рамка фокуса нужна тем, кто управляет клавиатурой. Её удаление ради чистоты вида — самая распространённая ошибка доступности в экранной графике.
8. Отсутствие наведения на касании
На сенсорных устройствах состояния наведения не существует. Интерфейс, где смысл раскрывается при наведении, на телефоне просто не работает.
9. Размер цели касания
Минимальный размер интерактивной области определяется пальцем, а не курсором. Это физическое ограничение, задающее нижнюю границу плотности интерфейса.
10. Адаптивность как правило, а не макет
Проектируется поведение при изменении ширины, а не набор фиксированных макетов. Точка перестройки выбирается по содержанию, а не по популярным размерам устройств.
11. Тёмная тема как второй набор
Тёмное оформление не является инверсией светлого: тени, насыщенность и толщина штриха требуют пересмотра. Это второй полноценный набор решений.
12. Насыщенность в тёмной теме
Яркие насыщенные цвета на тёмном фоне вызывают ореол и утомляют. Палитра тёмной темы обычно приглушённее, и это техническое требование, а не вкус.
13. Уважение к настройкам пользователя
Система сообщает предпочтения: тема, уменьшенная анимация, повышенный контраст, размер шрифта. Игнорирование этих сигналов является ошибкой, а не стилевым решением.
14. Масштабирование шрифта
Пользователь вправе увеличить текст, и макет обязан это выдержать. Вёрстка, ломающаяся при увеличении, не выполняет базового требования.
15. Растеризация шрифта
Экранная отрисовка знака зависит от системы, и один шрифт выглядит по-разному на разных платформах. Полный контроль над видом текста на экране недостижим.
16. Переменные шрифты
Один файл, содержащий непрерывный диапазон начертаний, снижает вес и позволяет подстраивать шрифт под размер и плотность. Это редкий случай, где качество и производительность растут вместе.
17. Вес изображения как проектное ограничение
Каждый килобайт оплачивается временем загрузки. Решение о качестве картинки является одновременно решением о том, увидит ли её пользователь.
18. Формат как компромисс
Современные форматы сжатия дают меньший вес при том же качестве, но требуют запасного варианта. Выбор формата является инженерным, а не визуальным решением.
19. Сдвиг макета при загрузке
Изображение без заранее заданных пропорций сдвигает содержимое при появлении. Это измеримый дефект, напрямую ухудшающий оценку страницы.
20. Изображение как ссылка
На экране картинка бывает органом управления, и тогда к ней применяются требования к элементу: состояние, доступность, размер цели. Смешение декоративного и управляющего изображения запутывает интерфейс.
21. Альтернативный текст
Изображение, несущее смысл, обязано иметь текстовое описание; декоративное — обязано его не иметь. Различение этих двух случаев является редакционной работой.
22. Первый поворот: экран стал переменным
Появление множества размеров и плотностей отменило фиксированный макет. Проектирование перешло от вида к правилу.
23. Второй поворот: компонент вместо страницы
Интерфейс стал собираться из переиспользуемых элементов с описанным поведением. Единицей проектирования стал компонент, а не экран.
24. Третий поворот: пользователь получил право голоса
Системные настройки темы, движения и контраста сделали часть решений принадлежащими пользователю. Дизайнер проектирует диапазон, а не единственный вариант.
25. Что обычно понимают неправильно
Ошибка — проектировать экран как страницу. Страница имеет один вид, экран имеет множество состояний, и макет без описания состояний не является завершённой работой.
26. Контраргумент
Возражение состоит в том, что учёт всех состояний и настроек делает проект бесцветным: попытка работать везде даёт результат, не работающий нигде хорошо.
27. Где контраргумент верен
Он верен для промо-страниц и авторских проектов с известной аудиторией. Там сужение условий является законным решением.
28. Где он не работает
Он не работает для продуктов массового употребления. Игнорирование настроек доступности там не является стилевым выбором и во многих юрисдикциях незаконно.
29. Связь с дизайн-системами
Описание состояний и токенов — то самое, что делает экранную графику передаваемой. Без этого работа не воспроизводится другой командой.
30. Как читать тему сегодня
Проверяйте работу не в идеальных условиях, а в неудобных: при увеличенном шрифте, в тёмной теме, с клавиатуры, на медленном соединении. Там становится видно, что было спроектировано, а что нарисовано.