Как стать автором
Обновить

Дизайн-разбор ссылок в вёрстке

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров9.3K

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.

Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.

Материал будет лучше усваиваться, если вы уже понимаете, как устроены в целом HTML и CSS и заглядывали мельком в DevTools (консоль разработчика). Я использую обобщения и опускаю технические моменты, которые могут не влиять на видимое пользователями, но остаются критичными для разработки и экранного «закулисья». Приглашаю вас вооружиться знаниями, но всегда советоваться с разработчиками и заранее проверять с ними дизайн-решения.

Ссылка в вёрстке не обязательно текстовая. Внутри тега <a></a> может быть картинка, иконка, список, контейнер, таблица и многое другое. Единственное ограничение – в ссылку не вкладывают интерактивные элементы, в том числе другие ссылки, кнопки, контролы.

Атрибут href

Это, собственно, сама ссылка. Если просто задать значение атрибуту, например:
<a href="https://www.ozon.ru/"></a>, то пользователь пока ничего не увидит, ведь между открывающим и закрывающим тегом ничего нет. А вот так:
<a href="https://www.ozon.ru/">Перейти на Озон</a> – на странице появится кликабельная ссылка «Перейти на Озон».

При наведении на ссылку многие популярные браузеры отображают в левом нижнем углу адрес из атрибута href. Например, это все браузеры на базе движка Blink: Yandex, Chrome, Opera, Edge и др.

Отображение адреса в левом нижнем углу браузера при наведении на ссылку
Отображение адреса в левом нижнем углу браузера при наведении на ссылку

А скажем, Safari не показывает ссылку при наведении. В сообществах иногда просят помощь с тем, чтобы «отключить» это отображение. Но так делать не стоит: безопаснее, когда пользователь может без специальных знаний увидеть, по какому адресу переходит. С мобильных устройств его, кстати, можно увидеть в контекстном меню по долгому нажатию.

Контекстное меню ссылки на десктопном и мобильном устройстве
Контекстное меню ссылки на десктопном и мобильном устройстве

Якорную ссылку можно узнать по решётке перед id элемента, например:
href="/#services". Кстати, чтобы отправить пользователя по клику вверх страницы, id не нужен. Для этого пишут href="#top" или href="#". Так и работают на сайтах кнопки «Вверх».

По умолчанию переброс пользователя по якорной ссылке выглядит резко. Чтобы сделать скролл плавным, ссылке назначают CSS-свойство scroll-behavior: smooth. А чтобы точнее настроить итоговое положение скролла, назначают CSS-свойство scroll-margin и указывают, на сколько пикселей сместить скролл вверх или вниз относительно блока.

Пример перехода по якорной ссылке «Услуги», расстояние от шапки до заголовка
Пример перехода по якорной ссылке «Услуги», расстояние от шапки до заголовка

В качестве значения может быть не только URL, путь или id элемента, но и телефон или почта:

href="tel:+79996009060"
href="mailto:example@gmail.com"

По клику на номер телефона устройство пользователя предложит совершить звонок или другое возможное действие с номером телефона в установленных приложениях (набор действий зависит также и от ОС).

Что происходит по нажатию на ссылку-телефон на десктопном и мобильном устройстве
Что происходит по нажатию на ссылку-телефон на десктопном и мобильном устройстве

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

Что происходит по нажатию на ссылку-почту на десктопном и мобильном устройстве
Что происходит по нажатию на ссылку-почту на десктопном и мобильном устройстве

Кроме того, с помощью дополнительных параметров можно предустановить:

  • тему письма

  • текст письма

  • и даже почтовые адреса получателей копии (и явной, и скрытой)

Атрибуты title и aria-label

Title хранит в себе текст, который нужно отобразить при наведении на ссылку в нативной всплывающей подсказке. Её внешний вид зависит от операционной системы, а сам текст не обязательно делать таким же, как название ссылки.

Пример отображения title на MacOS
Пример отображения title на MacOS

Aria-label тоже хранит в себе описательный текст для ссылки. Но он не отображается визуально, а служит для инструментов доступности. Это текст, который будет озвучен скринридером при фокусировании на элементе. Aria-label обязателен для ссылок в виде картинок и иконок. Например, для иконки-крестика закрытия окна, иконки-карандаша редактирования параметров.

Атрибут target

Определяет, где откроется указанная ссылка:
target="_self" – на той же вкладке взамен текущей страницы
target="_blank" – в новой вкладке или в новом окне браузера (зависит от его настроек, но чаще всего в новой вкладке)

По умолчанию все ссылки открываются в той же вкладке, даже если не указать атрибут target.

Есть ещё два значения: "_parent" и "_top". Они встречаются там, где используются фреймы (как бы «страницы внутри страницы»). По сути, они позволяют сделать так, чтобы кликнутая во фрейме ссылка открылась целиком во всей вкладке, а не внутри своего фрейма. И для пользователя всё выглядело так, будто он просто перешёл на другую страницу. Обычно дизайнеру достаточно уточнить для разработчика, открыть ссылку в той же вкладке или в новой.

Атрибут download

Если добавить ссылке атрибут download:
<a href="documents/example.pdf" download></a>, то браузер предложит пользователю скачать файл, указанный по ссылке. Файл может быть любого формата.

По умолчанию скачается файл с тем названием, которое у него уже есть. Но можно задать другое название при скачивании, и это не изменит изначальное название файла. Например, благодаря:
download="Мой пример договора", указанное значение отобразится как предустановленное в окне сохранения файла. Лучше не использовать специальные знаки, т.к. вероятнее всего, они будут автоматически конвертированы в нижние подчёркивания. К тому же, у файловых систем есть ограничения на использование специальных знаков в названиях файлов.

Название файла при скачивании изменено относительно оригинала
Название файла при скачивании изменено относительно оригинала

Можно также настроить настроить разные названия для разных условий. Скажем, при скачивании документа в личном кабинете мы хотим добавить к названию договора фамилию пользователя, месяц или год. Тогда одними средствами HTML не обойтись: разработчик подключит Javascript, который обработает условия и подставит в HTML нужное значение.

Атрибут disabled

Если добавить тегу ссылки этот атрибут, она станет неактивной, некликабельной («задизейбленной»). В CSS-свойствах такой ссылки можно прописать параметры, по которым она будет отличаться от активной ссылки. Например, изменить цвет или добавить прозрачность.

Атрибут disabled можно назначить не только ссылке, а любому интерактивному элементу: кнопке, чекбоксу и т.д. Чаще всего неактивные элементы не меняются внешне при наведении или клике, чтобы дополнительно «подчеркнуть» визуально их недоступность. Однако ориентируйтесь на особенности вашего интерфейса.

Состояния активной ссылки

Активная ссылка, в свою очередь, бывает в разных состояниях. Их можно дифференцировать визуально. Давайте посмотрим в консоли разработчика, какие состояния могут быть у ссылки:

Состояния ссылки в DevTools
Состояния ссылки в DevTools

В CSS-файле эти состояния прописываются при помощи одноимённых псевдоклассов. Грубо говоря, это выглядит, например так:
a:hover {
color: #ff35eb;
}
и значит: "текст ссылки при наведении становится розовым".

Состояния в дизайне удобно называть так же, как в коде. Разработчикам понятнее, дизайнеры не путаются. Рассмотрим состояния ссылок (у других интерактивных элементов их бывает больше).

Active – элемент в момент тапа пальцем, клика мышью или нажатия клавиши выбора с клавиатуры (при работе с инструментами доступности).

Hover – элемент при наведении на неё курсора. На мобильных устройствах свойство проявляется, если на ссылку тапнуть и не отпускать.

Visited – «посещённая» ссылка (при этом пользователь не взаимодействует с ней прямо сейчас).

Focus и focus-visible. Давайте поэкспериментируем. Предположим, мы хотим заказать плитку, но у нас есть возможность работать только на десктопном устройстве и только с клавиатуры. Посмотрим несколько первых ответов в гугле на «купить плитку». Переходите по ссылкам и нажимайте клавишу Tab:
https://www.keramogranit.ru/
https://petrovich.ru/catalog/10042/
https://santehnika-online.ru/plitka/keramika/

Хм. Ничего не происходит. Хотя... меняется ссылка в левом нижнем углу браузера (если это Chrome, Yandex и что-то ещё на базе Blink).

Посмотрим ещё, переходите и нажимайте Tab:
https://shop.kerama-marazzi.ru/
https://www.maxidom.ru/catalog/plitka/
https://stroytorg812.ru/catalog/keramicheskaya_plitka/

О, выделяются по порядку все интерактивные элементы. Причём, обводка одинаковая на всех сайтах. Это срабатывает браузерный дефолтный фокус на интерактивных элементах при переходе по клавише Tab. Если при этом включить какой-нибудь скринридер, то названия элементов будут озвучиваться.

Пример дефолтного фокуса на интерактивных элементах
Пример дефолтного фокуса на интерактивных элементах

В первой подборке, где ничего не происходит, вероятно, дефолтный фокус отключили визуально. Это можно сделать, прописав в CSS нулевую обводку для псевдокласса :focus. Таким образом, фокус на интерактивных элементах происходит (это заметно по меняющимся ссылкам слева внизу), но не видимо. С точки зрения доступности это плохо.

Во второй подборке дефолтный фокус сохранён. Но вы могли заметить, что в полях ввода он другой и вписывается в остальной дизайн. Это значит, что в них дефолтный фокус отключили визуально, но прописали новые стили для фокуса с помощью псевдокласса :focus-visible. Его используют для того, чтобы сделать задуманный дизайнерами фокус в таких элементах, как поля ввода, где «сфокусироваться» можно не только с клавиатуры, но и мышью или тачпадом. Таким образом можно сохранить единство стилей сайта для большинства пользователей.

Обычно дизайнерам достаточно показать в библиотеке состояние фокуса для полей ввода и проверить, чтобы в реализации не отключили дефолтный браузерный фокус для остальных интерактивных элементов. Но есть сайты, где изменён и дефолтный фокус под дизайн сайта:

https://spb.leroymerlin.ru/catalogue/plitka/ – жёлтый фокус
https://www.apple.com/macbook-air/ – голубой фокус

Focus-within – состояние элемента, когда в фокус берётся связанный с ним другой элемент. Например, так можно выделить лейбл поля, в котором фокусируется пользователь, или вообще весь блок с формой. Посмотреть примеры

Target – элемент, у которого есть id, в момент, когда к нему перешли по якорной ссылке. Например, вот так:

Ссылка с псевдоклассом :target приобрела жёлтый фон в момент перехода к ней
Ссылка с псевдоклассом :target приобрела жёлтый фон в момент перехода к ней

Состояние элемента «в изначальном спокойствии», когда с ним не взаимодействуют, дизайнеры обычно называют default или enabled. Но будьте внимательны: существует псевдокласс :default, который обозначает изначально выбранный из списка элемент. Например:

Пример элемента с применёнными стилями для псевдокласса :default
Пример элемента с применёнными стилями для псевдокласса :default

Главное – договориться в команде и заонбордить разработчиков в дизайн-библиотеку.

Другие примеры стилизации текстовых ссылок

Какие визуальные свойства можно задать ссылке, помимо базовых цвета, подчёркивания, отступов?

Можно добавит элемент, обозначающий переход по «внешней» ссылке (ведущей на другой веб-ресурс). Скорее всего, вам чаще встречались элементы в конце ссылки, но можно добавить и в начало.

Элемент внешней ссылки в конце и в начале
Элемент внешней ссылки в конце и в начале

Это делается с помощью псевдоэлементов ::after и ::before соответственно. Они прописываются в CSS, узнать их можно по такой конструкции:

a::after {
content: ...;
}

В параметр content можно прописать изображение (лучше отдавать в разработку svg). Таким образом, визуал и размер элемента может быть каким угодно. А ещё можно использовать не изображение, а символ из иконочного шрифта – так не будет посылаться дополнительный запрос на сервер (который был бы нужен для получения изображения).


Ссылке можно задать любое подчёркивание и анимировать его при наведении. Посмотреть примеры.


Можно стилизовать ссылку под кнопку, когда нужно добавить действию визуальный вес на странице. Например:

Пример стилизации ссылки под кнопку
Пример стилизации ссылки под кнопку

Скорее всего, в дизайн-макете вы используете для подобного макета элемент кнопки из дизайн-библиотеки. Но разработчики всё равно сделают её ссылкой, стилизованной под кнопку. Это связано с семантикой элементов вёрстки: важно правильно употребить определённые элементы под определённые задачи. Ссылка <a></a> – это элемент навигации. Он ведёт на другую страницу или к другому блоку на странице. У кнопки <button></button> другое назначение. Она получает, обрабатывает и отправляет данные. В примере выше «Купить билет» – это именно ссылка, которая ведёт на другую страницу покупки билета. Она не обрабатывает и не отправляет никакие данные. А если бы это была такая же кнопка на странице покупки билета после заполнения данных покупателя – она была бы именно кнопкой <button></button>. Вот так.

Делать в дизайн-библиотеке отдельную ссылку-кнопку не стоит, используйте в макетах просто кнопку. Ведь внешний вид элемента – это про стили CSS, а не HTML-тег. В коде ссылке можно просто добавить класс, который содержит визуальные параметры кнопки.

<a href="https://www.ozon.ru/">Купить на Озоне</a> – визуально будет ссылка.
<a href="https://www.ozon.ru/" class="button">Купить на Озоне</a> – визуально будет кнопка, т.к. применятся стили класса button.


А ещё ссылке при наведении можно задать нестандартный курсор. Их внешний вид в разных операционных системах отличается, но значение одинаковое. Посмотреть примеры

Заключение

В заключение ещё раз подчеркну: всегда советуйтесь с разработчиками. Атрибуты и свойства часто меняются, появляются новые, а другие устаревают. Изучайте больше про HTML и CSS – это облегчит общение с техническими командами и расширит понимание возможностей вёрстки. Например, доступно и легко об этом пишут в Доке.

На этом всё. Желаю дизайнерских успехов и гармонии с разработчиками! 🌿

Теги:
Хабы:
Всего голосов 10: ↑8 и ↓2+7
Комментарии5

Публикации

Истории

Работа

Веб дизайнер
30 вакансий

Ближайшие события

Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
OTUS CONF: GameDev
Дата30 мая
Время19:00 – 20:30
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область