Можете ли вы поверить в это: несколько дней назад я пошел в свой банк, чтобы проверить свой кредитный рейтинг в Кредитном бюро. Сотрудник банка ввел мои личные данные и отправил запрос. Веб-приложение отреагировало отображением желтого окна сообщения с восклицательным значком о том, что обработка данных все еще продолжается. Он проверил еще несколько раз, но не заметил, что в один момент сообщение изменилось на «Доступен аккаунт». Но окно сообщения не изменилось. Он продолжал проверять еще несколько раз и в конце концов понял, что запрос был успешным.
Я не знаю, что думали разработчики и дизайнеры, создавшие это приложение, но, конечно, это был не пользователь. Этот бедный банковский служащий был очень расстроен. Я не могу представить, как выглядит остальная часть приложения.
Чтобы предотвратить это, разные типы сообщений должны отображаться по-разному. Я считаю, что каждое веб-приложение должно обрабатывать четыре основных типа сообщений: информация, успешное выполнение, предупреждение и ошибка. Каждый тип сообщения должен быть представлен другим цветом и другим значком. Специальный тип сообщения представляет сообщения проверки.
Я покажу вам римейк CSS-сообщений, которые я использовал в своем последнем проекте. Я немного изменил их, чтобы сделать их проще для этого примера. В следующей статье вы узнаете, как создать пользовательский элемент управления ASP.NET, который может поддерживать различные типы сообщений, и как стилизовать его с помощью CSS. Вы также увидите, как подобным образом оформить ValidationSummary.
Давайте сначала кратко рассмотрим типы сообщений.
1. Информационные сообщения
Целью информационных сообщений является информирование пользователя о чем-либо актуальном. Это должно быть представлено синим цветом, потому что люди связывают этот цвет с информацией, независимо от содержания. Это может быть любая информация, относящаяся к действию пользователя.
[img_assist | nid = 3132 | title = | desc = Информационные сообщения | ссылка = нет | выровнять = нет | ширина = 555 | высота = 69]
Например, информационное сообщение может содержать некоторую справочную информацию о текущих действиях пользователя или некоторые советы.
2. Успешные сообщения
Сообщения об успехе должны отображаться после успешного выполнения пользователем операции. Под этим я подразумеваю полную операцию — без частичных операций и без ошибок. Например, в сообщении может быть сказано: «Ваш профиль был успешно сохранен и письмо с подтверждением было отправлено на указанный вами адрес электронной почты». Это означает, что каждая операция в этом процессе (сохранение профиля и отправка электронной почты) была успешно выполнена.
[img_assist | nid = 3133 | title = | desc = Успешные сообщения | ссылка = нет | выровнять = нет | ширина = 555 | высота = 58]
Мне известно, что многие разработчики рассматривают это как тип информационного сообщения, но я предпочитаю показывать этот тип сообщения, используя его собственные цвета и значки — зеленый со значком галочки.
3. Предупреждающие сообщения
Предупреждающие сообщения должны отображаться пользователю, когда операция не может быть завершена в целом. Например, «Ваш профиль успешно сохранен, но письмо с подтверждением не может быть отправлено на указанный вами адрес электронной почты». Или «Если вы не закончите свой профиль сейчас, вы не сможете искать работу». Обычный цвет предупреждения — желтый и значок восклицательный.
[img_assist | nid = 3134 | title = | desc = Предупреждающие сообщения | link = none | align = none | width = 555 | height = 57]
4. Сообщения об ошибках
Сообщения об ошибках должны отображаться, когда операция вообще не может быть завершена. Например, «Ваш профиль не может быть сохранен». Красный очень подходит для этого, так как люди связывают этот цвет с предупреждением любого рода.
[img_assist | nid = 3135 | title = | desc = Сообщения об ошибках | link = none | align = none | width = 555 | height = 62]
Процесс проектирования
Теперь, когда мы знаем, как представлять сообщения пользователям, давайте посмотрим, как реализовать это с помощью CSS. Давайте кратко рассмотрим процесс проектирования.
Я сделаю это настолько простым, насколько смогу. Цель состоит в том, чтобы иметь один div, который реализует единственный класс CSS. Таким образом, HTML-разметка будет выглядеть так:
<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>
Класс CSS добавит фоновое изображение в div, который будет расположен слева вверху. Это также создаст отступ внутри div, чтобы вокруг текста было достаточно пустого пространства. Обратите внимание, что отступ слева должен быть шире, чтобы текст не перекрывался с фоновым изображением.
[img_assist | nid = 3138 | title = | desc = Дизайн-макет | ссылка = нет | выровнять = нет | ширина = 635 | высота = 122]
И вот классы CSS для всех четырех (пять с проверкой) разных типов сообщений:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
Примечание. Значки, используемые в этом примере, взяты из коллекции значков панели инструментов регулятора .
Сообщения проверки
Я заметил, что многие разработчики не могут различить валидацию и другие типы сообщений (например, сообщения об ошибках или предупреждения). Я много раз видел, что сообщение проверки отображается как сообщение об ошибке и вызывает замешательство у пользователя.
Валидация — это все, что связано с пользовательским вводом, и должна рассматриваться именно так. ASP.NET имеет встроенные элементы управления, которые обеспечивают полный контроль над пользовательским вводом. Цель проверки — заставить пользователя ввести все необходимые поля или ввести поля в правильном формате. Следовательно, должно быть ясно, что форма не будет отправлена, если эти правила не совпадают. Вот почему мне нравится стилизовать сообщения проверки в несколько менее интенсивном красном цвете, чем сообщения об ошибках, и использовать красный восклицательный значок.
[img_assist | nid = 3139 | title = | desc = Ошибки валидации | link = нет | align = нет | ширина = 555 | высота = 103]
Класс CSS для сообщения проверки почти идентичен другим (обратите внимание, что некоторые атрибуты определены в предыдущем примере кода):
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
}
Вывод
Сообщения являются важной частью взаимодействия с пользователем, которая часто пропускается. Есть много статей, которые показывают красиво оформленные окна сообщений, но это не просто вопрос дизайна. Он должен предоставлять пользователю значимую информацию, семантически и визуально.
Есть две другие статьи, которые я хотел бы рекомендовать вам:
В моей следующей статье я покажу вам, как создать пользовательский элемент управления ASP.NET, который может обернуть все эти типы сообщений и представить его пользователю. Вы также увидите, как применить этот стиль к элементу управления ValidationSummary.