Links

Кликабельный элемент с навигационной функцией. При нажатии открывает другую страницу внешнего сервиса или внутри сервиса. Реже переносит пользователя в другую часть страницы.

Могут быть трех типов: normal (акцентный), primary (черный), secondary (серый).

Тип normal

Наиболее привычный и устоявшийся паттерн использования для пользователей. Применяется для визуального отделения элемента внутри текста, таблицы и как часть навигации. Также применяется на страницах ошибок и нулевых состояний.

Тип primary

Применяются, когда пользователю интуитивно понятно, что с элементом можно взаимодействовать, но визуально использование ссылок акцентного цвета перегрузит интерфейс и нарушит баланс элементов на странице.

Тип secondary

Как и ссылки primary, используются, когда пользователю понятно, что с элементом можно взаимодействовать, и есть задача не спорить с акцентами на странице. Чаще используется в хлебных крошках или при отображении второстепенных атрибутов.

Состояния

У ссылок всегда есть дефолтное и ховерное состояние.

Frame 507123500.jpg

При необходимости для посещенных ссылок можно включить маркировку.

Могут применяться как:

  • отдельно стоящие элементы;
  • часть единого текста.

Могут иметь иконку как индикатор перехода к внешнему ресурсу.

Frame 507123501.jpg

Размер

Шрифт текста для ссылок должен соответствовать общей иерархии на странице и быть соразмерным окружающему тексту.

Рекомендации

Текст ссылки должен быть понятным для пользователя даже в отрыве от остального текста и содержать информацию о том, куда перенаправляет ссылка (название сервиса, заголовок или описание раздела).

НазадLabel
ДалееList and list-item