Александр
Принципы UI-дизайна помогают человеку понять экран, выполнить действие и разобраться с результатом. Для этого нужны ясная структура, единообразные элементы, понятная обратная связь и реальная возможность исправить ошибку. Внешняя аккуратность полезна, когда она поддерживает эти задачи.
Разберём восемь принципов на одном примере: человек выбирает формат и экспортирует отчёт. Такой сценарий показывает не только спокойный экран, но и ожидание, успех и ошибку — состояния, в которых особенно заметно качество интерфейса.
8 принципов UI-дизайна
- Упростите основную задачу, сохранив нужные условия.
- Используйте одинаковые правила для одинаковых действий.
- Выстройте визуальную иерархию.
- Передавайте смысл цветом и дополнительными признаками.
- Показывайте действительное состояние операции.
- Дайте возможность отменить действие и исправить ошибку.
- Говорите на языке пользователя.
- Предусмотрите разные способы взаимодействия.
Это практические ориентиры для разбора макета. Родственные принципы видимости состояния, согласованности, контроля и предотвращения ошибок описаны в эвристиках Якоба Нильсена (на английском). Ниже применим их к конкретным решениям на экране.
Как применять принципы к экрану и его состояниям
1. Упростите задачу, а не только изображение экрана
В окне экспорта нужны название отчёта, формат и действие. Редкие дополнительные параметры можно раскрывать отдельно. Но нельзя прятать условие, от которого зависит результат: например, какие строки попадут в файл — все или только отфильтрованные.
Пустое пространство и короткая форма помогают только тогда, когда человек понимает, что произойдёт. Оставьте рядом с кнопкой краткое описание результата: «Будут экспортированы 24 выбранные записи». Простота не требует убирать полезные подписи или узнаваемый характер бренда.
2. Сохраняйте одинаковые правила
Одинаковые действия должны иметь одинаковые названия и поведение. Если в одном разделе «Скачать» начинает загрузку, а в другом открывает ещё три настройки, это различие нужно объяснить или устранить. Цвет, расположение и подпись кнопки вместе формируют ожидание.
В нашем примере основная кнопка называется «Экспортировать», ссылка на готовый файл — «Скачать файл». Эти действия различаются по смыслу, поэтому одинаковая подпись была бы менее понятной. Единообразие — это общие правила, а не требование сделать все элементы одинаковыми.
3. Сделайте следующий шаг заметным
Заголовок объясняет задачу, настройки задают результат, основная кнопка запускает действие. Отступы объединяют связанные элементы; размер и насыщенность текста показывают их роль. Если предупреждение о неполных данных потерялось среди второстепенных подписей, визуальная иерархия не выполняет свою работу.
Сначала посмотрите на экран в уменьшенном масштабе: какое действие заметно первым? Затем прочитайте текст в рабочем размере. Крупный заголовок не компенсирует неразличимую подпись или длинную команду, обрезанную внутри кнопки. Для текста отдельно настройте высоту строки и ритм абзацев.
4. Не передавайте смысл только цветом
Зелёная плашка без текста не объясняет, что именно завершилось. Напишите «Файл готов» и дайте действие «Скачать файл». При ошибке назовите проблему словами, а цвет используйте как дополнительный сигнал. Это помогает и людям с особенностями цветового восприятия, и тем, кто видит интерфейс при плохом освещении.
Для обычного текста WCAG 2.2 уровня AA устанавливает минимальный контраст 4,5:1, для крупного — 3:1; определения размеров и исключения приведены в пояснении W3C (на английском). Контраст и запрет полагаться только на цвет — разные требования: хорошее значение контраста не делает одну красную рамку достаточным объяснением ошибки.
Роли основных, нейтральных и сигнальных цветов удобно заранее разнести в цветовой схеме приложения.
5. Различайте ожидание, успех и ошибку
После нажатия «Экспортировать» система может сначала принять запрос и только затем подготовить файл. Сообщение «Готово» сразу после клика обманет ожидание. Пока файл создаётся, покажите «Готовим файл» и исключите случайный повторный запуск. Когда файл действительно доступен, появится ссылка на скачивание.
Если подготовка завершилась ошибкой, сохраните выбранные параметры и предложите понятный следующий шаг. «Не удалось подготовить файл. Повторите попытку» полезнее, чем бесконечный индикатор. Не обещайте автоматическое повторение, если оно не предусмотрено.
6. Дайте реальный контроль
Контроль означает возможность изменить решение, а не ощущение, что выбор существует. До запуска экспорта человек должен уметь поменять формат и закрыть окно без потери рабочего контекста. После ошибки — повторить действие, не заполняя настройки заново.
Различайте «Закрыть окно» и «Отменить экспорт». Закрытие может лишь спрятать диалог, пока операция продолжается. Кнопку отмены показывают только тогда, когда система действительно умеет остановить действие; иначе объясняют, где найти результат. При удалении данных отдельно определяют, что обратимо и до какого момента.
7. Называйте результат словами пользователя
«Экспортировать отчёт» понятнее, чем «Инициировать выгрузку сущностей». Названия должны соответствовать предмету работы и тому, что человек получит. В сообщении об ошибке не оставляйте только внутренний код: поясните проблему и доступное действие.
Знакомая иконка помогает распознаванию, но не заменяет подпись там, где действие неоднозначно. Корзина обычно обозначает удаление или раздел удалённых объектов; восстановление — отдельная команда. На кнопке рядом с файлом подпись «Удалить» или «Восстановить» устраняет эту неоднозначность.
8. Проектируйте доступное взаимодействие
Проверьте порядок перехода между полями и кнопками с клавиатуры, видимость фокуса и подписи элементов. В диалоге пользователь должен понимать, где находится, и иметь понятный способ его закрыть. При увеличении текста названия и сообщения не должны перекрывать основные действия.
В макете обозначьте состояния фокуса, ошибки и ожидания. В работающем интерфейсе проверьте их с клавиатурой и вспомогательными технологиями: скриншот не показывает, сможет ли программа чтения с экрана сообщить о завершении экспорта. Пояснение W3C об использовании цвета (на английском) помогает отделить визуальные решения от единственного способа передать смысл.
Соберите четыре состояния в Pixso
В одном дизайн-файле расположите рядом четыре фрейма окна экспорта: исходное состояние, подготовка, готовый файл и ошибка. Сохраните расположение заголовка и параметров, меняя только те элементы, которые зависят от состояния. Так команде легче увидеть, что происходит после одного и того же действия.
- Исходное состояние: название отчёта, выбор формата, описание включённых данных и кнопка «Экспортировать».
- Подготовка: сообщение «Готовим файл»; повторное нажатие не создаёт ещё одну операцию.
- Успех: сообщение «Файл готов» и отдельная команда «Скачать файл».
- Ошибка: понятное объяснение, сохранённые настройки и команда «Повторить».
Свяжите экраны в прототипе и обсудите с командой оба исхода — успешный и неуспешный. В комментариях уточните, закрывает ли крестик только диалог или отменяет работу. Такие договорённости нужны разработчику наряду с размерами и цветами.
Этот прототип показывает задуманный сценарий. Подготовку реального файла, обработку сетевых ошибок и поведение клавиатурного фокуса затем проверяют в работающем продукте. Чтобы проверить, понимает ли человек состояние и следующий шаг, проведите юзабилити-тестирование сценария.
В редакторе интерфейсов Pixso можно начать с этих четырёх экранов и обсудить различия с командой до передачи макета в разработку.
