В этой статье
Александр
Обводка помогает отделить поле ввода от фона, показать выбранную карточку или обозначить фокус. Она полезна, когда передаёт конкретный смысл. Разберём, как выбрать толщину, цвет и состояния границ элементов, а затем соберём поле ввода в Pixso.
В дизайне формы обводку нужно оценивать вместе с подписью поля, подсказкой и сообщением об ошибке. Красивая линия сама по себе не объясняет, что вводить и как исправить значение.
Для чего нужны границы элементов
Обводки, разделители и контуры фокуса выполняют разные задачи. Не стоит использовать одну и ту же линию для всех случаев: пользователь должен различать структуру экрана и состояние элемента управления.
- Группировка. Разделитель или рамка показывают, какие элементы относятся к одному блоку.
- Состояние. Изменение обводки помогает обозначить фокус, выбор или ошибку. Для ошибки добавьте понятное сообщение, чтобы смысл не зависел только от цвета.
- Доступное действие. Граница может помогать распознать поле или кнопку. Состояние наведения дополняет это обозначение, но не должно быть единственным признаком интерактивности.
Пять принципов работы с обводками
1. Назначайте линии конкретную задачу
Если отступов и структуры уже достаточно для разделения блоков, дополнительная рамка может быть лишней. Если без границы трудно распознать поле ввода, её нужно сделать заметной. Решение зависит от задачи компонента.
2. Используйте согласованные правила
Задайте толщину, цвет и скругление для типов компонентов. У кнопки и большой карточки могут быть разные радиусы, если это следует из системы размеров и вложенности. Последовательность важнее одинаковых значений повсюду.
3. Выбирайте толщину под размер и состояние
Тонкая линия подходит для спокойного разделения, более заметная — для выбранного состояния или фокуса. Проверяйте результат в масштабе интерфейса и на целевом устройстве. Толщина 1 px — возможный вариант, а не обязательное правило.
4. Учитывайте фон и соседние элементы
Одна и та же обводка выглядит по-разному на белом, цветном и тёмном фоне. Сравните карточку внутри списка и в отдельном блоке. При необходимости используйте поверхность или отступ, чтобы усилить группировку без лишних линий.
5. Проверяйте контраст по назначению
WCAG 1.4.11 требует контраст не менее 3:1 для визуальной информации, необходимой для распознавания элемента управления или его состояния, с предусмотренными стандартом исключениями. Это не требование ко всем декоративным рамкам. Если только граница позволяет увидеть поле ввода, сравните её цвет с прилегающим фоном.
Пример: поле ввода для формы регистрации
Соберём поле с подписью, обводкой и состояниями. Начните с обычного состояния, затем добавьте фокус и ошибку — именно сравнение вариантов показывает, достаточно ли понятны визуальные различия.
В Pixso можно настроить цвет, толщину и положение обводки, а затем сохранить поле как компонент. Повторяющиеся элементы удобнее поддерживать через общие компоненты и стили, учитывая локальные переопределения в экземплярах.
Как оформить поле ввода в Pixso
Для примера используем поле адреса электронной почты. Подпись должна оставаться видимой и после ввода текста.
Шаг 1. Откройте Pixso в браузере и войдите в рабочее пространство.
Шаг 2. Создайте файл дизайна и добавьте фрейм формы. Разместите над будущим полем подпись «Электронная почта».
Шаг 3. Нарисуйте прямоугольник подходящего размера, например 327 × 46 px, и задайте скругление 10 px. Для белого фона можно начать с внутренней обводки 1 px цвета #767676 при непрозрачности 100%. Затем проверьте поле рядом с остальными элементами и настройте отдельный контур фокуса.
Шаг 4. Создайте компонент и подготовьте варианты обычного состояния, фокуса и ошибки. Изменения основного компонента передаются связанным экземплярам с учётом переопределений. Для библиотеки в других файлах используйте принятый в команде порядок публикации и применения обновлений.
Добавьте состояние «ошибка и фокус одновременно»
После отправки формы человек часто возвращается к неверно заполненному полю с клавиатуры. В этот момент у поля уже есть ошибка и появляется фокус. Если фиолетовая линия полностью заменит красную, ошибка может стать незаметной. Если останется только красная, будет трудно понять, где сейчас находится фокус.
Для нашего поля сохраните внутреннюю границу как часть его геометрии, а фокус покажите отдельным внешним контуром. В ошибочном состоянии добавьте сообщение под полем. Конкретные цвета ниже — параметры этого примера на белой поверхности, а не обязательная палитра для любой формы.
| Состояние | Граница и фокус | Текст рядом с полем |
|---|---|---|
| Обычное | Внутренняя обводка 1 px, #767676 | Постоянная подпись «Электронная почта» и необходимая подсказка |
| Фокус | Та же граница; внешний контур 2 px, #5B45E0, с промежутком 2 px | Подпись остаётся видимой; подсказка не исчезает из-за фокуса |
| Ошибка | Внутренняя обводка #B42318 | Сообщение объясняет проблему, а не только повторяет слово «Ошибка» |
| Ошибка и фокус | Красная граница сохраняется; снаружи виден отдельный фиолетовый контур | Сообщение остаётся доступным, пока значение не прошло повторную проверку |
Промежуток между красной границей и фиолетовым контуром отделяет два сигнала. Сравнивайте каждый значимый цвет с реально прилегающей поверхностью. На другом фоне значения нужно проверить заново. Не проверяйте только контраст красного и серого между собой: эти состояния обычно не находятся рядом на экране.
Проверьте исправление адреса от начала до конца
Пусть человек ввёл «alexstudio.example» и отправил форму. Вместо общего сообщения покажите у поля: «В адресе не хватает @. Например: name@example.com». Само значение сохраните, чтобы не заставлять человека набирать его заново. WCAG 3.3.1 требует текстового описания обнаруженной ошибки: одна красная рамка эту задачу не решает.
После возврата к полю клавишей Tab должны быть видны и ошибка, и положение фокуса. Человек исправляет адрес на «alex@studio.example». Заранее определите, когда повторяется проверка: после изменения значения, после выхода из поля или при следующей отправке. Для этого примера проверим формат после выхода из поля и уберём ошибку только при успешной проверке, а не просто при получении фокуса.
Правильный формат адреса не доказывает существование почтового ящика. Если продукту нужно подтверждение владения адресом, это отдельный шаг. На уровне визуального компонента достаточно ясно отобразить текущий результат проверки и не обещать, что аккаунт уже создан.
Сохраните размеры и объясните поведение компонента
В Pixso разместите четыре варианта поля рядом и используйте одинаковые подпись, значение и размеры. Так видно, какое свойство меняется. Для состояния ошибки добавьте реалистичное сообщение в две строки и проверьте, что следующий элемент формы сдвигается вниз, а не перекрывается.
Не увеличивайте внешнюю ширину поля при переключении состояния. В примере внутренняя обводка сохраняет размер прямоугольника, а внешний контур фокуса не должен сдвигать соседние элементы в реализации. Оставьте для него место: край карточки или обрезка содержимого родительского блока могут скрыть часть контура.
Передайте разработчику условия появления ошибки, момент повторной проверки, сохранение введённого значения и поведение фокуса. В работающей форме пройдите тот же путь с клавиатуры. Требование видимого фокуса относится к доступности управления, поэтому статичный вариант компонента не заменяет такую проверку.
Проверьте поле с коротким и длинным текстом, сообщением об ошибке и навигацией с клавиатуры в работающем интерфейсе. Сохраните параметры обводок в системе компонентов, чтобы новые формы использовали те же правила.
