Сообщения различных типов

Статья от 02.06.09 в категории CSS, Веб-дизайн
Теги: CSS, html, дизайн

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

1. Информационные сообщения

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

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

2. Сообщение об успехе

Такие сообщения отображаются после успешной операции пользователя. Например, сообщение: “Ваш профиль был успешно сохранен, подтверждение было отправлено на адрес электронной почты, который Вы указали”. Это означает, что каждая операция в этом процессе (сохранение профиля и отправка электронной почты) успешно выполняется.

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

3. Предупреждающее сообщение

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

4. Сообщения об ошибках

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

Процесс

Теперь, когда мы знаем как должны выглядеть сообщения для пользователя, давайте посмотрим, каким образом реализовать это с помощью 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-класс устанавливает нужные нам границы, отступы, бэкграунды, иконки для соответствующих сообщений:

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');
}

Иконки я взял в коллекции, из предыдущей статьи.

Посмотреть пример Cкачать архив

Постовой:
ремонт стиральных машин ZANUSSI. Выгодные условия ремонта и обслуживания.

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Оставить комментарий

Подпишись на обновления
через rss или email.

WEBduty.ru css html javascript jquery