НачалоОсновыКомпонентыТексты

Сообщения

Одно устройство для ошибок, успеха, предупреждений и справки: короткий заголовок, текст и следующий шаг.

Устройство

У каждого сообщения три части, каким бы ни был его смысл.

  • Заголовок: три-четыре слова, которые называют событие, например «Счёт отправлен». Текст его не повторяет.
  • Текст: одно-два предложения. Что произошло, причина, если она помогает, и как исправить или что дальше. Пишите так, чтобы его можно было пробежать глазами.
  • Действие: конкретный глагол для следующего шага, например «Повторить» или «Открыть счёт». Никогда «ОК».

По-русски: заголовок «Счёт отправлен», текст «Клиент получит копию по почте.», кнопка «Открыть счёт».

Invoice sent The client gets a copy by email. View invoice
<tk-section-message tone="success">
  <span slot="title">Invoice sent</span>
  The client gets a copy by email.
  <tk-button slot="actions" size="small">View invoice</tk-button>
</tk-section-message>

Следующее действие

Кнопка действия следует правилам подписей действий: глагол и объект, которые называют результат. «Открыть счёт» говорит, куда ведёт кнопка; «ОК» только закрывает сообщение, а с остальным читатель разбирается сам.

Компонент по масштабу

Масштаб Компонент
Проблема с одним полем Текст ошибки поля из Field
Сообщение об одной области страницы Section message
Сообщение обо всём приложении Banner
Неважный отклик после действия Toast
Решение, без которого читатель не может продолжить Dialog

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

Успех

  • Назовите, что сделано: «Счёт отправлен», «Страница опубликована». Не «Готово».
  • Без восторгов. Предложите следующий шаг или отмену.

Подтверждения

  • Заголовок и есть вопрос: «Удалить кампанию?». Без «Вы хотите…» перед ним.
  • Текст называет последствие в одном-двух предложениях.
  • Кнопки — конкретные глаголы, например «Удалить кампанию» и «Продолжить редактирование». Никогда «Да» и «Нет».

Предупреждения и справка

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

Загрузка и ход работы

  • Рассказывайте о шагах долгого ожидания: «Подключение…», «Сборка страницы…».
  • Многоточие отмечает работу в процессе в тексте статуса. Не ставьте его на кнопки и в пункты меню.

Уведомления

  • Отправляйте уведомление, только если оно о читателе, вовремя и по делу. Никогда не используйте его для рекламы, и дайте легко его отключить.
  • Новость — первой: система и так показывает название и иконку приложения.
  • Называйте день: «в понедельник», а не «завтра», потому что многие читают уведомление в другой день.
  • Заголовок — до 30 знаков, свёрнутый текст — до 40.