Изображения и иконографика HIF

1. Область действия

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

Изображение не становится безобидным украшением только потому, что в нём нет слов. Оно может направлять внимание, задавать идентичность, подразумевать состояние системы, делать фактическое утверждение, кодировать стереотип или скрывать информацию.

HIF различает:

• требование стандарта — внешне заданное обязательство, например поведение WCAG, HTML или SVG;
• эмпирическое свидетельство — наблюдение, ограниченное участниками, символами, задачами и метриками исследования;
• платформенная конвенция — усвоенное представление конкретной экосистемы;
• эвристика — отправное правило, требующее проверки в контексте продукта.

Визуальная согласованность не заменяет семантическое понимание.

2. Таксономия ролей

Каждый ассет MUST иметь одну первичную роль:

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

3. Выбор представления

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

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

Запись выбора содержит:

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

4. Фотография

4.1. Контент и композиция

Фотография в роли контента SHOULD:

• показывать предмет и условие, необходимые для задачи;
• сохранять существенный контекст, а не обрезать до вводящего в заблуждение фрагмента;
• иметь фокус, устойчивый к responsive crops;
• сохранять достаточное отделение от наложенных текста и контролов;
• не имитировать кнопки, предупреждения или другие состояния интерфейса;
• предоставлять дату, место, масштаб или подпись, когда от них зависит интерпретация;
• различать репрезентативные, иллюстративные и документальные фотографии.

Драматичный crop, малая глубина резкости или цветокоррекция могут изменить воспринимаемый смысл. Считайте их редакционными преобразованиями, а не нейтральной оптимизацией.

4.2. Люди и инклюзивность

Репрезентация оценивается по всей библиотеке ассетов, а не по одному изображению. Проверяйте:

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

Один демографический «баланс» не доказывает инклюзивность. Для чувствительных контекстов необходимо исследование с затронутыми сообществами.

4.3. Доказательства и манипуляции

Для доказательной фотографии сохраняйте оригинал, неизменяемый хеш, метаданные съёмки, когда это законно, историю редактирования и опубликованную производную. Фиксируйте существенные операции, включая удаление, композитинг, generative fill, изменение перспективы, замену фона и изменения цвета, способные повлиять на интерпретацию.

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

5. Иллюстрация

Иллюстрация уместна, когда она:

• объясняет то, что не может показать фотография;
• безопасно абстрагирует чувствительный или гипотетический материал;
• задаёт связный голос продукта;
• помогает ориентации или запоминанию;
• изображает будущее, внутреннее или невозможное состояние, не выдавая его за фотографию.

Система иллюстраций определяет:

• назначение и запрещённые применения;
• предмет, перспективу и уровень абстракции;
• правила формы, линии, текстуры, света и палитры;
• принципы изображения людей;
• связь с типографикой, иконками и motion;
• адаптации для светлой, тёмной, высококонтрастной темы и печати;
• crop и responsive composition;
• авторство, лицензию и требования к исходным файлам.

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

6. Диаграммы, карты и сложные изображения

6.1. Контракт диаграммы

Диаграмма объявляет:

• вопрос, на который отвечает;
• представленные сущности и связи;
• визуальную грамматику узла, ребра, направления, группы, состояния и неопределённости;
• порядок чтения;
• масштаб и наличие смысла у геометрии;
• источник данных, версию и преобразование;
• эквивалентный структурированный текст или данные;
• поведение на узкой ширине и при большом zoom.

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

6.2. Целостность

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

Диаграмма MAY упрощать. Она MUST раскрывать упрощение, способное изменить решение.

6.3. Карты и скриншоты

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

Скриншоты — ограниченные временем свидетельства. Записывайте версию продукта, платформу, locale, состояние и дату съёмки. Безвозвратно редактируйте личные и секретные данные в опубликованной производной, сохраняя авторизованный оригинал только когда требует политика. Размытый секрет иногда восстанавливается; применяйте настоящее редактирование.

7. Интерфейсные иконки

7.1. Семантика до рисунка

У каждой иконки есть семантическая запись:

концепция
объект, действие, состояние или категория
accessible name
политика видимой подписи
платформенный или собственный источник
контексты допустимого применения
контексты запрещённого применения
направление и локализация
состояния и анимация
свидетельства понимания

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

7.2. Знакомость и семантическая дистанция

На понимание иконки влияют знакомость, осмысленность, конкретность, визуальная сложность и семантическая дистанция между рисунком и целевой концепцией. McDougall, Curry и de Bruijn дают нормативные данные для конкретных символов; их значения показывают измеряемые параметры, а не универсальные оценки новых иконок.

Символ, знакомый дизайн-команде, может быть незнаком целевой группе. Протестируйте интерпретацию без подписи до заявления, что иконка «универсальна». ISO 9186 определяет методы проверки понятности и перцептивного качества графических символов.

7.3. Подписи

Используйте видимую текстовую подпись, когда:

• смысл понимается непоследовательно;
• действие имеет последствия, необычно или специфично для области;
• рядом находятся несколько похожих иконок;
• важна обнаруживаемость при первом использовании;
• локализация меняет метафору;
• иконка представляет абстрактный workflow, а не конкретный объект.

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

Контрол только с иконкой требует программного accessible name, достаточного target, видимого focus и свидетельства, что его видимое представление понимают в контексте.

7.4. Платформенные символы

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

Не копируйте проприетарный ассет Apple, Google, Microsoft или другой системы в неподдерживаемую среду только потому, что его метафора знакома. Фиксируйте лицензию, разрешённые платформы и обязательную атрибуцию.

8. Конструирование иконок

8.1. Согласованность семейства

Семейство иконок контролирует:

• номинальный canvas и keyline zones;
• грамматику filled, outlined или duotone;
• толщину штриха, окончания и соединения;
• характер углов;
• напряжение кривых и обработку окончаний;
• перспективу и объёмность;
• уровни детализации при каждом размере рендера;
• роли цвета и opacity;
• оптическое выравнивание с текстом и соседними иконками.

Сетка координирует построение, но не создаёт оптический баланс механически. Круглые, диагональные и визуально лёгкие формы могут требовать небольших overshoot, неравных геометрических границ или внутреннего padding. Оценивайте отрисованное семейство в целевых размерах.

8.2. Штрих и масштабирование

Не предполагайте, что один vector path хорошо масштабируется от 12 до 128 пикселей. В малых размерах:

• удаляйте несущественные детали;
• защищайте апертуры и негативное пространство;
• при необходимости выравнивайте важные штрихи под условия растеризации;
• проверяйте расширение штриха и соединения;
• сравнивайте заполненные и контурные состояния при равном оптическом весе.

Толщина штриха — свойство семейства, а не универсальная пропорция. Тестируйте низкое разрешение, высокую плотность, увеличение и высокий контраст.

8.3. Глиф, target и состояние

Визуальный глиф, layout box и interactive target — разные геометрии. Увеличение target MUST NOT создавать неожиданное перекрытие другого действия. Selected, disabled, pressed, focus, hover и destructive states требуют большего, чем различие только цветом, когда состояние существенно.

Анимированная иконка сообщает определённый переход или состояние прогресса. Она MUST уважать настройки reduced motion и MUST NOT задерживать или скрывать финальное состояние.

9. Растровая, векторная и responsive-доставка

9.1. Выбор исходника

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

SVG можно стилизовать, масштабировать, делать интерактивным и доступным, но это также документный формат, способный содержать ссылки, анимацию и script. Для недоверенного SVG применяйте определённую политику sanitisation и доставки. Не переводите значимый текст в contours, когда можно использовать настоящий текст.

Исходные растровые masters SHOULD сохранять достаточные разрешение, bit depth и цветовую информацию для разрешённых производных. Не отдавайте master, когда меньшая производная решает задачу отображения.

9.2. Responsive images

Используйте HTML srcset и sizes для выбора разрешения, а <picture> — для настоящего art direction или альтернатив формата. Ширины кандидатов и выражение sizes MUST соответствовать фактическому layout, иначе браузер может загрузить неоправданно большой или визуально недостаточный ресурс.

Определите:

• intrinsic width и height либо эквивалентный aspect ratio;
• focal point и crop-safe zones;
• допустимые варианты aspect ratio;
• минимальный полезный размер предмета;
• узкие, широкие и high-density derivatives;
• поведение при недоступном изображении.

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

9.3. Цвет и тема

Управляйте цветовыми тегами и конвертацией намеренно. Проверяйте доставку sRGB и любой разрешённый wide-gamut path на целевых дисплеях. Для тёмного представления может требоваться отдельный авторский вариант; механическая инверсия способна исказить кожу, фотографии, логотипы, тени и семантические цвета.

Foreground content MUST оставаться различимым в forced colours и высококонтрастной среде либо иметь эквивалентное представление.

10. Текстовые альтернативы

10.1. Контекст, а не инвентаризация

Альтернативный текст передаёт назначение изображения в текущем контексте. Это не обязательно буквальный перечень видимых объектов.

• Простое информативное изображение получает краткий эквивалент добавляемой им информации.
• Функциональное изображение называет действие или назначение перехода, а не свою физическую форму.
• Декоративное или полностью избыточное изображение получает пустую альтернативу и при необходимости исключается из дерева доступности.
• Идентификационное изображение получает нужную в контексте идентичность.
• Изображение текста воспроизводит текст, если он иначе недоступен, хотя изображений текста в целом избегают.
• Сложное изображение получает краткую идентификацию и соседнее либо связанное структурированное объяснение или эквивалент данных.

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

10.2. Сложные альтернативы

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

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

Альтернатива MUST обновляться вместе с изображением. Считайте её обязательным полем ресурса с ответственным за проверку.

10.3. Доступность SVG и иконок

Доступная обработка SVG зависит от того, встроен ли он как изображение, inline content или интерактивный документ. Проверяйте его вычисленные accessible name, description, role, focus order и скрытые декоративные descendants в реальных комбинациях браузера и assistive technology.

Не помещайте каждый декоративный контур в дерево доступности. Интерактивный SVG требует полноценной инженерии клавиатуры, фокуса, имени, роли, состояния и альтернативного контента; одного элемента <title> недостаточно для полной доступности.

11. Локализация и культурный риск

Каждая система изображений фиксирует:

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

Текста внутри иконки или изображения SHOULD избегать. Когда он необходим, его нужно локализовать и сохранить читаемым. Направленному контенту могут потребоваться авторские RTL-варианты. Не отражайте автоматически часы, медиаконтролы, товарные знаки, физические продукты и другие ненаправленные объекты.

Культурно-инклюзивная проверка — не поиск одного глобально нейтрального изображения. Некоторым концепциям нужны намеренные локальные варианты.

12. Сгенерированные ассеты, происхождение и раскрытие

12.1. Производственная запись

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

идентификатор ассета и хеш
ответственный человек и reviewer
инструмент, провайдер и модель/версия, когда доступны
дата создания
prompt или производственный brief, когда хранение законно
исходные и reference assets
заявленные права и ограничения
существенные изменения
проверка безопасности содержания и фактов
изображённые люди или места
решение о раскрытии
статус C2PA или другого provenance
опубликованные производные

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

12.2. Раскрытие

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

C2PA Content Credentials могут нести подписанные утверждения о происхождении и истории изменений. Это сигналы происхождения, а не доказательство истинности изображённого события. Отсутствие credentials означает неизвестное происхождение, а не человеческое авторство; действительные credentials не делают обманный композит правдивым.

Сохраняйте поддерживаемое provenance через pipeline производных и тестируйте, что переживает загрузку, изменение размера, перекодирование и экспорт. Предоставляйте понятный человеку резервный вариант, когда машиночитаемые сведения о происхождении недоступны.

12.3. Запрещённое применение

Сгенерированные или изменённые изображения MUST NOT:

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

13. Сжатие и производительность

13.1. Формат и качество

Выбирайте формат по контенту и поддержке, а не по моде:

• фотографический контент: сравните современные lossy-форматы и совместимый резервный вариант, где он нужен;
• плоский цвет, прозрачность и точные пиксели: сравните lossless raster и vector;
• иконки и диаграммы: предпочитайте безопасный vector или растр целевого размера;
• анимация: по возможности используйте эффективную управляемую media-форму, а не большую последовательность кадров.

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

13.2. Приоритет загрузки

Изображение, вероятно являющееся Largest Contentful Paint, должно обнаруживаться в начальной разметке, иметь подходящий приоритет и не получать безразборный lazy loading. Изображения ниже fold SHOULD откладываться, когда это снижает конкуренцию без вреда взаимодействию.

Резервируйте layout-space intrinsic dimensions или aspect ratio. Не загружайте большой desktop crop на узком устройстве. Не делайте preload нескольких взаимоисключающих hero-кандидатов без измеренного обоснования.

13.3. Запись производительности

Измеряйте:

• encoded bytes и decoded dimensions;
• кандидата, выбранного в каждом тестовом viewport и density;
• начало, приоритет, завершение запроса и cache result;
• стоимость decode и render;
• layout shift;
• влияние на LCP и взаимодействие;
• использование памяти крупными или повторными изображениями;
• поведение при ограниченных network, CPU и memory;
• результат при отказе ресурса.

14. Лицензирование, согласие и атрибуция

Для каждого production asset храните:

источник и дата получения
создатель и правообладатель
исходный файл и криптографический хеш
лицензия или договор и версия
права на коммерческое использование, изменение и производные
территория, срок, среда и seat limits
model, property и location releases, где применимо
текст и размещение атрибуции
обязательства share-alike или уведомления
проверка товарного знака и права на использование образа
ограничения генерации/обучения, если указаны
срок окончания и план замены

Обладание файлом, доступность в поисковике, пост в соцсети или stock preview не дают прав повторного использования. Ярлык Creative Commons должен быть сопоставлен точным условиям лицензии; attribution, share-alike, non-commercial и no-derivatives существенно различаются.

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

15. Токены и метаданные ассетов

Токены SHOULD выражать семантическую обработку, а не отдельные имена файлов:

image.radius.content
image.scrim.on-light
image.scrim.on-dark
image.aspect.hero
image.aspect.thumbnail
icon.size.control
icon.size.status
icon.stroke.default
icon.colour.interactive
icon.colour.danger
icon.optical-adjust.<name>

Каждый asset manifest SHOULD включать:

id
роль
семантическая концепция
source master и derivatives
intrinsic dimensions и aspect ratios
focal point и safe zones
light/dark/high-contrast variants
locales и direction
альтернативный текст или стратегия альтернативы
лицензия, атрибуция и releases
создатель, provenance и существенные изменения
раскрытие генерации
требования к производительности
ответственный, версия и дата пересмотра

Компоненты запрашивают ассет по семантической роли и состоянию. Переопределение темы MUST NOT заменять его ассетом с другим смыслом, более слабыми правами или отсутствующими метаданными доступности.

16. Алгоритм выбора ассета

1. сформулировать задачу, утверждение или опыт, который должен поддержать ассет;
2. классифицировать его первичную роль и чувствительность как доказательства;
3. решить, яснее ли текст, структурированные данные или существующий платформенный символ;
4. определить контрольные этапы семантики, доступности, культуры, права и производительности;
5. найти или создать кандидатов, с самого начала фиксируя происхождение;
6. проверить фактический контент, устойчивость crop, контраст и responsive variants;
7. проверить понимание иконки, знакомость и семантическую дистанцию с целевыми людьми, когда иконка функциональна;
8. написать и проверить текстовую альтернативу и структурированный эквивалент;
9. проверить локализацию, инклюзивность, безопасность, манипуляцию и раскрытие;
10. закодировать и сравнить производные в целевых размерах и условиях;
11. проверить лицензию, releases, attribution, hashes и сохранение в pipeline;
12. зарегистрировать токены и метаданные ассета;
13. регрессионно проверить доставку, доступность и provenance;
14. отслеживать жалобы, неправильное использование и полевое понимание.

Голосование по эстетическим предпочтениям не может переопределить проваленную проверку прав, правдивости, доступности или понимания.

17. Матрица приёмки

Пороги и тестовые группы задаются до финального сравнения ассетов.

18. Чек-лист выпуска

• У каждого ассета есть первичная роль и владелец.
• У функциональных иконок есть accessible names и видимые подписи, где они нужны.
• У иконок с последствиями есть свидетельства понимания.
• Иконки остаются согласованными и различимыми во всех поставляемых размерах и состояниях.
• Существенный смысл переживает responsive crops, тёмную тему и большой zoom.
• Информативные и сложные изображения имеют актуальные текстовые альтернативы или эквиваленты данных.
• Варианты локализации и двунаправленности прошли проверку.
• Документальный и сгенерированный контент не смешиваются.
• Оригиналы, хеши, существенные изменения и решения о раскрытии записаны.
• Выбор кандидата, dimensions, priority и резервирование layout корректны.
• Лицензии, releases и атрибуция полны для каждой производной.
• Состояния failure, reduced motion, forced colour и assistive technology проходят проверку.

Источники

• W3C — Web Content Accessibility Guidelines (WCAG) 2.2
• W3C WAI — Images Tutorial and alt decision tree
• W3C — Scalable Vector Graphics (SVG) 2
• W3C — SVG Accessibility Support
• WHATWG — HTML Standard: embedded content
• ISO — ISO 9186-1:2014, method for testing comprehensibility
• ISO — ISO 9186-2:2008, method for testing perceptual quality
• McDougall, Curry and de Bruijn (1999) — Measuring symbol and icon characteristics
• Apple — Human Interface Guidelines: Icons
• Google Material Design 3 — Icons
• Google web.dev — Responsive images
• Google web.dev — Image performance
• C2PA — Content Credentials technical specification
• NIST — Artificial Intelligence Risk Management Framework
• Creative Commons — About CC licences
• ACM — Code of Ethics and Professional Conduct