Ссылка — это элемент интерфейса, который зрительно выделяет кликабельный текст на странице. Соответственно, ее основная задача — помочь пользователю легко определить, что на текст можно кликнуть, и понять, к чему это приведет. Грамотно созданные ссылки обеспечат понятную навигацию и облегчат перемещение по сайту и дополнительным материалам.
Базовая анатомия
Обычно, ссылки выделают с помощью цвета или подчеркивания, которое располагается чуть ниже нижней границы текста (на 1-2 пикселя). Межстрочный интервал увеличивают где-то на 2-4 пикселя, чтобы линия подчеркивания не сливалась с текстом следующей строки.
Ссылка в навигации
В навигационных блоках ссылки обходятся без подчеркивания, «полагаясь» на расположение. Отступы между соседними ссылками должны их визуально разделять, но не быть слишком большими. Это относится как к горизонтальному, так и к вертикальному расположению, однако, для горизонтальных ссылок отступы делаются больше.
Области взаимодействия
Кликабельную зону ссылки расширяют за счет практически невидимой области. В меню эта область увеличивается примерно на 8-12 пикселей, а в наборном тексте — на 4-6 пикселей, чтобы не нарушать визуальную гармонию контента.
В обычном состоянии ссылки контрастируют с основным текстом. Традиционный синий цвет можно заменить, но разницу в яркости сделать минимум 30% для надёжного распознавания.
Default
В обычном состоянии ссылки контрастируют с основным текстом. Традиционный синий цвет можно заменить, но разницу в яркости сделать минимум 30% для надёжного распознавания.
Hover
При наведении ссылка должна поменять свой внешний вид: может усилиться подчёркивание, слегка измениться цвет (на 10-15% темнее) или добавиться цвет фона (с прозрачностью 10-15%).
Active
В момент клика цвет ссылки стоит затемнить на 20-30%. Помните, что данное изменение делается заметным, но не отвлекающим.
Visited
Посещённые ссылки приглушаются, их цвет становится на 15-20% менее насыщенным, помогая пользователю ориентироваться в просмотренном контенте.
