Как стать автором
Обновить

Веб-формы «Светофор»

Время на прочтение2 мин
Количество просмотров2.7K
Процесс разработки интерфейсов форм — довольно сложная процедура. Большинство дизайнеров стараются сделать их красивыми, немалое количество верстальщиков пытаются облегчить себе работу, упрощая эти красивости. Бывает, что находятся аргументы. Бывает, что на эту красоту просто нет достаточного количества времени. Бывает, что просто верстальщику не хочется особо заморачиваться с изящными «па» дизайнера. Но это нормальный процесс взаимодействия, в первую очередь, человека с человеком.

Самый простой метод — это некая унификация веб-форм в целом, будь то цветовые решения или стандартизированные иконки. Я решил предложить вам на суд расцветку для текстовых полей веб-форм. Она вполне может подойти и к спискам, но даже Internet Explorer 7 не разрешает расставлять какие-либо стили на свои любимые select'ы. Недолго думая над названием, я решил, что слово «Светофор» лучше всего отражает смысл этой унификации.


image

По дефолту все поля серые, обязательные для заполнения поля — желтые. Аналогично со сфетофорным собратом, желтый должен сообщать пользователю — «Подожди! Стоп! Тут что-то важное.». Сопроводить это всплывающим альтом или иконкой фоновой не помешает, разумеется, но выделенные поля всегда привлекают к себе внимание.

А как же валидация, спросите Вы?

image

Именно так будут выглядеть валидируемые поля — когда в них введено правильное значение, они становятся зелеными. Зелеными также становятся поля, обязательные для заполнения, в случае, если они заполнены. Вполне логично, на мой взгляд.

image

Если же при валидации пользователь заполнил какое-нибудь поле неверно — оно становится красным и это очень четко отражает его состояние. Как видите, валидируемыми могут быть не только обязательные поля.

Счастливая концовка


По-моему, получилась вполне интуитивная форма: желтый — предупреждение, зеленый — валидно, красный — невалидно.

Я не считаю себя дизайнером, но если кому-нибудь хочется лицезреть подобную форму в деле — я с удовольствием сверстаю ее и выложу в дополнение к этому посту.
Теги:
Хабы:
+52
Комментарии50

Публикации

Изменить настройки темы

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн