Александр
Обводка помогает отделить поле ввода от фона, показать выбранную карточку или обозначить фокус. Она полезна, когда передаёт конкретный смысл. Разберём, как выбрать толщину, цвет и состояния границ элементов, а затем соберём поле ввода в 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. Создайте компонент и подготовьте варианты обычного состояния, фокуса и ошибки. Изменения основного компонента передаются связанным экземплярам с учётом переопределений. Для библиотеки в других файлах используйте принятый в команде порядок публикации и применения обновлений.
Проверьте поле с коротким и длинным текстом, сообщением об ошибке и навигацией с клавиатуры в работающем интерфейсе. Сохраните параметры обводок в системе компонентов, чтобы новые формы использовали те же правила.
