Ссылка связывает веб-страницы или выступает как более легкий аналог кнопки.
- Для перехода между страницами
- Если нужно встроить кнопку в текст. В таком случае используется псевдоссылка
- Для основного действия в модальном диалоге — используйте кнопку
- Для интерактивности вне текста — используйте кнопку без фона
- Текст
- Подчеркивание (для обычных ссылок)
- Иконка (необязательно)
Используется по умолчанию.
Используется там, где нужна ссылка маленького размера (например, в подписи к полю).
Для основных переходов.
Когда важно сохранить родительскую страницу. Используйте ссылки, открывающиеся в новой вкладке, как можно реже.
Для перехода на внешние страницы. Внешние страницы — все, которые не входят в контур продукта (другие продукты компании — тоже не входят). Отличие поддерживается иконкой.
Для обозначения внешних ссылок используйте иконку kbq-north-east_16.
Эта иконка имеет специально подобранные отступы, поэтому для правильного отображения добавьте к элементу ссылки класс .kbq-link_external.
Для открытия в других приложениях. Желательно писать название приложения прямо в ссылке. Для большей наглядности иконку можно заменить на логотип продукта.
Полезно определять, установлено ли десктопное приложение на устройстве пользователя. Если приложения нет, ссылка заменяется обычным текстом.
 |
|---|
| AI на Windows. Ссылки проектов активны и ведут в AI Desktop |
 |
|---|
| AI на macOS. Ссылки проектов отображаются как обычный текст |
Иногда указание продукта и добавление логотипа может быть избыточным. Если вы уверены, что контекст позволяет понять назначение ссылки, эти элементы можно опустить.
Аналог кнопки. Не перезагружает страницу, не открывается в новой вкладке или по ссылке.
Ссылка не должна вести на ту же страницу, на которой она находится. Такие ссылки бесполезны и только запутывают пользователя: кликнул, страница загрузилась и оказалось, что ты остался там же, где и был. Исключение — интерфейсы с обновляемым контентом, где ссылка дублирует обновление страницы.
Используйте псевдоссылку, если нужно встроить действие в текст. Для остальных случаев используйте кнопку без фона.
При печати страницы текст ссылки может меняться на полный адрес ссылки. Это может быть полезно, если использование распечатанного варианта страницы — ожидаемый кейс. Например, можно сохранить ссылки на базы CVE в отчете сканирования уязвимостей. При этом ссылка должна быть без мусора: «http://www» можно опустить.
В распечатанной странице :
CVE-2019-1020010: cvedetails.com/cve/CVE-2019-1020010/
Важно, чтобы ссылка не только выглядела как ссылка, но и работала как ссылка. Характеристики правильной ссылки:
- Можно скопировать адрес ссылки
- Можно открыть ссылку в новой вкладке через контекстное меню или Ctrl+клик
- В разметке использован тег
<a>
 |
|---|
| Правильная ссылка. Можно скопировать адрес, можно открыть в новой вкладке |
 |
|---|
| Неправильная ссылка. Браузер не определил элемент как ссылку |
Клавиша |
Действие |
|---|---|
| \ | Переход по ссылке |
| + | Открыть контекстное меню (для ссылок) |
| (Применимо только для Windows.) |
В многострочных ссылках подчеркивается каждая строка:
Важно, чтобы в многострочных ссылках ховер-зона захватывала межстрочный просвет.
Ссылки: что? где? Псевдоссылки: синтаксис кнопки.
Связанные предлоги заключаются в ссылку:
По умолчанию — слева. Исключение — иконка внешнего перехода.
Иконка входит в область клика, но не подчеркивается.
По умолчанию посещенные ссылки никак не выделяются. Это традиция пошла от истоков интернета, когда гиперссылки были основным способом перемещения между страницами.
Отмечать посещенные ссылки полезно в страницах-сборниках — подборках статей, списке для чтения: выделение цветом отмечает прогресс чтения.