HIF / Документация / Теория дизайна

Основания дизайна

Статус: нормативный метод

Версия: 0.1

Документ определяет, как HIF превращает знания о восприятии, композиции и эстетическом суждении в обоснованные дизайн-решения. Он относится к выразительной форме интерфейса, но не объявляет вкус, моду или прецедент дизайн-системы универсальным законом.

1. Дизайн — система решений в условиях ограничений

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

семантический
что существует, что это значит и у кого есть полномочия

структурный
как организованы содержание, действия, состояния и пути

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

выразительный
визуальный, словесный, звуковой и тактильный характер продукта

Этот порядок не является водопадным процессом. Работа может переходить между слоями, но выразительный выбор НЕ ДОЛЖЕН молча изменять смысл, полномочия или операбельность. Красота не компенсирует неверную предметную модель, недоступный элемент управления, обманную иерархию или отсутствующее состояние.

Дизайн-решение полно только тогда, когда указаны:

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

2. Что означает качество дизайна

HIF оценивает качество дизайна как вектор, а не одно число:

Измерение	Вопрос
верность семантике	Сохраняет ли представление реальные объект, действие, состояние и последствие?
воспринимаемость	Можно ли обнаружить значимые различия в ожидаемых условиях?
понятность	Могут ли люди сформировать достаточную интерпретацию без скрытого знания?
операбельность	Можно ли выполнить действия через поддерживаемые способы ввода и ассистивные технологии?
связность	Получают ли равные смыслы равное представление во всей системе?
пригодность	Соответствует ли форма задаче, среде, частоте, опыту и риску?
выразительность	Передаёт ли опыт нужный характер, не скрывая функцию?
доступность	Поддерживаются ли значимые различия в возможностях, оборудовании и предпочтениях?
добросовестность	Честно ли представлены акцент, срочность, доказательства, происхождение и выбор?
устойчивость	Можно ли реализовать, регулировать, локализовать, поддерживать и развивать дизайн?

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

3. Восприятие организовано, избирательно и зависит от контекста

3.1. Организация — это вывод

Люди воспринимают не изолированные пиксели. Зрительная система организует элементы в предполагаемые объекты и отношения по таким признакам, как:

близость;
сходство;
соединённость;
общая область;
непрерывность;
замкнутость;
синхронное изменение;
контраст фигуры и фона;
усвоенное соглашение.

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

Требования:

элементы, действующие как единое целое, СЛЕДУЕТ объединять перцептивно и семантически;
несвязанные элементы НЕЛЬЗЯ представлять как причинно или операционно связанные;
визуальная группировка, структура документа и связи доступности ДОЛЖНЫ согласовываться;
нужная для задачи группа ДОЛЖНА оставаться понятной при zoom, reflow, forced colours и поддерживаемой локализации;
группировку НУЖНО проверять с реалистичным содержанием, а не только на прямоугольниках-заполнителях.

3.2. Фигура и фон

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

Наложение ДОЛЖНО сохранять:

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

Декоративная глубина НЕ ДОЛЖНА подразумевать несуществующую иерархию действий.

3.3. Внимание и заметность

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

HIF требует:

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

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

3.4. Первое впечатление и обдуманная оценка

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

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

Мгновенное впечатление, выполнение задачи, понимание, доверие и длительное использование оцениваются отдельно.

4. Иерархия — модель чтения, направленная задачей

Визуальная иерархия предлагает порядок обнаружения и интерпретации информации. Её создают:

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

Для каждого важного представления СЛЕДУЕТ явно описать иерархию:

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

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

Критерии приёмки:

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

5. Композиция

5.1. Выравнивание

Выравнивание создаёт видимые отношения и сокращает произвольные положения. Продукту СЛЕДУЕТ использовать небольшой явный набор принципов выравнивания. Оптическая коррекция МОЖЕТ отступать от математической, если результат задокументирован и проверен.

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

5.2. Пропорция и масштаб

Масштаб сообщает роль и отношение. Шкала МОЖЕТ быть модульной, плавной, зависимой от содержания или заданной платформой. HIF не предписывает золотое сечение, числа Фибоначчи, сетку в четыре или восемь пикселей либо иное предпочтительное число.

Шкала приемлема, когда она:

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

5.3. Ритм

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

Ритм проверяют на полных сценариях, а не на одном идеальном экране:

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

5.4. Баланс и напряжение

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

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

5.5. Свободное пространство

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

Решение учитывает:

силу отношения;
задачу чтения и сравнения;
размер экрана и дистанцию;
способ ввода;
профиль плотности;
расширение при локализации;
объём и срочность данных.

6. Единство, разнообразие и согласованность

Есть несколько видов согласованности:

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

Перцептивное сходство НЕЛЬЗЯ использовать для семантически разных действий. Жёсткое визуальное однообразие также НЕ ДОЛЖНО мешать различению важных последствий.

Разнообразие оправдано, когда оно:

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

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

7. Сложность, простота и плотность

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

HIF различает:

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

Дизайну СЛЕДУЕТ устранять случайную сложность, делая существенную сложность доступной для понимания и управления. Простота — результат для конкретной задачи, а не эстетика пустоты.

Профили плотности ДОЛЖНЫ сохранять семантику и операбельность. Компактный профиль может уменьшать интервалы и показывать больше сравнимых данных, но НЕ ДОЛЖЕН удалять доступные имена, видимый фокус, восстановление после ошибки или необходимое состояние.

8. Возможность действия, сигнификатор, соответствие и обратная связь

HIF точно использует термины:

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

Дизайн-ревью ДОЛЖНО задать пять вопросов:

Возможно ли предполагаемое действие?
Может ли нужный человек его обнаружить?
Может ли он предсказать область и последствие?
Ограничено ли недопустимое или опасное действие пропорционально риску?
Может ли он определить результат и восстановиться?

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

9. Культура, язык и соглашение

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

Дизайн НЕ ДОЛЖЕН объявляться культурно универсальным по одному рынку. Для каждой локали:

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

10. Алгоритм дизайн-решения

Для каждого существенного выразительного решения:

Назвать решение. Указать объект, состояние, путь или свойство системы.
Задать результат. Определить, что люди должны воспринять, понять или сделать.
Зафиксировать ограничения. Записать доступность, безопасность, платформу, бренд, производительность, содержание и реализацию.
Классифицировать утверждение. Разделить стандарт, эмпирические данные, соглашение, эвристику, политику продукта и гипотезу.
Выбрать переменные. Назвать минимальный полезный набор свойств компоновки, шрифта, цвета, изображения, движения, звука или тактильного отклика.
Создать альтернативы. Включить структурно отличающийся вариант, а не только косметические варианты.
Предсказать механизмы и отказы. Объяснить, почему варианты могут сработать и где потерпеть неудачу.
Сделать прототип нужной точности. Не отвечать статичной картинкой на вопрос о взаимодействии, reflow, движении или ассистивной технологии.
Оценить по порогам. Проверить семантику, восприятие, действие, выразительность и реализацию.
Записать и регулировать. Сохранить решение, доказательства, влияние на токены и компоненты, исключение, владельца и условие пересмотра.

11. Запись дизайн-гипотезы

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

Запись ДОЛЖНА разделять наблюдаемый факт, вывод аналитика, эстетическое суждение и решение продукта.

12. Минимальная матрица приёмки

Область	Необходимое доказательство
смысл	семантика объекта, команды и состояния согласована с моделью взаимодействия
иерархия	нужные люди находят контекст, состояние и следующее действие
группировка	визуальные, структурные и программные отношения согласованы
читаемость	поддерживаемые текст, zoom, контраст и крайнее содержание проходят проверку
адаптация	поддерживаемые viewport, язык, направление, тема и предпочтения проходят проверку
действие	проходят клавиатура, указатель, touch и применимые ассистивные технологии
выразительность	нужный характер распознаётся без ущерба пониманию и доверию
реализация	заданы токены, ассеты, лицензии, производительность и состояния компонентов
доказательства	запись решения содержит источник, метод, результат, ограничение и владельца

Одобрения только по снимку состояния по умолчанию недостаточно.

13. Антизаконы

HIF прямо отвергает как универсальные правила:

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

Каждое из них может стать ограниченной гипотезой в подходящем контексте. Ни одно не заменяет анализ и доказательства.