Ссылку оформляют как элемент навигации: она ведёт на другую страницу, раздел или внешний ресурс. Кнопка запускает действие - например, отправляет форму. Чтобы посетитель не путал их, различайте форму, цвет и состояния элементов, а назначение проверяйте по результату нажатия. Эти правила подходят для макетов сайтов и их адаптивных версий.
Границы между ссылкой и кнопкой: что проверить в макете
- Ссылка ведёт к месту или ресурсу, кнопка выполняет действие на текущем экране.
- Текст ссылки должен выглядеть кликабельным и отличаться от обычного текста.
- Не полагайтесь только на цвет: используйте подчёркивание или другой устойчивый визуальный признак.
- Предусмотрите заметные состояния при наведении, фокусе и нажатии.
- Проверьте элемент в контексте страницы и на узком экране.
Сначала определите роль элемента: переход или действие
Начните с формулировки результата нажатия. Если пользователь переходит на другую страницу, к разделу или файлу, используйте ссылку. Если он отправляет данные, открывает диалог или меняет состояние интерфейса, нужен кнопочный элемент.
Такой подход подходит для навигации, текстовых переходов и ссылок в карточках. Не оформляйте кнопку как ссылку только ради компактного вида, если она запускает действие. При заказе услуги вроде создания дизайна сайта под ключ зафиксируйте это правило в дизайн-системе, чтобы подрядчик применял его во всех макетах.
Проверьте визуальные признаки ссылки в интерфейсе
Перед правками соберите контекст: ссылку нужно оценивать среди соседнего текста и элементов, а не изолированно. Для работы понадобятся:
- макет страницы и её адаптивных состояний;
- текст ссылки и точное назначение перехода;
- цвета текста и фона, а также принятые в проекте стили;
- доступ к макету и возможность просмотреть состояния элемента;
- согласованный пример кнопки, с которой ссылку могут спутать.
Сравните элементы на одном экране. В типичном интерфейсе ссылка чаще остаётся частью текстового потока, а кнопка имеет более выраженную форму и визуальный вес. Это не жёсткое требование к геометрии, а ориентир для последовательного дизайна ссылок на сайте.
Подберите цвет и подчёркивание для заметного текста-ссылки
Прежде чем менять оформление, проверьте, что назначение элемента понятно и текст ссылки описывает переход. Затем выполните шаги:
- Подготовьте цветовую пару для текста и фона.
- Сравните ссылку с обычным текстом и кнопкой в том же блоке.
- Проверьте подчёркивание, контраст и читаемость на разных фонах.
- Просмотрите результат в макете на широком и узком экране.
- Выберите читаемый цвет. Используйте цвет, который заметно отличается от основного текста. Проверьте его на фоне, где размещена ссылка, а при нескольких типах фона отдельно оцените каждый вариант.
- Определите способ выделения. Подчёркивание помогает распознать ссылку внутри абзаца. Если в проекте принято обходиться без него, задайте другой явный признак, который не повторяет оформление кнопок.
- Сопоставьте с обычным текстом. Просмотрите фрагмент целиком: ссылка должна выделяться, но не мешать читать предложение. Не выделяйте случайным образом отдельные слова, если переход относится ко всему смысловому фрагменту.
- Проверьте формулировку. Используйте текст, который помогает понять направление, например название раздела или описание материала. Избегайте неясных подписей без контекста.
- Сверьте с остальными элементами. Убедитесь, что цвет и оформление ссылок применяются последовательно. При обсуждении услуг веб-дизайна для бизнеса запросите единые правила для ссылок и кнопок, а не только отдельный пример экрана.
Настройте состояния ссылки при наведении и фокусе
Состояния должны показывать, что элемент интерактивен, и помогать понять, какой элемент сейчас выбран. После настройки проверьте результат по списку:
- При наведении мышью оформление заметно меняется, но текст остаётся читаемым.
- При фокусе с клавиатуры ссылка получает хорошо различимый индикатор.
- Индикатор фокуса не обрезается контейнером и не сливается с фоном.
- Состояние нажатия не выглядит как отдельная кнопка с другим назначением.
- Посещение ссылки обозначено только в том случае, если это предусмотрено интерфейсом.
- Состояния сохраняют различимость на всех используемых фонах.
- Переход по ссылке открывает именно тот ресурс, который обещает подпись.
Убедитесь, что ссылка остаётся понятной без цвета
Частые ошибки возникают, когда кликабельность обозначена только одним визуальным сигналом или оформление меняется от страницы к странице. Проверьте, нет ли в макете таких решений:
- Цвет ссылки почти не отличается от основного текста.
- В абзаце ссылка ничем не выделена, кроме цвета.
- Подчёркивание используют и для обычного текста, поэтому оно перестаёт обозначать переход.
- Ссылка оформлена как крупная залитая кнопка, хотя ведёт на другой ресурс.
- Кнопка и ссылка имеют одинаковые цвет, форму и состояния.
- Ссылка меняет вид при наведении, но не получает видимого фокуса.
- В разных разделах один и тот же тип ссылок оформлен непоследовательно.
Попросите проверить макет в режиме без восприятия цвета: переход должен распознаваться по форме, подчёркиванию или другому стабильному признаку.
Пройдите финальный чек-лист перед передачей макета
Перед передачей выберите подходящий вариант оформления с учётом контекста:
- Текстовая ссылка в абзаце. Подчёркивание и заметный цвет помогают отличить её от окружающего текста.
- Ссылка в навигации. Используйте единое оформление пунктов меню и явно отмечайте текущее состояние, если оно предусмотрено.
- Ссылка в карточке. Уточните, кликабельна ли вся карточка или только заголовок; не создавайте неоднозначность при наличии вложенных действий.
- Ссылка рядом с кнопкой. Разведите элементы по визуальному весу и подпишите их так, чтобы различались переход и действие.
Финальная проверка макета:
- назначение каждого элемента определено по результату нажатия;
- подписи соответствуют месту или действию, которое они обозначают;
- ссылка различима без опоры только на цвет;
- наведение и клавиатурный фокус предусмотрены;
- на мобильном экране оформление и текст остаются понятными.
Если дизайн создаёт внешняя команда, передайте эти правила вместе с макетом: так требования к ссылкам не потеряются при обсуждении общего объёма работ.
Что проверить в оформлении ссылки перед запуском
Как понять, нужна ссылка или кнопка?
Если элемент переводит пользователя на страницу, раздел или файл, используйте ссылку. Если он выполняет действие на текущем экране, оформляйте его как кнопку.
Обязательно ли подчёркивать текстовую ссылку?
Подчёркивание - понятный способ показать ссылку внутри текста. Если проект использует другой признак, проверьте, что кликабельность остаётся ясной без цвета.
Как выделить ссылку, чтобы не спутать её с кнопкой?
Сделайте текст ссылки заметным, но не копируйте форму и визуальный вес кнопки. Проверьте оба элемента рядом в реальном контексте страницы.
Какие состояния нужно предусмотреть?
Проверьте наведение, фокус с клавиатуры и нажатие. Состояния должны быть различимыми, читаемыми и согласованными с остальным интерфейсом.
Как проверить ссылку без восприятия цвета?
Убедитесь, что её можно распознать по подчёркиванию или другому устойчивому отличию от обычного текста. Проверяйте не отдельный элемент, а фрагмент страницы целиком.
Что передать дизайнеру или разработчику?
Зафиксируйте назначение ссылки, текст перехода, её визуальный стиль и состояния. Добавьте примеры для разных фонов и экранов, если оформление зависит от контекста.